docs: Add changelog entry

src/content/changelog/2.1.0.md → src/content/changelog/2024-11-11.md

@@ -1,5 +1,6 @@
 ---
-version: "2.1.0"
+versions:
+  - "2.1.0"
 date: "2024-11-11"
 ---
 

src/content/changelog/2024-11-16.md

@@ -0,0 +1,40 @@
+---
+versions:
+  - "2.2.0"
+  - "2.2.1"
+  - "2.3.0"
+  - "2.3.1"
+  - "2.3.2"
+  - "2.3.3"
+date: "2024-11-16"
+---
+
+### Mobile & Offline Support Has Arrived!
+
+Sim8085 is now more accessible than ever! Use it seamlessly on your mobile device or desktop, whether you're online or offline.
+
+![Mobile Layout](./images/sim8085-mobile-layout-2024-11-16.jpeg)
+
+### What’s New?
+- **Mobile-Friendly**: Run Sim8085 on your phone to quickly try out programs, learn, and experiment with 8085 assembly programming—anytime, anywhere.
+- **Offline Access**: Enjoy Sim8085 even without an internet connection. Yes, you could technically debug an assembly program on a plane (not that you’d want to… or would you?).
+- **Installable as an App**: Add Sim8085 to your home screen or desktop and use it like a native app for a smoother experience.
+
+### How to Install
+- **On iOS**:
+  1. Open [https://www.sim8085.com](https://www.sim8085.com) in Safari.
+  2. Tap the **Share** icon and select **Add to Home Screen**.
+
+![Install on iOS](./images/ios-sim8085-install-2024-11-16.jpeg)
+
+- **On Android**:
+  1. Open [https://www.sim8085.com](https://www.sim8085.com) in your browser.
+  2. Tap the menu (three dots) and select **Add to Home Screen** or **Install App**.
+
+![Install on Android](./images/android-sim8085-install-2024-11-16.jpeg)
+
+- **On Desktop**:
+  1. Open [https://www.sim8085.com](https://www.sim8085.com).
+  2. Look for the **Install** option in your browser's URL bar.
+
+For detailed instructions, check out Mozilla’s [Installing and Uninstalling Web Apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Installing) guide.

src/content/config.js

@@ -4,7 +4,7 @@ import { docsSchema } from '@astrojs/starlight/schema';
 export const collections = {
 	docs: defineCollection({ schema: docsSchema() }),
 	changes: defineCollection({
-	  version: z.string(),
+	  versions: z.array(z.string()),
 		date: z.string()
 	})
 };

src/pages/changelog.astro

@@ -27,13 +27,15 @@ const entries = await Promise.all(
     <main class="privacy-policy max-w-4xl mx-auto py-8 px-6">
         <section>
             <div class="lg:max-w-[1024px] flex flex-col sm:flex-col md:flex-row items-start gap-3 mt-8 mb-8 md:mb-16 pb-16 border-b border-b-gray-800">
-                <div class="text-transparent hidden md:block">
-                    <p>2024-00-00</p>
-                    <p>v0.0.0</p>
+                <div class="text-transparent hidden md:block lg:w-[256px]">
+                    <p class="font-mono">December 00, 0000</p>class
                 </div>
                 <div>
                     <h2 class="text-4xl">Changelog</h2>
                     <p class="dark:text-gray-500 mt-2">New updates and improvements for Sim8085</p>
+                    <div class="mt-2">
+                        <a href="https://github.com/debjitbis08/sim8085/releases/" class="text-blue-600 dark:text-blue-400 font-bold">Detailed Changelog</a>
+                    </div>
                 </div>
             </div>
             <div class="lg:max-w-[1024px]">
@@ -43,12 +45,19 @@ const entries = await Promise.all(
                         <p class="mb-2 font-mono">
                             {entry.date}
                         </p>
-                        <p class="font-mono text-sm">
-                            <a href={`https://github.com/debjitbis08/sim8085/releases/tag/v${entry.data.version}`} class="text-blue-600 dark:text-blue-400">v{entry.data.version}</a>
-                        </p>
                     </div>
                     <div class="changelog-entry lg:w-[588px]">
                         <entry.Content />
+                        <div>
+                            <h3 class="mt-4">Detailed Changelogs</h3>
+                            <ul>
+                            {entry.data.versions.map((version) => (
+                                <li>
+                                    <a href={`https://github.com/debjitbis08/sim8085/releases/tag/v${version}`} class="text-blue-600 dark:text-blue-400">v{version}</a>
+                                </li>
+                            ))}
+                            </ul>
+                        </div>
                     </div>
                   </div>
                 ))}
@@ -58,6 +67,14 @@ const entries = await Promise.all(
 </Layout>
 
 <style>
+:global(.changelog-entry p) {
+    @apply mb-4;
+}
+
+:global(.changelog-entry li) {
+    @apply mb-2;
+}
+
 :global(.changelog-entry h3) {
     @apply text-2xl font-bold mb-4;
 }