From a36e029a8019951a3efe21b31f7eedbe02f8142a Mon Sep 17 00:00:00 2001 From: liyunze <50455574+liyunze-coding@users.noreply.github.com> Date: Tue, 8 Oct 2024 19:09:58 +1100 Subject: [PATCH] added blog post --- src/components/elements/Card.astro | 116 ++++++++------- .../sections/ContactComponent.svelte | 21 +-- src/components/sections/FooterComponent.astro | 5 + src/components/sections/NavBar.astro | 32 ++-- src/content/blog/welcome.md | 36 +++++ src/content/config.ts | 17 +++ src/env.d.ts | 1 + src/pages/blog/[...slug].astro | 139 ++++++++++++++++++ src/pages/blog/index.astro | 88 +++++++++++ src/pages/contact.astro | 2 + src/pages/experience.astro | 2 + src/pages/faq.astro | 44 ++++-- src/pages/index.astro | 20 +-- src/pages/projects.astro | 2 + src/pages/skills.astro | 134 ++++++++--------- src/pages/socials.astro | 2 + src/pages/what-i-do.astro | 2 + 17 files changed, 491 insertions(+), 172 deletions(-) create mode 100644 src/components/sections/FooterComponent.astro create mode 100644 src/content/blog/welcome.md create mode 100644 src/content/config.ts create mode 100644 src/pages/blog/[...slug].astro create mode 100644 src/pages/blog/index.astro diff --git a/src/components/elements/Card.astro b/src/components/elements/Card.astro index 3574c79..74b18dd 100644 --- a/src/components/elements/Card.astro +++ b/src/components/elements/Card.astro @@ -1,72 +1,78 @@ --- interface Props { - primaryColor: string; - bgColor?: string | undefined; - scaleOnHover?: boolean | undefined; + primaryColor: string; + bgColor?: string | undefined; + scaleOnHover?: boolean | undefined; + pixelHeight?: string | undefined; } -const { primaryColor, bgColor = "#282828", scaleOnHover = false } = Astro.props; +const { + primaryColor, + bgColor = "#282828", + scaleOnHover = false, + pixelHeight = "70px", +} = Astro.props; ---
- +
- diff --git a/src/components/sections/ContactComponent.svelte b/src/components/sections/ContactComponent.svelte index 1c3604d..466f543 100644 --- a/src/components/sections/ContactComponent.svelte +++ b/src/components/sections/ContactComponent.svelte @@ -2,9 +2,7 @@ import Socials from "../elements/Socials.svelte"; -
+
✉ Send me an email -
-
- -
-
- © 2023-{new Date().getFullYear()} RythonDev + +
+ +
diff --git a/src/components/sections/FooterComponent.astro b/src/components/sections/FooterComponent.astro new file mode 100644 index 0000000..b587b28 --- /dev/null +++ b/src/components/sections/FooterComponent.astro @@ -0,0 +1,5 @@ +
+
+ Copyright © 2023-{new Date().getFullYear()} RythonDev. All Rights Reserved. +
+
diff --git a/src/components/sections/NavBar.astro b/src/components/sections/NavBar.astro index 136d7d9..cb54d60 100644 --- a/src/components/sections/NavBar.astro +++ b/src/components/sections/NavBar.astro @@ -13,27 +13,31 @@ @@ -49,28 +53,32 @@ > homehome What I DoWhat I Do projectsprojects skillsskills experienceexperience contactblog + contact
diff --git a/src/content/blog/welcome.md b/src/content/blog/welcome.md new file mode 100644 index 0000000..478c996 --- /dev/null +++ b/src/content/blog/welcome.md @@ -0,0 +1,36 @@ +--- +title: "Welcome to my blog" +author: "RythonDev" +pubDate: 2024-10-08T8:06:00 +description: The start of my blog posts. Where I share my plans on what type of blogs are to be shared here. +tags: +- Introduction +- Web Dev +- Streaming +--- + +## Introduction + +This is my first blog post, where I share my plans on what type of blogs are to be shared here. The purpose of the blog is for me to share what I know without having to create a video about it. + +The types of blogs that I will share here will be, but not limited to: + +- Tutorials, Tips & Tricks + - Streaming + - Web Development + - Python +- News & Opinions + +## Who am I? + +Well, if you don't know who I am, you can find out on my website [here](/). But if you want me to put it in short, I would say that I am mainly a: + +- Streamer +- Software Developer + +## What's special about this blog? + +In my experience, when I wanted to look at blogs from medium or article sites, it would either be flooded with ads, get prompted to disable ad blocker, or be completely locked behind a paywall. Although there are ways to bypass those, I find that searching for information has been inconvenient. + +Hence, I want my blog to be minimal, without any ads nor paywalls. I believe that information and knowledge should be free, and easy to consume. + diff --git a/src/content/config.ts b/src/content/config.ts new file mode 100644 index 0000000..f0ef420 --- /dev/null +++ b/src/content/config.ts @@ -0,0 +1,17 @@ +import { z, defineCollection } from "astro:content"; + +const blogCollection = defineCollection({ + type: "content", + schema: z.object({ + title: z.string(), + color: z.string().optional(), + description: z.string(), + author: z.string(), + tags: z.array(z.string()).optional(), + pubDate: z.date(), + }), +}); + +export const collections = { + blog: blogCollection, +}; diff --git a/src/env.d.ts b/src/env.d.ts index f964fe0..acef35f 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1 +1,2 @@ +/// /// diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro new file mode 100644 index 0000000..f674e6b --- /dev/null +++ b/src/pages/blog/[...slug].astro @@ -0,0 +1,139 @@ +--- +import { getCollection } from "astro:content"; +import NavBar from "../../components/sections/NavBar.astro"; +import Layout from "../../layouts/Layout.astro"; +import Footer from "../../components/sections/FooterComponent.astro"; + +export async function getStaticPaths() { + const blogEntries = await getCollection("blog"); + return blogEntries.map((entry) => ({ + params: { slug: entry.slug }, + props: { entry }, + })); +} + +const { entry } = Astro.props; +const { Content } = await entry.render(); +--- + + + +
+

{entry.data.title}

+

+ Published + { + new Date(entry.data.pubDate).toLocaleDateString("en-UK", { + day: "numeric", + month: "long", + year: "numeric", + }) + } +

+

by {entry.data.author}

+

{entry.data.description}

+ +
+ { + entry.data.tags?.map((tag) => ( +
+ {tag} +
+ )) + } +
+ +
+ + +
+
+
+
+ + + diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro new file mode 100644 index 0000000..ba6fe08 --- /dev/null +++ b/src/pages/blog/index.astro @@ -0,0 +1,88 @@ +--- +import NavBar from "../../components/sections/NavBar.astro"; +import Layout from "../../layouts/Layout.astro"; +import Card from "../../components/elements/Card.astro"; +import Footer from "../../components/sections/FooterComponent.astro"; +import { getCollection } from "astro:content"; + +const blogPosts = await getCollection("blog"); +--- + + + + +
+

Blog

+
+
+

+ This is where I upload my blogs. No paywalls, no ads, no + bullshit. +

+
+ + + +
+
+
+
+
+ + + diff --git a/src/pages/contact.astro b/src/pages/contact.astro index 75dfb98..9a13481 100644 --- a/src/pages/contact.astro +++ b/src/pages/contact.astro @@ -3,6 +3,7 @@ import NavBar from "../components/sections/NavBar.astro"; import Layout from "../layouts/Layout.astro"; import ContactComponent from "../components/sections/ContactComponent.svelte"; import Card from "../components/elements/Card.astro"; +import Footer from "../components/sections/FooterComponent.astro"; --- +