First Guide

Author: nikdelvin

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "hub-by-nikdelvin"
+  }
+}

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,23 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci
+      - run: npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_HUB_BY_NIKDELVIN }}
+          channelId: live
+          projectId: hub-by-nikdelvin
+        env:
+          FIREBASE_CLI_EXPERIMENTS: webframeworks

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,24 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+on: pull_request
+permissions:
+  checks: write
+  contents: read
+  pull-requests: write
+jobs:
+  build_and_preview:
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - run: npm ci
+      - run: npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_HUB_BY_NIKDELVIN }}
+          projectId: hub-by-nikdelvin
+        env:
+          FIREBASE_CLI_EXPERIMENTS: webframeworks

astro.config.mjs

@@ -13,14 +13,7 @@ export default defineConfig({
             sidebar: [
                 {
                     label: 'Guides',
-                    items: [
-                        // Each item here is one entry in the navigation menu.
-                        { label: 'Example Guide', slug: 'guides/example' }
-                    ]
-                },
-                {
-                    label: 'Reference',
-                    autogenerate: { directory: 'reference' }
+                    autogenerate: { directory: 'guides' }
                 }
             ],
             customCss: ['./src/styles/global.css']

firebase.json

@@ -0,0 +1,14 @@
+{
+  "hosting": {
+    "site": "scripty-app-nikdelvin",
+    "source": ".",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "frameworksBackend": {
+      "region": "europe-west1"
+    }
+  }
+}

public/favicon.svg

@@ -21,9 +21,9 @@ function emptyState(type: string, isMobile: boolean) {
 
 const Canvas: Component = () => {
     const isMobile = window.innerWidth < 768
-    const [type, setType] = createSignal('2d')
+    const [type, setType] = createSignal('video')
     const [fontSize, setFontSize] = createSignal(1)
-    const [canvas, setCanvas] = createSignal<CanvasState>(emptyState('2d', isMobile))
+    const [canvas, setCanvas] = createSignal<CanvasState>(emptyState('video', isMobile))
 
     createEffect(() => {
         const isScaled = fontSize() > 1

src/components/ASCIIRenderer/Canvas.tsx

@@ -4,4 +4,5 @@
     display: flex;
     margin-top: 0;
     overflow: hidden;
+    background-color: #131920;
 }

src/components/ASCIIRenderer/style.css

@@ -14,5 +14,5 @@
 
 [type='number']::-webkit-inner-spin-button {
     pointer-events: auto;
-    opacity: 1;
+    opacity: 0.25;
 }

src/components/OpenTopoData/style.css

@@ -1,4 +1,4 @@
-import { type TypedArray, fromBlob } from 'geotiff'
+import { type TypedArray, fromUrl } from 'geotiff'
 
 function generateColorRange(levels: number, grayScale: boolean) {
     const colors = []
@@ -33,8 +33,7 @@ function transform(a: number, b: number, M: number[], roundToInt = false): [numb
 }
 
 export async function prepareMap() {
-    const blob = await (await fetch('/media/open-topo-data.tif')).blob()
-    const tiff = await fromBlob(blob)
+    const tiff = await fromUrl('/media/open-topo-data.tif')
     const image = await tiff.getImage()
     console.log(image)
     const rasters = await image.readRasters()