cozy/src/layouts/Layout.astro

84 lines
2.4 KiB
Text

---
import { ArticleData } from "@extractus/article-extractor";
import "./reset.css";
import Footer from "../components/Footer.astro";
export interface Props {
meta: ArticleData
}
const { meta } = Astro.props;
const appTitle = `Cozy 🧸${meta.title && `| ${meta.title}`}`;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{appTitle}</title>
{
meta.url !== '/' ? (
<meta name="robots" content="noindex">
<meta name="googlebot" content="noindex">
) : (
<meta property="og:title" content={appTitle} />
<meta property="og:url" content={Astro.url.href} />
<meta property="og:description" content="Remove distractions. Save your favorites. Get useful insights. Cozy is your modern-day reading assistant." />
<meta name="description" content="Remove distractions. Save your favorites. Get useful insights. Cozy is your modern-day reading assistant." />
<meta itemprop="description" content="Remove distractions. Save your favorites. Get useful insights. Cozy is your modern-day reading assistant." />
)
}
<meta property="cozy:title" content={meta.title} />
<meta property="cozy:url" content={meta.url} />
<meta property="cozy:description" content={meta.description} />
<meta property="cozy:image" content={meta.image} />
<meta property="cozy:source" content={meta.source} />
<meta property="cozy:author" content={meta.author} />
<meta property="cozy:published" content={meta.published} />
</head>
<body>
<div id="app-wrapper">
<slot />
<div id="main-content">
<div id="post-wrapper">
<slot name="post" />
</div>
<div id="library-wrapper">
<slot name="library" />
</div>
</div>
</div>
<Footer />
</body>
</html>
<style lang="scss">
#app-wrapper {
width: 100%;
max-width: 650px;
margin: 0 auto;
padding: 0.5rem;
}
#main-content {
* {
margin: 1rem 0 0;
}
#post-wrapper {
padding: 0 1rem;
}
}
</style>
<style is:global lang="scss">
:root {
--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
html * {
font-family: var(--system-ui);
}
</style>