Add next example and handle media query on the web

2026-05-31 01:35:46 +00:00 · 2022-11-09 13:40:13 +09:00
parent 08eeec7e73
commit e36fdbbdff
16 changed files with 952 additions and 57 deletions
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
@@ -0,0 +1,25 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+const withTM = require("next-transpile-modules")(["@yoshiki/react", "@yoshiki/core"]);
+const path = require("path");
+
+/**
+ * @type {import("next").NextConfig}
+ */
+const nextConfig = {
+	reactStrictMode: true,
+	swcMinify: true,
+	webpack: (config, options) => {
+		if (options.isServer) {
+			config.externals = ["react", ...config.externals];
+		}
+
+		config.resolve.alias["react"] = path.resolve(__dirname, ".", "node_modules", "react");
+		return config;
+	},
+};
+
+module.exports = withTM(nextConfig);
@@ -0,0 +1,24 @@
+{
+	"name": "next-example",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@types/node": "18.11.9",
+		"@types/react": "18.0.25",
+		"@types/react-dom": "18.0.8",
+		"@yoshiki/react": "*",
+		"eslint": "8.27.0",
+		"eslint-config-next": "13.0.2",
+		"next": "13.0.2",
+		"next-transpile-modules": "^10.0.0",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"typescript": "4.8.4"
+	}
+}
@@ -0,0 +1,14 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import type { AppProps } from "next/app";
+import { useLayoutEffect, useState } from "react";
+
+export default function App({ Component, pageProps }: AppProps) {
+	const [show, showApp] = useState(false);
+
+	useLayoutEffect(() => showApp(true));
+	return show ? <Component {...pageProps} /> : null;
+}
@@ -0,0 +1,75 @@
+//
+// Copyright (c) Zoe Roux and contributors. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+//
+
+import Head from "next/head";
+import Image from "next/image";
+import { useYoshiki } from "@yoshiki/react";
+
+export default function Home(props: {}) {
+	const { css } = useYoshiki();
+
+	return (
+		<div {...css({ paddingLeft: "2rem", paddingRight: "2rem" }, props)}>
+			<Head>
+				<title>Create Next App</title>
+				<meta name="description" content="Generated by create next app" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+
+			<main>
+				<h1>
+					Welcome to <a href="https://nextjs.org">Next.js!</a>
+				</h1>
+
+				<p>
+					Get started by editing <code>pages/index.tsx</code>
+				</p>
+
+				<div
+					{...css({
+						background: { xs: "red", sm: "blue", md: "green" },
+					})}
+				>
+					<a href="https://nextjs.org/docs">
+						<h2>Documentation &rarr;</h2>
+						<p>Find in-depth information about Next.js features and API.</p>
+					</a>
+
+					<a href="https://nextjs.org/learn">
+						<h2>Learn &rarr;</h2>
+						<p>Learn about Next.js in an interactive course with quizzes!</p>
+					</a>
+
+					<a href="https://github.com/vercel/next.js/tree/canary/examples">
+						<h2>Examples &rarr;</h2>
+						<p>Discover and deploy boilerplate example Next.js projects.</p>
+					</a>
+
+					<a
+						href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<h2>Deploy &rarr;</h2>
+						<p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
+					</a>
+				</div>
+			</main>
+
+			<footer>
+				<a
+					href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					Powered by{" "}
+					<span>
+						<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+					</span>
+				</a>
+			</footer>
+		</div>
+	);
+}
@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
@@ -0,0 +1,20 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "preserve",
+		"incremental": true
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules"]
+}