foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Accept meta and links data in base layout

Browse source 
This allows you to add custom `<meta/>` and `<links/>` tags inside the
document's `<head>`.
This commit is contained in:
Foster Hangdaan 2023-08-05 12:20:31 -04:00
parent 59a24c72ff
commit a0beae19ca
Signed by: foster
GPG key ID: E48D7F49A852F112
1 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_includes/layouts/base.tsx
View file

@ -1,4 +1,4 @@
export default function({ title, description, children, comp }) { export default function({ title, description, children, comp, metas, links }) {
return ( return (
<html lang="en-CA"> <html lang="en-CA">
<head> <head>
@ -10,12 +10,18 @@ export default function({ title, description, children, comp }) {
<meta name="color-scheme" content="dark light"/> <meta name="color-scheme" content="dark light"/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1b26"/> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1b26"/>
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#d5d6db"/> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#d5d6db"/>
{Array.isArray(metas) && metas.length > 0 &&
metas.map(m => <meta name={m.name} content={m.content}/>)
}
<link rel="stylesheet" href="/styles/main.css"/> <link rel="stylesheet" href="/styles/main.css"/>
<link rel="icon" type="image/png" href="/icons/tabicon-16.png" sizes="16x16" /> <link rel="icon" type="image/png" href="/icons/tabicon-16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/icons/tabicon-32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="/icons/tabicon-32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/icons/tabicon-96.png" sizes="96x96" /> <link rel="icon" type="image/png" href="/icons/tabicon-96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/icons/tabicon-128.png" sizes="128x128" /> <link rel="icon" type="image/png" href="/icons/tabicon-128.png" sizes="128x128" />
<link rel="icon" type="image/png" href="/icons/tabicon-196.png" sizes="196x196" /> <link rel="icon" type="image/png" href="/icons/tabicon-196.png" sizes="196x196" />
{Array.isArray(links) && links.length > 0 &&
links.map(l => <link rel={l.rel} href={l.href} type={l.type} title={l.title}/>)
}
</head> </head>
<body> <body>
{ comp.navbar() } { comp.navbar() }