feat: adds route support for remix and astro, fixes others

vercel · Nov 6, 2024 · 9fac0aa · 9fac0aa
1 parent bb04523
commit 9fac0aa
Show file tree

Hide file tree

Showing 55 changed files with 4,561 additions and 4,929 deletions.
diff --git a/apps/astro/.gitignore b/apps/astro/.gitignore
@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
diff --git a/apps/astro/README.md b/apps/astro/README.md
@@ -0,0 +1,37 @@
+# Astro Demo application for Vercel Speed-insights
+
+## Setup
+
+This application was created with the following commands:
+
+- `cd apps`
+- `pnpm create astro@latest astro` (answers: empty, no to all)
+- `cd astro`
+- manually edit package.json to add `"@vercel/analytics": "workspace:*"` dependency
+- `pnpm i`
+
+Then we've added:
+
+1. a simple collection of Markdown blog posts in `src/contents/blog` folder
+2. a blog post page in `src/pages/blog/[...slug].astro`
+3. an index page in `src/pages/index.astro` which list all available blog posts
+4. a layout in `src/components/Base.astro`, used in both page, which includes our Analytics.astro component:
+
+```astro
+---
+import Analytics from '@vercel/analytics/astro';
+---
+<html lang="en">
+	<head>
+    <!-- ...-->
+    <Analytics />
+	</head>
+	<body>
+		<slot />
+  </body>
+</html>
+```
+
+## Usage
+
+Start it with `pnpm -F nuxt dev` and browse to [http://localhost:4321](http://localhost:4321)
diff --git a/apps/astro/astro.config.mjs b/apps/astro/astro.config.mjs
@@ -0,0 +1,4 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({});
diff --git a/apps/astro/package.json b/apps/astro/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "astro",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "astro": "astro",
+    "build": "astro build",
+    "dev": "astro dev",
+    "preview": "astro preview",
+    "start": "astro dev"
+  },
+  "dependencies": {
+    "@vercel/analytics": "workspace:*",
+    "astro": "latest"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.5.4",
+    "@vercel/analytics": "workspace:*",
+    "typescript": "^5.3.3"
+  }
+}
diff --git a/apps/astro/public/favicon.svg b/apps/astro/public/favicon.svg
diff --git a/apps/astro/src/components/BaseHead.astro b/apps/astro/src/components/BaseHead.astro
@@ -0,0 +1,4 @@
+---
+import Analytics from '@vercel/analytics/astro';
+---
+<Analytics />
diff --git a/apps/astro/src/content/blog/bruno.md b/apps/astro/src/content/blog/bruno.md
@@ -0,0 +1,6 @@
+---
+title: About Bruno
+slug: bruno
+---
+
+We don't talk about Bruno
diff --git a/apps/astro/src/content/blog/henry.md b/apps/astro/src/content/blog/henry.md
@@ -0,0 +1,6 @@
+---
+title: About Henry
+slug: henry
+---
+
+Henry is a gentleman
diff --git a/apps/astro/src/env.d.ts b/apps/astro/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />
diff --git a/apps/astro/src/layouts/Base.astro b/apps/astro/src/layouts/Base.astro
@@ -0,0 +1,18 @@
+---
+import Analytics from '@vercel/analytics/astro';
+
+const { title } = Astro.props;
+---
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+    <Analytics />
+	</head>
+	<body>
+		<slot />
+  </body>
+</html>
diff --git a/apps/astro/src/pages/blog/[...slug].astro b/apps/astro/src/pages/blog/[...slug].astro
@@ -0,0 +1,18 @@
+---
+import { getCollection } from 'astro:content';
+import Layout from '../../layouts/Base.astro';
+
+export async function getStaticPaths() {
+  const blogEntries = await getCollection('blog');
+  return blogEntries.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+<Layout title={entry.data.title}>
+	<Content />
+	<p><a href="/">back</a></p>
+</Layout>
diff --git a/apps/astro/src/pages/index.astro b/apps/astro/src/pages/index.astro
@@ -0,0 +1,16 @@
+---
+import { getCollection } from 'astro:content';
+import Layout from '../layouts/Base.astro';
+
+const blogEntries = await getCollection('blog');
+---
+<Layout title="Astro">
+	<h1>Welcome to Astro</h1>
+	<ul>
+		{blogEntries.map(blogPostEntry => (
+			<li>
+				<a href={`/blog/${blogPostEntry.slug}`}>{blogPostEntry.data.title}</a>
+			</li>
+		))}
+	</ul>
+</Layout>
diff --git a/apps/astro/tsconfig.json b/apps/astro/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "strictNullChecks": true
+  }
+}
diff --git a/apps/nextjs-15/src/app/blog/[slug]/page.tsx b/apps/nextjs-15/src/app/blog/[slug]/page.tsx
@@ -0,0 +1,16 @@
+import Link from 'next/link';
+
+export default async function BlogPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  return (
+    <div>
+      <h2>{slug}</h2>
+
+      <Link href="/blog">Back to blog</Link>
+    </div>
+  );
+}
diff --git a/apps/nextjs-15/src/app/blog/layout.tsx b/apps/nextjs-15/src/app/blog/layout.tsx
@@ -0,0 +1,12 @@
+import Link from 'next/link';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <Link href="/blog/my-first-blogpost">My first blog post</Link>&nbsp;
+      <Link href="/blog/new-feature-release">Feature just got released</Link>
+      <br />
+      <div>{children}</div>
+    </div>
+  );
+}
diff --git a/apps/nextjs-15/src/app/blog/page.tsx b/apps/nextjs-15/src/app/blog/page.tsx
@@ -0,0 +1,3 @@
+export default function Blog() {
+  return <div>Welcome to the blog</div>;
+}
diff --git a/apps/nextjs/app/blog/layout.tsx b/apps/nextjs/app/blog/layout.tsx
@@ -3,8 +3,9 @@ import Link from 'next/link';
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
-      <Link href="/blog/my-first-blogpost">My first blog post</Link>
+      <Link href="/blog/my-first-blogpost">My first blog post</Link>&nbsp;{' '}
       <Link href="/blog/new-feature-release">Feature just got released</Link>
