docs: simple docs footer (#3240)

docs/app/_components/SiteFooter.tsx

@@ -0,0 +1,11 @@
+import { siteConfig } from '@/lib/config';
+import { Logo } from './Logo';
+
+export const SiteFooter = () => (
+  <footer className="border-secondary-200 prose mt-28 flex flex-col items-center justify-between gap-8 border-t py-4 md:flex-row">
+    <div className="flex items-center gap-[0.5ch] text-xs">
+      Build with 🥵, 🧡 and <Logo className="h-3 w-3" />
+    </div>
+    <div className="text-xs">v{siteConfig.version}</div>
+  </footer>
+);

docs/app/layout.tsx

@@ -10,6 +10,7 @@ import { fontSans } from '@/theme/fonts';
 import { Analytics } from './_components/Analytics';
 import { Navigation } from './_components/Navigation';
 import { SiteHeader } from './_components/SiteHeader';
+import { SiteFooter } from './_components/SiteFooter';
 
 // Metadata
 // ---------------
@@ -45,8 +46,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
                   <Navigation />
                 </aside>
                 <div className="md:pl-60 lg:pl-72">
-                  <main className="max-w-3xl">{children}</main>
-                  <footer>Marigold Footer</footer>
+                  <main>{children}</main>
+                  <SiteFooter />
                 </div>
               </div>
             </div>

docs/lib/config.ts

@@ -1,4 +1,5 @@
 export const siteConfig = {
+  version: process.env.version,
   navigation: [
     {
       name: 'Introduction',

docs/next.config.js

@@ -1,4 +1,5 @@
 const { withContentlayer } = require('next-contentlayer');
+const pkg = require('./package.json');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -16,6 +17,9 @@ const nextConfig = {
     '@marigold/system',
     '@marigold/theme-preset',
   ],
+  env: {
+    version: pkg.version,
+  },
   async redirects() {
     return [
       {