rossouwap
/
AstroTutorial
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished with Layouts and Components 

And starting with the api
https://docs.astro.build/en/tutorial/5-astro-api/
This commit is contained in:
Andre Rossouw 2023-12-21 07:51:06 +02:00
parent c30c3901f3
commit c97a72e1ec
15 changed files with 231 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Footer.astro Normal file
View File

@ -0,0 +1,18 @@
---
const platform = "github";
const username = "withastro";
import Social from './Social.astro';
---
<style>
footer {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
</style>
<footer>
<Social platform="twitter" username="astrodotbuild" />
<Social platform="github" username="withastro" />
<Social platform="youtube" username="astrodotbuild" />
</footer>

7
src/components/Hamburger.astro Normal file
View File

@ -0,0 +1,7 @@
---
---
<div class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>

10
src/components/Header.astro Normal file
View File

@ -0,0 +1,10 @@
---
import Hamburger from './Hamburger.astro';
import Navigation from './Navigation.astro';
---
<header>
<nav>
<Hamburger />
<Navigation />
</nav>
</header>

7
src/components/Navigation.astro Normal file
View File

@ -0,0 +1,7 @@
---
---
<div class="nav-links">
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
</div>

13
src/components/Social.astro Normal file
View File

@ -0,0 +1,13 @@
---
const { platform, username } = Astro.props;
---
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
<style>
a {
padding: 0.5rem 1rem;
color: white;
background-color: #4c1d95;
text-decoration: none;
}
</style>

25
src/layouts/BaseLayout.astro Normal file
View File

@ -0,0 +1,25 @@
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const { pageTitle } = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
</head>
<body>
<Header />
<h1>{pageTitle}</h1>
<slot />
<Footer />
<script>
import "../scripts/menu.js";
</script>
</body>
</html>

10
src/layouts/MarkdownPostLayout.astro Normal file
View File

@ -0,0 +1,10 @@
---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
<p>Publishd on {frontmatter.pubDate.slice(0,10)} by {frontmatter.author}</p>
<p><em>{frontmatter.description}</em></p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
</BaseLayout>

50
src/pages/about.astro
View File

@ -1,21 +1,35 @@
---
const pageTitle = "About Andre Rossouw";
import BaseLayout from '../layouts/BaseLayout.astro';
const identity = {
firstName: "Andre",
country: "South Africa",
occupation: "Random dude",
hobbies: ["photography", "birdwatching", "baseball"],
};
const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];
const happy = true;
const finished = false;
const goal = 3;
const skillColor = "navy";
const pageTitle = 'About Me';
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
</head>
<body>
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<h1>{pageTitle}</h1>
<p>This is my firwst paragraph on my about page. It sure does look good!</p>
<p>And here is another parapgraph that I'm adding. I think it looks pretty darn cool.</p>
</body>
</html>
<BaseLayout pageTitle={pageTitle}>
<p>Here are a few facts about me:</p>
<ul>
<li>My name is {identity.firstName}.</li>
<li>I live in {identity.country} and I work as a {identity.occupation}.</li>
{identity.hobbies.length >= 2 &&
<li>Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}</li>
}
</ul>
<p>My skills are:</p>
<ul>
{skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>
{happy && <p>I am happy to be learning Astro!</p>}
{finished && <p>I finished this tutorial!</p>}
{goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}

31
src/pages/blog.astro
View File

@ -1,22 +1,13 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = 'My astro Learning Blog';
import '../styles/global.css';
---
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width" />
<title>Astro</title>
</head>
<body>
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<h1>My Astro Learning Blog</h1>
<p>This is where I will post about my journey learning Astro.</p>
<ul>
<li><a href="/posts/post-1/">Post 1</a></li>
<li><a href="/posts/post-2/">Post 2</a></li>
<li><a href="/posts/post-3/">Post 3</a></li>
</ul>
</body>
</html>
<BaseLayout pageTitle={pageTitle}>
<p>This is where I will post about my journey learning Astro.</p>
<ul>
<li><a href="/posts/post-1/">Post 1</a></li>
<li><a href="/posts/post-2/">Post 2</a></li>
<li><a href="/posts/post-3/">Post 3</a></li>
</ul>
</BaseLayout>

23
src/pages/index.astro
View File

@ -1,19 +1,8 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = 'Home Page';
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<a href="/">Home</a>
<a href="/about/">About</a>
<a href="/blog/">Blog</a>
<h1>My Astro Site</h1>
</body>
</html>
<BaseLayout pageTitle={pageTitle}>
<h2>My awesome blog subtitle</h2>
</BaseLayout>

11
src/pages/posts/post-1.md
View File

@ -1,19 +1,14 @@
---
layout: ../../layouts/MarkdownPostLayout.astro
title: 'My First Blog Post'
pubDate: 2022-07-01
description: 'This is the first post of my new Astro blog.'
description: "Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website."
author: 'Astro Learner'
image:
url: 'https://docs.astro.build/assets/full-logo-light.png'
url: "https://docs.astro.build/assets/full-logo-light.png"
alt: 'The full Astro logo.'
tags: ["astro", "blogging", "learning in public"]
---
# My First Blog Post
Published on: 2022-07-01
Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
## What I've accomplished
1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.

1
src/pages/posts/post-2.md
View File

@ -1,4 +1,5 @@
---
layout: ../../layouts/MarkdownPostLayout.astro
title: My Second Blog Post
author: Astro Learner
description: "After learning some Astro, I couldn't stop!"

1
src/pages/posts/post-3.md
View File

@ -1,4 +1,5 @@
---
layout: ../../layouts/MarkdownPostLayout.astro
title: My Third Blog Post
author: Astro Learner
description: "I had some challenges, but asking in the community really helped!"

3
src/scripts/menu.js Normal file
View File

@ -0,0 +1,3 @@
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-links').classList.toggle('expanded');
});

84
src/styles/global.css Normal file
View File

@ -0,0 +1,84 @@
html {
background-color: #f1f5f9;
font-family: sans-serif;
}
body {
margin: 0 auto;
width: 100%;
max-width: 80ch;
padding: 1rem;
line-height: 1.5;
}
* {
box-sizing: border-box;
}
h1 {
margin: 1rem 0;
font-size: 2.5rem;
}
/* nav styles */
.hamburger {
padding-right: 20px;
cursor: pointer;
}
.hamburger .line {
display: block;
width: 40px;
height: 5px;
margin-bottom: 10px;
background-color: #ff9776;
}
.nav-links {
width: 100%;
top: 5rem;
left: 48px;
background-color: #ff9776;
display: none;
margin: 0;
}
.nav-links a {
display: block;
text-align: center;
padding: 10px 0;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
}
.nav-links a:hover,
.nav-links a:focus {
background-color: #ff9776;
}
.expanded {
display: unset;
}
@media screen and (min-width: 636px) {
.nav-links {
margin-left: 5em;
display: block;
position: static;
width: auto;
background: none;
}
.nav-links a {
display: inline-block;
padding: 15px 20px;
}
.hamburger {
display: none;
}
}