nibula 2.0.2 → 2.2.0

package/docs/Project structure.md

@@ -17,7 +17,7 @@ your-project/
     └── frontend/
         ├── assets/       # Images, fonts, brand files
         │   └── brand/    # Favicons, logo etc
-        ├── components/   # Reusable .njk fragments
+        ├── components/   # Reusable .njk fragments and .md content
         │   └── global/   # Header and footer, included in every page
         ├── data/         # site.json and pages.json
         ├── hosting/      # .htaccess and web.config
@@ -35,6 +35,7 @@ your-project/
 | Add a page | `nib cli` → creates the files in `routes/`, `scss/pages/`, `js/pages/` |
 | Write the content of a page | `routes/` |
 | Build a reusable block of markup | `components/` |
+| Write long prose in Markdown | `components/` — see docs/Components.md |
 | Change the header or footer | `components/global/` |
 | Style one page | `scss/pages/` |
 | Style every page | `scss/_global.scss` |
@@ -57,7 +58,7 @@ your-project/
 
 Subfolders are allowed wherever content is yours to organize:
 
-- `components/` — nest as deep as you like; includes take the path relative to `components/`
+- `components/` — nest as deep as you like; includes take the path relative to `components/`, and so does the `markdownPath` filter
 - `scss/modules/` and `js/modules/` — same idea, remember to update the relative import paths
 - `layouts/` — extra layouts alongside `base.njk`; routes pick one by filename
 - `backend/api/public/` and `protected/` — subfolders become part of the URL

package/docs/Styling with SCSS.md

@@ -78,6 +78,9 @@ body {
 | `_footer.scss` | Footer styles |
 | `_mobile.scss` | Media query rules |
 | `_animations.scss` | Keyframe animations (`fade-in`, `spin`) |
+| `_markdown.scss` | Styling for Markdown rendered with `renderFile`. See **Components** DOC file |
+
+> If you don't use Markdown files as components, comment its import from `_global.scss`.
 
 ## CSS Framework
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nibula",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "description": "A beginner-friendly static site generator built on Eleventy that stays close to vanilla HTML, CSS and JS — with a page-management CLI, an optional PHP backend, and SEO files generated for you.",
   "keywords": [
     "11ty",
@@ -63,6 +63,8 @@
     "esbuild": "^0.27.3",
     "foundation-sites": "^6.9.0",
     "glob": "^13.0.6",
+    "markdown-it-anchor": "^9.2.1",
+    "markdown-it-attrs": "^5.0.1",
     "sass": "^1.77.0",
     "uikit": "^3.25.13"
   }

package/src/frontend/layouts/base.njk

@@ -1,4 +1,4 @@
-<!-- This is the base of every page that you will create -->
+{# This is the base of every page that you will create #}
 
 <!DOCTYPE html>
 <html lang="{{ site.lang or 'en' }}" data-theme="{{ site.theme or 'light' }}" data-bs-theme="{{ site.theme or 'light' }}">

package/src/frontend/routes/404.njk

@@ -4,7 +4,12 @@ permalink: "404.html"
 layout: base.njk
 ---
 
-<!-- !IMPORTANT -->
-<!-- To keep order, the best practice is to create a new component.njk file in components/ and include it here-->
+{# To keep order, create a new component in components/ and include it here #}
+{% include "not-found.njk" ignore missing %}
 
-{% include "not-found.njk" ignore missing %}
+{# Markdown files live in components/ too. Pass the data the file needs #}
+{#
+<article class="markdown-body">
+    {% renderFile "your-file.md" | markdownPath, { site: site } %}
+</article>
+#}

package/src/frontend/routes/index.njk

@@ -4,7 +4,12 @@ permalink: "/"
 layout: base.njk
 ---
 
-<!-- !IMPORTANT -->
-<!-- To keep order, the best practice is to create a new component.njk file in components/ and include it here-->
+{# To keep order, create a new component in components/ and include it here #}
+{% include "welcome.njk" ignore missing %}
 
-{% include "welcome.njk" ignore missing %}
+{# Markdown files live in components/ too. Pass the data the file needs #}
+{#
+<article class="markdown-body">
+    {% renderFile "your-file.md" | markdownPath, { site: site } %}
+</article>
+#}

package/src/frontend/scss/_global.scss

@@ -11,6 +11,9 @@
 // @import "modules/frameworks/foundation";
 // @import "modules/frameworks/uikit";
 
+// Markdown styling. Applies to content rendered with renderFile
+@import "modules/markdown";
+
 // Modules imports
 @import "modules/typography";