reuterShawn/shawn-reuter-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Highlight current in menu

Browse Source
This commit is contained in:
Maxi Ferreira 2021-11-30 16:39:37 -08:00
parent f8c1e4eb7c
commit d6a00ded47
7 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
TODO
View File

@ -1,8 +1,9 @@
[ ] Update README [ ] Update README
[ ] Install Fonts [ ] Install Fonts
[ ] Style Code blocks [ ] Style Code blocks
[ ] Highlight current navigation item [x] Highlight current navigation item
[ ] Use css variables [ ] Use css variables
[ ] Dark mode [ ] Dark mode
[ ] Resize Logo [x] Resize Logo
[ ] Reading time [ ] Reading time
[x] Bio component

4
src/components/Header.astro
View File

@ -2,7 +2,7 @@
import Logo from './Logo.astro' import Logo from './Logo.astro'
import Nav from './Nav.astro' import Nav from './Nav.astro'
// TODO: Pass current page to Nav const { current = '' } = Astro.props;
--- ---
<style> <style>
@ -17,5 +17,5 @@ import Nav from './Nav.astro'
<header> <header>
<Logo /> <Logo />
<Nav /> <Nav current={current} />
</header> </header>

10
src/components/Nav.astro
View File

@ -1,5 +1,5 @@
--- ---
const { segment = '' } = Astro.props; const { current = '' } = Astro.props;
--- ---
<style> <style>
@ -44,12 +44,12 @@ const { segment = '' } = Astro.props;
} }
.selected::before { .selected::before {
background: #fd6378; background: var(--primary-color);
} }
</style> </style>
<nav> <nav>
<a class='{segment === "" ? "selected" : ""}' href='/'>home</a> <a class={current === "" ? "selected" : ""} href='/'>home</a>
<a class='{segment === "about" ? "selected" : ""}' href='/about'>about</a> <a class={current === "about" ? "selected" : ""} href='/about'>about</a>
<a class='{segment === "blog" ? "selected" : ""}' href='/blog'>blog</a> <a class={current === "blog" ? "selected" : ""} href='/blog'>blog</a>
</nav> </nav>

5
src/layouts/BaseLayout.astro
View File

@ -7,8 +7,9 @@ export interface Props {
title: string; title: string;
description: string; description: string;
permalink: string; permalink: string;
current?: string;
} }
const { title, description, permalink } = Astro.props; const { title, description, permalink, current } = Astro.props;
--- ---
<html lang="en"> <html lang="en">
<head> <head>
@ -16,7 +17,7 @@ const { title, description, permalink } = Astro.props;
</head> </head>
<body> <body>
<div class="layout"> <div class="layout">
<Header /> <Header current={current} />
<main> <main>
<slot /> <slot />

2
src/layouts/BlogPostLayout.astro
View File

@ -6,7 +6,7 @@ const {content} = Astro.props;
const {title, description, publishDate, author, heroImage, permalink, alt} = content; const {title, description, publishDate, author, heroImage, permalink, alt} = content;
--- ---
<BaseLayout title={title} description={description} permalink={permalink}> <BaseLayout title={title} description={description} permalink={permalink} current="blog">
<header> <header>
<p>{publishDate} ~ {'TODO: READING TIME'}</p> <p>{publishDate} ~ {'TODO: READING TIME'}</p>
<h1>{title}</h1> <h1>{title}</h1>

4
src/pages/about.astro
View File

@ -6,12 +6,10 @@ const description = 'About your blog.';
const permalink = 'https://example.com/about'; const permalink = 'https://example.com/about';
--- ---
<BaseLayout title={title} description={description} permalink={permalink}> <BaseLayout title={title} description={description} permalink={permalink} current="about">
<div class="container"> <div class="container">
<h1>About</h1> <h1>About</h1>
<figure> <figure>
<!-- <img src='/assets/rsz_florian-klauer-489-unsplash.jpg' alt='Image of a vintage typewriter.'> -->
<!-- <figcaption>Photo by <a href="https://unsplash.com/@florianklauer" target="_blank">Florian Klauer</a> on Unsplash</figcaption> -->
<img src="/assets/about-illustration.webp" alt="Illustration of a notebook"> <img src="/assets/about-illustration.webp" alt="Illustration of a notebook">
<figcaption> <figcaption>
Illustration by <a href="https://icons8.com/illustrations/author/5c07e68d82bcbc0092519bb6">Icons 8</a> from <a href="https://icons8.com/illustrations">Ouch!</a> Illustration by <a href="https://icons8.com/illustrations/author/5c07e68d82bcbc0092519bb6">Icons 8</a> from <a href="https://icons8.com/illustrations">Ouch!</a>

2
src/pages/blog/index.astro
View File

@ -13,7 +13,7 @@ let allPosts = await Astro.fetchContent('./posts/*.md');
allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf()); allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf());
--- ---
<BaseLayout title={title} description={description} permalink={permalink}> <BaseLayout title={title} description={description} permalink={permalink} current="blog">
<div class="container"> <div class="container">
<h1>Blog</h1> <h1>Blog</h1>
{allPosts.map((post, index) => ( {allPosts.map((post, index) => (