Home Explore Help
Register Sign In
aeth
/
keiji
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

added a cool side menu thing

AETH-erial 2 months ago
parent
ae1a9f1b44
commit
04fee77cb6
11 changed files with 91 additions and 51 deletions
Unified View Show Diff Stats
  1. 7 7
      html/custom.css
  2. 0 9
      html/js/slide.js
  3. 11 0
      html/slide.js
  4. 11 0
      html/templates/admin.html
  5. 12 0
      html/templates/blogpost.html
  6. 11 0
      html/templates/digital_art.html
  7. 10 14
      html/templates/home.html
  8. 5 7
      html/templates/menu.html
  9. 14 2
      html/templates/navigation.html
  10. 4 6
      pkg/controller/cdn_handlers.go
  11. 6 6
      pkg/controller/html_handlers.go

+ 7 - 7
html/css/custom.css → html/custom.css
View File 

@@ -11,7 +11,7 @@
 
     padding-top: 60px; /* Place content 60px from the top */
 
     padding-top: 60px; /* Place content 60px from the top */
 
     transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
 
     transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
 
   }
 
   }
 
-  
+
 
   /* The navigation menu links */
 
   /* The navigation menu links */
 
   .sidenav a {
 
   .sidenav a {
 
     padding: 8px 8px 8px 32px;
 
     padding: 8px 8px 8px 32px;
 
@@ -20,13 +20,14 @@
 
     color: #818181;
 
     color: #818181;
 
     display: block;
 
     display: block;
 
     transition: 0.3s;
 
     transition: 0.3s;
 
+
 
   }
 
   }
 
-  
+
 
   /* When you mouse over the navigation links, change their color */
 
   /* When you mouse over the navigation links, change their color */
 
   .sidenav a:hover {
 
   .sidenav a:hover {
 
     color: #f1f1f1;
 
     color: #f1f1f1;
 
   }
 
   }
 
-  
+
 
   /* Position and style the close button (top right corner) */
 
   /* Position and style the close button (top right corner) */
 
   .sidenav .closebtn {
 
   .sidenav .closebtn {
 
     position: absolute;
 
     position: absolute;
 
@@ -35,15 +36,14 @@
 
     font-size: 36px;
 
     font-size: 36px;
 
     margin-left: 50px;
 
     margin-left: 50px;
 
   }
 
   }
 
-  
+
 
   /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
 
   /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
 
   #main {
 
   #main {
 
     transition: margin-left .5s;
 
     transition: margin-left .5s;
 
-    padding: 20px;
 
   }
 
   }
 
-  
+
 
   /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
 
   /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
 
   @media screen and (max-height: 450px) {
 
   @media screen and (max-height: 450px) {
 
     .sidenav {padding-top: 15px;}
 
     .sidenav {padding-top: 15px;}
 
     .sidenav a {font-size: 18px;}
 
     .sidenav a {font-size: 18px;}
 
-  } 
+  }

+ 0 - 9
html/js/slide.js
View File 

@@ -1,9 +0,0 @@
 
-/* Set the width of the side navigation to 250px */
 
-function openNav() {
 
-    document.getElementById("mySidenav").style.width = "250px";
 
-  }
 
-
 
-  /* Set the width of the side navigation to 0 */
 
-  function closeNav() {
 
-    document.getElementById("mySidenav").style.width = "0";
 
-  }

+ 11 - 0
html/slide.js
View File 

@@ -0,0 +1,11 @@
 
+/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
 
+function openNav() {
 
+  document.getElementById("mySidenav").style.width = "400px";
 
+  document.getElementById("main").style.marginLeft = "400px";
 
+}
 
+
 
+/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
 
+function closeNav() {
 
+  document.getElementById("mySidenav").style.width = "0";
 
+  document.getElementById("main").style.marginLeft = "0";
 
+}

+ 11 - 0
html/templates/admin.html
View File 

@@ -6,12 +6,16 @@
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <link rel="stylesheet" href="/api/v1/style/bootstrap.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/bootstrap.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/mdb/mdb.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/mdb/mdb.min.css">
 
+        <link rel="stylesheet" href="/api/v1/cdn/custom.css">
 
