styling

cmd/web/app-links.go

@@ -24,21 +24,27 @@ func getStarterLinks(baseUri string) []AppLink {
 		{
 			Title: "User Management",
 			Description: "Create users and manage their access",
-			Image: "/img/panel.jpg",
+			Image: "/static/img/users.png",
 			Url: "https://panel." + baseUri,
 		},
 		{
 			Title: "Nextcloud",
 			Description: "Email, Files, Documents",
-			Image: "/img/nextcloud.jpg",
+			Image: "/static/img/nextcloud.png",
 			Url: "https://nextcloud." + baseUri,
 		},
 		{
 			Title: "Vaultwarden",
 			Description: "Password Management",
-			Image: "/img/vaultwarden.jpg",
+			Image: "/static/img/vaultwarden.png",
 			Url: "https://vaultwarden." + baseUri,
 		},
+		{
+			Title: "Power DNS",
+			Description: "DNS Management",
+			Image: "/static/img/powerdns.png",
+			Url: "https://powerdns." + baseUri,
+		},
 	}
 }
 
@@ -47,13 +53,13 @@ func getCreatorLinks(baseUri string) []AppLink {
 		{
 			Title: "Element and Matrix",
 			Description: "Team Chat",
-			Image: "/img/element.jpg",
+			Image: "/static/img/element.png",
 			Url: "https://element." + baseUri,
 		},
 		{
 			Title: "Wordpress",
 			Description: "Your website",
-			Image: "/img/wordpress.jpg",
+			Image: "/static/img/wordpress.png",
 			Url: "https://" + baseUri,
 		},
 	}
@@ -66,13 +72,13 @@ func getTeamsLinks(baseUri string) []AppLink {
 		{
 			Title: "Espo CRM",
 			Description: "Customer relationship manager",
-			Image: "/img/espo.jpg",
+			Image: "/static/img/espo.png",
 			Url: "https://espocrm." + baseUri,
 		},
 		{
 			Title: "FreeScout",
 			Description: "Customer Help Desk",
-			Image: "/img/freescout.jpg",
+			Image: "/static/img/freescout.png",
 			Url: "https://freescout." + baseUri,
 		},
 	}
@@ -85,37 +91,37 @@ func getEnterpriseLinks(baseUri string) []AppLink {
 		{
 			Title: "Jitsi",
 			Description: "Video Chat",
-			Image: "/img/jitsi.jpg",
+			Image: "/static/img/jitsi.png",
 			Url: "https://jitsi." + baseUri,
 		},
 		{
 			Title: "Listmonk",
 			Description: "Email Marketing",
-			Image: "/img/listmonk.jpg",
+			Image: "/static/img/listmonk.png",
 			Url: "https://listmonk." + baseUri,
 		},
 		{
 			Title: "Baserow",
 			Description: "Visual Databases",
-			Image: "/img/baserow.jpg",
+			Image: "/static/img/baserow.png",
 			Url: "https://baserow." + baseUri,
 		},
 		{
 			Title: "Bookstack",
 			Description: "Wiki Knowledgebase",
-			Image: "/img/bookstack.jpg",
+			Image: "/static/img/bookstack.png",
 			Url: "https://bookstack." + baseUri,
 		},
 		{
 			Title: "Gitea",
 			Description: "GIT Source Control",
-			Image: "/img/gitea.jpg",
+			Image: "/static/img/gitea.png",
 			Url: "https://gitea." + baseUri,
 		},
 		{
 			Title: "Castopod",
 			Description: "Podcast Distribution",
-			Image: "/img/castopod.jpg",
+			Image: "/static/img/castopod.png",
 			Url: "https://castopod." + baseUri,
 		},	
 	}

cmd/web/handlers.go

@@ -23,3 +23,11 @@ func (app *application) home(writer http.ResponseWriter, request *http.Request)
 
 	app.render(writer, request, http.StatusOK, "home.tmpl.html", data)
 }
+
+func (app *application) notFound(writer http.ResponseWriter, request *http.Request) {
+	app.render(writer, request, http.StatusNotFound, "404.tmpl.html", templateData{})
+}
+
+func (app *application) vpn(writer http.ResponseWriter, request *http.Request) {
+	app.render(writer, request, http.StatusOK, "vpn.tmpl.html", templateData{})
+}

cmd/web/main.go

@@ -8,6 +8,11 @@ import (
 	"flag"
 )
 
