feat: add decap cms workflow

HipsterBrown · Dec 1, 2023 · a25a239 · a25a239
1 parent 5fb3912
commit a25a239
Show file tree

Hide file tree

Showing 9 changed files with 17,288 additions and 5,345 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -73,6 +73,7 @@ module.exports = (config) => {
   config.addPassthroughCopy("css");
   config.addPassthroughCopy("images");
   config.addPassthroughCopy("videos");
+  config.addPassthroughCopy("admin/config.yml");
   config.setFrontMatterParsingOptions({
     excerpt: true,
   });

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -28,6 +28,16 @@ <h2 class="underline t-center">TL;DR</h2>
   </div>
 </footer>
 <script type="text/javascript" src="/assets/app.js" charset="utf-8"></script>
+<script>
+  if (window.netlifyIdentity) {
+    window.netlifyIdentity.on("init", user => {
+      if (user) return;
+      window.netlifyIdentity.on("login", () => {
+        document.location.href = "/admin"
+      })
+    })
+  }
+</script>
 </body>
 
 </html>
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,53 +1,51 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <title>{{ title }}</title>
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/png" href="/images/Logo.png" />
-    <link
-      rel="alternate"
-      type="application/atom+xml"
-      title="RSS Feed for HipsterBrown's Musings"
-      href="/feed.xml"
-    />
 
-    <!-- Custom CSS -->
-    <link rel="stylesheet" href="/sass/app.css" />
-    {% if highlight %}
-      <link rel="stylesheet" href="/css/prism-a11y-dark.css" />
-    {% endif %}
-    {% if page.url == "/" %}
-      {% eleventyGoogleFonts "https://fonts.googleapis.com/css?family=Playfair+Display:900&display=swap" %}
-    {% endif %}
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <title>{{ title }}</title>
+  <meta name="viewport" content="width=device-width" />
+  <link rel="icon" type="image/png" href="/images/Logo.png" />
+  <link rel="alternate" type="application/atom+xml" title="RSS Feed for HipsterBrown's Musings" href="/feed.xml" />
 
-    <!-- Typekit -->
-    <script type="text/javascript" src="https://use.typekit.net/vrt0cty.js"></script>
-    <script type="text/javascript">
-      try {
-        Typekit.load();
-      } catch (e) {}
-    </script>
-    {% if env.mode == "production" %}
-      <script async defer data-website-id="c9d25820-7fc0-45ab-ac3c-11192b71ca31" src="https://stats.hipsterbrown.com/script.js"></script>
-    {% endif %}
-  </head>
+  <!-- Custom CSS -->
+  <link rel="stylesheet" href="/sass/app.css" />
+  {% if highlight %}
+  <link rel="stylesheet" href="/css/prism-a11y-dark.css" />
+  {% endif %}
+  {% if page.url == "/" %}
+  {% eleventyGoogleFonts "https://fonts.googleapis.com/css?family=Playfair+Display:900&display=swap" %}
+  {% endif %}
 
-  <body>
-    <a class="skip-main" href="#main" tabindex="0">Skip to main content</a>
-    <scroll-nav>
-      <a href="/" aria-label="home" id="home-link">{% svg "Icon-Logo" %}</a>
-      <nav>
-        <ul>
-          <li id="empathy">
-            <a href="https://more-empathy.online">Empathy</a>
-          </li>
-          <li id="projects">
-            <a href="https://github.com/HipsterBrown">Projects</a>
-          </li>
-          <li id="musings"><a href="/musings/">Musings</a></li>
-        </ul>
-      </nav>
-      <a href="/faq/" aria-label="FAQ" id="break">{% svg "Icon-Little-Stache" %}</a>
-    </scroll-nav>
+  <!-- Typekit -->
+  <script type="text/javascript" src="https://use.typekit.net/vrt0cty.js"></script>
+  <script type="text/javascript">
+    try {
+      Typekit.load();
+    } catch (e) { }
+  </script>
+  {% if env.mode == "production" %}
+  <script async defer data-website-id="c9d25820-7fc0-45ab-ac3c-11192b71ca31"
+    src="https://stats.hipsterbrown.com/script.js"></script>
+  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
+  {% endif %}
+</head>
+
+<body>
+  <a class="skip-main" href="#main" tabindex="0">Skip to main content</a>
+  <scroll-nav>
+    <a href="/" aria-label="home" id="home-link">{% svg "Icon-Logo" %}</a>
+    <nav>
+      <ul>
+        <li id="empathy">
+          <a href="https://more-empathy.online">Empathy</a>
+        </li>
+        <li id="projects">
+          <a href="https://github.com/HipsterBrown">Projects</a>
+        </li>
+        <li id="musings"><a href="/musings/">Musings</a></li>
+      </ul>
+    </nav>
+    <a href="/faq/" aria-label="FAQ" id="break">{% svg "Icon-Little-Stache" %}</a>
+  </scroll-nav>
diff --git a/admin/config.yml b/admin/config.yml
@@ -0,0 +1,26 @@
+# local_backend: true
+backend:
+  name: github
+  repo: hipsterbrown/hipsterbrown.com
+  branch: main
+media_folder: "images/uploads"
+collections:
+  - name: "musings"
+    label: "Musings"
+    folder: "posts/musings"
+    create: true
+    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
+    sortable_fields:
+      - 'date'
+      - 'title'
+      - 'slug'
+    editor:
+      preview: false
+    fields:
+      - { name: "layout", label: "Layout", widget: "hidden", default: "musing" }
+      - { name: "draft", label: "Draft", widget: "boolean" }
+      - { name: "title", label: "Title", widget: "string", required: true }
+      - { name: "description", label: "Description", widget: "string", required: true }
+      - { name: "categories", label: "Categories", widget: "list", default: ["musings", "musing"]}
+      - { name: "tags", label: "Tags", widget: "list" }
+      - { name: "body", label: "Body", widget: "markdown" }
diff --git a/admin/index.html b/admin/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="robots" content="noindex" />
+  <title>Content Manager</title>
+  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
+</head>
+
+<body>
+  <decap-cms></decap-cms>
+  <!-- <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script> -->
+  <script src="/assets/app.js"></script>
+</body>
+
+</html>
diff --git a/js/_elements/decap-cms-element.ts b/js/_elements/decap-cms-element.ts
@@ -0,0 +1,13 @@
+class DecapCMSElement extends HTMLElement {
+  async connectedCallback() {
+    try {
+      const CMS = await import('decap-cms-app');
+      CMS.init()
+    } catch (error) {
+      console.error('Unable to resolve decap-cms-app due to error: ', error)
+      return;
+    }
+  }
+}
+
+customElements.define('decap-cms', DecapCMSElement);
diff --git a/js/app.ts b/js/app.ts
@@ -2,3 +2,4 @@
 import "./_elements/random-word-element";
 import "./_elements/fit-text-element";
 import "./_elements/scroll-nav-element";
+import "./_elements/decap-cms-element";