Implements RFC9535

.devcontainer/devcontainer.json

@@ -1,32 +1,19 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
-// https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/typescript-node
 {
-	"name": "Node.js & TypeScript",
-	"build": {
-		"dockerfile": "Dockerfile.dev",
-		// Update 'VARIANT' to pick a Node version: 16, 14, 12.
-		// Append -bullseye or -buster to pin to an OS version.
-		// Use -bullseye variants on local on arm64/Apple Silicon.
-		"args": { 
-			"VARIANT": "16-bullseye"
-		}
-	},
-
-	// Set *default* container specific settings.json values on container create.
-	"settings": {},
-
-
-	// Add the IDs of extensions you want installed when the container is created.
-	"extensions": [
-		"dbaeumer.vscode-eslint"
-	],
-
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
-
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "npm install",
-
-	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "node"
+  "name": "Node.js & TypeScript",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+  "postCreateCommand": "npm install",
+  "postStartCommand": "npm run dev -- --host",
+  "remoteUser": "node",
+  "forwardPorts": [5173],
+  "customizations": {
+    "vscode": {
+      "extentions": [
+        "dbaeumer.vscode-eslint",
+        "bradlc.vscode-tailwindcss",
+        "esbenp.prettier-vscode",
+        "dsznajder.es7-react-js-snippets",
+        "formulahendry.auto-close-tag"
+      ]
+    }
+  }
 }

.github/workflows/ci.yml

@@ -6,18 +6,17 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout code
+        uses: actions/checkout@v4
+
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: 20
       - run: npm ci
 
       - name: Run ESLint
         run: npm run lint
 
-      - name: Run Test
-        run: npm run test
-
       - name: Run Build
         run: npm run build

.github/workflows/release.yml

@@ -3,66 +3,61 @@ name: Create release
 on:
   push:
     tags:
-      - 'v*'
+      - "v*"
 
 jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: 20
 
       - run: npm ci
       - run: npm run build
-        env:
-          GENERATE_SOURCEMAP: falsa
+
       - name: Archive assets
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
-          name: build
-          path: build
+          name: dist
+          path: dist
           retention-days: 1
 
   create_realease:
     name: Create Release
     needs: build
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
     steps:
       - name: Download assets
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v4
         with:
-          name: build
+          name: dist
 
       - name: Compress aseets
         run: zip -r jsonpath-online-evaluator.zip .
 
-      - name: Create Release
-        id: create_release
-        uses: actions/create-release@v1
+      - name: "Build Changelog"
+        id: build_changelog
+        uses: mikepenz/release-changelog-builder-action@v5
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create Release
+        id: create_release
+        uses: softprops/action-gh-release@v2
         with:
-          tag_name: ${{ github.ref }}
-          release_name: Release ${{ github.ref }}
+          files: jsonpath-online-evaluator.zip
+          body: ${{ steps.build_changelog.outputs.changelog }}
           draft: false
           prerelease: false
 
-      - name: Upload Release Asset
-        uses: actions/upload-release-asset@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: ${{ steps.create_release.outputs.upload_url }}
-          asset_path: jsonpath-online-evaluator.zip
-          asset_name: jsonpath-online-evaluator.zip
-          asset_content_type: application/zip
-
   publish_to_s3:
     name: Upload to Amazon S3
     needs: build
@@ -72,12 +67,12 @@ jobs:
       contents: read
     steps:
       - name: Download assets
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v4
         with:
-          name: build
+          name: dist
 
       - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v1
+        uses: aws-actions/configure-aws-credentials@v4
         with:
           role-to-assume: arn:aws:iam::285224135196:role/jsonpath-deploy
           aws-region: us-west-2
@@ -92,22 +87,22 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Log in to Docker Hub
-        uses: docker/login-action@v1.12.0
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v3.6.2
+        uses: docker/metadata-action@v5
         with:
           images: ashphy/jsonpath-online-evaluator
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@v2.9.0
+        uses: docker/build-push-action@v6
         with:
           context: .
           push: true

.gitignore

@@ -4,3 +4,4 @@ build
 .sass-cache
 .idea
 npm-debug.log
+dist

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode",
+    "dsznajder.es7-react-js-snippets"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

Dockerfile

@@ -1,11 +1,11 @@
 # Building pages
-FROM node:16-alpine as webpack
+FROM node:22-bullseye-slim AS webpack
 WORKDIR /app
 COPY . /app
 
 RUN npm install
 RUN npm run build
 
 # Serve the static files
-FROM nginx:1.21.0-alpine
-COPY --from=webpack /app/build /usr/share/nginx/html
+FROM nginx:1.27.3-bookworm
+COPY --from=webpack /app/dist /usr/share/nginx/html

README.md

@@ -1,29 +1,33 @@
-# JSONPath Online Evaluator [![CI](https://github.com/ashphy/jsonpath-online-evaluator/actions/workflows/ci.yml/badge.svg)](https://github.com/ashphy/jsonpath-online-evaluator/actions/workflows/ci.yml)
+# JSONPath Online Evaluator [![CI](https://github.com/ashphy/jsonpath-online-evaluator/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/ashphy/jsonpath-online-evaluator/actions/workflows/ci.yml)
 A playground for [JSONPath](http://goessner.net/articles/JsonPath/)
 
 ## Requirements
 - node.js
 
-## Build on your environment
-Artifacts placed under the `build`.
+## Private Hosting
 
-```
-  $ npm install
-  $ npm start # Starting the dev server
-  $ npm run build # Building the static files
-```
+### Hosting static files
+
+Download at [releases](https://github.com/ashphy/jsonpath-online-evaluator/releases).
 
-## Run on docker
+### Run on docker
 
 [Public docker image](https://hub.docker.com/r/ashphy/jsonpath-online-evaluator) is available
 
 ```bash
  $ docker run -d -p 8080:80 ashphy/jsonpath-online-evaluator:latest
 ```
 
-## Hosting static files
+## Development
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/ashphy/jsonpath-online-evaluator)
 
-Download at [releases](https://github.com/ashphy/jsonpath-online-evaluator/releases).
+or on your local machine
+
+```
+  $ npm install
+  $ npm run dev # Starting the dev server
+  $ npm run build # Building the static files
+```
 
 ## Contributing
 

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist', 'src/lib/json-parser'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JSONPath Online Evaluator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+
+    <!-- Google Analytics -->
+    <script>
+      (function (i, s, o, g, r, a, m) {
+        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
+          (i[r].q = i[r].q || []).push(arguments)
+        }, i[r].l = 1 * new Date(); a = s.createElement(o),
+          m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
+      })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
+      ga('create', 'UA-18179123-4', 'auto');
+      ga('send', 'pageview');
+    </script>
+  </body>
+</html>