WIP: Base Astro Components

2026-05-28 14:34:25 +02:00
parent 2bce5d47ea
commit 4ff0658250
3 changed files with 77 additions and 0 deletions
@@ -0,0 +1,25 @@
 ---
 ---
 <div id="sidebar-inner">
  <div id="profile">
    <div id="avatar">CP</div>
 	<div id="profile-name">Phil Keier | DerGrumpf</div>
 	<div id="profile-tagline">Media Scientist, Programmer, Linux Enthutiast</div>
  </div>
  <div id="sidebar-links">
    <a href="https://git.cyperpunk.de">gitea</a>
    <a href="/rss.xml">rss</a>
  </div>
  <div id="sidebar-topics">
    <span class="section-label">topics</span>
    <div id="tags">
      <span class="tag">nixos</span>
      <span class="tag">systems</span>
      <span class="tag">web</span>
      <span class="tag">talks</span>
    </div>
  </div>
 </div>
@@ -0,0 +1,24 @@
 ---
 const navItems = [
  { label: "home", href: "/" },
  { label: "writing", href: "/writing" },
  { label: "talks", href: "/talks" },
  { label: "about", href: "/about" },
 ];
 const currentPath = Astro.url.pathname;
 ---
 <div id="topbar-inner">
  <span id="logo">cyper-site</span>
  <nav>
    {navItems.map((item) => (
        href={item.href}
        class={currentPath === item.href ? "active" : ""}
      >
        {item.label}
      </a>
    ))}
  </nav>
 </div>
@@ -0,0 +1,28 @@
 ---
 interface Props {
  title: string;
 }
 const { title } = Astro.props;
 ---
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <link rel="icon" href="/favicon.svg" />
  </head>
  <body>
    <nav id="topbar">
      <slot name="topbar" />
    </nav>
    <div id="wrapper">
      <main id="content">
        <slot />
      </main>
      <aside id="sidebar">
        <slot name="sidebar" />
      </aside>
    </div>
  </body>
 </html>