+
 
     </head>
 
     </head>
 
 
 
 <body style="background-color: rgb(56, 56, 56);
 
 <body style="background-color: rgb(56, 56, 56);
 
                 background-image: url(/api/v1/images/blackandwhitedesign.jpg);
 
                 background-image: url(/api/v1/images/blackandwhitedesign.jpg);
 
                 background-repeat: no-repeat;
 
                 background-repeat: no-repeat;
 
                 background-size: cover;">
 
                 background-size: cover;">
 
+    <div id="main">
 
+
 
     {{ template "navigation.html" .navigation }}
 
     {{ template "navigation.html" .navigation }}
 
     <div class="container-fluid row">
 
     <div class="container-fluid row">
 
         {{ range .Tables }}
 
         {{ range .Tables }}
 
@@ -34,6 +38,13 @@
 
                 </div>
 
                 </div>
 
             {{ end }}
 
             {{ end }}
 
     </div>
 
     </div>
 
+    <div id="mySidenav" class="sidenav">
 
+        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 
+        {{ range .menu.MenuLinks }}
 
+            <a href="{{ .MenuLink }}" style="font-family: monospace;">{{ .LinkText }}</a>
 
+        {{ end }}
 
+      </div>
 
+    </div>
 
     <script type="text/javascript" src="/api/v1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
     <script type="text/javascript" src="/api/v1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
     <script src="/api/v1/htmx/htmx.min.js"></script>
 
     <script src="/api/v1/htmx/htmx.min.js"></script>
 
     <script src="/api/v1/htmx/json-enc.js"></script>
 
     <script src="/api/v1/htmx/json-enc.js"></script>

+ 12 - 0
html/templates/blogpost.html
View File 

@@ -6,8 +6,12 @@
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <link rel="stylesheet" href="/api/v1/style/bootstrap.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/bootstrap.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/mdb/mdb.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/mdb/mdb.min.css">
 
+        <link rel="stylesheet" href="/api/v1/cdn/custom.css">
 
+
 
     </head>
 
     </head>
 
     <body style="background-color: rgb(56, 56, 56);">
 
     <body style="background-color: rgb(56, 56, 56);">
 
+        <div id="main">
 
+
 
         {{ template "navigation.html" .navigation }}
 
         {{ template "navigation.html" .navigation }}
 
         <div class="container-fluid row">
 
         <div class="container-fluid row">
 
             <div class="col"></div>
 
             <div class="col"></div>
 
@@ -24,7 +28,15 @@
 
             </div>
 
             </div>
 
             <div class="col"></div>
 
             <div class="col"></div>
 
         </div>
 
         </div>
 
+        <div id="mySidenav" class="sidenav">
 
+            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 
+            {{ range .menu.MenuLinks }}
 
+                <a href="{{ .MenuLink }}" style="font-family: monospace;">{{ .LinkText }}</a>
 
+            {{ end }}
 
+          </div>
 
+        </div>
 
         <script type="text/javascript" src="/api/v1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
         <script type="text/javascript" src="/api/v1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
+        <script src="/api/v1/cdn/slide.js"></script>
 
         <script src="/api/v1/htmx/htmx.min.js"></script>
 
         <script src="/api/v1/htmx/htmx.min.js"></script>
 
         <script src="/api/v1/htmx/json-enc.js"></script>
 
         <script src="/api/v1/htmx/json-enc.js"></script>
 
     </body>
 
     </body>

+ 11 - 0
html/templates/digital_art.html
View File 

@@ -7,8 +7,11 @@
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <link rel="stylesheet" href="/api/v1/style/bootstrap.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/bootstrap.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/mdb/mdb.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/mdb/mdb.min.css">
 
+        <link rel="stylesheet" href="/api/v1/cdn/custom.css">
 
     </head>
 
     </head>
 
     <body style="background-color: rgb(56, 56, 56);">
 
     <body style="background-color: rgb(56, 56, 56);">
 
+    <div id="main">
 
+
 
         {{ template "navigation.html" .navigation }}
 
         {{ template "navigation.html" .navigation }}
 
         <div class="container-fluid row">
 
         <div class="container-fluid row">
 
             {{ range .images }}
 
             {{ range .images }}
 
@@ -22,7 +25,15 @@
 
                 </div>
 
                 </div>
 
             {{ end }}
 
             {{ end }}
 
             </div>
 
             </div>
 
