feat(layout): title and description meta tags

goulvenclech · May 9, 2024 · eb0edff · eb0edff
1 parent b5fe4e3
commit eb0edff
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 25 deletions.
diff --git a/.changeset/two-beans-drive.md b/.changeset/two-beans-drive.md
@@ -0,0 +1,5 @@
+---
+"@goulvenclech/astropi": minor
+---
+
+Add title and description meta tags where it was possible.
diff --git a/packages/astropi/layouts/BaseLayout.astro b/packages/astropi/layouts/BaseLayout.astro
@@ -8,9 +8,10 @@ import "../assets/app.css"
  */
 interface Props {
   title: string
+  description: string
 }
 
-const { title } = Astro.props
+const { title, description } = Astro.props
 ---
 
 <!doctype html>
@@ -22,6 +23,7 @@ const { title } = Astro.props
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
     <title>{title} | Astropi</title>
+    <meta name="description" content={description} />
   </head>
   <body>
     <slot />

diff --git a/packages/astropi/layouts/Layout.astro b/packages/astropi/layouts/Layout.astro
@@ -8,12 +8,13 @@ import Footer from "./Footer.astro"
  */
 interface Props {
   title: string
+  description: string
 }
 
-const { title } = Astro.props
+const { title, description } = Astro.props
 ---
 
-<BaseLayout title={title}>
+<BaseLayout title={title} description={description}>
   <Header />
   <slot />
   <Footer />

diff --git a/packages/astropi/layouts/landing/LandingFeatures.astro b/packages/astropi/layouts/landing/LandingFeatures.astro
@@ -11,41 +11,41 @@ import InfoBanner from "../../components/InfoBanner.astro"
   <div class="landing-features-grid">
     <a href="/">
       <article class="card landing-features-card">
-        <h3>Beautiful and accesible</h3>
+        <h3>Fully-featured documentation</h3>
         <p>
-          With accesible navigation, search bar, internationalization, SEO,
-          easy-to-read typography, code highlighting, dark mode... Astropi let
-          you focus on your content.
+          Focus on your content and let Astropi handle the rest. We provide
+          accessible navigation, easy-to-read typography, integrated search,
+          dark mode, internationalization, and more.
         </p>
       </article>
     </a>
     <a href="/">
       <article class="card landing-features-card">
-        <h3>More with less</h3>
+        <h3>Customizable and scalable</h3>
         <p>
-          With minimal configuration, add a blog or an API playground to your
-          documentation. Our pre-built Archetypes and components can grow with
-          your project.
+          Use our Archetypes to quickly a add new blog section, documentation
+          page, API references... They take care of the boilerplate, while being
+          fully customizable.
         </p>
       </article>
     </a>
     <a href="/">
       <article class="card landing-features-card">
-        <h3>Powered by Astro</h3>
+        <h3>Bring your components</h3>
         <p>
-          Astro is a modern static site generator that help us to build fast and
-          modern websites. Extend Astropi with your favorite Astro components,
-          integrations and libraries.
+          Add life to your content with our set of pre-made components. We also
+          support any components from Astro, React, Vue, Svelte, or any major JS
+          framework.
         </p>
       </article>
     </a>
     <a href="/">
       <article class="card landing-features-card">
-        <h3>Framework-agnostic</h3>
+        <h3>Powered by Astro</h3>
         <p>
-          Thanks to Astro, you can bring your favorite components from React,
-          Vue, Svelte, Solid, and more. And write your content in Markdown,
-          Markdoc, or MDX.
+          Astro is a modern static site generator that help us to build fast and
+          modern websites. Astropi supports all of your favorite Astro
+          integrations and libraries, out of the box.
         </p>
       </article>
     </a>

diff --git a/packages/astropi/pages/[...blog].astro b/packages/astropi/pages/[...blog].astro
@@ -12,7 +12,7 @@ const { entry } = Astro.props
 const { Content } = await entry.render()
 ---
 
-<Layout title="Welcome">
+<Layout title={entry.data.title} description={entry.data.abstract}>
   <main>
     <section>
       <h1>{entry.data.title}</h1>

diff --git a/packages/astropi/pages/[...docs-content].astro b/packages/astropi/pages/[...docs-content].astro
@@ -12,7 +12,7 @@ const { entry } = Astro.props
 const { Content } = await entry.render()
 ---
 
-<Layout title="Welcome">
+<Layout title={entry.data.title} description={entry.data.description}>
   <main>
     <section>
       <h1>{entry.data.title}</h1>

diff --git a/packages/astropi/pages/blog.astro b/packages/astropi/pages/blog.astro
@@ -11,7 +11,10 @@ const archetype = getCurrentArchetype(Astro.url)
 const allBlogEntries = await getCollectionEntries(archetype?.collection)
 ---
 
-<Layout title="Welcome">
+<Layout
+  title={archetype?.name || ""}
+  description={`${archetype?.name} latest entries`}
+>
   <main>
     <section>
       <h1>{archetype?.name}</h1>

diff --git a/packages/astropi/pages/docs-content.astro b/packages/astropi/pages/docs-content.astro
@@ -10,7 +10,7 @@ const archetype = getCurrentArchetype(Astro.url)
 const allDocsEntries = await getCollectionEntries(archetype?.collection)
 ---
 
-<Layout title="Welcome">
+<Layout title={archetype?.name || ""} description={archetype?.name || ""}>
   <main>
     <section>
       <h1>{archetype?.name}</h1>

diff --git a/packages/astropi/pages/docs-openapi.astro b/packages/astropi/pages/docs-openapi.astro
@@ -5,7 +5,7 @@ import Layout from "../layouts/Layout.astro"
  */
 ---
 
-<Layout title="Welcome">
+<Layout title="Welcome" description="This a new Astropi project!">
   <main>
     <aside></aside>
     <section>

diff --git a/packages/astropi/pages/index.astro b/packages/astropi/pages/index.astro
@@ -9,7 +9,7 @@ import LandingFeatures from "../layouts/landing/LandingFeatures.astro"
 const { projectName } = userConfig
 ---
 
-<Layout title="Welcome">
+<Layout title="Welcome" description="This a new Astropi project!">
   <main class="landing-main">
     <LandingHero />
     <LandingFeatures />