Add /download page and add /api/status

astro.config.mjs

@@ -4,7 +4,6 @@ import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
 import solidJs from "@astrojs/solid-js";
 import netlify from "@astrojs/netlify";
-
 import sentry from "@sentry/astro";
 
 // https://astro.build/config
@@ -13,6 +12,6 @@ export default defineConfig({
   output: "server",
   integrations: [mdx(), sitemap(), solidJs(), tailwind({
     applyBaseStyles: false
-  }), sentry()],
+  }), sentry(),],
   adapter: netlify()
 });

package.json

@@ -19,22 +19,27 @@
     "@astrojs/mdx": "^2.1.1",
     "@astrojs/netlify": "^5.5.0",
     "@astrojs/node": "^8.3.3",
-    "@astrojs/react": "^3.6.0",
+    "@astrojs/react": "^3.6.2",
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.1.1",
     "@astrojs/solid-js": "^4.0.1",
     "@astrojs/tailwind": "^5.1.0",
+    "@azure/storage-blob": "^12.24.0",
     "@formbricks/js": "^2.1.1",
     "@sentry/astro": "^8.26.0",
     "@sentry/cli": "^2.33.1",
     "@tailwindcss/typography": "^0.5.10",
     "@types/nodemailer": "^6.4.15",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "astro": "^4.4.13",
     "clsx": "^2.1.0",
     "fuse.js": "^7.0.0",
     "install": "^0.13.0",
     "lighthouse": "^12.2.0",
     "nodemailer": "^6.9.14",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "resend": "^3.5.0",
     "sharp": "^0.33.2",
     "solid-js": "^1.8.15",

src/components/DownloadButton.astro

@@ -0,0 +1,7 @@
+---
+const { link } = Astro.props;
+---
+
+<a href={link} class="bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded">
+  Download
+</a>

src/consts.ts

@@ -7,10 +7,9 @@ export const SITE: Site = {
   AUTHOR: "Peter Gallwas",
 }
 
-// Work Page
 export const WORK: Page = {
-  TITLE: "Work",
-  DESCRIPTION: "Places I have worked.",
+  TITLE: "Blog",
+  DESCRIPTION: "Writing on topics I am passionate about.",
 }
 
 // Blog Page
@@ -31,6 +30,10 @@ export const SEARCH: Page = {
   DESCRIPTION: "Search all posts and projects by keyword.",
 }
 
+export const DOWNLOADS: Page = {
+  TITLE: "Downloads",
+  DESCRIPTION: "Download some sutff from HuskyNZ",
+}
 // Links
 export const LINKS: Links = [
   { 
@@ -45,6 +48,10 @@ export const LINKS: Links = [
     TEXT: "Projects", 
     HREF: "/projects", 
   },
+  { 
+    TEXT: "Downloads", 
+    HREF: "/download", 
+  },
 ]
 
 // Socials

src/pages/api/status.js

@@ -0,0 +1,5 @@
+export const GET = async ({ params, request }) => {
+    return new Response(JSON.stringify([
+      'The api enpoint is up'
+    ]))
+  }

src/pages/download.astro

@@ -0,0 +1,53 @@
+---
+import { BlobServiceClient, StorageSharedKeyCredential, generateBlobSASQueryParameters, ContainerSASPermissions } from '@azure/storage-blob';
+import PageLayout from "@layouts/PageLayout.astro";
+import { SITE } from "@consts";
+
+// Fetch environment variables
+const accountName = import.meta.env.AZURE_STORAGE_ACCOUNT_NAME;
+const accountKey = import.meta.env.AZURE_STORAGE_ACCOUNT_KEY;
+const containerName = import.meta.env.AZURE_STORAGE_CONTAINER_NAME;
+
+// Function to generate SAS token
+async function generateSasToken() {
+  const sharedKeyCredential = new StorageSharedKeyCredential(accountName, accountKey);
+  const blobServiceClient = new BlobServiceClient(
+    `https://${accountName}.blob.core.windows.net`,
+    sharedKeyCredential
+  );
+
+  const sasOptions = {
+    containerName,
+    permissions: ContainerSASPermissions.parse('r'), // Read permission
+    startsOn: new Date(),
+    expiresOn: new Date(new Date().valueOf() + 3600 * 1000), // 1 hour from now
+  };
+
+  const sasToken = generateBlobSASQueryParameters(sasOptions, sharedKeyCredential).toString();
+  return sasToken;
+}
+
+// Generate SAS token
+const sasToken = await generateSasToken();
+
+const downloads = [
+  { name: 'Dignation S1', path: 'DigNationS1.zip' }
+];
+---
+
+<PageLayout title="Downloads" description={SITE.DESCRIPTION}>
+  <!-- Downloads Section -->
+  <section class="relative bg-white dark:bg-black py-16">
+    <div class="mx-auto max-w-screen-md p-5 space-y-6">
+      <h2 class="text-2xl font-semibold text-black dark:text-white">Available Downloads</h2>
+      <ul class="space-y-4">
+        {downloads.map((download) => (
+          <li class="animate bg-gray-100 dark:bg-gray-800 p-4 rounded-md shadow flex justify-between items-center">
+            <span class="text-black dark:text-white font-medium">{download.name}</span>
+            <a href={`https://${accountName}.blob.core.windows.net/${containerName}/${download.path}?${sasToken}`} class="py-2 px-4 bg-blue-600 hover:bg-blue-500 text-white rounded">Download</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </section>
+</PageLayout>

tsconfig.json

@@ -14,8 +14,9 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
-    "src/**/*.astro"
-, "src/components/quoutes.jsx"  ],
+    "src/**/*.astro",
+    "src/components/quoutes.jsx"
+  ],
   "exclude": [
     "dist",
     "node_modules"