@eighty4/dank 0.0.1-3 → 0.0.1-4

package/README.md

@@ -0,0 +1,61 @@
+# Build DANK webpages
+
+DANK has some perks:
+
+- Webpage-first development for multi-page websites
+- Code splitting via `esbuild` bundler across all webpages
+- `dank serve` updates CSS in real-time (hot-reloading)
+- `dank serve` launches development processes and merges their stdio
+- `dank serve --preview` builds the website and serves the output from `dist`
+- `dank build --production` optimizes with `esbuild` minifying and tree-shaking
+- DANK's codebase is so tiny you can read it all in 20 mins
+
+DANK isn't for every use case.
+[Vite](https://vite.dev) is the right move for building a Single-Page Application.
+For SEO optimizing dynamic content with Server-Side Rendering,
+check out [Next.js](https://nextjs.org) or [Astro](https://astro.build).
+
+DANK is an ideal choice for building multi-page websites deployed to a CDN.
+
+## Getting started
+
+```shell
+bun create dank --out-dir www
+
+npm create dank -- --out-dir www
+
+pnpm create dank --out-dir www
+```
+
+## `dank.config.ts` examples
+
+Webpages and their URLs are configured explicitly to keep your URLs
+and workspace organized independently:
+
+```typescript
+import { defineConfig } from '@eighty4/dank'
+
+export default defineConfig({
+    pages: {
+        '/': './home.html',
+    },
+})
+```
+
+Streamline development with `dank serve` launching API when starting your dev server:
+
+```typescript
+import { defineConfig } from '@eighty4/dank'
+
+export default defineConfig({
+    pages: {
+        '/': './home.html',
+    },
+    services: [
+        {
+            command: 'node --watch --env-file-if-exists=.env.dev server.ts',
+            cwd: './api',
+        },
+    ],
+})
+```

package/lib/build.ts

@@ -42,7 +42,7 @@ export async function buildWebsite(c: DankConfig): Promise<DankBuild> {
     const result = new Set(buildUrls)
     await writeBuildManifest(buildTag, result)
     return {
-        dir: buildDir,
+        dir: distDir,
         files: result,
     }
 }

package/lib/esbuild.ts

@@ -21,6 +21,11 @@ const jsBuildOptions: BuildOptions & { metafile: true; write: true } = {
 const webpageBuildOptions: BuildOptions & { metafile: true; write: true } = {
     assetNames: 'assets/[name]-[hash]',
     format: 'esm',
+    loader: {
+        '.tff': 'file',
+        '.woff': 'file',
+        '.woff2': 'file',
+    },
     ...jsBuildOptions,
 }
 

package/lib/html.ts

@@ -1,5 +1,6 @@
 import { readFile, writeFile } from 'node:fs/promises'
 import { dirname, join, relative } from 'node:path'
+import { extname } from 'node:path/posix'
 import {
     defaultTreeAdapter,
     type DefaultTreeAdapterTypes,
@@ -75,12 +76,12 @@ export class HtmlEntrypoint {
                 ) {
                     importScript.elem.attrs.find(
                         attr => attr.name === 'src',
-                    )!.value = rewriteTo || `/${importScript.out}.js`
+                    )!.value = rewriteTo || `/${importScript.out}`
                 }
             } else if (importScript.type === 'style') {
                 importScript.elem.attrs.find(
                     attr => attr.name === 'href',
-                )!.value = rewriteTo || `/${importScript.out}.css`
+                )!.value = rewriteTo || `/${importScript.out}`
             }
         }
     }
