feat: add lume cms

jrson83 · Jul 15, 2024 · 546fc48 · 546fc48
1 parent b7dc4f9
commit 546fc48
Show file tree

Hide file tree

Showing 17 changed files with 86 additions and 29 deletions.
diff --git a/_cms.ts b/_cms.ts
@@ -0,0 +1,54 @@
+import site from '#data/site.ts'
+import lumeCMS from 'lume/cms/mod.ts'
+
+const cms = lumeCMS({
+  site,
+})
+
+cms.collection({
+  name: 'posts',
+  description: 'Create, edit or delete the posts of the blog',
+  store: 'src:posts/*.md',
+  fields: [{
+    name: 'title',
+    type: 'text',
+    label: 'Title of the page',
+    attributes: {
+      required: true,
+      maxlength: 100,
+    },
+  }, {
+    name: 'excerpt',
+    type: 'text',
+    label: 'Description displayed in post overview',
+    attributes: {
+      required: true,
+      maxlength: 200,
+    },
+  }, {
+    name: 'date',
+    type: 'date',
+    label: 'Published date',
+  }, {
+    name: 'draft',
+    label: 'Draft',
+    type: 'checkbox',
+    description: 'If checked, the post will not be published.',
+  }, {
+    name: 'tags',
+    type: 'list',
+    label: 'Tags',
+    init(field) {
+      const { data } = field.cmsContent
+      field.options = data.site?.search.values('tags')
+    },
+  }, {
+    name: 'content',
+    type: 'markdown',
+    label: 'Page content',
+  }],
+})
+
+cms.upload('uploads: Uploaded files', 'src:assets/images/blog')
+
+export default cms
diff --git a/deno.json b/deno.json
@@ -9,6 +9,7 @@
   },
   "tasks": {
     "clean": "rm -rf ./_site",
+    "cms": "BUILD_MODE=\"dev\" deno task lume cms",
     "build": "BUILD_MODE=\"prod\" deno task lume",
     "serve": "BUILD_MODE=\"dev\" deno task lume -s",
     "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -"

diff --git a/import_map.json b/import_map.json
@@ -1,6 +1,8 @@
 {
   "imports": {
     "lume/": "https://deno.land/x/[email protected]/",
+    "lume/cms/": "https://cdn.jsdelivr.net/gh/lumeland/[email protected]/",
+    "#data/": "./src/_data/",
     "#plugins/": "./plugins/",
     "#types": "./src/_includes/types.ts",
     "#utils": "./src/_includes/utils/index.ts"

diff --git a/src/_data/site.ts b/src/_data/site.ts
@@ -1,5 +1,5 @@
 export default {
-  title: 'jrson.me',
+  name: 'jrson.me',
   description:
     'I am a passionate web developer who likes to experiment with different stacks. I am forced to optimize things to infinity. I blog about my experience I like to share, using Node.js and Deno.',
   url: 'https://jrson.me',

diff --git a/src/_includes/layouts/root.tsx b/src/_includes/layouts/root.tsx
@@ -1,5 +1,5 @@
 export default (
-  { children, comp, excerpt, importJs, site, title, type, url }: Lume.Data,
+  { children, comp, excerpt, importJs, site, title, type, url }: Lume.PageProps,
   { urlFilter }: Lume.Helpers,
 ) => {
   const postSlug = title?.replace(/\s+/g, '-').toLowerCase()
@@ -18,7 +18,7 @@ export default (
       <head>
         <meta charSet='utf-8' />
         <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-        <title>{`${title} - ${site.title}`}</title>
+        <title>{`${title} - ${site.name}`}</title>
 
         <meta name='supported-color-schemes' content='light dark' />
         <meta
@@ -55,18 +55,18 @@ export default (
         {/* @ts-ignore */}
         <link rel="stylesheet" nonce="CSP_NONCE" href={urlFilter!(`/styles.css`)} inline />
 
-        <meta name='title' content={`${title} - ${site.title}`} />
+        <meta name='title' content={`${title} - ${site.name}`} />
         <meta name='description' content={excerpt || site.description} />
-        <meta name='author' content={site.title} />
-        <meta name='copyright' content={site.title} />
+        <meta name='author' content={site.name} />
+        <meta name='copyright' content={site.name} />
 
         <meta name='robots' content='index,follow' />
         <meta name='google' content='nositelinkssearchbox' />
 
         <meta property='og:type' content='website' />
-        <meta property='og:site_name' content={site.title} />
+        <meta property='og:site_name' content={site.name} />
         <meta property='og:locale' content={site.lang} />
-        <meta property='og:title' content={`${title} - ${site.title}`} />
+        <meta property='og:title' content={`${title} - ${site.name}`} />
         <meta
           property='og:description'
           content={excerpt || site.description}
@@ -86,7 +86,7 @@ export default (
           />
         )}
 
-        <meta name='twitter:title' content={`${title} - ${site.title}`} />
+        <meta name='twitter:title' content={`${title} - ${site.name}`} />
         <meta
           name='twitter:description'
           content={excerpt || site.description}
@@ -109,7 +109,7 @@ export default (
         <meta name='twitter:creator' content={site.twitter.user} />
         <meta name='twitter:site' content={site.twitter.user} />
 
-        <meta itemProp='name' content={site.title} />
+        <meta itemProp='name' content={site.name} />
         <meta itemProp='url' content={urlFilter!('/', true)} />
         <meta itemProp='creator' content={site.author.name} />
 

diff --git a/src/posts/2022-08-10_ path-aliases-with-import-maps-in-deno.md b/src/posts/2022-08-10_ path-aliases-with-import-maps-in-deno.md
@@ -1,7 +1,7 @@
 ---
 title: Path aliases with import maps on Deno
 excerpt: A tiny guide how to resolve paths using path aliases with import maps on Deno.
-date: 2022-08-10 09:30:00
+date: 2022-08-10
 draft: false
 tags:
   - deno

diff --git a/src/posts/2022-08-11_creating-a-blog-with-lume-part-1.md b/src/posts/2022-08-11_creating-a-blog-with-lume-part-1.md
@@ -1,8 +1,8 @@
 ---
 title: "Creating a Blog with Lume Part 1: Install & config"
 excerpt: This is a walkthrough of using Lume to set up a prerendered static blog with Preact, TypeScript, Markdown and SASS/SCSS.
-date: 2022-08-11 12:00:00
-updated: 2022-08-23 12:00:00
+date: 2022-08-11
+updated: 2022-08-23
 draft: false
 tags:
   - deno

diff --git a/src/posts/2022-08-22_the-proper-way-to-create-a-dark-mode-switch.md b/src/posts/2022-08-22_the-proper-way-to-create-a-dark-mode-switch.md
@@ -1,7 +1,7 @@
 ---
 title: The proper way to create a Dark Mode Switch
 excerpt: How to create a Dark Mode Switch wich is actually working.
-date: 2022-08-22 13:00:00
+date: 2022-08-22
 draft: true
 tags:
   - css

diff --git a/src/posts/2022-09-08_creating-a-blog-with-lume-part-2.md b/src/posts/2022-09-08_creating-a-blog-with-lume-part-2.md
@@ -1,7 +1,7 @@
 ---
 title: "Creating a Blog with Lume Part 2: Pages & layouts"
 excerpt: This is Part 2 of a walkthrough using Lume to set up a prerendered static blog with Preact, TypeScript, Markdown and SASS/SCSS.
-date: 2022-08-23 12:00:00
+date: 2022-08-23
 draft: false
 tags:
   - deno

diff --git a/src/posts/2022-12-06_inertia.js-preact-adapter-v0.2.0-released.md b/src/posts/2022-12-06_inertia.js-preact-adapter-v0.2.0-released.md
@@ -1,8 +1,8 @@
 ---
 title: Inertia.js Preact Adapter v0.2.0 released
 excerpt: The Inertia.js Preact Adapter v0.2.0 is now available on npm!
-date: 2022-12-06 02:12:00
-update: 2022-12-08 20:45:00
+date: 2022-12-06
+update: 2022-12-08
 draft: false
 tags:
   - inertiajs

diff --git a/src/posts/2022-12-08_update-on-the-current-inertia.js-state.md b/src/posts/2022-12-08_update-on-the-current-inertia.js-state.md
@@ -1,7 +1,7 @@
 ---
 title: Update on the current Inertia.js state
 excerpt: Updated information on the current state of Inertia.js packages.
-date: 2022-12-08 20:45:00
+date: 2022-12-08
 draft: false
 tags:
   - inertiajs

diff --git a/src/posts/2023-01-29_how-to-format-and-lint-code-in-2023.md b/src/posts/2023-01-29_how-to-format-and-lint-code-in-2023.md
@@ -1,8 +1,8 @@
 ---
 title: How to Format and Lint code in 2023
 excerpt: "Replace Prettier and ESLint now with a lightweight and faster alternative: Rome"
-date: 2023-01-29 05:00:00
-update: 2023-01-29 19:00:00
+date: 2023-01-29
+update: 2023-01-29
 draft: false
 tags:
   - nodejs

diff --git a/src/posts/2023-01-30_website-speed-and-performance-optimization.md b/src/posts/2023-01-30_website-speed-and-performance-optimization.md
@@ -1,8 +1,8 @@
 ---
 title: 'Website Speed and Performance Optimization: Metrics & Tools'
 excerpt: An insight into the optimization techniques I have applied to my blog.
-date: 2023-01-30 01:00:00
-update: 2023-08-02 19:00:00
+date: 2023-01-30
+update: 2023-08-02
 draft: false
 tags:
   - html

diff --git a/src/posts/2023-08-02_bloodborne-isz-glitch-cure.md b/src/posts/2023-08-02_bloodborne-isz-glitch-cure.md
@@ -1,8 +1,8 @@
 ---
 title: 'Bloodborne Isz glitch Cure'
 excerpt: This guide is intended to help Bloodborne players access the cure to Isz Glitch, that was discovered, but not widely distributed.
-date: 2023-08-02 19:00:00
-update: 2023-009-29 6:00:00
+date: 2023-08-02
+update: 2023-009-29
 draft: false
 tags:
   - bloodborne

diff --git a/src/posts/2023-08-17_ps5-offline-exploit-host-with-bdjplus.md b/src/posts/2023-08-17_ps5-offline-exploit-host-with-bdjplus.md
@@ -1,12 +1,12 @@
 ---
 title: PS5 offline exploit host with BDJPlus
 excerpt: "Demonstration of PS5 offline exploit host with BDJPlus created by Euro Ali."
-date: 2023-08-17 19:00:00
+date: 2023-08-17
 draft: false
 tags:
   - ps5
   - jailbreak
----
+---
 
 Earlier this week, PS5Scene developer Euro Ali published some information
 regarding his concept of modifying the bd-j runtime to run existing bd-j

diff --git a/src/posts/2023-08-23_ how-to-copy-ps4-savegames-to-ps5-on-exploitable-consoles.md b/src/posts/2023-08-23_ how-to-copy-ps4-savegames-to-ps5-on-exploitable-consoles.md
@@ -1,8 +1,8 @@
 ---
 title: How to copy PS4 savegames to PS5 on exploitable consoles
 excerpt: "This guide is intended to help Bloodborne players migrating their savegames from an exploitable PS4 to an exploitable PS5."
-date: 2023-08-23 23:00:00
-update: 2023-08-24 6:00:00
+date: 2023-08-23
+update: 2023-08-24
 draft: false
 tags:
   - ps4

diff --git a/...-forward-placeholders-and-extend-selectors-with-sass-scss-mixins-effectively.md b/...-forward-placeholders-and-extend-selectors-with-sass-scss-mixins-effectively.md
@@ -1,7 +1,7 @@
 ---
 title: "How to @use/@forward %placeholders and @extend selectors with SASS/SCSS @mixins effectively"
 excerpt: "In this blog post we learn how to @use %placeholders in complex SASS/SCSS modules."
-date: 2023-10-03 23:00:00
+date: 2023-10-03
 draft: false
 tags:
   - css