+        <div id="mySidenav" class="sidenav">
 
+            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 
+            {{ range .menu.MenuLinks }}
 
+                <a href="{{ .MenuLink }}" style="font-family: monospace;">{{ .LinkText }}</a>
 
+            {{ end }}
 
+          </div>
 
+        </div>
 
         <script type="text/javascript" src="/api/v1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
         <script type="text/javascript" src="/api/v1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
+        <script src="/api/v1/cdn/slide.js"></script>
 
         <script src="/api/v1/htmx/htmx.min.js"></script>
 
         <script src="/api/v1/htmx/htmx.min.js"></script>
 
         <script src="/api/v1/htmx/json-enc.js"></script>
 
         <script src="/api/v1/htmx/json-enc.js"></script>
 
     </body>
 
     </body>

+ 10 - 14
html/templates/home.html
View File 

@@ -6,9 +6,12 @@
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <link rel="stylesheet" href="/api/v1/style/bootstrap.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/bootstrap.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/mdb/mdb.min.css">
 
         <link rel="stylesheet" href="/api/v1/style/mdb/mdb.min.css">
 
-        <link rel="stylesheet" href="/api/v1/style/custom.css">
 
+        <link rel="stylesheet" href="/api/v1/cdn/custom.css">
 
     </head>
 
     </head>
 
+
 
     <body style="background-color: rgb(56, 56, 56);">
 
     <body style="background-color: rgb(56, 56, 56);">
 
+    <div id="main">
 
+
 
         {{ template "navigation.html" .navigation }}
 
         {{ template "navigation.html" .navigation }}
 
         <div class="container-fluid row">
 
         <div class="container-fluid row">
 
         {{ range .listings }}
 
         {{ range .listings }}
 
@@ -22,25 +25,18 @@
 
 
 
         <div id="mySidenav" class="sidenav">
 
         <div id="mySidenav" class="sidenav">
 
             <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 
             <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 
-            <a href="#">About</a>
 
-            <a href="#">Services</a>
 
-            <a href="#">Clients</a>
 
-            <a href="#">Contact</a>
 
-          </div>
 
-          <!-- Use any element to open the sidenav -->
 
-          <span onclick="openNav()">open</span>
 
-
 
-          <!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
 
-          <div id="main">
 
-            ...
 
+            {{ range .menu.MenuLinks }}
 
+                <a href="{{ .MenuLink }}" style="font-family: monospace;">{{ .LinkText }}</a>
 
+            {{ end }}
 
           </div>
 
           </div>
 
+        </div>
 
 
 
 
 
 
 
         <script type="text/javascript" src="/api/v1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
         <script type="text/javascript" src="/api/v1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
-        <script src="/api/v1/js/slide.js"></script>
 
+        <script src="/api/v1/cdn/slide.js"></script>
 
         <script src="/api/v1/htmx/htmx.min.js"></script>
 
         <script src="/api/v1/htmx/htmx.min.js"></script>
 
         <script src="/api/v1/htmx/json-enc.js"></script>
 
         <script src="/api/v1/htmx/json-enc.js"></script>
 
     </body>
 
     </body>
 
 </html>
 
 </html>
 
-{{ end }}
 
+{{ end }}

+ 5 - 7
html/templates/menu.html
View File 

@@ -6,15 +6,13 @@
 
                 id="dropdownMenuButton" data-bs-toggle="dropdown"
 
                 id="dropdownMenuButton" data-bs-toggle="dropdown"
 
                 data-mdb-ripple-init
 
                 data-mdb-ripple-init
 
                 data-mdb-ripple-color="light">
 
                 data-mdb-ripple-color="light">
 
-            <img src="/api/v1/assets/{{ .Png }}" style="max-height: 5vh;"/>
 
+                <span onclick="openNav()">
 
+                <img src="/api/v1/assets/menu.png" style="max-height: 5vh;"/>
 
                     <div class="mask" style="background-color: hsla(0, 0%, 98%, 0.2)"></div>
 
                     <div class="mask" style="background-color: hsla(0, 0%, 98%, 0.2)"></div>
 
+                </span>
 
             </div>
 
             </div>
 
-            <div class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton">
 
