moritz
/
portfolio-webpage
mirror of https://github.com/moritz-hoelting/portfolio-webpage.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix wrong icons being used for mobile drawer & do not show empty table of contents

This commit is contained in:
Moritz Hölting 2026-03-19 09:35:24 +01:00
parent e08382939e
commit e4eef33c2a
2 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ArticleContent.astro
View File

@ -13,22 +13,22 @@ const { Content, headings } = await render(entry);
<div class="article-layout"> <div class="article-layout">
<!-- Sidebar --> <!-- Sidebar -->
<aside {
class="animate toc font-departure max-w-3xl mx-auto px-5 xl:fixed xl:top-24 xl:right-[max(2rem,calc((100vw-84rem)/2))] xl:h-max xl:w-66" headings.length > 0 && (
> <aside class="animate toc font-departure max-w-3xl mx-auto px-5 xl:fixed xl:top-24 xl:right-[max(2rem,calc((100vw-84rem)/2))] xl:h-max xl:w-66">
<h3 class="font-semibold text-[0.9rem] opacity-70 mb-2"> <h3 class="font-semibold text-[0.9rem] opacity-70 mb-2">
On this page On this page
</h3> </h3>
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
{ {headings.map((h) => (
headings.map((h) => ( <li class={`level-${h.depth}`}>
<li class={`level-${h.depth}`}> <a href={`#${h.slug}`}>{h.text}</a>
<a href={`#${h.slug}`}>{h.text}</a> </li>
</li> ))}
)) </ul>
} </aside>
</ul> )
</aside> }
<!-- Main content --> <!-- Main content -->
<Container size="md"> <Container size="md">

25
src/components/Drawer.astro
View File

@ -1,6 +1,7 @@
--- ---
import { SITE, LINKS } from "@/consts"; import { SITE, LINKS } from "@/consts";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Icon } from "astro-icon/components";
const { pathname } = Astro.url; const { pathname } = Astro.url;
const subpath = pathname.match(/[^/]+/g); const subpath = pathname.match(/[^/]+/g);
--- ---
@ -36,35 +37,37 @@ const subpath = pathname.match(/[^/]+/g);
href="/search/" href="/search/"
aria-label={`Search blog posts and projects on ${SITE.TITLE}`} aria-label={`Search blog posts and projects on ${SITE.TITLE}`}
class={cn( class={cn(
"size-9 rounded-full p-2 items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out", "size-9 rounded-full p-2 flex items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out",
pathname === "/search/" || "/" + subpath?.[0] === "search" pathname === "/search/" || "/" + subpath?.[0] === "search"
? "pointer-events-none bg-black dark:bg-white text-white dark:text-black" ? "pointer-events-none bg-black dark:bg-white text-white dark:text-black"
: "", : "",
)} )}
> >
<div class="text-2xl -translate-y-2">&#xf002</div> <Icon name="pixelarticons:search" class:list="text-xl" />
</a> </a>
<a <a
href="/rss.xml" href="/rss.xml"
target="_blank" target="_blank"
aria-label={`Rss feed for ${SITE.TITLE}`} aria-label={`Rss feed for ${SITE.TITLE}`}
class="size-9 rounded-full p-2 items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out" class="size-9 rounded-full p-2 flex items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out"
> >
<div class="text-2xl -translate-y-2">&#xf428</div> <Icon name="pixelarticons:rss" class:list="text-xl" />
</a> </a>
<button <button
id="drawer-theme-button" id="drawer-theme-button"
aria-label={`Toggle light and dark theme`} aria-label={`Toggle light and dark theme`}
class="size-9 rounded-full p-2 items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out" class="size-9 rounded-full p-2 flex items-center justify-center text-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out"
> >
<span class="block dark:hidden text-2xl -translate-y-2" <Icon
>&#xf522</span name="pixelarticons:sun"
> class:list={"text-xl block dark:hidden"}
<span class="hidden dark:block text-2xl -translate-y-2" />
>&#xf4ee</span <Icon
> name="pixelarticons:moon"
class:list={"text-xl hidden dark:block"}
/>
</button> </button>
</div> </div>
</div> </div>