Feat/docs seo (#2)

* docs: add seo

* docs: add seo

Author: karol-broda

docs/README.md

@@ -1,45 +1,3 @@
-# docs
+# funnel Documentation
 
-This is a Next.js application generated with
-[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
-
-Run development server:
-
-```bash
-npm run dev
-# or
-pnpm dev
-# or
-yarn dev
-```
-
-Open http://localhost:3000 with your browser to see the result.
-
-## Explore
-
-In the project, you can see:
-
-- `lib/source.ts`: Code for content source adapter, [`loader()`](https://fumadocs.dev/docs/headless/source-api) provides the interface to access your content.
-- `app/layout.config.tsx`: Shared options for layouts, optional but preferred to keep.
-
-| Route                     | Description                                            |
-| ------------------------- | ------------------------------------------------------ |
-| `app/(home)`              | The route group for your landing page and other pages. |
-| `app/docs`                | The documentation layout and pages.                    |
-| `app/api/search/route.ts` | The Route Handler for search.                          |
-
-### Fumadocs MDX
-
-A `source.config.ts` config file has been included, you can customise different options like frontmatter schema.
-
-Read the [Introduction](https://fumadocs.dev/docs/mdx) for further details.
-
-## Learn More
-
-To learn more about Next.js and Fumadocs, take a look at the following
-resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
-  features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-- [Fumadocs](https://fumadocs.vercel.app) - learn about Fumadocs
+this is the documentation site for funnel, built with Next.js and fumadocs

docs/next.config.mjs

@@ -1,12 +1,65 @@
-import { createMDX } from 'fumadocs-mdx/next';
-import { transformerTwoslash } from 'fumadocs-twoslash';
+import { createMDX } from "fumadocs-mdx/next";
 
 const withMDX = createMDX();
 
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
-  serverExternalPackages: ['typescript', 'twoslash'],
+  serverExternalPackages: ["typescript", "twoslash"],
+  compress: true,
+  poweredByHeader: false,
+  generateEtags: true,
+
+  trailingSlash: false,
+
+  images: {
+    formats: ["image/avif", "image/webp"],
+    minimumCacheTTL: 31536000,
+  },
+
+  headers: async () => {
+    return [
+      {
+        source: "/(.*)",
+        headers: [
+          {
+            key: "X-Content-Type-Options",
+            value: "nosniff",
+          },
+          {
+            key: "X-Frame-Options",
+            value: "DENY",
+          },
+          {
+            key: "X-XSS-Protection",
+            value: "1; mode=block",
+          },
+          {
+            key: "Referrer-Policy",
+            value: "strict-origin-when-cross-origin",
+          },
+        ],
+      },
+      {
+        source: "/sitemap.xml",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=86400, s-maxage=86400",
+          },
+        ],
+      },
+      {
+        source: "/robots.txt",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "public, max-age=86400, s-maxage=86400",
+          },
+        ],
+      },
+    ];
+  },
 };
 
 export default withMDX(config);

docs/package.json

@@ -6,7 +6,9 @@
     "build": "next build",
     "dev": "next dev --turbo",
     "start": "next start",
