@abreen/tada 1.0.0

package/webpack/external-links-plugin.js

@@ -0,0 +1,37 @@
+const { makeLogger } = require('./log');
+
+const log = makeLogger(__filename);
+
+module.exports = function externalLinks(md, siteVariables) {
+  function addClass(token) {
+    if (token.type === 'link_open') {
+      const href = token.attrGet('href');
+
+      if (href.match(/^https?:\/\/.*$/)) {
+        const url = new URL(href);
+        if (!siteVariables.internalDomains.includes(url.host)) {
+          const classAttr = token.attrGet('class');
+          let newClassAttr;
+
+          if (classAttr) {
+            newClassAttr = classAttr + ' external';
+          } else {
+            newClassAttr = 'external';
+          }
+
+          log.debug`${href} -> "${newClassAttr}"`;
+          token.attrSet('class', newClassAttr);
+
+          log.debug`${href} -> target="_blank"`;
+          token.attrSet('target', '_blank');
+        }
+      }
+    }
+
+    token.children?.map(addClass);
+  }
+
+  md.core.ruler.push('external_links', state => {
+    state.tokens.map(addClass);
+  });
+};

package/webpack/features.js

@@ -0,0 +1,5 @@
+function isFeatureEnabled(siteVariables, featureName) {
+  return siteVariables.features?.[featureName] !== false;
+}
+
+module.exports = { isFeatureEnabled };

package/webpack/flair.json

@@ -0,0 +1 @@
+["Tada", "Voilà", "Presto", "Boom", "Bam", "Ka-pow", "Shazam", "Eureka"]

package/webpack/generate-content-assets-plugin.js

