Skip to content

Commit 42cc31a

Browse files
digimbytedigimbyte
committed
mostly fixed routing
1 parent d71018e commit 42cc31a

File tree

4 files changed

+61
-168
lines changed

4 files changed

+61
-168
lines changed

‎404.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ <h1><a href="/" style="color: white;">Firebase Me</a></h1>
1717
</div>
1818
</header>
1919
<main>
20-
<h2 id="document-title">Loading...</h2>
21-
<div class="content-body" id="content">Restoring single page behaviour...</div>
20+
<h2 id="document-title"></h2>
21+
<div class="content-body" id="content"></div>
2222
</main>
2323
<footer>
2424
<p><br /></p>
@@ -59,6 +59,7 @@ <h2 id="document-title">Loading...</h2>
5959
switch (path) {
6060
case '/privacy': source = '/assets/privacy.md'; break;
6161
case '/contact': source = '/assets/contact.md'; break;
62+
case '/404.html':
6263
case '/404': source = '/assets/404.md'; break;
6364
case '/markdown': source = '/assets/markdown.md'; break;
6465
case '/':

‎assets/navigation.js

Lines changed: 52 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,25 @@ function goto(dest, stub = false) {
88
const loc = dest.startsWith('pages/') ? dest.match(/pages\/(.+)\.md/)[1] : dest
99
// this triggers redirect to load the page content
1010
if (stub) {
11-
// history.pushState(null, window.location.hostname, loc);
11+
history.pushState(null, window.location.hostname, loc);
1212
}
1313
else {
14-
// history.pushState(null, window.location.hostname, '/' + loc);
14+
history.pushState(null, window.location.hostname, '/' + loc);
1515
}
1616
const source = findSource(dest)
1717
current = source;
18-
loadContent(source);
19-
clearNavHighlights();
18+
loadContent(source);
19+
highlightNavPath();
2020
}
2121

2222
function findCategory(path) {
23-
24-
const cat = jsonData.find(i => path.startsWith(i.path))
23+
const values = path.split('/')
24+
25+
let cat = jsonData.find(i => i.name === values[0])
2526
console.log('FIND CAT', path, cat)
2627
return cat;
2728
}
29+
2830
function findSource(path) {
2931
console.log("Find Source", path, typeof path)
3032
if (path && path.endsWith('.md'))
@@ -60,18 +62,21 @@ function getQueryParams() {
6062
}
6163

6264
// Function to generate categories for header buttons
63-
function generateCategories(data, priority) {
65+
function generateCategories(data) {
6466
const headerButtons = document.getElementById('category-list');
6567
headerButtons.innerHTML = ''; // Clear existing buttons
6668
for (const item of data) {
69+
console.log("GEN CAT", category, item)
6770
const button = document.createElement('button');
6871
button.textContent = item.name;
6972
button.addEventListener('click', () => {
7073
switchCategory(item.children, item.name);
7174
});
7275
headerButtons.appendChild(button);
73-
if (category == null || (priority && priority === item.name)) {
76+
if (category == null) {
7477
category = item.name;
78+
}
79+
if (category == item.name) {
7580
switchCategory(item.children, item.name);
7681
}
7782
}
@@ -83,9 +88,10 @@ function switchCategory(data, source) {
8388
navbar.innerHTML = ''; // Clear existing content
8489
generateNavbar(data, navbar);
8590
console.log("CHANGING CATEGORY", category, source, current)
86-
if (typeof current === 'string' && category == source) {
87-
highlightNavPath()
88-
}
91+
highlightNavPath()
92+
// if (typeof current === 'string' && category == source) {
93+
// highlightNavPath()
94+
// }
8995
}
9096

9197
// Function to generate the navbar HTML based on JSON data
@@ -130,23 +136,26 @@ function generateNavbar(data, parentElement, depth = 0) {
130136
link.setAttribute('data-path', item.path); // Add data-path attribute
131137
link.addEventListener("click", function () {
132138
console.log("ITEM CLICK", item.path);
133-
const allLinks = document.querySelectorAll('.navbar a, .navbar button');
134-
for (const link of allLinks) {
135-
link.classList.remove('selected', 'selected-file');
136-
}
137-
this.classList.add('selected', 'selected-file');
138-
let parent = this.parentElement;
139-
while (parent && parent.classList.contains('dropdown-container')) {
140-
const siblingButton = parent.previousElementSibling;
141-
if (siblingButton) {
142-
siblingButton.classList.add('selected');
143-
}
144-
parent = parent.parentElement;
145-
}
146-
// open content
147-
console.log("NAV 1", item, category)
139+
current = item.path
140+
// const allLinks = document.querySelectorAll('.navbar a, .navbar button');
141+
// for (const link of allLinks) {
142+
// link.classList.remove('selected', 'selected-file');
143+
// }
144+
// this.classList.add('selected', 'selected-file');
145+
// let parent = this.parentElement;
146+
// while (parent && parent.classList.contains('dropdown-container')) {
147+
// const siblingButton = parent.previousElementSibling;
148+
// if (siblingButton) {
149+
// siblingButton.classList.add('selected');
150+
// }
151+
// parent = parent.parentElement;
152+
// }
153+
// // open content
154+
// console.log("NAV 1", item, category)
148155

149-
current = item.path;
156+
// current = item.path;
157+
// highlightNavPath()
158+
goto(item.path)
150159
loadContent(this.getAttribute('data-path'))
151160
});
152161
parentElement.appendChild(link);
@@ -164,40 +173,30 @@ function clearNavHighlights() {
164173
}
165174
// Function to initialize the selection based on the query parameter
166175
function highlightNavPath() {
176+
console.warn("HIGHLIGHT", category, current);
167177
clearNavHighlights()
168178
if (!current) return;
169-
const newcat = findCategory(current)
170-
const source = findSource(current);
179+
if (!category) return;
180+
// switchCategory(newcat.name)
181+
// history.replaceState(null, 'Firebase Me: ' + paths[paths.length - 1], '/' + paths.join('/'))
171182

172-
if (!newcat) {
173-
loadContent(source)
174-
return;
175-
}
176-
else {
177-
// history.replaceState(null, 'Firebase Me: ' + paths[paths.length - 1], '/' + paths.join('/'))
178-
}
179183

180184
// find target button and iterate through parents
181185
const target = findNavButtonByPath(current)
182186

183-
console.log("HIGHLIGHT NAV TARGET", target)
184-
// FIXME: known issue
185-
// 1. if you pick a nav item
186-
// 2. change the category
187-
// 3. pick another item
188-
// 4. and change the category again
189-
// 5. target == undefined
190-
// why? no idea.
191-
if(target)
192-
target.classList.add('selected', 'selected-file');
193-
let parent = target.parentElement;
194-
while (parent && parent.classList.contains('dropdown-container')) {
195-
const siblingButton = parent.previousElementSibling;
196-
if (siblingButton) {
197-
siblingButton.classList.add('selected', 'open');
187+
console.log("HIGHLIGHT NAV TARGET", target, 'category', category, 'current', current)
188+
189+
if (target) {
190+
target.classList.add('selected', 'selected-file');
191+
let parent = target.parentElement;
192+
while (parent && parent.classList.contains('dropdown-container')) {
193+
const siblingButton = parent.previousElementSibling;
194+
if (siblingButton) {
195+
siblingButton.classList.add('selected', 'open');
196+
}
197+
parent.style.display = "block";
198+
parent = parent.parentElement;
198199
}
199-
parent.style.display = "block";
200-
parent = parent.parentElement;
201200
}
202201
// trigger content
203202
console.log("NAV current")

‎assets/redirect.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,15 @@ fetch('/structure.json')
1111

1212
// Initialize selection based on URL query parameter
1313
const params = getQueryParams('path');
14-
const target = params.path ? params.path: "home";
14+
const target = params.path ? params.path : "home";
1515
const cat = findCategory(target)
16-
console.log("CAT START",cat)
17-
generateCategories(data,cat);
1816
current = findSource(target);
19-
console.log("INIT PARAMS", params)
17+
category = cat ? cat.name : jsonData[0].name;
18+
generateCategories(data, category);
19+
2020
// handle in the case of 404 redirects
21-
console.log("REDIRECT", category, current)
22-
21+
console.log("REDIRECT4", category, current)
22+
2323
highlightNavPath();
2424

2525

‎assets/themes/default.css

Lines changed: 0 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +0,0 @@
1-
body {
2-
font-family: Arial, sans-serif;
3-
display: flex;
4-
flex-direction: column;
5-
margin: 0;
6-
height: 100vh;
7-
overflow: hidden;
8-
background-color: white;
9-
color: black;
10-
}
11-
12-
.header {
13-
width: 100%;
14-
background-color: #333;
15-
color: white;
16-
padding: 10px;
17-
display: flex;
18-
justify-content: center;
19-
align-items: center;
20-
}
21-
22-
.header .header-buttons button {
23-
background-color: #575757;
24-
color: white;
25-
border: none;
26-
padding: 10px;
27-
cursor: pointer;
28-
}
29-
30-
.container {
31-
display: flex;
32-
flex: 1;
33-
width: 100%;
34-
}
35-
36-
.sidebar {
37-
width: 200px;
38-
background-color: #333;
39-
color: white;
40-
display: flex;
41-
flex-direction: column;
42-
}
43-
44-
.crumbs {
45-
background-color: #444;
46-
padding: 10px;
47-
height: 20px;
48-
overflow-y: hidden;
49-
transition: height 0.5s ease;
50-
}
51-
52-
.crumbs.has-content {
53-
height: 140px;
54-
overflow-y: auto;
55-
}
56-
57-
.crumbs button {
58-
background-color: #575757;
59-
color: white;
60-
border: none;
61-
padding: 5px;
62-
margin-bottom: 5px;
63-
width: 100%;
64-
text-align: left;
65-
cursor: pointer;
66-
}
67-
68-
.navbar {
69-
flex: 1;
70-
overflow: auto;
71-
}
72-
73-
.navbar button,
74-
.navbar a {
75-
width: 100%;
76-
text-align: left;
77-
border: none;
78-
outline: none;
79-
background: none;
80-
color: white;
81-
padding: 8px 16px;
82-
text-decoration: none;
83-
display: block;
84-
cursor: pointer;
85-
position: relative;
86-
font-weight: 500;
87-
}
88-
89-
.navbar button:hover,
90-
.navbar a:hover {
91-
background-color: #575757;
92-
}
93-
94-
.navbar .dropdown-container {
95-
display: none;
96-
background-color: #414141;
97-
}
98-
99-
.navbar button.selected,
100-
.navbar a.selected {
101-
background-color: gold !important;
102-
color: black !important;
103-
}
104-
105-
.navbar a.selected-file {
106-
text-decoration: underline !important;
107-
}

0 commit comments

Comments
 (0)