@@ -182,12 +183,19 @@ export class HtmlEntrypoint {
 
     #addScript(type: ImportedScript['type'], href: string, elem: Element) {
         const inPath = join(dirname(this.#fsPath), href)
+        let outPath = inPath.replace(/^pages\//, '')
+        if (type === 'script' && !outPath.endsWith('.js')) {
+            outPath = outPath.replace(
+                new RegExp(extname(outPath).substring(1) + '$'),
+                'js',
+            )
+        }
         this.#scripts.push({
             type,
             href,
             elem,
             in: inPath,
-            out: inPath.replace(/^pages\//, ''),
+            out: outPath,
         })
     }
 }

package/lib/http.ts

@@ -90,6 +90,12 @@ function resolveMimeType(url: URL): string {
             return 'image/svg+xml'
         case '.png':
             return 'image/png'
+        case '.ttf':
+            return 'font/ttf'
+        case '.woff':
+            return 'font/woff'
+        case '.woff2':
+            return 'font/woff2'
         default:
             console.warn('? mime type for', url.pathname)
             if (!isProductionBuild()) process.exit(1)

package/lib_js/build.js

@@ -28,7 +28,7 @@ export async function buildWebsite(c) {
     const result = new Set(buildUrls);
     await writeBuildManifest(buildTag, result);
     return {
-        dir: buildDir,
+        dir: distDir,
         files: result,
     };
 }

package/lib_js/esbuild.js

@@ -12,6 +12,11 @@ const jsBuildOptions = {
 const webpageBuildOptions = {
     assetNames: 'assets/[name]-[hash]',
     format: 'esm',
+    loader: {
+        '.tff': 'file',
+        '.woff': 'file',
+        '.woff2': 'file',
+    },
     ...jsBuildOptions,
 };
 export async function esbuildDevContext(define, entryPoints, outdir) {

package/lib_js/html.js

@@ -1,5 +1,6 @@
 import { readFile, writeFile } from 'node:fs/promises';
 import { dirname, join, relative } from 'node:path';
+import { extname } from 'node:path/posix';
 import { defaultTreeAdapter, parse, parseFragment, serialize, } from 'parse5';
 // unenforced but necessary sequence:
 //  injectPartials
@@ -44,11 +45,11 @@ export class HtmlEntrypoint {
             if (importScript.type === 'script') {
                 if (importScript.in.endsWith('.tsx') ||
                     importScript.in.endsWith('.ts')) {
-                    importScript.elem.attrs.find(attr => attr.name === 'src').value = rewriteTo || `/${importScript.out}.js`;
+                    importScript.elem.attrs.find(attr => attr.name === 'src').value = rewriteTo || `/${importScript.out}`;
                 }
             }
             else if (importScript.type === 'style') {
-                importScript.elem.attrs.find(attr => attr.name === 'href').value = rewriteTo || `/${importScript.out}.css`;
+                importScript.elem.attrs.find(attr => attr.name === 'href').value = rewriteTo || `/${importScript.out}`;
             }
         }
     }
@@ -121,12 +122,16 @@ export class HtmlEntrypoint {
     }
     #addScript(type, href, elem) {
         const inPath = join(dirname(this.#fsPath), href);
+        let outPath = inPath.replace(/^pages\//, '');
+        if (type === 'script' && !outPath.endsWith('.js')) {
+            outPath = outPath.replace(new RegExp(extname(outPath).substring(1) + '$'), 'js');
+        }
         this.#scripts.push({
             type,
             href,
             elem,
             in: inPath,
-            out: inPath.replace(/^pages\//, ''),
+            out: outPath,
         });
     }
 }

package/lib_js/http.js

@@ -64,6 +64,12 @@ function resolveMimeType(url) {
             return 'image/svg+xml';
         case '.png':
             return 'image/png';
+        case '.ttf':
+            return 'font/ttf';
+        case '.woff':
+            return 'font/woff';
+        case '.woff2':
+            return 'font/woff2';
         default:
             console.warn('? mime type for', url.pathname);
             if (!isProductionBuild())

package/package.json

@@ -1,7 +1,14 @@
 {
   "name": "@eighty4/dank",
-  "version": "0.0.1-3",
+  "version": "0.0.1-4",
   "type": "module",
+  "description": "Multi-page development system for CDN-deployed websites",
+  "keywords": [
+    "frontend",
+    "bundler",
+    "esbuild",
+    "dank"
+  ],
   "bin": "./lib_js/bin.js",
   "exports": {
     ".": {