nattoppet 2.1.0 → 4.0.1

package/ppt.css

@@ -0,0 +1,304 @@
+html {
+  font-family: sans-serif;
+  font-size: 20px;
+  line-height: 1.5;
+  min-height: 100vh;
+  color: #233;
+}
+@media (min-width: 1200px) {
+  html {
+    font-size: 24px;
+  }
+}
+body {
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+pre {
+  background: white;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  padding: 20px;
+  font-size: 0.9rem;
+  line-height: 1.2;
+  text-align: left;
+  overflow-x: auto;
+}
+@media (min-width: 1200px) {
+  pre {
+    padding: 25px;
+  }
+}
+code {
+  font-family: monospace;
+  font-size: 0.9rem;
+}
+h2,
+h3 {
+  color: #42b8a6;
+}
+h2 {
+  margin-top: 5vh;
+  font-size: 2rem;
+}
+h3 {
+  margin-top: 6vh;
+  font-size: 1.2rem;
+}
+p {
+  text-indent: 2rem;
+}
+blockquote p {
+  text-indent: 0;
+}
+img {
+  max-width: 100%;
+}
+img.full {
+  width: 100%;
+}
+img.small {
+  width: 40%;
+}
+@media (max-width: 625px) {
+  img.small {
+    width: 60%;
+  }
+}
+img.mid {
+  width: 60%;
+}
+img.big {
+  width: 80%;
+}
+li {
+  font-size: 1.2rem;
+}
+footer {
+  font-weight: 300;
+  font-size: 0.7rem;
+  color: #888;
+}
+.banner > h2 {
+  position: absolute;
+  left: 10vw;
+  top: 45%;
+  width: 80vw;
+  transform: translateY(-50%);
+  text-align: center;
+  margin: 0;
+  font-family: serif;
+  font-size: 3rem;
+  font-weight: normal;
+}
+@media (min-width: 1200px) {
+  .banner > h2 {
+    font-size: 3.2rem;
+  }
+}
+a {
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+.scen {
+  position: relative;
+  margin: 0;
+  background-color: #eee;
+  transition: background-color 1s ease;
+  padding: 10vh 8vw;
+  width: 84vw;
+  min-height: 60vh;
+}
+.scen.active {
+  background-color: white;
+}
+.scen.wide {
+  width: 96vw;
+  padding: 10vh 2vw;
+}
+.scen::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+@media (min-width: 1200px) {
+  .scen {
+    width: 76vw;
+    padding: 10vh 12vw;
+  }
+}
+.col-12 {
+  float: left;
+  width: 100%;
+}
+.col-11 {
+  float: left;
+  width: 91.66666667%;
+}
+.col-10 {
+  float: left;
+  width: 83.33333333%;
+}
+.col-9 {
+  float: left;
+  width: 75%;
+}
+.col-8 {
+  float: left;
+  width: 66.66666667%;
+}
+.col-7 {
+  float: left;
+  width: 58.33333333%;
+}
+.col-6 {
+  float: left;
+  width: 50%;
+}
+.col-5 {
+  float: left;
+  width: 41.66666667%;
+}
+.col-4 {
+  float: left;
+  width: 33.33333333%;
+}
+.col-3 {
+  float: left;
+  width: 25%;
+}
+.col-2 {
+  float: left;
+  width: 16.66666667%;
+}
+.col-1 {
+  float: left;
+  width: 8.33333333%;
+}
+.plum {
+  color: #ae81ff;
+}
+.fx-plum {
+  transition: color 400ms;
+}
+.fx-plum.fast {
+  transition: color 200ms;
+}
+.fx-plum.slow {
+  transition: color 600ms;
+}
+.fx-plum.active {
+  color: #ae81ff !important;
+}
+.chartreuse {
+  color: #a6e22e;
+}
+.fx-chartreuse {
+  transition: color 400ms;
+}
+.fx-chartreuse.fast {
+  transition: color 200ms;
+}
+.fx-chartreuse.slow {
+  transition: color 600ms;
+}
+.fx-chartreuse.active {
+  color: #a6e22e !important;
+}
+.cyan {
+  color: #66d9ef;
+}
+.fx-cyan {
+  transition: color 400ms;
+}
+.fx-cyan.fast {
+  transition: color 200ms;
+}
+.fx-cyan.slow {
+  transition: color 600ms;
+}
+.fx-cyan.active {
+  color: #66d9ef !important;
+}
+.tomato {
+  color: #f13c1a;
+}
+.fx-tomato {
+  transition: color 400ms;
+}
+.fx-tomato.fast {
+  transition: color 200ms;
+}
+.fx-tomato.slow {
+  transition: color 600ms;
+}
+.fx-tomato.active {
+  color: #f13c1a !important;
+}
+.moccasin {
+  color: #ffe4b5;
+}
+.fx-moccasin {
+  transition: color 400ms;
+}
+.fx-moccasin.fast {
+  transition: color 200ms;
+}
+.fx-moccasin.slow {
+  transition: color 600ms;
+}
+.fx-moccasin.active {
+  color: #ffe4b5 !important;
+}
+.slide {
+  transition: transform 400ms;
+  transform: translateX(-100vw);
+}
+.slide.fast {
+  transition: transform 200ms;
+}
+.slide.slow {
+  transition: transform 600ms;
+}
+.slide.active {
+  transform: translateX(0);
+}
+.fade {
+  transition: opacity 400ms;
+  opacity: 0;
+}
+.fade.fast {
+  transition: opacity 200ms;
+}
+.fade.slow {
+  transition: opacity 600ms;
+}
+.fade.active {
+  opacity: 1;
+}
+.rise {
+  transition: opacity 400ms;
+  transition: transform 400ms;
+  opacity: 0;
+  transform: translateY(10vh);
+}
+.rise.fast {
+  transition: opacity 200ms;
+}
+.rise.slow {
+  transition: opacity 600ms;
+}
+.rise.fast {
+  transition: transform 200ms;
+}
+.rise.slow {
+  transition: transform 600ms;
+}
+.rise.active {
+  opacity: 1;
+  transform: translateY(0);
+}

package/ppt.js

@@ -0,0 +1,83 @@
+// events: click, delay, sim
+// time-for-delay: short, long
+// fx: slide, fade, fx-[color]
+// time-for-fx: fast, slow
+var init;
+
+init = function() {
+  var clickListener, current, enter, fx, inview, scens, timeline, update;
+  scens = [].slice.call(document.querySelectorAll('.scen'));
+  current = scens[0];
+  timeline = 0;
+  clickListener = function() {};
+  enter = function(x) {
+    x.classList.add('active');
+    return fx(++timeline, [].slice.call(x.querySelectorAll('.click, .delay, .sim')));
+  };
+  inview = function(x) {
+    var height, ref, top;
+    ({top, height} = x.getBoundingClientRect());
+    return (top <= (ref = innerHeight / 2) && ref <= top + height);
+  };
+  update = function() {
+    var e, i, j, len, len1, ref, results, x;
+    if (!inview(current)) {
+      results = [];
+      for (i = 0, len = scens.length; i < len; i++) {
+        x = scens[i];
+        if (inview(x)) {
+          ref = document.querySelectorAll('.active');
+          for (j = 0, len1 = ref.length; j < len1; j++) {
+            e = ref[j];
+            e.classList.remove('active');
+          }
+          enter(x);
+          current = x;
+          break;
+        } else {
+          results.push(void 0);
+        }
+      }
+      return results;
+    }
+  };
+  fx = function(t, [head, ...tail]) {
+    var cb;
+    if (head == null) {
+      return;
+    }
+    cb = function() {
+      if (t !== timeline) {
+        return;
+      }
+      head.classList.add('active');
+      return fx(t, tail);
+    };
+    if (head.classList.contains('click')) {
+      return clickListener = cb;
+    } else if (head.classList.contains('delay')) {
+      if (head.classList.contains('long')) {
+        return setTimeout(cb, 800);
+      } else if (head.classList.contains('short')) {
+        return setTimeout(cb, 200);
+      } else {
+        return setTimeout(cb, 400);
+      }
+    } else if (head.classList.contains('sim')) {
+      return cb();
+    }
+  };
+  enter(current);
+  addEventListener('click', function() {
+    return clickListener();
+  });
+  addEventListener('scroll', update);
+  addEventListener('resize', update);
+  return setInterval(update, 2000);
+};
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}

package/{ppt/after.ymd → ppt.ymd}

@@ -1,3 +1,19 @@
+<!doctype html>
+<meta name=viewport content="width=device-width, initial-scale=1.0">
+<meta name=author content="ylxdzsw@gmail.com">
+<meta charset="utf-8">
+<title>[title] | ylxdzsw's blog</title>
+
+<style>
+[mixin] ppt.css
+</style>
+
+<script>
+[mixin] ppt.js
+</script>
+
+[#slot]
+
 [eval] this.inited ? "</section>" : ''
 
 [section]=
@@ -18,4 +34,4 @@ const content = capture_until('\n')
 const {args:[length]} = std_call()
 ;`<div style="height: ${length}; min-width: 1px"></div>`
 
-[mixin] @std/common.ymd
+[mixin] common.ymd

package/readme.md

@@ -1,10 +1,46 @@
 nattoppet
 =========
 
-A tiny markup language and several themes for making documents and slides as single-file bundled html.
+A tiny markup language and themes for making documents, slides, or web apps as single-file bundled html or executables.
 
-### Usage (no installation required)
+### Usage
 
+Compile a nattoppet file:
+
+```bash
+bun run nattoppet.ts in.ymd > out.html
+```
+
+Compile a nattoppet file but don't minimize (for debugging):
+
+```bash
+bun run nattoppet.ts in.ymd --dev > out.html
 ```
-$ npx nattoppet in.ymd > out.html
+
+Open a browser to preview a nattoppet file; rebuild every time the page is refreshed:
+
+```bash
+bun run nattoppet-dev.ts in.ymd
 ```
+
+Initialize a new project:
+
+```bash
+bun run nattoppet-init.ts form
+```
+
+Build a double-clickable executable for the page:
+
+```bash
+bun run nattoppet-native.ts init
+# (edit the metadata as needed)
+bun run nattoppet-native.ts build in.ymd
+```
+
+
+### History
+
+- 1.0: This project started as an experiment of co.js to replicate gulp.js, when async/await was not a thing and wind.js was the cool guy that everyone was talking about.
+- 2.0: Later I decided to build ymd.js, a custom LaTeX-style macro-based markup language for blogging, and turned nattoppet a bundler. Promise landed on JavaScript, and async/await became available with babel.
+- 3.0: I became a minimalist and stripped down all dependencies, merged ymd.js and nattoppet, and flattened the directory. I have also migrated to Deno to further remove the nodejs clutters.
+- 4.0: AI came. As an experimental project, nattoppet was put to test AI. Kimi 2.5 successfully ported it from Deno to Bun in half an hour, with all posts on my blog builds without error. It made me feel empty, but I have to embrace it. This project will be fully vibed from now on.

package/stdlib.ts

@@ -0,0 +1,120 @@
+import * as path from "node:path"
+import * as fs from "node:fs"
+import * as zlib from "node:zlib"
+
+import { marked } from "marked"
+import coffee from "coffeescript"
+import katex from "katex"
+import less from "less"
+
+function compress_sync(data: ArrayBuffer) {
+    // Keep using zlib.deflateRawSync for browser compatibility
+    // Browser uses DecompressionStream("deflate-raw") which expects raw deflate
+    return zlib.deflateRawSync(new Uint8Array(data), {
+        flush: zlib.constants.Z_FINISH,
+        level: zlib.constants.Z_BEST_COMPRESSION
+    })
+}
+
+export default {
+    skip(n: number) {
+        this.remaining = this.remaining.substring(n)
+    },
+
+    capture_until(delimiter: string) {
+        const p = this.remaining.indexOf(delimiter)
+        if (p < 0) {
+            const result = this.remaining
+            this.remaining = ""
+            return result
+        }
+        const result = this.remaining.substring(0, p)
+        this.remaining = this.remaining.substring(p + delimiter.length)
+        return result
+    },
+
+    std_call(hascontent = false) {
+        const opts: string[] = [], args: string[] = []
+        const parse_option = () => {
+            const m = this.remaining.match(/^\.([\w\-]+)/)
+            this.skip(m[0].length)
+            opts.push(m[1])
+        }
+        const parse_argument = () => {
+            const m = this.remaining.match(/^\((.*?)\)|{(.*?)}/)
+            this.skip(m[0].length)
+            args.push(m[1] || m[2])
+        }
+        const parse_block = () => {
+            const m = this.remaining.match(/^(>+)\n?/)
+            this.skip(m[0].length)
+            return this.capture_until('<'.repeat(m[1].length))
+        }
+
+        while (true) {
+            switch (this.remaining[0]) {
+                case '.':
+                    parse_option()
+                    break
+                case '(':
+                case '{':
+                    parse_argument()
+                    break
+                case '>':
+                    return { opts, args, block: parse_block() }
+                case ' ':
+                    if (hascontent)
+                        return { opts, args, block: this.capture_until('\n').slice(1) }
+                default:
+                    return { opts, args }
+            }
+        }
+    },
+
+    rpath(file: string) {
+        if (!path.isAbsolute(file))
+            return path.join(this.base_dir, file)
+        return file
+    },
+
+    read(file: string, encoding = "utf-8") {
+        const filePath = this.rpath(file)
+        switch (encoding) {
+            case "utf8":
+            case "utf-8":
+                return fs.readFileSync(filePath, 'utf-8')
+            case "base64":
+                return Buffer.from(fs.readFileSync(filePath)).toString('base64')
+            case "compressed-base64":
+                return Buffer.from(compress_sync(fs.readFileSync(filePath))).toString('base64')
+            default:
+                throw "unknown encoding: " + encoding
+        }
+    },
+
+    extname(file: string) {
+        return path.extname(file).slice(1)
+    },
+
+    basename(file: string) {
+        return path.basename(file)
+    },
+
+    render_coffee(str: string, options: any) {
+        return coffee.compile(str, options)
+    },
+
+    render_less(str: string) {
+        let x: any; less.render(str, {}, (err: any, out: any) => !err && (x = out))
+        if (!x) throw "less failed to compile synchronously"
+        return x.css
+    },
+
+    render_markdown(str: string) {
+        return marked.parse(str)
+    },
+
+    render_katex(str: string, displayMode = false) {
+        return katex.renderToString(str, { displayMode, output: 'html' })
+    }
+} as any

package/tml.css

@@ -0,0 +1,125 @@
+html {
+  font-family: sans-serif;
+  font-size: 18px;
+  line-height: 1.5;
+  text-align: justify;
+  color: #33333d;
+  -webkit-user-select: none;
+  hyphens: auto;
+}
+@media (max-width: 625px) {
+  html {
+    font-size: 14px;
+  }
+}
+body {
+  margin: 15px 0;
+}
+@media (min-width: 1200px) {
+  body {
+    height: calc(100vh - 45px);
+    column-width: 540px;
+    column-gap: 0;
+    column-fill: auto;
+  }
+}
+article {
+  margin: 40px 0 0 15px;
+  padding: 0 20px;
+}
+@media (max-width: 625px) {
+  article {
+    margin-left: 8px;
+    padding-left: 10px;
+  }
+}
+article:first-child {
+  margin-top: 0;
+}
+article:nth-child(3n) {
+  border-left: solid #ECE335;
+}
+article:nth-child(3n+1) {
+  border-left: solid #1CBF5F;
+}
+article:nth-child(3n+2) {
+  border-left: solid #2C8DD5;
+}
+h2 {
+  position: relative;
+  margin: 0;
+  padding: 0.8rem 0 0.7rem;
+  break-inside: avoid;
+  border-bottom: 0.5px solid #ddd;
+}
+h2:before {
+  top: 0.9rem;
+  font-size: 1.4rem;
+}
+@media (max-width: 625px) {
+  h2:before {
+    left: -0.8rem;
+    top: 1rem;
+  }
+}
+h2:hover:before {
+  opacity: 1;
+}
+h2 a {
+  color: #2c3e50;
+}
+h3 {
+  position: relative;
+  margin: 0;
+  padding: 0.8rem 0 0;
+  break-inside: avoid;
+}
+p {
+  margin: 1.2rem 0;
+}
+pre {
+  background-color: #fafaf9;
+}
+code {
+  font-family: monospace;
+  font-size: 0.8rem;
+  padding: 0.1rem;
+}
+a {
+  color: #42b983;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+blockquote {
+  margin: 2rem 0;
+  padding: 0 1.2rem;
+  font-style: italic;
+}
+blockquote p {
+  margin-left: 0;
+}
+img {
+  break-inside: avoid;
+}
+.full {
+  display: block;
+  margin: 1rem 0;
+  width: 100%;
+}
+.half {
+  display: block;
+  margin: 1rem 0;
+  width: 50%;
+}
+.end-symbol {
+  text-align: center;
+  display: none;
+  margin-top: 1rem;
+}
+@media (min-width: 1200px) {
+  .end-symbol {
+    display: block;
+  }
+}

package/tml.js

@@ -0,0 +1,3 @@
+addEventListener('wheel', function(e) {
+  return scrollBy(e.deltaY, 0);
+});