feat(vercel): add analytics (#17)

avivkeller · web-flow · commit a7352ee06852 · 2026-04-02T19:05:18.000Z
diff --git a/components/Layout/index.jsx b/components/Layout/index.jsx
@@ -0,0 +1,45 @@
+import TableOfContents from '@node-core/ui-components/Common/TableOfContents';
+import Article from '@node-core/ui-components/Containers/Article';
+import { Analytics } from '@vercel/analytics/react';
+import { SpeedInsights } from '@vercel/speed-insights/react';
+
+import NavBar from '../Navigation';
+import MetaBar from '../Metabar';
+import SideBar from '../Sidebar';
+
+import Footer from '#theme/Footer';
+
+/**
+ * @typedef {Object} Props
+ * @property {import('@node-core/doc-kit/src/generators/web/ui/types.d.ts').SerializedMetadata} metadata
+ * @property {Array} headings
+ * @property {string} readingTime
+ * @property {import('preact').ComponentChildren} children
+ */
+
+/**
+ * @param {Props} props
+ */
+export default ({ metadata, headings, readingTime, children }) => (
+  <>
+    <Analytics />
+    <SpeedInsights />
+    <NavBar />
+    <Article>
+      <SideBar metadata={metadata} />
+      <div>
+        <div>
+          <TableOfContents headings={headings} summaryTitle="On this page" />
+          <br />
+          <main>{children}</main>
+        </div>
+        <MetaBar
+          metadata={metadata}
+          headings={headings}
+          readingTime={readingTime}
+        />
+      </div>
+    </Article>
+    <Footer />
+  </>
+);
diff --git a/doc-kit.config.mjs b/doc-kit.config.mjs
@@ -13,18 +13,7 @@ export default {
     editURL: 'https://github.com/nodejs/learn/edit/main/pages{path}.md',
     imports: {
       ...web.defaultConfiguration.imports,
-      '#theme/Navigation': join(
-        import.meta.dirname,
-        'components/Navigation/index.jsx'
-      ),
-      '#theme/Sidebar': join(
-        import.meta.dirname,
-        'components/Sidebar/index.jsx'
-      ),
-      '#theme/Metabar': join(
-        import.meta.dirname,
-        'components/Metabar/index.jsx'
-      ),
+      '#theme/Layout': join(import.meta.dirname, 'components/Layout/index.jsx'),
     },
   },
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,9 @@
     "typescript-eslint": "^8.57.2"
   },
   "dependencies": {
-    "@node-core/ui-components": "^1.6.3"
+    "@node-core/ui-components": "^1.6.3",
+    "@vercel/analytics": "^2.0.1",
+    "@vercel/speed-insights": "^2.0.0"
   },
   "engines": {
     "node": "24.x"
