vowel 0.2.1-beta.1 → 0.2.2

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,73 @@
+---
+name: Bug report
+about: Report a bug to help improve Vowel.
+title: ""
+labels: "bug"
+assignees: "samlfair"
+---
+
+<!--
+  Thanks for taking the time to help build Vowel.
+  A well-detailed bug report helps us to solve the problem quickly.
+-->
+
+### Versions
+
+- vowel: <!-- eg: v0.1.32 -->
+- node: <!-- eg: v14.15.0 -->
+- os: <!-- eg: macOS 14.5 -->
+- browser: <!-- eg: Chrome 129 -->
+
+### Browser report
+
+<!--
+  Generate a browser report at https://www.whatsmybrowser.org/
+  Copy-paste a link to the report
+-->
+
+### Link to Stackblitz
+
+<!--
+  If possible, upload a reproduction to Stackblitz
+  and copy-paste the link here
+-->
+
+### Steps to reproduce
+
+<!-- eg: "Go to X and click on Y" -->
+
+### Expected behavior
+
+<!-- eg: "The image will appear below the headline" -->
+
+### Actual behavior
+
+<!-- eg: "The image appears above the headline" -->
+
+### Additional technologies
+
+<!-- List any other technologies you're using with Vowel -->
+
+### Screenshot
+
+<!-- If possible, include a screenshot of the issue -->
+
+### Errors from terminal
+
+<!-- If there are any error messages in the terminal, paste them here -->
+
+```
+
+```
+
+### Errors from browser console
+
+<!-- If there are any error message in the error console, paste them here -->
+
+```
+
+```
+
+### Additional comments
+
+<!-- Include any other relevent information -->

package/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,7 @@
+contact_links:
+  - name: Vowel on Twitter
+    url: https://twitter.com/tryvowel
+    about: Get in touch with questions or ideas.
+  - name: Sam on Twitter
+    url: https://twitter.com/samlfair
+    about: Get in touch to chat.

package/README.md

