Merge pull request #2 from enso-org/vue

VueJS SPA

.github/workflows/gh-pages.yml

@@ -0,0 +1,57 @@
+name: Generate and deploy GH pages from Vue
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    name: Generate dist directory and build with Jekyll
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - name: Install dependencies
+        run: npm install
+      - name: Build dist
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./dist
+          destination: ./_site
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "plugins": ["prettier-plugin-organize-imports"],
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "all",
+  "organizeImportsSkipDestructiveCodeActions": true,
+  "experimentalTernaries": true
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

README.md

@@ -1,7 +1,9 @@
 # Stdlib and Engine benchmark results
 This repository hosts results from benchmarks from the [enso repo](https://github.com/enso-org/enso).
 This repo has GH pages enabled and hosts them at [https://enso-org.github.io/engine-benchmark-results/](https://enso-org.github.io/engine-benchmark-results/).
+It is a VueJS single-page-application.
 
+## Data
 The benchmarks are scheduled in [Benchmark Engine](https://github.com/enso-org/enso/actions/workflows/engine-benchmark.yml)
 and [Benchmark Standard Libraries](https://github.com/enso-org/enso/actions/workflows/std-libs-benchmark.yml) GH Actions.
 The results from these actions are gathered by another GH Action [Benchmarks Upload](https://github.com/enso-org/enso/actions/workflows/bench-upload.yml)
@@ -11,7 +13,33 @@ There is a special `cache/index.json` file that maps json file names to their ti
 
 The `Benchmarks Upload` actions the runs [website_regen.py](https://github.com/enso-org/enso/blob/develop/tools/performance/engine-benchmarks/website_regen.py) script.
 
-For more info, see:
+## Contributing
+Run the dev server with `npm install && npx vite`.
+
+
+### Building static sites from Vue
+Run `npm run build` to build the static site.
+The output will be in the `dist` directory.
+Run `npm run preview` to serve the `dist` directory.
+
+## Technology stack
+- [Vue-chartjs](https://vue-chartjs.org/)
+  - For plotting
+- [Pinia](https://pinia.vuejs.org/) 
+  - For global state management
+- [Vuetify](https://vuetifyjs.com/en/) 
+  - Material component library for Vue
+
+## References
 - [enso-org/enso:tools/performance/engine-benchmarks](https://github.com/enso-org/enso/blob/develop/tools/performance/engine-benchmarks/README.md)
-  - This is a directory with Python package that deals with benchmarks - regenerate HTML website, gather results from GH artifacts and upload them to this repo, etc.
+    - This is a directory with Python package that deals with benchmarks - regenerate HTML website, gather results from GH artifacts and upload them to this repo, etc.
 - [enso-org/enso:docs/infrastructure/benchmarks.md](https://github.com/enso-org/enso/blob/develop/docs/infrastructure/benchmarks.md#visualization)
+- https://mkay11.medium.com/how-to-deploy-your-vite-vue-3-application-in-github-pages-2023-2b842f50576a
+
+## Legacy static webpages
+The old static webpages are still generated inside `stdlib-benchs.html`
+and `engine-benchs.html` files and included in the deployed GH pages.
+They will be removed as soon as the data format is changed.
+Accessible via these URLs:
+- https://enso-org.github.io/engine-benchmark-results/stdlib-benchs.html
+- https://enso-org.github.io/engine-benchmark-results/engine-benchs.html

eslint.config.js

@@ -0,0 +1,30 @@
+import { FlatCompat } from '@eslint/eslintrc'
+import eslintJs from '@eslint/js'
+
+const compat = new FlatCompat()
+
+const conf = [
+  {
+    ignores: ['dist'],
+  },
+  ...compat.extends('plugin:vue/vue3-recommended'),
+  eslintJs.configs.recommended,
+  ...compat.extends('@vue/eslint-config-typescript', '@vue/eslint-config-prettier'),
+  {
+    rules: {
+      camelcase: [1, { ignoreImports: true }],
+      'no-inner-declarations': 0,
+      'vue/attribute-hyphenation': [2, 'never'],
+      'vue/v-on-event-hyphenation': [2, 'never'],
+      '@typescript-eslint/no-unused-vars': [
+        1,
+        {
+          varsIgnorePattern: '^_',
+          argsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+]
+
+export default conf

index.html

@@ -1,51 +1,12 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Engine and Standard libs benchmarks</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      font-size: 25px;
-      text-align: inherit;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      min-height: 100vh;
-      background-color: #f4f4f4;
-    }
-    .container {
-      width: 90%;
-      max-width: 1200px;
-      background-color: #fff;
-      padding: 40px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-    h1 {
-      text-align: center;
-      font-size: 2.5em;
-      color: #333;
-    }
-    ul {
-      list-style-type: none;
-    }
-    li {
-      padding-top: 10px;
-      padding-bottom: 10px;
-      text-align: center;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>Engine and Standard libs benchmarks</h1>
-    <ul>
-      <li><a href="engine-benchs.html">Engine Benchmarks</a></li>
-      <li><a href="stdlib-benchs.html">Stdlib Benchmarks</a></li>
-    </ul>
-  </div>
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Enso benchmark results</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>