Browse Source

fix(frontend): Make fonts load correctly.

jackyalcine 7 months ago
parent
commit
5067156c07
Signed by: Jacky Alciné <yo@jacky.wtf> GPG Key ID: 537A4F904B15268D
7 changed files with 241 additions and 84 deletions
  1. 12
    36
      .postcssrc.js
  2. 1
    14
      .sassrc.js
  3. 213
    3
      package-lock.json
  4. 7
    2
      package.json
  5. 2
    3
      web/static/js/page.ts
  6. 2
    22
      web/static/koype.scss
  7. 4
    4
      web/static/vendor.scss

+ 12
- 36
.postcssrc.js View File

@@ -1,46 +1,22 @@
1
-const ENV = process.env.ENV;
2 1
 const path = require('path');
3
-const CWD = process.cwd();
4 2
 
5 3
 module.exports = {
6 4
   parser: 'postcss-scss',
7 5
   plugins: {
8 6
     'postcss-reporter': {
9
-      clearMessages: false
7
+      clearMessages: true
10 8
     },
9
+    'postcss-url': [{
10
+      filter: '*',
11
+      url: (asset) => {
12
+        const relpath = asset.pathname.substr(1)
13
+        const abspath = path.resolve('node_modules', relpath)
14
+        const basename = path.basename(abspath)
15
+        const destpath = path.join(dest, 'fonts', basename)
16
+        if (!fs.pathExistsSync(destpath)) fs.copySync(abspath, destpath)
17
+        return path.join('..', 'fonts', basename)
18
+      },
19
+    }],
11 20
     autoprefixer: {},
12
-    'postcss-urlwrite': {
13
-      imports: true,
14
-      properties: true,
15
-      rules: [
16
-        { from: '../../opt/koype', to: '/~/core/assets'}
17
-      ]
18
-    },
19
-    'postcss-strip-inline-comments': {},
20
-    'postcss-ordered-values': {},
21
-    'postcss-reduce-initial': {},
22
-    'postcss-combine-duplicated-selectors': {},
23
-    'postcss-pxtorem': {
24
-      unitPrecision: 8,
25
-      propWhiteList: [],
26
-      replace: true,
27
-      selectorBlackList: [],
28
-      minPixelValue: 8
29
-    },
30
-    cssnano: ENV === 'production' ? {
31
-      preset: [
32
-        'default',
33
-        {
34
-          calc: true,
35
-          colormin: true,
36
-          discardUnused: true,
37
-          normalizeUrl: true,
38
-        }
39
-      ]
40
-    } : false,
41
-    'css-mqpacker': [],
42
-    'mdcss': {
43
-      theme: require('mdcss-theme-github')
44
-    }
45 21
   }
46 22
 };

+ 1
- 14
.sassrc.js View File

@@ -7,14 +7,10 @@ var buildDir = path.join(CWD, "priv", "static", "assets");
7 7
 
