improve codebase a bit

Author: levino

.devcontainer/devcontainer.json

@@ -1,39 +1,20 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
   "name": "Node.js & TypeScript",
-  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
   "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
   "features": {
-    "ghcr.io/devcontainers/features/node:1": {},
-    "ghcr.io/devcontainers/features/common-utils:2": {}
+    "ghcr.io/devcontainers/features/common-utils:2": {},
+    "ghcr.io/devcontainers-community/features/deno:1": {}
   },
-
-  // Features to add to the dev container. More info: https://containers.dev/features.
-  // "features": {},
-
-  // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  // "forwardPorts": [],
-
-  // Use 'postCreateCommand' to run commands after the container is created.
   "postCreateCommand": "npm install",
+  "postStartCommand": "deno task start",
   "customizations": {
     "vscode": {
+      "extensions": ["unifiedjs.vscode-mdx", "denoland.vscode-deno"],
       "settings": {
-        "terminal.integrated.defaultProfile.linux": "zsh"
-      },
-      "extensions": [
-        "esbenp.prettier-vscode",
-        "astro-build.astro-vscode",
-        "unifiedjs.vscode-mdx",
-        "bradlc.vscode-tailwindcss"
-      ]
+        "terminal.integrated.defaultProfile.linux": "zsh",
+        "editor.defaultFormatter": "denoland.vscode-deno",
+        "deno.enable": true
+      }
     }
   }
-
-  // Configure tool-specific properties.
-  // "customizations": {},
-
-  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-  // "remoteUser": "root"
 }

.gitattributes

@@ -0,0 +1,2 @@
+static/public/infima.css linguist-vendored	
+static/public/pocketbase.umd.js linguist-vendored

.github/dependabot.yml

@@ -6,7 +6,7 @@
 
 version: 2
 updates:
- - package-ecosystem: "devcontainers"
-   directory: "/"
-   schedule:
-     interval: weekly
+  - package-ecosystem: 'devcontainers'
+    directory: '/'
+    schedule:
+      interval: weekly

README.md

@@ -1,47 +1,60 @@
 # Protected docs
 
