I have set up a next.js markdown blog using mdx: https://mdxjs.com/.
I would like to be able to reference data in the frontmatter section within the mdx file itself. Something like this:
// my-file.mdx
---
title: "My blog post title"
# {title} // should be replaced by the frontmatter title
Now, this does not work. It does NOT replace {title} with the title found in the frontmatter (i.e,. My blog post title). What I am wondering is whether or not there is a way to do this and, if so, how?
Thanks.
Check out the Docusaurus docs page on available exports. For your example, title is available as <p>{contentTitle}</p>. For more specific keys, you can use something like:
<p>{Object.entries(frontMatter).find(frontmatter => frontmatter[0] === 'description'}</p>
to retrieve, in this example, the description. (Replace html <p> tag with whatever tag is appropriate.)
Related
I have set up a Gatsby blog that uses md files to create pages for each blog post. I want to use Narrative.so (photo layouts) for the content of each blog. Using their software, it generates HTML for you to paste into your site's page.
Would this be possible in Gatsby?
Here is the HTML it gave me as an example:
<div class='nar-root' data-post-id='9ab2885d-f0e8-4d00-9c59-135ab04fc384' style='p {text-align:center;opacity: 0.0;animation: nara 0s ease-in 2s forwards;}#keyframes nara {to {opacity: 1.0;}}' >
<img style="width:100%;" src="https://content1.getnarrativeapp.com/static/9ab2885d-f0e8-4d00-9c59-135ab04fc384/featured.jpg">
<noscript><p>Your Narrative blog will appear here, click preview to see it live.<br>For any issues click here</p></noscript>
<script type="text/javascript" src="https://service.getnarrativeapp.com/core/embed/r/9ab2885d-f0e8-4d00-9c59-135ab04fc384.js"></script>
</div>
Yes, it is possible. Here is one possiblity:
Add MDX support to your blog
With MDX you can embed React components into your markdown file.
// markdown file
import { NarrativePhotoLayout } from '../components/NarrativePhotoLayout'
# Here’s a NarrativePhotoLayout
The NarrativePhotoLayout is rendered inside our MDX document.
<NarrativePhotoLayout/>
Build a React component that contains your HTML. This answer tells you how.
Embed your React component in your blog post.
I am migrating from a handlebars based static site generator. Authors of pages are allowed to use either html or markdown. Therefore i have lots of partial html files for which i need to create pages. These html files are in fact .hbs file (handlebars), but there are no expressions, just plain html element with some frontmatter.
For example:
---
title: Example
author: Narendra
---
<div>
<h1>Example</h1>
<p> .. </p>
</div>
Authors are able to drop these files inside a directory structure.
I have not been able to find a transformer that can deal with such file. Am i missing something? Do i need to create a custom transformer for this.
AFAIK markdown is a superset of html, so gatsby-transformer-remark should be able to handle these .hbs.
Unfortunately there's no way that I know to make gatsby remark accept .hbs extension, but I think renaming them should do the trick.
I'm using Contentful for storing content for articles and React markdown for parsing and it works very well. But i don't know what what exat to do when it comes to alignment of images like two images side by side.
Is there there a way to see in the markdown how many images are renderad? Then i could do alignment based on how many images there is in the markdown
You could style images using the next-sibling selector.
Perhaps something like this:
img + img { /* styles for any image directly after another image */ }
You can insert some HTML (which is not the ideal solution) in the markdown like <img='img' class='align-left' /> you can also have a separate field of type asset list and you get these image separately and add them to your HTML
I'm trying to use react.js in Hugo. I know Go template variables are accessible in HTML file.
My question is how to access them in javascript. or is there a workaround?
thanks in advance.
UPDATE：
currently my workaround is to use meta tags in HTML and load Go template variables like this:
<meta name="title" content={{.Title}} />
and then in javascript,
function getMetaTitle() {
var metas = document.getElementsByTagName('meta');
for (i=0; i<metas.length; i++) {
if (metas[i].getAttribute("name") == "title") {
return metas[i].getAttribute("content");
}
}
return "failed to access...";
}
var metaTitle = getMetaTitle();
but this way is inconvenient when the number of meta tags growing, is there a more concise way to do this?
I doubt Hugo and React is a good pair but that's off topic and I might be wrong about that. You are asking, how to get Hugo variables into website's JavaScript. My answer:
Hugo is static website engine, so it only converts templates and markup documents (with your content) into HTML files. Now, when you upload your files onto your server, your JS cannot see anything Hugo — only your files.
The question becomes, how to transfer Hugo variables into some files of your website.
As you suggested, it's best to write variables into your HTML (or JSON) using Hugo, then read them by JS. If it's small amount, use attributes or tags. If there's a lot and it doesn't differ per-page, use a separate JSON file.
For example, personally I have a multilingual site which a) requires different language titles to appear dynamically via JS; b) uses JS which queries different Lunr.js search indexes in JSON format.
For both I use data-<name> attributes:
<section class="section-search" data-index="{{ .Site.BaseURL }}searchIndex.json" id="section-search">
<input type="search" id="search-input" placeholder="{{ ( index $.Site.Data.translations $.Site.Params.locale ).dataloading }}" data-loaded="{{ ( index $.Site.Data.translations $.Site.Params.locale ).dataloaded }}">
<!-- search button goes here -->
</section>
For example, on English templates (rendered into /public/), data-loaded attribute would be in English, but for Lithuanian templates (rendered into /public/lt/), data-loaded attribute would be in Lithuanian.
I wouldn't worry about "growing meta tags", but you could maybe write variables into a JSON file and then read it in JS if you are concerned about HTML bloat?
I'm building custom JSON first as HTML, then minifying/renaming it into JSON when building indexes for Hugo Lunr search as per this recipe. Instead of "baking in" the content with range as in mentioned recipe, you could simply list all the variables.
By the way, I'm using npm scripts as a build runner (instead of Grunt/Gulp) so I use json-minify:
"index:prepare": "json-minify public/json/index.html > public/site-index.json",
You could "bake" JSON files with any content (including Hugo template variables) via Hugo this way. Hope it helps.
You can specify a custom output format for Javascript within your config.toml so that Hugo then treats those particular formats and file extensions like it's content files where it replaces the template variables with adequate values.
So, an entry such as below in your config.toml will treat javascript files as one of the media type it needs to consider for its custom output formats:
[mediaTypes]
[mediaTypes."application/javascript"]
suffix = "js"
You can read more about it here
You can, of course, inline your JS in your layout files, but that is probably not what you want.
There have been some discussions about improvements in this area on the Hugo discussion site, but nothing concrete yet.
I've managed to build a page that will display data from the database dynamically. However, this code which is saved in the database:
<p>This is the content for the radio page.</p>
Displays like this:
<p>This is the content for the radio page.</p>
The HTML tags aren't rendered. I understand that Symfony (for security purposes) renders any HTML code like this for security reasons. I want Symfony (obviously) to render these HTML tags. How can I achieve this just for this purpose only, so that Symfony still sanitises any HTML tag that is saved to the database elsewhere on the site?
For your information as well, this is the code that I am using to pull the data from the database:
public function mainpageAction($slug)
{
$content = $this->getDoctrine()
->getRepository('SiteMainBundle:Content')
->find($slug);
if (!$content) {
throw $this->createNotFoundException('No product found for slug '.$slug);
}
return $this->render('SiteMainBundle:Default:page.html.twig', array('content' => $content, 'slug' => $slug));
}
Also, just so I can learn more about Symfony, is the rendering of the HTML tags just the sole job of PHP or could it be rendered properly using Twig?
Many thanks!
If you want to do that, you need to use the raw filter in the twig template. Like described in the twig documentation, the raw filter marks the value as safe which means that in an environment with automatic escaping enabled this variable will not be escaped if raw is the last filter applied to it.
In your case, it's : {{ content | raw }}