solve show code (#29)

Neofonie · May 14, 2024 · fb3ec39 · fb3ec39
1 parent fd7e265
commit fb3ec39
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 36 deletions.
diff --git a/cors-proxy-server/index.js b/cors-proxy-server/index.js
@@ -1,14 +1,20 @@
 // Source from: https://www.npmjs.com/package/cors-anywhere
+const fs = require("node:fs");
+const cors_proxy = require('cors-anywhere');
+
+// const options = {
+//     key: fs.readFileSync("/etc/ssl/neofonie/privkey.pem"),
+//     cert: fs.readFileSync("/etc/ssl/neofonie/fullchain.pem"),
+// };
 
 // Listen on a specific host via the HOST environment variable
-var host = process.env.HOST || '0.0.0.0';
+const host = process.env.HOST || '0.0.0.0';
 
 // Listen on a specific port via the PORT environment variable
-var port = process.env.PORT || 8080;
-
-var cors_proxy = require('cors-anywhere');
+const port = process.env.PORT || 8443;
 
-cors_proxy.createServer({   
+cors_proxy.createServer({
+    //...options,
     originWhitelist: [], // Allow all origins
     requireHeader: ['origin', 'x-requested-with'    ],
     removeHeaders: ['cookie', 'cookie2']

diff --git a/cors-proxy-server/package.json b/cors-proxy-server/package.json
@@ -1,14 +1,18 @@
 {
   "name": "cors-proxy-server",
   "version": "1.0.0",
-  "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "node index.js"
+    "start:local": "node index.js",
+    "start": "pm2 start index.js",
+    "list": "pm2 list",
+    "monitor": "pm2 monitor",
+    "stop": "pm2 stop 0"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "cors-anywhere": "^0.4.4"
+    "cors-anywhere": "^0.4.4",
+    "pm2": "^5.3.1"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,8 @@
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3",
-		"yargs": "^17.7.2"
+		"yargs": "^17.7.2",
+		"dedent": "^1.5.3"
 	},
 	"dependencies": {
 		"material": "^0.9.10",

diff --git a/src/lib/components/checkbox.svelte b/src/lib/components/checkbox.svelte
@@ -1,8 +1,8 @@
 <!-- checkbox.svelte -->
 <script lang="ts">
     import SvelteMarkdown from 'svelte-markdown';
-    import { linkA11yRule } from '$lib/helpers/a11y-manager.js';
-    import { onMount, createEventDispatcher } from 'svelte';
+    import {linkA11yRule} from '$lib/helpers/a11y-manager.js';
+    import {onMount, createEventDispatcher} from 'svelte';
 
     export let label: string = '';
     export let value: boolean = false;
@@ -29,15 +29,21 @@
     }
 </style>
 
-<label class="flex gap-2 items-center">
-    <input bind:this={elmCheckbox} {id} type="checkbox" class="h-4 w-4 shrink-0" bind:checked={value} on:click={handleChange}/>
+<div class="flex gap-2 items-start">
+    <input bind:this={elmCheckbox} {id}
+           type="checkbox"
+           class="h-4 w-4 mt-1 shrink-0"
+           bind:checked={value}
+           on:click={handleChange}/>
     <div>
-        {#if label}
-            <SvelteMarkdown source={label}/>
-        {:else}
-            <slot/>
-        {/if}
+        <label for={id}>
+            {#if label}
+                <SvelteMarkdown source={label}/>
+            {:else}
+                <slot/>
+            {/if}
+        </label>
 
         <slot name="show-code"/>
     </div>
-</label>
+</div>
diff --git a/src/lib/components/show-code.svelte b/src/lib/components/show-code.svelte
@@ -7,7 +7,18 @@
     $: showPlayground = showCode;
 </script>
 
-<button class="link" on:click={toggleCode}>Show Code</button>
+<button class="link" on:click={toggleCode}>{!showPlayground ? 'Show' : 'Hide'} Code</button>
 {#if showPlayground}
-<playground-ide editable-file-system line-numbers resizable><slot /></playground-ide>
-{/if}
+<playground-ide line-numbers resizable class="playground-theme-zenburn">
+    <svelte:element this="script" type="sample/html" filename="index.html">
+        <slot/>
+    </svelte:element>
+</playground-ide>
+{/if}
+
+<style>
+    :global(#playground) {
+        --playground-code-font-size: 18px;
+        --playground-highlight-color: #f00000;
+    }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import dedent from 'dedent';
   import Github from '$lib/components/github.svelte';
   import Link from '$lib/components/link.svelte';
   import Headline from '$lib/components/headline.svelte';
@@ -11,8 +12,7 @@
 </script>
 
 <svelte:head>
-    <!-- TODO: https://www.npmjs.com/package/playground-elements?activeTab=readme#other -->
-    <script type="module" src="/node_modules/playground-elements/playground-ide.js"></script>
+    <script type="module" src="https://google.github.io/playground-elements/playground-configurator.js"></script>
 </svelte:head>
 
 <Github/>
@@ -56,20 +56,24 @@
             <Headline tag="h2">Markup</Headline>
 
             <StoredCheckbox key="html-lang" label="`<html>-Tag` hat korrektes lang-Attribut">
-                <ShowCode slot="show-code">
-<script type="sample/html" filename="index.html">
-<!doctype html>
-    <html lang="de-DE"><!-- language-COUNTRY -->
-        <head></head>
-    <body>
-    ...
-    </body>
-</html>
-</script>
-                </ShowCode>
+                <ShowCode slot="show-code">{@html dedent`
+                    <!doctype html>
+                    <!-- lang="language-COUNTRY" -->
+                    <html lang="de-DE">
+                        <head></head>
+                        <body>
+                        ...
+                        </body>
+                    </html>
+                `}</ShowCode>
             </StoredCheckbox>
 
-            <StoredCheckbox key="tabindex" label="Es gibt bei tabindex nur 0 oder -1" />
+            <StoredCheckbox key="tabindex" label="Es gibt bei tabindex nur 0 oder -1">
+                <ShowCode slot="show-code">{@html dedent`
+                    <a href="url" tabindex="-1">Ich bin ein Link</a><br />
+                    <input type="text" tabindex="0" />
+                `}</ShowCode>
+            </StoredCheckbox>
             <StoredCheckbox key="a-tag" label="`<a>-Tag` wird für alle Links verwendet -> Seitenwechseln" />
             <StoredCheckbox key="button-tag"
                 label="`<button>-Tag` wird für alle Buttons, Klick- und Action-Flächen genutzt (kein div mit onclick etc.)" />