feat: added head component

Author: gerardnico

apps/site/pages/howto/add-a-head.md

@@ -0,0 +1,35 @@
+---
+title: How to create a head component?
+---
+
+This page shows you how to create your own [head component](../reference/head-component.md)
+so that you can set any metadata on your pages.
+
+## Steps
+
+### Create a head component
+
+A head is a component that:
+
+* accept a layoutProps
+* and return a Head child component
+
+Example of minimal implementation:
+
+```tsx
+export default function MetaRobots({page}: LayoutProps) {
+    let robots = page?.frontmatter?.robots;
+    return (
+        <meta name="robots" content={robots ? robots : "index, follow"}/>
+    )
+}
+```
+
+### Register it
+
+Interact expects all head files to be stored in the [heads directory](../reference/directory-layout.md) (
+default to `src/components/heads`)
+as `jsx` or `tsx` files
+
+* Save your head component at: `src/components/heads/MetaRobots.tsx`
+* Restart Interact and you should see your `Head` component in the HTML page

apps/site/pages/reference/directory-layout.md

@@ -11,6 +11,7 @@ A typical interact project is composed of the following paths:
 | [runtime](runtime-directory.md)              | `.interact`               | A directory that contains temporary runtime information such as cache, schema                                |
 | [build](build.md)                            | `dist`                    | A directory where the [build result](build.md) is stored (static website and handler)                        |
 | [config file](conf.md)                       | `interact.config.json`    | the [configuration file](conf.md)                                                                            |
+| [heads](head-component.md)                   | `src/components/heads`    | a directory that contains your [head components](head-component.md)                                          |
 | `images`                                     | `src/images`              | a directory that contains [raster image](../components/raster.md)  or [Svg](../components/svg.md)            |
 | [markdown components](markdown-component.md) | `src/components/markdown` | a directory that contains your custom markdown component                                                     |
 | [layouts](layout.md)                         | `src/components/layouts`  | a directory that contains your custom [layouts](layout.md)                                                   |

apps/site/pages/reference/head-component.md