@@ -0,0 +1,91 @@
+# Vowel
+
+*Markdown websites in milliseconds*
+
+## Roadmap
+
+### High priority
+
+- [ ] robots.txt
+- [ ] sitemap.xml
+- [ ] 404.html
+- [ ] TUI
+  - [ ] Create settings.md
+    - [ ] Site title
+    - [ ] Domain
+    - [ ] Webmentions
+    - [ ] Logo
+    - [ ] Wordmark
+    - [ ] Identity (rel=me)
+    - [ ] Filename breadcrumbs
+    - [ ] RSS
+    - [ ] Sitemap
+  - [ ] Create home.md
+  - [ ] Create folder settings files
+    - [ ] Title
+    - [ ] Breadcrumb
+- [ ] Custom CSS
+- [ ] Tags
+- [ ] Customize index fallback
+- [ ] Date format settings
+- [ ] ::mark::
+- [ ] Infer images
+- [ ] Favicon
+- [ ] Webmentions
+- [ ] HTML boilerplate
+- [ ] Page lists
+- [ ] View transitions
+- [ ] Logo
+- [ ] Wordmark
+- [ ] Sort nav items
+- [ ] Canonical URL
+- [ ] Handle external links
+- [ ] Admonitions
+- [ ] Use hgroup for site title, page title, etc
+- [ ] Images as `<figure>`
+- [ ] Hidden routes
+- [ ] Frontmatter settings
+  - [ ] HTML
+  - [ ] RSS
+  - [ ] Sitemap
+- [ ] Heading anchors
+- [ ] Taxonomy pages and smart frontmatter
+- [ ] CSS cache busting
+- [ ] Slogan in homepage title
+
+### Medium priority
+
+- [ ] Tests
+- [ ] Break code into multiple files
+- [ ] Image optimization (unpic)
+- [ ] [SVG by mask](https://pqina.nl/blog/set-svg-background-image-fill-color/) and [CSS icons](https://antfu.me/posts/icons-in-pure-css)
+- [ ] WYSIWYG editor
+- [ ] Better signals
+  - [ ] File-written callback
+- [ ] Themes
+- [ ] Deploy
+  - [ ] Cloudflare pages
+  - [ ] GitHub pages
+- [ ] Post-publish work (ping webmentions)
+- [ ] [Desktop app](https://blackboard.sh/electrobun/docs/)
+- [ ] Mermaid
+- [ ] Codeblock syntax highlighting
+- [ ] Extraction utilities (regex in archive)
+- [ ] Smarter frontmatter
+  - [ ] Object dl
+  - [ ] Array ul
+  - [ ] Image
+  - [ ] URL
+  - [ ] Date
+- [ ] TOC
+- [ ] Versioning/publishing script
+- [ ] Verify all element types form Obsidian
+
+### Low priority
+
+- [ ] Footnotes
+- [ ] Frontmatter taxonomies
+- [ ] Recursive frontmatter
+- [ ] Browser search
+- [ ] Pagination
+- [ ] ATProto

package/docs-source/.vercel/README.txt

@@ -0,0 +1,11 @@
+> Why do I have a folder named ".vercel" in my project?
+The ".vercel" folder is created when you link a directory to a Vercel project.
+
+> What does the "project.json" file contain?
+The "project.json" file contains:
+- The ID of the Vercel project that you linked ("projectId")
+- The ID of the user or team your Vercel project is owned by ("orgId")
+
+> Should I commit the ".vercel" folder?
+No, you should not share the ".vercel" folder with anyone.
+Upon creation, it will be automatically added to your ".gitignore" file.

package/docs-source/.vercel/project.json

@@ -0,0 +1 @@
+{"projectId":"prj_4CUiAmqACnAFX1cjGqW5om7DbK4E","orgId":"team_CpFUbX79Msg6m5IOy2BzFxEE"}

package/getMetadata.js

@@ -0,0 +1,41 @@
+import { XMLParser } from "fast-xml-parser"
+import urlMetadata from 'url-metadata';
+
+export default async function getMetadata(url) {
+	try {
+		const urlObject = new URL(url);
+		const allMetadata = await urlMetadata(urlObject.href, {
+			includeResponseBody: true,
+			ensureSecureImageRequest: true
+		});
+
+		const parser = new XMLParser({
+			unpairedTags: ["!doctype", "meta", "link", "hr", "br", "img"],
+			ignoreAttributes: false,
+			stopNodes: ["*.pre", "*.script"],
+			processEntities: true,
+			htmlEntities: true
+		})
+
+		let parsedData = parser.parse(allMetadata.responseBody)
+		const webmentionEndpoint = parsedData?.html?.head?.link?.find(link => {
+			return link["@_rel"] === "webmention"
+		})?.["@_href"]
+
+		const metadata = {
+			image: allMetadata['og:image'],
+			ogURL: allMetadata['og:url'],
+			canonicalURL: allMetadata.canonical,
+			title: allMetadata.title,
+			ogTitle: allMetadata['og:title'],
+			author: allMetadata.author,
+			description: allMetadata.description,
+			webmentionEndpoint
+		};
+
+		return { metadata }
+	} catch (error) {
+		console.log({ fetchingMetadataError: error })
+		return
+	}
+}

package/index.js

@@ -1,13 +1,16 @@
-import votive from "votive"
+import voot from "voot"
 import { h } from 'hastscript'
 import fs from "fs/promises"
 import { readFileSync } from "fs"
 import { rehype } from "rehype"
+import { find } from 'unist-util-find'
 import { toHast } from 'mdast-util-to-hast'
+import { fromHtml } from 'hast-util-from-html'
 import { fromMarkdown } from 'mdast-util-from-markdown'
 import { frontmatter } from "micromark-extension-frontmatter"
 import { frontmatterFromMarkdown } from 'mdast-util-frontmatter'
 import { gfmFootnoteFromMarkdown } from "mdast-util-gfm-footnote"
+import { visit } from "unist-util-visit"
 import { gfmFootnote } from "micromark-extension-gfm-footnote"
 import { gfmStrikethroughFromMarkdown } from 'mdast-util-gfm-strikethrough'
 import { gfmStrikethrough } from 'micromark-extension-gfm-strikethrough'
@@ -16,7 +19,8 @@ import { gfmTableFromMarkdown } from 'mdast-util-gfm-table'
 import { gfmTaskListItem } from 'micromark-extension-gfm-task-list-item' // TODO: Add
 import { gfmTaskListItemFromMarkdown } from 'mdast-util-gfm-task-list-item' // TODO: Add
 import { normalizeHeadings } from 'mdast-normalize-headings'
-import { toString } from 'mdast-util-to-string'
+import { toString as mdastToString } from 'mdast-util-to-string'
+import { toString as hastToString } from 'hast-util-to-string'
 import yaml from 'yaml'
 import extractDate from "./extractDate.js"
 import { testURL } from "./utils.js"
@@ -26,7 +30,7 @@ import { styleText } from "node:util"
 const VOWEL_DIR = import.meta.dirname
 
 
-/** @import {VotiveConfig, VotivePlugin, VotiveProcessor, ReadText, ReadAbstract, ReadFolder, ProcessorWrite, Router} from "votive" */
+/** @import {Runner, ReadPath, VotiveConfig, VotivePlugin, VotiveProcessor, ReadText, ReadAbstract, ReadFolder, ProcessorWrite, Router} from "votive" */
 
 /** @type {VotiveProcessor} */
 const cssWriter = {
@@ -34,6 +38,19 @@ const cssWriter = {
   write: writeCSS
 }
 
+/** @type {VotiveProcessor} */
+const jpegLoader = {
+  syntax: "jpeg",
+  filter: {
+    extensions: [".jpeg", ".jpg"]
+  },
+  read: {
+    path: readImagePath,
+  },
+  write: writeImage
+}
+
+
 /** @type {ProcessorWrite} */
 function writeCSS(destination, database, config) {
   return {
@@ -42,28 +59,65 @@ function writeCSS(destination, database, config) {
   }
 }
 
+function readURL(data) {
+  const hast = fromHtml(data)
+  const metadata = {}
+
+  visit(hast, (node) => {
+    if (node.tagName === "meta") {
+      if (node.properties && node.properties.property) {
+        metadata[node.properties.property] = node.properties.content
+      }
+    } else if (node.tagName === "title") {
+      metadata.title = hastToString(node)
+    } else if (node.tagName === "link") {
+      if (node.properties?.rel?.includes("me")) {
+        metadata.me = node.properties.href
+      } else if (node.properties?.rel?.includes("webmention")) {
+        metadata.webmention = node.properties.href
+      } else if (node.properties?.rel?.includes("icon")) {
+        metadata.icon = node.properties.href
+      }
+    }
+  })
+
+  return metadata
+}
+
 /** @type {VotiveProcessor} */
 const markdownReader = {
   syntax: "mdast",
   filter: { extensions: [".md"] },
   read: {
     text: readMarkdown,
+    url: readURL,
     abstract: readAbstract,
     folder: readFolder
   },
   write: writeHTML
 }
 
-async function remove() {
+
+async function removeCache() {
   try {
-    await fs.rm("./docs-source/.votive.db")
-    console.info(styleText("yellow", "Database cleared"))
+    await fs.rm("./.votive.db")
+    console.info(styleText("yellow", "Cache cleared"))
   } catch (e) {
     console.info(styleText("yellow", "No database cache found"))
   }
 }
 
-await remove()
+async function removeDB() {
+  try {
+    await fs.rmdir("./output")
+    console.info(styleText("yellow", "Output cleared"))
+  } catch (e) {
+    console.info(styleText("yellow", "No output cache found"))
+  }
+}
+
+await removeCache()
+await removeDB()
 
 /** @type {ReadText} */
 function readMarkdown(string, filePath, destinationPath, database, config) {
@@ -89,6 +143,7 @@ function readMarkdown(string, filePath, destinationPath, database, config) {
   metadata.inferred_label = pathInfo.name
   const destinationInfo = path.parse(destinationPath)
   metadata.prettyURL = (new URL(`${destinationInfo.dir}/${destinationInfo.name}`, "thismessage:/")).pathname
+  const jobs = []
 
   selectMetadata(metadata)
 
@@ -103,8 +158,21 @@ function readMarkdown(string, filePath, destinationPath, database, config) {
     }
   }
 
+  visit(mdast, (node, index, parent) => {
+    if (node.type === "text" && parent.children.length === 1 && parent.type === "paragraph") {
+      const validURL = testURL(node.value)
+      if (validURL) {
+
+        jobs.push({
+          data: node.value,
+          runner: "text",
+          destination: destinationPath
+        })
+      }
+    }
+  })
 
-  return { abstract: mdast, metadata }
+  return { abstract: mdast, metadata, jobs }
 }
 
 /** @param {ReturnType<getMetadata>} metadata */
@@ -173,7 +241,7 @@ function getMetadata(tree) {
 
   for (let i = 0; i < tree.children.length; i++) {
     const child = tree.children[i]
-    const text = toString(child)
+    const text = mdastToString(child)
     switch (child.type) {
       case "paragraph":
         if (child.children.length !== 1) {
@@ -197,14 +265,14 @@ function getMetadata(tree) {
             break
           }
         } else {
-          const inferred_date = extractDate(toString(child))
+          const inferred_date = extractDate(mdastToString(child))
           if (inferred_date) metadata.inferred_date = inferred_date
           else i = Infinity
           break
         }
       case "heading":
         if (child.depth === 1) {
-          metadata.inferred_title = toString(child)
+          metadata.inferred_title = mdastToString(child)
         }
         break
       case "yaml":
@@ -261,15 +329,14 @@ function readFolder(folder, database, config, isRoot) {
     })
   }
 
+
   if (isRoot) {
     // TODO: Create theme job
     const settings = database.getSettings(config.sourceFolder)
-    if (!settings.theme || settings.theme === "default") {
+    if (!settings.theme || settings.theme[0] === "default") {
       database.setSetting(folder, "theme", "default")
       // TODO: Save theme file (reset, typography, default)
 
-      console.log(process.cwd())
-
       const resetStylesPath = path.join(VOWEL_DIR, "stylesheets", "ResetStyles.css")
       const typeStylesPath = path.join(VOWEL_DIR, "stylesheets", "TypographyStyles.css")
       const defaultStylesPath = path.join(VOWEL_DIR, "stylesheets", "DefaultStyles.css")
@@ -343,7 +410,7 @@ function writeHTML(destination, database, config) {
 
   const treeStyleSheets = []
 
-  !settings.theme && treeStyleSheets.push(
+  !settings.theme || settings.theme.includes("default") && treeStyleSheets.push(
     h('link', {
       rel: "stylesheet",
       href: "/default.css"
@@ -455,6 +522,24 @@ function writeHTML(destination, database, config) {
 
   const treeMain = h('main.h-entry', toHast(abstract).children)
 
+  visit(treeMain, (node, index, parent) => {
+    if (node.type === "text" && parent.tagName === 'p' && parent.children.length === 1) {
+      const validURL = testURL(node.value)
+      if (validURL) {
+        const metadata = database.getURL(node.value)
+        if (metadata) {
+          parent.tagName = "article"
+          // TODO: Add url to metadata
+          parent.children = [
+            h("a", { href: node.value },
+              h("h2", metadata.title)
+            )
+          ]
+        }
+      }
+    }
+  })
+
   // TODO: Write sidebar
   const treeSidebar = h('nav.secondary')
   const treeFooter = h('footer', `© ${new Date().getFullYear()}`)
@@ -522,32 +607,63 @@ function router({ name, dir, inRootDir }) {
   }
 }
 
+/** @type {ReadPath} */
+async function readImagePath(string, database) {
+  // TODO: Resize and optimize images
+
+  return {
+    metadata: {},
+    abstract: { path: string }
+  }
+}
+
+/** @type {ProcessorWrite} */
+async function writeImage(destination, database, config) {
+  const buffer = await fs.readFile(destination.path)
+  return {
+    buffer
+  }
+}
+
 /** @type {VotivePlugin} */
-const vowel = {
+const vowelMarkdown = {
   name: "vowel",
   processors: [markdownReader, cssWriter],
-  runners: {},
   router
 }
 
+/** @type {VotivePlugin} */
+const vowelJpeg = {
+  name: "vowel-jpeg",
+  processors: [jpegLoader],
+  router: ({ name, dir, ext }) => {
+    return {
+      name, dir, ext
+    }
+  }
+}
+
+
+
 /** @type {VotiveConfig} */
 const config = {
-  sourceFolder: "./",
+  sourceFolder: ".",
   destinationFolder: "output",
   plugins: [
-    vowel
+    vowelMarkdown,
+    vowelJpeg
   ]
 }
 
-const then = performance.now()
 
 async function init() {
-  await fs.rm(config.destinationFolder, { recursive: true, force: true })
-  await fs.mkdir(config.destinationFolder, { recursive: true })
-  const cache = await votive(config)
+  const then = performance.now()
+  // await fs.rm(config.destinationFolder, { recursive: true, force: true })
+  // await fs.mkdir(config.destinationFolder, { recursive: true })
+  const cache = await voot(config)
+  console.log(styleText("red", (performance.now() - then).toFixed(4) + "ms"))
 }
 
-console.log(styleText("red", (performance.now() - then).toFixed() + "ms"))
 
 export default init
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vowel",
   "type": "module",
-  "version": "0.2.1-beta.1",
+  "version": "0.2.2",
   "bin": "bin.js",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,10 @@
   "license": "MIT",
   "description": "Markdown websites",
   "dependencies": {
+    "fast-xml-parser": "^5.3.6",
     "faye-websocket": "^0.11.4",
+    "hast-util-from-html": "^2.0.3",
+    "hast-util-to-string": "^3.0.1",
     "hastscript": "^9.0.1",
     "js-yaml": "^4.1.0",
     "mdast": "^2.3.2",
@@ -42,11 +45,14 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "unified": "^11.0.5",
+    "unist-util-find": "^3.0.0",
     "unist-util-is": "^6.0.0",
     "unist-util-position": "5.0.0",
     "unist-util-stringify-position": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "unist-util-visit-parents": "^6.0.0",
+    "url-metadata": "^5.4.1",
+    "voot": "^0.0.2",
     "votive": "^0.0.6",
     "xast-util-sitemap": "^2.0.0",
     "xast-util-to-xml": "^4.0.0",

package/regex.js

@@ -34,11 +34,3 @@ const test = [
 	"Monday 1st Jan 96",
 	"09.09/1999"
 ]
-
-test.forEach(string => {
-  const match = dateRegex.exec(string)
-  console.log({ match })
-  if(match) {
-    console.log({ match })
-  }
-})

package/utils.js

@@ -1,8 +1,10 @@
 /** @param {string} text */
 export function testURL(text) {
-  try {
-    return new URL(text)
-  } catch(e) {
-    return
+  if (text.match(/^https?:\/\/[\S]+$/)) {
+    try {
+      return new URL(text)
+    } catch (e) {
+      return
+    }
   }
 }