Pro 139/video (#81)

* Add next/video

* Add more media to carousel

* Add new videos

* Add new videos

* Move description banner to top

* Delete old images

* Fix web build

* Add accent color to video player

* Imprve Video carousel swiping

* Make mobile icons larger

* Fix some styles

apps/web/.gitignore

@@ -0,0 +1,8 @@
+.vercel
+
+# next-video
+videos/*
+!videos/*.json
+!videos/*.js
+!videos/*.ts
+public/_next-video

apps/web/client.webpack.lock

@@ -0,0 +1,5 @@
+{
+  "https://jdwfuoipoelmobuh.public.blob.vercel-storage.com/rule-create-high-fps-xr0vXRV66mOUts5LGbSuiPGLgI1hXb.mp4": { "integrity": "sha512-jzJ13DqwevQJ+FxUJQs/A3fNzJwsKu4p9t2dxrRmSYmg7CZb/qbawvpugPx/zLJDkzzz38Cb2uaGAm41ouixjg==", "contentType": "video/mp4" },
+  "https://jdwfuoipoelmobuh.public.blob.vercel-storage.com/rule-review-voO0xrHQCQNMLosKi0dYiOW1GtX3ii.mp4": { "integrity": "sha512-J3efAE00munIW+Sqiy84IVw0Q+4FGz9LEy96dWXHoMz8COD9cj8fGNxWiIjxe2x8arIuRsOnc7+0nFRasQvoWw==", "contentType": "video/mp4" },
+  "version": 1
+}

apps/web/components/blog/list.tsx

@@ -20,7 +20,7 @@ export function BlogList() {
         ).map((page) => {
           if (!page.frontMatter) return null;
 
-          const date = new Date(page.frontMatter.date);
+          const date = new Date(page.frontMatter.date as string);
           const timeEl = (
             <time
               className="mt-2 text-gray-500 text-md"

apps/web/components/home/card.tsx

@@ -16,7 +16,7 @@ export function Card({
 
   return (
     <div className="relative z-10 px-10 py-8 bg-white rounded-lg shadow-lg bg-opacity-70">
-      <Icon className="h-6 mb-3 md:h-10 text-zinc-800" />
+      <Icon className="h-8 mb-3 md:h-10 text-zinc-800" />
       <h3 className="mb-3 text-2xl sm:text-3xl font-garamond">{title}</h3>
       <p className="text-md sm:text-lg text-zinc-600">{description}</p>
     </div>

apps/web/components/home/carousel.tsx

@@ -1,10 +1,39 @@
-"use client";
-
+import Video from "next-video";
 import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
 import useEmblaCarousel from "embla-carousel-react";
-import Example1 from "public/example-1.png";
-import Example2 from "public/example-2.png";
+import CIExample from "public/ci-example.png";
+import Video1 from "videos/custom-rules.mp4";
+import Video2 from "videos/review-fix.mp4";
+import colors from "tailwindcss/colors";
+
+const media = [
+  {
+    key: "1",
+    element: (
+      <Video accentColor={colors.amber[500]} className="flex" src={Video1} />
+    ),
+    description: "✍️ Write your own custom rules. In plain English.",
+  },
+  {
+    key: "2",
+    element: (
+      <Video accentColor={colors.amber[500]} className="flex" src={Video2} />
+    ),
+    description: "🔧 Review and apply fixes automatically.",
+  },
+  {
+    key: "3",
+    element: (
+      <Image
+        alt="CI example"
+        className="object-cover w-full h-full"
+        src={CIExample}
+      />
+    ),
+    description: "🔄 Run reviews in CI and apply suggestions.",
+  },
+];
 
 export function Carousel() {
   const [emblaRef, emblaApi] = useEmblaCarousel();
@@ -38,40 +67,35 @@ export function Carousel() {
   return (
     <div className="-mx-6 md:mx-0">
       <div className="overflow-hidden" ref={emblaRef}>
-        <div className="flex">
-          <div className="relative flex-[0_0_100%]">
-            <div className="absolute px-3 py-2 text-white transform -translate-x-1/2 rounded left-1/2 bottom-20 bg-zinc-900/50 backdrop-filter backdrop-blur-lg">
-              ✅ Customize rules with AI-powered linting.
-            </div>
-            <Image alt="Demo example 1" src={Example1} />
-          </div>
-          <div className="relative flex-[0_0_100%]">
-            <div className="absolute px-3 py-2 text-white transform -translate-x-1/2 rounded left-1/2 bottom-20 bg-zinc-900/50 backdrop-filter backdrop-blur-lg">
-              🚀 Automatically create and update content.
+        <div className="flex gap-4">
+          {media.map((item) => (
+            <div
+              className="relative h-full flex-[0_0_100%] py-8 sm:px-8"
+              key={item.key}
+            >
+              <div className="relative overflow-hidden shadow-lg sm:rounded-xl">
+                <div className="absolute top-0 z-10 w-full px-3 py-2 text-sm text-center text-white sm:text-md h-fit bg-zinc-900/50 backdrop-filter backdrop-blur-lg">
+                  {item.description}
+                </div>
+                {item.element}
+              </div>
             </div>
-            <Image alt="Demo example 1" src={Example2} />
-          </div>
+          ))}
         </div>
       </div>
       <div className="flex justify-center gap-2">
-        <button
-          className={`w-3.5 h-3.5 border-2 rounded-full border-zinc-900 ${
-            selectedIndex === 0 ? "!bg-zinc-900" : ""
-          }`}
-          onClick={() => {
-            scrollTo(0);
-          }}
-          type="button"
-        />
-        <button
-          className={`w-3.5 h-3.5 border-2 rounded-full border-zinc-900 ${
-            selectedIndex === 1 ? "!bg-zinc-900" : ""
-          }`}
-          onClick={() => {
-            scrollTo(1);
-          }}
-          type="button"
-        />
+        {media.map((item, index) => (
+          <button
+            className={`w-3.5 h-3.5 border-2 rounded-full border-zinc-900 ${
+              selectedIndex === index ? "!bg-zinc-900" : ""
+            }`}
+            key={item.key}
+            onClick={() => {
+              scrollTo(index);
+            }}
+            type="button"
+          />
+        ))}
       </div>
     </div>
   );

apps/web/components/home/index.tsx

@@ -48,7 +48,7 @@ export default function Home(): JSX.Element {
           </div>
         </section>
         <section className="my-20 sm:my-40">
-          <div className="m-auto sm:w-4/5">
+          <div className="m-auto sm:w-5/6">
             <Carousel />
           </div>
         </section>

apps/web/next.config.js

@@ -1,9 +1,15 @@
+const { withNextVideo } = require("next-video/process");
+
 const withNextra = require("nextra")({
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.jsx",
 });
 
-module.exports = withNextra({
+const withNextraConfig = withNextra({
   reactStrictMode: false,
   transpilePackages: ["@floe/ui"],
 });
+
+module.exports = withNextVideo(withNextraConfig, {
+  provider: "vercel-blob",
+});

apps/web/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "main": "index.js",
   "scripts": {
-    "dev": "next -p 3000",
+    "dev": "next -p 3000 & npx next-video sync -w",
     "build": "next build",
     "start": "next start"
   },
@@ -17,9 +17,11 @@
     "@headlessui/react": "^1.7.16",
     "@heroicons/react": "^2.0.18",
     "@vercel/analytics": "^1.1.1",
+    "@vercel/blob": "^0.19.0",
     "classnames": "^2.3.2",
     "embla-carousel-react": "8.0.0-rc14",
     "next": "^14.0.2",
+    "next-video": "^0.11.2",
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
     "react": "^18.2.0",
@@ -37,6 +39,6 @@
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.3",
     "tsconfig": "workspace:*",
-    "typescript": "^4.5.3"
+    "typescript": "^5.3.3"
   }
 }

apps/web/server.webpack.lock

@@ -0,0 +1,5 @@
+{
+  "https://jdwfuoipoelmobuh.public.blob.vercel-storage.com/rule-create-high-fps-xr0vXRV66mOUts5LGbSuiPGLgI1hXb.mp4": { "integrity": "sha512-jzJ13DqwevQJ+FxUJQs/A3fNzJwsKu4p9t2dxrRmSYmg7CZb/qbawvpugPx/zLJDkzzz38Cb2uaGAm41ouixjg==", "contentType": "video/mp4" },
+  "https://jdwfuoipoelmobuh.public.blob.vercel-storage.com/rule-review-voO0xrHQCQNMLosKi0dYiOW1GtX3ii.mp4": { "integrity": "sha512-J3efAE00munIW+Sqiy84IVw0Q+4FGz9LEy96dWXHoMz8COD9cj8fGNxWiIjxe2x8arIuRsOnc7+0nFRasQvoWw==", "contentType": "video/mp4" },
+  "version": 1
+}

apps/web/tsconfig.json

@@ -2,12 +2,13 @@
   "extends": "tsconfig/nextjs.json",
   "compilerOptions": {
     "plugins": [{ "name": "next" }],
+    "moduleResolution": "bundler",
     "paths": {
       "~/*": [
         "./*"
       ]
     },
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
+  "include": ["video.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
   "exclude": ["node_modules"]
 }

apps/web/video.d.ts

@@ -0,0 +1 @@
+/// <reference types="next-video/video-types/global" />

apps/web/videos/custom-rules.mp4.json

@@ -0,0 +1 @@
+{"status":"ready","originalFilePath":"videos/custom-rules.mp4","provider":"vercel-blob","providerMetadata":{"vercel-blob":{"url":"https://jdwfuoipoelmobuh.public.blob.vercel-storage.com/videos/custom-rules-nipXJgOMY7qJnPDUWS7AyMAoI1jJwF.mp4","contentType":"video/mp4"}},"createdAt":1705960545573,"updatedAt":1705960559699,"size":999067,"sources":[{"src":"https://jdwfuoipoelmobuh.public.blob.vercel-storage.com/videos/custom-rules-nipXJgOMY7qJnPDUWS7AyMAoI1jJwF.mp4","type":"video/mp4"}]}

apps/web/videos/review-fix.mp4.json

@@ -0,0 +1 @@
+{"status":"ready","originalFilePath":"videos/review-fix.mp4","provider":"vercel-blob","providerMetadata":{"vercel-blob":{"url":"https://jdwfuoipoelmobuh.public.blob.vercel-storage.com/videos/review-fix-WJjIFvXNqzoESju6xWSwBKT4SU7BEk.mp4","contentType":"video/mp4"}},"createdAt":1705960545572,"updatedAt":1705960559353,"size":510777,"sources":[{"src":"https://jdwfuoipoelmobuh.public.blob.vercel-storage.com/videos/review-fix-WJjIFvXNqzoESju6xWSwBKT4SU7BEk.mp4","type":"video/mp4"}]}

packages/eslint-config-custom/package.json

@@ -5,6 +5,6 @@
   "devDependencies": {
     "@vercel/style-guide": "^5.0.0",
     "eslint-config-turbo": "^1.10.12",
-    "typescript": "^4.5.3"
+    "typescript": "^5.3.3"
   }
 }