nattoppet 2.1.1 → 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,33 +1,46 @@
 nattoppet
 =========
 
-A tiny markup language and several themes for making documents, slides, or web apps as single-file bundled html or
-executable.
+A tiny markup language and themes for making documents, slides, or web apps as single-file bundled html or executables.
 
 ### Usage
 
-compile a nattoppet file:
+Compile a nattoppet file:
 
-```
-$ npm exec nattoppet in.ymd > out.html
+```bash
+bun run nattoppet.ts in.ymd > out.html
 ```
 
-compile a nattoppet file but don't minimize (for debugging):
+Compile a nattoppet file but don't minimize (for debugging):
 
-```
-$ npm exec nattoppet in.ymd --dev > out.html
+```bash
+bun run nattoppet.ts in.ymd --dev > out.html
 ```
 
-watch a nattoppet file and rebuild it whenever it changes; open a browser to view the compiled page
+Open a browser to preview a nattoppet file; rebuild every time the page is refreshed:
 
-```
-$ npm exec nattoppet-dev in.ymd
+```bash
+bun run nattoppet-dev.ts in.ymd
 ```
 
-build a double-clickable executable for the page
+Initialize a new project:
 
+```bash
+bun run nattoppet-init.ts form
 ```
-$ npm exec nattoppet-native init
-$ (edit the metadata as needed)
-$ npm exec nattoppet-native build in.ymd
+
+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.js → stdlib.ts}

@@ -1,23 +1,27 @@
-#!/usr/bin/env node
-
-'use strict'
-
-const fs = require('fs')
-const path = require('path')
-
-const coffee = require('coffeescript')
-const marked = require('marked')
-const katex = require("katex")
-const less = require('less')
-
-module.exports = {
-    stdlib_dir: __dirname,
+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
+    })
+}
 
-    skip(n) {
+export default {
+    skip(n: number) {
         this.remaining = this.remaining.substring(n)
     },
 
-    capture_until(delimiter) {
+    capture_until(delimiter: string) {
         const p = this.remaining.indexOf(delimiter)
         if (p < 0) {
             const result = this.remaining
@@ -30,7 +34,7 @@ module.exports = {
     },
 
     std_call(hascontent = false) {
-        const opts = [], args = []
+        const opts: string[] = [], args: string[] = []
         const parse_option = () => {
             const m = this.remaining.match(/^\.([\w\-]+)/)
             this.skip(m[0].length)
@@ -42,9 +46,9 @@ module.exports = {
             args.push(m[1] || m[2])
         }
         const parse_block = () => {
-            const m = this.remaining.match(/^>+/)
+            const m = this.remaining.match(/^(>+)\n?/)
             this.skip(m[0].length)
-            return this.capture_until('<'.repeat(m[0].length))
+            return this.capture_until('<'.repeat(m[1].length))
         }
 
         while (true) {
@@ -60,49 +64,57 @@ module.exports = {
                     return { opts, args, block: parse_block() }
                 case ' ':
                     if (hascontent)
-                        return { opts, args, block: this.capture_until('\n') }
+                        return { opts, args, block: this.capture_until('\n').slice(1) }
                 default:
                     return { opts, args }
             }
         }
     },
 
-    rpath(file) {
-        if (file.startsWith('@std')) {
-            return path.join(this.stdlib_dir, file.substring(4))
-        } else if (!path.isAbsolute(file)) {
+    rpath(file: string) {
+        if (!path.isAbsolute(file))
             return path.join(this.base_dir, file)
-        }
         return file
     },
 
-    read(file, encoding='utf8') {
-        return fs.readFileSync(this.rpath(file), encoding)
+    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) {
+    extname(file: string) {
         return path.extname(file).slice(1)
     },
 
-    basename(file) {
+    basename(file: string) {
         return path.basename(file)
     },
 
-    render_coffee(str, options) {
+    render_coffee(str: string, options: any) {
         return coffee.compile(str, options)
     },
 
-    render_less(str) {
-        let x; less.render(str, {}, (err, out) => !err && (x = out))
+    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) {
+    render_markdown(str: string) {
         return marked.parse(str)
     },
 
-    render_katex(str, displayMode=false) {
-        return katex.renderToString(str, { displayMode })
+    render_katex(str: string, displayMode = false) {
+        return katex.renderToString(str, { displayMode, output: 'html' })
     }
-}
+} as any