ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

remove back button

Browse source
This commit is contained in:
Ayo 2023-05-27 21:11:13 +02:00
parent d36981ea71
commit df2ca8d6ac
11 changed files with 121 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/Back.astro
View file

@ -1,20 +0,0 @@
---
export interface Props {
url: string;
text?: string;
}
const { text = "Back", url } = Astro.props;
---
<nav><a class="back-link" href={url}>&larr; {text}</a></nav>
<style>
nav {
margin-bottom: -1rem;
}
nav a.back-link {
font-size: var(--font-size-lg);
text-decoration: none;
}
</style>

72
src/components/Nav.astro
View file

@ -6,6 +6,8 @@ export type Link = {
newTab?: boolean;
};
const url = Astro.url.pathname.toString();
export interface Props {
links: Array<Link>;
}
@ -13,43 +15,57 @@ export interface Props {
const { links } = Astro.props;
---
<nav>
<div id="wrapper">
{
links
.filter((link) => link.url !== "")
.map((link) => (
<a
href={link.url}
target={link.newTab ? "_blank" : null}
title={link.icon}
>
<Icon pack="mdi" name={link.icon} />
</a>
))
}
</div>
</nav>
<div class="nav-wrapper">
<nav>
<div id="left-wrapper">
{
(url !== "/") &&
(<a href="/"><Icon pack="mdi" name="home" />Home</a>)
}
</div>
<div id="right-wrapper">
{
links
.filter((link) => link.url !== "")
.map((link) => (
<a href={link.url} target={link.newTab ? "_blank" : null}>
<Icon pack="mdi" name={link.icon} /> {link.icon}
</a>
))
}
</div>
</nav>
</div>
<style>
nav {
width: 100%;
div.nav-wrapper {
background: var(--ayo-gradient);
}
nav a {
text-decoration: none;
nav {
display: flex;
width: var(--content-width);
margin: 0 auto;
}
nav a:hover svg {
nav a {
display: inline-block;
text-decoration: underline;
font-weight: normal;
color: var(--color-bg);
padding: 5px;
}
nav a:hover {
color: var(--color-brand-complement);
}
nav a svg {
color: var(--color-bg);
width: 1rem;
padding: 1rem;
width: 0.75rem;
}
#wrapper {
max-width: var(--content-width);
margin: 0 auto;
#left-wrapper,
#right-wrapper {
flex: 1;
}
#right-wrapper {
text-align: right;
}
</style>

5
src/layouts/Layout.astro
View file

@ -1,4 +1,5 @@
---
import "./reset.css";
import Head from "../components/Head.astro";
import Nav from "../components/Nav.astro";
import type { Link } from "../components/Nav.astro";
@ -9,10 +10,6 @@ export interface Props {
const { title, description } = Astro.props;
const links: Link[] = [
{
url: "/",
icon: "home",
},
{
url: "https://ayos.blog",
icon: "blog",

76
src/layouts/reset.css Normal file
View file

@ -0,0 +1,76 @@
/**
THANKS TO JOSH COMEAU FOR HIS CUSTOM CSS RESET
👉 https://www.joshwcomeau.com/css/custom-css-reset/
**/
/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
3. Allow percentage-based heights in the application
*/
html,
body {
height: 100%;
}
/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg,
iframe {
display: block;
max-width: 100%;
margin: 0 auto;
}
/*
7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
font: inherit;
}
/*
8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}

2
src/pages/now/and-then/index.astro
View file

@ -1,7 +1,6 @@
---
import Layout from "../../../layouts/Layout.astro";
import Footer from "../../../components/Footer.astro";
import Back from "../../../components/Back.astro";
import Posts from "../../../components/Posts.astro";
const posts = await Astro.glob("./posts/*.astro");
@ -10,7 +9,6 @@ const title = "Previously...";
<Layout title={title} description="What Ayo Ayco have been up to?">
<main>
<Back text="Home" url="/" />
<h1><span class="text-gradient">{title}</span></h1>
<em>What have I been up to?</em>
<Posts posts={posts} />

2
src/pages/now/and-then/posts/09-20-2022.astro
View file

@ -1,7 +1,6 @@
---
import Layout from "../../../../layouts/Layout.astro";
import Footer from "../../../../components/Footer.astro";
import Back from "../../../../components/Back.astro";
const title = "Settling in The Netherlands";
const description =
"This year (2022) I have moved to The Netherlands with my family; specifically to the northern area of Amsterdam.";
@ -9,7 +8,6 @@ const description =
<Layout title={title} description={description}>
<main>
<Back url="/now" />
<h1><span class="text-gradient">{title}</span></h1>
<p>
This year (2022) I have moved to The Netherlands with my family;

2
src/pages/now/index.astro
View file

@ -1,7 +1,6 @@
---
import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/Footer.astro";
import Back from "../../components/Back.astro";
import Posts from "../../components/Posts.astro";
const posts = await Astro.glob("./and-then/posts/*.astro");
@ -9,7 +8,6 @@ const posts = await Astro.glob("./and-then/posts/*.astro");
<Layout title="Now" description="What is Ayo Ayco currently up to?">
<main>
<Back url="/" />
<h1><span class="text-gradient">Now</span></h1>
<em>What am I currently up to?</em>
<p>

2
src/pages/showcase/astro-github-stats.astro
View file

@ -1,7 +1,6 @@
---
import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/Footer.astro";
import Back from "../../components/Back.astro";
import GithubStats from "astro-github-stats";
---
@ -10,7 +9,6 @@ import GithubStats from "astro-github-stats";
description="Embed GitHub stats on your Astro page"
>
<main>
<Back url="/showcase" />
<h1>Astro GitHub Stats</h1>
<p>Embed GitHub stats on your Astro page</p>
<ul>

2
src/pages/showcase/astro-reactive-form.astro
View file

@ -1,7 +1,6 @@
---
import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/Footer.astro";
import Back from "../../components/Back.astro";
import Form, { ControlConfig, FormGroup } from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator";
@ -70,7 +69,6 @@ const characteristicsForm: FormGroup = new FormGroup(
description="Generate a dynamic form based on your data, and modify programatically"
>
<main>
<Back url="/showcase" />
<h1>Astro Reactive Form</h1>
<p>
Generate a dynamic form based on your data, and modify programatically

2
src/pages/showcase/index.astro
View file

@ -2,7 +2,6 @@
import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/Footer.astro";
import Card from "../../components/Card.astro";
import Back from "../../components/Back.astro";
---
<Layout
@ -10,7 +9,6 @@ import Back from "../../components/Back.astro";
description="See demos of opensource side projects Ayo Ayco created"
>
<main>
<Back url="/" />
<h1>Fun <span class="text-gradient">Side Projects</span></h1>
<ul role="list">
<Card

2
src/pages/social.astro
View file

@ -2,7 +2,6 @@
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import Footer from "../components/Footer.astro";
import Back from "../components/Back.astro";
---
<Layout
@ -10,7 +9,6 @@ import Back from "../components/Back.astro";
description="Connect with Ayo Ayco on various social platforms"
>
<main>
<Back url="/" />
<h1>Social <span class="text-gradient">Links</span></h1>
<ul role="list" class="link-card-grid">
<Card