Add seo tags to documentation (#78)

* refactor: update documentation meta tags * feat: update documentation version to v0.11.1 * fix: formatting * feat: add SEO breadcrumb structured data
tuono-labs · Nov 4, 2024 · 48c3934 · 48c3934
1 parent 258b4af
commit 48c3934
Show file tree

Hide file tree

Showing 23 changed files with 269 additions and 191 deletions.
diff --git a/apps/documentation/Cargo.toml b/apps/documentation/Cargo.toml
@@ -8,7 +8,7 @@ name = "tuono"
 path = ".tuono/main.rs"
 
 [dependencies]
-tuono_lib = "0.11.0"
+tuono_lib = "0.11.1"
 glob = "0.3.1"
 time = { version = "0.3", features = ["macros"] }
 serde = { version = "1.0.202", features = ["derive"] }

diff --git a/apps/documentation/package.json b/apps/documentation/package.json
@@ -17,7 +17,7 @@
     "clsx": "^2.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "tuono": "0.11.0"
+    "tuono": "0.11.1"
   },
   "devDependencies": {
     "@types/mdx": "^2.0.13",

diff --git a/apps/documentation/public/og-cover.png b/apps/documentation/public/og-cover.png
diff --git a/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx b/apps/documentation/src/components/breadcrumbs/breadcrumbs.tsx
@@ -1,31 +1,67 @@
 import { Breadcrumbs, Button } from '@mantine/core'
-import { Link } from 'tuono'
+import { Link, Head } from 'tuono'
 
 import { IconChevronRight, IconBolt } from '@tabler/icons-react'
-import type { ReactNode } from 'react'
+
+interface Breadcrumb {
+  href?: string
+  label: string
+}
+interface BreadcrumbsProps {
+  breadcrumbs: Breadcrumb[]
+}
 
 export default function TuonoBreadcrumbs({
-  children,
-}: {
-  children: ReactNode
-}): JSX.Element {
+  breadcrumbs = [],
+}: BreadcrumbsProps): JSX.Element {
   return (
-    <Breadcrumbs
-      separator={<IconChevronRight size="1.1rem" stroke={1.5} />}
-      mb="md"
-      mt="md"
-    >
-      <Button
-        href="/documentation"
-        component={Link}
-        variant="subtle"
-        radius="xl"
-        p={5}
+    <>
+      <Head>
+        <script type="application/ld+json">
+          {`[
+            {
+              "@context": "https://schema.org",
+              "@type": "BreadcrumbList",
+              "itemListElement": [
+                {
+                  '@type': "ListItem",
+                  "position": 1,
+                  "name": "Tuono - Documentation",
+                  "item": "https://tuono.dev/documentation",
+                }${breadcrumbs.length > 0 ? ',' : ''}
+                ${breadcrumbs
+                  .map((br, i) =>
+                    JSON.stringify({
+                      '@type': 'ListItem',
+                      position: i + 2,
+                      name: br.label,
+                      item: br.href ? `https://tuono.dev${br.href}` : undefined,
+                    }),
+                  )
+                  .join(',')}]
+            }
+          ]`}
+        </script>
+      </Head>
+      <Breadcrumbs
+        separator={<IconChevronRight size="1.1rem" stroke={1.5} />}
+        mb="md"
+        mt="md"
       >
-        <IconBolt />
-      </Button>
-      {children}
-    </Breadcrumbs>
+        <Button
+          href="/documentation"
+          component={Link}
+          variant="subtle"
+          radius="xl"
+          p={5}
+        >
+          <IconBolt />
+        </Button>
+        {breadcrumbs.map((br) => (
+          <BreadcrumbElement href={br.href} label={br.label} key={br.label} />
+        ))}
+      </Breadcrumbs>
+    </>
   )
 }
 

diff --git a/apps/documentation/src/components/meta-tags/index.ts b/apps/documentation/src/components/meta-tags/index.ts
@@ -0,0 +1,3 @@
+import MetaTags from './meta-tags'
+
+export default MetaTags
diff --git a/apps/documentation/src/components/meta-tags/meta-tags.tsx b/apps/documentation/src/components/meta-tags/meta-tags.tsx
@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react'
+import { Head } from 'tuono'
+
+interface MetaTagsProps {
+  title: string
+  description?: string
+  type?: 'website' | 'article' | 'book' | 'video.movie' | 'music.song'
+  canonical: string
+}
+
+export default function MetaTags({
+  title,
+  description,
+  type = 'article',
+  canonical,
+}: MetaTagsProps): ReactNode {
+  return (
+    <Head>
+      <title>{title}</title>
+      <link rel="canonical" href={canonical} />
+      <meta
+        name="description"
+        content={
+          description ??
+          'The technologies we love seamlessly working together to unleash the highest web performance ever met on React'
+        }
+      />
+      <meta
+        name="keywords"
+        content="ReactJs, Typescript, Rust, JavaScript, Fullstack framework, Web development"
+      />
+      <meta property="og:title" content={title} />
+      <meta property="og:type" content={type} />
+      <meta property="og:image" content="https://tuono.dev/og-cover.png" />
+      <meta property="og:url" content={canonical} />
+      <meta property="og:description" content={description} />
+      <meta property="og:site_name" content="Tuono" />
+      <meta property="og:locale" content="en_US" />
+    </Head>
+  )
+}
diff --git a/apps/documentation/src/routes/documentation/cli.mdx b/apps/documentation/src/routes/documentation/cli.mdx
@@ -1,15 +1,14 @@
-import { Head } from 'tuono'
+import MetaTags from '../../components/meta-tags'
 
-<Head>
-  <title>Tuono - CLI</title>
-  <link rel="canonical" href="https://tuono.dev/documentation/cli" />
-</Head>
+<MetaTags
+  title="Tuono - CLI"
+  canonical="https://tuono.dev/documentation/cli"
+  description="Tuono is the CLI that provides all the needed commands to handle the full-stack project."
+/>
 
 import Breadcrumbs, { Element } from '../../components/breadcrumbs'
 
-<Breadcrumbs>
-  <Element label="CLI" />
-</Breadcrumbs>
+<Breadcrumbs breadcrumbs={[{ label: 'CLI' }]} />
 
 # CLI
 

diff --git a/apps/documentation/src/routes/documentation/contributing.mdx b/apps/documentation/src/routes/documentation/contributing.mdx
@@ -1,15 +1,14 @@
-import { Head } from 'tuono'
+import MetaTags from '../../components/meta-tags'
 
-<Head>
-  <title>Tuono - Contributing</title>
-  <link rel="canonical" href="https://tuono.dev/documentation/contributing" />
-</Head>
+<MetaTags
+  title="Tuono - Contributing"
+  canonical="https://tuono.dev/documentation/contributing"
+  description="The project is massive - if you like it, do consider contributing!"
+/>
 
 import Breadcrumbs, { Element } from '../../components/breadcrumbs'
 
-<Breadcrumbs>
-  <Element label="✨ Contributing" />
-</Breadcrumbs>
+<Breadcrumbs breadcrumbs={[{ label: '✨ Contributing' }]} />
 
 # Contributing
 

diff --git a/apps/documentation/src/routes/documentation/index.mdx b/apps/documentation/src/routes/documentation/index.mdx
@@ -1,9 +1,10 @@
-import { Head } from 'tuono'
+import MetaTags from '../../components/meta-tags'
 
-<Head>
-  <title>Tuono - Documentation</title>
-  <link rel="canonical" href="https://tuono.dev/documentation" />
-</Head>
+<MetaTags
+  title="Tuono - Documentation"
+  canonical="https://tuono.dev/documentation"
+  description="Tuono is a full-stack framework for building React applications using Rust as the backend."
+/>
 
 import Breadcrumbs from '../../components/breadcrumbs'
 

diff --git a/apps/documentation/src/routes/documentation/installation.mdx b/apps/documentation/src/routes/documentation/installation.mdx
@@ -1,14 +1,14 @@
-import { Head } from 'tuono'
 import Breadcrumbs, { Element } from '../../components/breadcrumbs'
 
-<Head>
-  <title>Tuono - Installation</title>
-  <link rel="canonical" href="https://tuono.dev/documentation/installation" />
-</Head>
+import MetaTags from '../../components/meta-tags'
 
-<Breadcrumbs>
-  <Element label="Installation" />
-</Breadcrumbs>
+<MetaTags
+  title="Tuono - Installation"
+  canonical="https://tuono.dev/documentation/installation"
+  description="Tuono is a development environment built in rust and typescript that outputs a website written in both the languages"
+/>
+
+<Breadcrumbs breadcrumbs={[{ label: 'Installation' }]} />
 
 # Installation
 

diff --git a/apps/documentation/src/routes/documentation/routing/index.mdx b/apps/documentation/src/routes/documentation/routing/index.mdx
@@ -1,15 +1,13 @@
-import { Head } from 'tuono'
+import MetaTags from '../../../components/meta-tags'
 
-<Head>
-  <title>Tuono - Routing</title>
-  <link rel="canonical" href="https://tuono.dev/documentation/routing" />
-</Head>
+<MetaTags
+  title="Tuono - Routing"
+  canonical="https://tuono.dev/documentation/routing/intro"
+/>
 
 import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
 
-<Breadcrumbs>
-  <Element label="Routing" />
-</Breadcrumbs>
+<Breadcrumbs breadcrumbs={[{ label: 'Routing' }]} />
 
 # Routing index
 

diff --git a/apps/documentation/src/routes/documentation/routing/intro.mdx b/apps/documentation/src/routes/documentation/routing/intro.mdx
@@ -1,16 +1,18 @@
-import { Head } from 'tuono'
+import MetaTags from '../../../components/meta-tags'
 
-<Head>
-  <title>Tuono - Routing</title>
-  <link rel="canonical" href="https://tuono.dev/documentation/routing/intro" />
-</Head>
+<MetaTags
+  title="Tuono - Routing"
+  canonical="https://tuono.dev/documentation/routing"
+/>
 
 import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
 
-<Breadcrumbs>
-  <Element label="Routing" href="/documentation/routing" />
-  <Element label="Project structure" />
-</Breadcrumbs>
+<Breadcrumbs
+  breadcrumbs={[
+    { label: 'Routing', href: '/documentation/routing' },
+    { label: 'Project structure' },
+  ]}
+/>
 
 # Project structure
 

diff --git a/apps/documentation/src/routes/documentation/tutorial/api-fetching.mdx b/apps/documentation/src/routes/documentation/tutorial/api-fetching.mdx
@@ -1,19 +1,19 @@
-import { Head } from 'tuono'
+import MetaTags from '../../../components/meta-tags'
 
-<Head>
-  <title>Tutorial - API fetching</title>
-  <link
-    rel="canonical"
-    href="https://tuono.dev/documentation/tutorial/api-fetching"
-  />
-</Head>
+<MetaTags
+  title="Tuono - API fetching"
+  canonical="https://tuono.dev/documentation/tutorial/api-fetching"
+  description="Learn how to fetch remote APIs on the backend"
+/>
 
 import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
 
-<Breadcrumbs>
-  <Element label="Tutorial" href="/documentation/tutorial" />
-  <Element label="API fetching" />
-</Breadcrumbs>
+<Breadcrumbs
+  breadcrumbs={[
+    { label: 'Tutorial', href: '/documentation/tutorial' },
+    { label: 'API fetching' },
+  ]}
+/>
 
 # API fetching
 

diff --git a/apps/documentation/src/routes/documentation/tutorial/components.mdx b/apps/documentation/src/routes/documentation/tutorial/components.mdx
@@ -1,19 +1,19 @@
-import { Head } from 'tuono'
+import MetaTags from '../../../components/meta-tags'
 
-<Head>
-  <title>Tutorial - Components</title>
-  <link
-    rel="canonical"
-    href="https://tuono.dev/documentation/tutorial/components"
-  />
-</Head>
+<MetaTags
+  title="Tuono - Components"
+  canonical="https://tuono.dev/documentation/tutorial/components"
+  description="Learn how to manage the components in a Tuono codebase"
+/>
 
 import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
 
-<Breadcrumbs>
-  <Element label="Tutorial" href="/documentation/tutorial" />
-  <Element label="Components" />
-</Breadcrumbs>
+<Breadcrumbs
+  breadcrumbs={[
+    { label: 'Tutorial', href: '/documentation/tutorial' },
+    { label: 'Components' },
+  ]}
+/>
 
 # Components
 

diff --git a/apps/documentation/src/routes/documentation/tutorial/conclusion.mdx b/apps/documentation/src/routes/documentation/tutorial/conclusion.mdx
@@ -1,19 +1,19 @@
-import { Head } from 'tuono'
+import MetaTags from '../../../components/meta-tags'
 
-<Head>
-  <title>Tutorial - Conclusion</title>
-  <link
-    rel="canonical"
-    href="https://tuono.dev/documentation/tutorial/conclusion"
-  />
-</Head>
+<MetaTags
+  title="Tuono - Conclusion"
+  canonical="https://tuono.dev/documentation/tutorial/conclusion"
+  description="You just created a multi thread full stack application with Rust and React"
+/>
 
 import Breadcrumbs, { Element } from '../../../components/breadcrumbs'
 
-<Breadcrumbs>
-  <Element label="Tutorial" href="/documentation/tutorial" />
-  <Element label="Conclusion" />
-</Breadcrumbs>
+<Breadcrumbs
+  breadcrumbs={[
+    { label: 'Tutorial', href: '/documentation/tutorial' },
+    { label: 'Conclusion' },
+  ]}
+/>
 
 # Conclusion
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import MetaTags from './meta-tags'

		export default MetaTags