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
[ ] Install Fonts
[ ] Style Code blocks
[ ] Highlight current navigation item
[x] Highlight current navigation item
[ ] Use css variables
[ ] Dark mode
[ ] Resize Logo
[x] Resize Logo
[ ] Reading time
[x] Bio component

4
src/components/Header.astro
View File

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

10
src/components/Nav.astro
View File

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

5
src/layouts/BaseLayout.astro
View File

@ -7,8 +7,9 @@ export interface Props {
title: string;
description: string;
permalink: string;
current?: string;
}
const { title, description, permalink } = Astro.props;
const { title, description, permalink, current } = Astro.props;
---
<html lang="en">
<head>
@ -16,7 +17,7 @@ const { title, description, permalink } = Astro.props;
</head>
<body>
<div class="layout">
<Header />
<Header current={current} />
<main>
<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;
---
<BaseLayout title={title} description={description} permalink={permalink}>
<BaseLayout title={title} description={description} permalink={permalink} current="blog">
<header>
<p>{publishDate} ~ {'TODO: READING TIME'}</p>
<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';
---
<BaseLayout title={title} description={description} permalink={permalink}>
<BaseLayout title={title} description={description} permalink={permalink} current="about">
<div class="container">
<h1>About</h1>
<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">
<figcaption>
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());
---
<BaseLayout title={title} description={description} permalink={permalink}>
<BaseLayout title={title} description={description} permalink={permalink} current="blog">
<div class="container">
<h1>Blog</h1>
{allPosts.map((post, index) => (