feat: Adds favicons, updates styles, includes Avenir font.

.gitattributes

@@ -0,0 +1 @@
+*.png filter=lfs diff=lfs merge=lfs -text

Sources/Docs/Templates/BaseLayout.swift

@@ -21,7 +21,7 @@ func baseLayout(
     .documentType("html"),
     html(lang: "en-US") {
       generateHeader(pageTitle, extraHeader)
-      body(class: "bg-page text-white pb-5 font-avenir \(section.rawValue)") {
+      body(class: "text-white text-lg pb-5 font-avenir \(section.rawValue)") {
         siteHeader(section)
 
         div(class: "container") {
@@ -59,9 +59,9 @@ private func siteHeader(_ section: Section) -> Node {
 }
 
 private func footer(_ rssLink: String) -> Node {
-  div(class: "site-footer text-slate-200 border-t border-light text-center pt-6 mt-8 text-sm") {
+  div(class: "site-footer text-slate-400 border-t border-light text-center pt-2 text-sm") {
     div {
-      "Copyright © Michael Housh 2023-\(Date().description.prefix(4))."
+      "Copyright © Michael Housh \(Date().description.prefix(4))."
     }
     p(class: "mb-2") {
       "Built in Swift using"
@@ -92,15 +92,33 @@ private func generateHeader(_ pageTitle: String, _ extraHeader: NodeConvertible)
     meta(content: "#0e1112", name: "theme-color", customAttributes: ["media": "(prefers-color-scheme: dark)"])
     meta(content: "#566B78", name: "theme-color", customAttributes: ["media": "(prefers-color-scheme: light)"])
     meta(content: "Michael Housh", name: "author")
-    meta(content: "Mhoush", name: "apple-mobile-web-app-title")
+    meta(content: "HHE-Docs", name: "apple-mobile-web-app-title")
     meta(content: "initial-scale=1.0, width=device-width", name: "viewport")
     meta(content: "telephone=no", name: "format-detection")
     meta(content: "True", name: "HandheldFriendly")
     meta(content: "320", name: "MobileOptimized")
-    meta(content: "Mhoush", name: "og:site_name")
+    meta(content: "HHE-Docs", name: "og:site_name")
     meta(content: "hvac, developer, swift, home-performance, design", name: "keywords")
     title { SiteMetadata.name + ": \(pageTitle)" }
-    link(href: "/static/favicon.ico", rel: "shortcut icon")
+    Node.raw("""
+    <link rel="apple-touch-icon" sizes="57x57" href="/static/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/static/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/static/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/static/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/static/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/static/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/static/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/static/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-icon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192"  href="/static/android-icon-192x192.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/static/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
+    <link rel="manifest" href="/static/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/static/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+    """)
     link(href: "/static/output.css", rel: "stylesheet")
     link(href: "/static/style.css", rel: "stylesheet")
     link(href: "/articles/feed.xml", rel: "alternate", title: SiteMetadata.name, type: "application/rss+xml")

Sources/Docs/Templates/RenderArticle.swift

@@ -85,12 +85,6 @@ private enum OtherArticles {
   }
 }
 
-var tagSVG: Node {
-  Node.raw("""
-  <svg viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#5a5a5a" stroke="#5a5a5a"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>tag-2</title> <desc>Created with Sketch Beta.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-360.000000, -774.000000)" fill="#5b5b5b"> <path d="M390.097,789.321 C390.097,789.849 389.611,790.623 389.095,791.139 L378.823,801.378 L365.634,788.197 L375.89,777.974 C376.36,777.504 377.111,776.903 377.641,776.903 L389.139,776.903 C389.668,776.903 390.097,777.331 390.097,777.858 L390.097,789.321 L390.097,789.321 Z M375.89,804.304 C375.079,805.111 373.765,805.111 372.955,804.304 L362.684,794.063 C361.873,793.256 361.873,791.946 362.684,791.139 L364.166,789.66 L377.341,802.856 L375.89,804.304 L375.89,804.304 Z M390.097,774.993 L376.683,774.993 C375.624,774.993 375.431,775.455 374.422,776.511 L361.217,789.676 C359.596,791.291 359.596,793.911 361.217,795.526 L371.487,805.767 C373.108,807.382 375.735,807.382 377.356,805.767 L390.563,792.602 C391.412,791.754 392.014,791.332 392.014,790.276 L392.014,776.903 C392.014,775.849 391.155,774.993 390.097,774.993 L390.097,774.993 Z M383.959,786.019 C383.148,786.826 381.835,786.826 381.024,786.019 C380.214,785.211 380.214,783.901 381.024,783.093 C381.835,782.285 383.148,782.285 383.959,783.093 C384.77,783.901 384.77,785.211 383.959,786.019 L383.959,786.019 Z M379.558,781.63 C377.937,783.246 377.937,785.865 379.558,787.481 C381.178,789.097 383.806,789.097 385.427,787.481 C387.047,785.865 387.047,783.246 385.427,781.63 C383.806,780.015 381.178,780.015 379.558,781.63 L379.558,781.63 Z" id="tag-2" sketch:type="MSShapeGroup"> </path> </g> </g> </g></svg>
-  """)
-}
-
 func renderArticle(context: ItemRenderingContext<ArticleMetadata>) -> Node {
   let otherArticles = parseOtherArticles(context)
 
@@ -100,12 +94,11 @@ func renderArticle(context: ItemRenderingContext<ArticleMetadata>) -> Node {
     title: context.item.title,
     extraHeader: generateHeader(.article(context.item))
   ) {
-    article(class: "prose pt-8") {
+    article(class: "pt-8 font-avenir text-lg") {
       h1 { context.item.title }
       div {
         renderArticleInfo(context.item)
       }
-      // img(alt: "banner", src: context.item.imagePath)
       Node.raw(context.item.body)
     }
 
@@ -115,7 +108,7 @@ func renderArticle(context: ItemRenderingContext<ArticleMetadata>) -> Node {
         if let tag = otherArticles.tag {
           a(href: "/articles/tag/\(tag)") {
             div(class: " [&:hover]:border-b border-orange px-5 flex flex-row gap-5") {
-              img(src: "/static/images/tag.svg", width: "40")
+              img(src: "/static/img/tag.svg", width: "40")
               span(class: "text-4xl font-extrabold text-orange") { tag }
             }
           }
@@ -126,11 +119,11 @@ func renderArticle(context: ItemRenderingContext<ArticleMetadata>) -> Node {
         otherArticles.items.prefix(2).map { renderArticleForGrid(article: $0) }
       }
 
-      div(class: "prose mt-10") {
+      div(class: "mt-10") {
         a(href: "/articles/") {
           div(class: "flex flex-row gap-2") {
-            span(class: "mt-8") { "All Articles" }
-            img(src: "/static/images/document.svg", width: "40")
+            span(class: "mt-4") { "All Articles" }
+            img(src: "/static/img/document.svg", width: "40")
           }
         }
       }
@@ -141,13 +134,12 @@ func renderArticle(context: ItemRenderingContext<ArticleMetadata>) -> Node {
 func renderArticleForGrid(article: Item<ArticleMetadata>) -> Node {
   section {
     h2(class: "post-title text-2xl font-bold mb-2") {
-      a(class: "[&:hover]:border-b border-orange", href: article.url) { article.title }
+      a(class: "[&:hover]:border-b border-orange-400", href: article.url) { article.title }
     }
     renderArticleInfo(article)
     p {
       a(href: article.url) {
         div {
-          // img(alt: "banner", src: article.imagePath)
           article.summary
         }
       }

Sources/Docs/Templates/RenderArticles.swift

@@ -20,8 +20,8 @@ func renderArticles(context: ItemsRenderingContext<ArticleMetadata>) -> Node {
     sortedByYearDescending.map { year, articles in
       div {
         div(class: "border-b border-light flex flex-row gap-4 mb-12") {
-          img(src: "/static/images/calendar.svg", width: "40")
-          h1(class: "text-4xl font-extrabold") { year }
+          img(src: "/static/img/calendar.svg", width: "40")
+          h1(class: "text-4xl font-extrabold pt-3") { year }
         }
 
         div(class: "grid gap-10 mb-16") {

Sources/Docs/Templates/RenderPage.swift

@@ -27,8 +27,6 @@ func renderPage(context: ItemRenderingContext<PageMetadata>) -> Node {
 
 func renderHome(body: String) -> Node {
   div {
-    // img(alt: "Avatar", class: "my-24 w-[315px] h-200px mx-auto", src: "/static/images/avatar.png")
-
     div(class: "my-24 uppercase font-avenir text-[40px] leading-[1.25] font-thin text-center [&>h1>strong]:font-bold") {
       Node.raw(body)
     }
@@ -37,7 +35,7 @@ func renderHome(body: String) -> Node {
 
 func renderNonHome(body: String) -> Node {
   article {
-    div(class: "prose") {
+    div(class: "font-avenir") {
       Node.raw(body)
     }
   }

content/index.md

@@ -1,3 +1,7 @@
 ---
 section: home
 ---
+
+# Home
+
+## Welcome to our internal documentation site

content/static/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

content/static/img/calendar.svg

@@ -0,0 +1,27 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier">
+
+<path d="M716 190.9v-67.8h-44v67.8H352v-67.8h-44v67.8H92v710h840v-710H716z m-580 44h172v69.2h44v-69.2h320v69.2h44v-69.2h172v151.3H136V234.9z m752 622H136V402.2h752v454.7z" fill="#93A2B8"/>
+
+<path d="M319 565.7m-33 0a33 33 0 1 0 66 0 33 33 0 1 0-66 0Z" fill="#F5A97F"/>
+
+<path d="M510 565.7m-33 0a33 33 0 1 0 66 0 33 33 0 1 0-66 0Z" fill="#F5A97F"/>
+
+<path d="M701.1 565.7m-33 0a33 33 0 1 0 66 0 33 33 0 1 0-66 0Z" fill="#F5A97F"/>
+
+<path d="M319 693.4m-33 0a33 33 0 1 0 66 0 33 33 0 1 0-66 0Z" fill="#F5A97F"/>
+
+<path d="M510 693.4m-33 0a33 33 0 1 0 66 0 33 33 0 1 0-66 0Z" fill="#F5A97F"/>
+
+<path d="M701.1 693.4m-33 0a33 33 0 1 0 66 0 33 33 0 1 0-66 0Z" fill="#F5A97F"/>
+
+</g>
+
+</svg>

content/static/img/document.svg

@@ -0,0 +1,29 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier">
+
+<path d="M719.8 651.8m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#F5A97F"/>
+
+<path d="M512.1 64H172v896h680V385.6L512.1 64z m278.8 324.3h-280v-265l280 265zM808 916H216V108h278.6l0.2 0.2v296.2h312.9l0.2 0.2V916z" fill="#93A2B8"/>
+
+<path d="M280.5 530h325.9v16H280.5z" fill="#93A2B8"/>
+
+<path d="M639.5 530h90.2v16h-90.2z" fill="#F5A97F"/>
+
+<path d="M403.5 641.8h277v16h-277z" fill="#93A2B8"/>
+
+<path d="M280.6 641.8h91.2v16h-91.2z" fill="#F5A97F"/>
+
+<path d="M279.9 753.7h326.5v16H279.9z" fill="#93A2B8"/>
+
+<path d="M655.8 753.7h73.9v16h-73.9z" fill="#F5A97F"/>
+
+</g>
+
+</svg>

content/static/img/tag.svg

@@ -0,0 +1,11 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000" transform="rotate(0)">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.066"/>
+
+<g id="SVGRepo_iconCarrier"> <title>tag-2</title> <desc>Created with Sketch Beta.</desc> <defs> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-360.000000, -774.000000)" fill="#5c5c5c"> <path d="M390.097,789.321 C390.097,789.849 389.611,790.623 389.095,791.139 L378.823,801.378 L365.634,788.197 L375.89,777.974 C376.36,777.504 377.111,776.903 377.641,776.903 L389.139,776.903 C389.668,776.903 390.097,777.331 390.097,777.858 L390.097,789.321 L390.097,789.321 Z M375.89,804.304 C375.079,805.111 373.765,805.111 372.955,804.304 L362.684,794.063 C361.873,793.256 361.873,791.946 362.684,791.139 L364.166,789.66 L377.341,802.856 L375.89,804.304 L375.89,804.304 Z M390.097,774.993 L376.683,774.993 C375.624,774.993 375.431,775.455 374.422,776.511 L361.217,789.676 C359.596,791.291 359.596,793.911 361.217,795.526 L371.487,805.767 C373.108,807.382 375.735,807.382 377.356,805.767 L390.563,792.602 C391.412,791.754 392.014,791.332 392.014,790.276 L392.014,776.903 C392.014,775.849 391.155,774.993 390.097,774.993 L390.097,774.993 Z M383.959,786.019 C383.148,786.826 381.835,786.826 381.024,786.019 C380.214,785.211 380.214,783.901 381.024,783.093 C381.835,782.285 383.148,782.285 383.959,783.093 C384.77,783.901 384.77,785.211 383.959,786.019 L383.959,786.019 Z M379.558,781.63 C377.937,783.246 377.937,785.865 379.558,787.481 C381.178,789.097 383.806,789.097 385.427,787.481 C387.047,785.865 387.047,783.246 385.427,781.63 C383.806,780.015 381.178,780.015 379.558,781.63 L379.558,781.63 Z" id="tag-2" sketch:type="MSShapeGroup"> </path> </g> </g> </g>
+
+</svg>

content/static/input.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.cdnfonts.com/css/avenir");
 @import "tailwindcss";
 
 /*
@@ -18,6 +19,10 @@
   }
 }
 
+@theme {
+  --font-avenir: "Avenir", sans-serif;
+}
+
 :root {
   --accent: #a6e3a1;
   --background: rgb(34, 33, 41);
@@ -90,9 +95,12 @@
 nav a:hover {
   @apply border-b-2 border-orange-400;
 }
+nav a.active {
+  @apply border-b-2 border-orange-400;
+}
 
 body {
-  @apply bg-slate-900;
+  @apply bg-slate-900 font-avenir;
 }
 
 h1 {
@@ -120,6 +128,10 @@ article h2 {
   @apply border-b-2 border-slate-200;
 }
 
+article {
+  @apply font-avenir text-lg;
+}
+
 .container {
   @apply px-10;
 }
@@ -130,7 +142,3 @@ article h2 {
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 }
-
-nav a:active {
-  @apply border-yellow-300 text-white;
-}

content/static/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

justfile

@@ -1,3 +1,6 @@
+articles := "./content/articles"
+docker_image := "homelab/docs"
+docker_tag := "latest"
 shortdate := `date +%F`
 
 [private]
@@ -9,6 +12,13 @@ default:
 run:
   @swift run watch content Sources deploy
 
-[group('dev')]
 new-article name:
-  @echo {{shortdate}}-{{name}}.md
+  @touch {{articles}}/{{shortdate}}-{{name}}.md 
+  @echo {{articles}}/{{shortdate}}-{{name}}.md
+
+alias n := new-article
+
+[group('dev')]
+build:
+  @pnpm run css-build
+  @docker build --tag {{docker_image}}:{{docker_tag}} .