feat: add meta description

This commit is contained in:
Jewgeni Lewash 2024-03-08 07:36:18 +01:00
parent 4995df6376
commit 5266fe563d
5 changed files with 22 additions and 7 deletions

View File

@ -2,11 +2,18 @@
import '@/styles/globals.css'; import '@/styles/globals.css';
import Header from '@/components/layout/Header.astro'; import Header from '@/components/layout/Header.astro';
import Footer from '@/components/layout/Footer.astro'; import Footer from '@/components/layout/Footer.astro';
const { title } = Astro.props;
interface Props {
title: string;
description: string;
}
const { title, description } = Astro.props as Props;
--- ---
<html lang="en"> <html lang="en">
<head> <head>
<title>{title}</title>
<meta name="description" content={description} />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#61a8e1" /> <meta name="theme-color" content="#61a8e1" />
@ -14,7 +21,6 @@ const { title } = Astro.props;
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
<link rel="sitemap" href="/sitemap-index.xml" /> <link rel="sitemap" href="/sitemap-index.xml" />
<title>{title}</title>
</head> </head>
<body class="flex min-h-screen flex-col dark:bg-secondary"> <body class="flex min-h-screen flex-col dark:bg-secondary">
<Header /> <Header />

View File

@ -5,7 +5,9 @@ import Heading from '@/components/ui/Heading.astro';
const allBlogposts = await getCollection('blog'); const allBlogposts = await getCollection('blog');
--- ---
<BaseLayout title="Blog"> <BaseLayout
title="Blog"
description="Explore insightful articles on our Blog: Dive into a world of knowledge through posts crafted with expertise. Discover, learn, and grow with us.">
<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl"> <div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200"> <div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
<Heading level={1}>Blog</Heading> <Heading level={1}>Blog</Heading>

View File

@ -19,10 +19,13 @@ interface Props {
const { entry } = Astro.props as Props; const { entry } = Astro.props as Props;
const { Content } = await entry.render(); const { Content } = await entry.render();
const components = { table: Table }; const components = { table: Table };
const { title } = entry.data; const { title, description } = entry.data;
const descriptionMeta =
description.length > 160 ? description.substring(0, 150) + '...' : description;
--- ---
<BaseLayout title={title}> <BaseLayout title={title} description={descriptionMeta}>
<div class="container prose mx-auto px-4 py-16 dark:prose-invert lg:px-8 lg:py-32 xl:max-w-7xl"> <div class="container prose mx-auto px-4 py-16 dark:prose-invert lg:px-8 lg:py-32 xl:max-w-7xl">
<h1 class="text-4xl font-bold">{title}</h1> <h1 class="text-4xl font-bold">{title}</h1>
<Content components={components} /> <Content components={components} />

View File

@ -8,7 +8,9 @@ import index1 from '@/assets/images/index-1.png';
import index2 from '@/assets/images/index-2.png'; import index2 from '@/assets/images/index-2.png';
--- ---
<BaseLayout title="Astro Deploy"> <BaseLayout
title="Astro Deploy"
description="Launch your site with Astro Deploy: A cutting-edge solution featuring Astro.js, Docker, and Tailwind CSS for seamless, scalable web development.">
<div class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8"> <div class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8">
<Heading level={1} classes="text-center text-zinc-900 dark:text-zinc-200"> <Heading level={1} classes="text-center text-zinc-900 dark:text-zinc-200">
Deploy Your Deploy Your

View File

@ -17,7 +17,9 @@ const recipes = await directus.request(
); );
--- ---
<BaseLayout title="Recipes"> <BaseLayout
title="Recipes"
description="Feast on favorite recipes: A curated collection of delightful dishes, sourced directly from our CMS. Discover new flavors and inspire your culinary journey.">
<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl"> <div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200"> <div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
<Heading level={1}>Recipes</Heading> <Heading level={1}>Recipes</Heading>