Fix the image styling (#30)

* fix: styling images appropriately

* feat: also adds linting

* chore: fix lint

* chore: improve the styling

.gitignore

@@ -11,3 +11,7 @@ hugo.linux
 
 # Temporary lock file while building
 /.hugo_build.lock
+
+/node_modules
+
+.DS_Store

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm exec lint-staged

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["prettier-plugin-go-template"],
+  "overrides": [
+    {
+      "files": ["*.html"],
+      "options": {
+        "parser": "go-template"
+      }
+    }
+  ]
+}

archetypes/default.md

@@ -3,7 +3,6 @@ title: '{{ replace .File.ContentBaseName "-" " " | title }}'
 date: { { .Date | time.Format "2006-01-02" } }
 author: Author Name
 summary: Summary
-categories: [""]
 tags: [""]
 draft: true
 cover:

assets/css/main.css

@@ -111,7 +111,7 @@ h3 {
   color: var(--primary-color);
 }
 
-body>header {
+body > header {
   font-family:
     Optician Sans,
     sans-serif;
@@ -149,7 +149,7 @@ div.tags {
       outline: 2px ridge var(--text-color);
       filter: none;
       border-radius: var(--large-border-radius);
-      box-shadow: 0 0 0 2pt var(--text-color);
+      box-shadow: 0 0 0 2px var(--text-color);
     }
 
     & li {
@@ -336,8 +336,9 @@ main {
 }
 
 /* footer */
-body>footer {
-  padding: 1rem 0rem;
+body > footer {
+  width: 100%;
+  padding: 1rem 0;
   margin-top: 1rem;
   border-top: 1px solid var(--text-color);
   font-family:
@@ -351,17 +352,21 @@ body>footer {
     text-align: center;
   }
 
-  & p:not(:last-child)::after {
-    padding: 0 calc(var(--letter-gap) / 2);
-    content: "·";
+  & div {
+    max-width: 75ch;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: calc(var(--letter-gap) / 2);
   }
 }
 
 div.content {
   white-space: break-spaces;
   word-break: break-word;
 
-  & * {
+  & p {
     margin: var(--small-gap) 0rem;
   }
 
@@ -370,15 +375,28 @@ div.content {
   }
 
   & pre:has(code) {
+    max-width: 100%;
     border-radius: calc(var(--normal-border-radius) * 2);
     padding: calc(var(--small-gap)) calc(var(--small-gap) / 2);
-    box-shadow: 0px 0px 2pt var(--text-color);
+    box-shadow: 0px 0px 2px var(--text-color);
     overflow-x: scroll;
   }
 
   & code {
     font-family: "Monaspace Radon";
   }
+
+  & img {
+    max-width: 100%;
+    max-height: 90dvh;
+    object-fit: contain;
+    border-radius: var(--normal-border-radius);
+    box-shadow: 0 0 0 2px var(--text-color);
+
+    &:hover {
+      border-radius: 0;
+    }
+  }
 }
 
 @font-face {

assets/js/main.js

@@ -1 +1 @@
-console.log('This site was generated by Hugo.');
+console.log("This site was generated by Hugo.");

content/posts/test-post/index.md

@@ -0,0 +1,32 @@
+---
+title: Test Post
+date: 1980-01-02
+author: Test Author
+summary: Test Summary
+tags: ["test", "lorem"]
+draft: true
+cover:
+  image: test.jpg
+  alt: test
+  caption: test caption
+  relative: false
+  hidden: true
+audio:
+  src: audio.mp3
+  caption: caption
+  hidden: true
+---
+
+Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
+
+![Test page](./testing.jpg)
+
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.
+
+```py
+# Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat. Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
+
+print("Hello world")
+```
+
+Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.

layouts/_default/baseof.html

@@ -1,14 +1,15 @@
 <!doctype html>
-<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
-
-<head>
-  {{ partial "head.html" . }}
-</head>
-
-<body>
-  <header>{{ partial "header.html" . }}</header>
-  <main>{{ block "main" . }}{{ end }}</main>
-  <footer>{{ partial "footer.html" . }}</footer>
-</body>
+<html
+  lang="{{ site.Language.LanguageCode }}"
+  dir="{{ or site.Language.LanguageDirection `ltr` }}"
+>
+  <head>
+    {{ partial "head.html" . }}
+  </head>
 
+  <body>
+    <header>{{ partial "header.html" . }}</header>
+    <main>{{ block "main" . }}{{ end }}</main>
+    <footer>{{ partial "footer.html" . }}</footer>
+  </body>
 </html>

layouts/_default/home.html

@@ -1,22 +1,23 @@
-{{ define "main" }} {{ with .GetPage "About" }}
-<h1 hidden>{{ .Page.Title }}</h1>
-<section class="about">
-  <header>
-    <a href="{{ .RelPermalink }}">
-      <h2>About</h2>
-    </a>
-  </header>
-  <p>{{ truncate 128 .Content }}</p>
-  <footer>
-    <a href="{{ .RelPermalink }}">Read more...</a>
-  </footer>
-</section>
-{{ end }}
-<section class="posts">
-  <header>
-    <h2>Posts</h2>
-  </header>
-  {{ partial "posts-list.html" . }}
-  <footer />
-</section>
+{{ define "main" }}
+  {{ with .GetPage "About" }}
+    <h1 hidden>{{ .Page.Title }}</h1>
+    <section class="about">
+      <header>
+        <a href="{{ .RelPermalink }}">
+          <h2>About</h2>
+        </a>
+      </header>
+      <p>{{ truncate 128 .Content }}</p>
+      <footer>
+        <a href="{{ .RelPermalink }}">Read more...</a>
+      </footer>
+    </section>
+  {{ end }}
+  <section class="posts">
+    <header>
+      <h2>Posts</h2>
+    </header>
+    {{ partial "posts-list.html" . }}
+    <footer />
+  </section>
 {{ end }}

layouts/_default/list.html

@@ -1,6 +1,7 @@
 {{ define "main" }}
-<header>
-  <h2>{{ .Title }}</h2>
-</header>
+  <header>
+    <h2>{{ .Title }}</h2>
+  </header>
 
-{{ partial "posts-list.html" . }} {{ end }}
+  {{ partial "posts-list.html" . }}
+{{ end }}

layouts/_default/single.html

@@ -1,8 +1,8 @@
 {{ define "main" }}
-<article>
-  <header>
-    <h2>{{ .Title }}</h2>
-  </header>
-  <div class="content">{{ .Content }}</div>
-</article>
+  <article>
+    <header>
+      <h2>{{ .Title }}</h2>
+    </header>
+    <div class="content">{{ .Content }}</div>
+  </article>
 {{ end }}

layouts/_default/taxonomy.html

@@ -1,5 +1,7 @@
 {{ define "main" }}
-<h1>{{ .Title }}</h1>
-{{ .Content }} {{ range .Pages }}
-<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-{{ end }} {{ end }}
+  <h1>{{ .Title }}</h1>
+  {{ .Content }}
+  {{ range .Pages }}
+    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
+  {{ end }}
+{{ end }}

layouts/partials/footer.html

@@ -1,12 +1,20 @@
-<p>
-  Made with <span title="Love">💗</span> by
-  <a title="{{ .Site.Params.author.email }}" href="mailto:{{ .Site.Params.author.email }}">{{ .Site.Params.author.name
-    }}</a>
-</p>
-<p>
-  <span title="Powered">⚡</span> by
-  <a title="Hugo" href="https://gohugo.io">Hugo</a> in
-  <time datetime='{{ dateFormat "2006" now
-    }}'>{{ dateFormat "2006" now }}</time>
-</p>
-<p><a title="Back to top" href="#top">Back to Top</a></p>
+<div>
+  <p>
+    Made with <span title="Love">💗</span> by
+    <a
+      title="{{ .Site.Params.author.email }}"
+      href="mailto:{{ .Site.Params.author.email }}"
+      >{{ .Site.Params.author.name }}</a
+    >
+  </p>
+  <p>
+    <span title="Powered">⚡</span> by
+    <a title="Hugo" href="https://gohugo.io">Hugo</a> in
+    <time datetime="{{ dateFormat " 2006" now }}"
+      >{{ dateFormat "2006" now }}</time
+    >
+  </p>
+  <p>
+    <a title="Back to top" href="#top">Back to Top</a>
+  </p>
+</div>

layouts/partials/head.html

@@ -1,5 +1,11 @@
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width">
-<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
+<title>
+  {{ if .IsHome }}
+    {{ site.Title }}
+  {{ else }}
+    {{ printf "%s | %s" .Title site.Title }}
+  {{ end }}
+</title>
 {{ partialCached "head/css.html" . }}
 {{ partialCached "head/js.html" . }}

layouts/partials/head/css.html

@@ -1,9 +1,14 @@
 {{- with resources.Get "css/main.css" }}
   {{- if eq hugo.Environment "development" }}
-    <link rel="stylesheet" href="{{ .RelPermalink }}">
+    <link rel="stylesheet" href="{{ .RelPermalink }}" />
   {{- else }}
     {{- with . | minify | fingerprint }}
-      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+      <link
+        rel="stylesheet"
+        href="{{ .RelPermalink }}"
+        integrity="{{ .Data.Integrity }}"
+        crossorigin="anonymous"
+      />
     {{- end }}
   {{- end }}
 {{- end }}

layouts/partials/head/js.html

@@ -6,7 +6,11 @@
   {{- else }}
     {{- $opts := dict "minify" true }}
     {{- with . | js.Build $opts | fingerprint }}
-      <script src="{{ .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous"></script>
+      <script
+        src="{{ .RelPermalink }}"
+        integrity="{{- .Data.Integrity }}"
+        crossorigin="anonymous"
+      ></script>
     {{- end }}
   {{- end }}
 {{- end }}

layouts/partials/posts-list.html

@@ -1,23 +1,31 @@
 {{ $pages := where site.RegularPages "Type" "posts" }}
 {{ range $pages.GroupByPublishDate "2006" }}
-<div class="posts-groupby">
-  <h3>{{ .Key }}</h3>
-  <ul>
-    {{ range .Pages }}
-    <li>
-      <a href="{{ .RelPermalink }}"><span title={{ .LinkTitle }} class="post-title">{{ if .Draft }}<em
-            title="Draft post">[D]&nbsp;</em>{{
-          end }}{{
-          .LinkTitle | truncate 128 }}</span>
-        <small class="post-metadata">
-          {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00"
-          }} {{ $dateHuman := .Date | time.Format "2 Jan" }}
-          <span title={{ .Date | time.Format "January 2, 2006" }}><time datetime="{{ $dateMachine }}">{{ $dateHuman
-              }}</time></span>
-          <span title="{{ .WordCount }} words">
-            {{ .ReadingTime }} min</span></small></a>
-    </li>
-    {{ end }}
-  </ul>
-</div>
+  <div class="posts-groupby">
+    <h3>{{ .Key }}</h3>
+    <ul>
+      {{ range .Pages }}
+        <li>
+          <a href="{{ .RelPermalink }}"
+            ><span title="{{ .LinkTitle }}" class="post-title"
+              >{{ if .Draft }}
+                <em title="Draft post">[D]&nbsp;</em>
+              {{ end }}{{ .LinkTitle | truncate 128 }}</span
+            >
+            <small class="post-metadata">
+              {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
+              {{ $dateHuman := .Date | time.Format "2 Jan" }}
+              <span title="{{ .Date | time.Format "January 2, 2006" }}"
+                ><time datetime="{{ $dateMachine }}"
+                  >{{ $dateHuman }}</time
+                ></span
+              >
+              <span title="{{ .WordCount }} words">
+                {{ .ReadingTime }} min</span
+              ></small
+            ></a
+          >
+        </li>
+      {{ end }}
+    </ul>
+  </div>
 {{ end }}