brulijam/introduction-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

made footer links customizable

Browse Source
This commit is contained in:
Julian Brammer 2024-09-05 14:02:50 +02:00
parent 301a0e8fdf
commit ff33edc7cf
4 changed files with 73 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/content/links.json
View File

@ -125,6 +125,31 @@
"href": "https://youtube.com/@brulijam",
"icon": "https://simpleicons.org/icons/youtube.svg",
"group": 2
},
{
"name": "source code",
"href": "https://git.brulijam.com/brulijam/introduction-website",
"group": "footer"
},
{
"name": "links json",
"href": "content/links.json",
"group": "footer"
},
{
"name": "status",
"href": "https://status.brulijam.com/status/brulijam",
"group": "footer"
},
{
"name": "files",
"href": "https://brulijam.com/files",
"group": "footer"
},
{
"name": "music",
"href": "https://brulijam.com/music",
"group": "footer"
}
],
"groupNames": {

15
src/css/main.css
View File

@ -82,15 +82,24 @@ h2 {
}
}
.text-link::before {
content: "[";
}
.text-link::after {
content: "]";
}
.text-link {
color: var(--secondary-color);
text-decoration: underline solid var(--secondary-color2) 1px;
text-decoration: none;
position: relative;
padding: 0 2px;
padding: 5px;
white-space: nowrap;
display: inline-block;
}
.text-link:hover {
text-decoration: underline solid var(--secondary-color) 1px;
filter: drop-shadow(0 0 5px var(--secondary-color2)) brightness(1.02);
top: -2px;
}

8
src/index.html
View File

@ -61,13 +61,7 @@
</noscript>
</section>
<br>
<footer>
<a class="text-link" href="https://git.brulijam.com/brulijam/introduction-website" target="_blank">source code</a>
<a class="text-link" href="content/links.json" target="_blank">links.json</a>
<a class="text-link" href="https://status.brulijam.com/status/brulijam">status</a>
<a class="text-link" href="https://brulijam.com/files" target="_blank">files</a>
<a class="text-link" href="https://brulijam.com/music" target="_blank">music</a>
</footer>
<footer></footer>
</main>
</body>
</html>

50
src/js/links.js
View File

@ -13,31 +13,51 @@ function createLinkDiv(link) {
return linkDiv;
}
function createFooterLink(link) {
const footerLink = document.createElement('a');
footerLink.className = 'text-link';
footerLink.href = link.href;
footerLink.target = '_blank';
footerLink.textContent = link.name;
return footerLink;
}
function createGroups(linksData, groupNames) {
const container = document.querySelector('.links');
const footer = document.querySelector('footer');
const groups = [...new Set(linksData.map(link => link.group))].sort((a, b) => a - b);
groups.forEach((group, index) => {
const groupContainer = document.createElement('div');
groupContainer.className = 'linkGroup';
if (group === "footer") {
linksData
.filter(link => link.group === "footer")
.forEach(link => {
const footerLink = createFooterLink(link);
footer.appendChild(footerLink);
});
} else {
// Handle regular links
const groupContainer = document.createElement('div');
groupContainer.className = 'linkGroup';
const groupHeader = document.createElement('h2');
groupHeader.textContent = `${groupNames[group]}`;
groupContainer.appendChild(groupHeader);
const groupHeader = document.createElement('h2');
groupHeader.textContent = `${groupNames[group]}`;
groupContainer.appendChild(groupHeader);
linksData
.filter(link => link.group === group)
.forEach(link => {
const linkElement = createLinkDiv(link);
groupContainer.appendChild(linkElement);
});
linksData
.filter(link => link.group === group)
.forEach(link => {
const linkElement = createLinkDiv(link);
groupContainer.appendChild(linkElement);
});
container.appendChild(groupContainer);
container.appendChild(groupContainer);
if (index < groups.length - 1) {
const br = document.createElement('br');
container.appendChild(br);
if (index < groups.length - 1) {
const br = document.createElement('br');
container.appendChild(br);
}
}
});
}