mirror of
https://github.com/avinal/box-box.git
synced 2026-01-10 21:48:32 +05:30
feat: add basic working theme
Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>
This commit is contained in:
4
layouts/_default/_mermaid/render-codeblock-mermaid.html
Normal file
4
layouts/_default/_mermaid/render-codeblock-mermaid.html
Normal file
@@ -0,0 +1,4 @@
|
||||
<pre class="mermaid">
|
||||
{{- .Inner | htmlEscape | safeHTML }}
|
||||
</pre>
|
||||
{{ .Page.Store.Set "hasMermaid" true }}
|
||||
32
layouts/_default/baseof.html
Normal file
32
layouts/_default/baseof.html
Normal file
@@ -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>
|
||||
9
layouts/_default/home.html
Normal file
9
layouts/_default/home.html
Normal file
@@ -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 }}
|
||||
105
layouts/_default/list.html
Normal file
105
layouts/_default/list.html
Normal file
@@ -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 }}
|
||||
65
layouts/_default/single.html
Normal file
65
layouts/_default/single.html
Normal file
@@ -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 }}
|
||||
9
layouts/partials/footer.html
Normal file
9
layouts/partials/footer.html
Normal file
@@ -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>
|
||||
12
layouts/partials/head.html
Normal file
12
layouts/partials/head.html
Normal file
@@ -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> -->
|
||||
9
layouts/partials/head/css.html
Normal file
9
layouts/partials/head/css.html
Normal file
@@ -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 }}
|
||||
12
layouts/partials/head/js.html
Normal file
12
layouts/partials/head/js.html
Normal file
@@ -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 }}
|
||||
4
layouts/partials/header.html
Normal file
4
layouts/partials/header.html
Normal file
@@ -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" .) }}
|
||||
61
layouts/partials/menu.html
Normal file
61
layouts/partials/menu.html
Normal file
@@ -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 }}
|
||||
23
layouts/partials/terms.html
Normal file
23
layouts/partials/terms.html
Normal file
@@ -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 }}
|
||||
Reference in New Issue
Block a user