Merge pull request #37 from Simple2B/kipod/fix/js_css_build

Kipod/fix/js_css_build

.dockerignore

@@ -15,8 +15,5 @@ README.md
 TODO.md
 **/.venv
 /tests/
-/src/
 **/*.sqlite3
-**/package.json
 **/tox.ini
-**/yarn.lock

.github/workflows/python-app.yml

@@ -64,3 +64,16 @@ jobs:
         with:
           push: true
           tags: simple2b/open-law-dev:latest
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.SSH_HOST_IP_PROD }}
+          username: ${{ secrets.SSH_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          script: |
+            sudo su -l runner -c "cd open-law; ./up.sh"

.gitignore

@@ -9,4 +9,8 @@ node_modules/
 .env
 *.pyc
 /*.sqlite3
+
+# typescrypt generated files
+/app/static/js/*.d.ts
+
 .DS_Store

Dockerfile

@@ -1,3 +1,17 @@
+##########################################
+## build frontend
+##########################################
+FROM node:buster as front_build
+# FROM node as front_build
+RUN mkdir /front
+WORKDIR /front
+COPY . /front/
+RUN yarn
+RUN npx update-browserslist-db@latest -y
+RUN yarn css
+RUN yarn js
+
+
 FROM python:3.11-alpine
 
 # install build utils and dependencies
@@ -36,3 +50,4 @@ RUN poetry install --no-dev --no-interaction --no-ansi
 RUN poetry add gunicorn
 
 COPY --chown=app:app . .
+COPY --chown=app:app --from=front_build /front/app/static ./app/static

app/static/js/books.d.ts

@@ -1 +0,0 @@
-export declare function initBooks(): void;

app/static/js/contributors.d.ts

@@ -1 +0,0 @@
-export declare function initContributors(): void;

app/static/js/initQuill.d.ts

@@ -1 +0,0 @@
-export declare function initQuill(): void;

app/static/js/main.d.ts

@@ -1 +0,0 @@
-import './styles.css';

app/static/js/main.js.LICENSE.txt

@@ -0,0 +1,15 @@
+/*!
+ * Quill Editor v1.3.6
+ * https://quilljs.com/
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+
+/**
+ * [js-sha3]{@link https://github.com/emn178/js-sha3}
+ *
+ * @version 0.8.0
+ * @author Chen, Yi-Cyuan [emn178@gmail.com]
+ * @copyright Chen, Yi-Cyuan 2015-2018
+ * @license MIT
+ */

app/static/js/quillValueToInput.d.ts

@@ -1 +0,0 @@
-export declare function initQuillValueToInput(): void;

app/static/js/quill_value_to_textarea.d.ts

@@ -1 +0,0 @@
-export declare function initQuillValueToTextArea(): void;

app/static/js/src/contributors.d.ts

@@ -1 +0,0 @@
-export declare function initContributors(): void;

app/static/js/src/initQuill.d.ts

@@ -1 +0,0 @@
-export declare function initQuill(): void;

app/static/js/src/main.d.ts

@@ -1 +0,0 @@
-import './styles.css';

app/static/js/src/quill.d.ts

@@ -1 +0,0 @@
-export declare function initQuill(): void;

app/static/js/src/quill_value_to_textarea.d.ts

@@ -1 +0,0 @@
-export declare function initQuillValueToTextArea(): void;

app/static/js/user.d.ts

@@ -1 +0,0 @@
-export declare function initUsers(): void;

app/static/js/wallet.d.ts

@@ -1 +0,0 @@
-export declare function initWallet(): void;

app/templates/base.html

@@ -12,7 +12,7 @@
 
     <!-- styles -->
     <!-- prettier-ignore -->
-    <script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript"></script>
+    <link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" />
     <!-- prettier-ignore -->
     <link href="{{ url_for('static', filename='css/quill.snow.css') }}" rel="stylesheet" />
 
@@ -84,7 +84,7 @@
     {% include 'book/add_book_modal.html' %}
 
     <!-- prettier-ignore -->
-    <script src="{{ url_for('static', filename='js/flowbite.min.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript" defer></script>
 
     <div class="p-0 mt-16 h-auto md:ml-64">
       <!-- Main Content -->
@@ -92,7 +92,6 @@
     </div>
     {% endblock %}
     <!-- scripts -->
-
     {% block scripts %} {% endblock %}
   </body>
 </html>

package.json

@@ -5,16 +5,18 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "watch": "webpack --watch",
-    "build": "webpack"
+    "js-watch": "webpack --config webpack.dev.js --watch",
+    "js": "webpack --config webpack.prod.js",
+    "css": "tailwindcss -i ./src/styles.css -o ./app/static/css/styles.css --minify",
+    "css-watch": "tailwindcss -i ./src/styles.css -o ./app/static/css/styles.css --watch"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "flowbite": "^1.6.4",
-    "tailwindcss": "^3.2.7",
     "ethers": "5.5.3",
-    "siwe": "1.0.0"
+    "flowbite": "^1.6.4",
+    "siwe": "1.0.0",
+    "tailwindcss": "^3.2.7"
   },
   "devDependencies": {
     "css-loader": "^6.7.3",
@@ -26,6 +28,7 @@
     "typescript": "^5.0.4",
     "webpack": "^5.79.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.13.2"
+    "webpack-dev-server": "^4.13.2",
+    "webpack-merge": "^5.8.0"
   }
 }

