feat: add demo and settings for github action.

a-rudenko · a-rudenko · commit 6d1c24a2bbd2 · 2025-01-26T18:04:59.000+03:00
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,31 @@
+name: Build and Deploy Demo
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build demo
+        run: npm run build:demo
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.ACTION }}
+          publish_dir: dist
diff --git a/README.md b/README.md
@@ -1,16 +1,16 @@
 <h1 align="center">WebGL Tech Particles</h1>
 
 <div align="center">
-  <a href="https://github.com/a-rudenko/webgl-tech-particles/blob/main/LICENSE" target="_blank" style="text-decoration: none;">
+  <a href="https://github.com/a-rudenko/webgl-tech-particles/blob/main/LICENSE">
     <img src="https://img.shields.io/github/license/a-rudenko/webgl-tech-particles" alt="GitHub license" >
   </a>
-  <a href="https://www.npmjs.com/package/webgl-tech-particles" target="_blank" style="text-decoration: none;">
+  <a href="https://www.npmjs.com/package/webgl-tech-particles">
     <img src="https://img.shields.io/npm/v/webgl-tech-particles" alt="Latest version">
   </a>
-  <a href="https://www.npmjs.com/package/webgl-tech-particles" target="_blank" style="text-decoration: none;">
+  <a href="https://www.npmjs.com/package/webgl-tech-particles">
     <img src="https://img.shields.io/bundlephobia/min/webgl-tech-particles" alt="Minified size">
   </a>
-  <a href="https://www.npmjs.com/package/webgl-tech-particles" target="_blank" style="text-decoration: none;">
+  <a href="https://www.npmjs.com/package/webgl-tech-particles">
     <img src="https://img.shields.io/npm/dw/webgl-tech-particles" alt="npm" >
   </a>
 </div>
@@ -21,6 +21,8 @@ This project is an interactive 3D visualization of technology icons (e.g., JavaS
 implemented with WebGL and Three.js. Particles representing different technologies move dynamically in a 3D space,
 connecting with each other based on customizable parameters.
 
+<a href="https://a-rudenko.github.io/webgl-tech-particles/demo.html">Live demo</a>
+
 <h2>Install</h2>
 
 Using npm:
@@ -83,9 +85,11 @@ You can also use this package directly in the browser via CDN without installing
 
 <h2>Settings</h2>
 
-Example with basic <a href="https://github.com/a-rudenko/webgl-tech-particles/blob/main/settings.json" target="_blank">
+Example with basic <a href="https://github.com/a-rudenko/webgl-tech-particles/blob/main/settings.json">
 settings</a>.
 
+<i>You can also export settings from the <a href="https://a-rudenko.github.io/webgl-tech-particles/demo.html">demo</a> version.</i>
+
 Below is a description of the settings.
 
 <h3>Particle Settings:</h3>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webgl-tech-particles",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Interactive 3D particle system with technology icons using WebGL",
   "main": "dist/webgl-tech-particles.js",
   "module": "dist/webgl-tech-particles.js",
@@ -10,6 +10,7 @@
   "scripts": {
     "start": "webpack serve",
     "build": "webpack --mode production",
+    "build:demo": "webpack --config webpack.demo.config.js --mode production",
     "prepare": "npm run build"
   },
   "keywords": [
diff --git a/src/demo/demo.html b/src/demo/demo.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>WebGL Tech Particles</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Interactive 3D particle system with technology icons using WebGL and Three.js">
+    <meta name="keywords" content="animation, javascript, geometric, particles, webgl, three.js, 3d, technologies">
+    <meta name="author" content="Aleksey Rudenko">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+<div id="tech-particles"></div>
+<script type="module">
+    import { initWebGLTechParticles } from './<%= htmlWebpackPlugin.files.js[0] %>';
+    initWebGLTechParticles('tech-particles');
+</script>
+</body>
+</html>
diff --git a/src/demo/favicon.ico b/src/demo/favicon.ico
diff --git a/src/texture.js b/src/texture.js
@@ -26,7 +26,7 @@ const DEFAULT_ICONS = [
     'open-ai.webp',
 ];
 
-const DEFAULT_ICON_FOLDER = './dist/assets/icons';
+const DEFAULT_ICON_FOLDER = ICON_FOLDER;
 
 const loadTexture = (textureLoader, path) => {
     return new Promise((resolve) => {
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const webpack = require('webpack');
 
 module.exports = {
     entry: './src/index.js',
@@ -55,5 +56,8 @@ module.exports = {
                 {from: 'src/assets/icons', to: 'assets/icons'},
             ],
         }),
+        new webpack.DefinePlugin({
+            ICON_FOLDER: JSON.stringify('./dist/assets/icons'),
+        }),
     ],
 };
diff --git a/webpack.demo.config.js b/webpack.demo.config.js
@@ -0,0 +1,64 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: './src/demo/demo.js',
+    mode: 'production',
+    output: {
+        filename: 'webgl-tech-particles.demo.js',
+        path: path.resolve(__dirname, 'dist'),
+        library: {
+            type: 'module',
+        },
+        clean: true,
+    },
+    experiments: {
+        outputModule: true,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-env'],
+                    },
+                },
+            },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader'],
+            },
+            {
+                test: /\.(png|jpg|gif|webp)$/,
+                type: 'asset/resource',
+                generator: {
+                    filename: 'assets/icons/[name][ext]',
+                },
+            },
+        ],
+    },
+    plugins: [
+        new CopyWebpackPlugin({
+            patterns: [
+                {from: 'settings.json', to: 'settings.json'},
+                {from: 'src/assets/icons', to: 'assets/icons'},
+                {from: 'src/demo/favicon.ico', to: 'favicon.ico'},
+            ],
+        }),
+        new HtmlWebpackPlugin({
+            template: 'src/demo/demo.html',
+            filename: 'demo.html',
+            title: 'WebGL Tech Particles Demo',
+            inject: true,
+            scriptLoading: 'module',
+        }),
+        new webpack.DefinePlugin({
+            ICON_FOLDER: JSON.stringify('./assets/icons'),
+        }),
+    ],
+};
