Nodoku is a set of libraries that allows building effortlessly a landing page or a static site
Nodoku is a framework on top of NextJS, React and Tailwind.
Nodoku is using the underlying NextJS capabilities of Server-Side-Rendering (SSR).
The Nodoku engine parses the supplied Markdown file into content blocks.
Then it renders each block using the configuration provided in the Yaml file - called skin.
Nodoku way
Nodoku suggests a simple way of creating content-centric landing pages, using Markdown and Yaml
Step 1: Think
Create content promoting your product or service as an MD file
Concentrate on the subject of your product / service to highlight its advantages.
Use your favorite text editor to create a content-rich MD (markdown) file, without worrying about presentation.
Using content block delimeter - a Yaml code snippet - structure the content file, so that it can be submitted to the Nodoku parser.
Step 2: Skin
Skin the MD file using simple Yaml config and available components
Once you are happy with the message your landing page conveys, start by skinning it up.
Nodoku skin is a Yaml file, which binds together sections in your MD file, with the presentation blocks.
You can choose among different presentation components, including Carousel, Hero and different types of Card components.
Step 3: Fine tune
Use configuration options to fine tune your landing page presentation
If the default presentation doesn't suit your needs, you can tweak it up using the config options of each component to fine tune it for your needs.
You can change the background color, text color, borders and other visual details of your presentation.
Normally the Nodoku components support Tailwind CSS out of the box, so you can fine tune ivsual presetnation using Tailwind.
Here is an example
Suppose you are creating a product landing page
Create an MD file
create a Markdown content file, describing your product
# Title of my awesome product
## Subtitle of my awesome product
Description of my product.
And another line of description.
Draft a skin Yaml file
draft a Yaml file configuring the visual representation
rows:
- row:
components:
- mambaui/hero-left-text:
selector:
attributes:
id: product-1
And here is the result
Title of my awesome product
Subtitle of my awesome product
And Yes!
This whole site was generated with Nodoku!
Check out the source code of this page at
https://github.com/epanikas/nodoku-demo-page
Why you would like to give Nodoku a try
Distraction-free content-first approach
Unlike Nodoku, the vast majority of site builders are using the so-called WYSIWYG (What You See Is What You Get) approach, when the site is being built gradually, by filling in the web-forms right on the visual elements.
Even though this approach gives a very fast visual impression of your future page, it has a major drawback - it is very distracting.
Nodoku is suggesting a different approach - you create content first.
The content is created in a textual form in a Markdown file, and at this moment nothing else matters.
Content and presentation are strictly separated
Nodoku promotes a strict separation between the content and the presentation, allowing for a great deal of flexibility, when one can be changed without affecting the other.
This approach is illustrated by the fact that the content and the design are represented by different files - Markdown file for content, and Yaml file - called skin - for visual presentation.
Keeping content and design concepts strictly separated allows for independent editing of both, without worrying about the impact that one might have on another.
Built-in multilingual localization
Nodoku has been designed from ground up keeping in mind the necessity of the content localization.
The content in Nodoku is represented by a set of content blocks, each of which is a separated piece of content (usually a paragraph or a title).
The content becomes easily localizable, since each content block has its unique key.
This key can naturally be used as a translation key, that can be integrated with the localization solution of your choice.
Check out nodoku-i18n for more details.
Nodoku components are naturally responsive
Each Nodoku component is carefully crafted such that it would be presented correctly on any browsing device.
The currently available sets of Nodoku components, Nodoku-Flowbite and Nodoku-MambaUI based on Flowbite and Mamba UI set of visual blocks respectively, are all responsive to provide the best user experience.
The Nodoku skin - a Yaml file providing visual customization - is based on the Tailwind CSS styling engine, which gives large possibilities for responsive design tuning.
Layout, based either on CSS grid or CSS flex
A Nodoku page is organized as a set of rows, each row having one or more visual components.
Such row-oriented layout gives a clear understanding of the structure of your page, and predictable visual element placement.
By default, each row in a Nodoku page is using CSS grid to organize the row inner elements.
However, the layout of a row can be switched to CSS flex, if required.
This allows, depending on your particular requirements, adapt the layout that best suits your needs.
SEO friendly, thanks to Server-Side rendering
Nodoku is using Server-Side Rendering, powered by the NextJS framework.
All the Nodoku pages are pre-built in advance during the offline build process.
This allows not only for the lightning fast page loading, but also for Search Engine Optimization, since each page is readily available, and can be scanned by the search engines easily.
No Javascript code is required to be executed prior to page scanning by the web search engine.
Consequently, the whole page naturally becomes SEO friendly.
Extensible with new visual components
Nodoku framework is extensible by design, since it is the end user that controls the mapping between visual components and Yaml skin configuration.
Nodoku is using the so-called component provider - a function that returns a visual component representation according to the Yaml skin file description.
This implementation is responsible for the ultimate component rendering, using the theme and localization.
Consequently, the end-user can easily extend the existing set of components by custom ones, as required.
The same cards can be presented as the Carousel component
This is just a matter of skin configuration
rows:
- row:
components:
- flowbite/carousel:
selector:
attributes:
sectionName: advantages
