simplify page

beforesemicolon · Nov 26, 2023 · 95a96d8 · 95a96d8
1 parent 37636e3
commit 95a96d8
Show file tree

Hide file tree

Showing 31 changed files with 226 additions and 357 deletions.
diff --git a/docs-src/404.page.ts b/docs-src/404.page.ts
@@ -4,8 +4,7 @@ import { PageComponentProps } from './type'
 
 export default ({ page }: PageComponentProps) =>
     PageLayout({
-        title: page.title,
-        description: page.description,
+        page,
         stylesheets: html`
             <link
                 rel="stylesheet"

diff --git a/docs-src/documentation/conditional-attributes.page.ts b/docs-src/documentation/conditional-attributes.page.ts
@@ -2,16 +2,15 @@ import { html } from '../../src'
 import { DocPageLayout } from '../partials/doc-page-layout'
 import { Heading } from '../partials/heading'
 import { CodeSnippet } from '../partials/code-snippet'
-import { DocPrevNextNav } from '../partials/doc-prev-next-nav'
 import { PageComponentProps } from '../type'
 
 export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
-    DocPageLayout(
-        page.title,
-        page.description,
-        page.path,
+    DocPageLayout({
+        page,
+        nextPage,
+        prevPage,
         docsMenu,
-        html`
+        content: html`
         ${Heading(page.name)}
         <p>
             You cannot use template literal value to define attributes directly on the
@@ -132,9 +131,5 @@ export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
                 'html`<button attr.aria-label="${label}">click me</button>`',
             'typescript'
         )}
-        ${DocPrevNextNav({
-            prev: prevPage,
-            next: nextPage,
-        })}
-    `
-    )
+    `,
+    })
diff --git a/docs-src/documentation/conditional-rendering.page.ts b/docs-src/documentation/conditional-rendering.page.ts
@@ -2,16 +2,15 @@ import { html } from '../../src'
 import { DocPageLayout } from '../partials/doc-page-layout'
 import { Heading } from '../partials/heading'
 import { CodeSnippet } from '../partials/code-snippet'
-import { DocPrevNextNav } from '../partials/doc-prev-next-nav'
 import { PageComponentProps } from '../type'
 
 export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
-    DocPageLayout(
-        page.title,
-        page.description,
-        page.path,
+    DocPageLayout({
+        page,
+        nextPage,
+        prevPage,
         docsMenu,
-        html`
+        content: html`
             ${Heading(page.name)}
             <p>
                 One of the biggest sells for working with templates is the
@@ -112,9 +111,5 @@ export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
                 keeps increasing the DOM will never change. Only when it goes
                 under for the first time.
             </p>
-            ${DocPrevNextNav({
-                prev: prevPage,
-                next: nextPage,
-            })}
-        `
-    )
+        `,
+    })
diff --git a/docs-src/documentation/creating-and-rendering.page.ts b/docs-src/documentation/creating-and-rendering.page.ts
@@ -2,16 +2,15 @@ import { html } from '../../src'
 import { DocPageLayout } from '../partials/doc-page-layout'
 import { CodeSnippet } from '../partials/code-snippet'
 import { Heading } from '../partials/heading'
-import { DocPrevNextNav } from '../partials/doc-prev-next-nav'
 import { PageComponentProps } from '../type'
 
 export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
-    DocPageLayout(
-        page.title,
-        page.description,
-        page.path,
+    DocPageLayout({
+        page,
+        nextPage,
+        prevPage,
         docsMenu,
-        html`
+        content: html`
             ${Heading(page.name)}
             <p>
                 To create a template you will need to use the
@@ -115,9 +114,5 @@ export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
                 instance to its original state ready to be re-rendered by
                 calling the <code>render</code> method.
             </p>
-            ${DocPrevNextNav({
-                prev: prevPage,
-                next: nextPage,
-            })}
-        `
-    )
+        `,
+    })
diff --git a/docs-src/documentation/custom-helper.page.ts b/docs-src/documentation/custom-helper.page.ts
@@ -2,16 +2,15 @@ import { html } from '../../src'
 import { DocPageLayout } from '../partials/doc-page-layout'
 import { Heading } from '../partials/heading'
 import { CodeSnippet } from '../partials/code-snippet'
-import { DocPrevNextNav } from '../partials/doc-prev-next-nav'
 import { PageComponentProps } from '../type'
 
 export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
-    DocPageLayout(
-        page.title,
-        page.description,
-        page.path,
+    DocPageLayout({
+        page,
+        nextPage,
+        prevPage,
         docsMenu,
-        html`
+        content: html`
             ${Heading(page.name)}
             <p>
                 To create a custom helper, all you need to do is create a
@@ -161,9 +160,5 @@ export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
                     ')}`.render(document.body);',
                 'typescript'
             )}
