Add styles and g analytics (#5)

NickFoden · Jan 4, 2025 · 0d7c9fe · 0d7c9fe
1 parent d5408ca
commit 0d7c9fe
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 15 deletions.
diff --git a/internal/content/posts.go b/internal/content/posts.go
@@ -8,9 +8,10 @@ import (
 
 var posts = []models.Post{
 	{Title: "New Web Log Alert",
-		Content:   "",
-		CreatedAt: time.Date(2025, 1, 3, 0, 0, 0, 0, time.UTC),
-		Slug:      "1"},
+		Content:        "",
+		ContentPreview: "A \"simple\" web log built with Go and html + htmx.",
+		CreatedAt:      time.Date(2025, 1, 3, 0, 0, 0, 0, time.UTC),
+		Slug:           "1"},
 }
 
 func GetAllPosts() []models.Post {

diff --git a/internal/content/posts/1.html b/internal/content/posts/1.html
@@ -1,3 +1,14 @@
-<p>Messing around with go and HTMX and html templates to make a simple blog in a new way.</p>
+<p class="font_roboto-condensed post_p">Messing around with go and HTMX and html templates to make a simple blog in a
+    way that
+    is new to me. I've gone through a few iterations of blog approaches/sites and maybe this is the one that will stick
+    ¯\_(ツ)_/¯
+</p>
+<p class="font_roboto-condensed post_p">So far this post / content files are html file(s), I know markdown seems like a
+    more popular option for dev blogs etc, but I kinda like the idea of writing vanilla html files for content here,
+    especially when llm assisted for styling or formatting.</p>
 
-<p>More styles and content to come as I firm up the approach here. </p>
+<p class="font_roboto-condensed post_p">I'm betting on leveraging more classic web such as html css files etc, and
+    that we will continue to see less tooling/abstractions for dev experience since devs are now llm assisted. The
+    fastest sites out there are just cached css and html right, why jump through all the hoops when you are now able to
+    be assisted for the creation of the styles and can generate the styles instantly and then spot check. This post
+    written out and css file generated/styled by hand quickly as you can tell, but I mean for the future !</p>
diff --git a/internal/models/post.go b/internal/models/post.go
@@ -3,8 +3,9 @@ package models
 import "time"
 
 type Post struct {
-	Title     string
-	Content   string
-	Slug      string
-	CreatedAt time.Time
+	Title          string
+	Content        string
+	ContentPreview string
+	Slug           string
+	CreatedAt      time.Time
 }
diff --git a/internal/templates/base.html b/internal/templates/base.html
@@ -3,17 +3,36 @@
   <head>
     <title>{{ .Title }}</title>
     <link rel="stylesheet" href="/static/css/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Sixtyfour&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://unpkg.com/[email protected]"></script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-ETK9JGW8YR"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-ETK9JGW8YR");
+    </script>
   </head>
   <body>
     <header>
       <a href="/">
-        <h1>Nick Foden</h1>
+        <h1 class="font_sixtyfour">Web Log</h1>
       </a>
     </header>
     <main>{{block "content" .}}{{end}}</main>
     <footer>
-      <p>
+      <p class="font_sixtyfour">
         &copy;
         <span
           hx-get="/get_current_year"

diff --git a/internal/templates/index.html b/internal/templates/index.html
@@ -1,7 +1,19 @@
 {{template "base.html" .}} {{ define "content" }}
-<ul>
+<ul class="index_posts_ul">
   {{ range .Posts }}
-  <li><a href="/posts/{{ .Slug }}">{{ .Title }}</a></li>
+  <li>
+    <div class="row">
+      <a class="font_roboto-condensed" href="/posts/{{ .Slug }}"
+        >{{ .Title }}</a
+      >
+      <p class="font_roboto-condensed index_post_date">
+        ({{.CreatedAt.Format "2006-01-02"}})
+      </p>
+    </div>
+    <p class="font_roboto-condensed index_post_content_preview">
+      {{ .ContentPreview }}
+    </p>
+  </li>
   {{ end }}
 </ul>
 {{ end }}
diff --git a/internal/templates/post.html b/internal/templates/post.html
@@ -1,8 +1,8 @@
 {{ template "base.html" . }} {{define "content"}}
 <div class="post">
   <article>
-    <h2>{{.Post.Title}}</h2>
-    <p>{{.Post.CreatedAt.Format "2006-01-02"}}</p>
+    <h2 class="font_roboto-condensed">{{.Post.Title}}</h2>
+    <p class="font_roboto-condensed">{{.Post.CreatedAt.Format "2006-01-02"}}</p>
     {{.Content}}
   </article>
 </div>

diff --git a/static/css/style.css b/static/css/style.css
@@ -4,6 +4,7 @@ a {
 
 article {
   margin: 24px;
+  max-width: 768px;
 }
 
 body {
@@ -15,10 +16,70 @@ footer {
   text-align: center;
 }
 
+footer p {
+  font-size: 12px;
+}
+
+header {
+  margin: 0 auto;
+  max-width: 1024px;
+}
+
 h1 {
   font-size: 18px;
 }
 
 main {
+  margin: 0 auto;
+  max-width: 1024px;
   min-height: 80vh;
+  overflow-x: hidden;
+}
+
+.font_sixtyfour {
+  font-family: "Sixtyfour", serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-variation-settings: "BLED" 0, "SCAN" 0;
+  font-weight: 400;
+}
+
+.font_roboto-condensed {
+  font-family: "Roboto Condensed", serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.index_post_content_preview {
+  font-size: 14px;
+  margin: 8px 0 0 0;
+}
+
+.index_post_date {
+  font-size: 14px;
+  margin: 0 0 0 8px;
+}
+
+.index_posts_ul {
+  margin: 24px 0 0 0;
+}
+
+.margin_zero {
+  margin: 0 0 0 0;
+}
+
+.post {
+  margin: 48px 0 0 0;
+}
+
+.post_p {
+  font-size: 20px;
+  margin: 8px 0 0 0;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
 }