8 8
 const options = {
9 9
   "includePaths": [
10
-    path.join(nodeModulesDir, 'typeface-open-sans'),
11
-    path.join(nodeModulesDir, 'typeface-crimson-text'),
12
-    path.join(nodeModulesDir, 'typeface-source-code-pro'),
13 10
     assetsDir,
14 11
     nodeModulesDir,
15
-    path.join(nodeModulesDir, 'leaflet', 'dist'),
16 12
   ],
17
-  "relativeUrls": false,
13
+  "relativeUrls": true,
18 14
   "engines": {
19 15
     "sass": require("sass"),
20 16
   }
@@ -31,15 +27,6 @@ const eyeglass = new Eyeglass({
31 27
         {
32 28
           directory: nodeModulesDir
33 29
         },
34
-        {
35
-          directory: path.join(nodeModulesDir, 'typeface-open-sans')
36
-        },
37
-        {
38
-          directory: path.join(nodeModulesDir, 'typeface-crimson-text')
39
-        },
40
-        {
41
-          directory: path.join(nodeModulesDir, 'typeface-source-code-pro')
42
-        }
43 30
       ]
44 31
     },
45 32
     buildDir

+ 213
- 3
package-lock.json View File

@@ -1,6 +1,6 @@
1 1
 {
2 2
   "name": "koype",
3
-  "version": "0.0.9",
3
+  "version": "0.0.10",
4 4
   "lockfileVersion": 1,
5 5
   "requires": true,
6 6
   "dependencies": {
@@ -2687,7 +2687,7 @@
2687 2687
     },
2688 2688
     "css-color-names": {
2689 2689
       "version": "0.0.4",
2690
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
2690
+      "resolved": "http://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
2691 2691
       "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA="
2692 2692
     },
2693 2693
     "css-declaration-sorter": {
@@ -3041,6 +3041,12 @@
3041 3041
         "cssom": "0.3.x"
3042 3042
       }
3043 3043
     },
3044
+    "cuint": {
3045
+      "version": "0.2.2",
3046
+      "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
3047
+      "integrity": "sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs=",
3048
+      "dev": true
3049
+    },
3044 3050
     "currently-unhandled": {
3045 3051
       "version": "0.4.1",
3046 3052
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -8250,6 +8256,16 @@
8250 8256
         "postcss-value-parser": "^3.0.0"
8251 8257
       }
8252 8258
     },
8259
+    "postcss-combine-duplicated-selectors": {
8260
+      "version": "7.0.0",
8261
+      "resolved": "https://registry.npmjs.org/postcss-combine-duplicated-selectors/-/postcss-combine-duplicated-selectors-7.0.0.tgz",
8262
+      "integrity": "sha512-q1jT7WRmnbI4aG4gHbNQYUHjfM981m71MNQ52AKPTt8w9Fy9K+4CRO4KA9rzkeoV9F7FXasjWbER7X2sxDPfWg==",
8263
+      "dev": true,
8264
+      "requires": {
8265
+        "postcss": "^7.0.0",
8266
+        "postcss-selector-parser": "^5.0.0"
8267
+      }
8268
+    },
8253 8269
     "postcss-convert-values": {
8254 8270
       "version": "4.0.1",
8255 8271
       "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz",
@@ -8308,6 +8324,18 @@
8308 8324
         "htmlparser2": "^3.9.2"
8309 8325
       }
8310 8326
     },
8327
+    "postcss-import": {
8328
+      "version": "12.0.1",
8329
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
8330
+      "integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
8331
+      "dev": true,
8332
+      "requires": {
8333
+        "postcss": "^7.0.1",
8334
+        "postcss-value-parser": "^3.2.3",
8335
+        "read-cache": "^1.0.0",
8336
+        "resolve": "^1.1.7"
8337
+      }
8338
+    },
8311 8339
     "postcss-jsx": {
8312 8340
       "version": "0.35.0",
8313 8341
       "resolved": "https://registry.npmjs.org/postcss-jsx/-/postcss-jsx-0.35.0.tgz",
@@ -8605,6 +8633,78 @@
8605 8633
         "postcss-value-parser": "^3.0.0"
8606 8634
       }
8607 8635
     },
