Initial commit

.eleventy.js

@@ -0,0 +1,53 @@
+const project = require('./package.json');
+const replaceLink = require('markdown-it-replace-link');
+const path = require("path");
+// const linkPreviewPlugin = require("./lib/link-preview-md-plugin.js");
+
+function byIndex(left, right) {
+  const a = left.data.index ? Number.parseInt(left.data.index) : 0;
+  const b = right.data.index ? Number.parseInt(right.data.index) : 0;
+  return a - b;
+}
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPassthroughCopy("assets");
+
+  eleventyConfig.addCollection("index", function (collectionApi) {
+    return collectionApi
+      .getFilteredByTag("pages")
+      .sort(byIndex);
+  });
+
+  eleventyConfig.addPassthroughCopy(
+    {
+      'node_modules/@lit': 'vendor/@lit',
+      'node_modules/vellum-doc': 'vendor/vellum-doc',
+      'node_modules/link-preview': 'vendor/link-preview',
+      'node_modules/magick.css': 'vendor/magick.css',
+      'node_modules/normalize.css': 'vendor/normalize.css'
+    }
+  );
+
+  eleventyConfig.addGlobalData("project", project);
+
+  eleventyConfig.amendLibrary("md", (mdLib) => {
+    mdLib
+      .use(replaceLink, {
+        replaceLink: function (link) {
+          const isUrl = URL.canParse(link);
+          const file = path.parse(link);
+
+          if (!isUrl && file.ext === '.md') {
+            const anchor = file.name;
+            return `#${anchor}`;
+          } else if (!isUrl && file.ext.startsWith('.md#')) {
+            const anchor = file.ext.split('#').pop();
+            return `#${anchor}`;
+          }
+
+          return link;
+        }
+      })
+      // .use(linkPreviewPlugin);
+  });
+};

.github/workflows/publish.yml

@@ -0,0 +1,27 @@
+name: publish
+
+permissions:
+  contents: write
+
+on:
+  push:
+    tags:
+      - v*
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Install and Build 🔧
+        run: |
+          npm ci
+          npm run build
+
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: _site

.github/workflows/test.yml

@@ -0,0 +1,23 @@
+name: test-and-lint
+
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request:
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Install Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20.x
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build
+    - run: npm test

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+*.log
+_site

.htmllintrc

@@ -0,0 +1,71 @@
+{
+  "plugins": [],
+  "maxerr": false,
+  "raw-ignore-regex": false,
+  "attr-bans": [
+    "align",
+    "background",
+    "bgcolor",
+    "border",
+    "frameborder",
+    "longdesc",
+    "marginwidth",
+    "marginheight",
+    "scrolling",
+    "style",
+    "width"
+  ],
+  "indent-delta": false,
+  "indent-style": "nonmixed",
+  "indent-width": 2,
+  "indent-width-cont": false,
+  "spec-char-escape": true,
+  "text-ignore-regex": false,
+  "tag-bans": [
+    "style",
+    "b",
+    "i"
+  ],
+  "tag-close": true,
+  "tag-name-lowercase": true,
+  "tag-name-match": true,
+  "tag-self-close": false,
+  "doctype-first": false,
+  "doctype-html5": false,
+  "attr-name-style": "dash",
+  "attr-name-ignore-regex": false,
+  "attr-no-dup": true,
+  "attr-no-unsafe-char": true,
+  "attr-order": false,
+  "attr-quote-style": false,
+  "attr-req-value": true,
+  "attr-new-line": false,
+  "attr-validate": true,
+  "id-no-dup": true,
+  "id-class-no-ad": true,
+  "id-class-style": "dash",
+  "class-no-dup": true,
+  "class-style": false,
+  "id-class-ignore-regex": false,
+  "img-req-alt": true,
+  "img-req-src": true,
+  "html-valid-content-model": true,
+  "head-valid-content-model": true,
+  "href-style": false,
+  "label-req-for": true,
+  "line-end-style": false,
+  "line-no-trailing-whitespace": false,
+  "line-max-len": false,
+  "line-max-len-ignore-regex": false,
+  "head-req-title": true,
+  "title-no-dup": true,
+  "title-max-len": 60,
+  "html-req-lang": false,
+  "lang-style": "case",
+  "fig-req-figcaption": false,
+  "focusable-tabindex-style": false,
+  "input-radio-req-name": true,
+  "input-req-label": false,
+  "table-req-caption": false,
+  "table-req-header": false
+}

