Next

.github/workflows/pr.yml

@@ -0,0 +1,18 @@
+name: PR
+
+on:
+  pull_request:
+
+jobs:
+  pr:
+    name: PR
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+      - run: bun install --no-save
+      - run: bun run lint
+      - run: bun run build
+      - run: bun run test

.gitignore

@@ -1,24 +1,37 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# dependencies
 node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+build
 dist
-dist-ssr
-*.local
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
+# misc
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+*.pem
+.swc
+.turbo
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+turbo-build.log*
+
+# local env files
+# do not commit any .env files to git, except for the .env.example file.
+.env
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+.vscode/
+.cache/

.lintstagedrc

@@ -1,6 +1,4 @@
 {
-  "**/*.{ts,tsx}": [
-    "prettier --write --ignore-unknown",
-    "eslint --fix"
-  ]
+  "**/*.{ts,tsx}": ["turbo run lint -- --fix --no-warn-ignored"],
+  "**/*.{ts,tsx,md}": ["prettier --write"]
 }

.puppeteerrc.cjs

@@ -0,0 +1,14 @@
+const { join } = require('path');
+
+/**
+ * @type {import("puppeteer").Configuration}
+ */
+module.exports = {
+  chrome: {
+    skipDownload: true
+  },
+  'chrome-headless-shell': {
+    skipDownload: false
+  },
+  cacheDirectory: join(__dirname, '.cache', 'puppeteer')
+};

apps/api/eslint.config.mjs

@@ -0,0 +1,4 @@
+import nodeConfig from '@workspace/eslint-config/node';
+
+/** @type {import('typescript-eslint').Config} */
+export default [...nodeConfig];

apps/api/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@workspace/api",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "bun run --watch src/index.ts",
+    "start": "bun run src/index.ts",
+    "lint": "eslint . --max-warnings 0",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@elysiajs/cors": "^1.2.0",
+    "@workspace/schema": "workspace:*",
+    "close-with-grace": "^2.2.0",
+    "elysia": "^1.2.11",
+    "puppeteer": "^24.1.1"
+  },
+  "devDependencies": {
+    "@tsconfig/bun": "^1.0.7",
+    "@workspace/eslint-config": "workspace:*",
+    "bun-types": "latest"
+  },
+  "module": "src/index.js"
+}

apps/api/src/bun-env.d.ts

@@ -0,0 +1,9 @@
+declare module 'bun' {
+  interface Env {
+    SHADOWAVE_HOST?: string;
+    SHADOWAVE_PORT?: string;
+    SHADOWAVE_CORS_ORIGIN?: string;
+  }
+}
+
+export {};

apps/api/src/index.ts

@@ -0,0 +1,29 @@
+import { Elysia } from 'elysia';
+import { cors } from '@elysiajs/cors';
+import closeWithGrace from 'close-with-grace';
+import { screenshots } from './routes/screenshots.js';
+
+const app = new Elysia()
+  .use(
+    cors({
+      origin: process.env.SHADOWAVE_CORS_ORIGIN?.split(',') ?? true
+    })
+  )
+  .use(screenshots)
+  .listen({
+    hostname: process.env.SHADOWAVE_HOST || '0.0.0.0',
+    port: process.env.SHADOWAVE_PORT || 3001
+  });
+
+closeWithGrace({ delay: 2000 }, async ({ err }) => {
+  if (err) {
+    console.error(err);
+  }
+  await app.stop();
+});
+
+console.log(
+  `🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
+);
+
+export type App = typeof app;

apps/api/src/routes/screenshots.ts

@@ -0,0 +1,86 @@
+import { Elysia, form, t } from 'elysia';
+import puppeteer, { type Device, KnownDevices } from 'puppeteer';
+import { url, deviceType } from '@workspace/schema';
+
+type ColorScheme = 'light' | 'dark';
+type DeviceType = typeof deviceType.static;
+
+const TIMEOUT = 100000;
+
+const defaultColorSchemes: ColorScheme[] = ['dark', 'light'];
+const deviceMapping: Record<DeviceType, Device> = {
+  mobile: KnownDevices['iPhone 15'],
+  tablet: KnownDevices['iPad'],
+  desktop: {
+    userAgent:
+      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/132.0.6834.110 Safari/537.36',
+    viewport: {
+      width: 1200,
+      height: 630
+    }
+  }
+};
+
+interface ScreenshotsOptions {
+  deviceType?: DeviceType;
+  colorSchemes?: ColorScheme[];
+}
+
+const screenshotService = new Elysia({ name: 'Service.Screenshot' })
+  .decorate('browser', await puppeteer.launch({ headless: 'shell' }))
+  .derive({ as: 'scoped' }, ({ browser }) => ({
+    async *screenshots(url: string, options: ScreenshotsOptions) {
+      const { deviceType = 'desktop', colorSchemes = defaultColorSchemes } =
+        options;
+
+      const page = await browser.newPage();
+      await page.setCacheEnabled(false);
+      await page.emulate(deviceMapping[deviceType]);
+      await page.goto(url, { timeout: TIMEOUT, waitUntil: 'networkidle0' });
+
+      for (const colorScheme of colorSchemes) {
+        await page.emulateMediaFeatures([
+          { name: 'prefers-color-scheme', value: colorScheme }
+        ]);
+        await page.waitForNetworkIdle({ timeout: TIMEOUT });
+        const screenshot = await page.screenshot({
+          type: 'webp'
+        });
+        yield [colorScheme, screenshot] as const;
+      }
+
+      await page.close();
+    }
+  }))
+  .onStop(async ({ decorator: { browser } }) => {
+    await browser.close();
+  });
+
+export const screenshots = new Elysia().use(screenshotService).get(
+  '/screenshots/:url',
+  async ({ params: { url }, query, screenshots }) => {
+    const formData = form({});
+    for await (const [colorScheme, screenshot] of screenshots(
+      decodeURIComponent(url),
+      query
+    )) {
+      formData.append(
+        colorScheme,
+        new Blob([screenshot]),
+        `${colorScheme}.webp`
+      );
+    }
+    return formData;
+  },
+  {
+    params: t.Object({
+      url
+    }),
+    query: t.Object({
+      deviceType: t.Optional(deviceType)
+    }),
+    transform({ params }) {
+      params.url = decodeURIComponent(params.url);
+    }
+  }
+);

apps/api/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@tsconfig/bun",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": ["bun-types"],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@workspace/schema/*": ["../../packages/schema/src/*"]
+    }
+  }
+}

apps/web/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3001

apps/web/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "../../packages/ui/tailwind.config.ts",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}

apps/web/eslint.config.mjs

@@ -0,0 +1,11 @@
+// @ts-check
+
+import reactConfig from '@workspace/eslint-config/react';
+
+/** @type {import('typescript-eslint').Config} */
+export default [
+  ...reactConfig,
+  {
+    ignores: ['src/locales']
+  }
+];

apps/web/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<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, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Create a screenshot showcasing your app's transition from light to dark theme."
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="preload"
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
+    <title>Shadowave</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>