feat: Add Navbar + partial MoltenObsidian branding

nodsoft_moltenobsidian_web/package.json

@@ -10,6 +10,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^2.10.1"
+    "astro": "^2.10.1",
+    "bootstrap-icons": "^1.10.5",
+    "sass": "^1.64.2"
   }
 }

nodsoft_moltenobsidian_web/src/components/BaseHead.astro

@@ -0,0 +1,37 @@
+---
+interface Props {
+	title: string;
+	description: string;
+	image?: string;
+}
+
+// const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+
+const { title, description} = Astro.props;
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<meta name="generator" content={Astro.generator} />
+
+<!-- Canonical URL -->
+<!--<link rel="canonical" href={canonicalURL} />-->
+
+<!-- Primary Meta Tags -->
+<title>{title}</title>
+<meta name="title" content={title} />
+<meta name="description" content={description} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content="website" />
+<meta property="og:url" content={Astro.url} />
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={Astro.url} />
+<meta property="twitter:title" content={title} />
+<meta property="twitter:description" content={description} />

nodsoft_moltenobsidian_web/src/components/Card.astro

@@ -1,4 +1,6 @@
 ---
+import "./Card.astro.scss"
+
 interface Props {
 	title: string;
 	body: string;
@@ -10,52 +12,7 @@ const { href, title, body } = Astro.props;
 
 <li class="link-card">
 	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
+		<h2>{title}<span>&rarr;</span></h2>
+		<p>{body}</p>
 	</a>
 </li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 1px;
-		background-color: #23262d;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 7px;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-	}
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: calc(1.5rem - 1px);
-		border-radius: 8px;
-		color: white;
-		background-color: #23262d;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent-light));
-	}
-</style>

nodsoft_moltenobsidian_web/src/components/Card.astro.scss

@@ -0,0 +1,45 @@
+@use "../styles/variables" as *;
+
+.link-card {
+  list-style: none;
+  display: flex;
+  padding: 1px;
+  background-color: #23262d;
+  background-image: none;
+  background-size: 400%;
+  border-radius: 7px;
+  background-position: 100%;
+  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  box-shadow: inset 0 0 0 1px rgba(white, 0.1);
+
+  a {
+    width: 100%;
+    text-decoration: none;
+    line-height: 1.4;
+    padding: calc(1.5rem - 1px);
+    border-radius: 8px;
+    color: white;
+    background-color: #23262d;
+    opacity: 0.8;
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  p {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+  }
+
+  &:is(:hover, :focus-within) {
+    background-position: 0;
+    background-image: $accent-gradient;
+
+    & h2 {
+      color: $accent-light;
+    }
+  }
+}

nodsoft_moltenobsidian_web/src/components/NavLink.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'a'>;
+
+const { href, class: className, ...props } = Astro.props;
+
+const { pathname } = Astro.url;
+const isActive = href === pathname || href === pathname.replace(/\/$/, '');
+---
+
+<a href={href} class:list={[className, { active: isActive }]} {...props}>
+	<slot />
+</a>
+<style>
+	a {
+		display: inline-block;
+		text-decoration: none;
+	}
+	a.active {
+		font-weight: bolder;
+		text-decoration: underline;
+	}
+</style>

nodsoft_moltenobsidian_web/src/components/Navbar.astro

@@ -0,0 +1,27 @@
+---
+import "./Navbar.astro.scss"
+import NavLink from './NavLink.astro';
+import { SITE_TITLE } from '../consts';
+---
+
+<header>
+	<nav>
+		<div style="display: flex; align-items: center;">
+			<h2 class="navbar-brand">
+				<a href="/">{SITE_TITLE}</a>
+			</h2>
+
+			<div class="internal-links">
+				<NavLink href="/">Home</NavLink>
+				<NavLink href="/vault">Vault</NavLink>
+			</div>
+		</div>
+
+		<!--<div class="social-links">-->
+		<!--	-->
+		<!--</div>-->
+	</nav>
+</header>
+<style>
+
+</style>

nodsoft_moltenobsidian_web/src/components/Navbar.astro.scss

@@ -0,0 +1,48 @@
+header {
+  margin: 0;
+  padding: 0 1em;
+  //background: white;
+  box-shadow: 0 2px 8px rgba(var(--black), 5%);
+}
+
+
+//h2 a,
+//h2 a.active {
+//	text-decoration: none;
+//}
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  & a {
+    padding: 1rem 0.5rem;
+    //color: var(--black);
+    border-bottom: 4px solid transparent;
+    text-decoration: none;
+
+    border-radius: 8px;
+    color: white;
+    opacity: 0.8;
+
+    &.active {
+      text-decoration: none;
+      //border-bottom-color: var(--accent);
+    }
+  }
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.social-links {
+  &, a {
+    display: flex;
+  }
+
+  @media (max-width: 720px) {
+    display: none;
+  }
+}

nodsoft_moltenobsidian_web/src/consts.ts

@@ -0,0 +1,5 @@
+// Place any global data in this file.
+// You can import this data from anywhere in your site by using the `import` keyword.
+
+export const SITE_TITLE = 'MoltenObsidian';
+// export const SITE_DESCRIPTION = 'Welcome to my website!';

nodsoft_moltenobsidian_web/src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />