First batch of additions

src/components/Counter.astro

@@ -1,8 +1,10 @@
 ---
-const { count, title, sub } = Astro.props
+import { Icon } from 'astro-icon/components'
+const { icon = 'mdi:rocket', count, title, sub } = Astro.props
 ---
 
-<div class="animate text-center">
+<div class="counter text-center">
+  <Icon name={icon} />
   <p class="text-6xl font-bold">{count}</p>
   <p class="text-4xl font-semibold">{title}</p>
   <p class="text-2xl">{sub}</p>
@@ -12,4 +14,10 @@ const { count, title, sub } = Astro.props
   div > p:first-child {
     color: var(--action-color);
   }
+  :global(.counter [data-icon]) {
+    display: block;
+    margin: 0px auto 1rem auto;
+    height: auto;
+    width: 4rem;
+  }
 </style>

src/components/Hero.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components'
 
-const { src = '/astronaut-hero-img.webp' } = Astro.props
+const { src = '/retrowave-moon.png' } = Astro.props
 ---
 
 <section class="hero my-24">
@@ -9,12 +9,12 @@ const { src = '/astronaut-hero-img.webp' } = Astro.props
     <div class="grid grid-cols-1 items-center gap-24 lg:grid-cols-2">
       <div class="flex flex-col items-center gap-8 md:items-start">
         <h1 class="text-center text-6xl md:text-left lg:text-8xl">
-          <slot><span class="text-gradient">Accessible</span> Starter for Astro</slot>
+          <slot><span class="text-gradient">Modding</span> done with passion</slot>
         </h1>
         <div class="flex flex-col gap-3 min-[500px]:flex-row">
           <a class="button has-icon" href="https://github.com/markteekman/accessible-astro-starter">
-            <Icon name="ion:star-outline" />
-            Star on GitHub
+            <Icon name="ion:logo-github" />
+            View on GitHub
           </a>
           <a
             class="button has-icon color-secondary"

src/components/Navigation.astro

@@ -8,8 +8,8 @@ import logo from '../assets/img/logo.svg'
 <div id="main-navigation" class="is-desktop py-8">
   <div class="container">
     <a href="/" class="flex items-center gap-2 !no-underline">
-      <Image src={logo} alt="Your Logo" width="47" height="37" />
-      <span class="font-bold">Accessible Astro</span>
+      <Image src={logo} alt="MidnightDust Logo" width="47" height="37" />
+      <span class="font-bold">MidnightDust by Motschen</span>
     </a>
     <div class="wrapper">
       <nav class="desktop-menu" aria-label="Main navigation desktop">

src/components/SiteMeta.astro

@@ -3,7 +3,7 @@ import { ViewTransitions } from 'astro:transitions'
 
 const { title, description, url, image, author } = Astro.props
 
-let subtitle = 'Accessible Astro Starter'
+let subtitle = 'MidnightDust'
 ---
 
 <!-- general meta -->

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