8636
+    "postcss-pxtorem": {
8637
+      "version": "4.0.1",
8638
+      "resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-4.0.1.tgz",
8639
+      "integrity": "sha1-nGTQ7+SIVHPMHLAwXG/8PrtFsc0=",
8640
+      "dev": true,
8641
+      "requires": {
8642
+        "object-assign": "^4.1.0",
8643
+        "postcss": "^5.2.10"
8644
+      },
8645
+      "dependencies": {
8646
+        "ansi-styles": {
8647
+          "version": "2.2.1",
8648
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
8649
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
8650
+          "dev": true
8651
+        },
8652
+        "chalk": {
8653
+          "version": "1.1.3",
8654
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
8655
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
8656
+          "dev": true,
8657
+          "requires": {
8658
+            "ansi-styles": "^2.2.1",
8659
+            "escape-string-regexp": "^1.0.2",
8660
+            "has-ansi": "^2.0.0",
8661
+            "strip-ansi": "^3.0.0",
8662
+            "supports-color": "^2.0.0"
8663
+          },
8664
+          "dependencies": {
8665
+            "supports-color": {
8666
+              "version": "2.0.0",
8667
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
8668
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
8669
+              "dev": true
8670
+            }
8671
+          }
8672
+        },
8673
+        "has-flag": {
8674
+          "version": "1.0.0",
8675
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
8676
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
8677
+          "dev": true
8678
+        },
8679
+        "postcss": {
8680
+          "version": "5.2.18",
8681
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
8682
+          "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
8683
+          "dev": true,
8684
+          "requires": {
8685
+            "chalk": "^1.1.3",
8686
+            "js-base64": "^2.1.9",
8687
+            "source-map": "^0.5.6",
8688
+            "supports-color": "^3.2.3"
8689
+          }
8690
+        },
8691
+        "source-map": {
8692
+          "version": "0.5.7",
8693
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
8694
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
8695
+          "dev": true
8696
+        },
8697
+        "supports-color": {
8698
+          "version": "3.2.3",
8699
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
8700
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
8701
+          "dev": true,
8702
+          "requires": {
8703
+            "has-flag": "^1.0.0"
8704
+          }
8705
+        }
8706
+      }
8707
+    },
8608 8708
     "postcss-reduce-initial": {
8609 8709
       "version": "4.0.3",
8610 8710
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
@@ -8696,6 +8796,77 @@
8696 8796
         "uniq": "^1.0.1"
8697 8797
       }
8698 8798
     },
8799
+    "postcss-strip-inline-comments": {
8800
+      "version": "0.1.5",
8801
+      "resolved": "https://registry.npmjs.org/postcss-strip-inline-comments/-/postcss-strip-inline-comments-0.1.5.tgz",
8802
+      "integrity": "sha1-f/a83BTmM+1M36AguuPt2tT4S5A=",
8803
+      "dev": true,
8804
+      "requires": {
8805
+        "postcss": "^5.0.18"
8806
+      },
8807
+      "dependencies": {
8808
+        "ansi-styles": {
8809
+          "version": "2.2.1",
8810
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
8811
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
8812
+          "dev": true
8813
+        },
8814
+        "chalk": {
8815
+          "version": "1.1.3",
8816
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
8817
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
8818
+          "dev": true,
8819
+          "requires": {
8820
+            "ansi-styles": "^2.2.1",
8821
+            "escape-string-regexp": "^1.0.2",
8822
+            "has-ansi": "^2.0.0",
8823
+            "strip-ansi": "^3.0.0",
8824
+            "supports-color": "^2.0.0"
8825
+          },
8826
+          "dependencies": {
8827
+            "supports-color": {
8828
+              "version": "2.0.0",
8829
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
8830
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
8831
+              "dev": true
8832
+            }
8833
+          }
8834
+        },
8835
+        "has-flag": {
8836
+          "version": "1.0.0",
8837
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
8838
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
8839
+          "dev": true
8840
+        },
8841
+        "postcss": {
8842
+          "version": "5.2.18",
8843
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
8844
+          "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
8845
+          "dev": true,
8846
+          "requires": {
8847
+            "chalk": "^1.1.3",
8848
+            "js-base64": "^2.1.9",
8849
+            "source-map": "^0.5.6",
8850
+            "supports-color": "^3.2.3"
8851
+          }
8852
+        },
8853
+        "source-map": {
8854
+          "version": "0.5.7",
8855
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
8856
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
8857
+          "dev": true
8858
+        },
8859
+        "supports-color": {
8860
+          "version": "3.2.3",
8861
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
8862
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
8863
+          "dev": true,
8864
+          "requires": {
8865
+            "has-flag": "^1.0.0"
8866
+          }
8867
+        }
8868
+      }
8869
+    },
8699 8870
     "postcss-styled": {
8700 8871
       "version": "0.34.0",
8701 8872
       "resolved": "https://registry.npmjs.org/postcss-styled/-/postcss-styled-0.34.0.tgz",
@@ -8729,6 +8900,27 @@
8729 8900
         "uniqs": "^2.0.0"
8730 8901
       }
