add javascript vite boilerplate

hal9ai · Jun 20, 2024 · c98e0a6 · c98e0a6
1 parent eaf8386
commit c98e0a6
Show file tree

Hide file tree

Showing 15 changed files with 2,008 additions and 0 deletions.
diff --git a/.github/workflows/javascript.yaml b/.github/workflows/javascript.yaml
@@ -0,0 +1,31 @@
+name: JavaScript
+
+on:
+  push:
+    paths:
+      - javascript/**
+      - .github/workflows/javascript.yaml
+
+jobs:
+  docs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Deploy Prepare
+        run: |
+          echo "SHORT_SHA=`echo ${GITHUB_SHA} | cut -c1-8`" >> $GITHUB_ENV
+          echo "DEPLOY_URL=javascript" >> $GITHUB_ENV
+      - name: Deploy Commit
+        run: |
+          echo "SHORT_SHA=${SHORT_SHA}"
+          echo "DEPLOY_URL=commits/${SHORT_SHA}/javascript" >> $GITHUB_ENV
+        if: github.ref != 'refs/heads/main'
+      - name: Deploy URL
+        run: echo "DEPLOY_URL=${DEPLOY_URL}"
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '15.x'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@hal9ai'
+      - run: yarn install
+        working-directory: ./javascript
diff --git a/javascript/.gitignore b/javascript/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+dist/
+node_modules/
+thumbs.db
+.idea/
diff --git a/javascript/README.md b/javascript/README.md
@@ -0,0 +1,13 @@
+# Development
+
+Local setup
+
+```
+yarn clean && yarn install
+```
+
+Live development
+
+```
+yarn dev
+```
diff --git a/javascript/index.html b/javascript/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Hal9: Effortlessly create AI coworkers</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/javascript/package.json b/javascript/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "hal9landing",
+  "version": "0.0.16",
+  "scripts": {
+    "clean": "rm -rf node_modules",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^2.7.14"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.50.0",
+    "postcss": "^8.4.30",
+    "postcss-extend-rule": "^4.0.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-css-order": "^2.0.0",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "rollup-plugin-copy": "^3.5.0",
+    "sass": "^1.70.0",
+    "tailwindcss": "^3.3.3",
+    "terser": "^5.20.0",
+    "vite": "^4.4.9",
+    "vite-plugin-environment": "^1.1.3"
+  }
+}
diff --git a/javascript/postcss.config.js b/javascript/postcss.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-extend-rule': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/javascript/prettier.config.js b/javascript/prettier.config.js
@@ -0,0 +1,9 @@
+const hal9PrettierConfig = require('../.prettierrc.json');
+
+module.exports = {
+  ...hal9PrettierConfig,
+  plugins: [
+    require.resolve('prettier-plugin-css-order'),
+    require.resolve('prettier-plugin-tailwindcss'),
+  ],
+};
diff --git a/javascript/public/fonts/SpaceGrotesk-Variable.woff2 b/javascript/public/fonts/SpaceGrotesk-Variable.woff2
diff --git a/javascript/public/fonts/Supreme-Variable.woff2 b/javascript/public/fonts/Supreme-Variable.woff2
diff --git a/javascript/src/app.vue b/javascript/src/app.vue
@@ -0,0 +1,32 @@
+<template>
+  <div :class="{ dark: dark }">
+    Hello World
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'App',
+    components: {
+    },
+    data() {
+      return {
+      };
+    },
+    computed: {
+    },
+    created() {
+    },
+    async mounted() {
+    },
+    beforeDestroy() {
+    },
+    methods: {
+    },
+    watch: {
+    },
+  };
+</script>
+
+<style lang="postcss" scoped>
+</style>
diff --git a/javascript/src/main.js b/javascript/src/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import app from './app.vue';
+import './styles/main.css';
+
+(async function () {
+  const vue = new Vue({
+    el: '#app',
+    render: (h) => h(app),
+  });
+})();
diff --git a/javascript/src/styles/main.css b/javascript/src/styles/main.css
@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @font-face {
+    font-style: normal;
+    font-weight: 100 900;
+    src: url(/fonts/Supreme-Variable.woff2) format('woff2-variations');
+    font-family: 'Supreme';
+  }
+  @font-face {
+    font-style: normal;
+    font-weight: 100 900;
+    src: url(/fonts/SpaceGrotesk-Variable.woff2) format('woff2-variations');
+    font-family: 'SpaceGrotesk';
+  }
+  h1 {
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 1.5;
+    font-family: 'SpaceGrotesk';
+
+    @media screen(lg) {
+      font-size: 64px;
+      line-height: 1.25;
+    }
+  }
+  h2 {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 1.276;
+    font-family: 'SpaceGrotesk';
+
+    @media screen(lg) {
+      font-size: 36px;
+    }
+  }
+  h3 {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 1.276;
+    font-family: 'SpaceGrotesk';
+    letter-spacing: 0.1em;
+
+    @media screen(lg) {
+      font-size: 24px;
+    }
+  }
+}
+
+@layer components {
+  /* Note: anything you might want to @apply elsewhere should be defined as a plugin in tailwind.config.js,
+           as explained here: https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css */
+}
diff --git a/javascript/tailwind.config.js b/javascript/tailwind.config.js
@@ -0,0 +1,24 @@
+/** @type {import('tailwindcss').Config} */
+
+const defaultTheme = require('tailwindcss/defaultTheme');
+const plugin = require('tailwindcss/plugin');
+
+module.exports = {
+  darkMode: 'class',
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Supreme', ...defaultTheme.fontFamily.sans],
+        sg: ['SpaceGrotesk', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    plugin(function ({ addComponents }) {
+    }),
+  ],
+};
diff --git a/javascript/vite.config.js b/javascript/vite.config.js
@@ -0,0 +1,54 @@
+import { fileURLToPath, URL } from 'node:url';
+
+import { defineConfig } from 'vite';
+import EnvironmentPlugin from 'vite-plugin-environment';
+import vue2 from '@vitejs/plugin-vue2';
+import packageFile from './package.json';
+import copy from 'rollup-plugin-copy';
+
+console.log('vite.config.js environment: ' + process.env.HAL9_ENV);
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  clearScreen: false,
+  plugins: [
+    EnvironmentPlugin({ HAL9_ENV: null }),
+    vue2({
+      template: {
+        transformAssetUrls: {
+          // these are in addition to the defaults listed here: https://github.com/vitejs/vite-plugin-vue2#asset-url-handling
+          object: ['data'],
+        },
+      },
+    }),
+    copy({
+      targets: [{ src: 'dist/index.html', dest: 'dist', rename: 'for.html' }],
+      hook: 'writeBundle',
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  server: {
+    port: 8090,
+    host: true,
+    // open: '/index.html'
+  },
+  preview: {
+    port: 8090,
+    // 'host' and 'open' pulled from 'server' config by default
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        app: './index.html',
+      },
+    },
+  },
+  define: {
+    VERSION: JSON.stringify(packageFile.version),
+    HAL9ENV: JSON.stringify(process.env.HAL9_ENV ? process.env.HAL9_ENV : 'local'),
+  },
+});