LiteNode dark transparent logo Tutorial GitHub logo
▶ Installation

Documentation
Starting
Structuring
Styling
Go Static!
Bonus!

Process

Before we start coding, let's understand how a Markdown file will be processed. Since a picture is worth a thousand words, let's examine and analyze the following diagram made with Mermaid.js.

Process Steps

A diagram showing how a Markdown file will be processed.

  1. Markdown File (A)

    • The process begins with a Markdown file that contains both frontmatter and content. The frontmatter typically includes metadata such as title, date, author, etc., while the content contains the actual Markdown text to be rendered.

  2. Parsed with LiteNode (B)

    • The Markdown file is parsed using LiteNode's parseMarkdownFile or parseMarkdownFileS method. This step separates the frontmatter from the content.

  3. Extract Frontmatter and Content (C1 & C2)

    • Frontmatter (C1): The frontmatter is extracted and stored as a separate object. It contains metadata and additional data needed for rendering.
    • Content (C2): The Markdown content is also extracted separately. This content will be converted into HTML.

  4. Extract Needed Data (D)

    • The extracted frontmatter is processed to extract specific properties required for rendering. This is typically done using the extractMarkdownProperties method. The extracted data might include properties like title, date, and author, among others.

  5. Parsed with Marked (F)

    • The Markdown content is parsed into HTML using Marked.js. This step converts the raw Markdown text into HTML format, which can be directly rendered in a browser.

  6. Combine Extracted Data and Parsed HTML (G)

    • The extracted frontmatter data and the parsed HTML content are combined into a single data object. This data object contains all the necessary information needed for rendering the final HTML template.

  7. HTML Template (H)

    • The combined data object is passed to an HTML template. The template uses this data to populate dynamic content areas, such as inserting the parsed HTML content into a designated section and using frontmatter data to set titles, dates, etc.

  8. Rendered to Browser (I)

    • The final HTML template, now populated with data, is rendered to the browser. This step involves sending the rendered HTML as the response to the client's request, allowing the browser to display the fully rendered content.

Example Code

Here's an example route in LiteNode that demonstrates the entire process:

import { LiteNode } from "litenode"
// or const { LiteNode } = require("litenode")

import { marked } from "marked"
// or const { marked } = require("marked")

const app = new LiteNode()

app.get("/article", async (req, res) => {
    try {
        // Step 1: Parse the markdown file
        // assuming `article.md` is in a `pages` folder which is in the `views` directory
        const { frontmatter, content } = app.parseMarkdownFile(`pages/article.md`)
        // or const article = app.parseMarkdownFile(`pages/article.md`)

        // Step 2: Extract needed data from frontmatter
        const extractedData = await app.extractMarkdownProperties("pages", ["title", "date", "author"])
        // or const {title, date, author} = article.frontmatter

        // Step 3: Parse the Markdown content to HTML with Marked
        const htmlContent = marked.parse(content)
        // or html_content = marked.parse(article.content)

        // Step 4: Combine extracted data and parsed HTML content into a data object
        const dataObject = { ...extractedData, html_content: htmlContent }
        // We can create a dataObject here or pass the data directly as shown below

        // Step 5: Render the HTML template with the data object
        res.render("layouts/article.html", dataObject)
        // or res.render("layouts/article.html", {title, date, author, html_content})
    } catch (error) {
        res.status(500).txt(`Error rendering article: ${error.message}`)
    }
})

Conclusion

This detailed process demonstrates how LiteNode and Marked.js work together to parse a Markdown file, extract necessary data, convert content to HTML, and render the final HTML template to the browser. By following these steps, you can effectively render dynamic and content-rich pages using Markdown files.

Next

In the next section, we will create and render our first Markdown file.

Content