8731 8902
     },
8903
+    "postcss-url": {
8904
+      "version": "8.0.0",
8905
+      "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-8.0.0.tgz",
8906
+      "integrity": "sha512-E2cbOQ5aii2zNHh8F6fk1cxls7QVFZjLPSrqvmiza8OuXLzIpErij8BDS5Y3STPfJgpIMNCPEr8JlKQWEoozUw==",
8907
+      "dev": true,
8908
+      "requires": {
8909
+        "mime": "^2.3.1",
8910
+        "minimatch": "^3.0.4",
8911
+        "mkdirp": "^0.5.0",
8912
+        "postcss": "^7.0.2",
8913
+        "xxhashjs": "^0.2.1"
8914
+      },
8915
+      "dependencies": {
8916
+        "mime": {
8917
+          "version": "2.4.0",
8918
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.0.tgz",
8919
+          "integrity": "sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==",
8920
+          "dev": true
8921
+        }
8922
+      }
8923
+    },
8732 8924
     "postcss-urlrewrite": {
8733 8925
       "version": "0.2.2",
8734 8926
       "resolved": "https://registry.npmjs.org/postcss-urlrewrite/-/postcss-urlrewrite-0.2.2.tgz",
@@ -8994,6 +9186,15 @@
8994 9186
       "integrity": "sha512-PVadd+WaUDOAciICm/J1waJaSvgq+4rHE/K70j0PFqKhkTBsPv/82UGQJNXAngz1fOQLLxI6z1sEDmJDQhCTAA==",
8995 9187
       "dev": true
8996 9188
     },
9189
+    "read-cache": {
9190
+      "version": "1.0.0",
9191
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
9192
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
9193
+      "dev": true,
9194
+      "requires": {
9195
+        "pify": "^2.3.0"
9196
+      }
9197
+    },
8997 9198
     "read-pkg": {
8998 9199
       "version": "1.1.0",
8999 9200
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -9350,7 +9551,7 @@
9350 9551
     },
9351 9552
     "rgba-regex": {
9352 9553
       "version": "1.0.0",
9353
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
9554
+      "resolved": "http://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
9354 9555
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
9355 9556
     },
9356 9557
     "rimraf": {
@@ -11619,6 +11820,15 @@
11619 11820
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
11620 11821
       "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
11621 11822
     },
