Add bundler

TristanWYL · Aug 6, 2022 · 9d74a0d · 9d74a0d
1 parent 3cbd194
commit 9d74a0d
Show file tree

Hide file tree

Showing 15 changed files with 249 additions and 26 deletions.
diff --git a/src/popup.html → index.html b/src/popup.html → index.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="styles.css" />
-    <script src="../node_modules/flowbite/dist/flowbite.js"></script>
+    <script type="module" src="node_modules/flowbite/dist/flowbite.js"></script>
   </head>
   <body>
     <div class="bg-gray-100 w-96 p-6 rounded-xl shadow-xl">
@@ -77,6 +76,6 @@ <h3 class="text-gray-500 text-sm">
         </div>
       </div>
     </div>
-    <script src="/src/popup.js"></script>
+    <script type="module" src="src/popup.js"></script>
   </body>
 </html>
diff --git a/manifest.json b/manifest.json
@@ -1,26 +1,26 @@
 {
   "name": "Handwritingfy",
-  "description": "Make the webpages appear in a handwritten style.",
+  "description": "Format the webpages in a handwritten style.",
   "version": "1.0",
   "manifest_version": 3,
   "permissions": [
     "storage",
     "scripting"
   ],
   "action": {
-    "default_popup": "/src/popup.html",
+    "default_popup": "index.html",
     "default_icon": {
-      "16": "/images/logo.png",
-      "32": "/images/logo.png",
-      "48": "/images/logo.png",
-      "128": "/images/logo.png"
+      "16": "logo.png",
+      "32": "logo.png",
+      "48": "logo.png",
+      "128": "logo.png"
     }
   },
   "icons": {
-    "16": "/images/logo.png",
-    "32": "/images/logo.png",
-    "48": "/images/logo.png",
-    "128": "/images/logo.png"
+    "16": "logo.png",
+    "32": "logo.png",
+    "48": "logo.png",
+    "128": "logo.png"
   },
   "content_scripts": [
     {
@@ -29,8 +29,7 @@
       ],
       "run_at": "document_end",
       "js": [
-        "/src/preLoad.js",
-        "/src/handwritingfy.js"
+        "handwritingfy.chrome.iife.js"
       ]
     }
   ]

diff --git a/package.json b/package.json
@@ -3,17 +3,29 @@
   "version": "1.0.0",
   "author": "Tristan",
   "license": "MIT",
