GreatReads - Blog Aggregator · Phoenix Framework

Using custom components with Nuxt-mdc to build a theming system

I'm building a blogging platform ( Writizzy ), an alternative to Ghost or Substack. Under the hood I use Nuxt, but I don't use nuxt-content to have more flexibility, so I use the Nuxt-Mdc module directly. This module allows you to extend markdown to include custom components, such as image galleries, embedded YouTube players, and more. However, Writizzy offers themes, and we want to easily customize components for each theme. In this article, I'll show you how to use Nuxt-Mdc for this fairly common use case. The nuxt-mdc module is used by nuxt content, but it can also be used directly to parse markdown content and render it as HTML. It's a core building block of Nuxt-Content, but fortunately it works as a standalone module. Among Nuxt-mdc's features, you can use MDC components . An MDC component is essentially a markdown syntax that calls a Vue component for rendering. For example, with this markup: We're telling Nuxt-mdc to use the Card component to render the block above. This is also what Nuxt-mdc uses to render all Prose components , which are custom components for headings, links, blockquotes, etc., created after markdown parsing. Internally, each standard Markdown element is transformed into MDC components. For example: is transformed into (This is a simplification . In reality, it's more of a substitution at the renderer level. The renderer reads the AST tree containing an h2 node and decides to use the h2 component to render it. But this is a good way to think about it.) This feature allows Nuxt-Mdc users to customize the rendering of each MDC component, including Prose components. To override a Prose component or create a custom component, you just need to place them in the directory of your Nuxt application. But what if you want these components to change based on the selected theme? That's exactly the question I faced with Writizzy. In Writizzy, I'm developing a theming system. You can choose your blog's appearance from the themes listed here . I partially reused what I had already built for Bloggrify (an open source project for creating static blogs). But with Writizzy, I was quite unsatisfied with this solution, especially for custom components. Obviously, the appearance of custom components should change based on the theme. It turns out there's an undocumented feature in Nuxt-Mdc that does exactly this. By default, the documentation recommends using the MDC component to display markdown, for example: However, MDC uses **MDCRenderer **behind the scenes. And looking at MDCRenderer's source code , we notice an interesting prop: This prop allows you to pass the list of components to use. By default, MDCRenderer will look in this list first, then fall back to , so you can override only the components you want to modify: And that's it! Now you can customize each component based on the theme. This approach works well for Writizzy, and I plan to apply it to Bloggrify as well. If you're using Nuxt-MDC with a theming system, I think this is the cleanest solution—even though it deserves to be officially documented. I've opened an issue to clarify its status. In the meantime, it's working in production on Writizzy without any issues.

HTML Nuxt

Web Development

Tutorial

0 views

codedge 2 years ago

Nuxt 3: Good to know

When switching my personal website to Nuxt 3 I found myself looking and researching all the small things you need to tackle, besides the content, to make it fly. Sitemap, robots.txt, proper page titles, include 3rd party JS and so on. While there is a lot written about a general setup of Nuxt, most blogs almost never talk about these small things. You can find all of these tips in the repository codedge/codedge.de of this site. Most websites you a similar page title like this: For example: Let’s create that. Prerequisites In your you configure the central title content using the configuration: This adds the general part, in my case , to every title for each page. To add the specific title for a page, open one of your files in the directory and add to it. This is going to build a title like . You might want to load scripts, f. ex. tracking scripts, depending on your environment. I wanted to include the Plausible tracking script only on the production environment. In you you can do this: Make sure, you set your correctly according to your site. While including images in your repository might be a fast and straightforward solution you might want to consider using some image service like Cloudinary or Imgix as a central place for your images. I chose Cloudinary which is supported by the NuxtImage plugin. After setting things up you might want to use this in your Markdown files. Using or does unfortunately not work there. Wrapping this inside a Markdown Component (MDC) helps. Create a file in and Add With that in place you can use NuxtImage in your Markdown files by writing You want to serve a custom 404 page, properly styled, whenever a visitor hits an unknown sub-page of your site. Instead of customizing the file, as suggested by other people, I went for writing a custom component which only deals with the 404 error. Add a file and add the following: Additionally to the content itself, we modify the page title and returning a proper 404 http status code. I use this component in my file ( see here ) file. So whenever a request is matched by this catchall route, deliver the 404 page, as probably no other content was found. Currently neither Nuxt 3 or the Content module provides a way to generate a sitemap in the default installation. Luckily this is quick win to set up yourself. First, install the NPM package sitemap by running . Second, create a file with the content Don’t forget to update the hostname in the code. You can now open your sitemap at . You use the pages feature You have a central

Tutorial

JavaScript

Web Development Nuxt

0 views

Can ELMA 4 years ago

The multilingual part of my site built with Nuxt

In this article we'll inspect how the multilingual part of my website works. As seen below, I have defined only two languages. The translation files ( and ) for these languages are located in the folders. With the option set to true, the files will be loaded only when needed. This is not that important though as they are small size files. I disabled the option. Since the is set to , the language prefix will be added to the address for all languages except the default one: -> . There are two flag icons for the supported locales. The flag of the active locale becomes visible. Here's a working example: . Clicking a flag icon switches the locale. This makes more sense, as my site is only available in two languages. When changing language with , you can keep a record of the language being changed or check it on the new route. So if the URL that's visited after the language change gives a 404 error, you can show an error message saying that the page does not have a translated version in that language, instead of showing a regular 404 error message. When the language is changed, if it is not the default one, a language prefix will be added to the URL. Otherwise the language prefix will be removed. Below is the current folder structure I use for my site. From now on, whether you're checking for a post or fetching it, you should always include the language code in your query. There are some other details but I won't talk about them as they are directly related to the installation and use of the and modules. That's all. This is the entire custom structure I use on my site.

Web Development Nuxt

Tutorial

0 views

Can ELMA 4 years ago

Organizing .md files with timestamps in Nuxt

If you are using static site generators, you will be dealing with Markdown files with the extension. Confusion arises especially as the number of .md files increases. For example, let's see the following example: Wouldn't it be better if it was as below: The order is now more apparent, and we can easily see at a glance which files belong to which year or month. Now I will explain how we can create this structure in Nuxt. Let's start by making the following change. Now Nuxt will automatically remove the leading date when creating the for these files. This change necessitates another minor change. Normally, when visiting the path , we would find the corresponding file inside the folder using the part ( ) of that path: This is no longer possible as the relation between the and the filename is corrupted due to the change we made. We can solve this. You should fetch the content as below:

Web Development Nuxt

Tutorial

0 views