Next.js 13 (#38)

.editorconfig

@@ -6,6 +6,6 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js,ts,jsx,tsx,json}]
+[*.{yml,json,js,ts,tsx}]
 indent_style = space
 indent_size = 2

.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+out
+next.config.js
+postcss.config.js

.eslintrc.yml

@@ -0,0 +1,11 @@
+extends:
+  - plugin:@next/next/core-web-vitals
+  - xo
+  - xo-typescript
+  - xo-react
+  - plugin:react/jsx-runtime # Prevents "'React' must be in scope when using JSX" errors
+  - plugin:tailwindcss/recommended
+  - prettier
+
+rules:
+  tailwindcss/classnames-order: 'off' # Handled by "prettier-plugin-tailwindcss"

.github/dependabot.yml

@@ -2,11 +2,18 @@
 # package ecosystems to update and where the package manifests are located.
 # Please see the documentation for all configuration options:
 # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'monthly'
+    commit-message:
+      prefix: '[skip ci][skip deploy] npm'
+
+  - package-ecosystem: 'github-actions'
+    directory: '/'
     schedule:
-      interval: "monthly"
-    open-pull-requests-limit: 20
+      interval: 'monthly'
+    commit-message:
+      prefix: '[skip ci][skip deploy] github-actions'

.github/workflows/test.yml

@@ -0,0 +1,29 @@
+name: Test
+
+env:
+  NODE_VERSION: 18
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: Install dependencies
+        run: npm ci
+      - name: Test lint
+        run: npm run test:lint
+      - name: Test formatting
+        run: npm run test:format

.gitignore

@@ -5,6 +5,9 @@
 /.pnp
 .pnp.js
 
+# editors
+.vscode
+
 # testing
 /coverage
 
@@ -23,7 +26,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
 .env*.local
@@ -34,7 +36,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-# editors
-.idea
-.vscode

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+out

.prettierrc.yml

@@ -0,0 +1,10 @@
+plugins:
+  - prettier-plugin-tailwindcss
+
+# tabWidth: <inherited from .editorconfig>
+# useTabs: <inherited from .editorconfig>
+# endOfLine: <inherited from .editorconfig>
+semi: true
+singleQuote: true
+jsxSingleQuote: true
+bracketSpacing: false

DEVELOPMENT.md

@@ -0,0 +1,25 @@
+# Development
+
+The repository uses [Next.js](https://nextjs.org/) framework, so once you have some familiarity with it, it should be easy to work with this repository in general.
+
+## Quick start
+
+Switch to required Node.js version:
+
+```sh
+nvm use
+```
+
+Install Node.js modules:
+
+```sh
+npm ci
+```
+
+Start local development server:
+
+```sh
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in the browser.

README.md

@@ -3,35 +3,23 @@
 Visualization of how Web Audio API's `AudioParam` value changes over time
 
 ## See LIVE
+
 ### ➡ https://audioparam-visualization.vercel.app
 
-<img src="./public/waveform-1.png" width="400"/>
+<img src="./docs/waveform-1.png" width="400"/>
 
-<img src="./public/waveform-2.png" width="400"/>
+<img src="./docs/waveform-2.png" width="400"/>
 
-<img src="./public/waveform-3.png" width="400"/>
+<img src="./docs/waveform-3.png" width="400"/>
 
-<img src="./public/waveform-4.png" width="400"/>
+<img src="./docs/waveform-4.png" width="400"/>
 
-<img src="./public/waveform-5.png" width="400"/>
+<img src="./docs/waveform-5.png" width="400"/>
 
-<img src="./public/waveform-6.png" width="400"/>
+<img src="./docs/waveform-6.png" width="400"/>
 
-<img src="./public/waveform-7.png" width="400"/>
+<img src="./docs/waveform-7.png" width="400"/>
 
 ## Development
 
-(1) Install Node.js dependencies
-
-```sh
-nvm use
-npm install
-```
-
-(2) Run the development server:
-
-```bash
-npm run dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) in browser.
+See [DEVELOPMENT](./DEVELOPMENT.md) guide.

next.config.js

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