+  "description": "A simple tool to make webpages seem handwritten!",
+  "keywords": [
+    "handwriting",
+    "handwritten",
+    "xkcd"
+  ],
   "type": "module",
   "scripts": {
-    "build-css": "tailwindcss -i ./src/styles.css -o ./dist/output.css --watch",
+    "build": "(rm -R ./dist/* || true) && yarn build-chrome-popup && yarn build-chrome-exec && yarn build-script && yarn copy",
+    "copy": "cp images/logo.png dist/logo.png && cp manifest.json dist/manifest.json",
+    "build-chrome-popup": "vite build --config vite.config.popup.js ",
+    "build-chrome-exec": "vite build --config vite.config.chrome.js",
+    "build-script": "vite build --config vite.config.script.js",
     "dev": "vite",
-    "build": "vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.2",
+    "autoprefixer": "^10.4.8",
+    "cross-env": "^7.0.3",
     "flowbite": "^1.5.1",
     "tailwindcss": "^3.1.7",
     "vite": "^3.0.0"
-  }
+  },
+  "dependencies": {}
 }
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/handwritingfy.js → src/handwritingfy.chrome.js b/src/handwritingfy.js → src/handwritingfy.chrome.js
@@ -1,3 +1,5 @@
+import { loadHeadLinks, applyFontForAll, handwritingfySVG } from './preLoad'
+
 loadHeadLinks()
 chrome.storage.sync.get(null, function ({ font, toggleTextStyle, toggleSvgStyle }) {
     if (toggleTextStyle ?? true) {

diff --git a/src/handwritingfy.script.js b/src/handwritingfy.script.js
@@ -0,0 +1,5 @@
+import { loadHeadLinks, applyFontForAll, handwritingfySVG } from './preLoad'
+
+loadHeadLinks()
+applyFontForAll('xkcd')
+handwritingfySVG()
diff --git a/src/styles.css → src/index.css b/src/styles.css → src/index.css
diff --git a/src/popup.js b/src/popup.js
@@ -1,4 +1,5 @@
 import { availableFontFamilies, loadHeadLinks } from './preLoad'
+import './index.css'
 
 loadHeadLinks()
 

diff --git a/src/preLoad.js b/src/preLoad.js
@@ -98,11 +98,8 @@ const handwritingfySVG = () => {
   svgs.forEach((svg) => {
     svg.appendChild(filter);
     for (let i = 0; i < svg.children.length; i++) {
-      svg.children[i].setAttribute(
-        "style",
-        "filter: url(#displacementFilter)"
-      );
+      svg.children[i].style.filter = "url(#displacementFilter)"
     }
   });
 }
-// export { availableFontFamilies, loadHeadLinks };
+export { availableFontFamilies, loadHeadLinks, applyFontForAll, handwritingfySVG };
diff --git a/tailwind.config.js → tailwind.config.cjs b/tailwind.config.js → tailwind.config.cjs
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{html,js}", "./node_modules/flowbite/**/*.js"],
+  content: ["./index.html", "./src/**/*.{html,vue,js,ts,jsx,tsx}", "./node_modules/flowbite/**/*.js"],
   theme: {
     extend: {},
   },

diff --git a/test-script.html b/test-script.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1 style="text-align: center">The effect of handwritingfy</h1>
+    <div
+      style="
+        max-width: 600px;
+        display: flex;
+        flex-flow: row wrap;
+        margin: 0 auto;
+      "
+    >
+      <svg width="240" height="180">
+        <rect
+          x="50"
+          y="20"
+          rx="20"
+          ry="20"
+          width="150"
+          height="150"
+          style="fill: red; stroke: black; stroke-width: 5; opacity: 0.5"
+        />
+        Sorry, your browser does not support inline SVG.
+      </svg>
+      <svg height="140" width="200">
+        <ellipse
+          cx="100"
+          cy="80"
+          rx="80"
+          ry="50"
+          style="fill: yellow; stroke: purple; stroke-width: 2"
+        />
+        Sorry, your browser does not support inline SVG.
+      </svg>
+      <svg height="200" width="200">
+        <polyline
+          points="20,20 40,25 60,40 80,120 120,140 200,180"
+          style="fill: none; stroke: black; stroke-width: 3"
+        />
+        Sorry, your browser does not support inline SVG.
+      </svg>
+      <svg height="180" width="180">
+        <polyline
+          points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
+          style="fill: white; stroke: red; stroke-width: 4"
+        />
+        Sorry, your browser does not support inline SVG.
+      </svg>
+      <svg height="100" width="100">
+        <circle
+          cx="50"
+          cy="50"
+          r="40"
+          stroke="black"
+          stroke-width="3"
+          fill="red"
+        />
+        Sorry, your browser does not support inline SVG.
+      </svg>
+    </div>
+    <script src="dist/handwritingfy.script.iife.js"></script>
+  </body>
+</html>
diff --git a/vite.config.chrome.js b/vite.config.chrome.js
@@ -0,0 +1,15 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    emptyOutDir: false,
+    lib: {
+      /** @desc executable for chrome extension */
+      entry: resolve(__dirname, 'src/handwritingfy.chrome.js'),
+      name: 'handwritingfy',
+      formats: ['iife'],
+      fileName: 'handwritingfy.chrome'
+    }
+  }
+})
diff --git a/vite.config.js → vite.config.popup.js b/vite.config.js → vite.config.popup.js
@@ -3,10 +3,11 @@ import { defineConfig } from 'vite'
 
 export default defineConfig({
   build: {
+    emptyOutDir: false,
+    // sourcemap: true,
     rollupOptions: {
       input: {
-        popup: resolve(__dirname, 'src/popup.html'),
-        chromeExtension: resolve(__dirname, 'handwritingfy.js')
+        'index': resolve(__dirname, 'index.html'),
       }
     }
   }

diff --git a/vite.config.script.js b/vite.config.script.js
@@ -0,0 +1,18 @@
+/** 
+ * @desc This vite config is for building the javascript for people using 
+ * `handwritingfy` directly at their own webpages with a <script> tag 
+ * */
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    emptyOutDir: false,
+    lib: {
+      entry: resolve(__dirname, 'src/handwritingfy.script.js'),
+      name: 'handwritingfy',
+      formats: ['iife'],
+      fileName: 'handwritingfy.script'
+    }
+  }
+})