-This is an example on how to restrict access to a documentation website written with [`docusaurus`](https://docusaurus.io/).
+This is an example on how to restrict access to a documentation website written
+with [`docusaurus`](https://docusaurus.io/).
 
 ## Details
 
-The implementation uses vercels ["middleware"](./middleware.ts) to check each request for the correct authentication data. For user management and authentication, a [`PocketBase`](https://pocketbase.io/) instance is used.
+The implementation uses vercels ["middleware"](./middleware.ts) to check each
+request for the correct authentication data. For user management and
+authentication, a [`PocketBase`](https://pocketbase.io/) instance is used.
 
 ## Considerations
 
-It is important to note that at least with `docusaurus`, one cannot protect individual routes. This is because once one route has been opened, `docusaurus` behaves like a SPA and greedily loads all the content into the client. No way to disentangle that js-blob.
+It is important to note that at least with `docusaurus`, one cannot protect
+individual routes. This is because once one route has been opened, `docusaurus`
+behaves like a SPA and greedily loads all the content into the client. No way to
+disentangle that js-blob.
 
-In this implementation, anybody can sign up and then immediately see the content. That is kinda pointless of course. It is possible to check for roles or attributes on the users. For example one could adjust the middleware like so:
+In this implementation, anybody can sign up and then immediately see the
+content. That is kinda pointless of course. It is possible to check for roles or
+attributes on the users. For example one could adjust the middleware like so:
 
 ```typescript
 // middleware.ts
-import PocketBase from "pocketbase";
-import { next, rewrite } from "@vercel/edge";
+import PocketBase from 'pocketbase'
+import { next, rewrite } from '@vercel/edge'
 
 export const config = {
-  matcher: ["/", "/((?!public/|api/).*)"],
-};
+  matcher: ['/', '/((?!public/|api/).*)'],
+}
 
 export default async function authentication(request: Request) {
-  const pb = new PocketBase("https://levinkeller.de");
-  const cookie = request.headers.get("cookie");
-  if (!cookie) return rewrite("/public/login.html");
-  pb.authStore.loadFromCookie(cookie);
+  const pb = new PocketBase('https://levinkeller.de')
+  const cookie = request.headers.get('cookie')
+  if (!cookie) return rewrite('/public/login.html')
+  pb.authStore.loadFromCookie(cookie)
   try {
-    await pb.collection("users").authRefresh();
+    await pb.collection('users').authRefresh()
     if (pb.authStore.model?.member) {
-      return next();
+      return next()
     } else {
       // not_a_member.html shows instructions on how to reach the admin to make the person a member.
-      return rewrite("/public/not_a_member.html");
+      return rewrite('/public/not_a_member.html')
     }
   } catch {
-    return rewrite("/public/login.html");
+    return rewrite('/public/login.html')
   }
 }
 ```
 
-Then only users whose accounts are made a "member" after creation could access the website. **Please be aware that this only is secure, iff you make sure that users cannot make themselves "members" [by using `@request.data.member:isset = false` in the appropriate API rules](https://github.com/pocketbase/pocketbase/discussions/5486#discussioncomment-10556948)!**
+Then only users whose accounts are made a "member" after creation could access
+the website. **Please be aware that this only is secure, iff you make sure that
+users cannot make themselves "members"
+[by using `@request.data.member:isset = false` in the appropriate API rules](https://github.com/pocketbase/pocketbase/discussions/5486#discussioncomment-10556948)!**
 
 ## Run it yourself
 
-In order to run this yourself, you need to host a `PocketBase` instance and then fork this repo and adjust the values. Deployment needs to happen via vercel. I assume it also works on netlify or coolify with some minor adjustments.
+In order to run this yourself, you need to host a `PocketBase` instance and then
+fork this repo and adjust the values. Deployment needs to happen via vercel. I
+assume it also works on netlify or coolify with some minor adjustments.

api/cookie.mjs

@@ -1,32 +1,33 @@
-import PocketBase from "pocketbase";
+import PocketBase from 'pocketbase'
+import process from 'node:process'
 
 // This endpoint is more or less just to set a httpOnly cookie.
 export async function POST(request) {
   try {
-    const body = await request.json();
-    const token = body.token;
+    const body = await request.json()
+    const token = body.token
 
     if (!token) {
-      return new Response("Auth token is missing", { status: 400 });
+      return new Response('Auth token is missing', { status: 400 })
     }
 
-    const pb = new PocketBase(process.env.POCKETBASE_URL);
+    const pb = new PocketBase(process.env.POCKETBASE_URL)
 
-    pb.authStore.save(token);
+    pb.authStore.save(token)
 
     // I am using sameSite: "None" so deep links from third party apps like whatsapp etc. work.
     // It is very important to not allow server state changes via POST requests when using sameSite: "None".
     // If you later want to use the cookies to authenticate server state changing requests, you need to add CSRF protection (e.g. a CSRF token).
-    const authCookie = pb.authStore.exportToCookie({ sameSite: "None" });
+    const authCookie = pb.authStore.exportToCookie({ sameSite: 'None' })
 
     return new Response(null, {
       status: 200,
       headers: {
-        "Set-Cookie": authCookie,
-        "Content-Type": "application/json",
+        'Set-Cookie': authCookie,
+        'Content-Type': 'application/json',
       },
-    });
-  } catch (error) {
-    return new Response("Internal server error", { status: 500 });
+    })
+  } catch (_) {
+    return new Response('Internal server error', { status: 500 })
   }
 }

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
   presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-};
+}

blog/2019-05-28-first-blog-post.md

@@ -9,4 +9,5 @@ Lorem ipsum dolor sit amet...
 
 <!-- truncate -->
 
-...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies.
+Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

blog/2019-05-29-long-blog-post.md

@@ -11,34 +11,66 @@ Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
 
 <!-- truncate -->
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum
+dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem
+ipsum dolor sit amet

blog/2021-08-26-welcome/index.md

@@ -5,7 +5,9 @@ authors: [slorber, yangshun]
 tags: [facebook, hello, docusaurus]
 ---
 
-[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
+[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by
+the
+[blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
 
 Here are a few tips you might find useful.
 
@@ -26,4 +28,5 @@ A blog post folder can be convenient to co-locate blog post images:
 
 The blog supports tags as well!
 
-**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
+**And if you don't want a blog**: just delete this directory, and use
+`blog: false` in your Docusaurus config.

deno.json

@@ -0,0 +1,20 @@
+{
+  "fmt": {
+    "semiColons": false,
+    "singleQuote": true,
+    "exclude": [
+      "build",
+      ".docusaurus",
+      "static/public/pocketbase.umd.js",
+      "static/public/infima.css"
+    ]
+  },
+  "lint": {
+    "exclude": [
+      "build",
+      ".docusaurus",
+      "static/public/pocketbase.umd.js",
+      "static/public/infima.css"
+    ]
+  }
+}