11823
+    "xxhashjs": {
11824
+      "version": "0.2.2",
11825
+      "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
11826
+      "integrity": "sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==",
11827
+      "dev": true,
11828
+      "requires": {
11829
+        "cuint": "^0.2.2"
11830
+      }
11831
+    },
11622 11832
     "y18n": {
11623 11833
       "version": "3.2.1",
11624 11834
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",

+ 7
- 2
package.json View File

@@ -4,8 +4,8 @@
4 4
   "description": "A single-tenant IndieWeb platform.",
5 5
   "main": "index.js",
6 6
   "scripts": {
7
-    "parcel:watch": "npx parcel watch web/static/*css web/static/js/*.ts web/static/images/* web/static/images/**/* --out-dir priv/static/assets --cache-dir tmp/parcel --global Koype --hmr-port $HMR_PORT",
8
-    "parcel:build": "npx parcel build web/static/*css web/static/js/*.ts web/static/images/**/* --out-dir priv/static/assets --no-cache --global Koype --log-level 4 --detailed-report",
7
+    "parcel:watch": "npx parcel watch web/static/*css web/static/js/*.ts web/static/images/* web/static/images/**/* --out-dir priv/static/assets --public-url '.' --cache-dir tmp/parcel --log-level 5 --global Koype --hmr-port $HMR_PORT",
8
+    "parcel:build": "npx parcel build web/static/*css web/static/js/*.ts web/static/images/**/* --out-dir priv/static/assets --public-url '.' --no-cache --global Koype --log-level 4 --detailed-report",
9 9
     "test": "jest"
10 10
   },
11 11
   "repository": {
@@ -54,6 +54,11 @@
54 54
     "jest": "24.1.0",
55 55
     "log-with-style": "0.3.0",
56 56
     "parcel-plugin-bundle-visualiser": "1.2.0",
57
+    "postcss-combine-duplicated-selectors": "7.0.0",
58
+    "postcss-import": "12.0.1",
59
+    "postcss-pxtorem": "4.0.1",
60
+    "postcss-strip-inline-comments": "0.1.5",
61
+    "postcss-url": "8.0.0",
57 62
     "prettier": "1.15.3",
58 63
     "stylelint": "9.9.0",
59 64
     "stylelint-config-recommended-scss": "3.2.0",

+ 2
- 3
web/static/js/page.ts View File

@@ -22,11 +22,11 @@
22 22
  * @todo Remove leaflet from here.
23 23
  */
24 24
 
25
-import timeago from "timeago.js";
26 25
 import * as Ladda from "ladda";
27
-import * as L from "leaflet";
26
+import timeago from "timeago.js";
28 27
 
29 28
 import { Socket } from "phoenix";
29
+import PhoenixHTML = require("phoenix_html");
30 30
 
31 31
 function buildHiddenInput(name, value) {
32 32
   const input = document.createElement("input");
@@ -93,4 +93,3 @@ window.addEventListener(
93 93
 );
94 94
 
95 95
 window.Ladda = Ladda;
96
-window.L = L;

+ 2
- 22
web/static/koype.scss View File

@@ -19,11 +19,6 @@ body {
19 19
 
20 20
 }
21 21
 
22
-*::selection {
23
-  background-color: $black-80;
24
-  color: $white-80;
25
-}
26
-
27 22
 article.h-entry,
28 23
 article.h-event {
29 24
   @extend .f4, .f3-l;
@@ -156,20 +151,6 @@ html.wf-active {
156 151
   animation: fade-in 0.7s;
157 152
 }
158 153
 
159
-@keyframes pulse {
160
-  0% {
161
-    box-shadow: 0 0 0 0 rgba($near-black, 0.5);
162
-  }
163
-
164
-  50% {
165
-    box-shadow: 0 0 0 1rem rgba($near-black, 0);
166
-  }
167
-
168
-  100% {
169
-    box-shadow: 0 0 0 0 rgba($near-black, 0);
170
-  }
171
-}
172
-
173 154
 aside + aside + details {
174 155
   width: 100%;
175 156
 }
@@ -179,7 +160,7 @@ aside + aside + details {
179 160
 }
180 161
 
181 162
 article.h-feed > section.h-entry:first-of-type {
182
-  margin-top: $spacing-large;
163
+  @extend .mt5;
183 164
 }
184 165
 
185 166
 article.h-feed > section.h-entry > aside {
@@ -239,6 +220,5 @@ body > header[role="banner"] {
239 220
 }
240 221
 
241 222
 mark {
242
-  background-color: $yellow;
243
-  color: $black-80;
223
+  @extend .yellow, .black-80;
244 224
 }

+ 4
- 4
web/static/vendor.scss View File

@@ -1,5 +1,5 @@
1
-@import "ladda/css/ladda";
2
-@import "pretty-checkbox/src/pretty-checkbox";
3
-@import "quill/dist/quill.core.css";
4
-@import "quill/dist/quill.bubble.css";
1
+@import url("ladda");
2
+@import url("pretty-checkbox");
3
+@import url("quill/dist/quill.core.css");
4
+@import url("quill/dist/quill.bubble.css");
5 5
 @import url("leaflet/dist/leaflet.css");

Loading…
Cancel
Save