@@ -0,0 +1,308 @@
+const path = require('path');
+const { RawSource } = require('webpack').sources;
+const { makeLogger } = require('./log');
+const { isFeatureEnabled } = require('./features');
+const { initHighlighter } = require('./utils/shiki-highlighter');
+const {
+  getBuildContentFiles,
+  getContentDir,
+  getValidInternalTargets,
+  renderCodePageAsset,
+  renderCopiedContentAsset,
+  renderLiterateJavaPageAsset,
+  renderPlainTextPageAsset,
+} = require('./util');
+const { isLiterateJava } = require('./utils/file-types');
+const { getWatchState, setBuildDelta } = require('./build-state');
+
+const log = makeLogger(__filename);
+
+function normalizePaths(paths) {
+  return [...paths];
+}
+
+class GenerateContentAssetsPlugin {
+  constructor(siteVariables) {
+    this.siteVariables = siteVariables || {};
+    this.loggedCodeDisabled = false;
+    this.sourceFileCache = new Map();
+    this.lastBuildFiles = new Set();
+  }
+
+  getBuildContentFiles(compiler) {
+    const watchState = getWatchState(compiler);
+    if (watchState?.buildContentFiles?.size) {
+      return normalizePaths(watchState.buildContentFiles);
+    }
+
+    return getBuildContentFiles(
+      getContentDir(),
+      Object.keys(this.siteVariables.codeLanguages || {}),
+    );
+  }
+
+  getDirtySourceFiles(compiler, buildContentFiles) {
+    const watchState = getWatchState(compiler);
+    const isWatch = !!compiler.watching;
+
+    if (
+      !isWatch ||
+      this.lastBuildFiles.size === 0 ||
+      !watchState ||
+      watchState.templatesChanged
+    ) {
+      return new Set(buildContentFiles);
+    }
+
+    const buildFileSet = new Set(buildContentFiles);
+    const dirtySourceFiles = new Set();
+    for (const filePath of watchState.changedContentFiles) {
+      if (buildFileSet.has(filePath)) {
+        dirtySourceFiles.add(filePath);
+      }
+    }
+    return dirtySourceFiles;
+  }
+
+  isCopiedAssetSource(filePath) {
+    const ext = path.extname(filePath).toLowerCase();
+    const codeExtensions = this.siteVariables.codeLanguages || {};
+    return (
+      ext === '.pdf' ||
+      Object.prototype.hasOwnProperty.call(codeExtensions, ext.slice(1))
+    );
+  }
+
+  getDirtyCopiedSourceFiles(compiler, buildContentFiles) {
+    const watchState = getWatchState(compiler);
+    const isWatch = !!compiler.watching;
+
+    if (!isWatch || this.lastBuildFiles.size === 0 || !watchState) {
+      return buildContentFiles.filter(filePath =>
+        this.isCopiedAssetSource(filePath),
+      );
+    }
+
+    const buildFileSet = new Set(buildContentFiles);
+    const dirtyCopiedSourceFiles = [];
+    for (const filePath of watchState.changedContentFiles) {
+      if (!buildFileSet.has(filePath) || !this.isCopiedAssetSource(filePath)) {
+        continue;
+      }
+      dirtyCopiedSourceFiles.push(filePath);
+    }
+
+    return dirtyCopiedSourceFiles;
+  }
+
+  renderSourceAssets(filePath, contentDir, validInternalTargets, compilation) {
+    const ext = path.extname(filePath).toLowerCase();
+    const assets = [];
+
+    if (isLiterateJava(filePath)) {
+      if (isFeatureEnabled(this.siteVariables, 'literateJava')) {
+        assets.push(
+          ...renderLiterateJavaPageAsset({
+            filePath,
+            contentDir,
+            siteVariables: this.siteVariables,
+            compilation,
+          }),
+        );
+      }
+      return assets;
+    }
+
+    if (ext === '.html' || ext === '.md' || ext === '.markdown') {
+      assets.push(
+        ...renderPlainTextPageAsset({
+          filePath,
+          contentDir,
+          siteVariables: this.siteVariables,
+          validInternalTargets,
+          compilation,
+        }),
+      );
+      return assets;
+    }
+
+    if (ext === '.pdf') {
+      return assets;
+    }
+
+    const codeExtensions = this.siteVariables.codeLanguages || {};
+    if (ext.slice(1) in codeExtensions) {
+      if (isFeatureEnabled(this.siteVariables, 'code')) {
+        assets.push(
+          ...renderCodePageAsset({
+            filePath,
+            contentDir,
+            siteVariables: this.siteVariables,
+            compilation,
+          }),
+        );
+      } else if (!this.loggedCodeDisabled) {
+        log.info`Not generating source code pages due to site.features.code = false`;
+        this.loggedCodeDisabled = true;
+      }
+    }
+
+    return assets;
+  }
+
+  emitUncachedAssets(compilation, copiedSourceFiles, contentDir) {
+    for (const filePath of copiedSourceFiles) {
+      for (const asset of renderCopiedContentAsset({ filePath, contentDir })) {
+        const source = new RawSource(asset.content);
+        if (compilation.getAsset(asset.assetPath)) {
+          compilation.updateAsset(asset.assetPath, source);
+        } else {
+          compilation.emitAsset(asset.assetPath, source);
+        }
+      }
+    }
+  }
+
+  updateSourceCache(
+    filePath,
+    assets,
+    changedHtmlAssetPaths,
+    removedHtmlAssetPaths,
+  ) {
+    const previousAssets = this.sourceFileCache.get(filePath) || [];
+    const nextAssetPaths = new Set(assets.map(asset => asset.assetPath));
+
+    for (const asset of previousAssets) {
+      if (nextAssetPaths.has(asset.assetPath)) {
+        continue;
+      }
+      if (asset.assetPath.endsWith('.html')) {
+        removedHtmlAssetPaths.add(asset.assetPath);
+      }
+    }
+
+    for (const asset of assets) {
+      if (asset.assetPath.endsWith('.html')) {
+        changedHtmlAssetPaths.add(asset.assetPath);
+      }
+    }
+
+    this.sourceFileCache.set(filePath, assets);
+  }
+
+  emitCachedAssets(compilation, buildContentFiles) {
+    for (const filePath of buildContentFiles) {
+      const assets = this.sourceFileCache.get(filePath) || [];
+      for (const asset of assets) {
+        const source = new RawSource(asset.content);
+        if (compilation.getAsset(asset.assetPath)) {
+          compilation.updateAsset(asset.assetPath, source);
+        } else {
+          compilation.emitAsset(asset.assetPath, source);
+        }
+      }
+    }
+  }
+
+  pruneRemovedSources(buildFileSet, removedHtmlAssetPaths) {
+    for (const filePath of [...this.lastBuildFiles]) {
+      if (buildFileSet.has(filePath)) {
+        continue;
+      }
+
+      const previousAssets = this.sourceFileCache.get(filePath) || [];
+      for (const asset of previousAssets) {
+        if (asset.assetPath.endsWith('.html')) {
+          removedHtmlAssetPaths.add(asset.assetPath);
+        }
+      }
+      this.sourceFileCache.delete(filePath);
+    }
+  }
+
+  apply(compiler) {
+    const pluginName = 'GenerateContentAssetsPlugin';
+
+    compiler.hooks.beforeCompile.tapPromise(pluginName, async () => {
+      const langs = [
+        ...new Set([
+          'plaintext',
+          'text',
+          ...Object.values(this.siteVariables.codeLanguages || {}),
+        ]),
+      ];
+      await initHighlighter(langs);
+    });
+
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: pluginName,
+          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+        },
+        () => {
+          const contentDir = getContentDir();
+          const buildContentFiles = this.getBuildContentFiles(compiler);
+          log.info`Processing ${buildContentFiles.length} content file(s)`;
+          const buildFileSet = new Set(buildContentFiles);
+          const dirtySourceFiles = this.getDirtySourceFiles(
+            compiler,
+            buildContentFiles,
+          );
+          const dirtyCopiedSourceFiles = this.getDirtyCopiedSourceFiles(
+            compiler,
+            buildContentFiles,
+          );
+          const changedHtmlAssetPaths = new Set();
+          const removedHtmlAssetPaths = new Set();
+          const validInternalTargets = getValidInternalTargets(
+            contentDir,
+            buildContentFiles,
+            Object.keys(this.siteVariables.codeLanguages || {}),
+          );
+          const watchState = getWatchState(compiler);
+
+          this.pruneRemovedSources(buildFileSet, removedHtmlAssetPaths);
+
+          for (const filePath of dirtySourceFiles) {
+            let assets;
+            try {
+              assets = this.renderSourceAssets(
+                filePath,
+                contentDir,
+                validInternalTargets,
+                compilation,
+              );
+            } catch (err) {
+              compilation.errors.push(err);
+              continue;
+            }
+            this.updateSourceCache(
+              filePath,
+              assets,
+              changedHtmlAssetPaths,
+              removedHtmlAssetPaths,
+            );
+          }
+
+          this.emitCachedAssets(compilation, buildContentFiles);
+          this.emitUncachedAssets(
+            compilation,
+            dirtyCopiedSourceFiles,
+            contentDir,
+          );
+          this.lastBuildFiles = buildFileSet;
+
+          setBuildDelta(compiler, {
+            changedSourceFiles: dirtySourceFiles,
+            changedHtmlAssetPaths,
+            removedHtmlAssetPaths,
+            templatesChanged: Boolean(watchState?.templatesChanged),
+          });
+        },
+      );
+    });
+  }
+}
+
+module.exports = GenerateContentAssetsPlugin;

