• Nodoku Typography component
  • Definition in Nodoku skin
• HighlightedCode - a utility function component
• Usage
  • Generating prefixed themes
  • Building the whole bundle

GitHub link: https://github.com/nodoku/nodoku-components

nodoku-components is a utility library for Nodoku static site generator.

It contains the following components:

• Typography: Nodoku visual component capable of rendering the textual content based on the Tailwind Typography plugin.

and the following utility functions, intended to be used in other Nodoku components (they are not Nodoku visual components by themselves):

• HighlightedCode: a component capable of rendering a code snippet (based on highlight.js library)
• ListComp: a component rendering lists (Html tags <ul> and <ol>)
• Paragraphs: a utility function used to render paragraphs in a Nodoku component
• Backgrounds: a utility function used to define background of a Nodoku component

Nodoku Typography component

The Nodoku Typography component can be used to beautifully render any textual content, thanks to the Tailwind Typography plugin.

In order to use this component make sure to install (along with nodoku-core) nodoku-components as follows:

npm install nodoku-core nodoku-components

And make sure to run the generation scripts, as described in the nodoku-core documentation.

In addition, the Typography plugin should be defined in the Tailwind config - tailwind.config.ts - that is located in the project, as follows:

import type {Config} from "tailwindcss";
import * as typo from '@tailwindcss/typography';

const config: Config = {
    content: [
        // the Nodoku paths definitions go here
    ],

    theme: {
        extend: {
            typography: {
                DEFAULT: {
                    css: {
                        // unset maxWidth to remove the default sizing of the Typography plugin
                        maxWidth: 'unset', 
                    }
                }
            }
        },
    },
    plugins: [
        typo.default(),
    ],
};

export default config;

Definition in Nodoku skin

The name of the Typography component is core/typography

If everything works well, you should be able to use the Nodoku Typography in the Nodoku skin file as follows:

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

rows:
  - row:
      maxCols: 1
      components:
        - core/typography:
            theme:
              contentContainerStyle:
                decoration: prose-xl p-10 bg-green-100
            selector:
              attributes:
                sectionName: typography2

And here is the MD file to use with this skin

```yaml
nd-block:
  attributes:
    sectionName: typography
``

# Title

## Subtitle

Nodoku is a static site generator, where the content is provided via MD (markdown) files, and the visual representation is controlled using Yaml files - called _skin_.

Nodoku promotes the content-first approach, when the content creation process is not being distracted by the considerations related to the visual representation and design.

The result of the rendering is as follows:

HighlightedCode - a utility function component

This utility component is used to render a piece of code. For highlighting, it uses highlight.js behind the scenes.

The component is capable of displaying a code snippet in pre-selected theme.

This is achieved thanks to the fact that predefined highlight.js theme CSS files are preprocessed, to prefix the classnames with the theme name, as follows (for agate theme):

.hljs-theme-agate code.hljs {
  padding: 3px 5px
}

For more details about this process and the rationale behind this please see the blog article: Highlight your code: scope highlight.js theme to a single component

This componet is used by the Paragraphs components to render the paragraphs that are actually code snippets (represented by NdCode data structure)

Usage

Generating prefixed themes

the script to generate the prefixed CSS themes

npm run highlight.js-prefix

Building the whole bundle

The bundle can be build as follows:

npm run dist

Nodoku license

The Nodoku License to be used depends on the use case you plan to use Nodoku for:

• using Nodoku to build an End Product, which is a webpage or a website for private or commercial use
  • in short, in this case Nodoku is free to use under the MIT License (see below for more details)
• using Nodoku to build an End Product, which is a webpage or a website builder (online or offline)
  • in short, in this case the use of Nodoku is prohibited

Note, that

in any case of the allowed, free-of-charge use of Nodoku, the present Nodoku license should be included in all copies of the Software, using Nodoku.

Use for private, educational or commercial needs, excluding applications for webpage or website building tools

Any use of Nodoku, except for webpage and website builder applications, is allowed free of charge, under the MIT license ( see the LICENSE )

Use as part of website or webpage builders

The use of Nodoku for the purposes to provide a solution for online (or offline) website or webpage builders is prohibited.

This prohibition includes the direct or indirect use of the Nodoku library as part of webpage builder solution.

Indirect use of Nodoku library would include building a software or a framework that would then be used as part of webpage or website builder.

Webpage or Website builder application is any tool, online or offline, that would allow the End User to build a publishable webpage or website, using no code or low amount of code.

This is prohibited under this license term since that would constitute a direct competition to Nodoku lo-code site builder.

Examples

Proper use, free of charge, under the MIT License

• building a webpage or a website for a private non-commercial project
• building a webpage or a website for a private commercial project
• building a webpage or a website for a public commercial or non-commercial blog
• building a webpage or a website for a client, that would use it for commercial or non-commercial purposes
• creating and distributing non-commercially (free of charge) custom Nodoku components
• creating and distributing commercially custom Nodoku components (developing and selling out new Nodoku-compatible UI components)
• developing new UI components and selling them out either as a Nodoku component, or a standalone component, or a component compatible with another website builder

Prohibited use

• building a website builder, that would use the Nodoku engine to provide the End User with a tool, that would allow them building their own webpages or websites
• using Nodoku engine to provide the End User with an automatic, semi-automatic or manual framework, that would allow them building their own webpages or websites
• using Nodoku libraries to use it as part of the solution that would allow the End User to build a webpage or a website