add smol fontawesome

2020-05-01 02:24:29 +02:00 · 2020-05-01 02:24:29 +02:00 · 04047f3a72
commit 04047f3a72
parent 060368e93d
7 changed files with 139 additions and 41 deletions
--- a/copyparty/web/mde.css
+++ b/copyparty/web/mde.css
@ -1,33 +1,11 @@
-/* fontawesome is 2big */
-.fa { font-size: 1.5em; line-height: 1em; margin: -3em; position: relative; left: -.05em; font-style: normal }
-.fa-bold:before { content: 'B'; font-weight: bold }
-.fa-italic:before { content: 'I'; font-style: italic }
-.fa-strikethrough:before { content: ' S '; text-decoration: line-through }
-.fa-header:before { content: 'H'; font-weight: bold; font-family: serif; top: -.2em; left: .5em }
-.fa-quote-left:before { content: '❝'; font-family: serif; top: -.5em }
-.fa-list-ul:before { content: '•' }
-.fa-list-ol:before { content: '①' }
-.fa-link:before { content: '🔗'; font-size: .8em }
-.fa-image:before { content: '🎨' }
-.fa-eye:before { content: '👀'; font-size: .9em }
-.fa-columns:before { content: '◫' }
-.fa-arrows-alt:before { content: '⛶' }
-.fa-undo:before { content: '⟲' }
-.fa-redo:before { content: '⟳' }
-.fa-question-circle:before { content: '?' }
-.fa-code:before { content: '‹/›'; font-size: .8em; }
-.fa-eraser:before { content: '⁋' }
-.fa-table:before { content: '⊞' }
-.fa-minus:before { content: '−' }
-
-/*
-https://dev.w3.org/html5/html-author/charref
-http://xahlee.info/comp/unicode_arrows.html
-https://www.fileformat.info/info/unicode/block/miscellaneous_symbols_and_pictographs/list.htm
-↶ ↷ 💾 🗙 
-*/
-
-button { border: 1px solid #999 !important; }
+html .editor-toolbar>button { margin-left: -1px; border: 1px solid rgba(0,0,0,0.1) }
+html .editor-toolbar>button+button { border-left: 1px solid rgba(0,0,0,0) }
+html .editor-toolbar>button:hover,
+html .editor-toolbar>button:active { box-shadow: 0 .1em .3em #999; z-index: 9 }
+html .editor-toolbar>button:active,
+html .editor-toolbar>button.active { border-color: rgba(0,0,0,0.4); background: #fc0 }
+html .editor-toolbar>i.separator { border-left: 1px solid #ccc; }
+html .editor-toolbar.disabled-for-preview>button:not(.no-disable) { opacity: .35 }

 html, body {
    margin: 0;
--- a/copyparty/web/mde.html
+++ b/copyparty/web/mde.html
@ -4,6 +4,7 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.7">
 	<link href="/.cpr/mde.css" rel="stylesheet">
+	<link href="/.cpr/deps/mini-fa.css" rel="stylesheet">
 	<link href="/.cpr/deps/easymde.css" rel="stylesheet">
 </head>
 <body>
--- a/copyparty/web/mde.js
+++ b/copyparty/web/mde.js
@ -19,6 +19,20 @@ var dom_md = document.getElementById('mt');
 })();

 (function () {
+    var tbar = [
+        {
+            name: "save",
+            title: "save",
+            className: "fa fa-save",
+            action: (mde) => {
+                alert("TODO save (" + (mde.value().length / 1024) + ' kB)');
+            }
+        }, '|',
+        'bold', 'italic', 'strikethrough', 'heading', '|',
+        'code', 'quote', 'unordered-list', 'ordered-list', 'clean-block', '|',
+        'link', 'image', 'table', 'horizontal-rule', '|',
+        'preview', 'side-by-side', 'fullscreen', '|',
+        'undo', 'redo'];
    var mde = new EasyMDE({
        autoDownloadFontAwesome: false,
        autofocus: true,
@ -31,7 +45,7 @@ var dom_md = document.getElementById('mt');
        },
        spellChecker: false,
        tabSize: 4,
-        showIcons: ['strikethrough', 'code', 'table', 'undo', 'redo', 'heading', 'clean-block', 'horizontal-rule']
+        toolbar: tbar
    });
    var loader = document.getElementById('ml');
    loader.parentNode.removeChild(loader);
--- a/scripts/deps-docker/Dockerfile
+++ b/scripts/deps-docker/Dockerfile
@ -5,15 +5,19 @@ ENV     ver_asmcrypto=2821dd1dedd1196c378f5854037dda5c869313f3 \
        ver_showdown=1.9.1 \
        ver_marked=1.0.0 \
        ver_ogvjs=1.6.1 \
-        ver_mde=2.10.1
+        ver_mde=2.10.1 \
+        ver_fontawesome=5.13.0 \
+        ver_zopfli=1.0.3


 # download
-RUN     apk add make g++ git bash npm patch wget tar pigz brotli gzip unzip \
+RUN     apk add cmake make g++ git bash npm patch wget tar pigz brotli gzip unzip python3 python3-dev \
        && wget https://github.com/brion/ogv.js/releases/download/$ver_ogvjs/ogvjs-$ver_ogvjs.zip -O ogvjs.zip \
        && wget https://github.com/asmcrypto/asmcrypto.js/archive/$ver_asmcrypto.tar.gz -O asmcrypto.tgz \
        && wget https://github.com/markedjs/marked/archive/v$ver_marked.tar.gz -O marked.tgz \
        && wget https://github.com/Ionaru/easy-markdown-editor/archive/$ver_mde.tar.gz -O mde.tgz \
+        && wget https://github.com/FortAwesome/Font-Awesome/releases/download/$ver_fontawesome/fontawesome-free-$ver_fontawesome-web.zip -O fontawesome.zip \
+        && wget https://github.com/google/zopfli/archive/zopfli-$ver_zopfli.tar.gz -O zopfli.tgz \
        && unzip ogvjs.zip \
        && (tar -xf asmcrypto.tgz \
            && cd asmcrypto.js-$ver_asmcrypto \
@ -26,9 +30,9 @@ RUN     apk add make g++ git bash npm patch wget tar pigz brotli gzip unzip \
            && cd easy-markdown-editor* \
            && npm install \
            && npm i gulp-cli -g ) \
-        && mkdir /z/dist
-#        && wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.0.11/fontawesome-free-5.0.11.zip -O fontawesome.zip \
-#        && unzip fontawesome.zip \
+        && unzip fontawesome.zip \
+        && tar -xf zopfli.tgz \
+        && mkdir -p /z/dist/no-pk


 # uncomment if you wanna test the abandoned markdown converters
@ -46,6 +50,19 @@ RUN     [ $build_abandoned ] || exit 0; \
            && npm install )


+# build fonttools (which needs zopfli)
+RUN     tar -xf zopfli.tgz \
+        && cd zopfli* \
+        && cmake \
+            -DCMAKE_INSTALL_PREFIX=/usr \
+            -DZOPFLI_BUILD_SHARED=ON \
+            -B build \
+            -S . \
+        && make -C build \
+        && make -C build install \
+        && python3 -m pip install fonttools zopfli
+
+
 # build asmcrypto
 RUN     cd asmcrypto.js-$ver_asmcrypto \
        && echo "export { Sha512 } from './hash/sha512/sha512';" > src/entry-export_all.ts \
@ -145,14 +162,19 @@ RUN     [ $build_abandoned ] || exit 0; \
        && cp -pv dist/markdown-it.js /z/dist/markdown-it-full.js


+# build fontawesome
+COPY    mini-fa.sh /z
+COPY    mini-fa.css /z
+RUN     /bin/ash /z/mini-fa.sh
+
+
 # compress
 COPY    zopfli.makefile /z/dist/Makefile
 RUN     cd /z/dist \
        && make -j$(nproc) \
-        && rm Makefile
-#        && cp -pv "$(find /z/fontawesome-fre* -name fa-regular-400.woff | head -n 1)" fontawesome.woff
-#        && cp -pv "$(find /z/fontawesome-fre* -name fontawesome.min.css | head -n 1)" fontawesome.css \
-#        && sed -ri 's`@font-face.*``' fontawesome.css \
+        && rm Makefile \
+        && mv no-pk/* . \
+        && rmdir no-pk


 # showdown: abandoned due to code-blocks in lists failing
--- a/scripts/deps-docker/mini-fa.css
+++ b/scripts/deps-docker/mini-fa.css
@ -0,0 +1,52 @@
+
+/*
+that was the original copyright ^
+now here's a tiny subset of fontawesome
+*/
+
+@font-face {
+font-family: 'fa';
+font-style: normal;
+font-weight: 400;
+font-display: block;
+src: url("/.cpr/deps/mini-fa.woff") format("woff");
+}
+
+.fa,
+.fas,
+.far,
+.fal,
+.fad,
+.fab {
+-moz-osx-font-smoothing: grayscale;
+-webkit-font-smoothing: antialiased;
+display: inline-block;
+font-style: normal;
+font-variant: normal;
+text-rendering: auto;
+line-height: 1;
+font-family: 'fa';
+font-weight: 400;
+}
+
+:add
+arrows-alt
+bold
+code
+columns
+eraser
+eye
+heading
+image
+italic
+link
+list-ol
+list-ul
+minus
+question-circle
+quote-left
+redo
+save
+strikethrough
+table
+undo
--- a/scripts/deps-docker/mini-fa.sh
+++ b/scripts/deps-docker/mini-fa.sh
@ -0,0 +1,28 @@
+#!/bin/ash
+set -e
+
+orig_css="$(find /z/fontawesome-fre* -name fontawesome.css | head -n 1)"
+orig_woff="$(find /z/fontawesome-fre* -name fa-solid-900.woff | head -n 1)"
+
+# first grab the copyright meme
+awk '1; / *\*\// {exit}' <"$orig_css" >/z/dist/mini-fa.css
+
+# then add the static part of our css template
+awk '/^:add/ {exit} 1' </z/mini-fa.css >>/z/dist/mini-fa.css
+
+# then take the list of icons to include
+awk 'o; /^:add/ {o=1}' </z/mini-fa.css |
+while IFS= read -r g; do
+    # and grab them from the upstream css
+    awk 'o{gsub(/[ ;]+/,"");print;exit} /^\.fa-'$g':before/ {o=1;printf "%s",$0}' <"$orig_css"
+done >>/z/dist/mini-fa.css
+
+# expecting this input btw:
+# .fa-python:before {
+#  content: "\f3e2"; }
+
+# get the codepoints (should produce lines like "f3e2")
+awk '/:before .content:"\\/ {sub(/[^"]+"./,""); sub(/".*/,""); print}' </z/dist/mini-fa.css >/z/icon.list
+
+# and finally create a woff with just our icons
+pyftsubset "$orig_woff" --unicodes-file=/z/icon.list --no-ignore-missing-unicodes --flavor=woff --with-zopfli --output-file=/z/dist/no-pk/mini-fa.woff --verbose
--- a/scripts/deps-docker/zopfli.makefile
+++ b/scripts/deps-docker/zopfli.makefile
@ -1,7 +1,10 @@
 all: $(addsuffix .gz, $(wildcard *.*))

 %.gz: %
-	brotli -q 11 $<
+	#brotli -q 11 $<
 	pigz -11 -J 34 -I 573 $<

 # pigz -11 -J 34 -I 100 -F < $< > $@.first
+
+# disabling brotli after all since the gain is meh
+#   and it bloats sfx and wheels by like 70%