mobile nav enhancements + changelog panel

Author: Socketlike

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

index.html

@@ -21,7 +21,7 @@
       </svg>
     </div>
 
-    <nav>
+    <nav class="hidden">
       <div class="title">
         <h3>nav</h3>
 
@@ -33,6 +33,14 @@ <h3>nav</h3>
       <div id="nav-container"></div>
     </nav>
 
+    <div id="changelog">
+      <div class="title">
+        <h3>changelog</h3>
+      </div>
+
+      <div id="changelog-container"></div>
+    </div>
+
     <main>
       loading ...<br>
       <br>
@@ -57,6 +65,8 @@ <h3>nav</h3>
       <div><a href="https://github.com/Socketlike/socketlike.github.io">github</a></div>
     </footer>
 
+    <div id="nav-overlay"></div>
+
     <script type="module" src="/src/index.js"></script>
   </body>
 </html>

scripts/make-changelog.js

@@ -4,10 +4,10 @@ import { writeFile } from 'node:fs/promises'
 const _default = () => writeFile(
     'content/changelog.json',
     JSON.stringify(
-        shell.exec('git log --oneline -5', { silent: true }).stdout
+        shell.exec('git log --oneline --no-abbrev-commit --decorate=short -5', { silent: true }).stdout
             .trim()
             .split('\n')
-            .map((log) => [log.substring(0, 7), log.substring(8)])
+            .map((log) => [log.substring(0, 40), log.substring(41)])
     )
 )
 

src/index.js

@@ -17,13 +17,22 @@ const nav = document.querySelector('nav')
 const navContainer = document.getElementById('nav-container')
 const navButton = document.getElementById('nav-button')
 const navCloseButton = document.getElementById('nav-close-button')
+const navOverlay = document.getElementById('nav-overlay')
+
+const changelogRoot = document.getElementById('changelog')
+const changelogContainer = document.getElementById('changelog-container')
 
 const responsiveEvent = window.matchMedia("only screen and (max-width: 768px)")
 
 let navHidden = responsiveEvent.matches
+nav.classList.toggle('hidden', navHidden)
+
+const recalcResponsiveSize = () => {
+    const sideWidth = `calc(${main.getBoundingClientRect().x}px - 32px)`
 
-const recalcNavSize = () =>
-    nav.style.width = `calc(${main.getBoundingClientRect().x}px - 32px)`
+    nav.style.width = sideWidth
+    changelogRoot.style.width = sideWidth
+}
 
 const recalcNavRight = (immediate = false) => {
     const outside = responsiveEvent.matches
@@ -52,12 +61,12 @@ const toggleNav = (force = undefined) => {
     recalcNavRight()
 }
 
-const recalcNav = (immediate = false) => {
-    recalcNavSize()
+const recalcResponsive = (immediate = false) => {
+    recalcResponsiveSize()
     recalcNavRight(immediate)
 }
 
-recalcNav(true)
+recalcResponsive(true)
 
 navContainer.replaceChildren(
     ...Object
@@ -76,7 +85,8 @@ navContainer.replaceChildren(
 
 navButton.addEventListener('click', toggleNav)
 navCloseButton.addEventListener('click', () => toggleNav(false))
-responsiveEvent.addEventListener('change', recalcNav)
+responsiveEvent.addEventListener('change', recalcResponsive)
+navOverlay.addEventListener('click', () => toggleNav(false))
 
 if (content)
     fetch(content)
@@ -94,6 +104,28 @@ const changelog = await fetch('/content/changelog.json')
         .then((r) => r.json())
         .catch(console.error)
 
-if (changelog) {
-    
-}
+if (changelog)
+    changelogContainer.replaceChildren(
+        ...changelog.map(([hash, title]) => {
+            const line = document.createElement('div')
+            line.className = 'line'
+            
+            const hashLabel = document.createElement('code')
+            hashLabel.className = 'hash'
+            hashLabel.classList.toggle('latest', title.includes('origin/HEAD'))
+            hashLabel.classList.toggle('local-latest', title.includes('HEAD ->'))
+            hashLabel.textContent = hash.substring(0, 7)
+            hashLabel.title = hash
+
+            const titleLabel = document.createElement('div')
+            titleLabel.className = 'changelog-title'
+            titleLabel.textContent = title.includes('origin/HEAD') || title.includes('HEAD ->')
+                ? title.replace(/^\(.+\)/, '')
+                : title
+            titleLabel.title = title
+
+            line.append(hashLabel, titleLabel)
+
+            return line
+        })
+    )