Initial commit

.eslintignore

@@ -0,0 +1,3 @@
+postcss.config.js
+vite.config.ts
+tailwind.config.js

.eslintrc.json

@@ -0,0 +1,59 @@
+{
+  "env": {
+    "es2021": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": [
+    "react",
+    "react-hooks",
+    "@typescript-eslint",
+    "prettier",
+    "sort-imports-es6-autofix",
+    "import",
+    "no-relative-import-paths"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "no-relative-import-paths/no-relative-import-paths": [
+      "error",
+      {
+        "allowSameFolder": false
+      }
+    ],
+    "@typescript-eslint/no-floating-promises": "error",
+    "require-await": "error",
+    "react-hooks/exhaustive-deps": "error",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        "trailingComma": "es5",
+        "tabWidth": 2,
+        "semi": false,
+        "singleQuote": true,
+        "endOfLine": "auto"
+      }
+    ],
+    "sort-imports-es6-autofix/sort-imports-es6": [
+      2,
+      {
+        "ignoreCase": false,
+        "ignoreMemberSort": false,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
+      }
+    ],
+    "import/prefer-default-export": "error"
+  }
+}

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: backmeupplz

.github/pull_request_template.md

@@ -0,0 +1,3 @@
+- Explain what this PR changes
+- in one or more
+- bullet points

.github/workflows/deployflow.yml

@@ -0,0 +1,37 @@
+name: Build and deploy app
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build-and-deploy-app:
+    permissions:
+      pages: write
+      id-token: write
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    env:
+      NODE_OPTIONS: '--max_old_space_size=4096'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+      - uses: c-hive/gha-yarn-cache@v2
+      - name: Install modules
+        run: yarn
+        shell: bash
+      - name: Build code
+        run: yarn build
+        shell: bash
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: 'dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/workflows.yml

@@ -0,0 +1,9 @@
+name: Build and lint code
+on:
+  pull_request:
+    types: [synchronize, opened]
+jobs:
+  build-and-lint-code:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: Borodutch/build-and-lint-code@v1.0.3

.gitignore

@@ -0,0 +1,31 @@
+.DS_Store
+node_modules
+dist
+stats.html
+
+# local env files
+.env
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss",
+    "naumovs.color-highlight",
+    "oderwat.indent-rainbow"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
+  "eslint.enable": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  }
+}

.yarn/plugins/yarn-up-all-plugin.cjs

@@ -0,0 +1 @@
+module.exports={name:"yarn-up-all-plugin",factory:a=>{const{Configuration:b,Project:c}=a("@yarnpkg/core"),{Cli:d,Command:e,Option:f}=a("clipanion"),g=a("@yarnpkg/plugin-essentials"),h=a("typanion"),i=(a,b)=>a?`@${a}/${b}`:b,j=(a,b)=>{const c=[...a.values()];return b?c.filter(a=>{const c=i(a[1].scope,a[1].name);return!b.includes(c)}):c};class k extends e{constructor(){super(),this.exclude=f.String("-e,--exclude",{validator:h.isString()})}async execute(){if(!g.default.commands)throw new Error("Yarn commands are not available!");const a=await b.find(this.context.cwd,this.context.plugins),{workspace:e}=await c.find(a,this.context.cwd),f=[...e.manifest.dependencies,...e.manifest.devDependencies],h=j(f,this.exclude?this.exclude.split(" "):null),k=h.map(a=>i(a[1].scope,a[1].name)),l=d.from(g.default.commands);return l.runExit(["up",...k],this.context)}}return k.paths=[["up-all"]],k.usage={category:"Utilities",description:"Yarn 2 plugin that will upgrade all dependencies to their latest version with one simple command",details:"This command will upgrade all dependencies to their latest version. You can exclude certain dependencies from being upgraded by using the `-e,--exclude` option.",examples:[["Upgrade all dependencies","yarn up-all"],["Upgrade all dependencies but exclude a single dependency","yarn up-all --exclude package"],["Upgrade all dependencies but exclude a single dependency","yarn up-all -e package"],["Upgrade all dependencies but exclude multiple dependencies","yarn up-all --exclude \"package1 package2\""]]},{commands:[k]}}};

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/yarn-up-all-plugin.cjs
+    spec: "https://github.com/e5mode/yarn-up-all/releases/download/1.1.0/index.js"
+
+yarnPath: .yarn/releases/yarn-3.6.2.cjs

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Borodutch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,21 @@
+# Frontend code template in `preact`
+
+This template is to be used for frontend applications.
+
+## Features
+
+- State management with `jotai`
+- Around 13.53kb after brotli compression (this includes **everything**) 😱
+- `preact` under the hood with `preact/compat` makes it compatible with virtually any `react` library but still makes it faster
+- Full TypeScript support — no dangling types
+- `vite` packager and devtools make building and development lightning fast
+- `tailwind-css` built-in with 'daisyui'
+- GitHub Actions that lint and check the code on pull requests
+- `prettier` and `eslint` configured, enabled and formatting your code on save
+- List of recommended extensions for VSCode
+- It is important to keep the bundle small, so a `stats.html` file is generated on `yarn build` to visually show you the bundle size
+
+## Local launch
+
+1. Install dependencies with `yarn`
+2. Run the server with `yarn start`

