feat: route support for Astro, Nuxt, Remix, Sveltekit and Vue (#151)

vercel · Nov 7, 2024 · 55bd2ff · 55bd2ff
1 parent 524af71
commit 55bd2ff
Show file tree

Hide file tree

Showing 97 changed files with 16,594 additions and 19,439 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,10 @@
 .next/
 dist/
+.astro/
+.vercel/
+.nuxt/
+.output/
+.cache/
+build/
+.svelte-kit/
+pnpm-lock.yaml
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/.gitignore b/apps/nuxt/.gitignore
@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
diff --git a/apps/nuxt/README.md b/apps/nuxt/README.md
@@ -0,0 +1,29 @@
+# Nuxt 3 Demo application for Vercel Speed-insights
+
+## Setup
+
+This application was created with the following commands:
+
+- `cd apps`
+- `pnpx nuxi@latest init nuxt` (answers: npm, no git)
+- `cd nuxt`
+- `rm -rf node_modules .nuxt`
+- 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.
+We also imported and used `<WebAnalytics />` component in `layouts/default.vue` file:
+
+```vue
+<script setup>
+import { WebAnalytics } from '@vercel/analytics/vue';
+</script>
+
+<template>
+  <WebAnalytics />
+</template>
+```
+
+## Usage
+
+Start it with `pnpm -F nuxt dev` and browse to [http://localhost:3000](http://localhost:3000)
diff --git a/apps/nuxt/app.vue b/apps/nuxt/app.vue
@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>