Codespace (#9)

* Add devcontainer.json

* devcontainer.json

* devcontainer

* devcontainer

* Dark mode

* dark mode

* README

* blue black

* kit-game

* kit-game

* Wizard

* rabbit

* Rabbit

* Kit's Game

* poem

* philosophy of lovers draft

* routing

.appengine/app.yaml

@@ -38,6 +38,13 @@ handlers:
     http_headers:
       Content-Type: text/html; charset=utf-8
 
+  - url: /story/the_philosophy_of_lovers
+    static_files: .build/the_philosophy_of_lovers.html
+    upload: .build/the_philosophy_of_lovers.html
+    secure: always
+    http_headers:
+      Content-Type: text/html; charset=utf-8
+
   - url: /story/bridge
     static_files: .build/bridge.html
     upload: .build/bridge.html
@@ -94,6 +101,13 @@ handlers:
     http_headers:
       Content-Type: text/html; charset=utf-8
 
+  - url: /kit
+    static_files: .build/kit.html
+    upload: .build/kit.html
+    secure: always
+    http_headers:
+      Content-Type: text/html; charset=utf-8
+
   - url: /word/quality
     static_files: .build/quality.html
     upload: .build/quality.html

.devcontainer/devcontainer.json

@@ -0,0 +1,51 @@
+{
+    "init": true,
+    "name": "justindfuller.com",
+    "features": {
+        "ghcr.io/devcontainers/features/go:1": {
+            "version": "1.21.4",
+            "golangciLintVersion": "1.55.2"
+        },
+        "ghcr.io/devcontainers/features/node:1": {
+          "version": "20.9.0"
+        }
+    },
+    "hostRequirements": {
+        "cpus": 1
+    },
+    "image": "mcr.microsoft.com/devcontainers/universal:2",
+    "waitFor": "onCreateCommand",
+    "updateContentCommand": "go mod download",
+    "postCreateCommand": "go install github.com/cespare/reflex@latest",
+    "postAttachCommand": {
+      "server": "make server-watch"
+    },
+    "customizations": {
+      "codespaces": {
+        "openFiles": [
+          "README"
+        ]
+      },
+      "vscode": {
+        "settings": {
+          "workbench.iconTheme": "fira-code-material-minimal",
+          "editor.fontFamily": "fira-code-nerd, FiraCode Nerd Font, Consolas, 'Courier New', monospace",
+          "editor.fontLigatures": true
+        },
+        "extensions": [
+          "golang.go",
+          "dbaeumer.vscode-eslint",
+          "ms-vscode.makefile-tools",
+          "DavidAnson.vscode-markdownlint",
+          "eamodio.gitlens",
+          "Entuent.fira-code-nerd-font"
+        ]
+      }
+    },
+    "portsAttributes": {
+      "9000": {
+        "label": "Application",
+        "onAutoForward": "openBrowserOnce"
+      }
+    }
+}

Makefile

@@ -15,6 +15,9 @@ format:
 	@go fmt ./...;
 	@npm run test;
 
+format-watch:
+	@reflex -s -- sh -c "$(MAKE) format";
+
 build:
 	@rm -rf ./.build;
 	@mkdir ./.build;
@@ -23,10 +26,12 @@ build:
 	@curl "http://localhost:9000/make" > ./.build/make.html;
 	@curl "http://localhost:9000/grass" > ./.build/grass.html;
 	@curl "http://localhost:9000/grass/worker.js" > ./.build/grass-service-worker.js;
+	@curl "http://localhost:9000/kit" > ./.build/kit.html;
 	@curl "http://localhost:9000/aphorism" > ./.build/aphorism.html;
 	@curl "http://localhost:9000/poem" > ./.build/poem.html;
 	@curl "http://localhost:9000/story" > ./.build/story.html;
 	@curl "http://localhost:9000/story/the_philosophy_of_trees" > ./.build/the_philosophy_of_trees.html;
+	@curl "http://localhost:9000/story/the_philosophy_of_lovers" > ./.build/the_philosophy_of_lovers.html;
 	@curl "http://localhost:9000/story/bridge" > ./.build/bridge.html;
 	@curl "http://localhost:9000/story/nothing" > ./.build/nothing.html;
 	@curl "http://localhost:9000/review" > ./.build/review.html;
@@ -37,3 +42,6 @@ build:
 	@curl "http://localhost:9000/word/equipoise" > ./.build/equipoise.html;
 	@curl "http://localhost:9000/word/flexible" > ./.build/flexible.html;
 	@cp -r ./image ./.build
+
+build-watch:
+	@reflex -s -- sh -c "$(MAKE) build";

README.md

@@ -2,4 +2,4 @@
 
 [![Build and Deploy to GAE](https://github.com/JustinDFuller/justindfuller.com/actions/workflows/deploy.yml/badge.svg?branch=main)](https://github.com/JustinDFuller/justindfuller.com/actions/workflows/deploy.yml)
 
-[https://www.justindfuller.com](https://www.justindfuller.com)
+[https://www.justindfuller.com](https://www.justindfuller.com)

aphorism/entries.txt

@@ -44,7 +44,7 @@ Truth is only an agreement.
 
 There may be a single physical reality (or maybe not) but there is no reason to think a particular human can perfectly understand and interpret that reality.
 
-Truth can only be subjective and never objective. We cannot experience or interpret anything except as a subject observing and object. 
+Truth can only be subjective and never objective. We cannot experience or interpret anything except as a subject observing an object. 
 
 It is wrong to approach philosophy in search of perfect truth. It is wrong to discount a philosophical argument for being imperfect. The value of philosophy may sometimes be to generate more ideas.
 

aphorism/main.css

@@ -47,3 +47,22 @@ hr {
   margin-top: 30px;
   margin-bottom: 50px;
 }
+
+@media (prefers-color-scheme: dark) {
+  html,
+  body {
+    background-color: #020215;
+    color: white;
+  }
+
+  main > a {
+    color: white;
+  }
+
+  main > a:hover,
+  main > a:focus,
+  main > a:active {
+    background: white;
+    color: #020215;
+  }
+}

main.css

@@ -36,7 +36,7 @@
   }
 
   main > a {
-    color: black;
+    color: #020215;
     padding: 10px 20px;
     border-radius: 2px;
     transition: background 500ms, color 500ms;
@@ -48,7 +48,26 @@
   main > a:hover,
   main > a:focus,
   main > a:active {
-    background: black;
+    background: #020215;
     color: white;
   }
+
+  @media (prefers-color-scheme: dark) {
+    html,
+    body {
+      background-color: #020215;
+      color: white;
+    }
+
+    main > a {
+      color: white;
+    }
+
+    main > a:hover,
+    main > a:focus,
+    main > a:active {
+      background: white;
+      color: #020215;
+    }
+  }
 </style>

main.go

@@ -228,6 +228,15 @@ func main() {
 		}
 	})
 
+	http.HandleFunc("/kit", func(w http.ResponseWriter, r *http.Request) {
+		if err := templates.ExecuteTemplate(w, "/make/kit.template.html", data{
+			Title: "A Game with Kit",
+			Meta:  "kit",
+		}); err != nil {
+			log.Printf("template execution error=%s template=%s", err, "/make/kit.template.html")
+		}
+	})
+
 	http.HandleFunc("/story", func(w http.ResponseWriter, r *http.Request) {
 		if err := templates.ExecuteTemplate(w, "/story/main.template.html", data{
 			Title: "Story",

make/grass.css

@@ -65,28 +65,28 @@ progress {
 select {
   width: 100%;
   padding: 10px 20px;
-  border: 2px solid black;
+  border: 2px solid #020215;
   background: white;
-  color: black;
+  color: #020215;
 }
 
 button {
   padding: 10px 20px;
-  border-top: 2px solid black;
-  border-left: 2px solid black;
-  border-right: 4px solid black;
-  border-bottom: 4px solid black;
+  border-top: 2px solid #020215;
+  border-left: 2px solid #020215;
+  border-right: 4px solid #020215;
+  border-bottom: 4px solid #020215;
   border-radius: 2px;
   background: white;
-  color: black;
+  color: #020215;
   cursor: pointer;
 }
 
 button:hover {
-  border-top: 3px solid black;
-  border-left: 3px solid black;
-  border-right: 3px solid black;
-  border-bottom: 3px solid black;
+  border-top: 3px solid #020215;
+  border-left: 3px solid #020215;
+  border-right: 3px solid #020215;
+  border-bottom: 3px solid #020215;
 }
 
 select,
@@ -117,10 +117,10 @@ label {
   cursor: pointer;
   text-align: center;
   width: 45%;
-  border-top: 2px solid black;
-  border-left: 2px solid black;
-  border-right: 4px solid black;
-  border-bottom: 4px solid black;
+  border-top: 2px solid #020215;
+  border-left: 2px solid #020215;
+  border-right: 4px solid #020215;
+  border-bottom: 4px solid #020215;
   border-radius: 4px;
   margin-bottom: 20px;
 }
@@ -136,10 +136,10 @@ label {
 }
 
 .day:hover {
-  border-right: 3px solid black;
-  border-bottom: 3px solid black;
-  border-left: 3px solid black;
-  border-top: 3px solid black;
+  border-right: 3px solid #020215;
+  border-bottom: 3px solid #020215;
+  border-left: 3px solid #020215;
+  border-top: 3px solid #020215;
 }
 
 .day .icon {
@@ -173,3 +173,26 @@ label {
 .day .temperature {
   min-width: 70px;
 }
+
+@media (prefers-color-scheme: dark) {
+  html,
+  body {
+    background-color: #020215;
+    color: white;
+  }
+
+  main > a {
+    color: white;
+  }
+
+  main > a:hover,
+  main > a:focus,
+  main > a:active {
+    background: white;
+    color: #020215;
+  }
+
+  .day {
+    color: #020215;
+  }
+}