index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Frontend starter preact</title>
+    <meta name="description" content="Frontend starter example" />
+  </head>
+  <body>
+    <noscript>Please, turn on JavaScript to see this page.</noscript>
+    <div id="root" />
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "frontend-starter",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "vite",
+    "build": "cross-env NODE_ENV=production tsc && vite build",
+    "pretty": "prettier --check src",
+    "lint": "yarn pretty && eslint --max-warnings 0 --ext ts,tsx,json src",
+    "preview": "yarn build && yarn vite preview"
+  },
+  "dependencies": {
+    "jotai": "^2.3.1",
+    "preact": "^10.17.1"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.5.0",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/node": "^20.5.1",
+    "@typescript-eslint/eslint-plugin": "^6.4.1",
+    "@typescript-eslint/parser": "^6.4.1",
+    "@vitejs/plugin-react": "^4.0.4",
+    "autoprefixer": "^10.4.15",
+    "cross-env": "^7.0.3",
+    "daisyui": "^3.5.1",
+    "eslint": "^8.47.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-no-relative-import-paths": "^1.5.2",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
+    "postcss": "^8.4.28",
+    "prettier": "^3.0.2",
+    "react-scripts": "^5.0.1",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "packageManager": "yarn@3.6.2"
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/CNAME

@@ -0,0 +1 @@
+google.com

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/App.tsx

@@ -0,0 +1,13 @@
+import { Suspense } from 'preact/compat'
+import UserCount from 'components/UserCount'
+
+export default function () {
+  return (
+    <div className="container mx-auto max-w-prose p-10 prose">
+      <h1>Frontend template</h1>
+      <Suspense fallback={<p>Loading...</p>}>
+        <UserCount />
+      </Suspense>
+    </div>
+  )
+}

src/atoms/userCount.ts

@@ -0,0 +1,4 @@
+import { atom } from 'jotai'
+import getUserCount from 'helpers/getUserCount'
+
+export default atom(getUserCount())

src/components/UserCount.tsx

@@ -0,0 +1,8 @@
+import { useAtom } from 'jotai'
+import formatNumber from 'helpers/formatNumber'
+import userCount from 'atoms/userCount'
+
+export default function () {
+  const [fetchedUserCount] = useAtom(userCount)
+  return <p>User count: {formatNumber(fetchedUserCount)}</p>
+}

src/helpers/formatNumber.ts

@@ -0,0 +1,3 @@
+export default function (n: number) {
+  return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+}

src/helpers/getUserCount.ts

@@ -0,0 +1,4 @@
+export default async function () {
+  const data = await (await fetch('https://stats.borodutch.com/count')).json()
+  return data.count as number
+}

src/index.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/index.tsx

@@ -0,0 +1,5 @@
+import 'index.css'
+import { render } from 'preact'
+import App from 'App'
+
+render(<App />, document.getElementById('root') as Element)

src/models/ChildrenProp.ts

@@ -0,0 +1,5 @@
+import { ComponentChildren } from 'preact'
+
+export default interface ChildrenProp {
+  children: ComponentChildren
+}

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

tailwind.config.js

@@ -0,0 +1,5 @@
+/** @type {import("@types/tailwindcss/tailwind-config").TailwindConfig } */
+module.exports = {
+  content: ['./index.html', './src/**/!(tailwind).{ts,tsx}'],
+  plugins: [require('@tailwindcss/typography'), require('daisyui')],
+}