-    "postinstall": "fumadocs-mdx"
+    "postinstall": "fumadocs-mdx",
+    "types": "tsc --noEmit",
+    "lint": "next lint"
   },
   "dependencies": {
     "@catppuccin/palette": "1.7.1",

docs/public/favicon.svg

@@ -0,0 +1,8 @@
+User-agent: *
+Allow: /
+
+# Sitemap
+Sitemap: https://funnel.karolbroda.com/sitemap.xml
+
+# Crawl delay
+Crawl-delay: 1 

docs/public/robots.txt

@@ -0,0 +1,31 @@
+{
+  "name": "funnel docs",
+  "short_name": "funnel",
+  "description": "A tunneling solution built with Go. Expose local services to the internet through websocket connections.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/favicon.ico",
+      "sizes": "32x32",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+} 

docs/public/site.webmanifest

@@ -12,6 +12,14 @@ import Link from "next/link";
 import Mermaid from "@/components/mdx/mermaid";
 import Aurora from "@/components/ui/aurora";
 import InstallScript from "@/components/home/install-script";
+import { createMetadata } from "@/lib/seo";
+
+export const metadata = createMetadata(
+  "funnel",
+  "expose local services to the internet through websocket connections. perfect for development, testing, and demonstration purposes.",
+  undefined,
+  "/"
+);
 
 const architecture = `
 graph LR
@@ -155,7 +163,7 @@ export default function HomePage() {
             />
             <FeatureCard
               icon={<LightningIcon className="h-6 w-6" weight="bold" />}
-              title="never gives up"
+              title="never gives you up, never lets you down"
               description={
                 "connection dropped? funnel reconnects like that ex who won't take a hint. but useful."
               }

docs/src/app/(home)/page.tsx

@@ -1,13 +1,20 @@
-import { source } from '@/lib/source';
+import { source } from "@/lib/source";
 import {
   DocsPage,
   DocsBody,
   DocsDescription,
   DocsTitle,
-} from 'fumadocs-ui/page';
-import { notFound } from 'next/navigation';
-import { createRelativeLink } from 'fumadocs-ui/mdx';
-import { getMDXComponents } from '@/mdx-components';
+} from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import { createMetadata, generateStructuredData, siteConfig } from "@/lib/seo";
+import {
+  getLastModifiedFromUrl,
+  getCreatedFromUrl,
+  getAuthorFromUrl,
+} from "@/lib/git";
+import { Metadata } from "next";
+import LastModified from "@/components/mdx/last-modified";
+import { getMDXComponents } from "@/mdx-components";
 
 export default async function Page(props: {
   params: Promise<{ slug?: string[] }>;
@@ -16,19 +23,34 @@ export default async function Page(props: {
   const page = source.getPage(params.slug);
   if (!page) notFound();
 
-  const MDXContent = page.data.body;
+  const MDX = page.data.body;
+
+  const lastModified = await getLastModifiedFromUrl(page.url);
+  const datePublished = await getCreatedFromUrl(page.url);
+  const author = await getAuthorFromUrl(page.url);
+
+  const structuredData = generateStructuredData("article", {
+    title: page.data.title,
+    description: page.data.description || siteConfig.description,
+    url: `${siteConfig.url}${page.url}`,
+    datePublished,
+    dateModified: lastModified,
+    author,
+  });
 
   return (
-    <DocsPage toc={page.data.toc} full={page.data.full} tableOfContent={{style: "clerk"}} tableOfContentPopover={{style: "clerk"}}>
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(structuredData),
+        }}
+      />
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>
-        <MDXContent
-          components={getMDXComponents({
-            // this allows you to link to other pages with relative file paths
-            a: createRelativeLink(source, page),
-          })}
-        />
+        <MDX components={getMDXComponents()} />
+        <LastModified date={lastModified} author={author} />
       </DocsBody>
     </DocsPage>
   );
@@ -40,13 +62,15 @@ export async function generateStaticParams() {
 
 export async function generateMetadata(props: {
   params: Promise<{ slug?: string[] }>;
-}) {
+}): Promise<Metadata> {
   const params = await props.params;
   const page = source.getPage(params.slug);
   if (!page) notFound();
 
-  return {
-    title: page.data.title,
-    description: page.data.description,
-  };
+  return createMetadata(
+    page.data.title,
+    page.data.description,
+    undefined,
+    page.url
+  );
 }

docs/src/app/docs/[[...slug]]/page.tsx

@@ -3,22 +3,43 @@ import "./global.css";
 import { RootProvider } from "fumadocs-ui/provider";
 import { Inter } from "next/font/google";
 import type { ReactNode } from "react";
-import { type Metadata } from "next";
+import { createMetadata, generateStructuredData, siteConfig } from "@/lib/seo";
 
 const inter = Inter({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = {
-  title: {
-    default: "funnel docs",
-    template: "%s | funnel",
-  },
-};
+export const metadata = createMetadata(
+  siteConfig.name,
+  siteConfig.description,
+  siteConfig.ogImage,
+  "/"
+);
 
 export default function Layout({ children }: { children: ReactNode }) {
+  const structuredData = generateStructuredData("website", {
+    title: siteConfig.name,
+    description: siteConfig.description,
+    url: siteConfig.url,
+    image: siteConfig.ogImage,
+  });
+
   return (
     <html lang="en" className={inter.className} suppressHydrationWarning>
+      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(structuredData),
+          }}
+        />
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+        {/* <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> */}
+        <link rel="manifest" href="/site.webmanifest" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="color-scheme" content="dark light" />
+      </head>
       <body>
         <RootProvider>{children}</RootProvider>
       </body>