✨ Added localstorage hook and dismissable welcome message

Makefile

@@ -1,8 +1,8 @@
 build-frontend:
-	cd frontend && pnpm build
+	pnpm --dir frontend build
 
 build:
-	go build -o bin/tiny-todo main.go
+	make build-frontend && go build -o bin/tiny-todo main.go
 
 run:
 	make build-frontend && go run main.go serve

cmd/serve.go

@@ -1,9 +1,8 @@
 package cmd
 
 import (
-	"fmt"
-
 	"github.com/lukecarr/tiny-todo/internal/server"
+	"github.com/moducate/x/osx"
 	"github.com/spf13/cobra"
 )
 
@@ -13,7 +12,7 @@ func MakeServeCmd() *cobra.Command {
 		Short: "Serves tiny-todo's server",
 		Run: func(cmd *cobra.Command, args []string) {
 			srv := server.New("")
-			srv.Listen(fmt.Sprintf(":3000"))
+			srv.Listen(osx.Getenv("TINY_TODO_ADDR", ":3000"))
 		},
 	}
 }

frontend/hooks/local-storage.ts

@@ -0,0 +1,43 @@
+import { useState } from 'preact/hooks'
+
+export function useLocalStorage<T = any>(key: string, initialValue: T): [T, (value: T) => void] {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === "undefined") {
+      return initialValue
+    }
+
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key)
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue
+    } catch (error) {
+      // If error also return initialValue
+      console.log(error)
+      return initialValue
+    }
+  })
+
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: T) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value
+      // Save state
+      setStoredValue(valueToStore)
+      // Save to local storage
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(key, JSON.stringify(valueToStore))
+      }
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error)
+    }
+  };
+
+  return [storedValue, setValue]
+}

frontend/package.json

@@ -17,6 +17,7 @@
     "typescript": "4.6.3",
     "vite": "2.9.1",
     "vite-plugin-windicss": "1.8.3",