+      <br />
       <div>{children}</div>
     </div>
   );

diff --git a/apps/nextjs/app/blog/page.tsx b/apps/nextjs/app/blog/page.tsx
@@ -1,3 +1,3 @@
 export default function Blog() {
-  return <div>Welcome on the blog</div>;
+  return <div>Welcome to the app-router blog</div>;
 }
diff --git a/apps/nextjs/pages/blog-pages/[slug].tsx b/apps/nextjs/pages/blog-pages/[slug].tsx
@@ -0,0 +1,7 @@
+export default function BlogPage() {
+  return (
+    <div>
+      <h1>Blog Page</h1>
+    </div>
+  );
+}
diff --git a/apps/nextjs/pages/index.tsx b/apps/nextjs/pages/index.tsx
@@ -1,3 +1,20 @@
+import Link from 'next/link';
+
 export default function Page() {
-  return null;
+  return (
+    <>
+      <div>Testing web analytics</div>
+      <ul>
+        <li>
+          <Link href="/blog-pages/page-a">Pages directory A</Link>
+        </li>
+        <li>
+          <Link href="/blog-pages/page-b">Pages directory B</Link>
+        </li>
+        <li>
+          <Link href="/blog">App directory</Link>
+        </li>
+      </ul>
+    </>
+  );
 }
diff --git a/apps/nuxt/README.md b/apps/nuxt/README.md
@@ -8,7 +8,7 @@ This application was created with the following commands:
 - `pnpx nuxi@latest init nuxt` (answers: npm, no git)
 - `cd nuxt`
 - `rm -rf node_modules .nuxt`
-- manually edit package.json to add `"@vercel/speed-insights": "workspace:*"` dependency
+- manually edit package.json to add `"@vercel/analytics": "workspace:*"` dependency
 - `pnpm i`
 
 Then we moved some code from vue's official template (styles, HelloWorld SFC) and added a few dynamic route to illustrate the use.

diff --git a/apps/nuxt/layouts/default.vue b/apps/nuxt/layouts/default.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { WebAnalytics } from '@vercel/analytics/nuxt';
+import { Analytics } from '@vercel/analytics/nuxt';
 import { track } from '@vercel/analytics';
 
 function navigate(event) {
@@ -8,7 +8,7 @@ function navigate(event) {
 </script>
 
 <template>
-  <WebAnalytics />
+  <Analytics />
   <header>
     <img
       alt="Vue logo"

diff --git a/apps/remix/.eslintrc.cjs b/apps/remix/.eslintrc.cjs
@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node'],
+};
diff --git a/apps/remix/.gitignore b/apps/remix/.gitignore
@@ -3,4 +3,4 @@ node_modules
 /build
 /public/build
 .env
-
+.cache
diff --git a/apps/remix/app/root.tsx b/apps/remix/app/root.tsx
@@ -1,17 +1,25 @@
+import { cssBundleHref } from '@remix-run/css-bundle';
+import type { LinksFunction } from '@remix-run/node';
 import {
   Links,
   LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-} from "@remix-run/react";
-import { Analytics } from "@vercel/analytics/react";
+} from '@remix-run/react';
+import { Analytics } from '@vercel/analytics/remix';
+
+export const links: LinksFunction = () => [
+  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
+];
 
 export default function App() {
   return (
     <html lang="en">
       <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <Meta />
         <Links />
       </head>

diff --git a/apps/remix/app/routes/_index.tsx b/apps/remix/app/routes/_index.tsx
@@ -1,9 +1,9 @@
-import { json } from "@vercel/remix";
-import { Form, useActionData } from "@remix-run/react";
-import { track } from "@vercel/analytics/server";
+import { json } from '@vercel/remix';
+import { Form, Link, useActionData } from '@remix-run/react';
+import { track } from '@vercel/analytics/server';
 
 export const action = async () => {
-  await track("Server Action", { some: "data" });
+  await track('Server Action', { some: 'data' });
   return json({ success: true });
 };
 
@@ -19,6 +19,9 @@ export default function Home() {
           <button type="submit">Submit action</button>
         </Form>
       )}
+      <Link to="/blog/henri">About Henri</Link>
+      <br />
+      <Link to="/blog/bruno">About Bruno</Link>
     </main>
   );
 }
diff --git a/apps/remix/app/routes/blog.$slug.tsx b/apps/remix/app/routes/blog.$slug.tsx
@@ -0,0 +1,19 @@
+import { json, type LoaderFunctionArgs } from '@remix-run/node';
+import { Link, useLoaderData } from '@remix-run/react';
+import { track } from '@vercel/analytics';
+
+export const loader = async ({ params }: LoaderFunctionArgs) => {
+  return json({ slug: params.slug });
+};
+
+export default function BlogPage() {
+  const { slug } = useLoaderData<typeof loader>();
+  return (
+    <div>
+      <h1>Blog</h1>
+      <p>We don't talk about {slug}</p>
+      <br />
+      <Link to="/">Back</Link>
+    </div>
+  );
+}