base setup

.gitignore

@@ -0,0 +1,19 @@
+# build output
+dist/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "cssvar.files": [
+    "./node_modules/open-props/open-props.min.css",
+    // if you have an alternative path to where your styles are located
+    // you can add it in this array of files
+    "assets/styles/variables.css"
+  ],
+
+  // Do not ignore node_modules css files, which is ignored by default
+  "cssvar.ignore": [],
+
+  // add support for autocomplete in JS or JS like files
+  "cssvar.extensions": [
+    "css", "jsx", "tsx"
+	],
+	"editor.formatOnSave": true
+}

README.md

@@ -0,0 +1,45 @@
+# Astro Starter Kit: Minimal
+
+```
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                | Action                                           |
+| :--------------------- | :----------------------------------------------- |
+| `npm install`          | Installs dependencies                            |
+| `npm run dev`          | Starts local dev server at `localhost:3000`      |
+| `npm run build`        | Build your production site to `./dist/`          |
+| `npm run preview`      | Preview your build locally, before deploying     |
+| `npm run astro ...`    | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -0,0 +1,12 @@
+import { defineConfig } from "astro/config";
+
+// https://astro.build/config
+import image from "@astrojs/image";
+
+// https://astro.build/config
+import mdx from "@astrojs/mdx";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [image(), mdx()]
+});

package.json

@@ -0,0 +1,20 @@
+{
+	"name": "@example/minimal",
+	"type": "module",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "astro build",
+		"preview": "astro preview",
+		"astro": "astro"
+	},
+	"dependencies": {
+		"@astrojs/image": "^0.11.2",
+		"@astrojs/mdx": "^0.11.5",
+		"@astrojs/rss": "^1.0.3",
+		"astro": "^1.6.0",
+		"open-props": "^1.4.24"
+	}
+}

public/favicon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
+  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
+  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
+  <defs>
+    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#000"/>
+      <stop offset="1" stop-color="#000" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+	<style>
+    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
+  </style>
+</svg>

src/components/AstroImage.astro

@@ -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}
+/>

src/components/ContentPost.astro

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

src/components/Header.astro

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

src/components/Navigation.astro

@@ -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>

src/env.d.ts

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

src/layouts/BaseLayout.astro

@@ -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>

src/layouts/MarkdownPostLayout.astro

@@ -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>

src/pages/articles/index.astro

@@ -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>

src/pages/articles/post-0.mdx

@@ -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>

src/pages/articles/post-1.mdx

@@ -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!

src/pages/articles/post-2.mdx

@@ -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>
+```

src/pages/index.astro

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

src/pages/rss.xml.js

@@ -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>`,
+});

src/pages/tags/[tag].astro

@@ -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>

src/pages/tags/index.astro

@@ -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>

src/styles/style.css

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

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/base"
+}