mirror of
https://github.com/maciejpedzich/maciejpedzi.ch.git
synced 2024-09-19 17:56:20 +02:00
Convert BaseHead component to BaseLayout
This commit is contained in:
Maciej Pędzich
parent
f728d3250c
commit
ef2b3e1dae
@ -1,36 +0,0 @@
|
||||
---
|
||||
// Import the global.css file here so that it is included on
|
||||
// all pages through the use of the <BaseHead /> component.
|
||||
import '../styles/global.css';
|
||||
import { SITE_TITLE } from '../consts';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
|
||||
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
const actualTitle = title === 'home' ? SITE_TITLE : title + ' | ' + SITE_TITLE;
|
||||
---
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
<title>{actualTitle}</title>
|
||||
<meta name="title" content={actualTitle} />
|
||||
<meta name="description" content={description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={Astro.url} />
|
||||
<meta property="og:title" content={actualTitle} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={new URL(image, Astro.url)} />
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={Astro.url} />
|
||||
<meta property="twitter:title" content={actualTitle} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={new URL(image, Astro.url)} />
|
||||
57
src/layouts/BaseLayout.astro
Normal file
57
src/layouts/BaseLayout.astro
Normal file
@ -0,0 +1,57 @@
|
||||
---
|
||||
// Import the global.css file here so that it is included on
|
||||
// all pages through the use of the <BaseHead /> component.
|
||||
import '../styles/global.css';
|
||||
import { SITE_TITLE } from '../consts';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
|
||||
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
const actualTitle = title === 'home' ? SITE_TITLE : `${title} | ${SITE_TITLE}`;
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
<title>{actualTitle}</title>
|
||||
<meta name="title" content={actualTitle} />
|
||||
<meta name="description" content={description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={Astro.url} />
|
||||
<meta property="og:title" content={actualTitle} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={new URL(image, Astro.url)} />
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={Astro.url} />
|
||||
<meta property="twitter:title" content={actualTitle} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={new URL(image, Astro.url)} />
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
@ -1,9 +1,7 @@
|
||||
---
|
||||
import type { CollectionEntry } from 'astro:content';
|
||||
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import FormattedDate from '../components/FormattedDate.astro';
|
||||
|
||||
type Props = CollectionEntry<'blog'>['data'];
|
||||
@ -11,26 +9,18 @@ type Props = CollectionEntry<'blog'>['data'];
|
||||
const { title, description, pubDate } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={title} description={description} />
|
||||
<style>
|
||||
.title {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<article>
|
||||
<h1 class="title">{title}</h1>
|
||||
<FormattedDate date={pubDate} />
|
||||
<slot />
|
||||
</article>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
<BaseLayout title={title} description={description}>
|
||||
<article>
|
||||
<h1 class="title">{title}</h1>
|
||||
<FormattedDate date={pubDate} />
|
||||
<slot />
|
||||
</article>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.title {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,85 +1,72 @@
|
||||
---
|
||||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { SITE_DESCRIPTION } from '../consts';
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title="home" description={SITE_DESCRIPTION} />
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<section>
|
||||
<h2>Welcome to my website</h2>
|
||||
<p>
|
||||
My name is <strong>Maciej</strong>, but if you're not sure how to
|
||||
pronounce it, then you can call me <strong>Mac</strong>. I'm an
|
||||
eighteen-year-old frontend developer from <strong>Poland</strong>.
|
||||
Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for
|
||||
my projects, I'm also familiar with <strong>Alpine</strong> and <strong
|
||||
>Astro</strong
|
||||
>.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>My blog</h3>
|
||||
<p>
|
||||
It serves as a means of documenting the development process and inner
|
||||
workings of <a href="/projects">my applications</a>. Check out the
|
||||
latest posts below:
|
||||
</p>
|
||||
<ul class="post-list">
|
||||
<li>
|
||||
<a href="#">This link leads nowhere</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
>And so does this one. But why is that, some of you may ask</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">The answer is simple. They're placeholders</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Enjoy my work?</h3>
|
||||
<p>
|
||||
If so, make sure to follow me on <a
|
||||
href="https://github.com/maciejpedzich"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">GitHub</a
|
||||
>, <a
|
||||
href="https://twitter.com/MaciejPedzich"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Twitter</a
|
||||
>, or <a rel="me" href="https://notacult.social/@macindahaus"
|
||||
>Mastodon</a
|
||||
>.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
<style>
|
||||
main {
|
||||
text-align: center;
|
||||
}
|
||||
<BaseLayout title="home" description={SITE_DESCRIPTION}>
|
||||
<section>
|
||||
<h2>Welcome to my website</h2>
|
||||
<p>
|
||||
My name is <strong>Maciej</strong>, but if you're not sure how to
|
||||
pronounce it, then you can call me <strong>Mac</strong>. I'm an
|
||||
eighteen-year-old frontend developer from <strong>Poland</strong>.
|
||||
Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for my
|
||||
projects, I'm also familiar with <strong>Alpine</strong> and <strong
|
||||
>Astro</strong
|
||||
>.
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>My blog</h3>
|
||||
<p>
|
||||
It serves as a means of documenting the development process and inner
|
||||
workings of <a href="/projects">my applications</a>. Check out the latest
|
||||
posts below:
|
||||
</p>
|
||||
<ul class="post-list">
|
||||
<li>
|
||||
<a href="#">This link leads nowhere</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
>And so does this one. But why is that, some of you may ask</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">The answer is simple. They're placeholders</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Enjoy my work?</h3>
|
||||
<p>
|
||||
If so, make sure to follow me on <a
|
||||
href="https://github.com/maciejpedzich"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">GitHub</a
|
||||
>, <a
|
||||
href="https://twitter.com/MaciejPedzich"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">Twitter</a
|
||||
>, or <a rel="me" href="https://notacult.social/@macindahaus">Mastodon</a
|
||||
>.
|
||||
</p>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
section {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
<style>
|
||||
section {
|
||||
text-align: center;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
p {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user