+//TODO Get images for each app
+//TODO Stylesheet
+//TODO VPN Page
+//TODO Auth through LDAP for VPN page
+
 type application struct {
 	logger *slog.Logger
 	templateCache map[string]*template.Template

cmd/web/routes.go

@@ -9,6 +9,8 @@ func (app *application) routes() *http.ServeMux {
 	mux.Handle("GET /static/", http.StripPrefix("/static", fileServer))
 	//Set up routes
 	mux.HandleFunc("GET /{$}", app.home)
+	mux.HandleFunc("GET /", app.notFound)
+	mux.HandleFunc("GET /vpn/{$}", app.vpn)
 
 	return mux
 }

ui/html/base.tmpl.html

@@ -5,17 +5,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Federated Core Dashboard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/static/css/styles.css" />
 </head>
 <body>
-    <header>
-        <h1>Federated Computer</h1>
+    <header class="header main-grid">
+        <h1 class="header__title">Federated Core</h1>
     </header>
     {{template "nav" .}}
-    <main>
+    <main class="main main-grid">
         {{template "main" .}}
     </main>
-    <footer>
+    <footer class="footer main-grid">
         Powered by Federated Computer
     </footer>
 </body>

ui/html/pages/404.tmpl.html

@@ -0,0 +1,5 @@
+{{define "title"}}Page Not Found{{end}}
+
+{{define "main"}}
+    <h2 class="four-oh-four-title">Page Not Found</h2>
+{{end}}

ui/html/pages/home.tmpl.html

@@ -5,15 +5,16 @@
         <h2 class="app-links-title">Apps for {{.BaseUri}} on the {{.Tier}} tier.</h2>
         <div class="app-links-container">
             <!-- LOOP HERE -->
-             {{range .AppLinks}}
-             <a href="{{.Url}}" class="app-link-card-link">
-                <div class="app-link-card">
-                    <h3 class="app-link-card__title">{{.Title}}</h3>
-                    <p class="app-link-card__description">{{.Description}}</p>
-                    <img src="{{.Image}}" alt="" class="app-link-card__image">
-                </div>
-            </a>
-             {{end}}
+            {{range .AppLinks}}
+                <a href="{{.Url}}" class="app-link-card-link">
+                    <div class="app-link-card">
+                        <img src="{{.Image}}" alt="" class="app-link-card__image">
+                        <h3 class="app-link-card__title">{{.Title}}</h3>
+                        <p class="app-link-card__description">{{.Description}}</p>
+                    </div>
+                </a>
+            {{end}}
         </div>
+        <p>All Logos are Property of Their Respective Project</p>
     </section>
 {{end}}

ui/html/pages/vpn.tmpl.html

@@ -0,0 +1,5 @@
+{{define "title"}}Page Not Found{{end}}
+
+{{define "main"}}
+    <h2>VPN Info</h2>
+{{end}}

ui/html/partials/nav.tmpl.html

@@ -1,7 +1,8 @@
 {{define "nav"}}
 <nav class="nav">
-    <a href="/" class="nav-link">Home</a>
-    <a href="/" class="nav-link">Login</a>
-    <a href="/" class="nav-link">VPN</a>
+    <ul class="nav-list">
+        <li class="nav-link"><a href="/">Apps</a></li>
+        <li class="nav-link"><a href="/vpn">VPN Info</a></li>
+    </ul>
 </nav>
 {{end}}

ui/static/css/styles.css

@@ -0,0 +1,75 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+/*
+2. Remove default margin
+*/
+* {
+    margin: 0;
+    font-family: "Open Sans", sans-serif;
+}
+/*
+Typographic tweaks!
+3. Add accessible line-height
+4. Improve text rendering
+*/
+body {
+    line-height: 1.6;
+    font-size: 1.25rem;
+    -webkit-font-smoothing: antialiased;
+}
+/*
+5. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+}
+/*
+6. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+    font: inherit;
+}
+/*
+7. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+}
+/*
+8. Create a root stacking context
+*/
+#root, #__next {
+    isolation: isolate;
+}
+
+/* TYPE */
+
+h1 {
+    font-size: 3rem;
+}
+
+/* GRID */
+
+.main-grid {
+    display: grid;
+    grid-template-columns: minmax(1em 1fr) minmax(1em 1fr) minmax(1em 1fr);
+}
+
+/* HEADER */
+
+.header {
+    width: 100%;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+/* Nav */
+
+.nav {
+
+}