kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add meta tags, and links, and other SEO optimization to the head

Browse Source
This commit is contained in:
Stefan Imhoff
2023-06-12 17:41:22 +02:00
parent 15daaa39e1
commit a823e2ff9b
14 changed files with 179 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -25,6 +25,7 @@
"astro": "^2.5.5", "astro": "^2.5.5",
"astro-icon": "^0.8.0", "astro-icon": "^0.8.0",
"astro-imagetools": "^0.8.1", "astro-imagetools": "^0.8.1",
"astro-seo": "^0.7.4",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"chart.js": "^4.3.0", "chart.js": "^4.3.0",
"chartjs-plugin-autocolors": "^0.2.2", "chartjs-plugin-autocolors": "^0.2.2",

7
pnpm-lock.yaml generated
View File

@@ -33,6 +33,9 @@ dependencies:
astro-imagetools: astro-imagetools:
specifier: ^0.8.1 specifier: ^0.8.1
version: 0.8.1(astro@2.5.5) version: 0.8.1(astro@2.5.5)
astro-seo:
specifier: ^0.7.4
version: 0.7.4
autoprefixer: autoprefixer:
specifier: ^10.4.14 specifier: ^10.4.14
version: 10.4.14(postcss@8.4.24) version: 10.4.14(postcss@8.4.24)
@@ -3576,6 +3579,10 @@ packages:
imagetools-core: 3.0.2 imagetools-core: 3.0.2
dev: false dev: false
/astro-seo@0.7.4:
resolution: {integrity: sha512-E+wJmxOnvBRjgzVctdGk/VdwoEqeQ6Q/KgVW2wRBXZWJVDgOweB32Da/UiH0/FpGncPzo2daOrc08DNn5wTanw==}
dev: false
/astro@2.5.5(@types/node@16.9.1)(sharp@0.32.1): /astro@2.5.5(@types/node@16.9.1)(sharp@0.32.1):
resolution: {integrity: sha512-VRwnlfRtPALeOxfE4e7To5Vlu9pGwlTRWN1zkn1QTizwfg0rLirFTm6t2MCG/fUhlu/p3QO9tz8SpAIyDq53/Q==} resolution: {integrity: sha512-VRwnlfRtPALeOxfE4e7To5Vlu9pGwlTRWN1zkn1QTizwfg0rLirFTm6t2MCG/fUhlu/p3QO9tz8SpAIyDq53/Q==}
engines: {node: '>=16.12.0', npm: '>=6.14.0'} engines: {node: '>=16.12.0', npm: '>=6.14.0'}

1
src/content/journal/2023/shokunin.mdx
View File

@@ -1,5 +1,6 @@
--- ---
title: Shokunin – The Spirit of an Artisan title: Shokunin – The Spirit of an Artisan
slug: shokunin
date: 2023-03-08 date: 2023-03-08
author: Stefan Imhoff author: Stefan Imhoff
description: The Japanese word “shokunin” describes an artisan or craftsman. In this essay, I investigate the meaning and history of the word and show a variety of examples. description: The Japanese word “shokunin” describes an artisan or craftsman. In this essay, I investigate the meaning and history of the word and show a variety of examples.

148
src/layouts/BaseLayout.astro
View File

