feat: layouts support

vclemenzi · Mar 21, 2024 · 5fe4acc · 5fe4acc
1 parent 3081349
commit 5fe4acc
Show file tree

Hide file tree

Showing 28 changed files with 164 additions and 286 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -1,4 +1,4 @@
 # vite-plugin-multip docs
 Documentation of the plugin (web version in arrtive) vite-plugin-multip
 
-- [custom html](https://github.com/vclemenzi/vite-plugin-multip/blob/main/docs/custom-html.md)
+- [layouts](https://github.com/vclemenzi/vite-plugin-multip/blob/main/docs/layouts.md)
diff --git a/docs/custom-html.md b/docs/custom-html.md
diff --git a/docs/layouts.md b/docs/layouts.md
@@ -0,0 +1,65 @@
+## Layouts with vite-plugin-multip
+
+When utilizing the `vite-plugin-multip` plugin, you gain the capability to finely tailor the structure and appearance of your pages by employing custom layouts. This functionality empowers you to craft distinct layouts for various pages or groups of pages, thereby enhancing the flexibility and customization options for your multipage application.
+
+### Custom Layout Example
+
+Below is a minimalist illustration of a custom layout file, `layout.html`, showcasing the fundamental structure:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Custom Layout</title>
+</head>
+<body>
+    <header>
+        <h1>Header</h1>
+    </header>
+
+    <main>
+        <!-- Page content will be inserted here -->
+        <slot />
+    </main>
+
+    <footer>
+        <p>Footer</p>
+    </footer>
+</body>
+</html>
+```
+
+In this example:
+
+- The `layout.html` file contains a basic HTML structure with a header, a main section (where the specific page content will be inserted), and a footer.
+- The `<slot />` tag indicates where the content of the specific page will be inserted into the layout.
+- This layout can be further customized by adding CSS styles, JavaScript scripts, or other HTML elements according to the specific project requirements.
+
+### Layout Structure
+
+Each page in your application can utilize its own layout, and layouts are resolved based on proximity. Here's an example directory structure:
+
+```bash
+pages/
+  layout.html            # This layout is named "1"
+  index.svelte           # Uses layout "1"
+  foo/
+    index.svelte         # Uses layout "1"
+  hello/
+    layout.html          # This layout is named "2"
+    index.svelte         # Uses layout "2"
+    world/
+      index.svelte       # Uses layout "2"
+```
+
+In this structure:
+
+- Pages located closer to a specific layout file will use that layout.
+- For instance, `index.svelte` and `foo/index.svelte` will both use the layout defined in `layout.html` because it's the nearest layout file.
+- Pages within the `hello` directory and its subdirectories will use the layout defined in `hello/layout.html`.
+
+This approach allows you to organize your layouts and pages logically and apply different layouts as needed throughout your application.
+
+For an example of layout usage with `vite-plugin-multip`, you can refer to the official plugin repository on GitHub at the following link: [https://github.com/vclemenzi/vite-plugin-multip/tree/main/examples/layouts](https://github.com/vclemenzi/vite-plugin-multip/tree/main/examples/layouts).
diff --git a/examples/custom-html/custom.html b/examples/custom-html/custom.html
diff --git a/examples/custom-html/src/pages/index.svelte b/examples/custom-html/src/pages/index.svelte
diff --git a/examples/custom-html/vite.config.ts.timestamp-1710927809121-4e20fe6d4f043.mjs b/examples/custom-html/vite.config.ts.timestamp-1710927809121-4e20fe6d4f043.mjs
diff --git a/examples/custom-html/.gitignore → examples/layouts/.gitignore b/examples/custom-html/.gitignore → examples/layouts/.gitignore
diff --git a/examples/custom-html/.vscode/extensions.json → examples/layouts/.vscode/extensions.json b/examples/custom-html/.vscode/extensions.json → examples/layouts/.vscode/extensions.json
diff --git a/examples/custom-html/README.md → examples/layouts/README.md b/examples/custom-html/README.md → examples/layouts/README.md
diff --git a/examples/layouts/index.html b/examples/layouts/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/custom-html/package.json → examples/layouts/package.json b/examples/custom-html/package.json → examples/layouts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "custom-html",
+  "name": "layouts",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -13,9 +13,9 @@
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@tsconfig/svelte": "^5.0.2",
     "svelte": "^4.2.12",
-    "svelte-check": "^3.6.6",
+    "svelte-check": "^3.6.7",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^5.1.6"
+    "vite": "^5.2.0"
   }
 }
diff --git a/examples/custom-html/pnpm-lock.yaml → examples/layouts/pnpm-lock.yaml b/examples/custom-html/pnpm-lock.yaml → examples/layouts/pnpm-lock.yaml
diff --git a/examples/custom-html/public/vite.svg → examples/layouts/public/vite.svg b/examples/custom-html/public/vite.svg → examples/layouts/public/vite.svg
diff --git a/examples/layouts/src/pages/index.svelte b/examples/layouts/src/pages/index.svelte
@@ -0,0 +1 @@
+<h1>content</h1>
diff --git a/examples/layouts/src/pages/layout.html b/examples/layouts/src/pages/layout.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Layout 1</title>
+</head>
+
+<body>
+  <slot />
+</body>
+
+</html>
diff --git a/examples/layouts/src/pages/layout2/index.svelte b/examples/layouts/src/pages/layout2/index.svelte
@@ -0,0 +1 @@
+<h1>content</h1>
diff --git a/examples/layouts/src/pages/layout2/layout.html b/examples/layouts/src/pages/layout2/layout.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Layout 2</title>
+</head>
+
+<body>
+  <slot />
+</body>
+
+</html>
diff --git a/examples/layouts/src/pages/layout2/sub/index.svelte b/examples/layouts/src/pages/layout2/sub/index.svelte
@@ -0,0 +1 @@
+<h1>content</h1>
diff --git a/examples/layouts/src/pages/sub/index.svelte b/examples/layouts/src/pages/sub/index.svelte
@@ -0,0 +1 @@
+<h1>content</h1>
diff --git a/examples/custom-html/src/vite-env.d.ts → examples/layouts/src/vite-env.d.ts b/examples/custom-html/src/vite-env.d.ts → examples/layouts/src/vite-env.d.ts
diff --git a/examples/custom-html/svelte.config.js → examples/layouts/svelte.config.js b/examples/custom-html/svelte.config.js → examples/layouts/svelte.config.js
diff --git a/examples/custom-html/tsconfig.json → examples/layouts/tsconfig.json b/examples/custom-html/tsconfig.json → examples/layouts/tsconfig.json
diff --git a/examples/custom-html/tsconfig.node.json → examples/layouts/tsconfig.node.json b/examples/custom-html/tsconfig.node.json → examples/layouts/tsconfig.node.json
diff --git a/examples/custom-html/vite.config.ts → examples/layouts/vite.config.ts b/examples/custom-html/vite.config.ts → examples/layouts/vite.config.ts
@@ -4,5 +4,5 @@ import { multipage } from '../../src/index'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte(), multipage({ customHtml: 'custom.html' })],
+  plugins: [svelte(), multipage()],
 })
diff --git a/src/boilerplate/html.ts b/src/boilerplate/html.ts
@@ -2,13 +2,13 @@ import { minify } from "html-minifier-terser";
 import type { Config } from "../types";
 import fs from "fs";
 
-export const html = async (body: string, config?: Config): Promise<string> => {
+export const html = async (body: string, config?: Config, layout?: string) => {
   let code = "";
 
-  if (config?.customHtml) {
-    const customHtml = fs.readFileSync(config.customHtml, "utf-8");
+  if (layout && fs.existsSync(layout)) {
+    const customHtml = fs.readFileSync(layout, "utf-8");
 
-    code = customHtml.replace("{% body %}", body);
+    code = customHtml.replace("<slot />", body);
   } else {
     code = `
       <!DOCTYPE html>

diff --git a/src/boilerplate/index.ts b/src/boilerplate/index.ts
@@ -4,14 +4,14 @@ import { svelte } from "./frameworks/svelte";
 import { vue } from "./frameworks/vue";
 import { html } from "./html";
 
-export const generateBoilerplate = async (file: string, framework: string, config: Config): Promise<string> => {
+export const generateBoilerplate = async (file: string, framework: string, config: Config, layout: string) => {
   switch (framework) {
     case "svelte":
-      return await html(svelte(file), config);
+      return await html(svelte(file), config, layout);
     case "vue":
-      return await html(vue(file), config);
+      return await html(vue(file), config, layout);
     case "tsx" || "jsx":
-      return await html(react(file), config);
+      return await html(react(file), config, layout);
     default:
       return "";
   };