nafeu

/* Step 2: Construct page data from components */
for (const component of components) {
  const { content } = Marked.parse(component);

  const [matchedComponentType] = content.matchAll(COMPONENT_TYPE_PATTERN);
  const [, path, name] = matchedComponentType;

  const [matchedHtml] = content.matchAll(HTML_CONTENT_PATTERN);
  const [, html] = matchedHtml;

nafeu

{
  path: "/home",
  name: "Home",
  html: '<h1 id="home">Home</h1>\n<p>Hello world!</p>\n'
}
{
  path: "/about",
  name: "About",
  html: '<h1 id="about">About</h1>\n<p>Built for learning.</p>\n'
}

nafeu

/* Step 2: Construct page data from components */
for (const component of components) {
  const { content } = Marked.parse(component);

  const [matchedComponentType] = content.matchAll(COMPONENT_TYPE_PATTERN);
  const [, path, name] = matchedComponentType;

  const [matchedHtml] = content.matchAll(HTML_CONTENT_PATTERN);
  const [, html] = matchedHtml;

nafeu

{
  layout: { footer: "<p>deno-md-site</p>\n" },
  pages: [
    {
      path: "/home",
      name: "Home",
      html: '<h1 id="home">Home</h1>\n<p>Hello world!</p>\n'
    },
    {
      path: "/about",

nafeu

/* Section: Constants */
const FIRST_ITEM_INDEX = 0;
const SECOND_ITEM_INDEX = 1;
const COMPONENT_DELIMITER = '+++';
const COMPONENT_TYPE_PATTERN = /<\S>(.*?)\:(.*?)<\/\S>/g;
const HTML_CONTENT_PATTERN = /\n(.*)/gs;
const LAYOUT_PREFIX = 'layout';
const HOME_PATH = '/home';
const STYLESHEET_PATH = 'styles.css';

nafeu

/* Step 3: Generate templates for html content */
const isHomePath = (path: string) => path === HOME_PATH;

nafeu

/* Step 3: Generate templates for html content */
const isHomePath = (path: string) => path === HOME_PATH;

const getStylesheetHref = (path: string) => {
  return isHomePath(path) ? STYLESHEET_PATH : `../${STYLESHEET_PATH}`;
}

nafeu

/* Step 3: Generate templates for html content */
const isHomePath = (path: string) => path === HOME_PATH;

const getStylesheetHref = (path: string) => {
  return isHomePath(path) ? STYLESHEET_PATH : `../${STYLESHEET_PATH}`;
}

const getFaviconSvg = (favicon: string) => `
  <svg xmlns="http://www.w3.org/2000/svg">
    <text y="32" font-size="32">${favicon ? favicon : '🦕'}</text>

nafeu

const getNavigation = (currentPath: string) => `
  <div id="nav">
    ${pages.map(({ path, name }) => {
      const href = path === HOME_PATH ? '/' : path;
      const isSelectedPage = path === currentPath;
      const classes = `nav-item ${isSelectedPage ? 'selected': ''}`;
      return `<a class="${classes}" href=${href}>${name}</a>`;
    }).join('\n')}
  </div>
`;

nafeu

<div id="nav">
  <a class="nav-item selected" href="/">Home</a>
  <a class="nav-item" href="/about">About</a>
</div>