refactor: common base template for pages

will allow to add common header and stuff

routes/base_page.go

@@ -0,0 +1,10 @@
+package routes
+
+type baseData struct {
+	Title string
+}
+
+type pageData struct {
+	Base baseData
+	Content interface {}
+}

routes/index_page.go

@@ -17,23 +17,31 @@ func indexPageRoute(
 	roomsM rooms.RoomManager,
 ) http.HandlerFunc {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		var baseFile = "templates/base.gohtml"
 		var templFile = "templates/index.gohtml"
 		session, found := getContextSession(r.Context())
 		if !found {
 			log.Printf("/ session not found, should be impossible")
 			// TODO return error i guess
 		}
-		data := struct {
+		type MainData struct {
 			SessionStringToken string
 			SomeString         string
 			SessionToken 	   sessions.SessionData
-		}{
+		}
+
+		data := pageData {
+			Base: baseData{
+				Title: "hello base template title",
+			},
+			Content: MainData{
 			fmt.Sprintf("%+v", session),
 			"hello!",
 			session,
+		},
 		}
-		tmpl := template.Must(template.ParseFS(templateFs, templFile))
+		tmpl := template.Must(template.ParseFS(templateFs, templFile, baseFile))
-		err := tmpl.Execute(w, data)
+		err := tmpl.ExecuteTemplate(w, "full-page", data)
 		if err != nil {
 			log.Printf("my error in executing template, huh\n %s", err)
 		}

routes/login_page.go

@@ -13,6 +13,10 @@ import (
 	"sunshine.industries/some-automoderation/sessions"
 )
 
+type MainData struct {
+	IsRoomExisting bool
+}
+
 // function to register all http routes for servicing auth pages and logic
 func registerLoginRoutes(
 	templateFs *embed.FS,
@@ -82,9 +86,19 @@ func authedPageMiddleware(
 }
 
 func renderLoginPage(w http.ResponseWriter) {
+	baseFile := "templates/base.gohtml"
 	templFile := "templates/login.gohtml"
-	tmpl := template.Must(template.ParseFS(templateFs, templFile))
+	tmpl := template.Must(template.ParseFS(templateFs, templFile, baseFile))
-	err := tmpl.Execute(w, nil)
+	data := pageData {
+		Base: baseData{
+			Title: "login",
+		},
+		Content: MainData{
+			IsRoomExisting: false,
+		},
+	}
+
+	err := tmpl.ExecuteTemplate(w, "full-page", data)
 	if err != nil {
 		log.Printf("my error in executing template, huh\n %s", err)
 	}
@@ -113,10 +127,10 @@ func createRoomHandler(templateFs *embed.FS,
 			PasswordHash: r.PostFormValue("personalPassword"), // TODO hash the password, not to store
 		}
 		newRoom := rooms.Room{
-			Name:         roomName,
+			Name:           roomName,
-			PasswordHash: r.PostFormValue("roomPassword"), // TODO hash the password, not to store
+			PasswordHash:   r.PostFormValue("roomPassword"), // TODO hash the password, not to store
-			AdminIds:     []rooms.PersonId{person.Id},
+			AdminIds:       []rooms.PersonId{person.Id},
-			Paricipants:  []rooms.PersonId{person.Id},
+			Paricipants:    []rooms.PersonId{person.Id},
 			AllKnownPeople: []rooms.Person{person},
 		}
 		err = roomsM.Save(newRoom)
@@ -226,7 +240,7 @@ func joinRoomHandler(templateFs *embed.FS,
 				PasswordHash: personPass,
 				Id:           rooms.RandomPersonId(),
 			}
-			err := roomsM.Update(context.TODO(), room.Name, func(fromRoom rooms.Room) (toRoom rooms.Room) {
+			err := roomsM.Update(r.Context(), room.Name, func(fromRoom rooms.Room) (toRoom rooms.Room) {
 				log.Printf("/login/join about to modify room %+v", fromRoom)
 				toRoom = fromRoom
 				toRoom.AllKnownPeople = append(toRoom.AllKnownPeople, person)
@@ -245,7 +259,7 @@ func joinRoomHandler(templateFs *embed.FS,
 		// now we have room and person, can create a session
 		// and we've checked password
 
-		err = roomsM.Update(context.TODO(), room.Name, func(fromRoom rooms.Room) (toRoom rooms.Room) {
+		err = roomsM.Update(r.Context(), room.Name, func(fromRoom rooms.Room) (toRoom rooms.Room) {
 			toRoom = fromRoom
 			toRoom.Paricipants = append(toRoom.Paricipants, person.Id)
 			return toRoom

routes/room_page.go

@@ -196,7 +196,8 @@ func roomPageRoute(
 		fmt.Printf("all checks for room %s passed with %+v", roomName, session)
 
 		templFile := "templates/room.gohtml"
-		tmpl := template.Must(template.ParseFS(templateFs, templFile))
+		baseFile := "templates/base.gohtml"
+		tmpl := template.Must(template.ParseFS(templateFs, templFile, baseFile))
 
 		type GestureData struct {
 			Name string
@@ -210,15 +211,21 @@ func roomPageRoute(
 			})
 		}
 
-		pageData := struct {
+		contentData := struct {
 			Room rooms.Room
 			Gestures []GestureData
 		}{
 			Room: room,
 			Gestures: gesturesData,
 		}
+		data := pageData{
+			Base: baseData{
+				Title: "room-lala-from-base",
+			},
+			Content: contentData,
+		}
 
-		err = tmpl.Execute(w, pageData)
+		err = tmpl.ExecuteTemplate(w, "full-page", data)
 		if err != nil {
 			log.Printf("/room/%s my error in executing template, huh\n %s", roomName, err)
 		}

routes/templates/base.gohtml

@@ -0,0 +1,36 @@
+{{ define "full-page" }}
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>{{ .Base.Title }}</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <script
+      src="https://unpkg.com/htmx.org@1.9.6"
+      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="/static/out.css"
+      type="text/css"
+      media="screen"
+    />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <!-- Place favicon.ico in the root directory -->
+  </head>
+  <body>
+    <!--[if lt IE 8]>
+      <p class="browserupgrade">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+        your experience.
+      </p>
+    <![endif]-->
+    {{ template "main-content" .Content }}
+  </body>
+</html>
+{{ end }}

routes/templates/index.gohtml

@@ -28,13 +28,16 @@
         your experience.
       </p>
     <![endif]-->
-
+     {{ define "main-content" }}
-    <h1>Hello</h1>
+     <main>
-    <p>This is index</p>
+       <h1>Hello</h1>
-    <p>Your session is {{ .SessionStringToken }}</p>
+       <p>This is index</p>
-    <p>Some string is {{ .SomeString }}</p>
+       <p>Your session is {{ .SessionStringToken }}</p>
-    <a href="/room/{{ .SessionToken.RoomId }}"
+       <p>Some string is {{ .SomeString }}</p>
-       class="text-blue-700 underline"
+       <a href="/room/{{ .SessionToken.RoomId }}"
-       >You've logged into a room {{ .SessionToken.RoomId }}</a>
+          class="text-blue-700 underline"
+          >You've logged into a room {{ .SessionToken.RoomId }}</a>
+     </main>
+     {{ end }}
   </body>
 </html>

routes/templates/login.gohtml

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <title>Untitled!!!</title>
+    <title>Should be set in base template</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script
@@ -28,6 +28,7 @@
         your experience.
       </p>
     <![endif]-->
+    {{ define "main-content" }}
     <main class="grid grid-rows-[auto,1fr] h-screen">
       <header>
         <h1>Some Automoderation: login page</h1>
@@ -142,5 +143,6 @@
         </script>
       </section>
     </main>
+    {{ end }}
   </body>
 </html>

routes/templates/room.gohtml

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <title>Room {{ .Room.Name }} : Some Automoderation</title>
+    <title>Should be set in base template</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
@@ -21,7 +21,7 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <!-- Place favicon.ico in the root directory -->
   </head>
-  <body class="h-screen">
+  <body>
     <!--[if lt IE 8]>
       <p class="browserupgrade">
         You are using an <strong>outdated</strong> browser. Please
@@ -29,36 +29,41 @@
         your experience.
       </p>
     <![endif]-->
-    <div class="h-full w-full grid">
+    {{ define "main-content" }}
-      <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
+    <main class="h-screen">
-      <div
+      <div class="h-full w-full grid">
-        id="roomTextContainer"
+        <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
-        class="bg-blue-200"
+        <div
-        hx-ext="sse"
+          id="roomTextContainer"
-        sse-connect="/rooms/subscribe?roomName={{ .Room.Name }}"
+          class="bg-blue-200"
-      >
+          hx-ext="sse"
-        {{ block "simpleRoomShow" .Room }}
+          sse-connect="/rooms/subscribe?roomName={{ .Room.Name }}"
-        <!-- TODO use template, not block, have only 'loader' in base place -->
-        <!-- use different template based on 'mobile' query param -->
-        <div sse-swap="message">{{ . }}</div>
-        {{ end }}
-      </div>
-      <div id="controls" class="bg-green-300">
-        <p>Room name is "{{ .Room.Name }}"</p>
-        {{ range .Gestures }}
-        <button
-          hx-get="{{ .Url }}"
-          class="bg-white rounded border-blue-700 border-2"
         >
-          {{ .Name }}
+          {{ block "simpleRoomShow" .Room }}
-        </button>
+          <!-- TODO use template, not block, have only 'loader' in base place -->
-        {{ end }}
+          <!-- use different template based on 'mobile' query param -->
-        <button hx-get="/rooms/releaseHand"
+          <div sse-swap="message">{{ . }}</div>
-          class="bg-white rounded border-yellow-700 border-4"
+          {{ end }}
-                >
+        </div>
-          Release Hand
+        <div id="controls" class="bg-green-300">
-        </button>
+          <p>Room name is "{{ .Room.Name }}"</p>
+          {{ range .Gestures }}
+          <button
+            hx-get="{{ .Url }}"
+            class="bg-white rounded border-blue-700 border-2"
+          >
+            {{ .Name }}
+          </button>
+          {{ end }}
+          <button
+            hx-get="/rooms/releaseHand"
+            class="bg-white rounded border-yellow-700 border-4"
+          >
+            Release Hand
+          </button>
+        </div>
       </div>
-    </div>
+    </main>
+    {{ end }}
   </body>
 </html>