@@ -0,0 +1,74 @@
+---
+import DefaultLayout from '../../layouts/DefaultLayout.astro'
+import { Card, Pagination } from 'accessible-astro-components'
+
+export async function getStaticPaths({ paginate }) {
+  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  const data = await response.json()
+
+  return paginate(data, { pageSize: 6 })
+}
+
+const { page } = Astro.props
+---
+
+<DefaultLayout
+  title="Gallery"
+  description="An overview of my projects and endeavours."
+>
+  <section class="my-12">
+    <div class="space-content container">
+      <h1>Gallery</h1>
+      <p class="text-2xl">
+        An overview of my projects and endeavours.
+      </p>
+    </div>
+  </section>
+  <section class="my-12">
+    <div class="container">
+      <p class="text-sm"><em>Post {page.start + 1} through {page.end + 1} of {page.total} total posts</em></p>
+      <ul class="my-3">
+        {
+          page.data.map((post) => (
+            <li>
+              <Card
+                url={'/blog/' + post.title.replaceAll(' ', '-').toLowerCase()}
+                title={post.title}
+                footer={'userId:' + post.userId}
+              >
+                {post.body}
+              </Card>
+            </li>
+          ))
+        }
+      </ul>
+      <div class="mt-12 grid place-content-center">
+        <Pagination
+          firstPage={page.url.prev ? '/blog' : null}
+          previousPage={page.url.prev ? page.url.prev : null}
+          nextPage={page.url.next ? page.url.next : null}
+          lastPage={page.url.next ? `/blog/${Math.round(page.total / page.size)}` : null}
+          currentPage={page.currentPage}
+          totalPages={Math.round(page.total / page.size)}
+        />
+      </div>
+    </div>
+  </section>
+</DefaultLayout>
+
+<style lang="scss">
+  ul {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 4rem;
+
+    @media (min-width: 550px) {
+      grid-template-columns: repeat(2, 1fr);
+      grid-gap: 2rem;
+    }
+
+    @media (min-width: 950px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+</style>

src/pages/gallery/[post].astro

@@ -0,0 +1,57 @@
+---
+import DefaultLayout from '../../layouts/DefaultLayout.astro'
+import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
+
+export async function getStaticPaths() {
+  const data = await fetch('https://jsonplaceholder.typicode.com/posts').then((response) => response.json())
+
+  return data.map((post) => {
+    return {
+      params: { post: post.title.replaceAll(' ', '-').toLowerCase() },
+      props: { post },
+    }
+  })
+}
+
+const { post } = Astro.props
+---
+
+<DefaultLayout title={post.title} description={post.body} url={post.title}>
+  <div class="container">
+    <div class="mt-12">
+      <Breadcrumbs>
+        <BreadcrumbsItem href="/" label="Home" />
+        <BreadcrumbsItem href="/blog" label="Blog" />
+        <BreadcrumbsItem currentPage={true} label={post.title} />
+      </Breadcrumbs>
+    </div>
+  </div>
+  <section class="my-12">
+    <div class="container">
+      <h1>{post.title}</h1><br />
+      <p>By userId: {post.userId}</p>
+    </div>
+  </section>
+  <section class="my-12">
+    <div class="container">
+      <p class="text-2xl">{post.body}</p>
+    </div>
+  </section>
+</DefaultLayout>
+
+<style lang="scss">
+  ul {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 4rem;
+
+    @media (min-width: 550px) {
+      grid-template-columns: repeat(2, 1fr);
+      grid-gap: 2rem;
+    }
+
+    @media (min-width: 950px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+</style>

src/pages/index.astro

@@ -61,12 +61,11 @@ import ContentMedia from '../components/ContentMedia.astro'
   </ContentMedia>
   <section class="mb-32 mt-64">
     <div class="container">
-      <h2 class="mb-16 text-6xl">Counters</h2>
-      <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 md:grid-cols-4">
-        <Counter count="520" title="Stars" sub="On GitHub" />
-        <Counter count="17" title="Accessible" sub="Components" />
-        <Counter count="500" title="Commits" sub="Merged" />
-        <Counter count="18+" title="Months" sub="Since launch" />
+      <h2 class="mb-16 text-6xl">Statistics</h2>
+      <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 md:grid-cols-3">
+        <Counter icon="ion:star" count="484+" title="Stars in Total" sub="On GitHub" />
+        <Counter icon="ion:download" count="61.000.000+" title="Total Downloads" sub="Modrinth & CurseForge" />
+        <Counter icon="ion:code-slash" count="5+" title="Years" sub="Development experience" />
       </div>
     </div>
   </section>

src/pages/midnightlib.astro

@@ -0,0 +1,62 @@
+---
+import DefaultLayout from '../layouts/DefaultLayout.astro'
+import Hero from '../components/Hero.astro'
+import Feature from '../components/Feature.astro'
+import Counter from '../components/Counter.astro'
+import ContentMedia from '../components/ContentMedia.astro'
+---
+
+<DefaultLayout title="MidnightLib">
+  <ContentMedia imgSrc="/accessible-components.webp">
+    <h2>Accessible Components</h2>
+    <p class="text-2xl">
+      This theme provides plenty of tried and tested Accessible Astro Components. Some are native to this theme and a
+      lot of others are integrated using a <a href="https://github.com/markteekman/accessible-astro-components"
+        >separate package</a
+      >. They'll get you up and running in building an accessible solution for your visitors.
+    </p>
+  </ContentMedia>
+  <ContentMedia imgSrc="/wcag-compliant.webp" reverseImg={true}>
+    <h2>WCAG 2.1 AA Compliant</h2>
+    <p class="text-2xl">
+      Using semantic HTML, landmarks, skip links, screen reader friendly content, aria-labels, keyboard accessible
+      navigation and components, clear outlines and tab indicators and the right color contrast, you're more certain of
+      reaching WCAG AA compliance.
+    </p>
+  </ContentMedia>
+  <section class="my-64">
+    <div class="container">
+      <h2 class="mb-16 text-6xl">Features</h2>
+      <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
+        <Feature icon="mdi:feather" title="Lightweight">
+          Size of the .jar is currently just 50KB.<br>Everything essential for the config (including GUI) is only 30KB!
+        </Feature>
+        <Feature icon="mdi:coffee" title="JiJ-able">
+          Bundle MidnightLib with your mod with ease. Gone are the days of installing dependencies manually!
+        </Feature>
+        <Feature icon="mdi:laptop" title="Automated">
+          Automatic generation of config screens (and server-side commands) makes adding config options a breeze!
+        </Feature>
+        <Feature icon="mdi:cog" title="Powerful">
+          Supports booleans, numbers (int, float, double), strings, enums, hex colors and string lists!
+        </Feature>
+        <Feature icon="mdi:person" title="User-friendly">
+          Organize your config screen using comments, sliders, colors and tabs.
+        </Feature>
+        <Feature icon="mdi:language-markdown" title="Commands">
+          Operators can edit server configs using /midnightconfig &lt;modid&gt; &lt;option&gt;
+        </Feature>
+      </div>
+    </div>
+  </section>
+  <section class="mb-32 mt-64">
+    <div class="container">
+      <h2 class="mb-16 text-6xl">Statistics</h2>
+      <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 md:grid-cols-3">
+        <Counter icon="ion:star" count="484+" title="Stars in Total" sub="On GitHub" />
+        <Counter icon="ion:download" count="61.000.000+" title="Total Downloads" sub="Modrinth & CurseForge" />
+        <Counter icon="ion:code-slash" count="5+" title="Years" sub="Development experience" />
+      </div>
+    </div>
+  </section>
+</DefaultLayout>