141 lines
6.8 KiB
Text
141 lines
6.8 KiB
Text
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
{% metagen
|
|
title = page_title,
|
|
desc = page.excerpt | toPlain,
|
|
url = 'https://blog.sebin-nyshkim.net' + page.url,
|
|
type = type,
|
|
site_name = site_name,
|
|
og_title = og_title,
|
|
og_image_width = image.width,
|
|
og_image_height = image.height,
|
|
og_image_alt = image.alt,
|
|
og_image_type = 'image/webp',
|
|
twitter_title = og_title,
|
|
twitter_card_type = twitter.cardType,
|
|
name = author.name,
|
|
generator = eleventy.generator,
|
|
preconnect = ['https://img.sebin-nyshkim.net'],
|
|
dns_prefetch = ['https://img.sebin-nyshkim.net'],
|
|
css = ['/fonts/tilt-warp/tilt-warp.css:rel="preload":as="style"',
|
|
'/fonts/tilt-warp/tilt-warp.css',
|
|
'/fonts/encode-sans/encode-sans.css:rel="preload":as="style"',
|
|
'/fonts/encode-sans/encode-sans.css',
|
|
'/fonts/m-plus-1-code/m-plus-1-code.css:rel="preload":as="style"',
|
|
'/fonts/m-plus-1-code/m-plus-1-code.css',
|
|
'/css/style.css:rel="preload":as="style"',
|
|
'/css/style.css',
|
|
'/css/prism.css:rel="preload":as="style"',
|
|
'/css/prism.css']
|
|
%}
|
|
{% ogImage "og-image.og.njk", { title: title or site_name, author: author, image: image } %}
|
|
{% if mastodon.fediverseCreator and mastodon.fediverseCreator != '' %}
|
|
<meta name="fediverse:creator" content="{{ mastodon.fediverseCreator }}" />
|
|
{% endif %}
|
|
<link rel="alternate" href="/feed.xml" title="Sebin's Blog" type="application/atom+xml">
|
|
<link rel="shortcut icon" href="https://img.sebin-nyshkim.net/i/b6629b72-ab77-4a6c-bf97-b1a615cc2454.png" type="image/png">
|
|
<link rel="me" href="https://meow.social/@SebinNyshkim">
|
|
</head>
|
|
<body class="bg-slate-300 text-slate-700 dark:bg-slate-900 dark:text-slate-300">
|
|
<header class="absolute z-10 left-0 right-0 top-0 sm:px-safe-offset-4 md:px-safe-offset-6">
|
|
<div class="flex min-h-16 max-w-(--breakpoint-xl) items-center justify-center bg-sky-600 shadow-xl sm:m-4 sm:mx-auto sm:justify-between sm:rounded-xl dark:bg-sky-950">
|
|
<div class="hidden sm:flex sm:items-center">
|
|
<img src="https://img.sebin-nyshkim.net/i/b6629b72-ab77-4a6c-bf97-b1a615cc2454" alt="" class="m-4 max-w-12 rounded-full border-4 border-white shadow-2xl lg:m-5 lg:max-w-14">
|
|
<h1 class="text-2xl text-white lg:text-3xl">{{ site_name }}</h1>
|
|
</div>
|
|
<nav class="eleventy-navigation" aria-label="Main">
|
|
{{
|
|
collections.all |
|
|
eleventyNavigation |
|
|
eleventyNavigationToHtml({
|
|
listClass: "mx-3 flex gap-2 md:mx-6 md:gap-3",
|
|
anchorClass: "rounded-xl px-4 py-2 capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg sm:text-lg md:m-0 md:max-h-12 lg:text-xl dark:hover:bg-sky-800",
|
|
activeAnchorClass: "bg-sky-900 shadow-lg dark:bg-sky-800",
|
|
activeKey: eleventyNavigation.key or page.url.split('/')[1]
|
|
}) |
|
|
safe
|
|
}}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="mb-12 space-y-12 md:mb-14 md:space-y-14 lg:mb-16 lg:space-y-16">
|
|
{{ content | safe }}
|
|
</main>
|
|
|
|
<footer class="pb-12 md:pb-14 lg:pb-16">
|
|
<div class="mx-auto max-w-(--breakpoint-xl) divide-y divide-slate-400 px-safe-offset-4 md:px-safe-offset-6 dark:divide-slate-600">
|
|
<div class="flex flex-wrap gap-6 md:flex-nowrap md:gap-0"></div>
|
|
<div class="mt-12 flex flex-wrap justify-between gap-4 sm:flex-nowrap md:mt-14 lg:mt-16">
|
|
<div class="basis-full space-y-4">
|
|
<p>© {% year %} Sebin Nyshkim</p>
|
|
<p>Content licensed under
|
|
<a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
|
|
</p>
|
|
<p>
|
|
<a href="/privacy">Privacy Policy</a>
|
|
</p>
|
|
</div>
|
|
<div class="basis-full space-y-4 sm:text-right">
|
|
<p>Made with ❤️ and <a href="https://11ty.dev">11ty</a></p>
|
|
<ul class="flex justify-start gap-4 sm:justify-end" aria-label="Connect">
|
|
<li>
|
|
<a
|
|
class="fill-slate-700 hover:fill-[#0285FF] dark:fill-slate-300"
|
|
href="https://bsky.app/profile/sebin-nyshkim.net"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Bluesky"
|
|
>
|
|
{% icon "simple:bluesky", { width: 24, height: 24 } %}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="fill-slate-700 hover:fill-[#6364FF] dark:fill-slate-300"
|
|
href="https://meow.social/@SebinNyshkim"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Mastodon"
|
|
>
|
|
{% icon "simple:mastodon", { width: 24, height: 24 } %}
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="fill-slate-700 hover:fill-[#FFA500] dark:fill-slate-300"
|
|
href="https://blog.sebin-nyshkim.net/feed.xml"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="RSS Feed"
|
|
>
|
|
{% icon "simple:rss", { width: 24, height: 24 } %}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<dialog id="ackee-banner" class="fixed start-4 end-4 top-auto ms-auto bottom-4 max-w-128 rounded-xl bg-sky-600 text-white shadow-xl dark:bg-sky-950">
|
|
<form method="dialog" class="flex flex-col">
|
|
<div class="space-y-4 p-4 text-center">
|
|
<p class="text-xl font-bold">Analytics</p>
|
|
<p>
|
|
May I collect some anonymized data about the device you use to view this site? I won't know who you are. See:
|
|
<a href="/privacy" class="!decoration-white hover:!text-white dark:!decoration-sky-600 dark:hover:!text-sky-600">Privacy Policy</a>.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-row *:first:rounded-es-xl *:last:rounded-ee-xl *:first:border-e">
|
|
<button id="yes" class="flex-1/2 grow bg-sky-500 px-4 py-2 hover:bg-sky-800 dark:bg-sky-800 dark:hover:bg-sky-500">Yeah sure</button>
|
|
<button id="no" class="flex-1/2 grow bg-sky-500 px-4 py-2 hover:bg-sky-800 dark:bg-sky-800 dark:hover:bg-sky-500">Nope</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<script src="https://ackee.sebin-nyshkim.net/tracker.js"></script>
|
|
<script src="/js/ackee.js"></script>
|
|
</body>
|
|
</html>
|