feat: adds image and table of contents

shivan-s · Oct 27, 2024 · 98ed1d0 · 98ed1d0
1 parent bc0f3cd
commit 98ed1d0
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 16 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -44,15 +44,25 @@
   --large-border-radius: 4rem;
 }
 
+:target {
+  transition: all 0.3s 1s fade-in-out;
+  transform: rotate(-2deg);
+  max-width: fit-content;
+  margin: calc(var(--normal-gap) * 2) 0;
+  outline: 2px dotted var(--text-color);
+}
+
 html {
   scroll-padding: 1rem;
   scroll-behavior: smooth;
 }
 
 p,
+figure,
 small,
 em,
 strong,
+ol,
 ul,
 h1,
 h2,
@@ -74,13 +84,10 @@ small {
   line-height: normal;
 }
 
-* {
-  transition: all 0.3s ease-in-out;
-}
-
 a {
   color: var(--primary-color);
   text-decoration: underline dotted;
+  transition: all 0.3s ease-in-out;
 }
 
 a:hover {
@@ -103,12 +110,8 @@ h3 {
   font-family:
     Optician Sans,
     sans-serif;
-}
-
-h1,
-h2,
-h3 {
   color: var(--primary-color);
+  transition: all 0.3s ease-in-out;
 }
 
 body > header {
@@ -144,6 +147,7 @@ div.tags {
     display: flex;
     flex-wrap: wrap;
     gap: var(--small-gap);
+    transition: all 0.3s ease-in-out;
 
     & a:hover {
       outline: 2px ridge var(--text-color);
@@ -203,6 +207,7 @@ section.about {
   border: 2px solid var(--text-color);
   border-radius: var(--normal-border-radius);
   box-shadow: 0px 0px 0px 2pt var(--text-color);
+  transition: all 0.3s ease-in-out;
 
   &:hover {
     transform: rotate(0deg);
@@ -213,6 +218,7 @@ article {
   display: flex;
   flex-direction: column;
   gap: var(--small-gap);
+  transition: all 0.3s ease-in-out;
 
   & header {
     & h1 {
@@ -371,11 +377,18 @@ div.content {
   word-break: break-word;
 
   & p,
+  ul,
+  ol,
   div.highlight,
   img {
     margin: var(--normal-gap) 0rem;
   }
 
+  & p ~ ul,
+  p ~ ol {
+    margin-bottom: none;
+  }
+
   & ul ol {
     list-style-position: inline;
   }
@@ -385,7 +398,7 @@ div.content {
     border-radius: calc(var(--normal-border-radius) * 2);
     padding: calc(var(--small-gap)) calc(var(--small-gap) / 2);
     box-shadow: 0px 0px 2px var(--text-color);
-    overflow-x: scroll;
+    overflow-x: auto;
   }
 
   & code {
@@ -399,11 +412,38 @@ div.content {
     object-fit: contain;
     border-radius: var(--normal-border-radius);
     box-shadow: 0 0 0 2px var(--text-color);
+    transition: all 0.3s ease-in-out;
+
+    &:hover {
+      border-radius: 0;
+    }
+  }
+}
+
+figure:has(img) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--small-gap);
+  margin: var(--normal-gap) 0rem;
+
+  & img {
+    max-width: 100%;
+    object-fit: contain;
+    border-radius: var(--normal-border-radius);
+    box-shadow: 0 0 0 2px var(--text-color);
+    transition: all 0.3s ease-in-out;
 
     &:hover {
       border-radius: 0;
     }
   }
+
+  & figcaption {
+    font-size: var(--small-size);
+    color: var(--support-color);
+  }
 }
 
 @font-face {

diff --git a/content/posts/test-post/index.md b/content/posts/test-post/index.md
@@ -6,11 +6,11 @@ summary: Test Summary
 tags: ["test", "lorem"]
 draft: true
 cover:
-  image: test.jpg
+  image: testing.jpg
   alt: test
   caption: test caption
   relative: false
-  hidden: true
+  hidden: false
 audio:
   src: audio.mp3
   caption: caption
@@ -21,12 +21,27 @@ Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint
 
 ![Test page](./testing.jpg)
 
+## Testing
+
+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.
+
+## Testing again
+
 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.
 
+## World
+
 ```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.
+### Hello
+
+Lorem `code`
+
+```ts
+let name: string;
+console.log("Hello World");
+```
diff --git a/layouts/404.html b/layouts/404.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+  <div class="not-found">404</div>
+{{ end }}
diff --git a/layouts/partials/image.html b/layouts/partials/image.html
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -5,16 +5,38 @@ <h1>{{ .Title }}</h1>
       <small class="post-metadata">
         {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
         {{ $dateHuman := .Date | time.Format "Jan 2, 2006" }}
-        <span><time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time></span>
+        <span
+          title="Last modified: {{ .Lastmod | time.Format " Jan 2, 2006 15:04 UTC" }}"
+          ><time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time></span
+        >
         <span title="{{ .WordCount }} words">{{ .ReadingTime }} min</span>
         <span>{{ .Params.author }}</span>
         <span id="suggest"
           ><a href="{{ .Params.githubRepo }}">Suggest Changes</a></span
         >
       </small>
+      {{ if not (.Param "cover.hidden") }}
+        {{ $src := (.Param "cover.image") | default "" }}
+        {{ $alt := (.Param "cover.alt") | default "" }}
+        {{ $caption := (.Param "cover.caption") | default false }}
+        <figure>
+          <img src="{{ $src }}" alt="{{ $alt }}" />
+          {{ if $caption }}
+            <figcaption>{{ $caption | markdownify }}</figcaption>
+          {{ end }}
+        </figure>
+      {{ end }}
     </header>
+    <aside>
+      <details>
+        <summary>Table of Contents</summary>
+        {{ .TableOfContents }}
+      </details>
+    </aside>
     <div class="content">{{ .Content }}</div>
-    {{ partial "tags.html" (dict "taxonomy" "tags" "page" .) }}
+    <aside>
+      {{ partial "tags.html" (dict "taxonomy" "tags" "page" .) }}
+    </aside>
     <footer>
       {{ if .Prev }}
         {{ with .Prev }}
@@ -28,6 +50,7 @@ <h1>{{ .Title }}</h1>
           <a rel="next" href="{{ .RelPermalink }}">{{ .Title }} 》 </a>
         {{ end }}
       {{ else }}
+        <span />
       {{ end }}
     </footer>
   </article>

diff --git a/layouts/robots.txt b/layouts/robots.txt
@@ -0,0 +1,7 @@
+User-agent: *
+{{- if hugo.IsProduction | or (eq site.Params.env "production") }}
+Disallow:
+{{- else }}
+Disallow: /
+{{- end }}
+Sitemap: {{ "sitemap.xml" | absURL }}
diff --git a/layouts/shortcodes/audio.html b/layouts/shortcodes/audio.html