init: create project with settings

.devcontainer/Dockerfile

@@ -0,0 +1,6 @@
+FROM dev-toys-web-dev:1.0.0
+
+RUN apt-get update \
+  && apt-get install --no-install-recommends -y git ca-certificates fish \
+  && apt-get clean \
+  && rm -rf /var/lib/apt/lists/*

.devcontainer/devcontainer.json

@@ -0,0 +1,29 @@
+{
+  "name": "DevToysWeb",
+  "dockerComposeFile": ["../docker-compose.yml", "docker-compose.yml"],
+  "service": "app",
+  "workspaceFolder": "/app",
+  "settings": {
+    "terminal.integrated.defaultProfile.linux": "fish",
+    "terminal.integrated.profiles.linux": {
+      "fish": {
+        "path": "/usr/bin/fish",
+        "args": ["-l"]
+      }
+    }
+  },
+  "extensions": [
+    "bierner.github-markdown-preview",
+    "davidanson.vscode-markdownlint",
+    "irongeek.vscode-env",
+    "dbaeumer.vscode-eslint",
+    "mhutchie.git-graph",
+    "ms-ceintl.vscode-language-pack-ja",
+    "ms-azuretools.vscode-docker",
+    "esbenp.prettier-vscode",
+    "artdiniz.quitcontrol-vscode",
+    "styled-components.vscode-styled-components"
+  ],
+  "runServices": ["app"],
+  "shutdownAction": "stopCompose"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,10 @@
+version: "3.9"
+
+services:
+  app:
+    image: rusconn/dev-toys-web-dev:1.0.0
+    build:
+      context: .devcontainer
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    command: sleep infinity

.env.example

@@ -0,0 +1 @@
+APP_PORT=3000

.eslintignore

@@ -0,0 +1 @@
+.gitignore

.eslintrc.json

@@ -0,0 +1,50 @@
+{
+  "root": true,
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "airbnb",
+    "airbnb-typescript",
+    "airbnb/hooks",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "rules": {
+    "no-console": "off",
+    "no-else-return": "off",
+    "no-underscore-dangle": ["error", { "allow": ["_slug"] }],
+    "import/prefer-default-export": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "react/require-default-props": "off",
+    "react/function-component-definition": "off",
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        "components": ["Link"],
+        "specialLink": ["hrefLeft", "hrefRight"],
+        "aspects": ["invalidHref", "preferButton"]
+      }
+    ],
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal", ["parent", "sibling"], "object", "index"],
+        "newlines-between": "always",
+        "alphabetize": { "order": "asc", "caseInsensitive": true }
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": "src/pages/_app.tsx",
+      "rules": {
+        "react/jsx-props-no-spreading": "off"
+      }
+    }
+  ]
+}

.gitignore

@@ -0,0 +1,44 @@
+# 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
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# eslint
+.eslintcache
+
+# env
+.env

.prettierignore

@@ -0,0 +1 @@
+.gitignore

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "arrowParens": "avoid"
+}

README.md

@@ -0,0 +1,16 @@
+# DevToysWeb
+
+A web clone of [DevToys](https://github.com/veler/DevToys)
+
+## Todo
+
+- [ ] Add site layout
+- [ ] Add all tools page mock
+- [ ] Implement tools
+  - [ ] Converters
+  - [ ] Encoders / Decoders
+  - [ ] Formatters
+  - [ ] Generators
+  - [ ] Text
+  - [ ] Graphic
+- [ ] Support dark mode

docker-compose.yml

@@ -0,0 +1,21 @@
+version: "3.9"
+
+services:
+  app:
+    image: dev-toys-web-dev:1.0.0
+    build:
+      context: docker
+    working_dir: /app
+    volumes:
+      - .:/app:cached
+      - next:/app/.next
+      - node_modules:/app/node_modules
+      - yarn-cache:/usr/local/share/.cache/yarn/v6
+    command: sh -c "yarn && yarn dev"
+    ports:
+      - ${APP_PORT:-3000}:3000
+
+volumes:
+  next:
+  node_modules:
+  yarn-cache:

docker/Dockerfile

@@ -0,0 +1 @@
+FROM node:16.16.0-bullseye-slim

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,38 @@
+{
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "fix": "run-s fix:*",
+    "fix:path": "yarn path",
+    "fix:type": "yarn typecheck",
+    "fix:lint": "yarn lint --fix",
+    "fix:format": "yarn format",
+    "path": "pathpida -o ./src/libs --ignorePath .gitignore --enableStatic",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --cache",
+    "format": "prettier --write './**/*.{js,jsx,ts,tsx,json,css}'"
+  },
+  "dependencies": {
+    "next": "12.1.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "^16.11.45",
+    "@types/react": "17.0.41",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
+    "eslint": "8.11.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^16.1.4",
+    "eslint-config-next": "12.1.0",
+    "eslint-config-prettier": "^8.5.0",
+    "npm-run-all": "^4.1.5",
+    "pathpida": "^0.18.0",
+    "prettier": "^2.6.0",
+    "typescript": "4.6.2"
+  }
+}

src/libs/$path.ts

@@ -0,0 +1,11 @@
+export const pagesPath = {
+  $url: (url?: { hash?: string }) => ({ pathname: "/" as const, hash: url?.hash }),
+};
+
+export type PagesPath = typeof pagesPath;
+
+export const staticPath = {
+  favicon_ico: "/favicon.ico",
+} as const;
+
+export type StaticPath = typeof staticPath;

src/pages/_app.tsx

@@ -0,0 +1,5 @@
+import type { AppProps } from "next/app";
+
+const MyApp = ({ Component, pageProps }: AppProps) => <Component {...pageProps} />;
+
+export default MyApp;

src/pages/_document.tsx

@@ -0,0 +1,21 @@
+import Document, { DocumentContext, Html, Head, Main, NextScript } from "next/document";
+
+const MyDocument = class extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    return Document.getInitialProps(ctx);
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+};
+
+export default MyDocument;

src/pages/index.tsx

@@ -0,0 +1,16 @@
+import type { NextPage } from "next";
+import Head from "next/head";
+
+import { staticPath } from "@/libs/$path";
+
+const Page: NextPage = () => (
+  <>
+    <Head>
+      <title>DevToysWeb</title>
+      <link rel="icon" href={staticPath.favicon_ico} />
+    </Head>
+    <p>hello</p>
+  </>
+);
+
+export default Page;

tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "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,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}