firq-dev-website/src/layouts/Layout.astro

140 lines
3.6 KiB
Text
Raw Normal View History

2023-01-15 16:53:19 +00:00
---
2024-10-22 20:54:02 +00:00
import "@fontsource-variable/work-sans";
2024-10-22 21:07:34 +00:00
import workSans from "@fontsource-variable/work-sans/files/work-sans-latin-wght-normal.woff2"
2024-10-22 20:54:02 +00:00
2024-07-19 20:52:15 +00:00
import Navbar from '../components/navbar/navbar.astro'
import NavbarEntry from '../components/navbar/navbarEntry.astro'
import navdata from '../../static/data/_navdata.json'
2023-12-26 00:24:44 +00:00
import embed from '../assets/embed.png'
2023-12-29 21:57:30 +00:00
import home from 'iconoir/icons/home.svg'
import servants from 'iconoir/icons/task-list.svg'
import ta_collection from 'iconoir/icons/database.svg'
import blog from 'iconoir/icons/bookmark-book.svg'
import about from 'iconoir/icons/mail.svg'
2023-03-04 18:11:52 +00:00
2023-01-15 16:53:19 +00:00
export interface Props {
2023-03-09 10:44:18 +00:00
title: string
currentpage: string
descriptionOverride?: string
2023-01-15 16:53:19 +00:00
}
2023-12-29 21:57:30 +00:00
interface IconsLookup {
[key: string]: ImageMetadata
}
const icons: IconsLookup = {
home: home,
servants: servants,
ta_collection: ta_collection,
blog: blog,
about: about,
}
2023-03-09 10:44:18 +00:00
const { descriptionOverride, currentpage, title } = Astro.props
let description
2023-03-09 10:44:18 +00:00
if (descriptionOverride === undefined) {
description = 'Firqs own site!'
} else {
2023-03-09 10:44:18 +00:00
description = descriptionOverride
}
2023-03-09 10:44:18 +00:00
let currPage = 'https://firq.dev/'
if (currentpage !== 'home') {
currPage += currentpage
}
2023-12-29 21:57:30 +00:00
const mapped_navdata = navdata.map((item) => ({
...item,
...{ icon: icons[item.icon] },
}))
2023-01-15 16:53:19 +00:00
---
2023-12-29 21:57:30 +00:00
<!doctype html>
2023-01-15 16:53:19 +00:00
<html lang="en">
2023-03-09 10:44:18 +00:00
<head>
2023-03-17 20:31:29 +00:00
<title>{title}</title>
<!-- Meta Tags -->
2023-03-09 10:44:18 +00:00
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
2023-03-17 20:31:29 +00:00
<meta name="description" content={description} />
2023-03-09 10:44:18 +00:00
<meta property="og:title" content={title} />
<meta property="og:url" content={currPage} />
<meta property="og:description" content={description} />
2023-12-26 00:24:44 +00:00
<meta property="og:image" content={embed.src} />
2023-03-09 10:44:18 +00:00
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
2023-03-17 20:31:29 +00:00
<meta name="theme-color" content="#b86cff" />
2023-08-06 12:53:35 +00:00
<meta
name="google-site-verification"
content="SmcWcewh7DCANcLeTe3ntU0R-LESbo_bsolICJnmulE"
/>
2024-10-01 20:12:04 +00:00
<!-- Disable DarkReader, as site is already in dark mode -->
<meta name="darkreader-lock" content="this site only has darkmode">
2023-03-17 20:31:29 +00:00
<!-- Links -->
2024-10-22 21:07:34 +00:00
<link rel="preload" as="font" crossorigin="anonymous" href={workSans} type="font/woff2"/>
<link rel="icon" type="image/ico" href="/favicon.ico" />
<link rel="sitemap" href="/sitemap-index.xml" />
2023-03-17 20:31:29 +00:00
<link href="https://mastodon.neshweb.net/@Firq" rel="me" />
2023-03-09 10:44:18 +00:00
</head>
<body>
<Navbar>
{
2023-12-29 21:57:30 +00:00
mapped_navdata.map((item) => (
2024-07-19 20:52:15 +00:00
<NavbarEntry
currentPage={currentpage}
navtype="desktop"
{...item}
slot="desktop"
/>
))
}
{
mapped_navdata.map((item) => (
2024-07-19 20:52:15 +00:00
<NavbarEntry
currentPage={currentpage}
navtype="mobile"
{...item}
slot="mobile"
/>
2023-03-09 10:44:18 +00:00
))
}
</Navbar>
<slot />
</body>
2023-01-15 16:53:19 +00:00
</html>
<style is:global>
2023-03-09 10:44:18 +00:00
:root {
--hover-scale: 1.05;
--speed: 50%;
--ease: 50%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--c-darkgray: #1e1e1e;
--c-duskgray: #242424;
--c-gray: #2e2e2e;
2024-07-19 20:52:15 +00:00
--c-lighter: #eee;
2023-03-09 10:44:18 +00:00
--c-lightgray: #3e3e3e;
--c-darkpurple: #b86cff;
--c-purplepink: #c105ff;
--c-darkergray: #1b1b1b;
2024-07-19 20:52:15 +00:00
--c-reddish: #ff0077;
2023-03-09 10:44:18 +00:00
}
body {
background: var(--c-lightgray);
margin: 0px;
}
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
2024-07-19 20:52:15 +00:00
}
2023-01-15 16:53:19 +00:00
</style>