src/main.ts

@@ -1,4 +1,3 @@
-import './styles.css';
 import {initBooks} from './books';
 import {initContributors} from './contributors';
 import {initWallet} from './wallet';
@@ -6,11 +5,9 @@ import {initQuill} from './initQuill';
 import {initQuillValueToInput} from './quillValueToInput';
 import {initComments} from './comment';
 
-document.addEventListener('DOMContentLoaded', () => {
 initBooks();
 initContributors();
 initQuill();
 initQuillValueToInput();
 initWallet();
 initComments();
-});

tox.ini

@@ -3,4 +3,4 @@
 max-line-length = 120
 ;exclude = tests/*
 ;max-complexity = 10
-exclude = .git,__pycache__,.venv/,migrations/,node_modules
+exclude = .git,__pycache__,.venv/,migrations/,node_modules/

webpack.config.js

@@ -1,29 +1,22 @@
 //webpack.config.js
-const path = require("path");
+const path = require('path');
 
 module.exports = {
-  mode: "development",
-  devtool: "inline-source-map",
   entry: {
-    main: "./src/main.ts",
+    main: './src/main.ts',
   },
   output: {
-    path: path.resolve(__dirname, "./app/static/js"),
-    filename: "main.js", // <--- Will be compiled to this single file
+    path: path.resolve(__dirname, './app/static'),
+    filename: 'js/main.js', // <--- Will be compiled to this single file
   },
   resolve: {
-    extensions: [".ts", ".tsx", ".js"],
+    extensions: ['.ts', '.tsx', '.js'],
   },
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        loader: "ts-loader",
-      },
-      {
-        test: /\.css$/i,
-        include: path.resolve(__dirname, 'src'),
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
+        loader: 'ts-loader',
       },
     ],
   },

webpack.dev.js

@@ -0,0 +1,10 @@
+const {merge} = require('webpack-merge');
+const common = require('./webpack.config.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    static: './app/static/js',
+  },
+});

webpack.prod.js

@@ -0,0 +1,6 @@
+const {merge} = require('webpack-merge');
+const common = require('./webpack.config.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+});

yarn.lock

@@ -1566,9 +1566,9 @@ camelcase-css@^2.0.1:
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
-  version "1.0.30001480"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001480.tgz#9bbd35ee44c2480a1e3a3b9f4496f5066817164a"
-  integrity sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==
+  version "1.0.30001486"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz"
+  integrity sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==
 
 chalk@^2.0.0:
   version "2.4.2"
@@ -3951,7 +3951,7 @@ webpack-dev-server@^4.13.2:
     webpack-dev-middleware "^5.3.1"
     ws "^8.13.0"
 
-webpack-merge@^5.7.3:
+webpack-merge@^5.7.3, webpack-merge@^5.8.0:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
   integrity sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==