fix: css, codeblock rendering, author tag

anna-ssg · Mar 6, 2024 · 0b95923 · 0b95923
1 parent 052c74f
commit 0b95923
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 28 deletions.
diff --git a/cmd/ssg/main.go b/cmd/ssg/main.go
@@ -16,6 +16,7 @@ type LayoutConfig struct {
 	BaseURL     string   `yaml:"baseURL"`
 	SiteTitle   string   `yaml:"siteTitle"`
 	SiteScripts []string `yaml:"siteScripts"`
+	Author      string   `yaml:"author"`
 }
 
 type Frontmatter struct {

diff --git a/content/docs.md b/content/docs.md
@@ -5,6 +5,7 @@ scripts:
 description: "documentation for our ssg"
 ---
 
+
 ## Directory structure
 
 The ssg currently requires the following directory structure

diff --git a/content/index.md b/content/index.md
@@ -8,6 +8,16 @@ description: "homepage for our ssg"
 
 # Henlo!
 
+```text
+    ___
+   /   |  ____  ____  ____ _
+  / /| | / __ \/ __ \/ __ `/
+ / ___ |/ / / / / / / /_/ /
+/_/  |_/_/ /_/_/ /_/\__,_/
+
+A static site generator in go
+```
+
 This is the documentation for the SSG
 
 ![demo-image](/static/plane.jpg)
diff --git a/layout/config.yml b/layout/config.yml
@@ -5,4 +5,5 @@ navbar:
 baseURL: https://ssg-test-org.github.io
 siteTitle: ssg
 siteScripts:
-    - prism.js
+    # - prism.js
+author: Anna
diff --git a/layout/page.html b/layout/page.html
@@ -2,6 +2,11 @@
 {{ template "head" .}}
 
 <body>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
+
+    <!-- and it's easy to individually load additional languages -->
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/languages/go.min.js"></script>
+
     {{template "header" .}}
 
     <div class="body">
@@ -13,10 +18,16 @@
         data-slug="adityahegde" data-color="#FF5F5F" data-emoji="" data-font="Cookie" data-text="Buy me a coffee"
         data-outline-color="#000000" data-font-color="#ffffff" data-coffee-color="#FFDD00"></script> -->
 
+        <script>hljs.highlightAll();</script>
+        <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              // document.querySelectorAll('hljs').style.background = "#1e1e2d";
+            })
+        </script>
 </body>
 
 {{template "footer" .}}
 
 </html>
 
-{{ end}}
+{{ end}}
diff --git a/layout/partials/footer.html b/layout/partials/footer.html
@@ -1,5 +1,5 @@
 {{define "footer"}}
 <footer>
-  Rendered using a <a href="https://github.com/acmpesuecc/ssg">custom ssg</a>
+  Rendered using a <a href="https://github.com/acmpesuecc/ssg">anna</a> ❤️
 </footer>
 {{end}}
diff --git a/layout/partials/head.html b/layout/partials/head.html
@@ -9,7 +9,7 @@
     <link rel="preload stylesheet" href="/static/style.css">
     <link rel="stylesheet" href="/static/prism.css">
     <link rel="alternate" type="application/atom+xml" title="feed" href="/feed.atom">
-    
+
     {{range .Frontmatter.JSFiles}}
     <script src="/script/{{.}}" defer></script>
     {{end}}
@@ -21,5 +21,8 @@
     <meta property="og:description" content="{{ .Frontmatter.Description }}">
     <meta property="og:image" content="{{ .Frontmatter.PreviewImage }}">
 
+    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css"> -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/tokyo-night-dark.min.css">
+
 </head>
 {{end}}
diff --git a/layout/partials/header.html b/layout/partials/header.html
@@ -2,7 +2,11 @@
 <header>
   <nav>
     {{range .Layout.Navbar}}
-    <a href="/{{.}}.html">{{.}}</a>
+    {{ if eq . "index" }}
+    <a href="/">[{{ $.Layout.Author }}]</a>
+    {{else}}
+    <a href="/{{.}}.html">[{{.}}]</a>
+    {{end}}
     {{end}}
   </nav>
 </header>

diff --git a/static/style.css b/static/style.css
@@ -17,10 +17,9 @@
 body {
 
     font-family: custom-font, agave, monospace;
-    font-size: .9rem;
     line-height: 1.6;
 
-    background-color: #000000;
+    background-color: #11111a;
     color: #ffffff;
 
     display: flex;
@@ -42,22 +41,27 @@ footer {
     width: 100%;
     flex: 0;
 
+    font-size: 1.1rem;
     align-self: center;
     padding: 1rem 0;
 
     text-align: center;
 }
 
 nav {
-    font-size: 1.8rem;
-    
+    font-size: 1.4rem;
+
     margin: auto;
     margin-top: 1.2rem;
     margin-bottom: 1.2rem;
 
     display: flex;
-    justify-content: center;
-    gap: 2rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
+    & > a {
+        word-wrap: break-word;
+    }
 }
 
 a {
@@ -68,6 +72,15 @@ a {
     transition: color 150ms ease-in-out
 }
 
+/* Thank you, @kepano! */
+a:not(.plain):not(.tag):not(.internal-link):not(.footnote):not( .reversefootnote ):not(.post-card) {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='gray' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25' /%3E%3C/svg%3E%0A");
+    background-position: right 33%;
+    background-repeat: no-repeat;
+    background-size: 0.7em;
+    padding-right: 0.75em;
+}
+
 a:hover {
     /* color:#5990ac; */
     text-decoration: underline;
@@ -90,14 +103,14 @@ h1, h2, h3, h4, h5, h6 {
     color: #5990ac;
 }
 
-h1 { font-size: 3rem;}
-h2 { font-size: 2.5rem;}
-h3 { font-size: 2.0rem;}
-h4 {font-size: 1.8rem;}
+h1 { font-size: 2.5rem;}
+h2 { font-size: 2.2rem;}
+h3 { font-size: 1.85rem;}
+h4 {font-size: 1.7rem;}
 
 .body {
     flex: 1 0 auto;
-  
+
     & > a,
     & > ul > li > a,
     & > ol > li > a,
@@ -112,10 +125,10 @@ h4 {font-size: 1.8rem;}
         padding: 0;
     }
 
-    & > a, 
-    & > p, & > ul > li, 
-    & > ol > li,  
-    & > ul > li > a, 
+    & > a,
+    & > p, & > ul > li,
+    & > ol > li,
+    & > ul > li > a,
     & > ol > li > a {
         font-size: 1.3rem;
     }
@@ -145,7 +158,7 @@ img {
     flex-direction: column;
     /* align-items: center; */
     margin: auto;
-  
+
     & > a {
         background-color: #41414141;
         border-radius: 5px;
@@ -211,6 +224,19 @@ img {
     min-width: 100px;
     padding: 1rem;
 } */
+
+pre code {
+    font-family: agave, monospace;
+    background: white;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    border-radius: .5rem;
+}
+
+pre code.hljs {
+    background: #1e1e2d;
+}
+
 p > code,
 li > code,
 dd>code,
@@ -231,10 +257,9 @@ td>code {
 /* styling for viewports width < 600px */
 @media (max-width: 600px) {
     nav {
-        font-size: 1.5rem;
-        gap: 1.5rem;
+        font-size: 1.1rem;
     }
-    
+
     body {
         margin-inline: 5%;
     }
@@ -251,12 +276,16 @@ td>code {
     }
 
     .body {
-        & > a, 
-        & > p, & > ul > li, 
-        & > ol > li,  
-        & > ul > li > a, 
+        & > a,
+        & > p, & > ul > li,
+        & > ol > li,
+        & > ul > li > a,
         & > ol > li > a {
             font-size: 1.15rem;
         }
     }
+
+    .post-card > h3 {
+        font-size: 1.5rem;
+    }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ scripts: @@
     description: "documentation for our ssg"
     ---
     ## Directory structure
     The ssg currently requires the following directory structure
@@ Expand Down @@