package/webpack/generate-favicon-plugin.js

@@ -0,0 +1,198 @@
+const path = require('path');
+const fontkit = require('fontkit');
+const sharp = require('sharp');
+const { default: pngToIco } = require('png-to-ico');
+const { makeLogger } = require('./log');
+const { getPackageDir } = require('./utils/paths');
+
+const log = makeLogger(__filename);
+
+const FONT_PATH = path.join(
+  getPackageDir(),
+  'fonts',
+  'inter',
+  'InterVariable.ttf',
+);
+
+function createFaviconSvg(size, color, symbol, font, cssWeight) {
+  if (size < 10) {
+    throw new Error(`size is too small: ${size}`);
+  }
+
+  if (!symbol) {
+    throw new Error(`invalid symbol: ${symbol}`);
+  }
+
+  if (symbol.length > 5) {
+    throw new Error(`symbol is too long (must be <= 5 chars): ${symbol}`);
+  }
+
+  // Apply variation axes for variable fonts
+  const instance =
+    typeof font.getVariation === 'function' &&
+    font.variationAxes &&
+    Object.keys(font.variationAxes).length > 0
+      ? font.getVariation({ wght: cssWeight })
+      : font;
+
+  const run = instance.layout(symbol);
+
+  // Compute combined bounding box across all glyphs (font units, y-up)
+  let x = 0;
+  let totalMinX = Infinity,
+    totalMaxX = -Infinity;
+  let totalMinY = Infinity,
+    totalMaxY = -Infinity;
+  const advances = [];
+
+  for (let i = 0; i < run.glyphs.length; i++) {
+    const bbox = run.glyphs[i].bbox;
+    totalMinX = Math.min(totalMinX, x + bbox.minX);
+    totalMaxX = Math.max(totalMaxX, x + bbox.maxX);
+    totalMinY = Math.min(totalMinY, bbox.minY);
+    totalMaxY = Math.max(totalMaxY, bbox.maxY);
+    advances.push(x);
+    x += run.positions[i].xAdvance;
+  }
+
+  const textW = totalMaxX - totalMinX;
+  const textH = totalMaxY - totalMinY;
+
+  if (textW <= 0 || textH <= 0) {
+    throw new Error(`Could not get glyph bounds for symbol: ${symbol}`);
+  }
+
+  const pad = size * 0.1;
+  const contentW = size - pad * 2;
+  const contentH = size - pad * 2;
+
+  // Scale font units to SVG pixels to fill padded content area
+  const s = Math.min(contentW / textW, contentH / textH);
+
+  // Font coords are y-up; SVG is y-down. The outer transform flips y via scale(s, -s).
+  // We want the bbox center to land at (size/2, size/2).
+  const bboxCenterX = (totalMinX + totalMaxX) / 2;
+  const bboxCenterY = (totalMinY + totalMaxY) / 2;
+  const tx = size / 2 - bboxCenterX * s;
+  const ty = size / 2 + bboxCenterY * s;
+
+  // Each glyph is translated by its cumulative x-advance (in font units).
+  // The outer group handles y-flip and centering.
+  const paths = run.glyphs
+    .map((glyph, i) => {
+      const d = glyph.path.toSVG();
+      return advances[i] === 0
+        ? `<path d="${d}" fill="#fff" />`
+        : `<path d="${d}" transform="translate(${advances[i]} 0)" fill="#fff" />`;
+    })
+    .join('\n    ');
+
+  return `<svg viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
+  <rect width="${size}" height="${size}" rx="${size / 10}" fill="${color}" />
+  <g transform="translate(${tx.toFixed(2)} ${ty.toFixed(2)}) scale(${s.toFixed(4)} ${(-s).toFixed(4)})">
+    ${paths}
+  </g>
+</svg>`;
+}
+
+class GenerateFaviconPlugin {
+  _cachedAssets = null;
+
+  constructor(siteVariables, options = {}) {
+    this.options = {
+      sizes: options.sizes || [16, 32, 48, 64, 128, 192, 256, 512, 1024],
+      svgSize: options.svgSize || 512,
+      filenameBase: options.filenameBase || 'favicon',
+      color: siteVariables.faviconColor,
+      symbol: siteVariables.faviconSymbol,
+      fontWeight: siteVariables.faviconFontWeight || 700,
+    };
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap('GenerateFaviconPlugin', compilation => {
+      const wp = compilation.compiler.webpack || {};
+      const { RawSource } =
+        (wp.sources && wp.sources) || require('webpack-sources');
+
+      compilation.hooks.processAssets.tapPromise(
+        {
+          name: 'GenerateFaviconPlugin',
+          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+        },
+        async assets => {
+          if (this._cachedAssets) {
+            for (const [name, source] of this._cachedAssets) {
+              compilation.emitAsset(name, source);
+            }
+            return;
+          }
+
+          const { color, symbol, sizes, filenameBase, svgSize, fontWeight } =
+            this.options;
+
+          if (!color || !symbol) {
+            throw new Error('Missing required "color" and/or "symbol" options');
+          }
+
+          this._cachedAssets = new Map();
+
+          try {
+            log.info`Generating favicons for "${symbol}"`;
+            log.debug`Using font file: ${FONT_PATH}`;
+            const font = fontkit.openSync(FONT_PATH);
+
+            const svgMarkup = createFaviconSvg(
+              svgSize,
+              color,
+              symbol,
+              font,
+              fontWeight,
+            );
+            const svgSource = new RawSource(svgMarkup);
+            compilation.emitAsset(`${filenameBase}.svg`, svgSource);
+            this._cachedAssets.set(`${filenameBase}.svg`, svgSource);
+
+            const pngBuffers = await Promise.all(
+              sizes.map(async size => {
+                const svgForSize = createFaviconSvg(
+                  size,
+                  color,
+                  symbol,
+                  font,
+                  fontWeight,
+                );
+                const buf = await sharp(Buffer.from(svgForSize))
+                  .png()
+                  .toBuffer();
+
+                const pngName = `${filenameBase}-${size}.png`;
+                const pngSource = new RawSource(buf);
+                compilation.emitAsset(pngName, pngSource);
+                this._cachedAssets.set(pngName, pngSource);
+                return { size, buf };
+              }),
+            );
+
+            const icoBuffer = await pngToIco(
+              pngBuffers
+                .filter(b => b.size <= 256)
+                .sort((a, b) => a.size - b.size)
+                .map(x => x.buf),
+            );
+            const icoSource = new RawSource(icoBuffer);
+            compilation.emitAsset(`${filenameBase}.ico`, icoSource);
+            this._cachedAssets.set(`${filenameBase}.ico`, icoSource);
+          } catch (err) {
+            this._cachedAssets = null;
+            compilation.errors.push(
+              new Error(`Error: ${err && err.message ? err.message : err}`),
+            );
+          }
+        },
+      );
+    });
+  }
+}
+
+module.exports = GenerateFaviconPlugin;

