2.2.3

* add error handler for creating dist folder

* fix favicon in generated files

* add option for generating pages inside separate folders

* fix favicon problem

---------

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

README.md

@@ -12,6 +12,7 @@ It's super easy to install and use.
 
 - 🤩 [Editor.js](https://editorjs.io/) ecosystem powered
 - 📂 Docs nesting — create any structure you need
+- 💎 Static rendering
 - 📱 Nice look on Desktop and Mobile
 - 🔥 Beautiful page URLs. Human-readable and SEO-friendly.
 - 🦅 [Hawk](https://hawk.so/?from=docs-demo) is hunting. Errors tracking integrated

package.json

@@ -1,7 +1,7 @@
 {
   "name": "codex.docs",
   "license": "Apache-2.0",
-  "version": "v2.0.0-rc.4",
+  "version": "2.2.3",
   "type": "module",
   "bin": {
     "codex.docs": "dist/backend/app.js"

src/backend/build-static.ts

@@ -13,6 +13,7 @@ import fse from 'fs-extra';
 import appConfig  from './utils/appConfig.js';
 import Aliases from './controllers/aliases.js';
 import Pages from './controllers/pages.js';
+import { downloadFavicon } from './utils/downloadFavicon.js';
 
 /**
  * Build static pages from database
@@ -45,14 +46,42 @@ export default async function buildStatic(): Promise<void> {
     });
   }
 
+  if (config.overwrite) {
     console.log('Removing old static files');
     await fse.remove(distPath);
+  }
 
   console.log('Building static files');
   const pagesOrder = await PagesOrder.getAll();
   const allPages = await Page.getAll();
 
+  try {
+    console.log('Create dist folder');
     await mkdirp(distPath);
+  } catch (e) {
+    console.log('Error while creating dist folder', e);
+
+    return;
+  }
+
+  console.log('Copy public directory');
+  const publicDir = path.resolve(dirname, '../../public');
+
+  console.log(`Copy from ${publicDir} to ${distPath}`);
+
+  try {
+    await fse.copy(publicDir, distPath);
+    console.log('Public directory copied');
+  } catch (e) {
+    console.log('Error while copying public directory');
+    console.error(e);
+  }
+
+  const favicon = appConfig.favicon ? await downloadFavicon(appConfig.favicon, distPath, '') : {
+    destination: '/favicon.png',
+    type: 'image/png',
+  };
+
 
   /**
    * Renders single page
@@ -62,6 +91,11 @@ export default async function buildStatic(): Promise<void> {
    */
   async function renderPage(page: Page, isIndex?: boolean): Promise<void> {
     console.log(`Rendering page ${page.uri}`);
+    const pageUri = page.uri;
+
+    if (!pageUri) {
+      throw new Error('Page uri is not defined');
+    }
     const pageParent = await page.getParent();
     const pageId = page._id;
 
@@ -72,16 +106,30 @@ export default async function buildStatic(): Promise<void> {
     const previousPage = await PagesFlatArray.getPageBefore(pageId);
     const nextPage = await PagesFlatArray.getPageAfter(pageId);
     const menu = createMenuTree(parentIdOfRootPages, allPages, pagesOrder, 2);
+
     const result = await renderTemplate('./views/pages/page.twig', {
       page,
       pageParent,
       previousPage,
       nextPage,
       menu,
+      favicon,
       config: appConfig.frontend,
     });
 
-    const filename = (isIndex || page.uri === '') ? 'index.html' : `${page.uri}.html`;
+    let filename: string;
+
+    if (isIndex) {
+      filename = 'index.html';
+    } else if (config?.pagesInsideFolders) { // create folder for each page if pagesInsideFolders is true
+      const pagePath = path.resolve(distPath, pageUri);
+
+      await mkdirp(pagePath);
+
+      filename = path.resolve(pagePath, 'index.html');
+    } else {
+      filename = `${page.uri}.html`;
+    }
 
     await fs.writeFile(path.resolve(distPath, filename), result);
     console.log(`Page ${page.uri} rendered`);
@@ -111,15 +159,16 @@ export default async function buildStatic(): Promise<void> {
     await renderPage(page);
   }
 
-  await renderIndexPage(config.indexPageUri);
+  // Check if index page is enabled
+  if (config.indexPage.enabled) {
+    await renderIndexPage(config.indexPage.uri);
+  }
   console.log('Static files built');
 
-  console.log('Copy public directory');
-  await fse.copy(path.resolve(dirname, '../../public'), distPath);
-
   if (appConfig.uploads.driver === 'local') {
     console.log('Copy uploads directory');
     await fse.copy(path.resolve(cwd, appConfig.uploads.local.path), path.resolve(distPath, 'uploads'));
+    console.log('Uploads directory copied');
   }
 }
 

src/backend/utils/appConfig.ts

@@ -90,7 +90,14 @@ const FrontendConfig = z.object({
  */
 const StaticBuildConfig = z.object({
   outputDir: z.string(), // Output directory for static build
-  indexPageUri: z.string(), // URI for index page to render
+  overwrite: z.boolean().optional() // Overwrite output directory
+    .default(true),
+  pagesInsideFolders: z.boolean().optional() // Create separate folder for each page
+    .default(true),
+  indexPage: z.object({
+    enabled: z.boolean(), // Is index page enabled
+    uri: z.string(), // Index page uri
+  }),
 });
 
 export type StaticBuildConfig = z.infer<typeof StaticBuildConfig>;

src/backend/utils/downloadFavicon.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import fs from 'fs';
+import fs from 'fs/promises';
 import fetch, { RequestInit } from 'node-fetch';
 
 /**
@@ -32,9 +32,10 @@ function checkIsUrl(str: string): boolean {
  *
  * @param destination - url or path of favicon
  * @param faviconFolder - folder to save favicon
+ * @param subRoute - subroute from which the favicon will be served
  * @returns { Promise<FaviconData> } - Promise with data about favicon
  */
-export async function downloadFavicon(destination: string, faviconFolder: string): Promise<FaviconData> {
+export async function downloadFavicon(destination: string, faviconFolder: string, subRoute = '/favicon'): Promise<FaviconData> {
   // Check of destination is empty
   if (!destination) {
     throw Error('Favicon destination is empty');
@@ -48,8 +49,10 @@ export async function downloadFavicon(destination: string, faviconFolder: string
 
   // Check if string is url
   if (!checkIsUrl(destination)) {
+    await fs.copyFile(destination, path.join(faviconFolder, filename));
+
     return  {
-      destination: `/${filename}`,
+      destination: `${subRoute}/${filename}`,
       type: `image/${format}`,
     } as FaviconData;
   }
@@ -72,14 +75,10 @@ export async function downloadFavicon(destination: string, faviconFolder: string
   const filePath = path.join(faviconFolder, `favicon.${format}`);
 
   // Save file
-  await fs.writeFile(filePath, fileData, (err) => {
+  await fs.writeFile(filePath, fileData);
-    if (err) {
-      console.log(err);
-    }
-  });
 
   return {
-    destination: `/favicon/favicon.${format}`,
+    destination: `${subRoute}/favicon.${format}`,
     type: `image/${format}`,
   } as FaviconData;
 }

src/backend/views/pages/blocks/code.twig

@@ -3,7 +3,7 @@
     <div class="block-code__content">{{ code | escape }}</div>
   </div>
   {%
-    include 'components/copy-button.twig' with {
+    include '../../components/copy-button.twig' with {
       ariaLabel: 'Copy Code to Clipboard',
       class: 'block-code__copy-button',
       textToCopy: code | escape,

src/backend/views/pages/blocks/header.twig

@@ -1,6 +1,6 @@
 <h{{ level }} id="{{ text | urlify  }}" class="block-header block-header--{{ level }}">
   {%
-    include 'components/copy-button.twig' with {
+    include '../../components/copy-button.twig' with {
       ariaLabel: 'Copy Link to the ' ~ text,
       class: 'block-header__copy-button',
       textToCopy: '#' ~ text | urlify,

src/frontend/styles/components/header.pcss

@@ -40,8 +40,11 @@ html {
 
     @media (--not-mobile) {
       padding: 4px 10px;
+
+      &:hover {
         @apply --squircle;
       }
+    }
 
     &:hover {
       background-color: var(--color-link-hover);

src/frontend/styles/components/sidebar.pcss

@@ -182,13 +182,16 @@
     transition-property: background-color;
     transition-duration: 0.1s;
 
-    @apply --squircle;
-
     &--selected {
       border-radius: 8px;
       /* border using box-shadow which doesn't increase the height */
       box-shadow: 0 0 0 2px rgba(147, 166, 233, 0.5) inset;
     }
+
+    &--active,
+    &:hover {
+      @apply --squircle;
+    }
   }
 
   &__section-title > span,

src/frontend/styles/components/table-of-content.pcss

@@ -31,7 +31,10 @@
     gap: 2px;
 
     &-item {
+      &:hover,
+      &--active {
         @apply --squircle;
+      }
 
       &:hover {
         background-color: var(--color-link-hover);