[ { "path": ".eslintrc.json", "content": "{\n \"extends\": \"next/core-web-vitals\"\n}\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n\n.env\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2023 Sean Boult\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# vercel.lol\n[![image](https://github.com/Hacksore/vercel.lol/assets/996134/5f371fd5-3f9c-4f7d-8d4b-52b32b783678)](https://vercel.lol/)\n" }, { "path": "next.config.js", "content": "import toolbarPlugin from \"@vercel/toolbar/plugins/next\";\n/** @type {import('next').NextConfig} */\nconst nextConfig = {};\n\nconst withVercelToolbar = toolbarPlugin();\n\nexport default withVercelToolbar(nextConfig);\n" }, { "path": "package.json", "content": "{\n \"name\": \"vercel.lol\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"dependencies\": {\n \"@vercel/analytics\": \"^1.3.1\",\n \"@vercel/flags\": \"^2.5.0\",\n \"@vercel/toolbar\": \"^0.1.15\",\n \"geist\": \"^1.3.0\",\n \"lucide-react\": \"^0.390.0\",\n \"next\": \"14.2.3\"\n },\n \"devDependencies\": {\n \"@types/node\": \"20.3.2\",\n \"@types/react\": \"18.2.14\",\n \"@types/react-dom\": \"18.2.6\",\n \"autoprefixer\": \"10.4.14\",\n \"eslint\": \"8.43.0\",\n \"eslint-config-next\": \"13.4.7\",\n \"postcss\": \"8.4.24\",\n \"react\": \"18.2.0\",\n \"react-dom\": \"18.2.0\",\n \"tailwindcss\": \"3.4.4\",\n \"typescript\": \"5.1.6\"\n }\n}\n" }, { "path": "postcss.config.js", "content": "const config = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n};\n\nexport default config;\n" }, { "path": "src/app/.well-known/vercel/flags/route.ts", "content": "import { NextResponse, type NextRequest } from \"next/server\";\nimport { verifyAccess, type ApiData } from \"@vercel/flags\";\n\nexport async function GET(request: NextRequest) {\n const access = await verifyAccess(request.headers.get('Authorization'));\n if (!access) return NextResponse.json(null, { status: 401 });\n \n return NextResponse.json({\n definitions: {\n exampleFlag: {\n description: \"test flag\",\n options: [\n { value: false, label: \"Off\" },\n { value: true, label: \"On\" },\n ],\n },\n },\n });\n}\n" }, { "path": "src/app/api/stars/route.ts", "content": "import { NextResponse } from \"next/server\";\n\nexport async function GET() {\n const githubData = await fetch(\n \"https://api.github.com/repos/hacksore/vercel.lol\",\n {\n headers: {\n Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,\n },\n next: { revalidate: 3600 },\n },\n )\n .then((response) => response.json())\n .catch((error) => {\n console.error(\"Error:\", error);\n });\n\n return NextResponse.json({\n stars: githubData.stargazers_count,\n lastUpdate: githubData.updated_at,\n });\n}\n" }, { "path": "src/app/getFlags.ts", "content": "import { FlagOverridesType, decrypt } from '@vercel/flags';\nimport { type NextRequest } from 'next/server';\nimport { cookies } from 'next/headers';\n \nexport async function getFlags(request: NextRequest) {\n const overrideCookie = cookies().get('vercel-flag-overrides')?.value;\n const overrides = overrideCookie\n ? await decrypt(overrideCookie)\n : {};\n \n const flags = {\n exampleFlag: overrides?.exampleFlag ?? false,\n };\n \n return flags;\n}\n" }, { "path": "src/app/globals.css", "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n --foreground-rgb: 255, 255, 255;\n --background-start-rgb: 0, 0, 0;\n --background-end-rgb: 0, 0, 0;\n}\n\nbody {\n color: rgb(var(--foreground-rgb));\n background: linear-gradient(to bottom,\n transparent,\n rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));\n}\n\n@keyframes spin {\n 50% {\n scale: 2;\n }\n}\n\n#cursorthing {\n transition: all 0.1s;\n animation: spin 5s ease-in-out infinite;\n}\n\n::-moz-selection {\n /* Code for Firefox */\n color: white;\n background: #f81ce5;\n}\n\n::selection {\n color: white;\n background: #f81ce5;\n}\n\n#t1wrap::before {\n content: \"▲\";\n position: absolute;\n opacity: 0.95;\n z-index: -1;\n inset: 0;\n}\n\n#t2wrap::before {\n content: \"The\";\n position: absolute;\n opacity: 0.95;\n z-index: -1;\n inset: 0;\n}\n\n#t3wrap::before {\n content: \"Triangle\";\n position: absolute;\n opacity: 0.95;\n z-index: -1;\n inset: 0;\n}\n\n#t4wrap::before {\n content: \"Company\";\n position: absolute;\n opacity: 0.95;\n z-index: -1;\n inset: 0;\n}\n" }, { "path": "src/app/layout.tsx", "content": "import { Metadata } from \"next\";\nimport { GeistSans } from \"geist/font/sans\";\nimport { Analytics } from \"@vercel/analytics/react\";\n\nimport \"./globals.css\";\n\nexport async function generateMetadata(): Promise {\n const description = \"▲ The triangle company\";\n const title = \"vercel.lol\";\n return {\n title,\n description,\n openGraph: {\n images: [\"https://vercel.lol/real-og.png\"],\n description,\n title,\n type: \"website\",\n },\n twitter: {\n images: [\"https://vercel.lol/real-og.png\"],\n title,\n description,\n card: \"summary_large_image\",\n },\n };\n}\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n \n \n \n {children}\n \n \n \n );\n}\n" }, { "path": "src/app/main-client.tsx", "content": "\"use client\";\n\nimport { Canvas } from \"../components/canvas\";\nimport { VercelToolbar } from \"@vercel/toolbar/next\";\nimport { FlagValues } from \"@vercel/flags/react\";\nimport TheHub from \"./thehub\";\n\nexport default function Main() {\n return (\n
\n \n
🚀
\n
\n vercel.lol just announced $420 million in series deez VC funding\n
\n
🚀
\n \n \n

\n
\n \n ▲\n \n
\n
\n \n The\n \n
\n
\n \n Triangle\n \n
\n {/* T4 Stack */}\n
\n \n Company\n \n
\n \n
\n We sell triangles.\n
\n

\n \n \n
\n \n \n Sauce\n \n
|
\n \n Buy a Triangle\n \n \n \n Made with\n \n \n \n by\n \n PickleNik\n \n and\n \n Hacksore\n \n \n
\n \n \n © 2069 ▼ercel.lol\n \n
\n {/* Some other content */}\n \n
\n \n );\n}\n" }, { "path": "src/app/page.tsx", "content": "import Main from \"./main-client\";\n\nexport default async function Home() {\n\n return
\n}\n" }, { "path": "src/app/thehub/index.tsx", "content": "import { ChevronRight, Star } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\n\nexport const revalidate = 3600;\n\nexport default function TheHub() {\n let formatter = Intl.NumberFormat(\"en\", { notation: \"compact\" });\n\n const [starCount, setStarCount] = useState(0);\n\n useEffect(() => {\n fetch(\"/api/stars\")\n .then((response) => response.json())\n .then((res) => {\n setStarCount(res.stars);\n })\n .catch((error) => {\n console.error(\"Error:\", error);\n });\n }, []);\n\n return (\n \n \n \n <>\n \n {formatter.format(starCount)}\n \n \n \n Star us on the hub\n \n \n \n );\n}\n" }, { "path": "src/components/canvas/index.tsx", "content": "\"use client\";\n\nimport React from \"react\";\nimport { useEffect } from \"react\";\n\n// TODO: because refs were too hard we use globals\nlet x = 0;\nlet y = 0;\nlet dx = 1;\nlet dy = 1;\n\n// I am sorry for this\nlet viewportHeight = 0;\nlet viewportWidth = 0;\nlet currentColorId = 0;\n\nconst PUCK_SPEED = 0.8;\n\n// NOTE: these 4 colours match gradients in page.tsx\nconst COLORS = [\"#00FFFF\", \"#4444FF\", \"#FF00FF\", \"#FF8800\"];\nlet currentT = 1;\n\nexport function Canvas() {\n // bg blob\n const blobRef = React.useRef(null);\n // subtitle\n const h3Ref = React.useRef(null);\n // star bg\n const starbgRef = React.useRef(null);\n const starcountRef = React.useRef(null);\n\n // T4 title stack\n const t1Ref = React.useRef(null);\n const t2Ref = React.useRef(null);\n const t3Ref = React.useRef(null);\n const t4Ref = React.useRef(null);\n\n const canvasRef = React.useRef(null);\n const ctxRef = React.useRef(null);\n\n const TRIANGLE_HEIGHT = 64;\n const TRIANGLE_WIDTH = 72;\n const SQUARE_SIZE = 64;\n\n useEffect(() => {\n if (typeof window === \"undefined\") {\n return;\n }\n const blob = document.getElementById(\"cursorthing\") as HTMLDivElement;\n blobRef.current = blob;\n\n const h3 = document.getElementById(\"subtitle\") as HTMLDivElement;\n h3Ref.current = h3;\n const starbg = document.getElementById(\"star-bg\") as HTMLDivElement;\n const starcount = document.getElementById(\"star-count\") as HTMLDivElement;\n starbgRef.current = starbg;\n starcountRef.current = starcount;\n\n const t1 = document.getElementById(\"t1\") as HTMLDivElement;\n t1Ref.current = t1;\n const t2 = document.getElementById(\"t2\") as HTMLDivElement;\n t2Ref.current = t2;\n const t3 = document.getElementById(\"t3\") as HTMLDivElement;\n t3Ref.current = t3;\n const t4 = document.getElementById(\"t4\") as HTMLDivElement;\n t4Ref.current = t4;\n\n const canvas = document.getElementById(\"canvas\") as HTMLCanvasElement;\n canvasRef.current = canvas;\n\n const ctx = canvas.getContext(\"2d\");\n ctxRef.current = ctx;\n\n window.requestAnimationFrame(render);\n\n // get size of the viewport\n window.addEventListener(\"resize\", () => {\n // set canvas size to match\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n\n viewportHeight = window.innerHeight;\n viewportWidth = window.innerWidth;\n });\n\n window.addEventListener(\"mousemove\", (e) => {\n blob.style.translate = `${e.clientX - blob.clientWidth / 2}px ${\n e.clientY - blob.clientHeight / 2\n }px`;\n });\n\n viewportHeight = window.innerHeight;\n viewportWidth = window.innerWidth;\n\n // set canvas size to match\n canvas.width = innerWidth;\n canvas.height = innerHeight;\n }, []);\n\n const render = () => {\n const ctx = ctxRef.current;\n if (!ctx) {\n return;\n }\n\n if (!canvasRef.current) {\n return;\n }\n\n ctx.clearRect(0, 0, viewportWidth, viewportHeight);\n\n // Check if it's April 1st\n const today = new Date();\n const isAprilFools = today.getMonth() === 3 && today.getDate() === 1;\n\n if (y + TRIANGLE_HEIGHT >= canvasRef.current.height || y < 0) {\n currentColorId === COLORS.length - 1\n ? (currentColorId = 0)\n : currentColorId++;\n currentT === 4 ? (currentT = 1) : currentT++;\n dy *= -1;\n }\n\n // Reverse direction if hitting the canvas boundaries\n if (x + TRIANGLE_WIDTH >= canvasRef.current.width || x < 0) {\n currentColorId === COLORS.length - 1\n ? (currentColorId = 0)\n : currentColorId++;\n currentT === 4 ? (currentT = 1) : currentT++;\n dx *= -1;\n }\n\n // Update the position\n x += dx * PUCK_SPEED;\n y += dy * PUCK_SPEED;\n\n // draw a solid shape based on the date\n ctx.fillStyle = COLORS[currentColorId];\n\n // change blob bg\n const blob = blobRef.current;\n if (blob) {\n blob.style.background = COLORS[currentColorId];\n }\n const h3 = h3Ref.current;\n if (h3) {\n h3.style.background = COLORS[currentColorId];\n h3.style.boxShadow = `0 0 3rem -0.25rem ${COLORS[currentColorId]}`;\n }\n const starbg = starbgRef.current;\n if (starbg) {\n starbg.style.background = COLORS[currentColorId];\n }\n\n const starcount = starcountRef.current;\n if (starcount) {\n starcount.style.background = COLORS[currentColorId];\n }\n\n const t1 = t1Ref.current as HTMLElement;\n const t2 = t2Ref.current as HTMLElement;\n const t3 = t3Ref.current as HTMLElement;\n const t4 = t4Ref.current as HTMLElement;\n\n if (currentT === 1) {\n t1.style.opacity = \"1\";\n t4.style.opacity = \"0\";\n if (isAprilFools) t1.textContent = \"■\"; // Change triangle to square UTF8 char\n }\n if (currentT === 2) {\n t1.style.opacity = \"0\";\n t2.style.opacity = \"1\";\n }\n if (currentT === 3) {\n t2.style.opacity = \"0\";\n t3.style.opacity = \"1\";\n }\n if (currentT === 4) {\n t3.style.opacity = \"0\";\n t4.style.opacity = \"1\";\n if (isAprilFools) t4.textContent = \"■\"; // Ensure all triangle UTF8 characters are changed to square\n }\n\n if (isAprilFools) {\n // draw a square\n ctx.fillRect(x, y, SQUARE_SIZE, SQUARE_SIZE);\n } else {\n // draw a triangle with the tip pointing up\n ctx.beginPath();\n ctx.moveTo(x + TRIANGLE_WIDTH / 2, y);\n ctx.lineTo(x + TRIANGLE_WIDTH, y + TRIANGLE_HEIGHT);\n ctx.lineTo(x, y + TRIANGLE_HEIGHT);\n ctx.fill();\n }\n\n window.requestAnimationFrame(render);\n };\n\n return (\n <>\n \n \n \n );\n}\n" }, { "path": "tailwind.config.js", "content": "/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n './src/pages/**/*.{js,ts,jsx,tsx,mdx}',\n './src/components/**/*.{js,ts,jsx,tsx,mdx}',\n './src/app/**/*.{js,ts,jsx,tsx,mdx}',\n ],\n theme: {\n extend: {\n backgroundImage: {\n 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\n 'gradient-conic':\n 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',\n },\n },\n },\n plugins: [],\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"incremental\": true,\n \"plugins\": [\n {\n \"name\": \"next\"\n }\n ],\n \"paths\": {\n \"@/*\": [\"./src/*\"]\n }\n },\n \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n \"exclude\": [\"node_modules\"]\n}\n" } ]