Add blog, improve stuff somewhat

2023-11-26 13:14:50 -06:00 · 2023-11-26 13:14:50 -06:00 · ef51ddc89a
commit ef51ddc89a
parent b7097dfc91
14 changed files with 193 additions and 29 deletions
--- a/.gitea/workflows/.vercel.yaml
+++ b/.gitea/workflows/.vercel.yaml
@ -0,0 +1,21 @@
+# name: Vercel Production Deployment
+# env:
+#   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+#   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+# on:
+#   push:
+#     branches:
+#       - main
+# jobs:
+#   Deploy-Production:
+#     runs-on: ubuntu-latest
+#     steps:
+#       - uses: actions/checkout@v2
+#       - name: Install Vercel CLI
+#         run: npm install --global vercel@latest
+#       - name: Pull Vercel Environment Information
+#         run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+#       - name: Build Project Artifacts
+#         run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+#       - name: Deploy Project Artifacts to Vercel
+#         run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
--- a/.gitea/workflows/vercel.yaml
+++ b/.gitea/workflows/vercel.yaml
@ -1,21 +0,0 @@
-name: Vercel Production Deployment
-env:
-  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-on:
-  push:
-    branches:
-      - main
-jobs:
-  Deploy-Production:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Install Vercel CLI
-        run: npm install --global vercel@latest
-      - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
-      - name: Build Project Artifacts
-        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
-      - name: Deploy Project Artifacts to Vercel
-        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
--- a/embeds/loader.html
+++ b/embeds/loader.html
@ -21,6 +21,7 @@
    <h2>Please wait.</h2>
    <p>If this page does not load, try enabling JavaScript.</p>
    <small>(This site won't work well without it.)</small>
+    <p>Or <a href="/">go back home</a>.</p>
    <script>
      window.addEventListener("load", function () {
        document.querySelector("#loading").style.display = "none";
--- a/embeds/nav.html
+++ b/embeds/nav.html
@ -1,8 +1,16 @@
-<section>
+<section class="nav">
  <p>
-    <a href="/">Home</a> - <a href="/branding/">Branding</a> -
-    <a href="/links/">Links</a> - <a href="/projects/">Projects</a> -
-    <a href="/about/">About</a> -
+    <a href="/">Home</a> <a href="/branding/">Branding</a>
    <a href="/site/">Site Information</a>
  </p>
+  <p>
+    <a href="/blog/?blog=mtr">Blog</a>
+    <a href="/blog/?blog=stories">Stories</a>
+    <a href="/blog/?src=img">Images</a>
+  </p>
+  <p>
+    <a href="/links/">Links</a>
+    <a href="/projects/">Projects</a>
+    <a href="/about/">About</a>
+  </p>
 </section>
--- a/package.json
+++ b/package.json
@ -2,7 +2,7 @@
  "name": "projects-windowed",
  "version": "1.0.0",
  "scripts": {
-    "dev": "nodemon --exec 'gulp;node debug.js' --ext '*' --ignore 'output/*'"
+    "dev": "nodemon --exec 'rm -rf output/*;gulp;node debug.js' --ext '*' --ignore 'output/*'"
  },
  "devDependencies": {
    "gulp": "^4.0.2"
--- a/views/about/index.html
+++ b/views/about/index.html
@ -22,6 +22,7 @@
    </style>
  </head>
  <body>
+    <$ loader.html $>
    <header>
      <section>
        <h1>About</h1>
--- a/views/blog/index.html
+++ b/views/blog/index.html
@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Project Windows</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="/styles/normal.css" />
+    <link rel="stylesheet" href="/styles/windows.css" />
+    <link rel="stylesheet" href="/styles/style.css" />
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+      :root {
+        --base-scale: 16px;
+
+        --background-color: hsl(15, 100%, 15%);
+        --color: hsl(15, 100%, 85%);
+        --accent-color: hsl(15, 100%, 50%);
+        --accent-color-fg: hsl(15, 100%, 95%);
+        --font-family: "Lexend Deca";
+        --document-width: 40em;
+      }
+    </style>
+  </head>
+  <body>
+    <$ loader.html $>
+    <section>
+      <h1>Blog</h1>
+      <p>A place where I post unhinged ramblings (blog posts).</p>
+    </section>
+    <$ nav.html $>
+    <section id="data_get">
+      <h1>Getting blogs...</h1>
+    </section>
+    <div id="WindowHolder"></div>
+    <section id="accessibility" hidden></section>
+    <script src="/scripts/windows.js"></script>
+    <script src="/scripts/accessibility.js"></script>
+    <script src="./scripts/data_get_blog.js"></script>
+    <script>
+      window.manager = new WindowManager(
+        document.getElementById("WindowHolder")
+      );
+    </script>
+  </body>
+</html>
--- a/views/blog/post/index.html
+++ b/views/blog/post/index.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Project Windows</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="/styles/normal.css" />
+    <link rel="stylesheet" href="/styles/windows.css" />
+    <link rel="stylesheet" href="/styles/style.css" />
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+      :root {
+        --base-scale: 16px;
+
+        --background-color: hsl(15, 100%, 15%);
+        --color: hsl(15, 100%, 85%);
+        --accent-color: hsl(15, 100%, 50%);
+        --accent-color-fg: hsl(15, 100%, 95%);
+        --font-family: "Lexend Deca";
+        --document-width: 40em;
+      }
+    </style>
+  </head>
+  <body>
+    <$ loader.html $>
+    <section id="data_get">
+      <h1>Getting post...</h1>
+    </section>
+    <section id="accessibility" hidden></section>
+    <script src="/scripts/accessibility.js"></script>
+    <script src="./scripts/showdown.min.js"></script>
+    <script src="./scripts/data_get_blog_post.js"></script>
+  </body>
+</html>
--- a/views/blog/post/scripts/data_get_blog_post.js
+++ b/views/blog/post/scripts/data_get_blog_post.js
@ -0,0 +1,24 @@
+const data_get = document.getElementById("data_get");
+const urlParams = new URLSearchParams(window.location.search);
+const source = urlParams.get("src") || "blog";
+const blog = urlParams.get("blog") || "mtr";
+
+const conv = new showdown.Converter({
+  simplifiedAutoLink: true,
+  simpleLineBreaks: true,
+  requireSpaceBeforeHeadingText: true,
+  encodeEmails: true,
+  excludeTrailingPunctuationFromURLs: true,
+  omitExtraWLInCodeBlocks: true,
+});
+
+fetch(
+  `https://${source}.abtmtr.link/api/collections/${blog}/posts/${urlParams.get(
+    "slug"
+  )}?body=html`
+)
+  .then((x) => x.json())
+  .then(({ data }) => {
+    data_get.innerHTML = `<h1>${data.title}</h1>
+    <section>${conv.makeHtml(data.body.replace(/#\w+/gim, ""))}</section>`;
+  });
--- a/views/blog/post/scripts/showdown.min.js
+++ b/views/blog/post/scripts/showdown.min.js
--- a/views/blog/scripts/data_get_blog.js
+++ b/views/blog/scripts/data_get_blog.js
@ -0,0 +1,34 @@
+const data_get = document.getElementById("data_get");
+const urlParams = new URLSearchParams(window.location.search);
+const source = urlParams.get("src") || "blog";
+const blog = urlParams.get("blog") || "mtr";
+fetch(
+  `https://${source}.abtmtr.link/api/collections/${blog}/posts?body=html&page=${
+    urlParams.get("page") || 1
+  }`
+)
+  .then((x) => x.json())
+  .then(({ data }) => {
+    data_get.innerHTML = `<style>${data.style_sheet}</style>
+    ${data.posts
+      .map(
+        (post) => `
+      <h1><a href="/blog/post/?blog=${data.alias}&slug=${
+          post.slug
+        }&src=${source}" target="_blank">${post.title}</a></h1>
+
+      <p>
+      <button
+        onclick="window.manager.createWindow('/blog/post/?blog=${
+          data.alias
+        }&slug=${post.slug}&src=${source}', false)"
+      >
+        Open in Window
+      </button>
+    </p>
+      <p>Posted ${new Date(post.created).toLocaleDateString()}</p>
+      ${source == "img" ? `<p><img src="${post.images[0]}" /></p>` : ""}`
+      )
+      .join("")}
+    `;
+  });
--- a/views/links/index.html
+++ b/views/links/index.html
@ -22,6 +22,7 @@
    </style>
  </head>
  <body>
+    <$ loader.html $>
    <header>
      <section>
        <h1>Links</h1>
--- a/views/styles/normal.css
+++ b/views/styles/normal.css
@ -21,8 +21,8 @@ body {
  width: 100vw;
  max-width: var(--document-width);
  margin: auto;
-  padding-inline: 0.5em;
-  padding-block: 0.5em;
+  padding-inline: 1em;
+  padding-block: 1em;
 }

 html.base {
@ -83,7 +83,7 @@ h3 {

 p {
  font-size: 1em;
-  line-height: 1.25em;
+  line-height: 1.5em;
  margin-inline: 0;
  margin-block: 0.5em;
 }
@ -123,6 +123,11 @@ hr {
  margin-block: 0.25em;
 }

+blockquote {
+  margin-inline: 1em;
+  margin-block: 0.5em;
+}
+
 /* Form normalize */

 html {
--- a/views/styles/style.css
+++ b/views/styles/style.css
@ -23,3 +23,9 @@
 img {
  max-width: 100%;
 }
+
+.nav p {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1em;
+}