@@ -0,0 +1,27 @@
+---
+title: Head component
+description: A head component is a component that is rendered in the HTML HEAD.
+---
+
+A `head` is a [component](component.md) that is rendered in the [HTML Head node](head.md).
+
+## How to create a Head component
+
+See [How to create a head component](../howto/add-a-head.md)
+
+## Not a Client Component Restriction
+
+Head component cannot be [client component](../reference/rsc.md#client-component)
+otherwise you get the [fatal rsc error](../reference/rsc.md#only-plain-objects-error)
+
+## Default
+
+The default one can be seen in the [main/src/resources/components/heads directory](https://github.com/combostrap/interact/tree/main/src/resources/components/heads)
+
+If you want to override the default ones, you should create a head with the same name and store it at:
+`@/components/heads`.
+
+They:
+
+* are and should be [server component](rsc.md)
+* accepts the layout props (page and context)

apps/site/pages/reference/head.md

@@ -1,13 +1,22 @@
 ---
-title: Head component
+title: How to add a Head element
+description: How to add a Head element in Interact
 ---
 
-## Features
+A `head element` is a HTML element that is rendered in
+the [HTML Head node](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/head).
+
+## How to add a Head element
+
+### By creating a Head React Component
+
+You can create a specialized component called a [head component](head-component.md)
+that are rendered into the `head` html element.
 
 ### Hoisting
 
-We support head elements hoisting.
+We support also head elements hoisting.
 
-If your component returns elements with type (`meta`,`script`, `link`, `style`), they
-will be moved into the `head` html element.
+If your [page](page.md) returns elements with type (`meta`,`script`, `link`, `style`),
+they are moved into the `head` html element.
 

apps/site/pages/reference/layout.md

@@ -65,4 +65,4 @@ If you want to override the default ones, you should create a partial with the s
 They:
 
 * are and should be [server component](rsc.md)
-* accepts the context props (page and request)
+* accepts the layout props (page and context)

package.json

@@ -29,6 +29,7 @@
     "./types": "./src/types/index.d.ts",
     "./components/layouts/*": "./src/resources/components/layouts/*.tsx",
     "./components/partials/*": "./src/resources/components/partials/*.tsx",
+    "./components/heads/*": "./src/resources/components/heads/*.tsx",
     "./components/pages/*": "./src/resources/components/pages/*.tsx",
     "./components/*": "./src/resources/components/interact/*.tsx",
     "./vite/*": "./dist/interact/vite/*.js",

src/interact/cli/shared/vite.config.ts

@@ -18,6 +18,7 @@ import Inspect from 'vite-plugin-inspect'
 import outlineNumberingStyleSheet from "../../vite/outlineNumberingStylesheet.js";
 import middlewareProvider from "../../vite/middlewareProvider.js";
 import layoutProvider from "../../vite/layoutProvider.js";
+import headProvider from "../../vite/headProvider.js";
 import tailwindcss from "@tailwindcss/vite"
 import globalStylesheet from "../../vite/globalStylesheet.js";
 import {setGlobalsConf} from "../../vite/globalConf.js";
@@ -302,6 +303,8 @@ export async function resolveViteConfig(
             mdxRollup({command}),
             // Component provider (provide the MdxComponent for mdx)
             mdxComponentProvider(),
+            // Head provider (provide the HTML head dynamically)
+            headProvider(),
             // Layout provider (provide the layouts dynamically)
             layoutProvider(),
             // Pages (after layout)

src/interact/config/configSchema.ts

@@ -97,6 +97,7 @@ const PathsSchema = z.object({
     // https://vite.dev/guide/assets#the-public-directory
     publicDirectory: z.coerce.string<string>().describe("The path of the public directory").default("public"),
     layoutsDirectory: z.coerce.string<string>().describe("The path of the layout directory").default("src/components/layouts"),
+    headsDirectory: z.coerce.string<string>().describe("The path of the head directory").default("src/components/heads"),
     mdComponentsDirectory: z.coerce.string<string>().describe("The path of the markdown components directory").default("src/components/markdowns"),
     middlewaresDirectory: z.coerce.string<string>().describe("The path of the middlewares directory").default("src/middlewares"),
     configDirectory: z.coerce.string<string>().describe("The path of the config directory").default("config"),
@@ -172,7 +173,7 @@ const ComponentSchema = z.object({
     // No file system path, it's derived thanks to import, and it does not work well with vite and import
     // as they don't handle symlink well
     importPath: z.coerce.string<string>().optional(),
-    type: z.enum(["layout", "markdown"]),
+    type: z.enum(["layout", "markdown", "head"]),
     props: z.record(z.string(), z.unknown()).optional(),
 });
 let ComponentsConfigSetSchema = z.record(

src/interact/config/interactConfigHandler.ts

@@ -219,6 +219,7 @@ class InteractConfigHandler {
             pagesDirectory: this.#qualifiedDirectoryPath(rootDirectory, finalConfigData.paths.pagesDirectory),
             publicDirectory: this.#qualifiedDirectoryPath(rootDirectory, finalConfigData.paths.publicDirectory),
             imagesDirectory: this.#qualifiedDirectoryPath(rootDirectory, finalConfigData.paths.imagesDirectory),
+            headsDirectory: this.#qualifiedDirectoryPath(rootDirectory, finalConfigData.paths.headsDirectory),
             layoutsDirectory: this.#qualifiedDirectoryPath(rootDirectory, finalConfigData.paths.layoutsDirectory),
             mdComponentsDirectory: this.#qualifiedDirectoryPath(rootDirectory, finalConfigData.paths.mdComponentsDirectory),
             middlewaresDirectory: this.#qualifiedDirectoryPath(rootDirectory, finalConfigData.paths.middlewaresDirectory),
@@ -254,14 +255,23 @@ class InteractConfigHandler {
          * (partials are not needed as the user import them from layout component)
          * Ie: import Header from "@/components/partials/Header";
          */
-        const types: ('layout' | 'markdown')[] = ['layout', 'markdown'];
+        const types: ('layout' | 'markdown' | 'head')[] = ['layout', 'markdown', 'head'];
         for (const type of types) {
             let projectPath;
-            if (type === 'layout') {
-                projectPath = finalConfigData.paths.layoutsDirectory
-            } else {
-                projectPath = finalConfigData.paths.mdComponentsDirectory
+            switch (type) {
+                case 'layout':
+                    projectPath = finalConfigData.paths.layoutsDirectory
+                    break;
+                case 'markdown':
+                    projectPath = finalConfigData.paths.mdComponentsDirectory
+                    break;
+                case "head":
+                    projectPath = finalConfigData.paths.headsDirectory;
+                    break;
+                default:
+                    throw new Error(`Internal Unknown type '${type}'`);
             }
+
             const layoutDirectories = [`${finalConfigData.paths.interactResourcesDirectory}/components/${type}s`, projectPath];
 
             for (const [i, layoutDirectory] of layoutDirectories.entries()) {

src/interact/lib/virtualModuelUtil.ts

@@ -0,0 +1,109 @@
+import type {InteractConfig} from "../config/interactConfig.js";
+import path from "path";
+
+/**
+ * This function was created to print without any quote
+ * so that an object can be added to JavaScript virtual module
+ * It works for object but also for any other basic type
+ */
+export function toJsString(value: any, indent = 0): any {
+    const pad = ' '.repeat(indent + 2);
+    const closePad = ' '.repeat(indent);
+
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+    if (typeof value === 'string') return value;  // no quotes
+    if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+    if (Array.isArray(value)) {
+        // @ts-ignore
+        const items = value.map(v => `${pad}${toJsString(v, indent + 2)}`);
+        return `[\n${items.join(',\n')}\n${closePad}]`;
+    }
+    if (typeof value === 'object') {
+
+        // @ts-ignore
+        const entries = Object.entries(value).map(
+            // @ts-ignore
+            ([k, v]) => {
+                /**
+                 * The key value may be my-component
+                 * The Javascript string result should be then 'my-component'
+                 */
+                if (k.includes("-")) {
+                    k = `'${k}'`
+                }
+                return `${pad}${k}: ${toJsString(v, indent + 2)}`
+            }
+        );
+        return `{\n${entries.join(',\n')}\n${closePad}}`;
+    }
+    return String(value);
+}
+
+
+export function getComponentsAndImportArray(interactConfig: InteractConfig, type: "layout" | "markdown" | "head") {
+    let imports = [];
+    let components: Record<string, string> = {};
+
+    // component may be registered multiple time
+    // for instance, code is registered for the pre element and itself as Code,
+    // but it should be exported only once
+    let exports = new Set<string>();
+    for (const [key, value] of Object.entries(interactConfig.components)) {
+
+        /**
+         * Head
+         */
+        if (value.type != type) {
+            continue;
+        }
+
+        /**
+         * Import Path
+         */
+        let importPath = value.importPath;
+        if (importPath == null) {
+            throw new Error(`Import ${importPath} not defined for the layout component ${key}`);
+        }
+
+        /**
+         * Import name
+         * Cannot come from the path "./pages/404.js",404 is a number and is not valid as component name but valid as path
+         */
+        let importName = key;
+
+        /**
+         * Map
+         */
+        let layoutKey = key.toLowerCase();
+        components[layoutKey] = importName;
+
+        if (!exports.has(importName)) {
+
+            /**
+             * We export all component so that they can be used
+             */
+            exports.add(importName);
+
+            /**
+             * Relative to Absolute
+             */
+            if (importPath.startsWith("./")) {
+                importPath = path.resolve(interactConfig.paths.rootDirectory, importPath);
+            }
+
+            /**
+             * Import statement
+             */
+            imports.push(`import ${importName} from ${JSON.stringify(importPath)};`);
+
+        }
+
+
+    }
+    return {
+        components: components,
+        imports: imports,
+        exports: exports
+    }
+}