Korbs/Glee-Mirror
1
Fork 0
Code Issues Pull requests Activity

Add configuration for Header and Footer to use

Browse source
This commit is contained in:
Korbs 2025-03-13 20:59:33 -04:00
parent f8bfd97a1e
commit f90bb0165b
Signed by: Korbs
SSH key fingerprint: SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
3 changed files with 82 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

55
config.json Normal file
View file

@ -0,0 +1,55 @@
{
"Meta": {
"Name": "Company Name",
"Slogan": "A company slogan goes here.",
"LegalName": "Company Name LLC",
"CopyrightDate": "2024 - 2025"
},
"Logo": {
"Favicon": "/favicon.png",
"HeaderLight": "/LogoHeaderLight.svg",
"HeaderDark": "/LogoHeaderDark.svg",
"FooterLight": "/LogoFooterLight.png",
"FooterDark": "/LogoFooterDark.png"
},
"Menu": {
"Center": [
{
"Name": "Webpage",
"Link": "#"
},
{
"Name": "Webpage",
"Link": "#"
},
{
"Name": "Webpage",
"Link": "#"
},
{
"Name": "Webpage",
"Link": "#"
}
],
"End": [
{
"Name": "Contact Us",
"Link": "#"
}
],
"FooterBottom": [
{
"Name": "Legal Document",
"Link": "#"
},
{
"Name": "Privacy Policy",
"Link": "#"
},
{
"Name": "Cookies Policy",
"Link": "#"
}
]
}
}

27
src/components/global/Footer.astro
View file

@ -1,9 +1,15 @@
---
// Configuration
import { Meta, Menu, Logo } from "../../../config.json"
---
<footer>
<div class="footer-top">
<div class="top-footer-start">
<img src="/logo.png"/>
<h2>Company Name</h2>
<p>A company slogan goes here.</p>
<img class="footer-site-logo light" src={Logo.FooterLight}/>
<img class="footer-site-logo dark" src={Logo.FooterDark}/>
<h2>{Meta.Name}</h2>
<p>{Meta.Slogan}</p>
</div>
<div class="top-footer-end">
<div>
@ -29,12 +35,10 @@
</div>
<div class="footer-bottom">
<div class="bottom-footer-start">
<p>© 2025 Company Name LLC</p>
<p>© {Meta.CopyrightDate} {Meta.LegalName}</p>
</div>
<div class="bottom-footer-end">
<a href="#">Legal Document</a>
<a href="#">Privacy Policy</a>
<a href="#">Cookies Policy</a>
{Menu.FooterBottom.map((Link) => <a href={Link.Link}>{Link.Name}</a>)}
</div>
</div>
</footer>
@ -54,8 +58,8 @@ footer {
gap: 24px;
* {margin: 0px}
img {
width: 64px;
height: 64px;
height: 48px;
object-position: left;
object-fit: contain;
}
}
@ -79,7 +83,10 @@ footer {
padding-top: 24px;
.bottom-footer-end {
display: flex;
gap: 12px;
gap: 24px;
a {
text-decoration: none;
}
}
}
}

17
src/components/global/Header.astro
View file

@ -1,17 +1,20 @@
---
// Configuration
import { Meta, Menu, Logo } from "../../../config.json"
---
<header>
<div class="header-start">
<a href="/">
<img class="header-site-logo" src="/logo.png"/>
<h2>Company Name</h2>
<img class="header-site-logo light" src={Logo.HeaderLight}/>
<img class="header-site-logo dark" src={Logo.HeaderDark}/>
<h2>{Meta.Name}</h2>
</a>
</div>
<div class="header-middle">
<a href="#">Webpage</a>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
<a href="#">Webpage</a>
{Menu.Center.map((Link) => <a href={Link.Link}>{Link.Name}</a>)}
</div>
<div class="header-end">
<a href="#">Contact Us</a>
{Menu.End.map((Link) => <a href={Link.Link}>{Link.Name}</a>)}
</div>
</header>