wip: notes

_includes/note.pug

@@ -0,0 +1,22 @@
+doctype html
+html(lang='en')
+  head
+    include /head.pug
+
+    //- Styles
+    link(rel='stylesheet', href='/public/styles/post.css')
+    link(rel='stylesheet', href='https://unpkg.com/prismjs@1.20.0/themes/prism.css')
+  body
+    include /header.pug
+
+    main.line-numbers
+      h1= title
+      p.meta
+        time.pubtime(datetime=page.date.toISOString())= page.date.toDateString()
+        if location
+          | , 
+          = location
+      hr
+      article(class=(asciiDoctor ? "asciidoctor" : ""))!= content
+
+    include /footer.pug

gulpfile.js

@@ -0,0 +1,48 @@
+const { watch, src, dest, parallel, series } = require("gulp")
+const asciidoctor = require("@asciidoctor/gulp-asciidoctor")
+const grayMatter = require("gulp-gray-matter")
+const tap = require("gulp-tap")
+const rename = require("gulp-rename")
+
+function convertAdoc () {
+  return src("notes/**/*.adoc")
+    .pipe(grayMatter())
+    .pipe(asciidoctor({
+      standalone: false
+    }))
+    .pipe(tap(function(file) {
+      file.contents = Buffer.concat([
+        new Buffer("---\nasciiDoctor: true\ntemplateEngineOverride: false\n---\n"),
+        file.contents
+      ])
+    }))
+    .pipe(dest("notes"))
+}
+
+function extractFrontMatterFromAdoc () {
+  return src("notes/**/*.adoc")
+    .pipe(grayMatter())
+    .pipe(tap(function(file) {
+      file.contents = new Buffer(JSON.stringify(file.data))
+    }))
+    .pipe(rename(function(path) {
+      path.extname = ".11tydata.json";
+    }))
+    .pipe(dest("notes"))
+}
+
+function processAdoc (cb) {
+  parallel(
+    convertAdoc,
+    extractFrontMatterFromAdoc)(cb)
+}
+
+function watchAdoc () {
+  watch('notes/**/*.adoc', processAdoc)
+};
+
+exports.processAdoc = processAdoc;
+
+exports.default = parallel(
+  processAdoc,
+  watchAdoc)

index.pug

@@ -1,8 +1,5 @@
 ---
 eleventyExcludeFromCollections: true
-pagination:
-  data: collections.all
-  size: 2
 title: "Vlad Faust Blog"
 titleNoAppend: true
 description: "Vlad Faust's personal blog"
@@ -20,11 +17,18 @@ html(lang='en')
     include /header.pug
 
     main
-      h2 Recent posts
+      h2 Articles
       ul.posts
-        each post in collections.all.reverse().filter((post) => !post.data.hidden)
+        each post in collections.post.reverse().filter((post) => !post.data.hidden)
           li
             span.date= post.date.toDateString()
             a.title(href=post.url)= post.data.title
 
+      h2 Notes
+      ul.notes
+        each note in collections.note.reverse().filter((note) => !note.data.hidden)
+          li
+            span.date= note.date.toDateString()
+            a.title(href=note.url)= note.data.title
+
     include /footer.pug

notes/.gitignore

@@ -0,0 +1,2 @@
+*.html
+*.11tydata.json

notes/notes.json

@@ -0,0 +1,4 @@
+{
+  "tags": "note",
+  "layout": "note.pug"
+}

package.json

@@ -6,15 +6,19 @@
   "private": "true",
   "scripts": {
     "debug": "DEBUG=* npx @11ty/eleventy",
-    "dev": "npx @11ty/eleventy --serve",
+    "dev": "npx concurrently \"npx gulp\" \"npx @11ty/eleventy --serve\"",
-    "build": "npx @11ty/eleventy"
+    "build": "npx gulp processAdoc && npx @11ty/eleventy"
   },
   "keywords": [],
   "author": "Vlad Faust <mail@vladfaust.com>",
   "license": "None",
   "devDependencies": {
-    "@11ty/eleventy": "^0.11.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
+    "@asciidoctor/gulp-asciidoctor": "^2.2.5",
+    "asciidoctor.js": "1.5.9",
+    "gulp-gray-matter": "^3.0.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-tap": "^2.0.0",
     "markdown-it-anchor": "^5.3.0",
     "markdown-it-attrs": "^3.0.3",
     "markdown-it-container": "^3.0.0",

posts/posts.json

@@ -1,3 +1,4 @@
 {
+  "tags": "post",
   "layout": "post.pug"
 }

public/styles/post.css

@@ -64,7 +64,8 @@ article > h2,
 article > h3,
 article > h4,
 article > h5,
-article > h6
+article > h6,
+article.asciidoctor .paragraph
 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -96,17 +97,36 @@ blockquote {
   background-color: rgba(0, 0, 0, 0.025);
 }
 
-pre[class*="language-"] {
+pre[class*="language-"], pre.highlight {
   width: 100%;
   box-sizing: border-box;
   max-width: 100vw;
 }
 
+pre.highlight {
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 1rem;
+  overflow: auto;
+}
+
 code {
   background-color: rgba(0, 0, 0, 0.15);
   /* padding: 0 0.25rem; */
 }
 
+article.asciidoctor .exampleblock {
+  width: 100%;
+  box-sizing: border-box;
+  max-width: 100vw;
+  padding: 0.5rem 1rem;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+article.asciidoctor .listingblock > .title {
+  font-style: italic;
+  margin-bottom: -0.5rem;
+}
+
 details {
   max-width: 100vw;
   margin-top: 1rem;