-            ${DocPrevNextNav({
-                prev: prevPage,
-                next: nextPage,
-            })}
-        `
-    )
+        `,
+    })
diff --git a/docs-src/documentation/dom-references.page.ts b/docs-src/documentation/dom-references.page.ts
@@ -2,16 +2,15 @@ import { html } from '../../src'
 import { DocPageLayout } from '../partials/doc-page-layout'
 import { CodeSnippet } from '../partials/code-snippet'
 import { Heading } from '../partials/heading'
-import { DocPrevNextNav } from '../partials/doc-prev-next-nav'
 import { PageComponentProps } from '../type'
 
 export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
-    DocPageLayout(
-        page.title,
-        page.description,
-        page.path,
+    DocPageLayout({
+        page,
+        prevPage,
+        nextPage,
         docsMenu,
-        html`
+        content: html`
             ${Heading(page.name)}
             <p>
                 There could be times when you need to get reference of the
@@ -131,9 +130,5 @@ export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
                     '}, 2500)',
                 'typescript'
             )}
-            ${DocPrevNextNav({
-                prev: prevPage,
-                next: nextPage,
-            })}
-        `
-    )
+        `,
+    })
diff --git a/docs-src/documentation/dynamic-values-and-update.page.ts b/docs-src/documentation/dynamic-values-and-update.page.ts
@@ -2,16 +2,15 @@ import { html } from '../../src'
 import { DocPageLayout } from '../partials/doc-page-layout'
 import { Heading } from '../partials/heading'
 import { CodeSnippet } from '../partials/code-snippet'
-import { DocPrevNextNav } from '../partials/doc-prev-next-nav'
 import { PageComponentProps } from '../type'
 
 export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
-    DocPageLayout(
-        page.title,
-        page.description,
-        page.path,
+    DocPageLayout({
+        page,
+        prevPage,
+        nextPage,
         docsMenu,
-        html`
+        content: html`
             ${Heading(page.name)}
             <p>
                 The best things you can have in template literal are dynamic
@@ -102,9 +101,5 @@ export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
                 values that did not change. You will learn how to address this
                 next when you learn about <a href="./state-values">states</a>.
             </p>
-            ${DocPrevNextNav({
-                prev: prevPage,
-                next: nextPage,
-            })}
-        `
-    )
+        `,
+    })
diff --git a/docs-src/documentation/effect-helper.page.ts b/docs-src/documentation/effect-helper.page.ts
@@ -2,16 +2,15 @@ import { html } from '../../src'
 import { DocPageLayout } from '../partials/doc-page-layout'
 import { Heading } from '../partials/heading'
 import { CodeSnippet } from '../partials/code-snippet'
-import { DocPrevNextNav } from '../partials/doc-prev-next-nav'
 import { PageComponentProps } from '../type'
 
 export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
-    DocPageLayout(
-        page.title,
-        page.description,
-        page.path,
+    DocPageLayout({
+        page,
+        prevPage,
+        nextPage,
         docsMenu,
-        html`
+        content: html`
             ${Heading(page.name)}
             <p>
                 When using <a href="./state-values">state</a> data you notice
@@ -95,9 +94,5 @@ export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
                     'effect(activeTab, currentPath, contentLoader)',
                 'typescript'
             )}
-            ${DocPrevNextNav({
-                prev: prevPage,
-                next: nextPage,
-            })}
-        `
-    )
+        `,
+    })
diff --git a/docs-src/documentation/element-util.page.ts b/docs-src/documentation/element-util.page.ts
@@ -2,16 +2,15 @@ import { html } from '../../src'
 import { DocPageLayout } from '../partials/doc-page-layout'
 import { Heading } from '../partials/heading'
 import { CodeSnippet } from '../partials/code-snippet'
