Update the site to be even cleaner I hope

auguwu · Jun 5, 2023 · 38b475f · 38b475f
1 parent f5e770e
commit 38b475f
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -2,4 +2,4 @@
 
 > _Personal website and blog made with Astro!_
 
-![source](https://noel-is.gay/images/7ea225ba.png)
+![source](https://noel-is.gay/images/025d5c8a.png)
diff --git a/src/components/Container.astro b/src/components/Container.astro
@@ -1,3 +1,3 @@
-<div class="container mx-auto mt-10 lg:mt-6 lg:items-center lg:justify-center lg:max-w-7xl">
+<div class="container mx-auto mt-4 lg:mt-6 lg:items-center lg:justify-center lg:max-w-7xl">
     <slot />
 </div>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -4,7 +4,7 @@ import { Icon } from 'astro-icon';
 
 <nav class="relative">
     <header
-        class="flex items-center justify-center max-lg:flex-col lg:justify-between bg-[#2B2C3B] py-3 px-1.5 lg:pl-2 lg:shadow-md lg:max-w-screen-xl lg:mx-auto lg:mt-4 lg:rounded-lg"
+        class="flex items-center justify-center max-lg:flex-col lg:justify-between bg-[#2B2C3B] py-3 px-1.5 lg:pl-2 lg:shadow-md lg:max-w-screen-xl lg:mx-auto lg:mt-1.5 rounded-lg"
     >
         <div class="flex flex-row align-middle gap-2">
             <div class="flex flex-row gap-3">
@@ -21,14 +21,15 @@ import { Icon } from 'astro-icon';
             <span class="my-auto ml-2">&bull;</span>
             <a
                 href="/"
-                class="mr-2 my-auto font-mono text-white text-xl hover:bg-[#35353A] hover:shadow-md py-2 px-2 rounded-lg"
+                class="my-auto font-mono text-white text-xl hover:bg-[#35353A] hover:shadow-md py-2 px-2 rounded-lg"
             >
                 Home
             </a>
 
+            <span class="my-auto">&bull;</span>
             <a
                 href="/blog"
-                class="mr-1 my-auto font-mono text-white text-xl hover:bg-[#35353A] hover:shadow-md py-2 px-2 rounded-lg"
+                class="my-auto font-mono text-white text-xl hover:bg-[#35353A] hover:shadow-md py-2 px-2 rounded-lg"
             >
                 Blog
             </a>
@@ -46,7 +47,7 @@ import { Icon } from 'astro-icon';
                 <Icon name="fa-brands:twitter" size="32" class="text-white bg-[#1DA1F2] py-1 px-1 rounded-lg" />
             </a>
 
-            <a id="icon" href="https://wuff.space/@noel" class="mr-2" title="Mastodon">
+            <a id="icon" href="https://wuff.space/@noel" rel="me" class="mr-2" title="Mastodon">
                 <Icon name="fa-brands:mastodon" size="32" class="text-white bg-[#563ACC] py-1 px-1 rounded-lg" />
             </a>
 

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -23,9 +23,3 @@
 
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
-
-declare module 'astro-icon/pack' {
-    import { createIconPack } from 'astro-icon/lib/createIconPack';
-
-    export { createIconPack };
-}
diff --git a/src/icons/radix.ts b/src/icons/radix.ts
@@ -21,6 +21,7 @@
  * SOFTWARE.
  */
 
+// @ts-ignore
 import { createIconPack } from 'astro-icon/pack';
 
 export default createIconPack({

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -2,7 +2,7 @@
 import { getEntryBySlug } from 'astro:content';
 import Container from '~/components/Container.astro';
 import Navbar from '~/components/Navbar.astro';
-import Page from '~/components/Page.astro';
+import Head from '~/components/Head.astro';
 
 import '~/styles/global.css';
 
@@ -20,8 +20,10 @@ const { render, data } = page;
 const { Content } = await render();
 ---
 
-<Page description={data.description} bodyClass="relative" title={data.title} path={`/blog/${slug}`}>
-    <main class="min-h-screen">
+<!DOCTYPE html>
+<html lang="en">
+    <Head title={data.title} description={data.description} path={`/blog/${slug}`} />
+    <body class="relative max-lg:px-3 py-4">
         <Navbar />
         <Container>
             <div class="flex mt-3 mx-auto border border-pink-300 lg:w-[80rem] rounded-lg shadow-md py-2 px-3">
@@ -41,22 +43,13 @@ const { Content } = await render();
                     </div>
                 </div>
             </div>
-            <main class="flex container mx-auto pb-8 mt-9">
+            <main class="flex container mx-auto mt-5">
                 <article
-                    class="lg:max-w-[80rem] prose prose-p:break-words prose-p:text-zinc-200 prose-p:text-2xl prose-headings:font-serif prose-headings:text-zinc-200 prose-strong:text-slate-200 prose-code:text-slate-200 prose-a:text-rose-200 hover:prose-a:text-fuchsia-400 prose-a:underline prose-li:text-slate-300 prose-img:mx-auto"
+                    class="lg:max-w-full max-w-md prose prose-p:break-words prose-p:text-zinc-200 prose-p:text-2xl prose-headings:font-serif prose-headings:text-zinc-200 prose-strong:text-slate-200 prose-code:text-slate-200 prose-a:text-rose-200 hover:prose-a:text-fuchsia-400 prose-a:underline prose-li:text-slate-300 prose-img:mx-auto"
                 >
                     <Content />
                 </article>
             </main>
         </Container>
-        <footer class="relative bottom-0 left-0 text-center">
-            <p class="font-serif text-xl">
-                Copyright &copy; 2018-{currentYear}
-                <a class="text-[#f4b5d5] underline" href="https://floofy.dev" target="_blank">Noel</a> &bull;
-                <a class="text-[#f4b5d5] underline" href="https://github.com/auguwu/floofy.dev" target="_blank">
-                    Source Code
-                </a>
-            </p>
-        </footer>
-    </main>
-</Page>
+    </body>
+</html>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -6,6 +6,11 @@ import Head from '~/components/Head.astro';
 
 import '~/styles/global.css';
 
+const formatter = new Intl.DateTimeFormat('en-GB', {
+    dateStyle: 'medium',
+    timeStyle: 'medium'
+});
+
 const posts = await getCollection('blog').then((posts) =>
     posts.sort((a, b) => b.data.createdAt.valueOf() - a.data.createdAt.valueOf())
 );
@@ -14,23 +19,37 @@ const posts = await getCollection('blog').then((posts) =>
 <!DOCTYPE html>
 <html lang="en">
     <Head title="Blog" description="📝 Collection of my writing I post time from time" path="/blog" />
-    <body class="relative">
+    <body class="relative max-lg:px-3 py-4">
         <Navbar />
         <Container>
-            <div class="flex mt-3 mx-auto border border-pink-300 lg:w-[80rem] rounded-lg shadow-md py-2 px-3">
-                <div>
-                    <img
-                        src="https://cdn.floofy.dev/images/August.png"
-                        class="md:w-[148px] md:h-[148px] max-sm:hidden h-[72px] w-[72px] rounded-md lg:shadow-sm"
-                        alt="noel avatar"
-                        draggable="false"
-                    />
-                </div>
-                <div class="my-auto ml-4">
-                    <h1 class="font-mono md:text-4xl">📝 Blog</h1>
-                    <h2 class="md:text-2xl mt-2">All of my posts that I have written!</h2>
-                </div>
+            <div class="flex container flex-col mt-8 space-y-3">
+                <h1 class="font-serif text-5xl">Blog Posts</h1>
+                <h2 class="text-3xl mt-2">
+                    Collection of all of my blog posts, they are probably not worth reading though.
+                </h2>
+                <hr />
             </div>
+
+            <Container>
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 items-center [&>*]:h-full">
+                    {
+                        posts.map((post) => (
+                            <div class="py-4 px-3 rounded-md shadow-md bg-[#2B2C3B] space-y-3 space-x-2">
+                                <div>
+                                    <a
+                                        href={`/blog/${post.slug}`}
+                                        class="ml-2 font-serif text-2xl text-semibold hover:border-b-2 hover:border-slate-500"
+                                    >
+                                        {post.data.title}
+                                    </a>
+                                    <h5 class="ml-2 mt-1.5">{post.data.description}</h5>
+                                    <span class="ml-2 mt-2">{formatter.format(new Date(post.data.createdAt))}</span>
+                                </div>
+                            </div>
+                        ))
+                    }
+                </div>
+            </Container>
         </Container>
     </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -47,7 +47,7 @@ const projects: Props['data'][] = [
 
 <html lang="en">
     <Head path="/" />
-    <body>
+    <body class="max-lg:px-3 py-2">
         <Navbar />
         <div class="flex flex-col container mx-auto max-md:justify-center max-md:items-center lg:max-w-7xl">
             <div class="flex container flex-col mt-8 space-y-3">
@@ -60,7 +60,7 @@ const projects: Props['data'][] = [
                 </h3>
             </div>
 
-            <h2 class="text-3xl mt-5">Projects</h2>
+            <h2 class="text-3xl lg:mt-5 mt-2">Projects</h2>
             <Container>
                 <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 items-center [&>*]:h-full">
                     {projects.map((data) => <ProjectCard data={data} />)}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@

		> _Personal website and blog made with Astro!_

		![source](https://noel-is.gay/images/7ea225ba.png)
		![source](https://noel-is.gay/images/025d5c8a.png)