work

.gitignore

@@ -19,3 +19,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+src/pages/posts/.obsidian/
+.vscode
+src/pages/posts/.trash

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "src/styles/terminal-css"]
-	path = src/styles/terminal-css
+path = src/styles/terminal-css
-	url = git@github.com:ArgentumCation/terminal-css.git
+url = git@github.com:ArgentumCation/terminal-css.git
+[submodule "littlelink"]
+	path = littlelink
+	url = git@github.com:ArgentumCation/littlelink.git

astro.config.mjs

@@ -3,7 +3,7 @@ import mdx from '@astrojs/mdx';
 
 export default defineConfig({
   markdown: {
-    syntaxHighlight: 'shiki',
+    syntaxHighlight: false,
     shikiConfig: {
       theme: 'css-variables'
     }

littlelink

@@ -0,0 +1 @@
+Subproject commit 0d65b55b253309e4571253cafb003698083da726

package.json

@@ -13,6 +13,8 @@
     "@astrojs/mdx": "^0.18.1",
     "accessible-astro-components": "^1.6.5",
     "astro": "^2.0.18",
+    "highlight.js": "^11.7.0",
+    "highlightjs-line-numbers.js": "^2.8.0",
     "sass": "^1.59.3"
   }
 }

pnpm-lock.yaml

@@ -4,12 +4,16 @@ specifiers:
   '@astrojs/mdx': ^0.18.1
   accessible-astro-components: ^1.6.5
   astro: ^2.0.18
+  highlight.js: ^11.7.0
+  highlightjs-line-numbers.js: ^2.8.0
   sass: ^1.59.3
 
 dependencies:
   '@astrojs/mdx': 0.18.1_astro@2.1.2
   accessible-astro-components: 1.6.5
   astro: 2.1.2_sass@1.59.3
+  highlight.js: 11.7.0
+  highlightjs-line-numbers.js: 2.8.0
   sass: 1.59.3
 
 packages:
@@ -1625,6 +1629,15 @@ packages:
       space-separated-tokens: 2.0.2
     dev: false
 
+  /highlight.js/11.7.0:
+    resolution: {integrity: sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==}
+    engines: {node: '>=12.0.0'}
+    dev: false
+
+  /highlightjs-line-numbers.js/2.8.0:
+    resolution: {integrity: sha512-TEf1gw0c8mb8nan0QwliqS7obT4cpUd9hzsGzsZLweteNnWea/VIqy5/aQqsa5wnz9lnvmtAkS1ZtDTjB/goYQ==}
+    dev: false
+
   /html-escaper/3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
     dev: false

src/components/BaseHead.astro

@@ -2,7 +2,8 @@
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
 import "../styles/global.css";
-import "../styles/terminal-css/css/lunar-witch.css";
+import "../styles/terminal-css/lunar-witch.css";
+//import "../styles/terminal-css/base16-lunar-witch.css";
 const { title, description } = Astro.props;
 ---
 
@@ -15,7 +16,27 @@ const { title, description } = Astro.props;
 <title>{title}</title>
 <meta name="title" content={title} />
 <meta name="description" content={description} />
-<link
+<script>
-  href="https://cdn.jsdelivr.net/gh/owenversteeg/min@gh-pages/entireframework.min.css"
+  import hljs from "highlight.js";
-  rel="stylesheet"
+  hljs.highlightAll();
-/>
+</script>
+<style>
+  :root {
+    /* base00 :Background, black */
+    /* base01 :Light Background*/
+    /* base02 :Selection Background*/
+    /* base03 :comments, bright black*/
+    /* base04 :status bars, dark foreground*/
+    /* base05 :Foreground, white */
+    /* base06 :Light Foreground */
+    /* base07 :Light Background?? */
+    /* base08 :red*/
+    /* base09 :orange*/
+    /* base0A :yellow*/
+    /* base0B :green*/
+    /* base0C :aqua/cyan*/
+    /* base0D :blue*/
+    /* base0E :purple*/
+    /* base0F :*/
+  }
+</style>

src/components/Footer.astro

@@ -3,5 +3,9 @@ const today = new Date();
 ---
 
 <footer>
-  &copy; {today.getFullYear()} ArgentumCation. All rights reserved.
+  This work &copy; {today.getFullYear()} by <a href="https://argentumcation.com"
+    >ArgentumCation (Mira Velturu)</a
+  > is licensed under <a
+    href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a
+  >
 </footer>

src/components/Header.astro

@@ -1,7 +1,15 @@
-<nav class="nav" tabindex="-1" onclick="this.focus()">
+<div class="terminal-nav">
-  <div class="container">
+    <header class="terminal-logo">
-    <a class="pagename current" href="#">ArgentumCation</a>
+        <div class="logo terminal-prompt"><a href="https://argentumcation.com" class="no-style">ArgentumCation</a></div>
-    <a href="/">Home</a>
+    </header>
-    <a href="/posts">Posts</a>
+    <nav class="terminal-menu">
-  </div>
+        <ul>
-</nav>
+            <li>
+                <a class="menu-item" href="https://links.argentumcation.com">Links</a>
+            </li>
+            <li>
+                <a class="menu-item" href="https://argentumcation.com/posts">Posts</a>
+            </li>
+        </ul>
+    </nav>
+</div>

src/layouts/BlogLayout.astro

@@ -1,5 +1,6 @@
 ---
 import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
 import BaseHead from "../components/BaseHead.astro";
 const { title } = Astro.props;
 ---
@@ -10,11 +11,12 @@ const { title } = Astro.props;
     title={title}
     description="I don't know what I'm doing here either"
   />
-  <body>
+  <body class="container">
     <Header />
     <main>
       <h1>{title}</h1>
       <slot />
     </main>
+    <Footer />
   </body>
 </html>

src/layouts/Layout.astro

@@ -12,7 +12,7 @@ const {
   <head>
     <BaseHead title={title} description={description} />
   </head>
-  <body>
+  <body class="container">
     <Header />
     <main>
       <article>

src/pages/index.astro

@@ -1,8 +1,13 @@
 ---
+import BaseHead from "../components/BaseHead.astro";
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
 ---
 
+<!DOCTYPE html>
 <html lang="en">
   <head>
+    <BaseHead title="ArgentumCation" />
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width" /><meta
@@ -10,7 +15,12 @@
       content={Astro.generator}
     /><title>Astro</title></head
   >
+  <body class="container">
+    <Header />
+    <main>
+      <h1>ArgentumCation</h1>
+      <p>Look I know it's a kinda shit homepage, I'm working on it.</p>
+    </main>
+    <Footer />
+  </body>
 </html>
-<body>
-  <h1>Astro</h1>
-</body>

src/pages/posts/traefik-setup.mdx

@@ -0,0 +1,143 @@
+---
+title: "Getting up and running with Traefik"
+author: "ArgentumCation"
+layout: ../../layouts/Layout.astro
+pubDate: "03 Apr, 2023"
+slug: "traefik-setup"
+---
+
+- Okay so you've got a server now and need a reverse proxy
+- Traefik is pretty decent at that, it'll set up your HTTPS certs and auto generate routes from your docker images
+- only problem is its an absolute bitch to set up
+- Here's a stripped down `docker-compose.yml` to give you an idea of how I have it set up
+- The end result should be a lighttpd server running on `blog.argentumcation.com` 
+```yaml
+# Just setting some default values for my containers
+x-service_defaults:
+  &service_defaults
+  env_file: .env
+  restart: unless-stopped
+  extra_hosts:
+    - host.docker.internal:host-gateway
+services:
+  traefik:
+    <<: *service_defaults
+    container_name: traefik
+    env_file:
+      - .env
+      # Cloudflare API token to add new paths
+      - $ENV_DIR/traefik.secrets.env
+    hostname: traefik
+    image: traefik:latest
+    labels:
+      - traefik.http.services.traefik-docker.loadbalancer.server.port=8080
+      # For the management interface
+      - '8080:8080'
+      # To let traefik receive incoming HTTP traffic
+      - '80:80'
+      # To let traefik receive incoming HTTPS traffic
+      - '443:443'
+    volumes:
+      # This lets traefik see your docker services
+      - $DOCKER_SOCK:/var/run/docker.sock:ro
+	  # Traefik Configs
+      - $CONF_DIR/traefik/traefik.yml:/traefik.yml
+      - $CONF_DIR/traefik/traefik_dynamic.yml:/etc/traefik/traefik_dynamic.yml
+      # Let's Encrypt folder (for storing HTTPS cert related stuff)
+      - $CONF_DIR/letsencrypt:/letsencrypt
+  # Example container we're proxying with traefik
+  lighttpd:
+    <<: *service_defaults
+    container_name: public_lighttpd
+    image: sebp/lighttpd
+    labels:
+      # This is the hostname that traefik will proxy to this container
+      - traefik.http.routers.lighttpd-docker.rule=Host(`blog.$PUBLIC`) 
+      # This is the port the container is listening on, often traefik can detect this 
+      # automatically, but we'll just be explicit here
+      - traefik.http.services.lighttpd-docker.loadbalancer.server.port=80
+```
+- `traefik.secrets.env` contains my cloudflare API key so that Traefik can automatically add DNS routes
+- For reference, here's my `.env` file
+```sh
+# GENERAL
+PUBLIC=argentumcation.com
+TZ=America/New_York
+
+#for container specific env vars
+ENV_DIR=./env
+
+CONF_DIR=./config
+
+DOCKER_DIR=/home/mira/docker
+DOCKER_SOCK=/var/run/docker.sock
+
+# So my containers run as a non-root user
+UID=1000
+GID=1000
+PUID=1000
+PGID=1000
+USER_UID=1000
+USER_GID=1000
+```
+- And of course, the actual traefik configuration files:
+    - `traefik.yml`: 
+```yaml
+accessLog:
+  filePath: ./traefik-access.log
+
+api:
+  dashboard: true
+  debug: true
+  insecure: true
+certificatesResolvers:
+  letsencrypt:
+    acme:
+      dnschallenge:
+        provider: cloudflare #look, I know, don't judge me
+      email: [redacted] 
+      storage: /letsencrypt/acme.json
+entryPoints:
+  web:
+    address: ":80"
+    forwardedHeaders:
+      insecure: true
+    http:
+      middlewares:
+        - https_redirect@file
+
+  websecure:
+    address: ":443"
+    forwardedHeaders:
+      insecure: true
+    http:
+      tls:
+        certresolver: letsencrypt
+        domains:
+          - main: argentumcation.com
+            sans:
+              - "*.argentumcation.com"
+log:
+  level: INFO
+providers:
+  docker:
+    # Routes will be set to [container-name].argentumcation.com by default
+    defaultRule: Host(`{{ index .Labels "com.docker.compose.service" }}.argentumcation.com`)
+    endpoint: unix:///var/run/docker.sock
+    exposedByDefault: true # exposes auto-discovered containers by default, not secure but I'm lazy
+    network: docker_default
+    watch: true
+  file:
+    directory: /etc/traefik/
+    watch: true
+
+```
+    - `traefik-dynamic.yml`
+```yaml
+http:
+  middlewares: #This should redirect incoming http connections to https
+    https_redirect:
+      redirectscheme:
+        scheme: https
+        permanent: true
+```

src/styles/global.css

@@ -1,65 +1,229 @@
+@import "https://unpkg.com/terminal.css@0.7.2/dist/terminal.min.css";
 :root {
-  --astro-code-color-text: var(--fg);
+  /* Terminal Colors */
-  --astro-code-color-background: var(--black);
+  --background-color: var(--base00, var(--background));
-  --astro-code-token-constant: var(--red);
+  --font-color: var(--base05, var(--foreground));
-  --astro-code-token-string: var(--bright-green);
+  --invert-font-color: var(--base00, var(--background));
-  --astro-code-token-comment: var(--bright-black);
+  --primary-color: var(--base0D, var(--cyan));
-  --astro-code-token-keyword: var(--bright-cyan);
+  --secondary-color: var(--base0D, var(--cyan));
-  --astro-code-token-parameter: var(--bright-magenta);
+  --tertiary-color: var(--base0B, var(--green));
-  --astro-code-token-function: var(--bright-blue);
+  --error-color: var(--base08, var(--red));
-  --astro-code-token-string-expression: var(--bright-green);
+  --progress-bar-background: var(--base04, var(--blue));
-  --astro-code-token-punctuation: var(--fg);
+  --progress-bar-fill: var(--base02, var(--cyan));
-  --astro-code-token-link: var(--blue);
+  --code-bg-color: var(--base00, var(--background));
+
+  /* Astro Config */
+  --astro-code-color-text: var(--base05, --foreground);
+  --astro-code-color-background: var(--base00, --background);
+  --astro-code-token-constant: var(--base09, var(--orange, var(--cyan)));
+  --astro-code-token-string: var(--base0B, --green);
+  --astro-code-token-comment: var(--base03, --bright-black);
+  --astro-code-token-keyword: var(--base0E, --magenta);
+  --astro-code-token-parameter: var(--base08, --red);
+  --astro-code-token-function: var(--base0D, --blue);
+  --astro-code-token-string-expression: var(--base0B, --green);
+  --astro-code-token-punctuation: var(--base05, --foreground);
+  --astro-code-token-link: var(--base09, var(--orange, var(--cyan)));
+  /*Fonts*/
+  --mono-font-stack: Liga SFMono Nerd Font, Ubuntu, Menlo, Monaco, Cascadia Code,
+    Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
+    Courier New, monospace, serif;
+  --font-stack: var(--mono-font-stack);
 }
 
-footer {
+pre code.hljs {
-  /* margin-top: 20vh; */
+  display: block;
-  padding: 0.5em;
+  overflow-x: auto;
-}
-
-main {
-  margin: 0 auto;
-  padding: 1.5em;
-  max-width: 75vmax;
-  min-height: 100vh;
-}
-
-code {
-  counter-reset: step;
-  counter-increment: step 0;
-}
-
-code .line::before {
-  content: counter(step);
-  counter-increment: step;
-  width: 1rem;
-  margin-right: 1.5rem;
-  display: inline-block;
-  text-align: right;
-  color: var(--bright-black);
-  font-weight: bolder;
-}
-
-article {
-  margin: 0 auto;
-}
-
-.nav {
-  background: var(--bright-black) !important;
-  color: var(--fg);
   padding: 1em;
 }
 
-.nav .current {
+code.hljs {
-  background: var(--bright-black) !important;
+  padding: 3px 5px;
-  color: var(--fg);
-  margin-bottom: 0.5em;
 }
-.nav a:hover {
+
-  background: var(--bright-black) !important;
+.hljs {
-  color: var(--fg);
+  color: var(--base05, var(--foreground));
+  background: var(--base00, var(--background));
+}
+
+.hljs::selection,
+.hljs ::selection {
+  background-color: var(--base02, var(--cyan));
+  color: var(--base05, var(--foreground));
+}
+
+/* purposely do not highlight these things */
+.hljs-formula,
+.hljs-params,
+.hljs-property {
+}
+
+/* base03 - var(--base03,) -  Comments, Invisibles, Line Highlighting */
+.hljs-comment {
+  color: var(--base03, var(--bright-black));
+}
+
+/* base04 - var(--base04,) -  Dark Foreground (Used for status bars) */
+.hljs-tag {
+  color: var(--base04, var(--blue));
+}
+
+/* base05 - var(--base05,) -  Default Foreground, Caret, Delimiters, Operators */
+.hljs-subst,
+.hljs-punctuation,
+.hljs-operator {
+  color: var(--base05, var(--foreground));
+}
+
+.hljs-operator {
+  opacity: 0.7;
+}
+
+/* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
+.hljs-bullet,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-selector-tag,
+.hljs-name,
+.hljs-deletion {
+  color: var(--base08, var(--red));
+}
+
+/* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
+.hljs-symbol,
+.hljs-number,
+.hljs-link,
+.hljs-attr,
+.hljs-variable.constant_,
+.hljs-literal {
+  color: var(--base09, var(--orange, var(--cyan)));
+}
+
+/* base0A - Classes, Markup Bold, Search Text Background */
+.hljs-title,
+.hljs-class .hljs-title,
+.hljs-title.class_ {
+  color: var(--base0A, var(--yellow));
+}
+
+.hljs-strong {
+  font-weight: bold;
+  color: var(--base0A, var(--yellow));
+}
+
+/* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
+.hljs-code,
+.hljs-addition,
+.hljs-title.class_.inherited__,
+.hljs-string {
+  color: var(--base0B, var(--green));
+}
+
+/* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
+.hljs-built_in,
+.hljs-doctag, /* guessing */
+.hljs-quote,
+.hljs-keyword.hljs-atrule,
+.hljs-regexp {
+  color: var(--base0C, var(--cyan));
+}
+
+/* base0D - Functions, Methods, Attribute IDs, Headings */
+.hljs-function .hljs-title,
+.hljs-attribute,
+.ruby .hljs-property,
+.hljs-title.function_,
+.hljs-section {
+  color: var(--base0D, var(--blue));
+}
+
+/* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
+.hljs-type,
+/* .hljs-selector-id, */
+/* .hljs-selector-class, */
+/* .hljs-selector-attr, */
+/* .hljs-selector-pseudo, */
+.hljs-template-tag,
+.diff .hljs-meta,
+.hljs-keyword {
+  color: var(--base0E, var(--magenta));
+}
+.hljs-emphasis {
+  color: var(--base0E, var(--magenta));
+  font-style: italic;
+}
+
+/* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
+.hljs-meta,
+/*
+  prevent top level .keyword and .string scopes
+  from leaking into meta by accident
+*/
+.hljs-meta .hljs-keyword,
+.hljs-meta .hljs-string {
+  color: var(--base0F, var(--orange, var(--cyan)));
+}
+
+.hljs-meta .hljs-keyword,
+/* for v10 compatible themes */
+.hljs-meta-keyword {
+  font-weight: bold;
+}
+
+code {
+  background-color: var(--base03, var(--bright-black));
+}
+
+footer {
+  padding-bottom: 1em;
 }
 .astro-code {
   background-color: unset;
   padding: 0.5rem;
 }
+
+main {
+  min-height: 85vh;
+}
+
+li:has(.card)::after {
+  content: unset;
+}
+
+ol {
+  list-style-type: decimal;
+}
+ol ol {
+  list-style-type: lower-alpha;
+}
+
+ol ol ol {
+  list-style-type: lower-roman;
+}
+
+ol ol ol ol {
+  list-style-type: simp-chinese-informal;
+}
+
+ol ol ol ol ol {
+  list-style-type: devanagari;
+}
+
+ol ol ol ol ol ol {
+  list-style-type: katakana;
+}
+
+ol ol ol ol ol ol ol {
+  list-style-type: lower-greek;
+}
+
+ol ol ol ol ol ol ol ol {
+  list-style-type: cjk-earthly-branch;
+}
+ol ol ol ol ol ol ol ol ol {
+  list-style-type: cjk-heavenly-stem;
+}
+
+ol ol ol ol ol ol ol ol ol ol {
+  list-style-type: hebrew;
+}

src/styles/terminal-css

@@ -1 +1 @@
-Subproject commit baa520f5374bb3fa0df59696c0bcb18024cfb728
+Subproject commit 1892e39f3d5fabd8f8f4232285ded1a88ed1430d