@cake-hub/core/example.js

The core rendering engine for cake documentation pages.

const path = require("path");
const express = require('express');

const {
    initialize,
    build,
    server,
    setOptions,
    getOptions,
    registerMarkdownComponent,
    registerPlugin,
    interfaces: {
        MarkdownComponentInterface,
        PluginInterface,
    }
} = require("./index");

(async () => {
    // Change default options of core
    console.log ("===", "OPTIONS", "===");
    setOptions({
        projectsDirectory: path.resolve(__dirname, "./projects"),
        outputDirectory: path.resolve(__dirname, "./dist"),
        pathPrefix: async ({ projectConfiguration, fileStructure }) => {
            return projectConfiguration.get("brand") + "/" + projectConfiguration.get("name");
        },
        markdown: {
            useHighlightJs: true,
        },
        projects: {
            filterFiles: async (filePath, projectConfiguration) => {
                if (path.extname (filePath) !== ".md") {
                    return false;
                }
                if (path.basename (filePath) !== "_changelog.md") {
                    return true;
                }
                return false;
            },
        }
    });
    console.log (getOptions ());

    console.log ("===", "MarkdownComponents", "===");
    registerMarkdownComponent (new MarkdownComponentInterface ());
    registerMarkdownComponent (new (class FigmaMarkdownComponent extends MarkdownComponentInterface {

          // ### Just basic information about this component ###

          id() {
            return "figma-artboard";
          }

          label() {
            return "Figma artboard";
          }

          fields() {
            return [
              {
                name: 'source',
                label: 'Figma Link',
                widget: 'string',
              },
              {
                name: 'alt',
                label: 'Alt text',
                widget: 'string'
              },
            ];
          }

          immutableProperties () {
            return [
              "source",
              "alt",
              "title",
            ];
          }

          // ### REGEX / matching options to detect this component ###

          start(markdownSnippet) {
            return markdownSnippet.match(/!\[/)?.index;
          }

          pattern() {
            return /!\[([^\]]*)\]\((https\:\/\/www\.figma\.com\/embed.+?)(?:\s"([^"]*)")?\)/;
          }

          match(match, { tokens }) {
            return {
              alt: match [1],
              title: match [3],
              source: match [2],
            };
          }

          // ### Generate preview / HTML ###

          htmlRenderer(data, { getAsset, fields, token, filePath }) {
            //   console.log ("TEST1");
            //   con
            //   await new Promise (
            //         function (resolve) {
            //             // setTimeout (
            //             //     () => {
            //                     console.log ("T3/4");
            //                     return resolve ();
            //                 // },
            //                 // 0
            //             // );
            //         }
            //     );
            //   console.log ("TEST2");
              return `
                <h3>FIGMA: ${filePath}</h3>
              `;
            // return `
            //   <iframe
            //     className="cake-example-iframe"
            //     data-controller="cake/example/iframe"
            //     scrolling="no"
            //     frameBorder="0"
            //     allowfullscreen
            //     width="100%"
            //     height="450"
            //     src="${data.source}"
            //     title="${data.title}"
            //     alt="${data.alt}"
            //   >
            //     ${data.alt}
            //   </iframe>
            // `;
          }

          // ### Generate source / markdown ###

          markdownRenderer(data) {
            return `![${data.alt}](${data.source}${data.title ? ` "${data.title}"` : ""})`;
          }

        })());

    console.log ("===", "Plugin", "===");
    registerPlugin (new (class CustomPluginInterface extends PluginInterface {

        async beforeFileCopy({
            projectConfiguration,
            filePath,
            fileStructure,
        }) {
            // console.log ("filePath", filePath);
            return true; // <boolean> or <string> | <Buffer> | <TypedArray> | <DataView> | <Object> | <AsyncIterable> | <Iterable> | <Stream>
        }

        async afterMarkdownRendering(htmlContent, {
            projectConfiguration,
            filePath,
            fileStructure,
            frontmatter,
        }) {
            return htmlContent;
        }

    }));

    // Initialize the core
    console.log ("===", "INITIALIZE", "===");
    await initialize();

    // build the complete documentation
    console.log ("===", "BUILD", "===");
    await build();

    // Start up a server and add core-middleware
    console.log ("===", "SERVER", "===");
    const app = express();
    const port = 3000;

    // Important is this part, where the server middleware get's installed
    app.use("/showroom", await server());

    app.get('/', (req, res) => {
        res.send('Hello World!')
    });
    app.all('*', (req, res) => {
        res.send('Error: 404!');
    });
    app.listen(port, () => {
        console.log(`Example app listening at http://localhost:${port}`)
    });

})();