Switch to Vercel analytics (#94)

README.md

@@ -2,8 +2,6 @@
 
 This is a searchable catalog of vim commands organized by category. It's built as a PWA that works offline.
 
-I did it as a hobby project to force myself to learn vim and play with some tech. Hopefully in the future it will be more extensive with examples etc.
-
 It is built using React, Next, TypeScript, Tailwind and hosted on Vercel.
 
 ## Getting Started
@@ -20,14 +18,14 @@ npm i
 npm run dev
 ```
 
-And go to [http://localhost:3000/](http://localhost:3000/)
+And go to [http://localhost:3011/](http://localhost:3011/)
 
 ## Preview production mode
 
 ```
 npm run preview
 ```
 
-And go to [http://localhost:4000/](http://localhost:4000/)
+And go to [http://localhost:4011/](http://localhost:4011/)
 
-This will build the production bundle and run the server in production mode. But it will use port 4000 so the service worker doesn't interfer with the dev mode (which runs without a service worker).
+This will build the production bundle and run the server in production mode. But it will use port 4011 so the service worker doesn't interfer with the dev mode (which runs without a service worker).

package.json

@@ -3,14 +3,15 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "preview": "next build && next start -p 4000",
+    "dev": "next dev -p 3011",
+    "preview": "next build && next start -p 4011",
     "build": "next build",
     "start": "next start",
     "lint": "eslint src",
     "analyze": "cross-env ANALYZE=true next build"
   },
   "dependencies": {
+    "@vercel/analytics": "^1.1.3",
     "next": "^11.0.1",
     "next-pwa": "^5.0.3",
     "react": "^17.0.1",

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import type { AppProps } from "next/app";
 import Head from "next/head";
+import { Analytics } from "@vercel/analytics/react";
 import { Menu } from "../components/menu";
 import "../../styles/index.css";
 
@@ -23,10 +24,11 @@ const App: FC<AppProps> = ({ Component, pageProps }) => (
       <header className="p-2 pb-8">
         <h1>vim.how</h1>
       </header>
-      <main className="w-full flex flex-1 flex-col items-center">
+      <main className="flex flex-col items-center flex-1 w-full">
         <Component {...pageProps} />
       </main>
     </div>
+    <Analytics />
   </>
 );