Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/flo-bit/tiny-docs. quick setup, simple, minimalistic docs for your github project flo-bit.dev/tiny-docs
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144---import { hasSidebar } from "../content-utils";import BaseHead from "../components/BaseHead.astro";import Sidebar from "../components/Sidebar.astro";
const { title, description, image, id, headings } = Astro.props;
const sidebar = await hasSidebar();---
<!doctype html><html lang="en" class="h-full antialiased dark"> <head> <BaseHead title={title} description={description} image={image} />
<script is:inline> let dark = false; if (localStorage.getItem("darkMode")) { dark = JSON.parse(localStorage.getItem("darkMode") ?? "false"); } else { dark = window.matchMedia("(prefers-color-scheme: dark)").matches; }
var root = document.getElementsByTagName("html")[0]; if (dark) { root.classList.add("dark"); } else { root.classList.remove("dark"); } </script>
<style is:global> html.dark .astro-code, html.dark .astro-code span { color: var(--shiki-dark); }
html:not(dark) .astro-code, html:not(dark) .astro-code span { color: var(--shiki-light); }
pre { @apply overflow-hidden !important; @apply border border-base-300 dark:border-base-800 bg-base-200/50 dark:bg-base-900/50 rounded-2xl !important; }
.line.highlighted { margin: 0 -24px; padding: 0 24px; position: relative;
display: inline-block; width: calc(100% + 48px); } .line.highlighted { @apply bg-accent-500/20 dark:bg-accent-700/20; }
::selection { @apply bg-accent-300/50 dark:bg-accent-900/40; }
lite-youtube { @apply rounded-2xl border border-base-300 dark:border-base-800; }
.prose mark { @apply bg-accent-200 dark:bg-accent-900 text-black dark:text-white; } .MathJax svg { display: inline !important; } :target { scroll-margin-top: 80px; }
.mobileMenuPopover { /* Closed state transformed off the screen */ transform: translateX(-110%); transition: transform 0.1s, overlay 0.1s ease-out;
/* Styles while the menu is open */ &:popover-open { transform: translateX(0); }
/* Backdrop that overlays other content */ &::backdrop { background-color: rgba(0, 0, 0, 0.5); } }
/* * { @apply border border-red-500; } */ </style> <link rel="stylesheet" href="../../node_modules/lite-youtube-embed/src/lite-yt-embed.css" /> </head>
<body class="bg-base-50 dark:bg-base-950 transition-all duration-150 h-[100dvh]" > <slot />
{ sidebar ? ( <div popover id="mobile-menu" class="mobileMenuPopover inset-auto bg-base-100 dark:bg-base-900 left-0 top-0 h-[100dvh] w-72 block shadow-lg border-r border-base-300 dark:border-base-800" > <button popovertarget="mobile-menu" popovertargetaction="hide" class="absolute top-4 right-4 text-base-600 dark:text-base-400 hover:text-base-800 dark:hover:text-base-200" > <span class="sr-only">Close Menu</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6" > <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /> </svg> </button>
<Sidebar {id} {headings} /> </div> ) : null } </body></html>