Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
HTML
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889{{ define "title" }}The Tangled Blog{{ end }}
{{ define "extrameta" }}<meta name="description" content="The Tangled Blog" /><link rel="alternate" type="application/atom+xml" title="Atom" href="/feed.xml" />{{ end }}
<!-- overrides the default slate bg -->{{ define "bodyClasses" }}!bg-white dark:!bg-gray-900{{ end }}
{{ define "topbarLayout" }} {{ template "blog/fragments/topbar" . }}{{ end }}
{{ define "content" }}<div class="max-w-screen-lg mx-auto w-full px-4 py-10">
<header class="mb-10 text-center"> <h1 class="text-3xl font-bold dark:text-white mb-2">The Tangled Blog</h1> <h2 class="text-lg text-gray-500 dark:text-gray-400">All the ropes and scaffolding.</h2> </header>
{{ if .Featured }} <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-14"> {{ range .Featured }} <a href="/{{ .Meta.Slug }}" class="no-underline hover:no-underline group flex flex-col bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 overflow-hidden hover:bg-gray-100/25 hover:dark:bg-gray-700/25 transition-colors"> <div class="overflow-hidden bg-gray-100 dark:bg-gray-700 md:h-48"> <img src="{{ .Meta.Image }}" alt="{{ .Meta.Title }}" class="w-full h-full object-cover group-hover:scale-[1.02] transition-transform duration-300" /> </div> <div class="flex flex-col flex-1 px-5 py-4"> <div class="text-xs text-gray-400 dark:text-gray-500 mb-2"> {{ $date := .ParsedDate }}{{ $date | shortTimeFmt}} {{ if .Meta.Draft }}<span class="text-red-500">[draft]</span>{{ end }} </div> <h2 class="font-bold text-gray-900 dark:text-white text-base leading-snug mb-1">{{ .Meta.Title }}</h2> <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 flex-1">{{ .Meta.Subtitle }}</p> <div class="flex items-center mt-4 gap-2"> {{ $hasAvatar := false }}{{ range .Meta.Authors }}{{ if tinyAvatar .Handle }}{{ $hasAvatar = true }}{{ end }}{{ end }} {{ if $hasAvatar }} <div class="inline-flex items-center -space-x-2"> {{ range .Meta.Authors }} {{ $av := tinyAvatar .Handle }}{{ if $av }}<img src="{{ $av }}" class="size-6 rounded-full border border-gray-300 dark:border-gray-700" alt="{{ .Name }}" title="{{ .Name }}" />{{ end }} {{ end }} </div> {{ end }} <div class="text-xs"> {{ $last := sub (len .Meta.Authors) 1 }} {{ range $i, $n := .Meta.Authors }} {{ $n.Handle }}{{ if ne $i $last }}, {{ end }} {{ end }} </div> </div> </div> </a> {{ end }} </div> {{ end }}
<div class="grid grid-cols-1 rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700"> {{ range .Posts }} <a href="/{{ .Meta.Slug }}" class="no-underline hover:no-underline group flex items-center justify-between gap-4 px-6 py-3 hover:bg-gray-100/25 hover:dark:bg-gray-700/25 transition-colors"> <div class="flex items-center gap-3 min-w-0"> <span class="font-medium text-gray-900 dark:text-white truncate"> {{ .Meta.Title }} {{ if .Meta.Draft }}<span class="text-red-500 text-xs font-normal ml-1">[draft]</span>{{ end }} </span> </div> <div class="flex items-center gap-2"> {{ $hasAvatar := false }}{{ range .Meta.Authors }}{{ if tinyAvatar .Handle }}{{ $hasAvatar = true }}{{ end }}{{ end }} {{ if $hasAvatar }} <div class="inline-flex items-center -space-x-2 shrink-0"> {{ range .Meta.Authors }} {{ $av := tinyAvatar .Handle }}{{ if $av }}<img src="{{ $av }}" class="size-5 rounded-full border border-gray-300 dark:border-gray-700" alt="{{ .Name }}" title="{{ .Name }}" />{{ end }} {{ end }} </div> {{ end }} <div class="text-sm text-gray-400 dark:text-gray-500 shrink-0"> {{ $date := .ParsedDate }}{{ $date | shortTimeFmt }} </div> </div> </a> {{ end }} </div>
</div>{{ end }}
{{ define "footerLayout" }}{{ template "blog/fragments/footer" . }}{{ end }}