Add channel-specific link on navbar (#46)

Owez · Jan 5, 2023 · 6fa40a5 · 6fa40a5
1 parent c90b33a
commit 6fa40a5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/examples/images/viewer_light.png b/examples/images/viewer_light.png
diff --git a/yark/__main__.py b/yark/__main__.py
@@ -0,0 +1,3 @@
+from yark.cli import _cli
+
+_cli()
diff --git a/yark/templates/base.html b/yark/templates/base.html
@@ -35,17 +35,18 @@
             text-decoration: none;
         }
 
-        #nav-left {
+        #nav-title {
             margin-left: 3rem;
             font-size: 110%;
         }
 
-        #nav-right {
+        #nav-content {
             margin-right: 1.5rem;
             display: flex;
         }
 
-        #nav-right>a {
+        #nav-content>a,
+        .channel-link {
             color: #424242;
             margin-right: 1.5rem;
         }
@@ -82,6 +83,11 @@
             width: 80vw;
         }
 
+        .channel-link {
+            margin-left: 0.5rem;
+            font-size: 95%;
+        }
+
         @media (prefers-color-scheme: dark) {
             body {
                 background-color: rgb(21, 20, 22);
@@ -102,26 +108,28 @@
             input[type=text],
             input[type=submit],
             button,
-            #nav-right>a {
+            #nav-content>a,
+            .channel-link {
                 color: rgb(200, 200, 200);
             }
         }
     </style>
     {% block styling %}{% endblock %}
     <!-- Navbar -->
     <nav>
-        <a href="{{ url_for('routes.index') }}" id="nav-left">Yark</a>
-        <div id="nav-right">
+        <p id="nav-title"><a href="{{ url_for('routes.index') }}">Yark</a></p>
+        <div id="nav-content">
             <a title="View the source code of Yark" href="https://github.com/owez/yark">source</a>
             <a title="See more from the author of Yark" href="https://ogriffiths.com">portfolio</a>
         </div>
     </nav>
     <!-- Content -->
     {% block content %}{% endblock %}
-    <!-- Error -->
+    <!-- Flask SSR error -->
     {% if error %}
     <div id="error">{{ error }}</div>
     {% endif %}
+    <!-- Global script -->
     <script>
         // Adds an error which will automatically be deleted 
         function addError(msg) {
@@ -144,12 +152,30 @@
             }
         }
 
-        // Templating error
+        // Adds the current channel name to nav title if present 
+        function addChannelNav() {
+            const path = window.location.pathname
+            if (path.startsWith("/channel/")) {
+                const channelName = path.split("/")[2]
+                let navTitle = document.getElementById("nav-title")
+                let channelLink = document.createElement("a")
+                channelLink.title = `Go (back) to ${channelName}`
+                channelLink.href = `/channel/${channelName}/videos`
+                channelLink.appendChild(document.createTextNode(`· ${channelName}`))
+                channelLink.classList.add("channel-link")
+                navTitle.appendChild(channelLink)
+            }
+        }
+
+        // Add to nav
+        addChannelNav()
+
+        // Flask SSR error deletion
         {% if error %}
         deleteError()
         {% endif %}
     </script>
-    <!-- Global scripts -->
+    <!-- Page-specific scripts -->
     {% block scripts %}{% endblock %}
 </body>