From aa932a463c2031e2fa5b06534a0d29e4f2e6060d Mon Sep 17 00:00:00 2001 From: Tero Piirainen Date: Mon, 21 Oct 2024 13:40:14 +0300 Subject: [PATCH] Docs updates --- .gitignore | 1 + packages/nuejs.org/.gitignore | 3 +- packages/nuejs.org/docs/components.md | 146 ++++++++++++++++ packages/nuejs.org/docs/content.md | 27 ++- packages/nuejs.org/docs/docs.yaml | 15 +- packages/nuejs.org/docs/layout.html | 14 +- packages/nuejs.org/docs/layout.md | 162 +++++------------- packages/nuejs.org/docs/styling.md | 101 +++++------ .../nuejs.org/docs/syntax-highlighting.md | 34 ++-- packages/nuejs.org/index.md | 2 +- 10 files changed, 294 insertions(+), 211 deletions(-) diff --git a/.gitignore b/.gitignore index b93267f1..851e313f 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ dist .vscode _test coverage +performance.js \ No newline at end of file diff --git a/packages/nuejs.org/.gitignore b/packages/nuejs.org/.gitignore index 7d97eb05..beb289df 100644 --- a/packages/nuejs.org/.gitignore +++ b/packages/nuejs.org/.gitignore @@ -1,3 +1,2 @@ .dist -@lib/ping.js -*.bak.md \ No newline at end of file +@lib/ping.js \ No newline at end of file diff --git a/packages/nuejs.org/docs/components.md b/packages/nuejs.org/docs/components.md index 0eb136c3..8b100ade 100644 --- a/packages/nuejs.org/docs/components.md +++ b/packages/nuejs.org/docs/components.md @@ -14,6 +14,152 @@ You can create custom layout components and custom Markdown extensions for conte ``` +## Helper components +Nue offers a set of built-in helper components to help you construct the layout modules. + + +### Navi +Most of your layout modules relate to navigation: the global header and footer, sidebars, and the burger menu typically consists of links to the various pages on your website. The `` tag is a useful utility to render those links using the data on your [settings and data files](settings-and-data.html). Here is an example header: + +``` +
+ + + Logo + + + + +
+``` + +Here is the navigation data in `site.yaml`: + +``` +mastnav: + - Documentation: /docs/ + - About: /about/ + - Blog: /blog/ + - "v1.0 is out!": /blog/v1.0/ "badge" +``` + +The header would render as follows + +``` +
+ + Logo + + +
+``` + +A quoted string ("badge") after the URL becomes a class name for the link. + + +#### Hierarchical navigation +You can also supply hierarchical data for the navi tag: + +``` +footer: + Product: + - Download: /download/ + - Features: /features/ + - Pricing: /pricing/ + - Docs: /docs/ + + Company: + - About us: /about/ + - Blog: /blog/ + - Careers: /careers/ + - Customers: /customers/ +``` + +Now `` would render the following: + +``` +
+ + + +
+``` + + + +### Markdown +Renders a Markdown-formatted string given in the `content` attribute. + +``` + +``` + + +### Ppretty-date +Pretty-prints a date value given in the `date` attribute. + +``` + +``` + +Here is an example "hero" area for a blog entry that uses the `markdown` and `pretty-date` tags: + + +```html +
+ + +

+ +
+ +
+
+``` + + + +### Table of contents +Use the built-in `` tag to render the table of contents parsed from the current Markdown document and it's second and third level headings (h2, h3): + +``` + +``` + +This Markdown document, for example renders the following: + +```html +
+ + +
+``` diff --git a/packages/nuejs.org/docs/content.md b/packages/nuejs.org/docs/content.md index b47a9338..faae9c37 100644 --- a/packages/nuejs.org/docs/content.md +++ b/packages/nuejs.org/docs/content.md @@ -4,10 +4,25 @@ include: [tabs] --- # Content -Nue provides an extended Markdown syntax for authoring web content. In addition to the basic text formatting, you have sections, grids, responsive images, videos, tabbed content, and more. You can rapidly assemble complex web pages without ever touching a single line of code or the need to set up complex cloud-based content database systems. Just simple versionable text files, directly accessible on your file system, and editable with your favorite editor. +Nue provides an extended Markdown syntax for authoring web content. In addition to the basic text formatting, you have sections, grids, responsive images, videos, tabbed content, and more. You can rapidly assemble complex web pages without ever touching a single line of code. Just simple versionable text files, directly accessible on your file system, and editable with your favorite editor. -## Basic Markdown +## Content development + +content first, information + +- narrative + +1. Marketing content: landing pages, product tours, etc. usually contain sections, +2. Technical content + +3. Blog content: hybrid. starts with a hero section, following with technical content. occasionally mixes of more complex layouts between the content flow. + + + + + +## Basic syntax Nue offers a full [Markdown support](//daringfireball.net/projects/markdown/). That is: All the familiar things like headings, quotes, lists, and fenced code blocks are supported: @@ -31,7 +46,9 @@ Followed with - list of items ``` -## Extended Markdown +## Extended syntax +tables +footnotes ### Formatting @@ -603,7 +620,7 @@ Note that the component name "block" can be omitted and you can simply write the -### Stacks and grids +### Flex- and grid layouts Nue automaticslly splits the the nested content multi-block layouts where each item is separated with a triple-dash ("---") or based on the heading structure. For example: ```md @@ -639,7 +656,7 @@ The stack is rendered with two inner divs: ``` -#### Code stack +#### Code blocks Here is another stack example with two code blocks separated with a triple-dash: diff --git a/packages/nuejs.org/docs/docs.yaml b/packages/nuejs.org/docs/docs.yaml index 393600ef..9ee47dd4 100644 --- a/packages/nuejs.org/docs/docs.yaml +++ b/packages/nuejs.org/docs/docs.yaml @@ -2,11 +2,15 @@ include: [technical-content, video, toggle-switch] footer: false +lang: + on_this_page: On this page + zen_mode: Zen Mode + sidenav: Getting started: - - What is Nue?: /docs/ + - Why Nue: /docs/ + - How it works: /docs/ - Installation: installation.html - - Command line interface: command-line-interface.html Building websites: - Quick start: tutorial.html @@ -17,13 +21,14 @@ sidenav: - Islands: islands.html - Styling: styling.html - Scripting: scripting.html + - Motion: motion.html - Optimization: optimization.html - # - CSS best practices: css-best-practices.html + Reference: - Settings index: settings.html - - Component index: components.html - - Component syntax: .. + - Built-in components: components.html - Template syntax: template-syntax.html - Syntax highlighting: syntax-highlighting.html + - Command line interface: command-line-interface.html diff --git a/packages/nuejs.org/docs/layout.html b/packages/nuejs.org/docs/layout.html index db88eb55..40d2778c 100644 --- a/packages/nuejs.org/docs/layout.html +++ b/packages/nuejs.org/docs/layout.html @@ -1,24 +1,26 @@ - + - + - - +