add head template
This commit is contained in:
parent
ed57bda08e
commit
6b0e3857fb
@ -1,6 +1,6 @@
|
||||
# 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
|
||||
|
||||
|
||||
14
build.js
14
build.js
@ -44,7 +44,7 @@ function inlineCSS(html, css) {
|
||||
}
|
||||
|
||||
function copyImages(srcDir, destDir) {
|
||||
if (!fs.existsSync(destDir)){
|
||||
if (!fs.existsSync(destDir)) {
|
||||
fs.mkdirSync(destDir, { recursive: true });
|
||||
}
|
||||
|
||||
@ -71,6 +71,7 @@ function build() {
|
||||
const imagesDestPath = path.join(distPath, 'images');
|
||||
const faviconSrcPath = path.join(__dirname, 'public', 'favicons');
|
||||
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 linksTemplatePath = path.join(__dirname, 'src', 'templates', 'social-links-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
|
||||
data.currentYear = currentYear;
|
||||
|
||||
const activeTheme = data.theme;
|
||||
|
||||
// Output titles from data.json
|
||||
data.socialLinks.forEach(link => console.log(link.name));
|
||||
|
||||
@ -94,16 +97,17 @@ function build() {
|
||||
css = minimizeCSS(css);
|
||||
|
||||
// Compile HTML with Handlebars
|
||||
const headHtml = compileTemplate(headTemplatePath, data);
|
||||
const headerHtml = compileTemplate(headerTemplatePath, data);
|
||||
const socialLinksHtml = compileTemplate(linksTemplatePath, data);
|
||||
const footerHtml = compileTemplate(footerTemplatePath, data);
|
||||
|
||||
// Replace placeholder in base HTML with compiled HTML
|
||||
let finalHtml = baseHtml
|
||||
.replace('<!-- Header template will populate this section -->', headerHtml)
|
||||
.replace('<!-- Handlebars template will populate this section -->', socialLinksHtml)
|
||||
.replace('<!-- Footer template will populate this section -->', footerHtml);
|
||||
|
||||
.replace('<!-- Head template will populate this section -->', headHtml)
|
||||
.replace('<!-- Header template will populate this section -->', headerHtml)
|
||||
.replace('<!-- Handlebars template will populate this section -->', socialLinksHtml)
|
||||
.replace('<!-- Footer template will populate this section -->', footerHtml);
|
||||
|
||||
finalHtml = inlineCSS(finalHtml, css);
|
||||
finalHtml = minimizeHTML(finalHtml);
|
||||
|
||||
1
public/images/xing.svg
Normal file
1
public/images/xing.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 754 B |
@ -1,20 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LinkMeUp</title>
|
||||
</head>
|
||||
|
||||
<!-- Head template will populate this section -->
|
||||
<body>
|
||||
<!-- Header template will populate this section -->
|
||||
<main>
|
||||
<hr/>
|
||||
<hr />
|
||||
<!-- Handlebars template will populate this section -->
|
||||
<hr/>
|
||||
<hr />
|
||||
</main>
|
||||
<!-- Footer template will populate this section -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -10,12 +10,22 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 2rem;
|
||||
margin: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
padding: 2rem 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
header h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
@ -26,9 +36,15 @@ footer {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
footer a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2.5rem;
|
||||
margin: 1.7rem auto;
|
||||
max-width: 1000px;
|
||||
max-width: 100%;
|
||||
max-width: 1100px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
@ -56,7 +72,7 @@ main hr {
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
transform: scale(1.05);
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@ -83,3 +99,23 @@ main hr {
|
||||
.link h2 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -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": {
|
||||
"title": "WieErWill",
|
||||
"subtitle": "Programmed for Adventure, Coded for Curiosity"
|
||||
@ -31,6 +38,12 @@
|
||||
"icon": "linkedin.svg",
|
||||
"backgroundColor": "#39CCCC"
|
||||
},
|
||||
{
|
||||
"name": "Xing",
|
||||
"url": "https://xing.de/profile/Robert_Jeutter",
|
||||
"icon": "xing.svg",
|
||||
"backgroundColor": "#39CCCC"
|
||||
},
|
||||
{
|
||||
"name": "[Matrix]",
|
||||
"url": "https://matrix.to/#/@wieerwill:matrix.org",
|
||||
|
||||
26
src/templates/head-template.hbs
Normal file
26
src/templates/head-template.hbs
Normal 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>
|
||||
@ -1,6 +1,6 @@
|
||||
<header>
|
||||
<h1>{{header.title}}</h1>
|
||||
{{#if header.subtitle}}
|
||||
<h3>{{header.subtitle}}</h3>
|
||||
<h2>{{header.subtitle}}</h2>
|
||||
{{/if}}
|
||||
</header>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user