maciejpedzich/maciejpedzi.ch
1
0
Fork 0
mirror of https://github.com/maciejpedzich/maciejpedzi.ch.git synced 2024-11-27 23:55:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Convert BaseHead component to BaseLayout

Browse Source
This commit is contained in:
Maciej Pędzich 2023-05-10 22:44:00 +02:00
parent f728d3250c
commit ef2b3e1dae
4 changed files with 136 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/BaseHead.astro
View File

@ -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
View 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>

28
src/layouts/BlogPost.astro
View File

@ -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,9 +9,14 @@ 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>
<FormattedDate date={pubDate} />
<slot />
</article>
</BaseLayout>
<style> <style>
.title { .title {
font-size: 2em; font-size: 2em;
@ -21,16 +24,3 @@ const { title, description, pubDate } = Astro.props;
text-align: center; text-align: center;
} }
</style> </style>
</head>
<body>
<Header />
<main>
<article>
<h1 class="title">{title}</h1>
<FormattedDate date={pubDate} />
<slot />
</article>
</main>
<Footer />
</body>
</html>

33
src/pages/index.astro
View File

@ -1,26 +1,19 @@
--- ---
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">
<head>
<BaseHead title="home" description={SITE_DESCRIPTION} />
</head>
<body>
<Header />
<main>
<section> <section>
<h2>Welcome to my website</h2> <h2>Welcome to my website</h2>
<p> <p>
My name is <strong>Maciej</strong>, but if you're not sure how to 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 pronounce it, then you can call me <strong>Mac</strong>. I'm an
eighteen-year-old frontend developer from <strong>Poland</strong>. eighteen-year-old frontend developer from <strong>Poland</strong>.
Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for my
my projects, I'm also familiar with <strong>Alpine</strong> and <strong projects, I'm also familiar with <strong>Alpine</strong> and <strong
>Astro</strong >Astro</strong
>. >.
</p> </p>
@ -29,8 +22,8 @@ import { SITE_DESCRIPTION } from '../consts';
<h3>My blog</h3> <h3>My blog</h3>
<p> <p>
It serves as a means of documenting the development process and inner It serves as a means of documenting the development process and inner
workings of <a href="/projects">my applications</a>. Check out the workings of <a href="/projects">my applications</a>. Check out the latest
latest posts below: posts below:
</p> </p>
<ul class="post-list"> <ul class="post-list">
<li> <li>
@ -57,19 +50,15 @@ import { SITE_DESCRIPTION } from '../consts';
href="https://twitter.com/MaciejPedzich" href="https://twitter.com/MaciejPedzich"
target="_blank" target="_blank"
rel="noopener noreferrer">Twitter</a rel="noopener noreferrer">Twitter</a
>, or <a rel="me" href="https://notacult.social/@macindahaus" >, or <a rel="me" href="https://notacult.social/@macindahaus">Mastodon</a
>Mastodon</a
>. >.
</p> </p>
</section> </section>
</main> </BaseLayout>
<Footer />
<style>
main {
text-align: center;
}
<style>
section { section {
text-align: center;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
@ -81,5 +70,3 @@ import { SITE_DESCRIPTION } from '../consts';
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
} }
</style> </style>
</body>
</html>