mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-17 09:02:15 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

add smol fontawesome

Browse source
This commit is contained in:
ed 2020-05-01 02:24:29 +02:00
parent 060368e93d
commit 04047f3a72
7 changed files with 139 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
copyparty/web/mde.css
View file

@ -1,33 +1,11 @@
/* fontawesome is 2big */ html .editor-toolbar>button { margin-left: -1px; border: 1px solid rgba(0,0,0,0.1) }
.fa { font-size: 1.5em; line-height: 1em; margin: -3em; position: relative; left: -.05em; font-style: normal } html .editor-toolbar>button+button { border-left: 1px solid rgba(0,0,0,0) }
.fa-bold:before { content: 'B'; font-weight: bold } html .editor-toolbar>button:hover,
.fa-italic:before { content: 'I'; font-style: italic } html .editor-toolbar>button:active { box-shadow: 0 .1em .3em #999; z-index: 9 }
.fa-strikethrough:before { content: ' S '; text-decoration: line-through } html .editor-toolbar>button:active,
.fa-header:before { content: 'H'; font-weight: bold; font-family: serif; top: -.2em; left: .5em } html .editor-toolbar>button.active { border-color: rgba(0,0,0,0.4); background: #fc0 }
.fa-quote-left:before { content: '❝'; font-family: serif; top: -.5em } html .editor-toolbar>i.separator { border-left: 1px solid #ccc; }
.fa-list-ul:before { content: '•' } html .editor-toolbar.disabled-for-preview>button:not(.no-disable) { opacity: .35 }
.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, body { html, body {
margin: 0; margin: 0;

1
copyparty/web/mde.html
View file

@ -4,6 +4,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.7"> <meta name="viewport" content="width=device-width, initial-scale=0.7">
<link href="/.cpr/mde.css" rel="stylesheet"> <link href="/.cpr/mde.css" rel="stylesheet">
<link href="/.cpr/deps/mini-fa.css" rel="stylesheet">
<link href="/.cpr/deps/easymde.css" rel="stylesheet"> <link href="/.cpr/deps/easymde.css" rel="stylesheet">
</head> </head>
<body> <body>

16
copyparty/web/mde.js
View file

@ -19,6 +19,20 @@ var dom_md = document.getElementById('mt');
})(); })();
(function () { (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({ var mde = new EasyMDE({
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
autofocus: true, autofocus: true,
@ -31,7 +45,7 @@ var dom_md = document.getElementById('mt');
}, },
spellChecker: false, spellChecker: false,
tabSize: 4, tabSize: 4,
showIcons: ['strikethrough', 'code', 'table', 'undo', 'redo', 'heading', 'clean-block', 'horizontal-rule'] toolbar: tbar
}); });
var loader = document.getElementById('ml'); var loader = document.getElementById('ml');
loader.parentNode.removeChild(loader); loader.parentNode.removeChild(loader);

40
scripts/deps-docker/Dockerfile
View file

@ -5,15 +5,19 @@ ENV ver_asmcrypto=2821dd1dedd1196c378f5854037dda5c869313f3 \
ver_showdown=1.9.1 \ ver_showdown=1.9.1 \
ver_marked=1.0.0 \ ver_marked=1.0.0 \
ver_ogvjs=1.6.1 \ 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 # 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/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/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/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/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 \ && unzip ogvjs.zip \
&& (tar -xf asmcrypto.tgz \ && (tar -xf asmcrypto.tgz \
&& cd asmcrypto.js-$ver_asmcrypto \ && 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* \ && cd easy-markdown-editor* \
&& npm install \ && npm install \
&& npm i gulp-cli -g ) \ && npm i gulp-cli -g ) \
&& mkdir /z/dist && unzip fontawesome.zip \
# && wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.0.11/fontawesome-free-5.0.11.zip -O fontawesome.zip \ && tar -xf zopfli.tgz \
# && unzip fontawesome.zip \ && mkdir -p /z/dist/no-pk
# uncomment if you wanna test the abandoned markdown converters # uncomment if you wanna test the abandoned markdown converters
@ -46,6 +50,19 @@ RUN [ $build_abandoned ] || exit 0; \
&& npm install ) && 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 # build asmcrypto
RUN cd asmcrypto.js-$ver_asmcrypto \ RUN cd asmcrypto.js-$ver_asmcrypto \
&& echo "export { Sha512 } from './hash/sha512/sha512';" > src/entry-export_all.ts \ && 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 && 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 # compress
COPY zopfli.makefile /z/dist/Makefile COPY zopfli.makefile /z/dist/Makefile
RUN cd /z/dist \ RUN cd /z/dist \
&& make -j$(nproc) \ && make -j$(nproc) \
&& rm Makefile && rm Makefile \
# && cp -pv "$(find /z/fontawesome-fre* -name fa-regular-400.woff | head -n 1)" fontawesome.woff && mv no-pk/* . \
# && cp -pv "$(find /z/fontawesome-fre* -name fontawesome.min.css | head -n 1)" fontawesome.css \ && rmdir no-pk
# && sed -ri 's`@font-face.*``' fontawesome.css \
# showdown: abandoned due to code-blocks in lists failing # showdown: abandoned due to code-blocks in lists failing

52
scripts/deps-docker/mini-fa.css Normal file
View file

@ -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

28
scripts/deps-docker/mini-fa.sh Normal file
View file

@ -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

5
scripts/deps-docker/zopfli.makefile
View file

@ -1,7 +1,10 @@
all: $(addsuffix .gz, $(wildcard *.*)) all: $(addsuffix .gz, $(wildcard *.*))
%.gz: % %.gz: %
brotli -q 11 $< #brotli -q 11 $<
pigz -11 -J 34 -I 573 $< pigz -11 -J 34 -I 573 $<
# pigz -11 -J 34 -I 100 -F < $< > $@.first # 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%