nibula 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -5,6 +5,35 @@ All notable changes to Nibula are documented here.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.0] - 2026-08-18
+
+### Added
+- **Markdown rendered with `renderFile` is styled out of the box.**
+  `src/frontend/scss/modules/_markdown.scss` carries GitHub's Markdown layout —
+  tables, code blocks, blockquotes, heading spacing — scoped to a
+  `.markdown-body` container. Markdown produces plain HTML with no classes, so a
+  rendered `.md` came out as unstyled text regardless of the CSS framework in the
+  project. Colours follow `data-theme`, and the background is transparent so the
+  block sits on the page instead of on a panel of its own.
+- The commented `renderFile` example in the route template now shows the
+  `.markdown-body` wrapper, which is what applies the styling.
+
+### Changed
+- `docs/Components.md` documents the wrapper as part of the `renderFile` line,
+  and no longer says Markdown comes out unstyled: `{.class}` is now for adding
+  your framework's classes to specific elements, not for making the content
+  presentable in the first place.
+- `docs/Styling with SCSS.md` lists `_markdown.scss` among the pre-existing
+  modules, noting that it is generated rather than hand-written and that its
+  import has to stay after the framework for its table and code block rules to
+  win.
+
+### Notes
+- The styling lands in newly created projects only. To adopt it in an existing
+  one, copy `src/frontend/scss/modules/_markdown.scss` and import it in
+  `_global.scss` after the framework, then wrap your `renderFile` calls in
+  `<article class="markdown-body">`.
+
 ## [2.1.0] - 2026-08-17
 
 ### Added

package/docs/Components.md

@@ -25,7 +25,7 @@ Components are included in the page that renders them. Open the page's file in `
 
 ### example-page.njk <small>(`src/frontend/routes/`)</small>
 
-```njk
+```js
 ---
 title: "examplePage"
 permalink: "/example-page/"
@@ -49,7 +49,7 @@ Writing HTML directly in the route works too, and is perfectly fine for a short
 A component can include other components. This is useful for breaking complex sections into smaller, reusable pieces.
 
 ### exampleComponent.njk
-```njk
+```html
 <section class="hero">
   {% include "hero/hero-title.njk" %}
   {% include "hero/hero-button.njk" %}
@@ -86,14 +86,17 @@ Regular paragraph text. **Bold** and *italic* work as usual.
 
 Open the page's file in `src/frontend/routes/` and add this line to its body:
 
-```njk
-{% renderFile "article.md" | markdownPath, { site: site } %}
+```html
+<article class="markdown-body">
+    {% renderFile "article.md" | markdownPath, { site: site } %}
+</article>
 ```
 
-Three parts to it:
+Four parts to it:
 
 | Part | What it does |
 |---|---|
+| `class="markdown-body"` | the wrapper that applies the Markdown styling — without it your content renders unstyled |
 | `renderFile` | turns the Markdown into HTML and puts it in the page |
 | `markdownPath` | fills in the `src/frontend/components/` part of the path for you |
 | `{ site: site }` | hands the file your site settings — see below |
@@ -112,7 +115,7 @@ Welcome to {{ site.title }}
 But a Markdown file does not automatically see them. Anything the file needs has
 to be listed in the curly braces:
 
-```njk
+```js
 {% renderFile "article.md" | markdownPath, { site: site, pages: pages } %}
 ```
 
@@ -160,7 +163,7 @@ src/frontend/layouts/
 
 Same as `base.njk`, without the two global includes:
 
-```njk
+```html
 <body>
     <main>
         {{ content | safe }}
@@ -172,7 +175,7 @@ Then point the route at it:
 
 ### landing.njk <small>(`src/frontend/routes/`)</small>
 
-```njk
+```js
 ---
 title: "landing"
 permalink: "/landing/"
@@ -218,7 +221,7 @@ All values defined in `src/frontend/data/site.json` are globally available in ev
 `legal.privacy`, `legal.cookie` and `legal.terms` hold the URLs of your legal pages — the footer links to them. See **Head & SEO** DOC file for what every field does
 
 ### Usage in any `.njk` file
-```njk
+```html
 <p>{{ site.title }}</p>
 <a href="{{ site.legal.privacy }}">Privacy Policy</a>
 <img src="{{ site.logo }}" alt="{{ site.title }}">

package/docs/Creating pages.md

@@ -35,7 +35,7 @@ A page that needs a different shell — a landing page with no header, for insta
 
 To create a URL like `domain.it/about/team`, edit the `permalink` in `src/frontend/routes/team.njk` and add the parent segment before the final slash:
 
-```njk
+```js
 ---
 title: "team"
 permalink: "/about/team/"

package/docs/Head and SEO.md

@@ -116,7 +116,7 @@ aren't things you'd want.
 
 One value in `site.json` controls the colour scheme everywhere:
 
-```njk
+```html
 <html data-theme="{{ site.theme }}" data-bs-theme="{{ site.theme }}">
 <meta name="color-scheme" content="{{ site.theme }}">
 <meta name="theme-color" content="{{ site.theme_color }}">

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.1.0",
+  "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",

package/src/frontend/routes/404.njk

@@ -8,4 +8,8 @@ layout: base.njk
 {% include "not-found.njk" ignore missing %}
 
 {# Markdown files live in components/ too. Pass the data the file needs #}
-{# {% renderFile "example.md" | markdownPath, { site: site } %} #}
+{#
+<article class="markdown-body">
+    {% renderFile "your-file.md" | markdownPath, { site: site } %}
+</article>
+#}

package/src/frontend/routes/index.njk

@@ -8,4 +8,8 @@ layout: base.njk
 {% include "welcome.njk" ignore missing %}
 
 {# Markdown files live in components/ too. Pass the data the file needs #}
-{# {% renderFile "example.md" | markdownPath, { site: site } %} #}
+{#
+<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";