-import { DocPrevNextNav } from '../partials/doc-prev-next-nav'
 import { PageComponentProps } from '../type'
 
 export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
-    DocPageLayout(
-        page.title,
-        page.description,
-        page.path,
+    DocPageLayout({
+        page,
+        prevPage,
+        nextPage,
         docsMenu,
-        html`
+        content: html`
         ${Heading(page.name)}
         <p>
             The <code>element</code> utility exists solely to help you create DOM elements easily.
@@ -71,9 +70,5 @@ export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
           <li><strong>Web component properties</strong>: If you create a web component instance that maps attributes
           to internal setters it will automatically provide them as properties as well.</li
         </ul>
-        ${DocPrevNextNav({
-            prev: prevPage,
-            next: nextPage,
-        })}
-    `
-    )
+    `,
+    })
diff --git a/docs-src/documentation/essential-training.page.ts b/docs-src/documentation/essential-training.page.ts
@@ -1,20 +1,17 @@
-import { html, repeat } from '../../src'
+import { html } from '../../src'
 import { DocPageLayout } from '../partials/doc-page-layout'
 import { Heading } from '../partials/heading'
 import essentialTraining from '../data/essential-training.json'
 import { PlaylistContent } from '../partials/playlist-content'
-import { DocPrevNextNav } from '../partials/doc-prev-next-nav'
 import { PageComponentProps } from '../type'
 
 export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
-    DocPageLayout(
-        page.title,
-        page.description,
-        page.path,
+    DocPageLayout({
+        page,
+        prevPage,
+        nextPage,
         docsMenu,
-        html` ${Heading(page.name)} ${PlaylistContent(essentialTraining)}
-        ${DocPrevNextNav({
-            prev: prevPage,
-            next: nextPage,
-        })}`
-    )
+        content: html`
+            ${Heading(page.name)} ${PlaylistContent(essentialTraining)}
+        `,
+    })
diff --git a/docs-src/documentation/event-handling.page.ts b/docs-src/documentation/event-handling.page.ts
@@ -2,16 +2,15 @@ import { html } from '../../src'
 import { DocPageLayout } from '../partials/doc-page-layout'
 import { Heading } from '../partials/heading'
 import { CodeSnippet } from '../partials/code-snippet'
-import { DocPrevNextNav } from '../partials/doc-prev-next-nav'
 import { PageComponentProps } from '../type'
 
 export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
-    DocPageLayout(
-        page.title,
-        page.description,
-        page.path,
+    DocPageLayout({
+        page,
+        prevPage,
+        nextPage,
         docsMenu,
-        html`
+        content: html`
             ${Heading(page.name)}
             <p>
                 Event handling remains close to the native way but enhanced with
@@ -81,9 +80,5 @@ export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
                 All you need to do is add a comma followed by the option you
                 want to provide to the listener.
             </p>
-            ${DocPrevNextNav({
-                prev: prevPage,
-                next: nextPage,
-            })}
-        `
-    )
+        `,
+    })
diff --git a/docs-src/documentation/examples.page.ts b/docs-src/documentation/examples.page.ts
@@ -1,20 +1,13 @@
 import { html } from '../../src'
 import { DocPageLayout } from '../partials/doc-page-layout'
 import { Heading } from '../partials/heading'
-import { DocPrevNextNav } from '../partials/doc-prev-next-nav'
 import { PageComponentProps } from '../type'
 
 export default ({ page, nextPage, prevPage, docsMenu }: PageComponentProps) =>
-    DocPageLayout(
-        page.title,
-        page.description,
-        page.path,
+    DocPageLayout({
+        page,
+        prevPage,
+        nextPage,
         docsMenu,
-        html`
-            ${Heading(page.name)}
-            ${DocPrevNextNav({
-                prev: prevPage,
-                next: nextPage,
-            })}
-        `
-    )
+        content: html` ${Heading(page.name)} `,
+    })