package/webpack/generate-fonts-plugin.js

@@ -0,0 +1,69 @@
+const fs = require('fs');
+const path = require('path');
+const wawoff2 = require('wawoff2');
+const { getPackageDir } = require('./utils/paths');
+const { makeLogger } = require('./log');
+
+const log = makeLogger(__filename);
+const FONTS_DIR = path.join(getPackageDir(), 'fonts');
+
+class GenerateFontsPlugin {
+  _cachedAssets = null;
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap('GenerateFontsPlugin', compilation => {
+      const { RawSource } =
+        compilation.compiler.webpack?.sources || require('webpack-sources');
+
+      compilation.hooks.processAssets.tapPromise(
+        {
+          name: 'GenerateFontsPlugin',
+          stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+        },
+        async () => {
+          if (this._cachedAssets) {
+            for (const [name, source] of this._cachedAssets) {
+              compilation.emitAsset(name, source);
+            }
+            return;
+          }
+
+          this._cachedAssets = new Map();
+
+          log.info`Bundling fonts from ${FONTS_DIR}`;
+
+          for (const family of fs.readdirSync(FONTS_DIR)) {
+            const familyDir = path.join(FONTS_DIR, family);
+            if (!fs.statSync(familyDir).isDirectory()) {
+              continue;
+            }
+
+            for (const file of fs.readdirSync(familyDir)) {
+              const filePath = path.join(familyDir, file);
+              let source;
+
+              if (file.endsWith('.ttf')) {
+                const ttfBuf = fs.readFileSync(filePath);
+                const woff2Buf = Buffer.from(await wawoff2.compress(ttfBuf));
+                const outName = file.replace(/\.ttf$/, '.woff2');
+                const assetName = `${family}/${outName}`;
+
+                source = new RawSource(woff2Buf);
+                compilation.emitAsset(assetName, source);
+                this._cachedAssets.set(assetName, source);
+                log.debug`Converted ${family}/${file} to ${outName}`;
+              } else {
+                const assetName = `${family}/${file}`;
+                source = new RawSource(fs.readFileSync(filePath));
+                compilation.emitAsset(assetName, source);
+                this._cachedAssets.set(assetName, source);
+              }
+            }
+          }
+        },
+      );
+    });
+  }
+}
+
+module.exports = GenerateFontsPlugin;