copy layout from kontor-api

kontor-fiber/cmd/kontor/main.go

@@ -5,10 +5,12 @@ import (
 	"kontor-api-fiber/pkg/schema"
 	"kontor-api-fiber/pkg/web"
 	"log"
+	"time"
 
 	jwtware "github.com/gofiber/contrib/v3/jwt"
 	"github.com/gofiber/fiber/v3"
 	"github.com/gofiber/fiber/v3/middleware/logger"
+	"github.com/gofiber/fiber/v3/middleware/static"
 	"github.com/gofiber/template/html/v3"
 )
 
@@ -22,7 +24,8 @@ func main() {
 	engine := html.New("./views", ".html")
 
 	app := fiber.New(fiber.Config{
-		Views: engine,
+		Views:       engine,
+		ViewsLayout: "layouts/main",
 	})
 
 	//app.Use(logger.New())
@@ -38,8 +41,20 @@ func main() {
 	api.Use(logger.New())
 	handler.SetupComicRoutes(api)
 	handler.SetupMediaRoutes(api)
+
+	app.Get("/*", static.New("./static", static.Config{
+		Browse:        false,
+		MaxAge:        3600,
+		CacheDuration: 10 * time.Second,
+		NotFoundHandler: func(c fiber.Ctx) error {
+			return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
+				"error": "asset not found",
+				"path":  c.Path(),
+			})
+		},
+	}))
 	// Listen on port 8900
-	app.Listen(":8500")
+	app.Listen(":8510")
 
 	log.Println("Kontor finished")
 }

kontor-fiber/pkg/schema/media.go

@@ -24,6 +24,20 @@ type MediaFile struct {
 	MediaActorFiles []MediaActorFile `bun:"rel:has-many,join:id=media_file_id"`
 }
 
+type MediaLoFi struct {
+	bun.BaseModel `bun:"table:media_lofi"`
+
+	ID             string    `bun:"id,pk"`
+	CreatedAt      time.Time `bun:"created_date,nullzero,notnull,default:current_timestamp"`
+	UpdatedAt      time.Time `bun:"last_modified_date,nullzero,notnull,default:current_timestamp"`
+	Version        int       `bun:"version,default:0"`
+	WebLink        string    `bun:"url,unique:url"`
+	Review         bool      `bun:"review"`
+	ShouldDownload bool      `bun:"should_download"`
+	Title          string    `bun:"title"`
+	FileName       string    `bun:"file_name"`
+}
+
 type MediaActor struct {
 	bun.BaseModel `bun:"table:media_actor"`
 

kontor-fiber/static/style/main.css

@@ -0,0 +1,172 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial;
+    padding: 10px;
+    background: lightgrey;
+}
+
+/* Header/Blog Title */
+.header {
+    padding: 30px;
+    text-align: center;
+    background-color: lightblue;
+}
+
+.header h1 {
+    font-size: 50px;
+}
+
+/* Style the top navigation bar */
+.topnav {
+    overflow: hidden;
+    background-color: darkgrey;
+}
+
+/* Style the topnav links */
+.topnav a {
+    float: left;
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+/* Change color on hover */
+.topnav a:hover {
+    background-color: #ddd;
+    color: black;
+}
+
+.subnav {
+    overflow: hidden;
+    background-color: grey;
+}
+
+.subnav a {
+    float: left;
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+.form-inline {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    padding-top: 10px;
+    padding-left: 20px;
+}
+
+.form-inline label {
+    margin: 5px 10px 5px 0;
+}
+
+.form-inline input {
+    padding-right: 50px;
+    margin-right: 10px;
+}
+
+.form-inline button {
+    padding: 10px 20px;
+    background-color: dodgerblue;
+    border: 1px solid #ddd;
+    color: white;
+    border-radius: 10px;
+}
+
+.form-inline button:hover {
+    background-color: royalblue;
+}
+
+.pill-nav a {
+    display: inline-block;
+    color: white;
+    background-color: dodgerblue;
+    text-align: center;
+    padding: 10px;
+    text-decoration: none;
+    border-radius: 10px;
+    margin-left: 20px;
+}
+
+/* Change the color of links on mouse-over */
+.pill-nav a:hover {
+    background-color: royalblue;
+    color: white;
+}
+
+/* Add a color to the active/current link */
+.pill-nav a.active {
+    background-color: royalblue;
+    color: white;
+}
+
+.maincolumn {
+    float:left;
+    width: 100%;
+}
+/* Create two unequal columns that floats next to each other */
+/* Left column */
+.leftcolumn {   
+    float: left;
+    width: 75%;
+}
+
+/* Right column */
+.rightcolumn {
+    float: left;
+    width: 25%;
+    background-color: #f1f1f1;
+    padding-left: 20px;
+}
+
+/* Fake image */
+.fakeimg {
+    background-color: #aaa;
+    width: 100%;
+    padding: 20px;
+}
+
+/* Add a card effect for articles */
+.card {
+    background-color: white;
+    padding: 20px;
+    margin-top: 20px;
+}
+
+/* Clear floats after the columns */
+.row::after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+/* Footer */
+.footer {
+    padding: 20px;
+    text-align: center;
+    background: #ddd;
+    margin-top: 20px;
+}
+
+/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 800px) {
+    .leftcolumn, .rightcolumn {   
+        width: 100%;
+        padding: 0;
+    }
+}
+
+/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
+@media screen and (max-width: 400px) {
+    .topnav a {
+        float: none;
+        width: 100%;
+    }
+}

kontor-fiber/views/index.html

@@ -1,5 +1 @@
-{{template "partials/header" .}}
-
 <h1>{{.Title}}</h1>
-
-{{template "partials/footer" .}}

kontor-fiber/views/layouts/main.html

@@ -1,12 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
-<html>
+<html lang="de-DE">
-
+  <head>
-<head>
+    <meta charset="utf-8" />
-    <title>Main</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-</head>
+    <link
-
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
-<body>
+      rel="stylesheet"
-    {{embed}}
+      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
-</body>
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="/style/main.css" />
+    <title>{{.Title}}</title>
+  </head>
 
+  <body>
+    <div class="header">{{template "partials/header" .}}</div>
+    {{template "partials/navbar" .}}
+    <div class="content">{{embed}}</div>
+    <div class="footer">{{template "partials/footer" .}}</div>
+  </body>
 </html>

kontor-fiber/views/partials/header.html

@@ -1 +1 @@
-<h2>Header</h2>
+<h2>Header</h2>

kontor-fiber/views/partials/media_nav.html

@@ -0,0 +1,6 @@
+<div class="subnav">
+  <a href="/media/files/">MediaFiles</a>
+  <a href="/media/actors/">MediaActors</a>
+  <a href="/media/videos/">MediaVideos</a>
+  <a href="/media/lofi/">MediaLofi</a>
+</div>

kontor-fiber/views/partials/navbar.html

@@ -0,0 +1,7 @@
+<div class="topnav">
+  <a href="/">Kontor</a>
+  <a href="/comic/comics">Comics</a>
+  <a href="/media/files">Media</a>
+  <a style="float:right" href="/login/">Login</a></li>
+</div>
+