feat: impl alpha top page and integration test (#16)

.editorconfig

@@ -9,3 +9,6 @@ insert_final_newline = true
 max_line_length = 120
 tab_width = 2
 trim_trailing_whitespace = true
+
+[*.yml]
+indent_style = space

.github/actions/setup-playwright/action.yml

@@ -0,0 +1,27 @@
+name: Setup Playwright
+description: Setup Playwright environment and use cache for faster setup
+
+runs:
+  using: composite
+  steps:
+    - name: Setup | Get Playwright version
+      id: playwright-version
+      shell: bash
+      run: |
+        echo "version=$(pnpm list playwright --json | jq -r '.[].devDependencies.playwright.version')" >> $GITHUB_OUTPUT
+    - name: Setup | Playwright Cache
+      uses: actions/cache@v4
+      id: playwright-cache
+      with:
+        path: ~/.cache/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}
+        restore-keys: |
+          ${{ runner.os }}-playwright-
+    - name: Setup | Install Playwright (without cache)
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      shell: bash
+      run: pnpm exec playwright install --with-deps
+    - name: Setup | Install playwright (with cache)
+      if: steps.playwright-cache.outputs.cache-hit == 'true'
+      shell: bash
+      run: pnpm exec playwright install-deps

.github/workflows/ci.yml

@@ -54,20 +54,25 @@ jobs:
   #          node-version-file: .nvmrc
   #      - name: Test | Unit
   #        run: pnpm run test:unit
-  #  integration-test:
-  #    runs-on: ubuntu-latest
-  #    timeout-minutes: 5
-  #    steps:
-  #      - name: Setup | Checkout
-  #        uses: actions/checkout@v4.1.1
-  #      - name: Setup | Node.js
-  #        uses: re-taro/actions/setup-node@v3.5.4
-  #        with:
-  #          node-version-file: .nvmrc
-  #      - name: Setup | Playwright
-  #        uses: ./.github/actions/setup-playwright
-  #      - name: Test | Integration
-  #        run: pnpm run test:integration
+  integration-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - name: Setup | Checkout
+        uses: actions/checkout@v4.1.3
+      - name: Setup | Node.js
+        uses: re-taro/actions/setup-node@v3.5.4
+        with:
+          node-version-file: .nvmrc
+      - name: Setup | Playwright
+        uses: ./.github/actions/setup-playwright
+      - name: Setup | Build
+        run: pnpm build
+      - name: Test | Integration
+        run: |
+          pnpm concurrently -k -s first -n "APP,TEST" -c "magenta,blue" \
+            "pnpm start" \
+            "pnpm wait-on http://127.0.0.1:8788 && pnpm test:integration"
   #  storybook-test:
   #    runs-on: ubuntu-latest
   #    timeout-minutes: 5

.github/workflows/release.yml

@@ -0,0 +1,29 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - v*
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - name: Setup | Checkout
+        uses: actions/checkout@v4.1.3
+        with:
+          ref: main
+      - name: Setup | Node.js
+        uses: re-taro/actions/setup-node@v3.5.4
+        with:
+          node-version-file: .nvmrc
+      - name: Deploy | Build
+        run: pnpm build
+      - name: Deploy | Deploy to Cloudflare Pages
+        id: page
+        uses: cloudflare/wrangler-action@v3.4.1
+        with:
+          apiToken: ${{ secrets.CF_API_TOKEN }}
+          accountId: ${{ secrets.CF_ACCOUNT_ID }}
+          command: pages deploy --project-name 2024-hp --directory build/client

.gitignore

@@ -1,2 +1,5 @@
 node_modules/
 build/
+.wrangler/
+playwright-report/
+test-results/

app/root.tsx

@@ -1,6 +1,7 @@
 import type { LinksFunction, MetaFunction } from "@remix-run/cloudflare";
 import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse, useRouteError } from "@remix-run/react";
 import type { ReactNode } from "react";