@@ -1,6 +1,8 @@
--- ---
import '../styles/global.css'; import '../styles/global.css';
import { Sprite } from 'astro-icon'; import { Sprite } from 'astro-icon';
import { SEO } from 'astro-seo';
import { site } from '../data/site';
import ThemeProvider from '../components/ThemeProvider.astro'; import ThemeProvider from '../components/ThemeProvider.astro';
import PageHeader from '../components/PageHeader.astro'; import PageHeader from '../components/PageHeader.astro';
@@ -9,52 +11,142 @@ import Sal from '../components/Sal.astro';
export interface Props { export interface Props {
backLink?: string; backLink?: string;
cover?: string;
description?: string; description?: string;
footer?: boolean; footer?: boolean;
header?: boolean; header?: boolean;
nofollow?: boolean;
noindex?: boolean;
title: string; title: string;
} }
const { backLink, footer = true, header = true, title, description } = Astro.props; const {
backLink,
description,
footer = true,
header = true,
nofollow,
noindex,
title,
cover = '/assets/images/branding/og/bonsai.jpg',
} = Astro.props;
const currentPath = new URL(Astro.request.url).pathname;
const fullTitle = `${title} · ${site.description}`;
const fullDescription = description || site.description;
const fullUrl = site.url + currentPath;
const fullImage = site.url + cover;
--- ---
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="no-js box-border scroll-smooth text-[125%]"> <html lang="en" class="no-js box-border scroll-smooth text-[125%]">
<head> <head>
<meta charset="UTF-8" /> <SEO
<meta name="viewport" content="width=device-width, initial-scale=1" /> charset="UTF-8"
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> title={fullTitle}
<meta name="generator" content={Astro.generator} /> description={fullDescription}
canonical={fullUrl}
<title>{title}</title> nofollow={nofollow}
noindex={noindex}
<meta name="description" content={description} /> openGraph={{
basic: {
image: fullImage,
title: fullTitle,
type: 'article',
url: fullUrl,
},
image: {
height: 675,
width: 1200,
},
optional: {
description: fullDescription,
},
}}
twitter={{
card: 'summary_large_image',
creator: site.twitter,
description: fullDescription,
image: fullImage,
site: site.twitter,
title: fullTitle,
}}
extend={{
link: [
{ rel: 'icon', href: '/favicon.ico' },
{
rel: 'icon',
href: '/assets/images/branding/favicons/favicon.svg',
type: 'image/svg+xml',
},
{
rel: 'apple-touch-icon',
href: '/assets/images/branding/favicons/apple-touch-icon.png',
},
{
rel: 'manifest',
href: '/manifest.webmanifest',
},
{
as: 'font',
crossorigin: '',
href: '/assets/fonts/secuela-regular-vf.woff2',
rel: 'preload',
type: 'font/woff2',
},
{
as: 'font',
crossorigin: '',
href: '/assets/fonts/secuela-italic-vf.woff2',
rel: 'preload',
type: 'font/woff2',
},
{
rel: 'alternate',
type: 'application/rss+xml',
title: 'Stefan Imhoff',
href: site.url + '/rss.xml',
},
{
rel: 'alternate',
type: 'application/rss+xml',
title: 'Stefan Imhoff (Haiku)',
href: site.url + '/rss-haiku.xml',
},
{
rel: 'alternate',
type: 'application/rss+xml',
title: 'Stefan Imhoff (Sketchnotes)',
href: site.url + '/rss-sketchnotes.xml',
},
{
rel: 'alternate',
type: 'application/rss+xml',
title: 'Stefan Imhoff (AI Art)',
href: site.url + '/rss-ai-art.xml',
},
{
rel: 'alternate',
type: 'application/rss+xml',
title: 'Stefan Imhoff (Projects)',
href: site.url + '/rss-projects.xml',
},
],
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'author', content: site.author },
{ name: 'generator', content: Astro.generator },
{ name: 'theme-color', content: '#e7e6e4' },
],
}}
/>
<script type="module"> <script type="module">
document.documentElement.classList.remove('no-js'); document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js'); document.documentElement.classList.add('js');
</script> </script>
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/assets/images/branding/favicons/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/assets/images/branding/favicons/apple-touch-icon.png" />
<!-- <link rel="manifest" href="/manifest.webmanifest" /> -->
<link
as="font"
crossorigin
href="/assets/fonts/secuela-regular-vf.woff2"
rel="preload"
type="font/woff2"
/>
<link
as="font"
crossorigin
href="/assets/fonts/secuela-italic-vf.woff2"
rel="preload"
type="font/woff2"
/>
<Sal /> <Sal />
<ThemeProvider /> <ThemeProvider />
</head> </head>
<body <body

11
src/layouts/GridLayout.astro
View File

