site
scripts to generate personal blog and git repositories
git clone https://9o.is/git/site.git
commit 958c20863903d958dfca2d3f8a234b0a9e053e4b parent 5758ef44a034505ed3e34e3b3db36c11d83d9539 Author: Jul <jul@9o.is> Date: Thu, 15 Jan 2026 12:54:27 -0500 generate pages with lowdown and clean makefile Diffstat:
| M | .gitignore | | | 2 | ++ |
| M | Makefile | | | 40 | ++++++++++++++++++++++++++++++---------- |
| D | pages/001-example.cfg | | | 6 | ------ |
| D | pages/001-example.html | | | 157 | ------------------------------------------------------------------------------- |
| A | pages/001-example.md | | | 120 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| D | pages/002-example.cfg | | | 6 | ------ |
| D | pages/002-example.html | | | 1 | - |
| A | pages/002-example.md | | | 8 | ++++++++ |
8 files changed, 160 insertions(+), 180 deletions(-)
diff --git a/.gitignore b/.gitignore @@ -1 +1,3 @@ /output +/pages/*.html +/pages/*.cfg diff --git a/Makefile b/Makefile @@ -1,16 +1,36 @@ -BROWSER := brave-browser -OUTDIR := output +.POSIX: +.SUFFIXES: .md .cfg .html -generate: - mkdir -p $(OUTDIR) - find pages -type f -name '*.cfg' -print0 | sort -zr | xargs -0 saait - cp styles/*.css $(OUTDIR) +LOWDOWN = lowdown +OUTDIR = output -preview: generate - $(BROWSER) $(OUTDIR)/index.html +PAGES != find pages -type f -name '*.md' +PAGES_CFG != printf "$(PAGES)" | sed 's|\.md$$|.cfg|g' +PAGES_HTML != printf "$(PAGES)" | sed 's|\.md$$|.html|g' -sync: generate +all: $(OUTDIR)/index.html + +$(OUTDIR)/index.html: $(PAGES_HTML) $(PAGES_CFG) + @printf " %-8s %s\n" "SAAIT" "$@" + @mkdir -p $(OUTDIR) + @printf "$(PAGES_CFG)" | tr ' ' '\0' | sort -zr | xargs -0 saait + @cp styles/*.css $(OUTDIR) + +sync: $(OUTDIR)/index.html rclone sync -vu output sftp:htdocs clean: - rm -rf $(OUTDIR) + @rm -rf $(OUTDIR) + +.md.cfg: + @printf " %-8s %s\n" "LOWDOWN" "$@" + @rm -f $@ + @for cfg in `$(LOWDOWN) -L $<`; do \ + echo "$$cfg = `$(LOWDOWN) -X "$$cfg" $<`" >> $@; \ + done + +.md.html: + @printf " %-8s %s\n" "LOWDOWN" "$@" + @$(LOWDOWN) --html-no-skiphtml --html-no-escapehtml $< > $@ + +.PHONY: all sync clean diff --git a/pages/001-example.cfg b/pages/001-example.cfg @@ -1,6 +0,0 @@ -filename = example.html -title = Example page -description = This is an example page -keywords = example -created = 2009-04-12 -updated = 2009-04-12 diff --git a/pages/001-example.html b/pages/001-example.html @@ -1,157 +0,0 @@ -<nav aria-labelledby="toc-heading"> - <h2 id="toc-heading">Table of Contents</h2> - <ol> - <li><a href="#introduction">Introduction of Lorem Ipsum</a></li> - <li><a href="#definitions">Definitions of Random Words</a></li> - <li> - <a href="#texts">Texts of Stuff</a> - <ol> - <li><a href="#blockquote">Blockquote of Sorts</a></li> - <li><a href="#bindings">Keyboard of Bindings</a></li> - <li><a href="#html-formatting">Text without HTML Formatting</a></li> - </ol> - </li> - <li><a href="#essential-web">Essential Web Features</a></li> - <li><a href="#tech-snippet">Technical Snippet</a></li> - <li><a href="#media">Media & Figures</a></li> - <li><a href="#unit-comparison">Unit Comparison</a></li> - </ol> -</nav> - -<section> - <h2 id="introduction">Introduction to Lorem Ipsum Foo Bar Blue Blah</h2> - <p> - Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit</b>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - This is a <a href="#">hyperlink</a> to test your theme's primary color and text-decoration. - </p> - <p> - Strong text check: <strong>This should be strong of the parent size.</strong><br> - Small text check: <small>This should be 80% of the parent size.</small><br> - Subscript/Superscript: H<sub>2</sub>O and E=mc<sup>2</sup>. - </p> -</section> - -<section> - <h2 id="definitions">Definitions of Random Words</h2> - <dl> - <dt>Beast of Bodmin</dt> - <dd>A large feline inhabiting Bodmin Moor.</dd> - - <dt>Morgawr</dt> - <dd>A sea serpent.</dd> - - <dt>Owlman</dt> - <dd>A giant owl-like creature.</dd> - </dl> -</section> - -<section> - <h2 id="texts">Texts of stuff</h2> - <section> - <h3 id="blockquote">Blockquote of Sorts</h3> - <blockquote> - <p> - The best way to predict the future is to invent it. This blockquote tests the indentation and border-color of your reset. - </p> - <p> - The best way to predict the future is to invent it. This blockquote tests the indentation and border-color of your reset. - </p> - <footer>— Alan Kay</footer> - </blockquote> - </section> - <hr/> - <section> - <h3 id="bindings">Keyboard Bindings</h3> - <p> - Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an - MDN page. - </p> - </section> - <section> - <h3 id="html-formatting">Text without HTML Formatting</h3> - <pre> - S - A - LUT - M - O N - D E - DONT - JE SUIS - LA LAN - G U E É - L O Q U E N - TE QUESA - B O U C H E - O P A R I S - T I R E ET TIRERA - T O U JOURS - AUX A L - LEM ANDS - Apollinaire - </pre> - </section> -</section> - -<section> - <h2 id="essential-web">Essential Web Features</h2> - <ul> - <li>Responsive Design with <code>clamp()</code></li> - <li>Semantic HTML5 Tags</li> - <li>Custom CSS Properties (Variables)</li> - </ul> - - <ol> - <li>First step: Define the theme</li> - <li>Second step: Apply Preflight</li> - <li>Third step: Build the UI</li> - </ol> -</section> - -<section> - <h2 id="tech-snippet">Technical Snippet</h2> - <p>To define a variable in your <code>@theme</code> block, use this syntax:</p> - <pre><code>@theme { - --default-font-family: 'Inter', sans-serif; - --brand-color: oklch(60% 0.15 250); -}</code></pre> -</section> - -<section> - <h2 id="media">Media & Figures</h2> - <figure> - <img src="https://picsum.photos/800/400" alt="Placeholder Image"> - <figcaption>Fig 1. Testing image max-width and height-auto from Preflight.</figcaption> - </figure> -</section> - -<section> - <h2 id="unit-comparison">Unit Comparison</h2> - <table> - <thead> - <tr> - <th>Unit</th> - <th>Relative To</th> - <th>Usage</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>ex</code></td> - <td>x-height</td> - <td>Typography</td> - </tr> - <tr> - <td><code>ch</code></td> - <td>0 width</td> - <td>Containers</td> - </tr> - </tbody> - </table> -</section> - -<section> - <details> - <summary>Click to reveal more information</summary> - <p>This tests the <code>summary { display: list-item; }</code> rule in your Preflight.</p> - </details> -</section> diff --git a/pages/001-example.md b/pages/001-example.md @@ -0,0 +1,120 @@ +filename: example.html +title: Example page +description: This is an example page +keywords: example +created: 2009-04-12 +updated: 2009-04-12 + + +<nav aria-labelledby="toc-heading"> + <h2 id="toc-heading">Table of Contents</h2> + <ol> + <li><a href="#introduction">Introduction of Lorem Ipsum</a></li> + <li><a href="#definitions">Definitions of Random Words</a></li> + <li> + <a href="#texts">Texts of Stuff</a> + <ol> + <li><a href="#blockquote">Blockquote of Sorts</a></li> + <li><a href="#bindings">Keyboard of Bindings</a></li> + <li><a href="#html-formatting">Text without HTML Formatting</a></li> + </ol> + </li> + <li><a href="#essential-web">Essential Web Features</a></li> + <li><a href="#tech-snippet">Technical Snippet</a></li> + <li><a href="#media">Media & Figures</a></li> + <li><a href="#unit-comparison">Unit Comparison</a></li> + </ol> +</nav> + +## Introduction to Lorem Ipsum Foo Bar Blue Blah {#introduction} + +Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is a [hyperlink](#) to test your theme's primary color and text-decoration. + +Strong text check: **This should be strong of the parent size.** Small text check: <small>This should be 80% of the parent size.</small> +Subscript/Superscript: H~2~O and E=mc^2^. + +## Definitions of Random Words {#definitions} + +Beast of Bodmin +: A large feline inhabiting Bodmin Moor. + +Morgawr +: A sea serpent. + +Owlman +: A giant owl-like creature. + +## Texts of stuff {#texts} + +### Blockquote of Sorts {#blockquote} + +> The best way to predict the future is to invent it. This blockquote tests the indentation and border-color of your reset. +> +> The best way to predict the future is to invent it. This blockquote tests the indentation and border-color of your reset. +> +> — Alan Kay + +--- + +### Keyboard Bindings {#bindings} + +Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page. + +### Text without HTML Formatting {#html-formatting} + +```text + S + A + LUT + M + O N + D E + DONT + JE SUIS + LA LAN + G U E É + L O Q U E N + TE QUESA + B O U C H E + O P A R I S + T I R E ET TIRERA + T O U JOURS + AUX A L + LEM ANDS - Apollinaire +``` + +## Essential Web Features {#essential-web} + +* Responsive Design with `clamp()` +* Semantic HTML5 Tags +* Custom CSS Properties (Variables) + +1. First step: Define the theme +2. Second step: Apply Preflight +3. Third step: Build the UI + +## Technical Snippet {#tech-snippet} + +To define a variable in your `@theme` block, use this syntax: + +```css +@theme { + --default-font-family: 'Inter', sans-serif; + --brand-color: oklch(60% 0.15 250); +} +``` + +## Media & Figures {#media} + +<figure> + <img src="https://picsum.photos/800/400" alt="Placeholder Image"> + <figcaption>Fig 1. Testing image max-width and height-auto from Preflight.</figcaption> +</figure> + +## Unit Comparison {#unit-comparison} + +| Unit | Relative To | Usage | +| :--- | :--- | :--- | +| `ex` | x-height | Typography | +| `ch` | 0 width | Containers | + diff --git a/pages/002-example.cfg b/pages/002-example.cfg @@ -1,6 +0,0 @@ -filename = example2.html -title = Example page 2 -description = This is an example page 2 -keywords = example -created = 2009-04-13 -updated = 2009-04-13 diff --git a/pages/002-example.html b/pages/002-example.html @@ -1 +0,0 @@ -<p>example 2</p> diff --git a/pages/002-example.md b/pages/002-example.md @@ -0,0 +1,8 @@ +filename: example2.html +title: Example page 2 +description: This is an example page 2 +keywords: example +created: 2009-04-13 +updated: 2009-04-13 + +example 2