+import "@/styles/globals.css";
 
 interface Props {
 	title?: string;
@@ -43,6 +44,15 @@ export const links: LinksFunction = () => [];
 export const meta: MetaFunction = () => [
 	{ charSet: "utf-8" },
 	{ name: "viewport", content: "width=device-width" },
+	{ name: "description", content: "第59回鈴鹿高専祭公式サイト" },
+	{ name: "og:title", content: "第59回 鈴鹿高専祭" },
+	{ name: "og:description", content: "第59回鈴鹿高専祭公式サイト" },
+	{ name: "og:url", content: "https://snct-fes.info" },
+	{ name: "og:type", content: "website" },
+	{ name: "twitter:card", content: "summary_large_image" },
+	{ name: "twitter:title", content: "第59回 鈴鹿高専祭" },
+	{ name: "twitter:description", content: "第59回鈴鹿高専祭公式サイト" },
+	{ name: "twitter:site", content: "@KOSENFESTA" },
 ];
 
 export function ErrorBoundary() {

app/routes/_index/route.tsx

@@ -1,24 +1,8 @@
 export default function Page() {
 	return (
-		<div>
-			<h1>Welcome to Remix</h1>
-			<ul>
-				<li>
-					<a target="_blank" href="https://remix.run/tutorials/blog" rel="noreferrer">
-						15m Quickstart Blog Tutorial
-					</a>
-				</li>
-				<li>
-					<a target="_blank" href="https://remix.run/tutorials/jokes" rel="noreferrer">
-						Deep Dive Jokes App Tutorial
-					</a>
-				</li>
-				<li>
-					<a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-						Remix Docs
-					</a>
-				</li>
-			</ul>
-		</div>
+		<section>
+			<h1>第59回鈴鹿高専祭、開催決定</h1>
+			<p>続報を待て</p>
+		</section>
 	);
 }

app/styles/globals.css.ts

@@ -0,0 +1,2 @@
+import "./layers.css";
+import "./reset.css";

app/styles/layers.css.ts

@@ -0,0 +1,7 @@
+import { globalLayer } from "@vanilla-extract/css";
+
+export const reset = globalLayer("reset");
+export const component = globalLayer("component");
+export const componentBase = globalLayer({ parent: component }, "base");
+export const layout = globalLayer("layout");
+export const page = globalLayer("page");

app/styles/reset.css.ts

@@ -0,0 +1,212 @@
+/**
+ * The new CSS resetを参考に、Vanilla ExtractでCSSリセットを行います。 詳しくは
+ * https://github.com/elad2412/the-new-css-reset/blob/main/css/reset.css
+ * を参照して下さい。
+ */
+
+import { globalStyle } from "@vanilla-extract/css";
+
+import * as layers from "./layers.css";
+
+/**
+ * Remove all the styles of the "User-Agent-Stylesheet", except for the
+ * 'display' property
+ *
+ * - The "symbol *" part is to solve Firefox SVG sprite bug
+ * - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS
+ *   hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+ */
+globalStyle(
+	"*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *))",
+	{
+		"@layer": {
+			[layers.reset]: {
+				all: "unset",
+				display: "revert",
+			},
+		},
+	},
+);
+
+/**
+ * Preferred box-sizing value
+ */
+globalStyle("*, *::before, *::after", {
+	"@layer": {
+		[layers.reset]: {
+			boxSizing: "border-box",
+		},
+	},
+});
+
+/**
+ * Fix mobile Safari increase font-size on landscape mode
+ */
+globalStyle("html", {
+	"@layer": {
+		[layers.reset]: {
+			MozTextSizeAdjust: "none",
+			WebkitTextSizeAdjust: "none",
+			textSizeAdjust: "none",
+		},
+	},
+});
+
+/**
+ * Reapply the pointer cursor for anchor tags
+ */
+globalStyle("a, button", {
+	"@layer": {
+		[layers.reset]: {
+			cursor: "pointer",
+		},
+	},
+});
+
+/**
+ * Remove list styles (bullets/numbers)
+ */
+globalStyle("ol, ul, menu, summary", {
+	"@layer": {
+		[layers.reset]: {
+			listStyle: "none",
+		},
+	},
+});
+
+/**
+ * For images to not be able to exceed their container
+ */
+globalStyle("img", {
+	"@layer": {
+		[layers.reset]: {
+			maxInlineSize: "100%",
+			maxBlockSize: "100%",
+		},
+	},
+});
+
+/**
+ * Removes spacing between cells in tables
+ */
+globalStyle("table", {
+	"@layer": {
+		[layers.reset]: {
+			borderCollapse: "collapse",
+		},
+	},
+});
+
+/**
+ * Safari - solving issue when using user-select:none on the <body> text input
+ * doesn't working
+ */
+globalStyle("input, textarea", {
+	"@layer": {
+		[layers.reset]: {
+			WebkitUserSelect: "auto",
+		},
+	},
+});
+
+/**
+ * Revert the 'white-space' property for textarea elements on Safari
+ */
+globalStyle("textarea", {
+	"@layer": {
+		[layers.reset]: {
+			whiteSpace: "revert",
+		},
+	},
+});
+
+/**
+ * Minimum style to allow to style meter element
+ */
+globalStyle("meter", {
+	"@layer": {
+		[layers.reset]: {
+			WebkitAppearance: "revert",
+			appearance: "revert",
+		},
+	},
+});
+
+/**
+ * Preformatted text - use only for this feature
+ */
+globalStyle(":where(pre)", {
+	"@layer": {
+		[layers.reset]: {
+			all: "revert",
+			boxSizing: "border-box",
+		},
+	},
+});
+
+/**
+ * Reset default text opacity of input placeholder
+ */
+globalStyle("::placeholder", {
+	"@layer": {
+		[layers.reset]: {
+			color: "unset",
+		},
+	},
+});
+
+/**
+ * Fix the feature of 'hidden' attribute. display:revert; revert to element
+ * instead of attribute
+ */
+globalStyle(":where([hidden])", {
+	"@layer": {
+		[layers.reset]: {
+			display: "none",
+		},
+	},
+});
+
+/**
+ * Revert for bug in Chromium browsers
+ *
+ * - Fix for the content editable attribute will work properly.
+ * - Webkit-user-select: auto; added for Safari in case of using user-select:none
+ *   on wrapper element
+ */
+globalStyle(":where([contenteditable]:not([contenteditable=\"false\"]))", {
+	// @ts-expect-error: -webkit-line-break is a non-standard property
+	"@layer": {
+		[layers.reset]: {
+			MozUserModify: "read-write",
+			WebkitUserModify: "read-write",
+			overflowWrap: "break-word",
+			WebkitLineBreak: "after-white-space",
+			WebkitUserSelect: "auto",
+		},
+	},
+});
+
+/**
+ * Apply back the draggable feature - exist only in Chromium and Safari
+ */
+globalStyle(":where([draggable=\"true\"])", {
+	"@layer": {
+		[layers.reset]: {
+			// @ts-expect-error: -webkit-user-drag is a non-standard property
+			WebkitUserDrag: "element",
+		},
+	},
+});
+
+/**
+ * Revert Modal native behavior
+ */
+globalStyle(":where(dialog:modal)", {
+	"@layer": {
+		[layers.reset]: {
+			all: "revert",
+			boxSizing: "border-box",
+		},
+	},
+});