fix: get image path from HTML <img src=""> tag

bin/help.txt

@@ -11,7 +11,7 @@ Options:
       --highlight-theme <theme>               Highlight theme [default: zenburn]
       --css <files>                           CSS files to inject into the page
       --scripts <files>                       Scripts to inject into the page
-      --assets-dir <dirname>                  Defines assets directory name [default: _assets]
+      --assets-dir <dirname>                  Defines assets directory name [default: assets]
       --view scroll                           Use reveal.js scroll view feature [default: undefined]
       --preprocessor <script>                 Markdown preprocessor script
       --template <filename>                   Template file for reveal.js

lib/config.js

@@ -4,10 +4,9 @@ import { readFile } from 'node:fs/promises';
 import * as fs from 'fs-extra';
 import parseArgs from 'yargs-parser';
 import path from 'node:path';
-import url from 'node:url';
+import url, { pathToFileURL } from 'node:url';
 import { globSync } from 'glob';
 import { isDirectory, isFile, isAbsoluteURL, tryReadJson5Configs, loadJSON } from './util.js';
-
 const require = createRequire(import.meta.url);
 
 const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
@@ -112,7 +111,7 @@ export const getFaviconPath = async () => {
 
 export const getPreprocessor = async preprocessor => {
   if (preprocessor) {
-    const { default: defaultFunc } = await import(preprocessor);
+    const { default: defaultFunc } = await import(pathToFileURL(preprocessor));
     return defaultFunc;
   }
 

lib/defaults.json

@@ -1,5 +1,5 @@
 {
-  "assetsDir": "_assets",
+  "assetsDir": "assets",
   "css": [],
   "highlightTheme": "base16/zenburn",
   "host": "localhost",

lib/featured-slide.js

@@ -25,7 +25,7 @@ const getSlideAnchor = featuredSlide => {
 export default async (initialUrl, targetDir) => {
   const { featuredSlide } = getOptions();
 
-  if (!featuredSlide || !puppeteer) {
+  if ((!featuredSlide && featuredSlide !== 0)  || !puppeteer) {
     return;
   }
 
@@ -34,7 +34,8 @@ export default async (initialUrl, targetDir) => {
   const snapshotFilename = `${targetDir}/featured-slide.jpg`;
 
   const url = `http://${host}:${port}/${initialUrl}${getSlideAnchor(featuredSlide.toString())}`;
-
+
+  console.log("🚀 ~ url:", url)
   debug({ url, snapshotFilename, puppeteerLaunchConfig });
 
   try {

lib/listing.js

@@ -27,7 +27,7 @@ const getFileMeta = async filePath => {
 // Exports ---------------------------------------------------------------------
 
 export const renderListFile = async filePaths => {
-  const { title, listingTemplate, theme, assetsDir } = getOptions();
+  const { title, description, listingTemplate, theme, assetsDir } = getOptions();
   const template = await getListingTemplate(listingTemplate);
   const themeUrl = getThemeUrl(theme, assetsDir, '.');
   let files = await Promise.all(filePaths.map(getFileMeta));
@@ -36,6 +36,7 @@ export const renderListFile = async filePaths => {
     base: '',
     themeUrl,
     pageTitle: title,
+    description,
     files,
     date: new Date().toISOString()
   });

lib/render.js

@@ -37,7 +37,7 @@ function sanitize(entry) {
  * @param {Object} extraOptions - Additional options (mostly used by tests)
  * @returns {string} The rendered HTML compatible with reveal.js
  */
-export const render = async (fullMarkdown, extraOptions = {}) => {
+export const render = async (fullMarkdown, extraOptions = {}, filePath = undefined) => {
   const { yamlOptions, markdown: contentOnlyMarkdown } = parseYamlFrontMatter(fullMarkdown);
   const options = Object.assign(getSlideOptions(yamlOptions), extraOptions);
 
@@ -46,7 +46,8 @@ export const render = async (fullMarkdown, extraOptions = {}) => {
   const highlightThemeUrl = getHighlightThemeUrl(options.highlightTheme);
   const scriptPaths = getScriptPaths(options.scripts, options.assetsDir, options.base);
   const cssPaths = getCssPaths(options.css, options.assetsDir, options.base);
-
+  const ogImage = filePath ? path.dirname(filePath) + '/featured-slide.jpg' : 'featured-slide.jpg'
+  const ogUrl = filePath.replace('.md', '.html')
   const revealOptions = Object.assign({}, getRevealOptions(options.revealOptions), yamlOptions.revealOptions);
 
   const slidifyOptions = _.pick(options, Object.keys(slidifyAttributeNames));
@@ -55,7 +56,6 @@ export const render = async (fullMarkdown, extraOptions = {}) => {
     const escaped_value = value.replace(/\n/g, '\\n').replace(/\r/g, '\\r');
     slidifyAttributes.push(`${slidifyAttributeNames[key]}="${escaped_value}"`);
   }
-
   const preprocessorFn = await getPreprocessor(options.preprocessor);
   const processedMarkdown = await preprocessorFn(contentOnlyMarkdown, options);
 
@@ -67,6 +67,9 @@ export const render = async (fullMarkdown, extraOptions = {}) => {
     title,
     slidifyAttributes: slidifyAttributes.join(' '),
     markdown: processedMarkdown,
+    description: options.description,
+    ogImage,
+    ogUrl,
     themeUrl,
     highlightThemeUrl,
     scriptPaths,
@@ -83,7 +86,7 @@ export const render = async (fullMarkdown, extraOptions = {}) => {
 export const renderFile = async (filePath, extraOptions) => {
   try {
     const content = await readFile(filePath);
-    return render(content.toString(), extraOptions);
+    return render(content.toString(), extraOptions, filePath);
   } catch (e) {
     return render('File not found.', extraOptions);
   }

lib/static.js

@@ -19,7 +19,8 @@ import featuredSlide from './featured-slide.js';
 
 const files = new Set();
 
-const htmlImageRE = /!\[.*?\]\((.+?)\)/g;
+const markdownImageRE = /!\[.*?\]\((.+?)\)/g;
+const htmlImageRE = /<img .*?src=["'](.+?)["'].*?>/g;
 const htmlImageBackgroundRE = /<!--.*?data-background-image=["'](.+?)["'].*?-->/g;
 
 const relativeDir = (from, to) => path.relative(from, to).replace(/^\.\./, '.');
@@ -28,18 +29,21 @@ const readablePath = file =>
   file.replace(/^.*(reveal-md\/node_modules.+)/, '$1').replace(new RegExp(`^${process.cwd()}/`), '');
 
 const cp = (source, target) => {
+  const posixSource = source.split(path.sep).join(path.posix.sep);
+  const posixTarget = target.split(path.sep).join(path.posix.sep);
   if (!files.has(target)) {
     files.add(target);
     console.log(`❏ ${readablePath(source)} → ${target}`);
-    return fs.copy(source, target);
+    return fs.copy(posixSource, posixTarget);
   } else {
     return Promise.resolve();
   }
 };
 
 const write = (target, content) => {
+  const posixTarget = target.split(path.sep).join(path.posix.sep);
   console.log(`★ ${target}`);
-  return fs.outputFile(target, content);
+  return fs.outputFile(posixTarget, content);
 };
 
 const copyAssetsFromOptions = async function (markdown) {
@@ -74,15 +78,18 @@ const copyAssetsAndWriteFile = async (sourceDir, file, targetDir) => {
   const base = relativeDir(file, '.');
   const markup = await renderFile(path.join(sourceDir, file), { base });
 
-  const images = markdown.matchAll(htmlImageRE);
-  const backgroundImages = markdown.matchAll(htmlImageBackgroundRE);
-  const allImages = [...images, ...backgroundImages];
+  const markdownImages = markup.matchAll(markdownImageRE);
+  const htmlImages = markup.matchAll(htmlImageRE);
+  const backgroundImages = markup.matchAll(htmlImageBackgroundRE);
+  const allImages = [...markdownImages, ...htmlImages, ...backgroundImages];
 
   for (let image of allImages) {
     const [, imgPath] = image;
     if (!isAbsoluteURL(imgPath)) {
-      const relPath = path.join(path.dirname(file), imgPath);
-      awaits.push(cp(path.join(sourceDir, relPath), path.join(targetDir, relPath)).catch(err => console.warn(err)));
+      const relPath = decodeURIComponent(path.join(path.dirname(file), imgPath.replaceAll('\\', '/')));
+      const sourceImgPath = path.join(sourceDir, relPath);
+      const targetImgPath = path.join(targetDir, relPath);
+      awaits.push(cp(sourceImgPath, targetImgPath).catch(err => console.warn(err)));
     }
   }
 
@@ -133,3 +140,4 @@ export default async () => {
 
   console.log(`Wrote static site to ${staticDir}`);
 };
+

lib/template/listing.html

@@ -2,7 +2,20 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+
     <title>{{pageTitle}}</title>
+    <meta name="description" content="{{{description}}}" />
+
+    <meta property="og:title" content="{{{title}}}" />
+    <meta property="og:description" content="{{{description}}}" />
+    <meta property="og:type" content="website" />
+    <!-- <meta property="og:image" content="{{{absoluteUrl}}}/{{{ogImage}}}" />
+    <meta property="og:url" content="{{{absoluteUrl}}}/{{{ogUrl}}}" /> -->
+    <meta property="og:type" content="article" />
+
+    <meta itemProp="name" content="{{{title}}}" />
+    <meta itemProp="description" content="{{{description}}}" />
+
     <link rel="stylesheet" href="{{{themeUrl}}}" id="theme" />
   </head>
 

lib/template/reveal.html

@@ -4,12 +4,18 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-    <title>{{{title}}}</title>
+    <meta name="description" content="{{{description}}}" />
+
     {{#absoluteUrl}}
     <meta property="og:title" content="{{{title}}}" />
+    <meta property="og:description" content="{{{description}}}" />
     <meta property="og:type" content="website" />
-    <meta property="og:image" content="{{{absoluteUrl}}}/featured-slide.jpg" />
-    <meta property="og:url" content="{{{absoluteUrl}}}" />
+    <meta property="og:image" content="{{{absoluteUrl}}}/{{{ogImage}}}" />
+    <meta property="og:url" content="{{{absoluteUrl}}}/{{{ogUrl}}}" />
+    <meta property="og:type" content="article" />
+
+    <meta itemProp="name" content="{{{title}}}" />
+    <meta itemProp="description" content="{{{description}}}" />
     {{/absoluteUrl}}
     <link rel="shortcut icon" href="{{{base}}}/favicon.ico" />
     <link rel="stylesheet" href="{{{base}}}/dist/reset.css" />