feat(incidents): landing page

internal/handlers/incidents.go

@@ -0,0 +1,15 @@
+package handlers
+
+import (
+	"net/http"
+
+	"code.tjo.space/mentos1386/zdravko/web/templates/components"
+	"github.com/labstack/echo/v4"
+)
+
+func (h *BaseHandler) Incidents(c echo.Context) error {
+	return c.Render(http.StatusOK, "incidents.tmpl", &components.Base{
+		NavbarActive: GetPageByTitle(Pages, "Incidents"),
+		Navbar:       Pages,
+	})
+}

pkg/server/server.go

@@ -72,6 +72,7 @@ func (s *Server) Start() error {
 
 	// Public
 	s.echo.GET("", h.Index)
+	s.echo.GET("/incidents", h.Incidents)
 
 	// Settings
 	settings := s.echo.Group("/settings")

process-compose.yml

@@ -6,7 +6,7 @@ processes:
     availability:
       restart: "always"
   temporal:
-    command: watchexec -r -e go,tmpl,css just run-temporal
+    command: just run-temporal
     availability:
       restart: "always"
   tailwind:

web/static/css/tailwind.css

@@ -720,6 +720,10 @@ video {
   min-width: 100%;
 }
 
+.max-w-screen-lg {
+  max-width: 1024px;
+}
+
 .max-w-screen-md {
   max-width: 768px;
 }
@@ -1410,8 +1414,8 @@ video {
 }
 
 @media (min-width: 1024px) {
-  .lg\:grid-cols-\[1fr_100\%\] {
-    grid-template-columns: 1fr 100%;
+  .lg\:grid-cols-\[min-content_auto\] {
+    grid-template-columns: min-content auto;
   }
 
   .lg\:px-40 {

web/templates/components/base.tmpl

@@ -27,9 +27,7 @@
       </a>
       {{end}}
     </nav>
-    <div class="container max-w-screen-md flex flex-col mt-20">
-      {{template "main" .}}
-    </div>
+    {{template "main" .}}
     <div class="container mx-auto">
       <footer class="text-center text-gray-500 text-xs mt-8 mb-4">
       &copy; 2024 Zdravko - <a class="hover:underline" href="https://github.com/mentos1386/zdravko">Open Source</a>

web/templates/components/settings.tmpl

@@ -6,7 +6,7 @@
   {{ $path = .SettingsSidebarActive.Path }}
 {{ end }}
 
-<div class="grid grid-cols-1 lg:grid-cols-[1fr_100%] gap-8">
+<div class="container max-w-screen-lg mt-20 grid grid-cols-1 lg:grid-cols-[min-content_auto] gap-8">
   <ul class="sidebar">
     {{range .SettingsSidebar}}
     <li>

web/templates/pages/incidents.tmpl

@@ -0,0 +1,14 @@
+{{define "main"}}
+<div class="container max-w-screen-md flex flex-col mt-20">
+  <section>
+      <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
+          <h1 class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-gray-900 md:text-3xl lg:text-4xl">
+          There are no Incidents, yet.
+          </h1>
+          <p class="mb-8 text-l font-normal text-gray-500 lg:text-l sm:px-8 lg:px-40">
+          Incidents will allow you to inform your users or co-workers about outages and issues.
+          </p>
+      </div>
+  </section>
+</div>
+{{end}}

web/templates/pages/index.tmpl

@@ -33,6 +33,7 @@
 {{end}}
 
 {{define "main"}}
+<div class="container max-w-screen-md flex flex-col mt-20">
   {{ if eq .HealthchecksLength 0 }}
   <section>
       <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
@@ -93,4 +94,5 @@
     {{ end }}
   </div>
   {{ end }}
+</div>
 {{end}}

web/templates/tempaltes.go

@@ -40,6 +40,7 @@ func NewTemplates() *Templates {
 		templates: map[string]*template.Template{
 			"404.tmpl":                            load("pages/404.tmpl"),
 			"index.tmpl":                          load("pages/index.tmpl"),
+			"incidents.tmpl":                      load("pages/incidents.tmpl"),
 			"settings_overview.tmpl":              loadSettings("pages/settings_overview.tmpl"),
 			"settings_workers.tmpl":               loadSettings("pages/settings_workers.tmpl"),
 			"settings_workers_create.tmpl":        loadSettings("pages/settings_workers_create.tmpl"),