+    "vite-tsconfig-paths": "3.4.1",
     "windicss": "3.5.1"
   },
   "volta": {

frontend/src/app.tsx

@@ -1,5 +1,5 @@
-import Header from './components/Header'
-import Router from './components/Router'
+import Header from 'src/components/Header'
+import Router from 'src/components/Router'
 
 export function App() {
   return (

frontend/src/components/Header.tsx

@@ -1,10 +1,11 @@
 import type { FunctionalComponent } from 'preact'
+import Welcome from './Welcome'
 
 const Header: FunctionalComponent = () => {
   return <header>
     <h1 class="font-extrabold text-3xl">tiny-todo</h1>
-    <blockquote class="my-4 border-l-4 border-gray-600 pl-3 font-semibold">A simple todo app that's: tiny 🐜, lightweight 🔦🏋️‍♀️, and performant ⚡. Built using Go &amp; Preact!</blockquote>
-    <nav>
+    <Welcome />
+    <nav class="mt-4">
       <a href="/">todo</a>
       <span> &#9679; </span>
       <a href="/about">about</a>

frontend/src/components/Router.tsx

@@ -1,6 +1,6 @@
 import PreactRouter from 'preact-router'
 import AsyncRoute from 'preact-async-route'
-import Todos from '../routes/todos'
+import Todos from 'src/routes/todos'
 
 import type { FunctionalComponent } from 'preact'
 

frontend/src/components/Welcome.tsx

@@ -0,0 +1,17 @@
+import { useLocalStorage } from 'hooks/local-storage'
+
+import type { FunctionalComponent } from 'preact'
+
+const Welcome: FunctionalComponent = () => {
+  const [hidden, setHidden] = useLocalStorage('hideWelcome', false)
+
+  if (hidden) return null
+
+  return <section class="mt-4 border-l-4 border-gray-600 p-2 pl-3 font-semibold bg-gray-100">
+    <h3>Welcome to tiny-todo!</h3>
+    <p>A simple todo app that's: tiny 🐜, lightweight 🔦🏋️‍♀️, and performant ⚡. Built using Go &amp; Preact!</p>
+    <button class="text-sm font-semibold hover:font-bold underline underline-dotted underline-black" onClick={() => setHidden(true)}>don't show again</button>
+  </section>
+}
+
+export default Welcome

frontend/src/main.tsx

@@ -1,5 +1,5 @@
 import { render } from 'preact'
-import { App } from './app'
+import { App } from 'src/app'
 
 import 'virtual:windi.css'
 

frontend/src/routes/todos.tsx

@@ -1,6 +1,7 @@
-import type { FunctionalComponent } from 'preact'
 import { useEffect } from 'preact/hooks'
 
+import type { FunctionalComponent } from 'preact'
+
 const Todos: FunctionalComponent = () => {
   useEffect(() => {
     document.title = 'tiny-todo'

frontend/tsconfig.json

@@ -16,7 +16,8 @@
     "noEmit": true,
     "jsx": "preserve",
     "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment"
+    "jsxFragmentFactory": "Fragment",
+    "baseUrl": "."
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

frontend/vite.config.ts

@@ -1,11 +1,13 @@
 import { defineConfig } from 'vite'
 import preact from '@preact/preset-vite'
 import WindiCSS from 'vite-plugin-windicss'
+import tsConfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig({
   plugins: [
     preact(),
     WindiCSS(),
+    tsConfigPaths(),
   ],
   resolve: {
     alias: {

go.mod

@@ -6,8 +6,10 @@ require (
 	github.com/andybalholm/brotli v1.0.4 // indirect
 	github.com/davecgh/go-spew v1.1.0 // indirect
 	github.com/gofiber/fiber/v2 v2.31.0 // indirect
+	github.com/gofiber/rewrite/v2 v2.1.21 // indirect
 	github.com/inconshreveable/mousetrap v1.0.0 // indirect
-	github.com/klauspost/compress v1.15.0 // indirect
+	github.com/klauspost/compress v1.15.1 // indirect
+	github.com/moducate/x v0.0.0-20210723175934-0d481c1ebf85 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/spf13/cobra v1.4.0 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
@@ -16,6 +18,6 @@ require (
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasthttp v1.34.0 // indirect
 	github.com/valyala/tcplisten v1.0.0 // indirect
-	golang.org/x/sys v0.0.0-20220227234510-4e6760a101f9 // indirect
+	golang.org/x/sys v0.0.0-20220403205710-6acee93ad0eb // indirect
 	gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c // indirect
 )

go.sum

@@ -5,10 +5,16 @@ github.com/davecgh/go-spew v1.1.0 h1:ZDRjVQ15GmhC3fiQ8ni8+OwkZQO4DARzQgrnXU1Liz8
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/gofiber/fiber/v2 v2.31.0 h1:M2rWPQbD5fDVAjcoOLjKRXTIlHesI5Eq7I5FEQPt4Ow=
 github.com/gofiber/fiber/v2 v2.31.0/go.mod h1:1Ega6O199a3Y7yDGuM9FyXDPYQfv+7/y48wl6WCwUF4=
+github.com/gofiber/rewrite/v2 v2.1.21 h1:GgTY4KDZq+N+MwaAcUYVsuzeLPt2WwG+sgHGqGvmMvo=
+github.com/gofiber/rewrite/v2 v2.1.21/go.mod h1:eFgCZ3GjgdlgwVRtwt9hHpW8Zby9pjkzzAM0z1t3kbk=
 github.com/inconshreveable/mousetrap v1.0.0 h1:Z8tu5sraLXCXIcARxBp/8cbvlwVa7Z1NHg9XEKhtSvM=
 github.com/inconshreveable/mousetrap v1.0.0/go.mod h1:PxqpIevigyE2G7u3NXJIT2ANytuPF1OarO4DADm73n8=
 github.com/klauspost/compress v1.15.0 h1:xqfchp4whNFxn5A4XFyyYtitiWI8Hy5EW59jEwcyL6U=
 github.com/klauspost/compress v1.15.0/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk=
+github.com/klauspost/compress v1.15.1 h1:y9FcTHGyrebwfP0ZZqFiaxTaiDnUrGkJkI+f583BL1A=
+github.com/klauspost/compress v1.15.1/go.mod h1:/3/Vjq9QcHkK5uEr5lBEmyoZ1iFhe47etQ6QUkpK6sk=
+github.com/moducate/x v0.0.0-20210723175934-0d481c1ebf85 h1:eQ8tsLD5xI3yJ9Om9esEK2omZqkQdHafn1zfV7e90p8=
+github.com/moducate/x v0.0.0-20210723175934-0d481c1ebf85/go.mod h1:4UAS1QW3jUd33HIxJok2XKEIPsYqn1IZ+PoM9GokKyU=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/russross/blackfriday/v2 v2.1.0/go.mod h1:+Rmxgy9KzJVeS9/2gXHxylqXiyQDYRxCVz55jmeOWTM=
@@ -35,6 +41,8 @@ golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20211216021012-1d35b9e2eb4e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220227234510-4e6760a101f9 h1:nhht2DYV/Sn3qOayu8lM+cU1ii9sTLUeBQwQQfUHtrs=
 golang.org/x/sys v0.0.0-20220227234510-4e6760a101f9/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220403205710-6acee93ad0eb h1:PVGECzEo9Y3uOidtkHGdd347NjLtITfJFO9BxFpmRoo=
+golang.org/x/sys v0.0.0-20220403205710-6acee93ad0eb/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=