Merge pull request #23 from takeokunn/awesome-yasunori-dev

Awesome  Yasunori Web を作成

.github/workflows/ci.yml

@@ -83,3 +83,21 @@ jobs:
         run: pnpm run lint
       - name: Format
         run: pnpm biome format
+  web-lint:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/web
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9 # package.jsonにpackageManagerをつけてもサブディレクトリのせいか、これがないとエラーになる
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Typecheck
+        run: pnpm run typecheck
+      - name: Lint
+        run: pnpm run lint
+      - name: Format
+        run: pnpm biome format

.github/workflows/deploy.yml

@@ -45,3 +45,27 @@ jobs:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
           command: pages deploy
+  deploy-web:
+    name: Deploy Web
+    if: github.event.pull_request.draft == false
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/web
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9 # package.jsonにpackageManagerをつけてもサブディレクトリのせいか、これがないとエラーになる
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Build
+        run: pnpm run build
+      - name: Deploy
+        uses: cloudflare/wrangler-action@v3
+        with:
+          packageManager: pnpm
+          workingDirectory: packages/web # working-directoryを付けていても必要
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: pages deploy

packages/web/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env

packages/web/README.md

@@ -0,0 +1,33 @@
+# Awesome ysunori web
+
+This website is built using [Remix SPA Mode](https://remix.run/docs/en/main/guides/spa-mode). The component library used is Mantine.
+
+https://awesome.yasunori.dev
+
+## Development
+
+You can develop your SPA app just like you would a normal Remix app, via:
+
+```shellscript
+npm run dev
+```
+
+## Production
+
+When you are ready to build a production version of your app, `npm run build` will generate your assets and an `index.html` for the SPA.
+
+```shellscript
+npm run build
+```
+
+### Preview
+
+You can preview the build locally with [vite preview](https://vitejs.dev/guide/cli#vite-preview) to serve all routes via the single `index.html` file:
+
+```shellscript
+npm run preview
+```
+
+> [!IMPORTANT]
+>
+> `vite preview` is not designed for use as a production server

packages/web/app/entry.client.tsx

@@ -0,0 +1,18 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>,
+  );
+});

packages/web/app/hooks/use-awesome-yasunori.ts

@@ -0,0 +1,16 @@
+import useSWR from "swr";
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export function useAwesomeYasunori() {
+  return useSWR<
+    {
+      id: number;
+      title: string;
+      content: string;
+      date: string;
+      at: string;
+      senpan: string;
+      meta: string;
+    }[]
+  >("https://api.yasunori.dev/awesome", fetcher, { revalidateOnFocus: false });
+}

packages/web/app/root.tsx

@@ -0,0 +1,99 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useNavigate,
+} from "@remix-run/react";
+import {
+  MantineProvider,
+  ColorSchemeScript,
+  AppShell,
+  Burger,
+  NavLink,
+  ScrollArea,
+  Title,
+  Text,
+  Group,
+  rem,
+} from "@mantine/core";
+import "@mantine/core/styles.css";
+import { useDisclosure, useHeadroom } from "@mantine/hooks";
+import { useAwesomeYasunori } from "./hooks/use-awesome-yasunori";
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  const { data } = useAwesomeYasunori();
+  const pinned = useHeadroom({ fixedAt: 120 });
+  const [opened, { toggle }] = useDisclosure();
+  const navigate = useNavigate();
+  return (
+    <html lang="ja">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+        <ColorSchemeScript />
+      </head>
+      <body>
+        <MantineProvider forceColorScheme="dark">
+          <AppShell
+            header={{ height: 60, collapsed: !pinned }}
+            navbar={{
+              width: 300,
+              breakpoint: "sm",
+              collapsed: { mobile: !opened },
+            }}
+            padding="md"
+          >
+            <AppShell.Header p="md">
+              <Group align="center">
+                <Burger
+                  opened={opened}
+                  onClick={toggle}
+                  hiddenFrom="sm"
+                  size="sm"
+                />
+                <Title order={1} size="h3">
+                  Awesome Yasunori Web
+                </Title>
+              </Group>
+            </AppShell.Header>
+            <AppShell.Navbar p="md">
+              <AppShell.Section grow component={ScrollArea}>
+                {data?.map((d) => (
+                  <NavLink
+                    key={d.id}
+                    onClick={() => navigate(`#${d.id}`, { replace: true })}
+                    label={
+                      <Group gap="xs">
+                        <Text>{`${d.title}`}</Text>
+                        <Text size="xs" c="dimmed">
+                          {`#${d.id}`}
+                        </Text>
+                      </Group>
+                    }
+                  />
+                ))}
+              </AppShell.Section>
+            </AppShell.Navbar>
+            <AppShell.Main pt={`calc(${rem(60)} + var(--mantine-spacing-md))`}>
+              {children}
+            </AppShell.Main>
+          </AppShell>
+        </MantineProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function HydrateFallback() {
+  return <p>Loading...</p>;
+}

packages/web/app/routes/_index.tsx

@@ -0,0 +1,45 @@
+import { Stack, Title, Card, Paper, Badge, Group } from "@mantine/core";
+import { useAwesomeYasunori } from "../hooks/use-awesome-yasunori";
+import type { MetaFunction } from "@remix-run/node";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "Awesome yasunori web" },
+    { name: "description", content: "Welcome to awesome yasunori!" },
+  ];
+};
+
+export default function Index() {
+  const { data } = useAwesomeYasunori();
+  return (
+    <Stack gap="lg">
+      {data?.map((d) => (
+        <Card
+          key={d.id}
+          id={`${d.id}`}
+          shadow="sm"
+          padding="lg"
+          radius="md"
+          withBorder
+        >
+          <Stack mb="lg">
+            <Title order={2} size="h2">
+              {d.title}
+            </Title>
+            <Group gap="xs">
+              <Badge color="pink">#{d.id}</Badge>
+              <Badge color="blue">{d.senpan}</Badge>
+              <Badge color="green">{d.at}</Badge>
+              <Badge color="cyan">{d.date}</Badge>
+            </Group>
+          </Stack>
+          <Paper p="md">
+            <Markdown remarkPlugins={[remarkGfm]}>{d.content}</Markdown>
+          </Paper>
+        </Card>
+      ))}
+    </Stack>
+  );
+}

packages/web/biome.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": ["build"]
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "a11y": {
+        "noSvgWithoutTitle": "off"
+      }
+    }
+  }
+}

packages/web/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "awesome-yasunori-web",
+  "description": "The awesome yasunori web site.",
+  "sideEffects": false,
+  "license": "MIT",
+  "type": "module",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "build": "remix vite:build",
+    "dev": "remix vite:dev",
+    "lint": "pnpm biome lint .",
+    "preview": "vite preview",
+    "deploy": "pnpm run build && wrangler pages deploy",
+    "typecheck": "tsc",
+    "format": "biome format --write ."
+  },
+  "dependencies": {
+    "@mantine/core": "^7.13.1",
+    "@mantine/hooks": "^7.13.1",
+    "@remix-run/node": "^2.12.1",
+    "@remix-run/react": "^2.12.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "swr": "^2.2.5"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.2",
+    "@remix-run/dev": "^2.12.1",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "typescript": "^5.6.2",
+    "vite": "^5.2.12",
+    "vite-tsconfig-paths": "^5.0.1",
+    "wrangler": "^3.79.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}