.markdownlint.json

@@ -0,0 +1,10 @@
+{
+  "default": true,
+  "no-inline-html": false,
+  "commands-show-output": false,
+  "ul-indent": false,
+  "line-length": false,
+  "first-line-heading": false,
+  "heading-increment": false,
+  "no-trailing-punctuation": false
+}

.stylelintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "media-feature-range-notation": null
+  }
+}

README.md

@@ -0,0 +1,19 @@
+---
+index: 1
+permalink: false
+tags: pages
+---
+# Vellum Book
+
+A template project for publishing rich web documents. Very much a work-in-progress at this time, use with caution.
+
+**[Demo](https://grislyeye.github.io/vellum-book/)** |
+**[Roadmap](https://github.com/grislyeye/vellum-book/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement)**
+
+Features:
+
+- Write everything in plain markdown files
+- Rich document view with [`<vellum-doc>`](https://github.com/grislyeye/vellum-doc)
+- Link previews with [`<link-preview>`](https://github.com/rg-wood/link-preview) (not working)
+- Smartly converts links between markdown files into fragment links (e.g. [Chapter 1](sections/chapter-1/chapter-1.md))
+- Beautifully themed with [magick.css](https://css.winterveil.net/) by default

_data/site.json

@@ -0,0 +1,4 @@
+{
+  "title": "Book Title",
+  "url": "https://example.org"
+}

assets/styles/main.css

@@ -0,0 +1,24 @@
+html {
+  scroll-behavior: smooth;
+}
+
+vellum-doc::part(index) {
+  margin-top: 1.6rem;
+  padding-right: 1em;
+  padding-left: 1em;
+  border-right: none;
+}
+
+article#document {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+article#document > section {
+  width:100%;
+}
+
+article#document > section:has(h4:first-child) {
+  width: 47%;
+}

design.md

@@ -0,0 +1,8 @@
+---
+index: 2
+permalink: false
+tags: pages
+---
+## Design Principles
+
+ 1. Writers should only need write in plain markdown. Noodly HTML (like `<link-preview>` or `<vellum-doc>`) should be handled by 11ty.

index.liquid

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
+
+    <title>{{ site.title }}</title>
+
+    <link href="vendor/normalize.css/normalize.css" rel="stylesheet" />
+    <link href="vendor/magick.css/magick.css" rel="stylesheet" />
+    <link href="assets/styles/main.css" rel="stylesheet" />
+
+    <script type="module">
+      import './vendor/vellum-doc/vellum-doc.js'
+    </script>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "lit": "/vendor/@lit/index.js",
+          "lit/": "/vendor/@lit/"
+        }
+      }
+    </script>
+  </head>
+
+  <body>
+
+    <vellum-doc anchors>
+      <main>
+        <article id="document" class="content">
+
+          {%- for page in collections.index -%}
+
+            <section>
+            {{ page.content }}
+            </section>
+
+          {%- endfor -%}
+
+        </article>
+      </main>
+
+      <footer>
+        <p>{{ site.title }} {{ project.version }} &copy; {{ project.author }} 2024</p>
+        <p><a href="{{ site.url }}">{{ site.url }}</a></p>
+      </footer>
+    </vellum-doc>
+
+  </body>
+
+</html>

lib/link-preview-md-plugin.js

@@ -0,0 +1,10 @@
+const proxy = (tokens, idx, options, env, self) => self.renderToken(tokens, idx, options);
+
+function linkPreviewPlugin(md) {
+  md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
+    const defaultListItemOpenRenderer = md.renderer.rules.list_item_open || proxy;
+    return `<link-preview>${defaultListItemOpenRenderer(tokens, idx, options, env, self)}`;
+  };
+}
+
+module.exports = linkPreviewPlugin;