@@ -6,24 +6,30 @@ import BaseLayout from './BaseLayout.astro';
export interface Props { export interface Props {
backLink?: string; backLink?: string;
class?: string; class?: string;
cover?: string;
description?: string; description?: string;
footer?: boolean; footer?: boolean;
gap?: boolean; gap?: boolean;
grid?: 'fullsize' | 'wide' | 'narrow'; grid?: 'fullsize' | 'wide' | 'narrow';
header?: boolean; header?: boolean;
innerGrid?: boolean; innerGrid?: boolean;
nofollow?: boolean;
noindex?: boolean;
title: string; title: string;
} }
const { const {
backLink, backLink,
class: className, class: className,
cover,
description, description,
footer = true, footer = true,
gap = true, gap = true,
grid = 'narrow', grid = 'narrow',
header, header,
innerGrid, innerGrid,
nofollow,
noindex,
title, title,
} = Astro.props; } = Astro.props;
@@ -48,10 +54,13 @@ const wrapperClasses = cx(
<BaseLayout <BaseLayout
backLink={backLink} backLink={backLink}
cover={cover}
description={description}
footer={footer} footer={footer}
header={header} header={header}
nofollow={nofollow}
noindex={noindex}
title={title} title={title}
description={description}
> >
<div class={gridClasses}> <div class={gridClasses}>
<slot name="title" /> <slot name="title" />

10
src/pages/404.astro
View File

@@ -13,7 +13,15 @@ const title = 'Error 404';
const description = 'Page not found.'; const description = 'Page not found.';
--- ---
<GridLayout title={title} description={description} grid="wide" class="grid" innerGrid> <GridLayout
class="grid"
description={description}
grid="wide"
innerGrid
nofollow={true}
noindex={true}
title={title}
>
<PageTitle grid="wide" innerGrid>Not Found.</PageTitle> <PageTitle grid="wide" innerGrid>Not Found.</PageTitle>
<Verse <Verse
class="z-10 col-start-1 col-end-17 row-start-2 text-3 italic mbe-10 mbs-10 md:col-start-3 md:col-end-9" class="z-10 col-start-1 col-end-17 row-start-2 text-3 italic mbe-10 mbs-10 md:col-start-3 md:col-end-9"

11
src/pages/[...slug].astro
View File

@@ -48,7 +48,16 @@ const title = entry.data.title;
const description = entry.data.description; const description = entry.data.description;
--- ---
<GridLayout title={title} description={description} grid="fullsize" innerGrid backLink="/journal/"> <GridLayout
backLink="/journal/"
cover={entry.data.cover}
description={description}
grid="fullsize"
innerGrid
nofollow={entry.data.nofollow}
noindex={entry.data.noindex}
title={title}
>
<PageTitle slot="title" class="!text-6"> <PageTitle slot="title" class="!text-6">
{entry.data.title} {entry.data.title}
</PageTitle> </PageTitle>

10
src/pages/cv.astro
View File

@@ -27,7 +27,15 @@ const description =
'The curriculum vitae of Stefan Imhoff, Senior Software Engineer from Hamburg, Germany.'; 'The curriculum vitae of Stefan Imhoff, Senior Software Engineer from Hamburg, Germany.';
--- ---
<GridLayout title={title} description={description} grid="wide" class="grid" innerGrid> <GridLayout
class="grid"
description={description}
grid="wide"
innerGrid
nofollow={true}
noindex={true}
title={title}
>
<PageTitle grid="wide" innerGrid>Curriculum Vitae</PageTitle> <PageTitle grid="wide" innerGrid>Curriculum Vitae</PageTitle>
<article class="col-span-full md:col-start-1 md:col-end-9" {...animation}> <article class="col-span-full md:col-start-1 md:col-end-9" {...animation}>

2
src/pages/imprint.mdx
View File

@@ -2,6 +2,8 @@
layout: ../layouts/PageLayout.astro layout: ../layouts/PageLayout.astro
title: Imprint title: Imprint
description: The imprint of this website. description: The imprint of this website.
noindex: true
nofollow: true
--- ---
import { mapping } from "../mdx-components.ts"; import { mapping } from "../mdx-components.ts";

2
src/schema/ai-art.ts
View File

@@ -11,5 +11,7 @@ export const aiArt = defineCollection({
aspectRatio: z.number(), aspectRatio: z.number(),
}) })
), ),
noindex: z.boolean().optional(),
nofollow: z.boolean().optional(),
}), }),
}); });

2
src/schema/haiku.ts
View File

@@ -5,5 +5,7 @@ export const haiku = defineCollection({
date: z.date(), date: z.date(),
de: z.string(), de: z.string(),
en: z.string(), en: z.string(),
noindex: z.boolean().optional(),
nofollow: z.boolean().optional(),
}), }),
}); });

2
src/schema/journal.ts
View File

@@ -29,5 +29,7 @@ export const journal = defineCollection({
]) ])
), ),
series: z.string().optional(), series: z.string().optional(),
noindex: z.boolean().optional(),
nofollow: z.boolean().optional(),
}), }),
}); });

2
src/schema/projects.ts
View File

@@ -38,5 +38,7 @@ export const projects = defineCollection({
}) })
.optional(), .optional(),
class: z.string().optional(), class: z.string().optional(),
noindex: z.boolean().optional(),
nofollow: z.boolean().optional(),
}), }),
}); });

2
src/schema/sketchnotes.ts
View File

@@ -11,5 +11,7 @@ export const sketchnotes = defineCollection({
aspectRatio: z.number(), aspectRatio: z.number(),
}) })
), ),
noindex: z.boolean().optional(),
nofollow: z.boolean().optional(),
}), }),
}); });