Nicolas/website-astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

base setup

Browse source
This commit is contained in:
Nico 2022-12-02 11:21:18 +01:00
commit 688d794dc7
30 changed files with 4362 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/AstroImage.astro Normal file
View file

@ -0,0 +1,15 @@
---
import { Picture } from "@astrojs/image/components";
const { src, alt, width, height, ...attrs } = Astro.props;
---
<Picture
src={src}
widths={[320, 640, 768, attrs.width]}
aspectRatio={`${width}:${height}`}
sizes={`(max-width: ${attrs.width}px) 100vw, ${attrs.width}px`}
formats={["avif", "webp"]}
alt={alt ? alt : ""}
{...attrs}
/>

5
src/components/ContentPost.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { title, url } = Astro.props;
---
<a href={url}>{title}</a>

7
src/components/Header.astro Normal file
View file

@ -0,0 +1,7 @@
---
import Navigation from '../components/Navigation.astro';
---
<header role="banner">
<Navigation />
</header>

10
src/components/Navigation.astro Normal file
View file

@ -0,0 +1,10 @@
---
---
<nav role="navigation" aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/articles/">Articles</a></li>
<li><a href="/tags/">Catégories</a></li>
</ul>
</nav>

0
src/data/fr/articles/hello.md Normal file
View file

1
src/env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="@astrojs/image/client" />

BIN
src/images/oui.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

29
src/layouts/BaseLayout.astro Normal file
View file

@ -0,0 +1,29 @@
---
import '../styles/style.css';
import Header from '../components/Header.astro';
const { pageTitle, titleColor } = Astro.props;
---
<html lang="fr" dir="ltr">
<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} - Nicolas Arduin</title>
</head>
<body>
<Header />
<main role="main">
<h1>{pageTitle}</h1>
<slot/>
</main>
</body>
<style define:vars={{ titleColor }}>
h1 {
color: var(--titleColor);
}
</style>
</html>

39
src/layouts/MarkdownPostLayout.astro Normal file
View file

@ -0,0 +1,39 @@
---
import AstroImage from "../components/AstroImage.astro";
import BaseLayout from "../layouts/BaseLayout.astro";
const { frontmatter, image, published, title } = Astro.props;
const publishedDate = new Intl.DateTimeFormat("fr", {
dateStyle: "long",
}).format(published);
---
<BaseLayout pageTitle={title}>
<p>Publié le&nbsp;: {frontmatter.pubDate.slice(0, 10)}</p>
<time datetime={published}>
{publishedDate}.
</time>
<div class="tags">
{
frontmatter.tags.map((tag) => (
<p class="tag">
<a href={`/tags/${tag}`}>{tag}</a>
</p>
))
}
</div>
<p>{frontmatter.description}</p>
<hr />
{
!!image && (
<AstroImage
src={image.url}
alt={image.alt}
width={image.width}
height={image.height}
/>
)
}
<hr />
<slot />
</BaseLayout>

23
src/pages/articles/index.astro Normal file
View file

@ -0,0 +1,23 @@
---
import "../../styles/style.css";
import BaseLayout from "../../layouts/BaseLayout.astro";
import ContentPost from "../../components/ContentPost.astro";
const allPosts = await Astro.glob("./*.mdx");
const pageTitle = "Articles";
const titleColor = "hotpink";
---
<BaseLayout pageTitle={pageTitle} titleColor={titleColor}>
<ul>
{
allPosts.map((post) => (
<li>
<ContentPost url={post.url} title={post.frontmatter.title} />
</li>
))
}
</ul>
</BaseLayout>

34
src/pages/articles/post-0.mdx Normal file
View file

@ -0,0 +1,34 @@
---
title: "My First Blog Post"
pubDate: 2022-07-01
description: "This is the first post of my new Astro blog."
author: "Astro Learner"
tags: ["astro", "blogging", "learning in public"]
---
import MarkdownPostLayout from "../../layouts/MarkdownPostLayout.astro";
export const published = new Date("2022-07-01");
export const image = {
url: "/oui.jpg",
alt: "oui oui oui",
width: "394",
height: "512",
};
<MarkdownPostLayout pageTitle={frontmatter.title} published={published} image={image}>
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.
2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
## What's next
I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
</MarkdownPostLayout>

15
src/pages/articles/post-1.mdx Normal file
View file

@ -0,0 +1,15 @@
---
layout: ../../layouts/MarkdownPostLayout.astro
title: My Second Blog Post
author: Astro Learner
description: "After learning some Astro, I couldn't stop!"
image:
url: "/hackerman.png"
alt: "hack"
width: 1920
height: 1080
pubDate: 2022-07-08
tags: ["astro", "blogging", "learning in public", "successes"]
---
After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!

15
src/pages/articles/post-2.mdx Normal file
View file

@ -0,0 +1,15 @@
---
layout: ../../layouts/MarkdownPostLayout.astro
title: Special tag
author: Astro Learner
pubDate: 2022-07-08
tags: ["nicool"]
---
That's it bb
```html
<main>
<header></header>
</main>
```

9
src/pages/index.astro Normal file
View file

@ -0,0 +1,9 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "Accueil"
---
<BaseLayout pageTitle={pageTitle}>
<h2>devvvvv</h2>
</BaseLayout>

9
src/pages/rss.xml.js Normal file
View file

@ -0,0 +1,9 @@
import rss from '@astrojs/rss';
export const get = () => rss({
title: 'Nicolas Arduin | Articles',
description: 'Je blog un peu',
site: 'https://www.nardu.in',
items: import.meta.glob('./**/*.md'),
customData: `<language>fr-fr</language>`,
});

37
src/pages/tags/[tag].astro Normal file
View file

@ -0,0 +1,37 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro";
import ContentPost from "../../components/ContentPost.astro";
export async function getStaticPaths({}) {
const allPosts = await Astro.glob("../articles/*.mdx");
const uniqueTags = [
...new Set(allPosts.map((post) => post.frontmatter.tags).flat()),
];
return uniqueTags.map((tag) => {
const filteredPosts = allPosts.filter((post) =>
post.frontmatter.tags.includes(tag)
);
return {
params: { tag },
props: { posts: filteredPosts },
};
});
}
const { tag } = Astro.params;
const { posts } = Astro.props;
---
<BaseLayout pageTitle={tag}>
<p>Posts tagged with {tag}</p>
<ul>
{
posts.map((post) => (
<li>
<ContentPost url={post.url} title={post.frontmatter.title} />
</li>
))
}
</ul>
</BaseLayout>

20
src/pages/tags/index.astro Normal file
View file

@ -0,0 +1,20 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro";
const pageTitle = "Tag Index";
const allPosts = await Astro.glob("../articles/*.mdx");
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
---
<BaseLayout pageTitle={pageTitle}>
<h2>All the categories</h2>
<ul>
{
tags.map((tag) => (
<li>
<a href={`/tags/${tag}`}>{tag}</a>
</li>
))
}
</ul>
</BaseLayout>

11
src/styles/style.css Normal file
View file

@ -0,0 +1,11 @@
@import "open-props/style";
@import "open-props/normalize";
/* *, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
} */