Add blog index and archive pages

Automatic blog indexing and archive pages

package.json

@@ -31,7 +31,7 @@
     "@fastify/swagger-ui": "^1.3.0",
     "@mozilla/readability": "^0.4.2",
     "@nearform/sql": "^1.5.0",
-    "@siteup/cli": "^4.0.1",
+    "@siteup/cli": "^5.0.0",
     "abstract-cache-redis": "^2.0.0",
     "classnames": "^2.3.1",
     "clean-deep": "^3.4.0",

web/blog/2023/page.js

@@ -0,0 +1,19 @@
+/**
+ * @template T
+ * @typedef {import('@siteup/cli').PageFunction<T>} PageFunction
+ */
+
+export const vars = {
+  title: 'Breadcrum.net 2023 Blogs',
+  layout: 'blog-auto-index'
+}
+
+/**
+ * @type {PageFunction<{
+ *       title: string
+ *       publishDate: string
+ * }>}
+ */
+export default async function blogIndex2023 () {
+  return ''
+}

web/blog/page.js

@@ -0,0 +1,71 @@
+import { html } from 'uland-isomorphic'
+import { dirname, basename } from 'node:path'
+
+/**
+ * @template T
+ * @typedef {import('@siteup/cli').PageFunction<T>} PageFunction
+ */
+
+export const vars = {
+  title: 'Breadcrum.net Blog',
+  layout: 'blog-index'
+}
+
+/**
+ * @type {PageFunction<{
+ *  siteName: string,
+ *  siteDescription: string,
+ *  siteUrl: string,
+ *  authorName: string,
+ *  authorUrl: string,
+ *  authorImgUrl: string
+ *  layout: string,
+ *  publishDate: string
+ *  title: string
+ * }>}
+ */
+export default async function blogIndex2023 ({
+  pages,
+  page
+}) {
+  const blogPosts = pages
+    .filter(page => page.vars.layout === 'article')
+    // @ts-ignore
+    .sort((a, b) => new Date(b.vars.publishDate) - new Date(a.vars.publishDate))
+    .slice(0, 50)
+
+  const folderPages = pages.filter(folderPage => {
+    const dir = dirname(folderPage.pageInfo.path)
+    const path = page.path
+    return dir === path
+  })
+
+  return html`
+    <ul class="blog-index-list">
+      ${blogPosts.map(p => {
+        const publishDate = p.vars.publishDate ? new Date(p.vars.publishDate) : null
+        return html`
+          <li class="blog-entry h-entry">
+            <a class="blog-entry-link u-url u-uid p-name" href="/${p.pageInfo.path}/">${p.vars.title}</a>
+            ${
+              publishDate
+                ? html`<time class="blog-entry-date dt-published" datetime="${publishDate.toISOString()}">
+                    ${publishDate.toISOString().split('T')[0]}
+                  </time>`
+                : null
+            }
+          </li>`
+        })}
+    </ul>
+    <footer class="blog-index-footer">
+      <h4>Archive</h4>
+      <ul class="archive-list">
+        ${folderPages.map(p => {
+          return html`<li>
+            <a href="/${p.pageInfo.path}/">${basename(p.pageInfo.path)}</a>
+          </li>`
+        })}
+      <ul>
+    </footer>
+    `
+}

web/blog/style.css

@@ -0,0 +1,8 @@
+.blog-index-footer {
+  & .archive-list {
+    padding-left: 0px;
+    display: inline-flex;
+    gap: 1em;
+    list-style-type: none;
+  }
+}

web/components/footer/index.js