-                {{ range .MenuLinks }}
 
-                    <a class="dropdown-item" style="font-family: monospace; font-weight: bolder;" href="{{ .MenuLink }}">{{ .LinkText }}</a>
 
-                {{ end }}
 
-            </div>
 
+
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
 </html>
 
 </html>
 
-{{ end }}
 
+{{ end }}

+ 14 - 2
html/templates/navigation.html
View File 

@@ -8,12 +8,24 @@
 
         </div>
 
         </div>
 
         <div class="col-sm">
 
         <div class="col-sm">
 
             <div class="row">
 
             <div class="row">
 
+
 
                 {{ range .headers }}
 
                 {{ range .headers }}
 
                     {{ template "link.html" . }}
 
                     {{ template "link.html" . }}
 
                 {{ end }}
 
                 {{ end }}
 
-                {{ template "menu.html" .menu }}
 
+                <div class="col-2">
 
+                    <div class="bg-image hover-overlay shadow-1-strong d-inline-flex p-0"
 
+                            id="dropdownMenuButton" data-bs-toggle="dropdown"
 
+                            data-mdb-ripple-init
 
+                            data-mdb-ripple-color="light">
 
+                            <span onclick="openNav()">
 
+                            <img src="/api/v1/assets/menu.png" style="max-height: 5vh;"/>
 
+                                <div class="mask" style="background-color: hsla(0, 0%, 98%, 0.2)"></div>
 
+                            </span>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
 </div>
 
 </div>
 
-{{ end }}
 
+{{ end }}

+ 4 - 6
pkg/controller/cdn_handlers.go
View File 

@@ -2,8 +2,9 @@ package controller
 
 
 
 import (
 
 import (
 
 	"fmt"
 
 	"fmt"
 
-	"strings"
 
 	"os"
 
 	"os"
 
+	"path"
 
+	"strings"
 
 
 
 	"git.aetherial.dev/aeth/keiji/pkg/helpers"
 
 	"git.aetherial.dev/aeth/keiji/pkg/helpers"
 
 	"github.com/gin-gonic/gin"
 
 	"github.com/gin-gonic/gin"
 
@@ -81,7 +82,6 @@ func (c *Controller) ServeMdbCss(ctx *gin.Context) {
 
 
 
 }
 
 }
 
 
 
-
 
 // @Name ServeHtmx
 
 // @Name ServeHtmx
 
 // @Summary serves some htmx assets
 
 // @Summary serves some htmx assets
 
 // @Tags cdn
 
 // @Tags cdn
 
@@ -106,7 +106,6 @@ func (c *Controller) ServeHtmx(ctx *gin.Context) {
 
 
 
 }
 
 }
 
 
 
-
 
 // @Name ServeAsset
 
 // @Name ServeAsset
 
 // @Summary serves assets to put in a webpage
 
 // @Summary serves assets to put in a webpage
 
 // @Tags cdn
 
 // @Tags cdn
 
