mirror of
https://github.com/maciejpedzich/maciejpedzi.ch.git
synced 2024-11-27 23:55:47 +01: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 type { CollectionEntry } from 'astro:content';
|
||||||
|
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
import Header from '../components/Header.astro';
|
|
||||||
import Footer from '../components/Footer.astro';
|
|
||||||
import FormattedDate from '../components/FormattedDate.astro';
|
import FormattedDate from '../components/FormattedDate.astro';
|
||||||
|
|
||||||
type Props = CollectionEntry<'blog'>['data'];
|
type Props = CollectionEntry<'blog'>['data'];
|
||||||
@ -11,26 +9,18 @@ type Props = CollectionEntry<'blog'>['data'];
|
|||||||
const { title, description, pubDate } = Astro.props;
|
const { title, description, pubDate } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<BaseLayout title={title} description={description}>
|
||||||
<head>
|
<article>
|
||||||
<BaseHead title={title} description={description} />
|
<h1 class="title">{title}</h1>
|
||||||
<style>
|
<FormattedDate date={pubDate} />
|
||||||
.title {
|
<slot />
|
||||||
font-size: 2em;
|
</article>
|
||||||
margin: 0;
|
</BaseLayout>
|
||||||
text-align: center;
|
|
||||||
}
|
<style>
|
||||||
</style>
|
.title {
|
||||||
</head>
|
font-size: 2em;
|
||||||
<body>
|
margin: 0;
|
||||||
<Header />
|
text-align: center;
|
||||||
<main>
|
}
|
||||||
<article>
|
</style>
|
||||||
<h1 class="title">{title}</h1>
|
|
||||||
<FormattedDate date={pubDate} />
|
|
||||||
<slot />
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
<Footer />
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@ -1,85 +1,72 @@
|
|||||||
---
|
---
|
||||||
import BaseHead from '../components/BaseHead.astro';
|
|
||||||
import Header from '../components/Header.astro';
|
import Header from '../components/Header.astro';
|
||||||
import Footer from '../components/Footer.astro';
|
import Footer from '../components/Footer.astro';
|
||||||
import { SITE_DESCRIPTION } from '../consts';
|
import { SITE_DESCRIPTION } from '../consts';
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<BaseLayout title="home" description={SITE_DESCRIPTION}>
|
||||||
<html lang="en">
|
<section>
|
||||||
<head>
|
<h2>Welcome to my website</h2>
|
||||||
<BaseHead title="home" description={SITE_DESCRIPTION} />
|
<p>
|
||||||
</head>
|
My name is <strong>Maciej</strong>, but if you're not sure how to
|
||||||
<body>
|
pronounce it, then you can call me <strong>Mac</strong>. I'm an
|
||||||
<Header />
|
eighteen-year-old frontend developer from <strong>Poland</strong>.
|
||||||
<main>
|
Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for my
|
||||||
<section>
|
projects, I'm also familiar with <strong>Alpine</strong> and <strong
|
||||||
<h2>Welcome to my website</h2>
|
>Astro</strong
|
||||||
<p>
|
>.
|
||||||
My name is <strong>Maciej</strong>, but if you're not sure how to
|
</p>
|
||||||
pronounce it, then you can call me <strong>Mac</strong>. I'm an
|
</section>
|
||||||
eighteen-year-old frontend developer from <strong>Poland</strong>.
|
<section>
|
||||||
Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for
|
<h3>My blog</h3>
|
||||||
my projects, I'm also familiar with <strong>Alpine</strong> and <strong
|
<p>
|
||||||
>Astro</strong
|
It serves as a means of documenting the development process and inner
|
||||||
>.
|
workings of <a href="/projects">my applications</a>. Check out the latest
|
||||||
</p>
|
posts below:
|
||||||
</section>
|
</p>
|
||||||
<section>
|
<ul class="post-list">
|
||||||
<h3>My blog</h3>
|
<li>
|
||||||
<p>
|
<a href="#">This link leads nowhere</a>
|
||||||
It serves as a means of documenting the development process and inner
|
</li>
|
||||||
workings of <a href="/projects">my applications</a>. Check out the
|
<li>
|
||||||
latest posts below:
|
<a href="#"
|
||||||
</p>
|
>And so does this one. But why is that, some of you may ask</a
|
||||||
<ul class="post-list">
|
>
|
||||||
<li>
|
</li>
|
||||||
<a href="#">This link leads nowhere</a>
|
<li>
|
||||||
</li>
|
<a href="#">The answer is simple. They're placeholders</a>
|
||||||
<li>
|
</li>
|
||||||
<a href="#"
|
</ul>
|
||||||
>And so does this one. But why is that, some of you may ask</a
|
</section>
|
||||||
>
|
<section>
|
||||||
</li>
|
<h3>Enjoy my work?</h3>
|
||||||
<li>
|
<p>
|
||||||
<a href="#">The answer is simple. They're placeholders</a>
|
If so, make sure to follow me on <a
|
||||||
</li>
|
href="https://github.com/maciejpedzich"
|
||||||
</ul>
|
target="_blank"
|
||||||
</section>
|
rel="noopener noreferrer">GitHub</a
|
||||||
<section>
|
>, <a
|
||||||
<h3>Enjoy my work?</h3>
|
href="https://twitter.com/MaciejPedzich"
|
||||||
<p>
|
target="_blank"
|
||||||
If so, make sure to follow me on <a
|
rel="noopener noreferrer">Twitter</a
|
||||||
href="https://github.com/maciejpedzich"
|
>, or <a rel="me" href="https://notacult.social/@macindahaus">Mastodon</a
|
||||||
target="_blank"
|
>.
|
||||||
rel="noopener noreferrer">GitHub</a
|
</p>
|
||||||
>, <a
|
</section>
|
||||||
href="https://twitter.com/MaciejPedzich"
|
</BaseLayout>
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
<style>
|
||||||
margin-bottom: 1.25rem;
|
section {
|
||||||
}
|
text-align: center;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 1rem 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user