wieerwill/LinkMeUp
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

adding data and favicons

Browse Source
This commit is contained in:
WieErWill 2024-01-02 18:17:19 +01:00
parent 166c3cf0e8
commit a4ed942ae0
20 changed files with 130 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
build.js
View File

@ -55,20 +55,6 @@ function copyImages(srcDir, destDir) {
}
}
function compileHeaderTemplate(data) {
const headerTemplatePath = path.join(__dirname, 'src', 'templates', 'header-template.hbs');
const headerTemplateSource = readFile(headerTemplatePath);
const headerTemplate = handlebars.compile(headerTemplateSource);
return headerTemplate(data);
}
function compileFooterTemplate(data) {
const footerTemplatePath = path.join(__dirname, 'src', 'templates', 'footer-template.hbs');
const footerTemplateSource = readFile(footerTemplatePath);
const footerTemplate = handlebars.compile(footerTemplateSource);
return footerTemplate(data);
}
function compileTemplate(templatePath, data) {
const templateSource = readFile(templatePath);
const template = handlebars.compile(templateSource);
@ -77,12 +63,14 @@ function compileTemplate(templatePath, data) {
// Main build function
function build() {
const distPath = path.join(__dirname, 'dist');
const baseHtmlPath = path.join(__dirname, 'public', 'index.html');
const dataPath = path.join(__dirname, 'src', 'data.json');
const cssPath = path.join(__dirname, 'public', 'styles', 'main.css');
const imagesSrcPath = path.join(__dirname, 'public', 'images');
const distPath = path.join(__dirname, 'dist');
const imagesDestPath = path.join(distPath, 'images');
const faviconSrcPath = path.join(__dirname, 'public', 'favicons');
const faviconDestPath = path.join(distPath);
const headerTemplatePath = path.join(__dirname, 'src', 'templates', 'header-template.hbs');
const linksTemplatePath = path.join(__dirname, 'src', 'templates', 'social-links-template.hbs');
const footerTemplatePath = path.join(__dirname, 'src', 'templates', 'footer-template.hbs');
@ -127,6 +115,7 @@ function build() {
writeFile(path.join(distPath, 'index.html'), finalHtml);
copyImages(imagesSrcPath, imagesDestPath);
copyImages(faviconSrcPath, faviconDestPath)
}
// Run the build process

BIN
public/favicons/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
public/favicons/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

BIN
public/favicons/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
public/favicons/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 981 B

BIN
public/favicons/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
public/favicons/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
public/favicons/site.webmanifest Normal file
View File

@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

1
public/images/github.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="15.5" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
public/images/globe.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
public/images/instagram.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
public/images/linkedin.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 678 B

1
public/images/mail.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 513 B

1
public/images/mastodon.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 833 B

1
public/images/telegram.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="15.5" viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 773 B

1
public/index.html
View File

@ -5,7 +5,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinkMeUp</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>

87
public/styles/main.css
View File

@ -1,32 +1,85 @@
body {
font-family: Arial, sans-serif;
* {
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
box-sizing: border-box;
}
header, footer {
html {
font-size: 16px;
background-color: #cdcdcd;
}
body {
margin: 2rem;
}
header {
text-align: center;
padding: 1em;
background-color: #333;
color: white;
padding: 1rem;
}
footer {
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
}
main {
padding: 2em;
margin: 1.7rem auto;
max-width: 1000px;
text-align: center;
align-items: center;
align-content: center;
}
#social-links {
main hr {
margin: 2.7rem auto;
max-width: 50%;
color: #4e464644;
}
.link-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1em;
padding: 2em 0;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
/* Maximum 3 columns */
gap: 1rem;
}
#social-links div {
background: white;
padding: 1em;
.link {
border: 1px solid #ddd;
padding: 1rem;
text-align: center;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.2s, box-shadow 0.2s;
}
.link:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.link img {
max-width: 100%;
height: auto;
}
.link .link-icon {
width: 24px;
height: 24px;
margin-right: 8px;
}
.link a {
display: flex;
align-items: center;
text-decoration: none;
color: #000;
width: 100%;
height: 100%;
}
.link h2 {
font-size: 24px;
}

57
src/data.json
View File

@ -1,24 +1,59 @@
{
"header": {
"title": "WieErWill",
"subtitle": "Programmed for Adventure, Coded for Curiosity"
},
"footer": {
"copyright": "<a href='https://wieerwill.de'>WieErWill</a>"
},
"socialLinks": [
{
"name": "Twitter",
"url": "https://twitter.com/username"
"name": "WieErWill.de",
"url": "https://www.wieerwill.de/",
"icon": "globe.svg",
"backgroundColor": "#1DA1F2"
},
{
"name": "Facebook",
"url": "https://facebook.com/username"
},
{
"name": "LinkedIn",
"url": "https://linkedin.com/in/username"
"name": "GitHub",
"url": "https://github.com/wieerwill",
"icon": "github.svg",
"backgroundColor": "#4CAF50"
},
{
"name": "Instagram",
"url": "https://instagram.com/username"
"url": "https://instagram.com/wieerwill",
"icon": "instagram.svg",
"backgroundColor": "#FF6B6B"
},
{
"name": "YouTube",
"url": "https://youtube.com/user/username"
"name": "LinkedIn",
"url": "https://linkedin.com/in/wieerwill",
"icon": "linkedin.svg",
"backgroundColor": "#39CCCC"
},
{
"name": "[Matrix]",
"url": "@wieerwill:matrix.org",
"icon": null,
"backgroundColor": "#01FF70"
},
{
"name": "Mastodon",
"url": "https://chaos.social/@wieerwill",
"icon": "mastodon.svg",
"backgroundColor": "#2ECC71"
},
{
"name": "Telegram",
"url": "https://t.me/wieerwill",
"icon": "telegram.svg",
"backgroundColor": "#267ed7"
},
{
"name": "Mail",
"url": "mailto:robert@wieerwill.de",
"icon": "mail.svg",
"backgroundColor": "#FF4500"
}
]
}

2
src/templates/header-template.hbs
View File

@ -1,6 +1,6 @@
<header>
<h1>{{header.title}}</h1>
{{#if header.subtitle}}
<h2>{{header.subtitle}}</h2>
<h3>{{header.subtitle}}</h3>
{{/if}}
</header>

2
src/templates/social-links-template.hbs
View File

@ -1,6 +1,6 @@
<div class="link-grid">
{{#each socialLinks}}
<div class="link" style="background-color: {{backgroundColor}}; color: {{textColor}}">
<div class="link" style="background-color: {{backgroundColor}};">
<a href="{{url}}" target="_blank">
{{#if icon}}
<img src="/images/{{icon}}" alt="{{name}} icon" class="link-icon">