Demo

JSLess · Feb 26, 2024 · ba82fe9 · ba82fe9
1 parent cad880f
commit ba82fe9
Show file tree

Hide file tree

Showing 8 changed files with 273 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,33 @@
+
+################################################################################
+#                                                                              #
+#                             Ｅｄｉｔｏｒｃｏｎｆｉｇ                             #
+#                                                                              #
+#                 This file defines basic file properties that                 #
+#                 editors / IDEs use when you modify documents.                #
+#                                                                              #
+#                 Check https://EditorConfig.org for details.                  #
+#                                                                              #
+################################################################################
+
+
+root = true
+
+
+[*]
+
+end_of_line = lf
+
+
+[*.{editorconfig,json,css,tsx,ts,md}]
+
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+charset = utf-8
+
+
+[*.md]
+
+trim_trailing_whitespace = false
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,31 @@
+name: Deploy
+on:
+  workflow_dispatch:
+  push:
+    branches: [Stable]
+  pull_request:
+    branches: Stable
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+
+    permissions:
+      id-token: write # Needed for auth with Deno Deploy
+      contents: read # Needed to clone the repository
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v4
+
+      - name: Install Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - name: Upload to Deno Deploy
+        uses: denoland/deployctl@v1
+        with:
+          project: "jsless-demo-sparks" # 📝 Update the deploy project name if necessary
+          entrypoint: "./Source/App.ts" # 📝 Update the entrypoint if necessary
diff --git a/Source/App.ts b/Source/App.ts
@@ -0,0 +1,23 @@
+
+import { Application , Router } from 'Oak'
+import { serveAsset } from './Asset.ts'
+import { servePage } from './Page.tsx'
+
+
+const app = new Application({
+    logErrors : true
+})
+
+
+const router = new Router
+
+router.get('/Script.js',serveAsset)
+router.get('/Style.css',serveAsset)
+router.get('/',servePage)
+
+
+app.use(router.routes())
+app.use(router.allowedMethods())
+
+
+await app.listen({ port : 8000 })
diff --git a/Source/Asset.ts b/Source/Asset.ts
@@ -0,0 +1,19 @@
+
+export { serveAsset }
+
+import { Context } from 'Oak'
+
+
+const root = `${ Deno.cwd() }/Source/`
+
+
+async function serveAsset ( context : Context ){
+
+    const isStyle = context.request.url.pathname.includes('Style')
+
+    const path = ( isStyle )
+        ? `Style.css`
+        : `Script.js`
+
+    await context.send({ root , path })
+}
diff --git a/Source/Page.tsx b/Source/Page.tsx
@@ -0,0 +1,56 @@
+
+export { middleware as servePage }
+
+import { pixelify } from 'Font'
+import { Context } from 'Oak'
+import { render } from 'Preact/Render'
+
+
+function middleware (
+    context : Context
+){
+
+    const text = context.request.url.searchParams.get('Text')
+        ?? `Use the search parameter 'Text' to change this text.`
+
+    const info = `A Tor compatible custom font`
+
+    const ascii = pixelify(text).split('\n').join('<br>')
+
+    context.response.body = `<!DOCTYPE html>` + render(
+        <html>
+            <head>
+
+                <link
+                    href = '/Style.css'
+                    rel = 'stylesheet'
+                />
+
+                <script
+                    type = 'module'
+                    src = '/Script.js'
+                />
+
+            </head>
+            <body>
+
+                <div
+                    dangerouslySetInnerHTML = {{ __html : pixelify(info).split('\n').join('<br>') }}
+                    class = 'Text'
+                />
+
+                <div
+                    dangerouslySetInnerHTML = {{ __html : ascii }}
+                    class = 'Text'
+                />
+
+                <a
+                    children = { 'GitHub' }
+                    class = 'GitHub'
+                    href = 'https://github.com/JSLess/Demo-Tor-Font'
+                />
+
+            </body>
+        </html>
+    )
+}
diff --git a/Source/Script.js b/Source/Script.js
@@ -0,0 +1,19 @@
+
+
+let zoom = 1;
+
+
+const html = document.documentElement
+
+
+document.addEventListener('wheel',( event ) => {
+
+    event.preventDefault()
+
+    zoom -= event.deltaY * 0.0004
+
+    zoom = Math.min(Math.max(zoom,0),1)
+
+    html.style.setProperty('--Zoom',zoom)
+
+},{ passive : false })
diff --git a/Source/Style.css b/Source/Style.css
@@ -0,0 +1,59 @@
+
+:root {
+    --Zoom : 1 ;
+}
+
+body {
+
+    background : #010409 ;
+    color : white ;
+
+    justify-content : center ;
+    flex-direction : column ;
+    align-items : center ;
+    display : flex ;
+    gap : 4rem ;
+
+    height : 100dvh ;
+    width : 100dvw ;
+
+    margin : 0 ;
+}
+
+
+.Text {
+
+    text-size-adjust : auto ;
+    letter-spacing : -1px ;
+    font-family : monospace ;
+    user-select : none ;
+    line-height : 1 ;
+    min-width : fit-content ;
+    font-size : 100% ;
+    overflow : clip ;
+    height : 9ch ;
+
+    scale : max( 0.2 , min( 1 , var( --Zoom ) ) ) ;
+}
+
+
+.GitHub {
+
+    position : fixed ;
+    bottom : 1rem ;
+    right : 1rem ;
+
+    text-decoration : none ;
+    font-family : monospace ;
+    font-weight : bold ;
+    font-size : 1.2rem ;
+    color : white ;
+
+    cursor : pointer ;
+
+    transition : all 100ms ease-in-out ;
+}
+
+.GitHub:hover {
+    color : #a90640 ;
+}
diff --git a/deno.json b/deno.json
@@ -0,0 +1,33 @@
+{
+    "lock": false,
+
+    "tasks": {
+        "dev" : "clear && deno run --watch -A Source/App.ts"
+    },
+
+    "imports": {
+
+        "Preact/Render": "https://esm.sh/*[email protected]" ,
+
+        "preact/": "https://esm.sh/[email protected]/",
+        "preact": "https://esm.sh/[email protected]" ,
+
+        "Oak" : "https://deno.land/x/[email protected]/mod.ts" ,
+
+        "Font" : "https://deno.land/x/[email protected]/mod.ts"
+
+    },
+
+    "compilerOptions" : {
+
+        "jsxImportSource": "preact" ,
+        "jsx" : "react-jsx" ,
+
+        "lib": [
+            "deno.unstable" ,
+            "deno.window" ,
+            "es2023" ,
+            "dom"
+        ]
+    }
+}