How works
The website was made using Typescript as language, Next.js as framework, and Contentlayer as content management.
The posts are in .mdx format, a powerfull Markdown syntax. For more information, see https://mdxjs.com/.
All the posts are on content/posts and the definition is on content/definitions/Post.ts. The file contentlayer.config.ts have the contentlayer config and rehype/remark plugins.
The post have a header, defined by two ---, one on top of header, and another in the end of header. The header contains the post metadata, in yml format. E.g.:
---
title: 'Black Wallpaper Bug on XFCE4'
date: '2021-06-21'
lastUpdate: '2022-08-10'
description: 'Black wallpaper on xfce4 when restart the computer'
category: 'XFCE'
tags: 'bug, desktop, how-to'
---
# How to fix
This problem consists of black backg...| Key | Value |
|---|---|
| title | title of post |
| date | date of first publication in format yyyy-mm-dd |
| lastUpdate | date of last update in format yyyy-mm-dd |
| description | a concise description of post content |
| category | the main category of what post is talking about |
| tags | a list of keyword separated with , |
Like said before, posts are written using Markdown syntax. You can learn more about in this page.
The footer of the post need to be the References section, with a separator line to divide from the content body. The References section is a list of references that were used to make the post, any references.
This is the list of plugins that are being used by contentlayer now.
remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists).
Remark and rehype plugins to support math.
E.g.:
Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.
$$
L = \frac{1}{2} \rho v^2 S C_L
$$This package is a unified (remark) plugin to turn soft line endings (enters) into hard breaks (
s). This plugin is useful if you want to display user content closer to how it was authored, because when a user includes a line ending, it’ll show as such. GitHub does this in a few places (comments, issues, PRs, and releases), but it’s not semantic according to HTML and not compliant to markdown. Markdown already has two ways to include hard breaks, namely trailing spaces and escapes (note that ␠ represents a normal space):
lorem␠␠
ipsum
lorem\
ipsumBoth will turn into <br>s. If you control who authors content or can document how markdown works, it’s recommended to use escapes instead.
Sprinkle hints/tips/warnings on your documents
markdown input
!> Here is a tip.
?> And a warning.
x> Or an error.html output
<p class="hint tip">Here is a tip.</p>
<p class="hint warn">And a waring.</p>
<p class="hint error">Or an error.</p>UI
A Rehype plugin that provides beautiful code blocks for your MD/MDX docs. Leverage the accuracy of VS Code's syntax highlighting engine and the popularity of its themes ecosystem, powered by Shiki. No missing tokens or unexpected broken syntax highlighting.
Rehype plugin to add html ids to headings. It looks for headings (so <h1> through <h6>) that do not yet have ids and adds id attributes to them based on the text they contain. The algorithm that does this is github-slugger, which matches how GitHub works.
A rehype plugin that adds a table of contents (TOC) to the page
Features
- Adds a
<nav>and<ol>list outlining all headings on the page - Combine with rehype-slug to create links to each heading
- Ignores headings outside of
<main>if it exists - You can customize which headings are included (defaults to
<h1>-<h6>) - You can customize the CSS classes on every TOC element
- Hooks give you complete customization of the generated HTML
rehype plugin to render <span class=math-inline> and <div class=math-display> with KaTeX. You can combine it with remark-math for math in markdown or add math-inline and math-display classes in HTML. This project is useful as it renders math with KaTeX at compile time, which means that there is no client side JavaScript needed.
rehype plugin to add links to headings with ids back to themselves. This package is a unified (rehype) plugin to add links from headings back to themselves. It looks for headings (so <h1> through <h6>), that have id attributes, and injects a link to themselves. Similar functionality is applied by many places that render markdown. For example, when browsing this readme on GitHub or npm, an anchor is added to headings, which you can share to point people to a particular place in a document.
rehype plugin to change the rank of headings.