feat: add basic working theme

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>
2026-01-09 21:18:32 +05:30 · 2025-01-01 14:40:16 +05:30
parent faf83964f6
commit e5f7f9e53e
24 changed files with 3827 additions and 25 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,25 +1,6 @@
-# If you prefer the allow list template instead of the deny list, see community template:
-# https://github.com/github/gitignore/blob/main/community/Golang/Go.AllowList.gitignore
-#
-# Binaries for programs and plugins
-*.exe
-*.exe~
-*.dll
-*.so
-*.dylib
+# Ignore build directories
+public

-# Test binary, built with `go test -c`
-*.test
+# Ignore dependencies
+node_modules

-# Output of the go coverage tool, specifically when used with LiteIDE
-*.out
-
-# Dependency directories (remove the comment below to include it)
-# vendor/
-
-# Go workspace file
-go.work
-go.work.sum
-
-# env file
-.env
--- a/.hugo_build.lock
+++ b/.hugo_build.lock
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,15 @@
+{
+    "plugins": [
+        "prettier-plugin-go-template"
+    ],
+    "overrides": [
+        {
+            "files": [
+                "*.html"
+            ],
+            "options": {
+                "parser": "go-template"
+            }
+        }
+    ]
+}
--- a/README.md
+++ b/README.md
@@ -1,2 +1,7 @@
-# the-magazine-syntax
-A hugo theme combining magazine and terminal
+# Box Box | A Hugo theme by Avinal
+
+## Features
+
+## Installation
+
+## Configuration
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -0,0 +1,5 @@
+++
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+date = {{ .Date }}
+draft = true
+++
--- a/assets/css/main.css
+++ b/assets/css/main.css
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -0,0 +1 @@
+console.log('This site was generated by Hugo.');
--- a/layouts/_default/_mermaid/render-codeblock-mermaid.html
+++ b/layouts/_default/_mermaid/render-codeblock-mermaid.html
@@ -0,0 +1,4 @@
+<pre class="mermaid">
+  {{- .Inner | htmlEscape | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html
+  lang="{{ site.Language.LanguageCode }}"
+  dir="{{ or site.Language.LanguageDirection `ltr` }}"
+>
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+
+  <body class="container mx-auto bg-gray-50">
+    <div
+      class="absolute mx-auto inset-0 bg-[url(https://play.tailwindcss.com/img/grid.svg)] bg-top [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"
+    ></div>
+    <div
+      class="relative flex min-h-screen flex-col justify-center overflow-hidden py-8 "
+    >
+      <div
+        class="relative w-full bg-white px-4 shadow-xl shadow-slate-700/10 ring-1 ring-gray-900/5 md:mx-auto md:max-w-3xl lg:max-w-4xl pb-4"
+      >
+        <header class="mb-6">
+          {{ partial "header.html" . }}
+        </header>
+        <main>
+          {{ block "main" . }}{{ end }}
+        </main>
+        <footer>
+          {{ partial "footer.html" . }}
+        </footer>
+      </div>
+    </div>
+  </body>
+</html>
--- a/layouts/_default/home.html
+++ b/layouts/_default/home.html
@@ -0,0 +1,9 @@
+{{ define "main" }}
+  <div
+    class="relative overflow-auto shadow-md shadow-gray-600 ring-1 ring-gray-800 my-4"
+  >
+    <div class="prose prose-neutral lg:prose-lg md:mx-auto p-4">
+      {{ .Content }}
+    </div>
+  </div>
+{{ end }}
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -0,0 +1,105 @@
+{{ define "main" }}
+  <section>
+    <div class="max-w-6xl mx-auto space-y-4 sm:space-y-5">
+      {{ range first 1 .Pages }}
+        <div
+          class="block max-x-sm gap-4 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12 ring-1 ring-black"
+        >
+          <a class="lg:col-span-7" href="{{ .RelPermalink }}">
+            <img
+              class="object-cover w-full h-64 sm:h-96 lg:col-span-7 grayscale group-hover:grayscale-0"
+              src="{{ .Params.Image | absURL }}"
+              alt="{{ .LinkTitle }}"
+            />
+          </a>
+          <div class="p-4 space-y-2 lg:col-span-5">
+            <a href="{{ .RelPermalink }}">
+              <h3 class="text-xl font-medium sm:text-3xl ">
+                {{ .LinkTitle }}
+              </h3>
+              <div class="inset-x-0 space-y-1 py-2">
+                <hr class="border-t-1 border-black" />
+                <hr class="border-t-1 border-black" />
+              </div>
+              {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
+              {{ $dateHuman := .Date | time.Format ":date_long" }}
+              <time datetime="{{ $dateMachine }}" class="text-gray-400"
+                >{{ $dateHuman }}</time
+              >
+              {{ if gt .ReadingTime 1 }}
+                {{ .Scratch.Set "timeUnit" "mins" }}
+              {{ else }}
+                {{ .Scratch.Set "timeUnit" "min" }}
+              {{ end }}
+
+
+              <span class="text-gray-400">
+                | ~{{ .ReadingTime }} {{ .Scratch.Get "timeUnit" }}</span
+              >
+              <p class="break-all">{{ .Summary | truncate 200 }}</p>
+            </a>
+
+            <!-- <span class=""> -->
+            <a
+              class="flex justify-center border border-black text-center text-white bg-black hover:text-black hover:bg-white hover:font-bold capitalize"
+              href="/posts/category/{{ .Params.Category }}"
+            >
+              {{ .Params.Category }}</a
+            >
+            <!-- </span> -->
+          </div>
+        </div>
+      {{ end }}
+      <div
+        class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"
+      >
+        {{ range after 1 .Pages }}
+          <div
+            class="max-w-sm mx-auto group hover:no-underline focus:no-underline ring-1 ring-black "
+          >
+            <a href="{{ .RelPermalink }}">
+              <img
+                class="object-cover w-full h-44 grayscale group-hover:grayscale-0"
+                src="{{ .Params.Image | absURL }}"
+                alt="{{ .LinkTitle }}"
+              />
+            </a>
+            <div class="p-4 space-y-2">
+              <a href="{{ .RelPermalink }}">
+                <h3 class="text-2xl font-medium ">{{ .LinkTitle }}</h3>
+                <div class="inset-x-0 space-y-1 py-2">
+                  <hr class="border-t-1 border-black" />
+                  <hr class="border-t-1 border-black" />
+                </div>
+                {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
+                {{ $dateHuman := .Date | time.Format ":date_long" }}
+                <time datetime="{{ $dateMachine }}" class="text-gray-400"
+                  >{{ $dateHuman }}</time
+                >
+                {{ if gt .ReadingTime 1 }}
+                  {{ .Scratch.Set "timeUnit" "mins" }}
+                {{ else }}
+                  {{ .Scratch.Set "timeUnit" "min" }}
+                {{ end }}
+
+
+                <span class="text-gray-400">
+                  | ~{{ .ReadingTime }} {{ .Scratch.Get "timeUnit" }}</span
+                >
+                <p class="break-all">{{ .Summary | truncate 147 }}</p>
+              </a>
+              <!-- <span class="flex colums-auto flex-col justify-between"> -->
+              <a
+                class="flex items-center justify-center border border-black text-center hover:text-black hover:bg-white text-white bg-black capitalize hover:font-bold"
+                href="/posts/category/{{ .Params.Category }}"
+              >
+                {{ .Params.Category }}</a
+              >
+              <!-- </span> -->
+            </div>
+          </div>
+        {{ end }}
+      </div>
+    </div>
+  </section>
+{{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -0,0 +1,65 @@
+{{ define "main" }}
+  <div
+    class="relative overflow-auto px-4 shadow-md shadow-gray-600 ring-1 ring-gray-800 mt-1"
+  >
+    <div class="grid font-mono md:grid-cols-12 md:space-x-10">
+      <div class="hidden md:block md:col-span-1"></div>
+      <div class="md:col-span-11">
+        <h1
+          class="text-3xl font-medium uppercase md:py-4 md:text-4xl lg:text-5xl"
+        >
+          {{ .Title }}
+        </h1>
+      </div>
+    </div>
+
+    <div class="inset-x-2 -mx-4 space-y-1">
+      <hr class="border-t-2 border-black" />
+      <hr class="border-t-2 border-black" />
+    </div>
+    <div class="md:grid md:grid-cols-12 grid-col-11 md:space-x-10">
+      <div
+        class="hidden font-mono md:block md:col-span-1 mt-6 cursor-default [writing-mode:vertical-rl]"
+      >
+        <!-- <h2 class="font-light uppercase md:text-2xl">The Secondary header goes here</h2> -->
+        <div class=" font-medium">
+          {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
+          {{ $dateHuman := .Date | time.Format ":date_long" }}
+          <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
+          <span>| {{ .WordCount }} words</span>
+
+          {{ if gt .ReadingTime 1 }}
+            {{ .Scratch.Set "timeUnit" "mins" }}
+          {{ else }}
+            {{ .Scratch.Set "timeUnit" "min" }}
+          {{ end }}
+
+
+          <span class="border border-black"
+            >| ~{{ .ReadingTime }} {{ .Scratch.Get "timeUnit" }}</span
+          >
+        </div>
+      </div>
+
+      <div class="prose prose-neutral lg:prose-lg md:col-span-11 md:mx-auto">
+        <div
+          class="invisible absolute inset-y-0 border-l-2 border-dashed border-black md:visible md:-ml-6"
+        ></div>
+
+        {{ .Content }}
+
+      </div>
+    </div>
+    <div class="inset-x-0 mb-10 -m-4">
+      <hr class="border-b-1 border-black" />
+    </div>
+  </div>
+  <!-- {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} -->
+  {{ if .Store.Get "hasMermaid" }}
+    <script type="module">
+      import mermaid from "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs";
+      mermaid.initialize({ startOnLoad: true });
+    </script>
+  {{ end }}
+
+{{ end }}
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -0,0 +1,9 @@
+<div
+  class="relative overflow-auto px-4 ring-1 ring-gray-800 mt-5 text-center text-light text-gray-500"
+>
+  <span
+    ><a href="https://github.com/avinal/box-box">Box Box</a> | A
+    <a href="https://gohugo.io/">Hugo</a> theme by
+    <a href="https://avinal.space">Avinal</a>
+  </span>
+</div>
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -0,0 +1,12 @@
+<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" . }}
+<!-- <script src="https://cdn.tailwindcss.com?plugins=typography"></script> -->
--- a/layouts/partials/head/css.html
+++ b/layouts/partials/head/css.html
@@ -0,0 +1,9 @@
+{{- with resources.Get "css/main.css" }}
+  {{- if eq hugo.Environment "development" }}
+    <link rel="stylesheet" href="{{ .RelPermalink }}">
+  {{- else }}
+    {{- with . | minify | fingerprint }}
+      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+    {{- end }}
+  {{- end }}
+{{- end }}
--- a/layouts/partials/head/js.html
+++ b/layouts/partials/head/js.html
@@ -0,0 +1,12 @@
+{{- with resources.Get "js/main.js" }}
+  {{- if eq hugo.Environment "development" }}
+    {{- with . | js.Build }}
+      <script src="{{ .RelPermalink }}"></script>
+    {{- end }}
+  {{- else }}
+    {{- $opts := dict "minify" true }}
+    {{- with . | js.Build $opts | fingerprint }}
+      <script src="{{ .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous"></script>
+    {{- end }}
+  {{- end }}
+{{- end }}
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -0,0 +1,4 @@
+<div class="py-4">
+  <h1 class="text-xl font-bold font-mono bg-gradient-to-r to-black from-white">{{ site.Title }}</h1>
+</div>
+{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -0,0 +1,61 @@
+{{- /*
+  Renders a menu for the given menu ID.
+
+  @context {page} page The current page.
+  @context {string} menuID The menu ID.
+
+  @example: {{ partial "menu.html" (dict "menuID" "main" "page" .)
+}}
+*/}}
+{{- $page := .page }}
+{{- $menuID := .menuID }}
+
+{{- with index site.Menus $menuID }}
+  <nav class="flex columns-auto flex-col justify-between">
+    <ul class="grid gap-4 sm:auto-cols-auto sm:grid-flow-col">
+      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+    </ul>
+  </nav>
+{{- end }}
+
+{{- define "partials/inline/menu/walk.html" }}
+  {{- $page := .page }}
+  {{- range .menuEntries }}
+    {{- $attrs := dict "href" .URL }}
+    {{- $classes := "min-width flex items-center justify-center border border-black text-center shadow-md shadow-gray-600" }}
+
+    {{- if $page.IsMenuCurrent .Menu . }}
+      {{- $classes = (printf "%s %s" $classes "bg-black text-white active") }}
+      {{- $attrs = merge $attrs (dict "aria-current" "page") }}
+    {{- else }}
+      {{- $classes = (printf "%s %s" $classes "bg-white text-black ancestor hover:text-white hover:bg-black") }}
+      {{- $attrs = merge $attrs (dict "aria-current" "true") }}
+    {{- end }}
+
+    {{- $attrs = merge $attrs (dict "class" $classes) }}
+    {{- $name := .Name }}
+    {{- with .Identifier }}
+      {{- with T . }}
+        {{- $name = . }}
+      {{- end }}
+    {{- end }}
+
+
+    <li class="flex-1">
+      <a
+        {{- range $k, $v :=$attrs }}
+          {{- with $v }}
+            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
+          {{- end }}
+        {{- end -}}
+      >
+        {{ $name }}
+      </a>
+      {{- with .Children }}
+        <ul>
+          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+        </ul>
+      {{- end }}
+    </li>
+  {{- end }}
+{{- end }}
--- a/layouts/partials/terms.html
+++ b/layouts/partials/terms.html
@@ -0,0 +1,23 @@
+{{- /*
+For a given taxonomy, renders a list of terms assigned to the page.
+
+@context {page} page The current page.
+@context {string} taxonomy The taxonomy.
+
+@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
+*/}}
+
+{{- $page := .page }}
+{{- $taxonomy := .taxonomy }}
+
+{{- with $page.GetTerms $taxonomy }}
+  {{- $label := (index . 0).Parent.LinkTitle }}
+  <div>
+    <div>{{ $label }}:</div>
+    <ul>
+      {{- range . }}
+        <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+      {{- end }}
+    </ul>
+  </div>
+{{- end }}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,8 @@
+{
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
+    "prettier": "^3.4.2",
+    "prettier-plugin-go-template": "^0.0.15",
+    "tailwindcss": "^3.4.17"
+  }
+}
--- a/static/input.css
+++ b/static/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./layouts/**/*.html"],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+}
+
--- a/theme.toml
+++ b/theme.toml
@@ -0,0 +1,20 @@
+name = 'Box Box'
+license = 'MIT'
+licenselink = 'https://github.com/avinal/box-box/LICENSE'
+description = 'Box Box | A Hugo theme by Avinal'
+
+# The home page of the theme, where the source can be found
+homepage = 'https://github.com/avinal/box-box'
+
+# If you have a running demo of the theme
+demosite = 'https://avinal.space'
+
+# Taxonomy terms
+tags = ['blog',  'responsive', 'website','portfolio','magazine', 'light', 'minimal', 'clean', 'box', 'simple']
+features = ['responsive', 'single-column', 'blog', 'tailwind']
+
+# If the theme has a single author
+[author]
+  name = 'Avinal Kumar'
+  homepage = 'https://avinal.space'
+
				`@@ -0,0 +1 @@`
				`console.log('This site was generated by Hugo.');`