@@ -13,7 +13,7 @@ export const footer = Component(({
       <a href="/docs/">docs</a>
     </div>
     <div>
-      <a href="/blog/2023">blog</a>
+      <a href="/blog/">blog</a>
     </div>
     <div>
       <a href="/docs/social/">@breadcrum</a>

web/layouts/article.layout.css

@@ -31,4 +31,12 @@
     border-radius: 50%;
     padding: 4px;
   }
+
+  & .date-time {
+    font-family: var(--system-mono);
+  }
+
+  & .blog-footer {
+    color: var(--accent-foreground);
+  }
 }

web/layouts/article.layout.js

@@ -30,7 +30,7 @@ export default function articleLayout (args) {
           </address>
           ${vars.publishDate
             ? html`
-              <time class="dt-published" itemprop="datePublished" datetime="${vars.publishDate}">
+              <time class="date-time dt-published" itemprop="datePublished" datetime="${vars.publishDate}">
                 <a href="#" class="u-url">
                   ${(new Date(vars.publishDate)).toLocaleString()}
                 </a>
@@ -51,11 +51,9 @@ export default function articleLayout (args) {
         }
       </section>
 
-      <!--
-        <footer>
-            <p>Footer notes or related info here...</p>
-        </footer>
-      -->
+      <footer class="blog-footer">
+        <p>Wan't to follow along for future updates? Follow our <a href="/docs/social/">socials and feeds</a>!</p>
+      </footer>
     </article>
     ${breadcrumb({ pathSegments })}
   `

web/layouts/blog-auto-index.layout.css

@@ -0,0 +1 @@
+@import './blog-index.layout.css';

web/layouts/blog-auto-index.layout.js

@@ -0,0 +1,53 @@
+import { html } from 'uland-isomorphic'
+import { dirname } from 'node:path'
+
+/**
+ * @template T
+ * @typedef {import('@siteup/cli').LayoutFunction<T>} LayoutFunction
+ */
+
+/**
+ * @typedef {import('./blog-index.layout.js').BlogIndexVars} BlogIndexVars
+ */
+
+/**
+ * @typedef {BlogIndexVars} AutoBlogIndexVars
+ */
+
+import blogIndexLayout from './blog-index.layout.js'
+
+/** @type {LayoutFunction<AutoBlogIndexVars>} */
+export default function blogAutoIndexLayout (args) {
+  const { children, ...rest } = args
+
+  const folderPages = args.pages.filter(folderPage => {
+    const dir = dirname(folderPage.pageInfo.path)
+    const path = args.page.path
+    return dir === path
+  }).sort((a, b) => new Date(b.vars.publishDate) - new Date(a.vars.publishDate))
+
+  const wrappedChildren = html`
+    <ul class="blog-index-list">
+      ${folderPages.map(p => {
+        const publishDate = p.vars.publishDate ? new Date(p.vars.publishDate) : null
+        return html`
+          <li class="blog-entry h-entry">
+            <a class="blog-entry-link u-url u-uid p-name" href="/${p.pageInfo.path}/">${p.vars.title}</a>
+            ${
+              publishDate
+                ? html`<time class="blog-entry-date dt-published" datetime="${publishDate.toISOString()}">
+                    ${publishDate.toISOString().split('T')[0]}
+                  </time>`
+                : null
+            }
+          </li>`
+        })}
+    </ul>
+    ${typeof children === 'string'
+      ? html([children])
+      : children /* Support both uhtml and string children. Optional. */
+    }
+  `
+
+  return blogIndexLayout({ children: wrappedChildren, ...rest })
+}

web/layouts/blog-index.layout.css

@@ -1 +1,17 @@
 @import '../components/breadcrumb/index.css';
+
+.blog-index-list {
+  padding-left: 0px;
+
+  & .blog-entry {
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+  }
+  & .blog-entry-link {}
+  & .blog-entry-date {
+    color: var(--accent-foreground);
+    font-family: var(--font-code);
+    flex-shrink: 0;
+  }
+}

web/layouts/blog-index.layout.js

@@ -2,21 +2,38 @@ import { html } from 'uland-isomorphic'
 import { sep } from 'node:path'
 import { breadcrumb } from '../components/breadcrumb/index.js'
 
+/**
+ * @template T
+ * @typedef {import('@siteup/cli').LayoutFunction<T>} LayoutFunction
+ */
+
+/**
+ * @typedef {import('./root.layout.js').RootLayoutVars} RootLayoutVars
+ */
+
+/**
+ * @typedef {RootLayoutVars & {
+ *  title: string,
+ *  publishDate: string,
+ *  [key: string]: any
+ * }} BlogIndexVars
+ */
+
 import defaultRootLayout from './root.layout.js'
 
+/** @type {LayoutFunction<BlogIndexVars>} */
 export default function blogIndexLayout (args) {
   const { children, ...rest } = args
-  const page = rest.page
-  const vars = rest.vars
-  const pathSegments = page.path.split(sep)
+  const pathSegments = args.page.path.split(sep)
   const wrappedChildren = html`
     ${breadcrumb({ pathSegments })}
-    <h1>${vars.title}</h1>
+    <h1>${args.vars.title}</h1>
     ${typeof children === 'string'
       ? html([children])
       : children /* Support both uhtml and string children. Optional. */
     }
   `
 
+  // @ts-ignore
   return defaultRootLayout({ children: wrappedChildren, ...rest })
 }

web/layouts/root.layout.js

@@ -9,6 +9,20 @@ If you need to render components inside, you need attatch them in the global cli
 
 */
 
+/**
+ * @template T
+ * @typedef {import('@siteup/cli').LayoutFunction<T>} LayoutFunction
+ */
+
+/**
+ * @typedef {{
+ *  title: string,
+ *  siteName: string,
+ *  [key: string]: any
+ * }} RootLayoutVars
+ */
+
+/** @type {LayoutFunction<RootLayoutVars>} */
 export default function defaultRootLayout ({
   vars: {
     title,