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
Split 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 */
 
     transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
 
   }
 
-  
+
 
   /* The navigation menu links */
 
   .sidenav a {
 
     padding: 8px 8px 8px 32px;
 
@@ -20,13 +20,14 @@
 
     color: #818181;
 
     display: block;
 
     transition: 0.3s;
 
+
 
   }
 
-  
+
 
   /* When you mouse over the navigation links, change their color */
 
   .sidenav a:hover {
 
     color: #f1f1f1;
 
   }
 
-  
+
 
   /* Position and style the close button (top right corner) */
 
   .sidenav .closebtn {
 
     position: absolute;
 
@@ -35,15 +36,14 @@
 
     font-size: 36px;
 
     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 */
 
   #main {
 
     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) */
 
   @media screen and (max-height: 450px) {
 
     .sidenav {padding-top: 15px;}
 
     .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">
 
         <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/cdn/custom.css">
 
+
 
     </head>
 
 
 <body style="background-color: rgb(56, 56, 56);
 
                 background-image: url(/api/v1/images/blackandwhitedesign.jpg);
 
                 background-repeat: no-repeat;
 
                 background-size: cover;">
 
+    <div id="main">
 
+
 
     {{ template "navigation.html" .navigation }}
 
     <div class="container-fluid row">
 
         {{ range .Tables }}
 
@@ -34,6 +38,13 @@
 
                 </div>
 
             {{ end }}
 
     </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 src="/api/v1/htmx/htmx.min.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">
 
         <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/cdn/custom.css">
 
+
 
     </head>
 
     <body style="background-color: rgb(56, 56, 56);">
 
+        <div id="main">
 
+
 
         {{ template "navigation.html" .navigation }}
 
         <div class="container-fluid row">
 
             <div class="col"></div>
 
@@ -24,7 +28,15 @@
 
             </div>
 
             <div class="col"></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 src="/api/v1/cdn/slide.js"></script>
 
         <script src="/api/v1/htmx/htmx.min.js"></script>
 
         <script src="/api/v1/htmx/json-enc.js"></script>
 
     </body>

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

@@ -7,8 +7,11 @@
 
         <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/mdb/mdb.min.css">
 
+        <link rel="stylesheet" href="/api/v1/cdn/custom.css">
 
     </head>
 
     <body style="background-color: rgb(56, 56, 56);">
 
+    <div id="main">
 
+
 
         {{ template "navigation.html" .navigation }}
 
         <div class="container-fluid row">
 
             {{ range .images }}
 
@@ -22,7 +25,15 @@
 
                 </div>
 
             {{ end }}
 
             </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 src="/api/v1/cdn/slide.js"></script>
 
         <script src="/api/v1/htmx/htmx.min.js"></script>
 
         <script src="/api/v1/htmx/json-enc.js"></script>
 
     </body>

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

@@ -6,9 +6,12 @@
 
         <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/mdb/mdb.min.css">
 
-        <link rel="stylesheet" href="/api/v1/style/custom.css">
 
+        <link rel="stylesheet" href="/api/v1/cdn/custom.css">
 
     </head>
 
+
 
     <body style="background-color: rgb(56, 56, 56);">
 
+    <div id="main">
 
+
 
         {{ template "navigation.html" .navigation }}
 
         <div class="container-fluid row">
 
         {{ range .listings }}
 
@@ -22,25 +25,18 @@
 
 
         <div id="mySidenav" class="sidenav">
 
             <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>
 
 
 
 
         <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/json-enc.js"></script>
 
     </body>
 
 </html>
 
-{{ end }}
 
+{{ end }}

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

@@ -6,15 +6,13 @@
 
                 id="dropdownMenuButton" data-bs-toggle="dropdown"
 
                 data-mdb-ripple-init
 
                 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>
 
+                </span>
 
             </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>
 
 </html>
 
-{{ end }}
 
+{{ end }}

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

@@ -8,12 +8,24 @@
 
         </div>
 
         <div class="col-sm">
 
             <div class="row">
 
+
 
                 {{ range .headers }}
 
                     {{ template "link.html" . }}
 
                 {{ 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>
 
-{{ end }}
 
+{{ end }}

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

@@ -2,8 +2,9 @@ package controller
 
 
 import (
 
 	"fmt"
 
-	"strings"
 
 	"os"
 
+	"path"
 
+	"strings"
 
 
 	"git.aetherial.dev/aeth/keiji/pkg/helpers"
 
 	"github.com/gin-gonic/gin"
 
@@ -81,7 +82,6 @@ func (c *Controller) ServeMdbCss(ctx *gin.Context) {
 
 
 }
 
 
-
 
 // @Name ServeHtmx
 
 // @Summary serves some htmx assets
 
 // @Tags cdn
 
@@ -106,7 +106,6 @@ func (c *Controller) ServeHtmx(ctx *gin.Context) {
 
 
 }
 
 
-
 
 // @Name ServeAsset
 
 // @Summary serves assets to put in a webpage
 
 // @Tags cdn
 
@@ -154,7 +153,7 @@ func (c *Controller) ServeImage(ctx *gin.Context) {
 
 // @Name ServeGeneric
 
 // @Summary serves file from the html file
 
 // @Tags cdn
 
-// @Router /cdn/{file} [get]
 
+// @Router /api/v1/cdn/{file} [get]
 
 func (c *Controller) ServeGeneric(ctx *gin.Context) {
 
 	f, exist := ctx.Params.Get("file")
 
 	if !exist {
 
@@ -175,7 +174,7 @@ func (c *Controller) ServeGeneric(ctx *gin.Context) {
 
 	default:
 
 		ctype = "text"
 
 	}
 
-	b, err := os.ReadFile(f)
 
+	b, err := os.ReadFile(path.Join(c.WebRoot, f))
 
 	if err != nil {
 
 		ctx.JSON(500, map[string]string{
 
 			"Error": "Could not serve the requested file",
 
@@ -185,4 +184,3 @@ func (c *Controller) ServeGeneric(ctx *gin.Context) {
 
 	}
 
 	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{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 		},
 
 		"title":   doc.Ident,
 
 		"Ident":   doc.Ident,
 
 		"Created": doc.Created,
 
 		"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{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 		},
 
 		"listings": docs,
 
+		"menu":    c.Menu(),
 
 	})
 
 }
 
 
@@ -80,9 +80,9 @@ func (c *Controller) ServeHome(ctx *gin.Context) {
 
 	}
 
 	ctx.HTML(http.StatusOK, "home", gin.H{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 		},
 
+		"menu":    c.Menu(),
 
 		"listings": docs,
 
 	})
 
 }
 
@@ -101,10 +101,10 @@ func (c *Controller) ServeCreativeWriting(ctx *gin.Context) {
 
 	}
 
 	ctx.HTML(http.StatusOK, "home", gin.H{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 		},
 
 		"listings": docs,
 
+		"menu":    c.Menu(),
 
 	})
 
 
 }
 
@@ -123,10 +123,10 @@ func (c *Controller) ServeTechnicalWriteups(ctx *gin.Context) {
 
 	}
 
 	ctx.HTML(http.StatusOK, "home", gin.H{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 		},
 
 		"listings": docs,
 
+		"menu":    c.Menu(),
 
 	})
 
 
 }
 
@@ -149,9 +149,9 @@ func (c *Controller) ServeDigitalArt(ctx *gin.Context) {
 
 	}
 
 	ctx.HTML(http.StatusOK, "digital_art", gin.H{
 
 		"navigation": gin.H{
 
-			"menu":    c.Menu(),
 
 			"headers": c.Headers().Elements,
 
 		},
 
 		"images": fnames,
 
+		"menu":    c.Menu(),
 
 	})
 
 }