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

add head template

Browse Source
This commit is contained in:
WieErWill 2024-01-17 17:21:30 +01:00
parent ed57bda08e
commit 6b0e3857fb
9 changed files with 96 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,6 +1,6 @@
# LinkMeUp # LinkMeUp
Welcome to the LinkMeUp project! This is a sleek, lightweight single-page application designed to consolidate an individual's social media and internet presence into one central location. Built with simplicity and performance in mind, the project uses minimalistic yet powerful web technologies. This is a sleek, lightweight single-page application designed to consolidate an individual's social media and internet presence into one central location. Built with simplicity and performance in mind, the project uses minimalistic yet powerful web technologies.
## Features ## Features

14
build.js
View File

@ -44,7 +44,7 @@ function inlineCSS(html, css) {
} }
function copyImages(srcDir, destDir) { function copyImages(srcDir, destDir) {
if (!fs.existsSync(destDir)){ if (!fs.existsSync(destDir)) {
fs.mkdirSync(destDir, { recursive: true }); fs.mkdirSync(destDir, { recursive: true });
} }
@ -71,6 +71,7 @@ function build() {
const imagesDestPath = path.join(distPath, 'images'); const imagesDestPath = path.join(distPath, 'images');
const faviconSrcPath = path.join(__dirname, 'public', 'favicons'); const faviconSrcPath = path.join(__dirname, 'public', 'favicons');
const faviconDestPath = path.join(distPath); const faviconDestPath = path.join(distPath);
const headTemplatePath = path.join(__dirname, 'src', 'templates', 'head-template.hbs');
const headerTemplatePath = path.join(__dirname, 'src', 'templates', 'header-template.hbs'); const headerTemplatePath = path.join(__dirname, 'src', 'templates', 'header-template.hbs');
const linksTemplatePath = path.join(__dirname, 'src', 'templates', 'social-links-template.hbs'); const linksTemplatePath = path.join(__dirname, 'src', 'templates', 'social-links-template.hbs');
const footerTemplatePath = path.join(__dirname, 'src', 'templates', 'footer-template.hbs'); const footerTemplatePath = path.join(__dirname, 'src', 'templates', 'footer-template.hbs');
@ -87,6 +88,8 @@ function build() {
// Pass the current year to the Handlebars data // Pass the current year to the Handlebars data
data.currentYear = currentYear; data.currentYear = currentYear;
const activeTheme = data.theme;
// Output titles from data.json // Output titles from data.json
data.socialLinks.forEach(link => console.log(link.name)); data.socialLinks.forEach(link => console.log(link.name));
@ -94,16 +97,17 @@ function build() {
css = minimizeCSS(css); css = minimizeCSS(css);
// Compile HTML with Handlebars // Compile HTML with Handlebars
const headHtml = compileTemplate(headTemplatePath, data);
const headerHtml = compileTemplate(headerTemplatePath, data); const headerHtml = compileTemplate(headerTemplatePath, data);
const socialLinksHtml = compileTemplate(linksTemplatePath, data); const socialLinksHtml = compileTemplate(linksTemplatePath, data);
const footerHtml = compileTemplate(footerTemplatePath, data); const footerHtml = compileTemplate(footerTemplatePath, data);
// Replace placeholder in base HTML with compiled HTML // Replace placeholder in base HTML with compiled HTML
let finalHtml = baseHtml let finalHtml = baseHtml
.replace('<!-- Header template will populate this section -->', headerHtml) .replace('<!-- Head template will populate this section -->', headHtml)
.replace('<!-- Handlebars template will populate this section -->', socialLinksHtml) .replace('<!-- Header template will populate this section -->', headerHtml)
.replace('<!-- Footer template will populate this section -->', footerHtml); .replace('<!-- Handlebars template will populate this section -->', socialLinksHtml)
.replace('<!-- Footer template will populate this section -->', footerHtml);
finalHtml = inlineCSS(finalHtml, css); finalHtml = inlineCSS(finalHtml, css);
finalHtml = minimizeHTML(finalHtml); finalHtml = minimizeHTML(finalHtml);

1
public/images/xing.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="M448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM93.8 320.2c-5.5 0-8.7-5.3-6-10.3l49.3-86.7c.1 0 .1-.1 0-.2l-31.4-54c-3-5.6 .2-10.1 6-10.1h46.6c5.2 0 9.5 2.9 12.9 8.7l31.9 55.3c-1.3 2.3-18 31.7-50.1 88.2c-3.5 6.2-7.7 9.1-12.6 9.1H93.8zm163.5-33.4v.2l65.5 119c2.8 5.1 .1 10.1-6 10.1H270.2c-5.5 0-9.7-2.9-12.9-8.7l-66-120.3c1.8-3.2 22.9-40.4 63.3-111.6c11.7-20.7 25.1-44.3 40.1-70.8c3.3-5.8 7.4-8.7 12.5-8.7h46.9c5.7-.1 8.8 4.7 6 10L257.3 286.8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 754 B

13
public/index.html
View File

@ -1,20 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<!-- Head template will populate this section -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LinkMeUp</title>
</head>
<body> <body>
<!-- Header template will populate this section --> <!-- Header template will populate this section -->
<main> <main>
<hr/> <hr />
<!-- Handlebars template will populate this section --> <!-- Handlebars template will populate this section -->
<hr/> <hr />
</main> </main>
<!-- Footer template will populate this section --> <!-- Footer template will populate this section -->
</body> </body>
</html> </html>

44
public/styles/main.css
View File

@ -10,12 +10,22 @@ html {
} }
body { body {
margin: 2rem; margin: 2rem 0;
width: 100%;
} }
header { header {
text-align: center; text-align: center;
padding: 1rem; padding: 2rem 0;
max-width: 100%;
}
header h1 {
font-size: 4rem;
}
header h2 {
font-size: 2rem;
} }
footer { footer {
@ -26,9 +36,15 @@ footer {
padding: 1rem; padding: 1rem;
} }
footer a {
text-decoration: none;
}
main { main {
padding: 2.5rem;
margin: 1.7rem auto; margin: 1.7rem auto;
max-width: 1000px; max-width: 100%;
max-width: 1100px;
text-align: center; text-align: center;
align-items: center; align-items: center;
align-content: center; align-content: center;
@ -56,7 +72,7 @@ main hr {
} }
.link:hover { .link:hover {
transform: scale(1.05); transform: scale(1.15);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
@ -83,3 +99,23 @@ main hr {
.link h2 { .link h2 {
font-size: 24px; font-size: 24px;
} }
@media (max-width: 700px) {
header {
padding: 1rem 0;
}
main {
padding: 0.3rem 1.7rem;
margin: 0.7rem auto;
}
main hr {
margin: 1.7rem auto;
}
footer {
text-align: center;
position: relative;
bottom: 0;
width: 100%;
padding: 1rem;
}
}

13
src/data.json
View File

@ -1,4 +1,11 @@
{ {
"head": {
"title": "LinkMeUp WieErWill",
"description": "Get all weblinks of WieErWill.",
"keywords": "social media links, software architecture, web development, single-page application, web performance",
"url": "https://link.wieerwill.de/",
"logo": "favicons/android-chrome-192x192.png"
},
"header": { "header": {
"title": "WieErWill", "title": "WieErWill",
"subtitle": "Programmed for Adventure, Coded for Curiosity" "subtitle": "Programmed for Adventure, Coded for Curiosity"
@ -31,6 +38,12 @@
"icon": "linkedin.svg", "icon": "linkedin.svg",
"backgroundColor": "#39CCCC" "backgroundColor": "#39CCCC"
}, },
{
"name": "Xing",
"url": "https://xing.de/profile/Robert_Jeutter",
"icon": "xing.svg",
"backgroundColor": "#39CCCC"
},
{ {
"name": "[Matrix]", "name": "[Matrix]",
"url": "https://matrix.to/#/@wieerwill:matrix.org", "url": "https://matrix.to/#/@wieerwill:matrix.org",

26
src/templates/head-template.hbs Normal file
View File

@ -0,0 +1,26 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-Frame-Options" content="DENY">
<meta name="referrer" content="strict-origin">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "{{head.title}}",
"url": "{{head.url}}",
"logo": "{{head.url}}{{head.logo}}",
"description": "{{head.description}}"
}
</script>
<title>LinkMeUp WieErWill</title>
<meta name="description" content="{{head.description}}">
<meta name="keywords" content="{{head.keywords}}">
<link rel="canonical" href="{{head.url}}">
<meta property="og:title" content="{{head.title}}">
<meta property="og:description" content="{{head.description}}">
<meta property="og:image" content="{{head.url}}{{head.logo}}">
</head>

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

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