astro first commit

src/pages/[...page].astro

@@ -0,0 +1,19 @@
+---
+import { getCollection } from 'astro:content'
+import PageWithTitle from '../layouts/PageWithTitle.astro'
+
+export async function getStaticPaths() {
+  const posts = await getCollection('page')
+  return posts.map((post) => ({
+    params: { page: post.slug },
+    props: post,
+  }))
+}
+
+const post = Astro.props
+const { Content } = await post.render()
+---
+
+<PageWithTitle title={post.data.title}>
+  <Content />
+</PageWithTitle>

src/pages/blog/[...slug].astro

@@ -0,0 +1,19 @@
+---
+import { getCollection } from 'astro:content'
+import BlogPost from '../../layouts/BlogPost.astro'
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog')
+  return posts.map((post) => ({
+    params: { slug: post.slug },
+    props: post,
+  }))
+}
+
+const post = Astro.props
+const { Content } = await post.render()
+---
+
+<BlogPost {...post.data}>
+  <Content />
+</BlogPost>

src/pages/blog/index.astro

@@ -0,0 +1,11 @@
+---
+import { getCollection } from 'astro:content'
+import PostList from '../../components/PostList.astro'
+import Root from '../../layouts/Root.astro'
+
+const posts = (await getCollection('blog')).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
+---
+
+<Root>
+  <PostList posts={posts} />
+</Root>

src/pages/index.astro

@@ -0,0 +1,90 @@
+---
+import Signature from '../components/Signature.astro'
+import SpacedLetters from '../components/SpacedLetters.astro'
+import Root from '../layouts/Root.astro'
+
+import home from '../content/images/home.png'
+import { Image } from 'astro:assets'
+---
+
+<Root>
+  <div class="wrapper">
+    <div class="left" style="z-index: 3;">
+      <h1>
+        <SpacedLetters letters="Niccolò" even />
+        <SpacedLetters letters="Borgioli" even />
+      </h1>
+
+      <p>Design & Development</p>
+    </div>
+
+    <div class="right" style="z-index: 2;">
+      <Image src={home} alt="decoration" class="home" />
+      <Signature class="signature" />
+    </div>
+  </div>
+</Root>
+
+<style>
+  .wrapper {
+    /* position: absolute;
+    top: 0;
+    left: 0; */
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    min-height: 100vh;
+  }
+
+  .left {
+    flex: 1 0 auto;
+    max-width: 64vw;
+  }
+
+  .right {
+    position: relative;
+    top: 5vh;
+  }
+
+  p {
+    font-size: 4vw;
+    margin: 0;
+  }
+
+  img.home {
+    width: min(100%, 33vw);
+    object-fit: contain;
+    object-position: left;
+    max-height: 65vh;
+  }
+  .right :global(.signature) {
+    position: absolute;
+    width: 50%;
+    top: 0%;
+    left: -8.5%;
+    transform: rotate(-25deg);
+  }
+
+  @media (max-width: 60em) {
+    .wrapper {
+      flex-direction: column;
+    }
+
+    .left {
+      flex: initial;
+    }
+
+    .right {
+      left: 1rem;
+    }
+
+    img.home {
+      width: auto;
+      height: 100%;
+      max-height: calc(90vh - 35vw - 5vh);
+      max-width: 90%;
+    }
+  }
+</style>

src/pages/rss.xml.js

@@ -0,0 +1,16 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+
+export async function GET(context) {
+	const posts = await getCollection('blog');
+	return rss({
+		title: SITE_TITLE,
+		description: SITE_DESCRIPTION,
+		site: context.site,
+		items: posts.map((post) => ({
+			...post.data,
+			link: `/blog/${post.slug}/`,
+		})),
+	});
+}

src/pages/tag/[...tag].astro

@@ -0,0 +1,28 @@
+---
+import { getCollection } from 'astro:content'
+import PostList from '../../components/PostList.astro'
+import Root from '../../layouts/Root.astro'
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog')
+  const tags = posts.reduce((set, cur) => {
+    for (const tag of cur.data.tags) {
+      set.add(tag)
+    }
+    return set
+  }, new Set<string>())
+
+  return [...tags].map((tag) => ({
+    params: { tag },
+    props: { posts: posts.filter((post) => post.data.tags.includes(tag)) },
+  }))
+}
+
+const params = Astro.params
+const { posts } = Astro.props
+---
+
+<Root>
+  <h1>{params.tag}</h1>
+  <PostList posts={posts} />
+</Root>