+
diff --git a/src/components/widget/RecentPost.astro b/src/components/widget/RecentPost.astro
new file mode 100644
index 0000000..b14b934
--- /dev/null
+++ b/src/components/widget/RecentPost.astro
@@ -0,0 +1,18 @@
+---
+import WidgetLayout from "./WidgetLayout.astro";
+import ButtonLink from "../control/ButtonLink.astro";
+import {getPostUrlBySlug, getSortedPosts} from "../../utils/content-utils";
+
+let posts = await getSortedPosts()
+
+const LIMIT = 5;
+
+posts = posts.slice(0, LIMIT)
+
+// console.log(posts)
+---
+
+ {posts.map(post =>
+ {post.data.title}
+ )}
+
\ No newline at end of file
diff --git a/src/components/widget/SideBar.astro b/src/components/widget/SideBar.astro
new file mode 100644
index 0000000..68065e1
--- /dev/null
+++ b/src/components/widget/SideBar.astro
@@ -0,0 +1,27 @@
+---
+import Profile from "./Profile.astro";
+import RecentPost from "./RecentPost.astro";
+import Tag from "./Tag.astro";
+
+const className = Astro.props.class;
+---
+
+
+
+
+
+
+
diff --git a/src/components/widget/Tag.astro b/src/components/widget/Tag.astro
new file mode 100644
index 0000000..33c1c72
--- /dev/null
+++ b/src/components/widget/Tag.astro
@@ -0,0 +1,18 @@
+---
+
+import WidgetLayout from "./WidgetLayout.astro";
+import ButtonTag from "../control/ButtonTag.astro";
+import {getTagList} from "../../utils/content-utils";
+
+const tags = await getTagList();
+
+---
+
+
+ {tags.map(t => (
+
+ {t.name}
+
+ ))}
+
+
\ No newline at end of file
diff --git a/src/components/widget/WidgetLayout.astro b/src/components/widget/WidgetLayout.astro
new file mode 100644
index 0000000..bdc0216
--- /dev/null
+++ b/src/components/widget/WidgetLayout.astro
@@ -0,0 +1,18 @@
+---
+interface Props {
+ name?: string;
+}
+const props = Astro.props;
+const {
+ name,
+} = Astro.props
+
+---
+
+
{name}
+
+
+
+
\ No newline at end of file
diff --git a/src/content/config.ts b/src/content/config.ts
new file mode 100644
index 0000000..40cc013
--- /dev/null
+++ b/src/content/config.ts
@@ -0,0 +1,12 @@
+import { z, defineCollection } from "astro:content";
+
+const blogCollection = defineCollection({
+ schema: z.object({
+ title: z.string(),
+ tags: z.array(z.string()),
+ cover: z.string().optional(),
+ })
+})
+export const collections = {
+ 'blog': blogCollection,
+}
\ No newline at end of file
diff --git a/src/content/posts/example.md b/src/content/posts/example.md
new file mode 100644
index 0000000..cfeefb6
--- /dev/null
+++ b/src/content/posts/example.md
@@ -0,0 +1,28 @@
+---
+title: 'My First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog PostMy First Blog Post'
+pubDate: 2022-10-01
+description: 'This is the first post of my new Astro blog.'
+author: 'Astro Learner'
+image:
+ url: 'https://docs.astro.build/assets/full-logo-light.png'
+ alt: 'The full Astro logo.'
+tags: ["astro", "blogging", "learning in public"]
+categories: ['Foo', 'Bar']
+---
+# 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.
+
+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.
\ No newline at end of file
diff --git a/src/content/posts/example2.md b/src/content/posts/example2.md
new file mode 100644
index 0000000..c2122aa
--- /dev/null
+++ b/src/content/posts/example2.md
@@ -0,0 +1,28 @@
+---
+title: 'My Second Blog Post'
+pubDate: 2021-07-01
+description: 'This is the first post of my new Astro blog.'
+author: 'Astro Learner'
+image:
+ url: 'https://docs.astro.build/assets/full-logo-light.png'
+ alt: 'The full Astro logo.'
+tags: ["astro", "blogging", "learning in public"]
+cover: 'https://saicaca.github.io/vivia-preview/assets/79905307_p0.jpg'
+---
+# 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.
+
+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.
\ No newline at end of file
diff --git a/src/content/posts/example3.md b/src/content/posts/example3.md
new file mode 100644
index 0000000..3061984
--- /dev/null
+++ b/src/content/posts/example3.md
@@ -0,0 +1,27 @@
+---
+title: 'My Third Blog Post'
+pubDate: 2020-07-01
+description: 'This is the first post of my new Astro blog.'
+author: 'Astro Learner'
+image:
+ 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.
+
+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.
\ No newline at end of file
diff --git a/src/content/posts/example4.md b/src/content/posts/example4.md
new file mode 100644
index 0000000..ad79f54
--- /dev/null
+++ b/src/content/posts/example4.md
@@ -0,0 +1,27 @@
+---
+title: 'My Fourth Blog Post'
+pubDate: 2022-07-01
+description: 'This is the first post of my new Astro blog.'
+author: 'Astro Learner'
+image:
+ 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.
+
+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.
\ No newline at end of file
diff --git a/src/files.d.ts b/src/files.d.ts
new file mode 100644
index 0000000..92bd3b4
--- /dev/null
+++ b/src/files.d.ts
@@ -0,0 +1,4 @@
+declare module "*.yml" {
+ const value: any;
+ export default value;
+}
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
new file mode 100644
index 0000000..c40b2dc
--- /dev/null
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,191 @@
+---
+import GlobalStyles from "../components/GlobalStyles.astro";
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import { ViewTransitions } from 'astro:transitions';
+import ImageBox from "../components/misc/ImageBox.astro";
+
+import { fade } from 'astro:transitions';
+import {getConfig} from "../utils/config-utils";
+import {pathsEqual} from "../utils/url-utils";
+
+interface Props {
+ title: string;
+ banner: string;
+}
+
+let { title, banner } = Astro.props;
+
+const isHomePage = pathsEqual(Astro.url.pathname, '/') || pathsEqual(Astro.url.pathname, '/page/1');
+
+const testPathName = Astro.url.pathname;
+
+const anim = {
+ old: {
+ name: 'fadeIn',
+ duration: '4s',
+ easing: 'linear',
+ fillMode: 'forwards',
+ mixBlendMode: 'normal',
+ },
+ new: {
+ name: 'fadeOut',
+ duration: '4s',
+ easing: 'linear',
+ fillMode: 'backwards',
+ mixBlendMode: 'normal',
+ }
+};
+
+const myFade = {
+ forwards: anim,
+ backwards: anim,
+};
+
+// defines global css variables
+// why doing this in Layout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757
+const viConf = getConfig();
+const hue = viConf.appearance.hue;
+if (!banner || typeof banner !== 'string' || banner.trim() === '') {
+ banner = viConf.banner.url;
+}
+
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro
new file mode 100644
index 0000000..e66078e
--- /dev/null
+++ b/src/layouts/MainGridLayout.astro
@@ -0,0 +1,60 @@
+---
+import Layout from "./Layout.astro";
+import Navbar from "../components/Navbar.astro";
+import SideBar from "../components/widget/SideBar.astro";
+import {pathsEqual} from "../utils/url-utils";
+
+interface Props {
+ title: string;
+ banner: string;
+}
+
+const { title, banner } = Astro.props;
+
+const isHomePage = pathsEqual(Astro.url.pathname, '/') || pathsEqual(Astro.url.pathname, '/page/1');
+
+const pageWidth = "1200px";
+const sidebarWidth = "280px";
+
+---
+
+