👟 recreate site task

.gitignore

@@ -1,5 +1,5 @@
 bower_components/
 node_modules/
-_site/
-build/
-package-lock.json
+build/index.html
+build/*.woff*
+build/imagesloaded*.js

build/scripts.js

@@ -65,8 +65,8 @@ function getImageItem() {
   // 10% chance of broken image src
   // random parameter to prevent cached images
   img.src = rando < 100 ? '//foo/broken-' + rando + '.jpg' :
-    // use lorempixel for great random images
-    '//lorempixel.com/' + width + '/' + height + '/' + '?' + rando;
+    // use picsum photos for great random images
+    'https://picsum.photos/' + width + '/' + height + '/' + '?' + rando;
   item.appendChild( img );
   return item;
 }

build/styles.css

@@ -317,13 +317,20 @@ th {
 /* web fonts
 ------------------------- */
 
+/* Texta Regular */
+@font-face {
+  font-family: 'Texta';
+  src: url('texta-regular.woff2') format('woff2'),
+    url('texta-regular.woff') format('woff');
+}
+
 /* Texta Heavy */
 @font-face {
   font-family: 'Texta';
   font-weight: bold;
   font-style: normal;
-  src: url('2D333F_0_0.woff2') format('woff2'),
-    url('2D333F_0_0.woff') format('woff');
+  src: url('texta-heavy.woff2') format('woff2'),
+    url('texta-heavy.woff') format('woff');
 }
 
 /* Texta Italic */
@@ -331,18 +338,10 @@ th {
   font-family: 'Texta';
   font-weight: normal;
   font-style: italic;
-  src: url('2D333F_1_0.woff2') format('woff2'),
-    url('2D333F_1_0.woff') format('woff');
+  src: url('texta-italic.woff2') format('woff2'),
+    url('texta-italic.woff') format('woff');
 }
 
-/* Texta Regular */
-@font-face {
-  font-family: 'Texta';
-  src: url('2D333F_2_0.woff2') format('woff2'),
-    url('2D333F_2_0.woff') format('woff');
-}
-
-
 /* Styles
 ------------------------- */
 

package.json

@@ -10,9 +10,11 @@
     "ev-emitter": "^2.1.2"
   },
   "devDependencies": {
+    "cheerio": "^1.0.0-rc.10",
     "eslint": "^7.32.0",
     "eslint-plugin-metafizzy": "^1.2.1",
     "jquery": "^3.6.0",
+    "marked": "^4.0.12",
     "qunit": "^2.17.2",
     "terser": "^5.10.0"
   },

tasks/site.js

@@ -0,0 +1,58 @@
+/* globals Promise */
+
+const cheerio = require('cheerio');
+const { execSync } = require('child_process');
+const fs = require('fs');
+const { marked } = require('marked');
+
+const copyFiles = [
+  'imagesloaded.js',
+  'imagesloaded.pkgd.js',
+  'imagesloaded.pkgd.min.js',
+];
+
+let fileSrcs = {};
+
+let srcFilesPromises = [
+  'README.md',
+  'html/page.html',
+  'html/github-button.html',
+  'html/demo.html',
+  'html/sponsored.html',
+].map( ( srcFile ) => new Promise( function( resolve, reject ) {
+  fs.readFile( srcFile, 'utf8', function( err, src ) {
+    if ( err ) return reject( err );
+    fileSrcs[ srcFile ] = src;
+    resolve();
+  } );
+} ) );
+
+Promise.all( srcFilesPromises )
+  .then( function() {
+    let readmeHtml = marked( fileSrcs['README.md'] );
+    let html = fileSrcs['html/page.html']
+      .replace( '{{{ content }}}', readmeHtml )
+      .replace( '<!-- github-button -->', fileSrcs['html/github-button.html'] )
+      .replace( '<!-- demo -->', fileSrcs['html/demo.html'] )
+      .replace( '<!-- sponsored -->', fileSrcs['html/sponsored.html'] );
+
+    let $ = cheerio.load( html, {
+      decodeEntities: false,
+    } );
+
+    let pageNavHtml = '\n';
+    $('#content h2').each( function( i, header ) {
+      let $header = $( header );
+      pageNavHtml += `
+        <li class="page-nav__item page-nav__item--${header.name}">
+          <a href="#${$header.attr('id')}">${$header.text()}</a>
+        </li>`;
+    } );
+    pageNavHtml = `<div class="page-nav">${pageNavHtml}</div>`;
+    html = html.replace( '<!-- page-nav -->', pageNavHtml );
+
+    execSync(`mkdir -p build`);
+    fs.writeFileSync( 'build/index.html', html );
+
+    execSync(`cp ${copyFiles.join(' ')} build/`);
+  } );