@@ -154,7 +153,7 @@ func (c *Controller) ServeImage(ctx *gin.Context) {
 
 // @Name ServeGeneric
 
 // @Name ServeGeneric
 
 // @Summary serves file from the html file
 
 // @Summary serves file from the html file
 
 // @Tags cdn
 
 // @Tags cdn
 
-// @Router /cdn/{file} [get]
 
+// @Router /api/v1/cdn/{file} [get]
 
 func (c *Controller) ServeGeneric(ctx *gin.Context) {
 
 func (c *Controller) ServeGeneric(ctx *gin.Context) {
 
 	f, exist := ctx.Params.Get("file")
 
 	f, exist := ctx.Params.Get("file")
 
 	if !exist {
 
 	if !exist {
 
@@ -175,7 +174,7 @@ func (c *Controller) ServeGeneric(ctx *gin.Context) {
 
 	default:
 
 	default:
 
 		ctype = "text"
 
 		ctype = "text"
 
 	}
 
 	}
 
-	b, err := os.ReadFile(f)
 
+	b, err := os.ReadFile(path.Join(c.WebRoot, f))
 
 	if err != nil {
 
 	if err != nil {
 
 		ctx.JSON(500, map[string]string{
 
 		ctx.JSON(500, map[string]string{
 
 			"Error": "Could not serve the requested file",
 
 			"Error": "Could not serve the requested file",
 
@@ -185,4 +184,3 @@ func (c *Controller) ServeGeneric(ctx *gin.Context) {
 
 	}
 
 	}
 
 	ctx.Data(200, ctype, b)
 
 	ctx.Data(200, ctype, b)
 
 }
 
 }
 
-

+ 6 - 6
pkg/controller/html_handlers.go
View File 

@@ -34,13 +34,13 @@ func (c *Controller) ServePost(ctx *gin.Context) {
 
 	}
 
 	}
 
 	ctx.HTML(http.StatusOK, "blogpost", gin.H{
 
 	ctx.HTML(http.StatusOK, "blogpost", gin.H{
 
 		"navigation": gin.H{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 			"headers": c.Headers().Elements,
 
 		},
 
 		},
 
 		"title":   doc.Ident,
 
 		"title":   doc.Ident,
 
 		"Ident":   doc.Ident,
 
 		"Ident":   doc.Ident,
 
 		"Created": doc.Created,
 
 		"Created": doc.Created,
 
 		"Body":    template.HTML(helpers.MdToHTML([]byte(doc.Body))),
 
 		"Body":    template.HTML(helpers.MdToHTML([]byte(doc.Body))),
 
+		"menu":    c.Menu(),
 
 	})
 
 	})
 
 
 
 }
 
 }
 
@@ -59,10 +59,10 @@ func (c *Controller) ServeBlogHome(ctx *gin.Context) {
 
 	}
 
 	}
 
 	ctx.HTML(http.StatusOK, "home", gin.H{
 
 	ctx.HTML(http.StatusOK, "home", gin.H{
 
 		"navigation": gin.H{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 			"headers": c.Headers().Elements,
 
 		},
 
 		},
 
 		"listings": docs,
 
 		"listings": docs,
 
+		"menu":    c.Menu(),
 
 	})
 
 	})
 
 }
 
 }
 
 
 
@@ -80,9 +80,9 @@ func (c *Controller) ServeHome(ctx *gin.Context) {
 
 	}
 
 	}
 
 	ctx.HTML(http.StatusOK, "home", gin.H{
 
 	ctx.HTML(http.StatusOK, "home", gin.H{
 
 		"navigation": gin.H{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 			"headers": c.Headers().Elements,
 
 		},
 
 		},
 
+		"menu":    c.Menu(),
 
 		"listings": docs,
 
 		"listings": docs,
 
 	})
 
 	})
 
 }
 
 }
 
@@ -101,10 +101,10 @@ func (c *Controller) ServeCreativeWriting(ctx *gin.Context) {
 
 	}
 
 	}
 
 	ctx.HTML(http.StatusOK, "home", gin.H{
 
 	ctx.HTML(http.StatusOK, "home", gin.H{
 
 		"navigation": gin.H{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 			"headers": c.Headers().Elements,
 
 		},
 
 		},
 
 		"listings": docs,
 
 		"listings": docs,
 
+		"menu":    c.Menu(),
 
 	})
 
 	})
 
 
 
 }
 
 }
 
@@ -123,10 +123,10 @@ func (c *Controller) ServeTechnicalWriteups(ctx *gin.Context) {
 
 	}
 
 	}
 
 	ctx.HTML(http.StatusOK, "home", gin.H{
 
 	ctx.HTML(http.StatusOK, "home", gin.H{
 
 		"navigation": gin.H{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 			"headers": c.Headers().Elements,
 
 		},
 
 		},
 
 		"listings": docs,
 
 		"listings": docs,
 
+		"menu":    c.Menu(),
 
 	})
 
 	})
 
 
 
 }
 
 }
 
@@ -149,9 +149,9 @@ func (c *Controller) ServeDigitalArt(ctx *gin.Context) {
 
 	}
 
 	}
 
 	ctx.HTML(http.StatusOK, "digital_art", gin.H{
 
 	ctx.HTML(http.StatusOK, "digital_art", gin.H{
 
 		"navigation": gin.H{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 			"headers": c.Headers().Elements,
 
 		},
 
 		},
 
 		"images": fnames,
 
 		"images": fnames,
 
+		"menu":    c.Menu(),
 
 	})
 
 	})
 
 }
 
 }