Code Refactor

This commit is contained in:
Jonas_Jones 2023-10-02 19:29:33 +02:00
parent 390f5faa6b
commit 10e669a725
4 changed files with 72 additions and 67 deletions

View file

@ -9,7 +9,14 @@
<nav> <nav>
<ul> <ul>
<li> <li>
<a href="https://jonasjones.dev/"><img style="padding-top: 7px;" src="/homepage.png" height="30px" alt="Homepage"></a> <a href="https://jonasjones.dev/"
><img
style="padding-top: 7px;"
src="/homepage.png"
height="30px"
alt="Homepage"
/></a
>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -62,15 +69,14 @@
clear: both; clear: both;
} }
@media screen and (max-width: 550px) {
header h1 {
font-size: 20px;
}
@media screen and (max-width: 550px) { header {
header h1 { margin: 0;
font-size: 20px; border-radius: 0;
}
} }
header {
margin: 0;
border-radius: 0;
}
}
</style> </style>

View file

@ -1,73 +1,73 @@
<script> <script>
// @ts-nocheck // @ts-nocheck
let data = import.meta.glob("/src/routes/**/+page.md"); let data = import.meta.glob("/src/routes/**/+page.md");
let paths = data; let paths = data;
/** /**
* @param {Record<string, () => Promise<unknown>>} paths * @param {Record<string, () => Promise<unknown>>} paths
*/ */
function buildHierarchy(paths) { function buildHierarchy(paths) {
const nestedList = {}; const nestedList = {};
let fixedpaths = []; let fixedpaths = [];
/** /**
* @type {string[]} * @type {string[]}
*/ */
let fixedpaths2 = []; let fixedpaths2 = [];
fixedpaths = Object.keys(paths); fixedpaths = Object.keys(paths);
fixedpaths.forEach((path) => { fixedpaths.forEach((path) => {
const fixedpath = path const fixedpath = path
.replace("/+page.md", "") .replace("/+page.md", "")
.replace("/src/routes", ""); .replace("/src/routes", "");
fixedpaths2.push(fixedpath); fixedpaths2.push(fixedpath);
}); });
fixedpaths2.forEach((folder) => { fixedpaths2.forEach((folder) => {
const parts = folder.split("/").filter(Boolean); const parts = folder.split("/").filter(Boolean);
let currentNode = nestedList; let currentNode = nestedList;
parts.forEach((part) => { parts.forEach((part) => {
if (!currentNode[part]) { if (!currentNode[part]) {
currentNode[part] = {}; currentNode[part] = {};
} }
currentNode = currentNode[part]; currentNode = currentNode[part];
}); });
}); });
return nestedList; return nestedList;
} }
const nestedFolders = buildHierarchy(paths); const nestedFolders = buildHierarchy(paths);
function createHtmlList(obj, parentPath = "", depth = 0) { function createHtmlList(obj, parentPath = "", depth = 0) {
let html = ""; let html = "";
for (const key in obj) { for (const key in obj) {
const currentPath = parentPath ? `${parentPath}/${key}` : key; const currentPath = parentPath ? `${parentPath}/${key}` : key;
if ( if (
typeof obj[key] === "object" && typeof obj[key] === "object" &&
Object.keys(obj[key]).length > 0 Object.keys(obj[key]).length > 0
) { ) {
// If the value is an object and not empty, create a nested div // If the value is an object and not empty, create a nested div
html += ` html += `
<li><h${depth + 3}><a href="/${currentPath}">${key}</a></h${ <li><h${depth + 3}><a href="/${currentPath}">${key}</a></h${
depth + 3 depth + 3
}></li> }></li>
<ul> <ul>
${createHtmlList(obj[key], currentPath, depth + 1)} ${createHtmlList(obj[key], currentPath, depth + 1)}
</ul> </ul>
`; `;
} else { } else {
// If the value is not an object or empty, create a clickable list item // If the value is not an object or empty, create a clickable list item
html += `<li><a href="/${currentPath}">${key}</a></li>`; html += `<li><a href="/${currentPath}">${key}</a></li>`;
} }
} }
return html; return html;
} }
//const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`; //const renderedList = `<ul>${renderNestedList(nestedFolders)}</ul>`;
let renderedList = createHtmlList(nestedFolders); let renderedList = createHtmlList(nestedFolders);
</script> </script>
{@html renderedList} {@html renderedList}

View file

@ -2,7 +2,6 @@
import Header from "$lib/components/Header.svelte"; import Header from "$lib/components/Header.svelte";
import Footer from "$lib/components/Footer.svelte"; import Footer from "$lib/components/Footer.svelte";
import Navbar from "$lib/components/Navbar.svelte"; import Navbar from "$lib/components/Navbar.svelte";
</script> </script>
<Header /> <Header />