Nodoku demo page

In this documentation we will discover the first steps, needed to setup a Nodoku project

Step 1: Create a NextJS project

Nodoku is a framework, that runs in a NextJS project. In order to start with Nodoku one needs to be familiar with NextJS environment.

If you are not familiar yet with NextJS, please have a look at the NextJS getting started tutorial.

You can also consider using create-next-app tool to setup a NextJS project quickly.

Step 3: Setup a Nodoku page

We assume that after the fist step you are having the following project structure (or similar):

nodoku-project
  |- public
  |- src
  |   |- app
  |   |- globals.css
  |- package.json

nodoku-project
  |- public
  |- src
  |   |- app
  |   |- globals.css
  |- package.json

add to the public folder two files:

my-nodoku-page.md
my-nodoku-page.yaml

These files will constitute the content of the page, and its visual representation respectively.

Under src/app add the files:

layout.tsx
page.tsx

as follows:

src/app/layout.tsx

import "./globals.css";
import React from "react";

export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {

    return (
        <html lang={"en"} dir={"ltr"}>
        <body>
        {children}
        </body>
        </html>
    );
}

import "./globals.css";
import React from "react";

export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {

    return (
        <html lang={"en"} dir={"ltr"}>
        <body>
        {children}
        </body>
        </html>
    );
}

src/app/page.tsx

import React, {JSX} from "react";
import {parseMarkdownAsContent, parseYamlContentAsSkin, RenderingPage, RenderingPriority} from "nodoku-core";
import {nodokuComponentResolver} from "@/nodoku-component-resolver"
import * as fs from "node:fs";
import {commonImageProvider} from "@/app/components/common-image-provider";


export default async function Home(): Promise<JSX.Element> {

    const skin = parseYamlContentAsSkin(fs.readFileSync("./public/site/skin/my-nodoku-page.yaml").toString());
    const content = parseMarkdownAsContent(fs.readFileSync("./public/site/my-nodoku-page.md").toString(), "en", "my-nodoku-page")

    return (
        <RenderingPage
            lng={"en"}
            renderingPriority={RenderingPriority.content_first}
            skin={skin}
            content={content}
            i18nextProvider={undefined}
            imageProvider={commonImageProvider}
            componentResolver={nodokuComponentResolver}
        />
    );
}

import React, {JSX} from "react";
import {parseMarkdownAsContent, parseYamlContentAsSkin, RenderingPage, RenderingPriority} from "nodoku-core";
import {nodokuComponentResolver} from "@/nodoku-component-resolver"
import * as fs from "node:fs";
import {commonImageProvider} from "@/app/components/common-image-provider";


export default async function Home(): Promise<JSX.Element> {

    const skin = parseYamlContentAsSkin(fs.readFileSync("./public/site/skin/my-nodoku-page.yaml").toString());
    const content = parseMarkdownAsContent(fs.readFileSync("./public/site/my-nodoku-page.md").toString(), "en", "my-nodoku-page")

    return (
        <RenderingPage
            lng={"en"}
            renderingPriority={RenderingPriority.content_first}
            skin={skin}
            content={content}
            i18nextProvider={undefined}
            imageProvider={commonImageProvider}
            componentResolver={nodokuComponentResolver}
        />
    );
}

At this point the file page.tsx wouldn't compile, as the following import is missing:

import {nodokuComponentResolver} from "@/nodoku-component-resolver"

import {nodokuComponentResolver} from "@/nodoku-component-resolver"

Let's create it now.

Step 5: Edit the content file, and add component to the skin file

Edit the my-nodoku-page.md as follows:

```yaml
nd-block:
  attributes:
    sectionName: first-page-title
``

# This is my first Nodoku page

```yaml
nd-block:
  attributes:
    sectionName: first-page-title
``

# This is my first Nodoku page

(don't forget to add the third ` on the yaml code snippet)

Edit the my-nodoku-page.yaml as follows:

# yaml-language-server: $schema=../../../schemas/visual-schema.json

global:
  defaultTheme: light

rows:
  - row:
      theme:
        componentHolder:
          base: m-10
      components:
        - core/typography:
            theme:
              containerStyle:
                decoration: container mx-auto text-center
            selector:
              attributes:
                sectionName: first-page-title

# yaml-language-server: $schema=../../../schemas/visual-schema.json

global:
  defaultTheme: light

rows:
  - row:
      theme:
        componentHolder:
          base: m-10
      components:
        - core/typography:
            theme:
              containerStyle:
                decoration: container mx-auto text-center
            selector:
              attributes:
                sectionName: first-page-title

Getting started with Nodoku

In this documentation we will discover the first steps, needed to setup a Nodoku project

Step 1: Create a NextJS project

Step 2: Install Nodoku

Step 3: Setup a Nodoku page

Step 4: Generate component provider and skin schema

Step 5: Edit the content file, and add component to the skin file

Step 5: Run the Nodoku project

Attributions

Fonts and Icons by

Images by