Github pages setup

.github/workflows/vite-gh-pages.yml

@@ -0,0 +1,52 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+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 the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+          cache-dependency-path: ./Web/package-lock.json
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload dist repository
+          path: './dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -0,0 +1 @@
+/dist

README.md

@@ -0,0 +1,10 @@
+# Micrio templates
+
+## Frameworks
+- [Svelte](client/5.0/svelte/README.md)
+- [React](client/5.0/react/README.md)
+- Vue (coming soon)
+
+## External links
+- [Micrio website](https://micr.io)
+- [Micrio API documentation](https://micr.io/docs/api)

client/5.0/react/README.md

@@ -1,50 +1,18 @@
-# React + TypeScript + Vite
+# Micrio ⨯ React
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Examples
+- [Demo](#demo)
 
-Currently, two official plugins are available:
+### Demo
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+This is a simple example of how to place a Micrio element within React.
 
-## Expanding the ESLint configuration
+[View demo](https://q42.github.io/Micrio.Templates/client/5.0/react#demo) | [View source](src/examples/demo)
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Development
 
-- Configure the top-level `parserOptions` property like this:
+Once you've installed dependencies with `npm install`, start a development server:
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+```bash
+npm run dev
 ```

client/5.0/react/package.json

@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@types/node": "^22.7.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

client/5.0/react/src/routes/root.tsx → client/5.0/react/src/examples/demo/demo.tsx

@@ -1,6 +1,6 @@
-import './root.css'
+import './demo.css'
 
-function Root() {
+function Demo() {
     return (
         <>
             <micr-io id="HRpbsC" data-logo="false" data-inittype="cover"></micr-io>
@@ -13,4 +13,4 @@ function Root() {
     )
 }
 
-export default Root
+export default Demo

client/5.0/react/src/index.css

@@ -1,5 +1 @@
-body, html {
-    background: #111;
-    margin: 0;
-    color: #fff;
-}
+@import "shared/shared.css";

client/5.0/react/src/index.tsx

@@ -0,0 +1,22 @@
+import {Link} from "react-router-dom";
+
+function Root() {
+    const githubRoot = 'https://github.com/Q42/Micrio.Templates/tree/main/client/5.0/react';
+
+    return (
+        <>
+            <main className="grid">
+                <div className="col-12">
+                    <h1>React examples</h1>
+
+                    <h2>Demo</h2>
+                    <span>
+                        <Link to="/demo">View demo</Link> | <a href={githubRoot + "/src/examples/demo"}>View source</a>
+                    </span>
+                </div>
+            </main>
+        </>
+    )
+}
+
+export default Root

client/5.0/react/src/main.tsx

@@ -1,13 +1,23 @@
 import {StrictMode} from 'react'
 import {createRoot} from 'react-dom/client'
-import {createBrowserRouter, RouterProvider} from 'react-router-dom';
+import {createHashRouter, RouterProvider} from 'react-router-dom';
 import './index.css'
-import Root from "./routes/root.tsx";
+import Index from "./index.tsx";
+import Demo from "./examples/demo/demo.tsx";
 
-const router = createBrowserRouter([
+const router = createHashRouter([
     {
         path: "/",
-        element: <Root/>,
+        children: [
+            {
+                index: true,
+                element: <Index/>,
+            },
+            {
+                path: "demo",
+                element: <Demo/>,
+            },
+        ]
     },
 ]);
 

client/5.0/react/vite.config.ts

@@ -1,7 +1,18 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'node:path'
+
+const rootDir = path.resolve(__dirname, '../../../');
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      'shared': path.resolve(rootDir, './shared'),
+    }
+  },
+  build: {
+    outDir: path.resolve(rootDir, './dist/client/5.0/react'),
+  }
 })

client/5.0/svelte/README.md

@@ -1,20 +1,15 @@
-# create-svelte
+# Micrio ⨯ Svelte
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+## Examples
+- [Demo](#demo)
 
-## Creating a project
+### Demo
 
-If you're seeing this, you've probably already done this step. Congrats!
+This is a simple example of how to place a Micrio element within Svelte.
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
+[View demo](https://q42.github.io/Micrio.Templates/client/5.0/svelte/demo) | [View source](src/routes/demo)
 
-## Developing
+## Development
 
 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
@@ -24,15 +19,3 @@ npm run dev
 # or start the server and open the app in a new browser tab
 npm run dev -- --open
 ```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

client/5.0/svelte/package.json

@@ -11,8 +11,10 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.5",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/node": "^22.7.4",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"typescript": "^5.0.0",