git.iko.soy/rowtype-yoga/psfp
on master help sign in
At least it compiles
commit15d51528b645a580f04e453de11fc61f58b5c3aa authorMark Eibes <mark.eibes@gmail.com> dateThu 26 Mar 2020, 23:19 (7 years ago) parent60a5002
28 files changed+573−562
compare with master
unifiedsplit
assets/fonts/Rubik-Medium.woff2 assets/fonts/Rubik-MediumItalic.woff2 blog/package-lock.json+134−135 blog/package.json+3−3 blog/src/components/PSLayout.purs+42−38 components/.vscode/settings.json+4−1 components/src/Storybook/Decorator/FullScreen.purs+17−17 components/src/Yoga/Box/Styles.purs+3−2 components/src/Yoga/Button/Component.purs+66−43 components/src/Yoga/Card/Component.purs+33−36 components/src/Yoga/CompileEditor/Component.purs+19−27 components/src/Yoga/Font/Rubik.js+2−2 components/src/Yoga/Font/Rubik.purs+17−12 components/src/Yoga/Header/Component.purs+19−20 components/src/Yoga/JSS.purs+4−1 components/src/Yoga/Modal/Styles.purs+3−4 components/src/Yoga/Monaco/Editor.purs+11−11 components/src/Yoga/SVG/Icon.purs+12−14 components/src/Yoga/SVG/Image.purs+66−83 components/src/Yoga/Theme.purs+27−34 components/src/Yoga/Theme/CSSBaseline.purs+4−3 components/src/Yoga/Theme/Default.purs+5−2 components/src/Yoga/Theme/ThemeStories.purs+16−15 components/src/Yoga/Theme/Types.purs+31−29 components/src/Yoga/Typography/Header.purs+4−9 components/src/Yoga/Typography/Paragraph.purs+8−8 server/src/Main.purs+21−11 server/src/PscIdeClient.purs+2−2
assets/fonts/Rubik-Medium.woff2new file

Binary file not shown.

assets/fonts/Rubik-MediumItalic.woff2new file

Binary file not shown.

blog/package-lock.json+134−135
@@ -1084,9 +1084,9 @@
10841084 },
10851085 "dependencies": {
10861086 "buffer": {
1087− "version": "5.4.3",
1088− "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.4.3.tgz",
1089− "integrity": "sha512-zvj65TkFeIt3i6aj5bIvJDzjjQQGs4o/sNoezg1F1kYap9Nu2jcUdpwzRSJTHMMzG0H7bZkn4rNQpImhuxWX2A==",
1087+ "version": "5.5.0",
1088+ "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.5.0.tgz",
1089+ "integrity": "sha512-9FTEDjLjwoAkEwyMGDjYJQN2gfRgOKBKRfiglhvibGbpeeU/pQn1bJxQqm32OD/AIeEuHxU9roxXxg34Byp/Ww==",
10901090 "requires": {
10911091 "base64-js": "^1.0.2",
10921092 "ieee754": "^1.1.4"
@@ -3217,13 +3217,24 @@
32173217 }
32183218 },
32193219 "bl": {
3220− "version": "3.0.0",
3221− "resolved": "https://registry.npmjs.org/bl/-/bl-3.0.0.tgz",
3222− "integrity": "sha512-EUAyP5UHU5hxF8BPT0LKW8gjYLhq1DQIcneOX/pL/m2Alo+OYDQAJlHq+yseMP50Os2nHXOSic6Ss3vSQeyf4A==",
3220+ "version": "4.0.2",
3221+ "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz",
3222+ "integrity": "sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==",
32233223 "requires": {
3224− "readable-stream": "^3.0.1"
3224+ "buffer": "^5.5.0",
3225+ "inherits": "^2.0.4",
3226+ "readable-stream": "^3.4.0"
32253227 },
32263228 "dependencies": {
3229+ "buffer": {
3230+ "version": "5.5.0",
3231+ "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.5.0.tgz",
3232+ "integrity": "sha512-9FTEDjLjwoAkEwyMGDjYJQN2gfRgOKBKRfiglhvibGbpeeU/pQn1bJxQqm32OD/AIeEuHxU9roxXxg34Byp/Ww==",
3233+ "requires": {
3234+ "base64-js": "^1.0.2",
3235+ "ieee754": "^1.1.4"
3236+ }
3237+ },
32273238 "readable-stream": {
32283239 "version": "3.6.0",
32293240 "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -8974,14 +8985,39 @@
89748985 }
89758986 },
89768987 "gatsby-plugin-manifest": {
8977− "version": "2.2.42",
8978− "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.2.42.tgz",
8979− "integrity": "sha512-3YWq2zfv6LR0FWlfhZL//mrueuTr+u9cSr8K9HIXKBVby1FZ2CndzaMPbmj61/FSqXHXX2/bhvOx5imFuZCxmw==",
8988+ "version": "2.3.2",
8989+ "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.3.2.tgz",
8990+ "integrity": "sha512-tJQbofNs41rbcZN3W3SDrAHwXc5sYaLrWB+nPc8GTjz5rXzh76uRMMgMBLBfx4DtFInXFmM3igBjW58rikWVeg==",
89808991 "requires": {
8981− "@babel/runtime": "^7.7.6",
8982− "gatsby-core-utils": "^1.0.28",
8992+ "@babel/runtime": "^7.8.7",
8993+ "gatsby-core-utils": "^1.1.1",
89838994 "semver": "^5.7.1",
8984− "sharp": "^0.23.4"
8995+ "sharp": "^0.25.1"
8996+ },
8997+ "dependencies": {
8998+ "@babel/runtime": {
8999+ "version": "7.9.2",
9000+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
9001+ "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
9002+ "requires": {
9003+ "regenerator-runtime": "^0.13.4"
9004+ }
9005+ },
9006+ "gatsby-core-utils": {
9007+ "version": "1.1.1",
9008+ "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-1.1.1.tgz",
9009+ "integrity": "sha512-EboPcBx37YQVUKN9JH753S54nDxjRmOefbR0i08KTmaVgQ1lZnDXJr8JfrImmMqupZlOkPQX1mWlXfp+r1jGhA==",
9010+ "requires": {
9011+ "ci-info": "2.0.0",
9012+ "configstore": "^5.0.1",
9013+ "node-object-hash": "^2.0.0"
9014+ }
9015+ },
9016+ "regenerator-runtime": {
9017+ "version": "0.13.5",
9018+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
9019+ "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
9020+ }
89859021 }
89869022 },
89879023 "gatsby-plugin-mdx": {
@@ -9140,15 +9176,15 @@
91409176 }
91419177 },
91429178 "gatsby-plugin-sharp": {
9143− "version": "2.4.5",
9144− "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.4.5.tgz",
9145− "integrity": "sha512-O2FZcUd78aKNR7Hbommrbc5igW32U2MnenA/Oc55sklFUF+I1fu4N6zMoHfh7sVtWCqZEbQiNO310Zl8jstD5g==",
9179+ "version": "2.5.2",
9180+ "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.5.2.tgz",
9181+ "integrity": "sha512-dWVnuOeeZhEsaYaBcctSybDzYv8wmsjZlxhFspnveMscEgO1whBW5eolBNzRLa+ooocW3wRKg0TYljLlLfHv4g==",
91469182 "requires": {
9147− "@babel/runtime": "^7.7.6",
9183+ "@babel/runtime": "^7.8.7",
91489184 "async": "^2.6.3",
91499185 "bluebird": "^3.7.2",
91509186 "fs-extra": "^8.1.0",
9151− "gatsby-core-utils": "^1.0.28",
9187+ "gatsby-core-utils": "^1.1.1",
91529188 "got": "^8.3.2",
91539189 "imagemin": "^6.1.0",
91549190 "imagemin-mozjpeg": "^8.0.0",
@@ -9160,11 +9196,19 @@
91609196 "probe-image-size": "^4.1.1",
91619197 "progress": "^2.0.3",
91629198 "semver": "^5.7.1",
9163− "sharp": "^0.23.4",
9199+ "sharp": "^0.25.1",
91649200 "svgo": "1.3.2",
9165− "uuid": "^3.3.3"
9201+ "uuid": "^3.4.0"
91669202 },
91679203 "dependencies": {
9204+ "@babel/runtime": {
9205+ "version": "7.9.2",
9206+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
9207+ "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
9208+ "requires": {
9209+ "regenerator-runtime": "^0.13.4"
9210+ }
9211+ },
91689212 "async": {
91699213 "version": "2.6.3",
91709214 "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
@@ -9172,6 +9216,21 @@
91729216 "requires": {
91739217 "lodash": "^4.17.14"
91749218 }
9219+ },
9220+ "gatsby-core-utils": {
9221+ "version": "1.1.1",
9222+ "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-1.1.1.tgz",
9223+ "integrity": "sha512-EboPcBx37YQVUKN9JH753S54nDxjRmOefbR0i08KTmaVgQ1lZnDXJr8JfrImmMqupZlOkPQX1mWlXfp+r1jGhA==",
9224+ "requires": {
9225+ "ci-info": "2.0.0",
9226+ "configstore": "^5.0.1",
9227+ "node-object-hash": "^2.0.0"
9228+ }
9229+ },
9230+ "regenerator-runtime": {
9231+ "version": "0.13.5",
9232+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
9233+ "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
91759234 }
91769235 }
91779236 },
@@ -9306,17 +9365,32 @@
93069365 }
93079366 },
93089367 "gatsby-transformer-sharp": {
9309− "version": "2.3.14",
9310− "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.3.14.tgz",
9311− "integrity": "sha512-tjz74lcJdAUFNtngmNBtyqXbIjb2Ux0GVeCpJsHfrWheJOsogPiO2Y3tp/NZJuonAWUawV8Mvr4TFjjF9p2GZw==",
9368+ "version": "2.4.2",
9369+ "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.4.2.tgz",
9370+ "integrity": "sha512-y8p2eBXEkSft411jyR3KOzzPRbjJ7i4aJzopB1lCQrYgOoxRtA/DeiAaANziRhJWoJUDa7M30iElizUy7n9Kzw==",
93129371 "requires": {
9313− "@babel/runtime": "^7.7.6",
9372+ "@babel/runtime": "^7.8.7",
93149373 "bluebird": "^3.7.2",
93159374 "fs-extra": "^8.1.0",
93169375 "potrace": "^2.1.2",
93179376 "probe-image-size": "^4.1.1",
93189377 "semver": "^5.7.1",
9319− "sharp": "^0.23.4"
9378+ "sharp": "^0.25.1"
9379+ },
9380+ "dependencies": {
9381+ "@babel/runtime": {
9382+ "version": "7.9.2",
9383+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.2.tgz",
9384+ "integrity": "sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==",
9385+ "requires": {
9386+ "regenerator-runtime": "^0.13.4"
9387+ }
9388+ },
9389+ "regenerator-runtime": {
9390+ "version": "0.13.5",
9391+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
9392+ "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
9393+ }
93209394 }
93219395 },
93229396 "gauge": {
@@ -10221,72 +10295,6 @@
1022110295 "replace-ext": "^1.0.0"
1022210296 },
1022310297 "dependencies": {
10224− "@nodelib/fs.stat": {
10225− "version": "1.1.3",
10226− "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
10227− "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
10228− },
10229− "array-union": {
10230− "version": "1.0.2",
10231− "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
10232− "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
10233− "requires": {
10234− "array-uniq": "^1.0.1"
10235− }
10236− },
10237− "arrify": {
10238− "version": "1.0.1",
10239− "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
10240− "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
10241− },
10242− "dir-glob": {
10243− "version": "2.0.0",
10244− "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.0.0.tgz",
10245− "integrity": "sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==",
10246− "requires": {
10247− "arrify": "^1.0.1",
10248− "path-type": "^3.0.0"
10249− }
10250− },
10251− "fast-glob": {
10252− "version": "2.2.7",
10253− "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
10254− "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
10255− "requires": {
10256− "@mrmlnc/readdir-enhanced": "^2.2.1",
10257− "@nodelib/fs.stat": "^1.1.2",
10258− "glob-parent": "^3.1.0",
10259− "is-glob": "^4.0.0",
10260− "merge2": "^1.2.3",
10261− "micromatch": "^3.1.10"
10262− }
10263− },
10264− "globby": {
10265− "version": "8.0.2",
10266− "resolved": "https://registry.npmjs.org/globby/-/globby-8.0.2.tgz",
10267− "integrity": "sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w==",
10268− "requires": {
10269− "array-union": "^1.0.1",
10270− "dir-glob": "2.0.0",
10271− "fast-glob": "^2.0.2",
10272− "glob": "^7.1.2",
10273− "ignore": "^3.3.5",
10274− "pify": "^3.0.0",
10275− "slash": "^1.0.0"
10276− },
10277− "dependencies": {
10278− "pify": {
10279− "version": "3.0.0",
10280− "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
10281− "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
10282− }
10283− }
10284− },
10285− "ignore": {
10286− "version": "3.3.10",
10287− "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
10288− "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug=="
10289− },
1029010298 "make-dir": {
1029110299 "version": "1.3.0",
1029210300 "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
@@ -10301,26 +10309,6 @@
1030110309 "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
1030210310 }
1030310311 }
10304− },
10305− "path-type": {
10306− "version": "3.0.0",
10307− "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
10308− "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
10309− "requires": {
10310− "pify": "^3.0.0"
10311− },
10312− "dependencies": {
10313− "pify": {
10314− "version": "3.0.0",
10315− "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
10316− "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
10317− }
10318− }
10319− },
10320− "slash": {
10321− "version": "1.0.0",
10322− "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
10323− "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
1032410312 }
1032510313 }
1032610314 },
@@ -12771,7 +12759,8 @@
1277112759 "nan": {
1277212760 "version": "2.14.0",
1277312761 "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
12774− "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
12762+ "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
12763+ "optional": true
1277512764 },
1277612765 "nanomatch": {
1277712766 "version": "1.2.13",
@@ -12792,9 +12781,9 @@
1279212781 }
1279312782 },
1279412783 "napi-build-utils": {
12795− "version": "1.0.1",
12796− "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.1.tgz",
12797− "integrity": "sha512-boQj1WFgQH3v4clhu3mTNfP+vOBxorDlE8EKiMjUlLG3C4qAESnn9AxIOkFgTR2c9LtzNjPrjS60cT27ZKBhaA=="
12784+ "version": "1.0.2",
12785+ "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
12786+ "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg=="
1279812787 },
1279912788 "natural-compare": {
1280012789 "version": "1.4.0",
@@ -12842,6 +12831,11 @@
1284212831 "semver": "^5.4.1"
1284312832 }
1284412833 },
12834+ "node-addon-api": {
12835+ "version": "2.0.0",
12836+ "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-2.0.0.tgz",
12837+ "integrity": "sha512-ASCL5U13as7HhOExbT6OlWJJUV/lLzL2voOSP1UVehpRD8FbSrSDjfScK/KwAvVTI5AS6r4VwbOMlIqtvRidnA=="
12838+ },
1284512839 "node-emoji": {
1284612840 "version": "1.10.0",
1284712841 "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
@@ -16554,25 +16548,25 @@
1655416548 "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
1655516549 },
1655616550 "sharp": {
16557− "version": "0.23.4",
16558− "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.23.4.tgz",
16559− "integrity": "sha512-fJMagt6cT0UDy9XCsgyLi0eiwWWhQRxbwGmqQT6sY8Av4s0SVsT/deg8fobBQCTDU5iXRgz0rAeXoE2LBZ8g+Q==",
16551+ "version": "0.25.2",
16552+ "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.25.2.tgz",
16553+ "integrity": "sha512-l1GN0kFNtJr3U9i9pt7a+vo2Ij0xv4tTKDIPx8W6G9WELhPwrMyZZJKAAQNBSI785XB4uZfS5Wpz8C9jWV4AFQ==",
1656016554 "requires": {
1656116555 "color": "^3.1.2",
1656216556 "detect-libc": "^1.0.3",
16563− "nan": "^2.14.0",
16557+ "node-addon-api": "^2.0.0",
1656416558 "npmlog": "^4.1.2",
1656516559 "prebuild-install": "^5.3.3",
16566− "semver": "^6.3.0",
16560+ "semver": "^7.1.3",
1656716561 "simple-get": "^3.1.0",
16568− "tar": "^5.0.5",
16562+ "tar": "^6.0.1",
1656916563 "tunnel-agent": "^0.6.0"
1657016564 },
1657116565 "dependencies": {
1657216566 "semver": {
16573− "version": "6.3.0",
16574− "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
16575− "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
16567+ "version": "7.1.3",
16568+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.1.3.tgz",
16569+ "integrity": "sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA=="
1657616570 }
1657716571 }
1657816572 },
@@ -17724,18 +17718,23 @@
1772417718 "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
1772517719 },
1772617720 "tar": {
17727− "version": "5.0.5",
17728− "resolved": "https://registry.npmjs.org/tar/-/tar-5.0.5.tgz",
17729− "integrity": "sha512-MNIgJddrV2TkuwChwcSNds/5E9VijOiw7kAc1y5hTNJoLDSuIyid2QtLYiCYNnICebpuvjhPQZsXwUL0O3l7OQ==",
17721+ "version": "6.0.1",
17722+ "resolved": "https://registry.npmjs.org/tar/-/tar-6.0.1.tgz",
17723+ "integrity": "sha512-bKhKrrz2FJJj5s7wynxy/fyxpE0CmCjmOQ1KV4KkgXFWOgoIT/NbTMnB1n+LFNrNk0SSBVGGxcK5AGsyC+pW5Q==",
1773017724 "requires": {
1773117725 "chownr": "^1.1.3",
1773217726 "fs-minipass": "^2.0.0",
1773317727 "minipass": "^3.0.0",
1773417728 "minizlib": "^2.1.0",
17735− "mkdirp": "^0.5.0",
17729+ "mkdirp": "^1.0.3",
1773617730 "yallist": "^4.0.0"
1773717731 },
1773817732 "dependencies": {
17733+ "mkdirp": {
17734+ "version": "1.0.3",
17735+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.3.tgz",
17736+ "integrity": "sha512-6uCP4Qc0sWsgMLy1EOqqS/3rjDHOEnsStVr/4vtAIK2Y5i2kA7lFFejYrpIyiN9w0pYf4ckeCYT9f1r1P9KX5g=="
17737+ },
1773917738 "yallist": {
1774017739 "version": "4.0.0",
1774117740 "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -17755,11 +17754,11 @@
1775517754 }
1775617755 },
1775717756 "tar-stream": {
17758− "version": "2.1.0",
17759− "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.0.tgz",
17760− "integrity": "sha512-+DAn4Nb4+gz6WZigRzKEZl1QuJVOLtAwwF+WUxy1fJ6X63CaGaUAxJRD2KEn1OMfcbCjySTYpNC6WmfQoIEOdw==",
17757+ "version": "2.1.2",
17758+ "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.2.tgz",
17759+ "integrity": "sha512-UaF6FoJ32WqALZGOIAApXx+OdxhekNMChu6axLJR85zMMjXKWFGjbIRe+J6P4UnRGg9rAwWvbTT0oI7hD/Un7Q==",
1776117760 "requires": {
17762− "bl": "^3.0.0",
17761+ "bl": "^4.0.1",
1776317762 "end-of-stream": "^1.4.1",
1776417763 "fs-constants": "^1.0.0",
1776517764 "inherits": "^2.0.3",
@@ -18145,9 +18144,9 @@
1814518144 },
1814618145 "dependencies": {
1814718146 "buffer": {
18148− "version": "5.4.3",
18149− "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.4.3.tgz",
18150− "integrity": "sha512-zvj65TkFeIt3i6aj5bIvJDzjjQQGs4o/sNoezg1F1kYap9Nu2jcUdpwzRSJTHMMzG0H7bZkn4rNQpImhuxWX2A==",
18147+ "version": "5.5.0",
18148+ "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.5.0.tgz",
18149+ "integrity": "sha512-9FTEDjLjwoAkEwyMGDjYJQN2gfRgOKBKRfiglhvibGbpeeU/pQn1bJxQqm32OD/AIeEuHxU9roxXxg34Byp/Ww==",
1815118150 "requires": {
1815218151 "base64-js": "^1.0.2",
1815318152 "ieee754": "^1.1.4"
blog/package.json+3−3
@@ -10,16 +10,16 @@
1010 "gatsby": "^2.19.45",
1111 "gatsby-image": "^2.2.8",
1212 "gatsby-plugin-alias-imports": "^1.0.5",
13− "gatsby-plugin-manifest": "^2.2.4",
13+ "gatsby-plugin-manifest": "^2.3.2",
1414 "gatsby-plugin-mdx": "^1.0.0",
1515 "gatsby-plugin-offline": "^2.2.4",
1616 "gatsby-plugin-purescript": "^2.0.0",
1717 "gatsby-plugin-react-helmet": "^3.1.3",
1818 "gatsby-plugin-react-svg": "^3.0.0",
19− "gatsby-plugin-sharp": "^2.2.9",
19+ "gatsby-plugin-sharp": "^2.5.2",
2020 "gatsby-plugin-web-font-loader": "^1.0.4",
2121 "gatsby-source-filesystem": "^2.1.8",
22− "gatsby-transformer-sharp": "^2.2.5",
22+ "gatsby-transformer-sharp": "^2.4.2",
2323 "mdx-utils": "^0.2.0",
2424 "monaco-editor": "^0.20.0",
2525 "monaco-editor-webpack-plugin": "^1.8.2",
blog/src/components/PSLayout.purs+42−38
@@ -2,18 +2,20 @@ module PSLayout where
22
33import Prelude
44
5+import Color (toHexString)
56import Data.Array as Array
6−import Data.Maybe (fromMaybe)
7+import Data.Maybe (Maybe(..), fromMaybe)
78import Data.Nullable (Nullable)
89import Data.Nullable as Nullable
910import Data.String as String
1011import Effect (Effect)
1112import JSS (jss, jssClasses)
13+import Justifill (justifill)
1214import Milkis.Impl (FetchImpl)
1315import React.Basic (JSX, ReactComponent)
1416import React.Basic.DOM (unsafeCreateDOMComponent)
1517import React.Basic.DOM as R
16−import React.Basic.Helpers (element_)
18+import React.Basic.Helpers (jsx)
1719import React.Basic.Hooks (ReactChildren, component, componentWithChildren, element, reactChildrenToArray)
1820import React.Basic.Hooks as React
1921import Yoga.CompileEditor.Component (mkCompileEditor)
@@ -62,10 +64,10 @@ mkLayout fetchImpl = do
6264 mdxProviderComponent <- mkMdxProviderComponent fetchImpl
6365 componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do
6466 pure
65− $ element_ themeProvider
67+ $ element themeProvider
6668 { theme: fromTheme darkTheme
6769 , children:
68− [ element_ mdxProviderComponent
70+ [ element mdxProviderComponent
6971 { children
7072 , siteInfo
7173 }
@@ -88,31 +90,30 @@ mkMdxProviderComponent fetchImpl = do
8890 h <- mkH
8991 p <- mkP
9092 useStyles <-
91− makeStylesJSS $ jssClasses \(theme :: CSSTheme) ->
92− { code:
93− jss
94− { fontFamily: theme.codeFontFamily
95− , backgroundColor: theme.interfaceColour
96− , fontSize: "10pt"
97− , border: "1px solid #383c39"
98− , padding: "3px"
99− , borderRadius: "3px"
100− }
101− , flexer:
102− jss
103− { display: "flex"
104− , flexDirection: "row"
93+ makeStylesJSS
94+ $ jssClasses \(theme ∷ CSSTheme) ->
95+ { code:
96+ { fontFamily: theme.codeFontFamily
97+ , backgroundColor: toHexString $ theme.interfaceColour
98+ , fontSize: "10pt"
99+ , border: "1px solid #383c39"
100+ , padding: "3px"
101+ , borderRadius: "3px"
102+ }
103+ , flexer:
104+ { display: "flex"
105+ , flexDirection: "row"
106+ }
105107 }
106− }
107108 componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do
108109 classes <- useStyles {}
109110 let
110− baseline child = element_ cssBaseline { kids: child }
111+ baseline child = element cssBaseline { kids: child }
111112
112113 siteInfoJSX =
113114 R.div
114115 { children:
115− [ element_ header { kids: [ R.text siteInfo.site.siteMetadata.title ], className: "" }
116+ [ jsx header { className: "" } [ R.text siteInfo.site.siteMetadata.title ]
116117 , element sidebar { links: siteInfo.site.siteMetadata.menuLinks }
117118 , R.div_ (reactChildrenToArray children)
118119 ]
@@ -121,17 +122,17 @@ mkMdxProviderComponent fetchImpl = do
121122 mdxComponents =
122123 { h1:
123124 \props ->
124− element_ h { level: H2, text: props.children }
125+ element h ({ level: H2, text: props.children, className: Nothing })
125126 , h2:
126127 \props ->
127− element_ h { level: H3, text: props.children }
128+ element h { level: H3, text: props.children, className: Nothing }
128129 , h3:
129130 \props ->
130− element_ h { level: H4, text: props.children }
131+ element h { level: H4, text: props.children , className: Nothing}
131132 , p:
132133 \props ->
133134 R.div
134− { children: [ element_ p { text: props.children } ]
135+ { children: [ element p { text: props.children } ]
135136 }
136137 , inlineCode:
137138 \props -> do
@@ -164,7 +165,7 @@ mkMdxProviderComponent fetchImpl = do
164165
165166 language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))
166167 if isCode then
167− element_ editor
168+ element editor
168169 { initialCode: fromMaybe "" codeQ
169170 , height
170171 , language
@@ -185,22 +186,25 @@ mkMdxProviderComponent fetchImpl = do
185186mkSidebar = do
186187 withSidebar <- WithSidebar.makeComponent
187188 useStyles <-
188− makeStylesJSS $ jssClasses \(theme :: CSSTheme) ->
189− { flexer:
190− jss
191− { display: "flex"
192− , flexDirection: "row"
193− , width: "300px"
194− , height: "300px"
189+ makeStylesJSS
190+ $ jssClasses \(theme ∷ CSSTheme) ->
191+ { flexer:
192+ jss
193+ { display: "flex"
194+ , flexDirection: "row"
195+ , width: "300px"
196+ , height: "300px"
197+ }
195198 }
196− }
197199 component "Sidebar" \{ links } -> React.do
198200 classes <- useStyles {}
199201 pure
200− $ element_ withSidebar
201− { sidebarChildren: [ R.div_ [ R.text "hahahaha"] ]
202− , notSidebarChildren: []
203− }
202+ $ element withSidebar
203+ ( justifill
204+ { sidebarChildren: [ R.div_ [ R.text "hahahaha" ] ]
205+ , notSidebarChildren: [] ∷ Array JSX
206+ }
207+ )
204208
205209foreign import mdxProvider ∷
206210 ∀ r.
components/.vscode/settings.json+4−1
@@ -1,5 +1,8 @@
11{
22 "editor.formatOnSave": true,
33 "purescript.buildCommand": "npx spago build --purs-args '--json-errors'",
4− "search.exclude": { "**/.history": true }
4+ "search.exclude": {
5+ "**/.history": true
6+ },
7+ "purescript.addSpagoSources": true
58}
components/src/Storybook/Decorator/FullScreen.purs+17−17
@@ -2,8 +2,7 @@ module Storybook.Decorator.FullScreen where
22
33import Prelude
44import Data.Array (find)
5−import Data.Map (Map)
6−import Data.Traversable (for_, traverse_)
5+import Data.Traversable (traverse_)
76import Effect (Effect)
87import JSS (jss, jssClasses)
98import React.Basic (JSX)
@@ -13,7 +12,6 @@ import React.Basic.DOM.Events (targetValue)
1312import React.Basic.Events (handler)
1413import React.Basic.Hooks (ReactComponent, component, element, useEffect, useState, (/\))
1514import React.Basic.Hooks as React
16−import Simple.JSON (readJSON_, writeJSON)
1715import Web.HTML (window)
1816import Web.HTML.Window (localStorage)
1917import Web.Storage.Storage (getItem, setItem)
@@ -52,15 +50,16 @@ fullScreenDecorator mkChild = do
5250 ]
5351 }
5452
55−type ThemesWithNames
56− = Map String CSSTheme
57−
58−type DefaultTheme
53+type NamedTheme
5954 = { name ∷ String, theme ∷ CSSTheme }
6055
6156mkThemeSwitcher ∷
6257 Effect
63− ( ReactComponent { defaultTheme ∷ DefaultTheme, themes ∷ Array DefaultTheme, child ∷ JSX }
58+ ( ReactComponent
59+ { defaultTheme ∷ NamedTheme
60+ , themes ∷ Array NamedTheme
61+ , child ∷ JSX
62+ }
6463 )
6564mkThemeSwitcher = do
6665 themeProvider <- mkThemeProvider
@@ -80,20 +79,21 @@ mkThemeSwitcher = do
8079 component "ThemeSwitcher" \{ defaultTheme, themes, child } -> React.do
8180 { theme, name } /\ modTheme <- useState defaultTheme
8281 useEffect unit do
83− maybeSaved <- getItem "theme" storage <#> (_ >>= readJSON_)
84− for_ maybeSaved (modTheme <<< const)
82+ maybeSaved <- getItem "theme" storage
83+ traverse_ (modTheme <<< const) do
84+ saved <- maybeSaved
85+ find (\x -> x.name == saved) themes
86+ pure mempty
87+ useEffect name do
88+ setItem "theme" name storage
8589 pure mempty
8690 classes <- useStyles {}
87− let
88− setTheme newTheme = do
89− setItem "theme" (writeJSON newTheme) storage
90− modTheme (const newTheme)
9191 let
9292 handleClicked maybeValue =
93− traverse_ setTheme do
93+ traverse_ (modTheme <<< const) do
9494 value <- maybeValue
95− themes # find \x -> x.name == value
96− let
95+ find (\x -> x.name == value) themes
96+
9797 themeSelect =
9898 R.select
9999 { onChange: handler targetValue handleClicked
components/src/Yoga/Box/Styles.purs+3−2
@@ -1,6 +1,7 @@
11module Yoga.Box.Styles where
22
33import Prelude
4+import Color (toHexString)
45import Data.Maybe (Maybe)
56import JSS (JSSClasses, JSSElem, jssClasses)
67import Yoga.Helpers ((?||))
@@ -25,8 +26,8 @@ styles =
2526 { box:
2627 \props ->
2728 { padding: props.padding ?|| "var(--s1)"
28− , "--colour-light": theme.backgroundColour
29− , "--colour-dark": theme.textColour
29+ , "--colour-light": theme.backgroundColour # toHexString
30+ , "--colour-dark": theme.textColour # toHexString
3031 , color: "var(--colour-dark)"
3132 , backgroundColor: "var(--colour-light)"
3233 , border: props.border ?|| "0 solid"
components/src/Yoga/Button/Component.purs+66−43
@@ -1,12 +1,11 @@
11module Yoga.Button.Component where
22
33import Prelude
4−import CSS (ColorSpace(..), hotpink, mix, toHexString)
4+import CSS (Color, ColorSpace(..), mix, toHexString)
55import CSS as Color
6−import Color (fromHexString)
76import Data.Foldable (intercalate)
87import Data.Interpolate (i)
9−import Data.Maybe (Maybe, fromMaybe)
8+import Data.Maybe (Maybe)
109import Data.Monoid (guard)
1110import Effect (Effect)
1211import JSS (JSSClasses, JSSElem, jssClasses)
@@ -16,7 +15,7 @@ import React.Basic.Events (EventHandler)
1615import React.Basic.Hooks (ReactComponent, component)
1716import React.Basic.Hooks as React
1817import Yoga.Helpers ((?||))
19−import Yoga.Theme (increaseContrast, unsafeAlaColor)
18+import Yoga.Theme (increaseContrast, unsafeWithAlpha)
2019import Yoga.Theme.Styles (makeStylesJSS)
2120import Yoga.Theme.Types (CSSTheme, YogaTheme)
2221
@@ -38,24 +37,30 @@ highlightStyles =
3837 $ \(theme ∷ CSSTheme) ->
3938 { highlightedButton:
4039 { background:
41− Color.cssStringRGBA do
42− let
43− col = Color.fromHexString theme.backgroundColour ?|| hotpink
40+ linearGradient
41+ ( if theme.isLight then
42+ "180deg"
43+ else
44+ "0deg"
45+ )
46+ [ do
47+ let
48+ col = theme.highlightColourRotatedBackwards
49+
50+ { r, g, b, a } = Color.toRGBA (Color.saturate (10.0) col)
51+ Color.rgba r g b 0.5
52+ , do
53+ let
54+ col = theme.highlightColourRotatedForwards
4455
45− { r, g, b, a } = Color.toRGBA (col)
46− Color.rgba r g b 0.2
56+ { r, g, b, a } = Color.toRGBA (Color.saturate (10.0) col)
57+ Color.rgba r g b 0.5
58+ ]
4759 , "&:active":
4860 { background:
49− linearGradient [ "145deg", theme.highlightColourDark, theme.highlightColour ]
61+ linearGradient "145deg" [ theme.highlightColourDark, theme.highlightColour ]
5062 }
51− , color:
52− fromMaybe theme.textColour do
53− hlc <- theme.highlightColour # fromHexString
54− hlcd <- theme.highlightColourDark # fromHexString
55− text <- theme.textColour # fromHexString
56− tc <- pure $ if Color.isLight hlcd then text else Color.complementary text
57− -- pure $ increaseContrast hlcd Color.white # toHexString
58− pure $ Color.white # toHexString
63+ , color: Color.white
5964 }
6065 }
6166
@@ -69,12 +74,20 @@ styles =
6974 jssClasses
7075 $ \(theme ∷ CSSTheme) ->
7176 { buttonContainer:
72− { padding: "2px"
73− , background: linearGradient [ "135deg", theme.highlightColourRotatedBackwards, theme.highlightColourRotatedForwards ]
77+ { padding: "var(--s-4)"
78+ , background:
79+ linearGradient "135deg"
80+ [ theme.highlightColourRotatedBackwards
81+ , theme.highlightColourRotatedForwards
82+ ]
7483 , borderRadius: "var(--s1)"
7584 , height: "calc(var(--s1) - var(--s1-3))"
7685 , minWidth: "var(--s2)"
7786 , boxSizing: "border-box"
87+ , boxShadow:
88+ ( unsafeWithAlpha 0.15 "#000000"
89+ )
90+ <> " 0px 1px 2px 2px"
7891 }
7992 , "@keyframes gradientBG":
8093 { "0%": { backgroundPosition: "0% 50%" }
@@ -83,15 +96,22 @@ styles =
8396 }
8497 , btn:
8598 { width: "100%"
86− , background: linearGradient [ "180deg", theme.backgroundColourLightest, theme.backgroundColourDarkest ]
99+ , background:
100+ linearGradient "180deg"
101+ [ Color.darken 0.05 theme.backgroundColour
102+ , Color.darken 0.10 theme.backgroundColour
103+ ]
87104 , color:
88− theme.highlightColour
89− # unsafeAlaColor \c -> if Color.isLight c then Color.darken 0.2 c else Color.lighten 0.2 c
105+ let
106+ c = theme.highlightColour
107+ in
108+ if Color.isLight c then Color.rotateHue (-10.0) c else Color.lighten 0.2 c
90109 , borderRadius: "var(--s1)"
91110 , border: "0"
92− , height: "var(--s2)"
93− , fontSize: "var(--s-1)"
94− , fontFamily: theme.textFontFamily
111+ , height: "calc(var(--s2) + var(--s-4) - 2px)"
112+ , fontSize: "calc(var(--s-1))"
113+ , fontFamily: "Rubik Regular"
114+ , fontWeight: "600"
95115 , padding: "0 var(--s0) 0 var(--s0)"
96116 , letterSpacing: "var(--s-5)"
97117 , textTransform: "uppercase"
@@ -99,41 +119,44 @@ styles =
99119 , "&:focus":
100120 { background:
101121 linearGradient
102− [ "145deg"
103− , theme.interfaceColourDarker
122+ "145deg"
123+ [ theme.interfaceColourDarker
104124 , theme.highlightColourDark
105125 , theme.highlightColour
106126 ]
107127 , color:
108− fromMaybe theme.textColour do
109− hlc <- theme.highlightColour # fromHexString
110− hlcd <- theme.highlightColourDark # fromHexString
128+ do
111129 let
130+ hlc = theme.highlightColour
131+
132+ hlcd = theme.highlightColourDark
133+
112134 bg = if theme.isLight then hlc else mix HSL hlc hlcd 0.5
113− tc <- theme.textColour # fromHexString
114− pure $ increaseContrast bg tc # toHexString
135+
136+ tc = theme.textColour
137+ increaseContrast bg tc
115138 , backgroundSize: "200% 400%, 100% 100%"
116139 , animation: "$gradientBG 3s ease infinite"
117140 }
118141 , "&:active":
119142 { boxShadow:
120143 ( i "inset 6px 6px 6px "
121− theme.backgroundColourDarkest
144+ (toHexString theme.backgroundColourDarkest)
122145 ", inset -6px -6px 6px "
123− theme.backgroundColourLightest ∷
124− String
125− )
146+ (toHexString theme.backgroundColourLightest)
147+ ) ∷
148+ String
126149 , background:
127150 linearGradient
128− [ "145deg"
129− , theme.backgroundColourDarker
151+ "145deg"
152+ [ theme.backgroundColourDarker
130153 , theme.backgroundColourLighter
131154 ]
132155 }
133156 , "&:disabled":
134157 { boxShadow: "0 0 0 black"
135− , background: theme.backgroundColour
136− , border: "1px dotted " <> theme.interfaceColourLightest
158+ , background: theme.grey
159+ , border: "1px dotted " <> toHexString theme.interfaceColourLightest
137160 , textDecoration: "line-through"
138161 , textDecorationColor: theme.red
139162 }
@@ -176,5 +199,5 @@ mkButton = do
176199 ]
177200 }
178201
179−linearGradient ∷ Array String -> String
180−linearGradient elems = "linear-gradient(" <> intercalate "," elems <> ")"
202+linearGradient ∷ String -> Array Color -> String
203+linearGradient direction elems = "linear-gradient(" <> direction <> "," <> intercalate "," (map toHexString elems) <> ")"
components/src/Yoga/Card/Component.purs+33−36
@@ -1,9 +1,10 @@
11module Yoga.Card.Component where
22
33import Prelude
4+import Color (toHexString)
45import Data.Interpolate (i)
56import Effect (Effect)
6−import JSS (JSSClasses, JSSElem, jss, jssClasses)
7+import JSS (JSSClasses, JSSElem, jssClasses)
78import React.Basic (JSX)
89import React.Basic.DOM as R
910import React.Basic.Hooks (ReactComponent, component)
@@ -18,16 +19,15 @@ styles ∷ JSSClasses YogaTheme StyleProps ( card ∷ JSSElem StyleProps )
1819styles =
1920 jssClasses \(theme ∷ CSSTheme) ->
2021 { card:
21− jss
22− { background: (i "linear-gradient(145deg," theme.backgroundColourDarker ", " theme.backgroundColourLighter ")") ∷ String
23− , color: theme.textColour
24− , fontFamily: theme.textFontFamily
25− , margin: "20px"
26− , boxShadow:
27− (i "30px 30px 60px " theme.backgroundColourDarker ", -30px -30px 60px " theme.backgroundColourLighter ";") ∷ String
28− , borderRadius: "15px"
29− , padding: "36px 40px 32px 40px"
30− }
22+ { background: (i "linear-gradient(145deg," (toHexString theme.backgroundColourDarker) ", " (toHexString theme.backgroundColourLighter) ")") ∷ String
23+ , color: theme.textColour # toHexString
24+ , fontFamily: theme.textFontFamily
25+ , margin: "20px"
26+ , boxShadow:
27+ (i "30px 30px 60px " (toHexString theme.backgroundColourDarker) ", -30px -30px 60px " (toHexString theme.backgroundColourLighter) ";") ∷ String
28+ , borderRadius: "15px"
29+ , padding: "36px 40px 32px 40px"
30+ }
3131 }
3232
3333mkCard ∷
@@ -58,13 +58,12 @@ mkCardTitle = do
5858 makeStylesJSS
5959 $ jssClasses \(theme ∷ CSSTheme) ->
6060 { cardtitle:
61− jss
62− { color: theme.textColourLightest
63− , fontSize: "1.2em"
64− , fontWeight: "400"
65− , fontFamily: theme.headingFontFamily
66− , padding: "4px 8px"
67− }
61+ { color: theme.textColourLightest # toHexString
62+ , fontSize: "1.2em"
63+ , fontWeight: "400"
64+ , fontFamily: theme.headingFontFamily
65+ , padding: "4px 8px toHexString"
66+ }
6867 }
6968 component "CardTitle" \{ kids } -> React.do
7069 classNames <- useStyles {}
@@ -85,14 +84,13 @@ mkCardSubtitle = do
8584 makeStylesJSS
8685 $ jssClasses \(theme ∷ CSSTheme) ->
8786 { cardtitle:
88− jss
89− { color: theme.textColourDarker
90− , opacity: "0.8"
91− , fontSize: "1.0em"
92− , fontWeight: "500"
93− , fontFamily: theme.headingFontFamily
94− , padding: "4px 8px 22px 8px"
95− }
87+ { color: theme.textColourDarker # toHexString
88+ , opacity: "0.8"
89+ , fontSize: "1.0em"
90+ , fontWeight: "500"
91+ , fontFamily: theme.headingFontFamily
92+ , padding: "4px 8px 22px 8px"
93+ }
9694 }
9795 component "CardSubtitle" \{ kids } -> React.do
9896 classNames <- useStyles {}
@@ -113,16 +111,15 @@ mkCardContent = do
113111 makeStylesJSS
114112 $ jssClasses \(theme ∷ CSSTheme) ->
115113 { cardContent:
116− jss
117− { fontFamily: theme.textFontFamily
118− , color: theme.textColourDarker
119− , fontSize: "0.8em"
120− , fontWeight: "300"
121− , "WebkitFontSmoothing": "subpixel-antialiased"
122− , textAlign: "justify"
123− , hyphens: "auto"
124− , padding: "4px 8px 22px 8px"
125− }
114+ { fontFamily: theme.textFontFamily
115+ , color: theme.textColourDarker # toHexString
116+ , fontSize: "0.8em"
117+ , fontWeight: "300"
118+ , "WebkitFontSmoothing": "subpixel-antialiased"
119+ , textAlign: "justify"
120+ , hyphens: "auto"
121+ , padding: "4px 8px 22px 8px"
122+ }
126123 }
127124 component "CardContent" \{ kids } -> React.do
128125 classNames <- useStyles {}
components/src/Yoga/CompileEditor/Component.purs+19−27
@@ -1,7 +1,7 @@
11module Yoga.CompileEditor.Component where
22
33import Prelude hiding (add)
4−import CSS (JustifyContentValue(..), flexEnd)
4+import CSS (JustifyContentValue(..), flexEnd, toHexString)
55import Data.Array (intercalate)
66import Data.Either (Either(..))
77import Data.Foldable (for_)
@@ -51,16 +51,13 @@ mkCompileEditor fetch = do
5151 , padding: "20px"
5252 , marginTop: "0px"
5353 , borderRadius: "12px"
54− , boxShadow: i "22px 22px 24px " theme.backgroundColourDarker ", -22px -22px 24px " theme.backgroundColourLighter ∷ String
54+ , boxShadow: i "22px 22px 24px " (toHexString theme.backgroundColourDarker) ", -22px -22px 24px " (toHexString theme.backgroundColourLighter) ∷ String
5555 , display: "flex"
5656 , flexDirection: "column"
5757 , minWidth: theme.measure
5858 }
5959 , card:
60− { marginLeft: "35px"
61− , marginRight: "35px"
62− , opacity: 0
63− , zIndex: 0
60+ { zIndex: 0
6461 }
6562 , cardHidden: { opacity: 0 }
6663 , compileError: { color: theme.red, opacity: 1, transition: "opacity 2.0s ease" }
@@ -99,28 +96,23 @@ mkCompileEditor fetch = do
9996 res <- compileAndRun (M.fetch fetch) { code }
10097 setCompileResult (Just res) # liftEffect
10198 pure
102− $ fragment
103− [ R.div
104− { children:
105− pure
106− $ jsx stack { space: "--s0" }
107− [ element editor { onLoad, height, language }
108− , jsx cluster { justify: JustifyContentValue flexEnd }
109− [ R.div_
110− [ jsx button
111− { onClick: handler_ reset
112− }
113− [ R.text "Reset" ]
114− , jsx button
115− { buttonType: HighlightedButton
116− , onClick: handler_ compile
117− }
118− [ R.text "Compile" ]
119− ]
120− ]
99+ $ jsx stack { space: "--s1" }
100+ [ jsx stack { space: "--s0", className: classes.editor }
101+ [ element editor { onLoad, height, language }
102+ , jsx cluster { justify: JustifyContentValue flexEnd }
103+ [ R.div_
104+ [ jsx button
105+ { onClick: handler_ reset
106+ }
107+ [ R.text "Reset" ]
108+ , jsx button
109+ { buttonType: HighlightedButton
110+ , onClick: handler_ compile
111+ }
112+ [ R.text "Run" ]
121113 ]
122− , className: classes.editor
123− }
114+ ]
115+ ]
124116 , element card
125117 { kids: [ R.text (compileResultToString compileResult) ]
126118 , className: classes.card <> " " <> compileResultToClass compileResult
components/src/Yoga/Font/Rubik.js+2−2
@@ -1,6 +1,6 @@
11exports.rubikRegularwoff2 = require("../../../assets/fonts/Rubik-Regular.woff2");
2−exports.rubikBoldwoff2 = require("../../../assets/fonts/Rubik-Bold.woff2");
3−exports.rubikBoldItalicwoff2 = require("../../../assets/fonts/Rubik-BoldItalic.woff2");
2+exports.rubikMediumwoff2 = require("../../../assets/fonts/Rubik-Medium.woff2");
3+exports.rubikMediumItalicwoff2 = require("../../../assets/fonts/Rubik-MediumItalic.woff2");
44exports.rubikItalicwoff2 = require("../../../assets/fonts/Rubik-Italic.woff2");
55exports.rubikLightwoff2 = require("../../../assets/fonts/Rubik-Light.woff2");
66exports.rubikLightItalicwoff2 = require("../../../assets/fonts/Rubik-LightItalic.woff2");
components/src/Yoga/Font/Rubik.purs+17−12
@@ -4,32 +4,32 @@ import Prelude
44import Unsafe.Coerce (unsafeCoerce)
55import Yoga.Font (Font, FontFamily)
66
7−foreign import rubikRegularwoff2 :: Font
7+foreign import rubikRegularwoff2 ∷ Font
88
9−foreign import rubikBoldwoff2 :: Font
9+foreign import rubikMediumwoff2 ∷ Font
1010
11−foreign import rubikBoldItalicwoff2 :: Font
11+foreign import rubikMediumItalicwoff2 ∷ Font
1212
13−foreign import rubikItalicwoff2 :: Font
13+foreign import rubikItalicwoff2 ∷ Font
1414
15−foreign import rubikLightwoff2 :: Font
15+foreign import rubikLightwoff2 ∷ Font
1616
17−foreign import rubikLightItalicwoff2 :: Font
17+foreign import rubikLightItalicwoff2 ∷ Font
1818
19−fontFamilies :: Array FontFamily
19+fontFamilies ∷ Array FontFamily
2020fontFamilies =
2121 [ { fontFamily: "Rubik"
2222 , src: "url(" <> unsafeCoerce rubikItalicwoff2 <> """) format("woff2")"""
2323 , fontWeight: "normal"
2424 , fontStyle: "italic"
2525 }
26− , { fontFamily: "Rubik"
27− , src: "url(" <> unsafeCoerce rubikBoldwoff2 <> """) format("woff2")"""
28− , fontWeight: "bold"
26+ , { fontFamily: "Rubik Medium"
27+ , src: "url(" <> unsafeCoerce rubikMediumwoff2 <> """) format("woff2")"""
28+ , fontWeight: "400"
2929 , fontStyle: "normal"
3030 }
3131 , { fontFamily: "Rubik"
32− , src: "url(" <> unsafeCoerce rubikBoldItalicwoff2 <> """) format("woff2")"""
32+ , src: "url(" <> unsafeCoerce rubikMediumItalicwoff2 <> """) format("woff2")"""
3333 , fontWeight: "bold"
3434 , fontStyle: "italic"
3535 }
@@ -38,12 +38,17 @@ fontFamilies =
3838 , fontWeight: "400"
3939 , fontStyle: "normal"
4040 }
41+ , { fontFamily: "Rubik Light"
42+ , src: "url(" <> unsafeCoerce rubikLightwoff2 <> """) format("woff2")"""
43+ , fontWeight: "400"
44+ , fontStyle: "normal"
45+ }
4146 , { fontFamily: "Rubik Light"
4247 , src: "url(" <> unsafeCoerce rubikLightItalicwoff2 <> """) format("woff2")"""
4348 , fontWeight: "400"
4449 , fontStyle: "italic"
4550 }
46− , { fontFamily: "Rubik"
51+ , { fontFamily: "Rubik Regular"
4752 , src: "url(" <> unsafeCoerce rubikRegularwoff2 <> """) format("woff2")"""
4853 , fontWeight: "normal"
4954 , fontStyle: "normal"
components/src/Yoga/Header/Component.purs+19−20
@@ -1,9 +1,10 @@
11module Yoga.Header.Component where
22
33import Prelude
4+import Color (toHexString)
45import Data.Interpolate (i)
56import Effect (Effect)
6−import JSS (jss, jssClasses)
7+import JSS (jssClasses)
78import React.Basic (JSX)
89import React.Basic.DOM as R
910import React.Basic.Hooks (ReactComponent, component, element)
@@ -24,26 +25,24 @@ mkHeader = do
2425 makeStylesJSS
2526 $ jssClasses \(theme ∷ CSSTheme) ->
2627 { card:
27− jss
28− { background: theme.backgroundColour
29− , borderBottom: "1px solid " <> theme.backgroundColourLightest
30− , borderRight: "1px solid " <> theme.backgroundColourLightest
31− , borderLeft: "1px solid " <> theme.backgroundColourLightest
32− , color: theme.textColour
33− , fontFamily: theme.textFontFamily
34− , fontSize: "2em"
35− , padding: "20px"
36− , display: "flex"
37− , flex: "0 0 100%"
38− , boxShadow:
39− (i "30px 30px 60px " theme.backgroundColourDarker ", -30px -30px 60px " theme.backgroundColourLighter ";") ∷ String
40− }
28+ { background: theme.backgroundColour # toHexString
29+ , borderBottom: "1px solid " <> (theme.backgroundColourLightest # toHexString)
30+ , borderRight: "1px solid " <> (theme.backgroundColourLightest # toHexString)
31+ , borderLeft: "1px solid " <> (theme.backgroundColourLightest # toHexString)
32+ , color: theme.textColour # toHexString
33+ , fontFamily: theme.textFontFamily
34+ , fontSize: "2em"
35+ , padding: "20px"
36+ , display: "flex"
37+ , flex: "0 0 100%"
38+ , boxShadow:
39+ (i "30px 30px 60px " (toHexString theme.backgroundColourDarker) ", -30px -30px 60px " (toHexString theme.backgroundColourLighter) ";") ∷ String
40+ }
4141 , logo:
42− jss
43− { fill: theme.textColour
44− , marginRight: "10px"
45− , marginBottom: "5px"
46− }
42+ { fill: theme.textColour # toHexString
43+ , marginRight: "10px"
44+ , marginBottom: "5px"
45+ }
4746 }
4847 component "Header" \{ kids, className } -> React.do
4948 classNames <- useStyles {}
components/src/Yoga/JSS.purs+4−1
@@ -1,7 +1,7 @@
11module JSS where
22
33import Prelude
4−import CSS (Key(..), Rule(..), StyleM, Value(..), plain, runS)
4+import CSS (Color, Key(..), Rule(..), StyleM, Value(..), cssStringRGBA, plain, runS)
55import Data.Foldable (foldMap)
66import Data.Symbol (class IsSymbol, SProxy(..), reflectSymbol)
77import Debug.Trace (spy)
@@ -90,6 +90,9 @@ class JSSAble p a | a -> p where
9090instance jssAbleJssElem ∷ JSSAble p (JSSElem p) where
9191 jss = identity
9292
93+instance jssAbleColor ∷ JSSAble p Color where
94+ jss c = PrimitiveJss (coerce (cssStringRGBA c))
95+
9396instance jssAbleString ∷ JSSAble p String where
9497 jss = coerce >>> PrimitiveJss
9598
components/src/Yoga/Modal/Styles.purs+3−4
@@ -1,9 +1,8 @@
11module Yoga.Modal.Styles where
22
33import Prelude hiding (top)
4−import CSS (backgroundColor, black, borderRadius, boxShadow, fromHexString, hotpink, nil, rem)
4+import CSS (backgroundColor, black, borderRadius, boxShadow, nil, rem, toHexString)
55import JSS (JSSClasses, JSSElem, jssClasses)
6−import Yoga.Helpers ((?||))
76import Yoga.Theme.Types (YogaTheme)
87
98type PropsR
@@ -36,11 +35,11 @@ styles =
3635 }
3736 , box:
3837 do
39− backgroundColor (fromHexString theme.interfaceColour ?|| hotpink)
38+ backgroundColor theme.interfaceColour
4039 boxShadow nil nil (3.5 # rem) black
4140 borderRadius boxBorderRadius boxBorderRadius boxBorderRadius boxBorderRadius
4241 , closeIcon:
43− { fill: theme.backgroundColour
42+ { fill: toHexString theme.backgroundColour
4443 , width: "calc(0.67 * var(--s1))"
4544 , height: "calc(0.67 * var(--s1))"
4645 , margin: 0
components/src/Yoga/Monaco/Editor.purs+11−11
@@ -1,6 +1,8 @@
11module Yoga.Editor where
22
33import Prelude
4+import CSS (backgroundColor, borderBox, boxSizing, margin, pct, unitless, width)
5+import CSS.Overflow (hidden, overflowY)
46import Control.Promise (Promise)
57import Control.Promise as Promise
68import Data.Maybe (Maybe(..), maybe)
@@ -12,7 +14,7 @@ import Effect.Aff.Compat (EffectFn1)
1214import Effect.Class (liftEffect)
1315import Effect.Uncurried (EffectFn2, mkEffectFn1, mkEffectFn2)
1416import Foreign (Foreign, unsafeToForeign)
15−import JSS (jss, jssClasses)
17+import JSS (jssClasses)
1618import Prim.Row (class Union)
1719import React.Basic (JSX, ReactComponent, Ref, element, fragment)
1820import React.Basic.DOM as R
@@ -95,16 +97,14 @@ mkEditor = do
9597 useStyles <-
9698 makeStylesJSS
9799 $ jssClasses \(theme ∷ CSSTheme) ->
98− ( { wrapper:
99− jss
100− { margin: "0"
101− , boxSizing: "border-box"
102− , width: "100%"
103− , overflowY: "hidden"
104− , backgroundColor: theme.backgroundColour
105− }
106− }
107− )
100+ { wrapper:
101+ do
102+ margin (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) (0.0 # unitless)
103+ boxSizing borderBox
104+ width (100.0 # pct)
105+ overflowY hidden
106+ backgroundColor theme.backgroundColour
107+ }
108108 component "Editor" \{ onLoad, height, language } -> React.do
109109 classes <- useStyles {}
110110 maybeEditor /\ modifyEditor <- useState Nothing
components/src/Yoga/SVG/Icon.purs+12−14
@@ -1,9 +1,10 @@
11module Yoga.SVG.Icon where
22
33import Prelude
4+import Color (toHexString)
45import Data.Monoid (guard)
56import Effect (Effect)
6−import JSS (jss, jssClasses)
7+import JSS (jssClasses)
78import Prim.Row (class Union)
89import React.Basic.DOM.SVG as SVG
910import React.Basic.Events (EventHandler)
@@ -105,22 +106,19 @@ mkMenu = do
105106 makeStylesJSS
106107 $ jssClasses \(theme ∷ CSSTheme) ->
107108 { arrow:
108− jss
109− { fill: theme.textColour
110− , transition: "0.3s ease-out"
111− }
109+ { fill: theme.textColour # toHexString
110+ , transition: "0.3s ease-out"
111+ }
112112 , arrowInactive:
113− jss
114− { fillOpacity: ".1"
115− }
113+ { fillOpacity: ".1"
114+ }
116115 , svg:
117− jss
118− { width: "100%"
119− , height: "100%"
120− , "&:hover":
121− { fill: theme.backgroundColour
122− }
116+ { width: "100%"
117+ , height: "100%"
118+ , "&:hover":
119+ { fill: theme.backgroundColour # toHexString
123120 }
121+ }
124122 }
125123 component "MenuIcon" \{ activeArrowDirection } -> React.do
126124 classes <- useStyles {}
components/src/Yoga/SVG/Image.purs+66−83
@@ -1,6 +1,7 @@
11module Yoga.SVG.Image where
22
33import Prelude
4+import Color (toHexString)
45import Data.Array (elem, foldl, head, intercalate, snoc, uncons, zip, (:))
56import Data.Int (round, toNumber)
67import Data.Maybe (Maybe(..), maybe)
@@ -8,7 +9,7 @@ import Data.String (codePointFromChar)
89import Data.String as String
910import Data.Tuple.Nested ((/\))
1011import Effect (Effect)
11−import JSS (jss, jssClasses)
12+import JSS (jssClasses)
1213import Random.PseudoRandom (mkSeed, randomRs)
1314import React.Basic (JSX, element)
1415import React.Basic.DOM (unsafeCreateDOMComponent)
@@ -32,104 +33,86 @@ mkLandingPageBackground = do
3233 makeStylesJSS
3334 $ jssClasses \(theme ∷ CSSTheme) ->
3435 { laptopBackground:
35− jss
36− { fill: theme.backgroundColour
37− }
36+ { fill: theme.backgroundColour # toHexString
37+ }
3838 , lightEllipsis:
39− jss
40− { cx: if theme.isLight then "721" else "175"
41− , cy: if theme.isLight then "355" else "310"
42− , rx: if theme.isLight then "647" else "330"
43− , ry: if theme.isLight then "310" else "252"
44− }
39+ { cx: if theme.isLight then "721" else "175"
40+ , cy: if theme.isLight then "355" else "310"
41+ , rx: if theme.isLight then "647" else "330"
42+ , ry: if theme.isLight then "310" else "252"
43+ }
4544 , laptopBody:
46− jss
47− { fill: if theme.isLight then "url(#_Linear9)" else "url(#_Linear12)"
48− }
45+ { fill: if theme.isLight then "url(#_Linear9)" else "url(#_Linear12)"
46+ }
4947 , screenText:
50− jss
51− { fontFamily: theme.codeFontFamily
52− , fontSize: "0.85em"
53− , fill: theme.textColour
54− }
55− , keyword: jss { fill: theme.green }
56− , typeName: jss { fill: theme.pink }
48+ { fontFamily: theme.codeFontFamily
49+ , fontSize: "0.85em"
50+ , fill: theme.textColour # toHexString
51+ }
52+ , keyword: { fill: theme.green # toHexString }
53+ , typeName: { fill: theme.pink # toHexString }
5754 , "@keyframes animatedCursor":
58− jss
59− { "0%": { opacity: "0.0" }
60− , "50%": { opacity: "1.0" }
61− }
55+ { "0%": { opacity: "0.0" }
56+ , "50%": { opacity: "1.0" }
57+ }
6258 , cursor:
63− jss
64− { animation: "$animatedCursor 0.5s linear infinite"
65− , animationDirection: "alternate"
66− }
59+ { animation: "$animatedCursor 0.5s linear infinite"
60+ , animationDirection: "alternate"
61+ }
6762 , "@keyframes movingCloud1":
68− jss
69− { "0%": { transform: "translate3d(-140%, 4%, 0)" }
70− , "100%": { transform: "translate3d(70%, -4%, 0)" }
71− }
63+ { "0%": { transform: "translate3d(-140%, 4%, 0)" }
64+ , "100%": { transform: "translate3d(70%, -4%, 0)" }
65+ }
7266 , movingCloud1:
73− jss
74− { animation: "$movingCloud1 200s linear infinite"
75− , animationDelay: "-150s"
76− }
67+ { animation: "$movingCloud1 200s linear infinite"
68+ , animationDelay: "-150s"
69+ }
7770 , "@keyframes movingCloud2":
78− jss
79− { "0%": { transform: "translate3d(-10%, 0%, 0)" }
80− , "100%": { transform: "translate3d(10%, 0%, 0)" }
81− }
71+ { "0%": { transform: "translate3d(-10%, 0%, 0)" }
72+ , "100%": { transform: "translate3d(10%, 0%, 0)" }
73+ }
8274 , movingCloud2:
83− jss
84− { animation: "$movingCloud2 120s linear infinite"
85− , animationDirection: "alternate"
86− }
75+ { animation: "$movingCloud2 120s linear infinite"
76+ , animationDirection: "alternate"
77+ }
8778 , movingCloud3:
88− jss
89− { animation: "$movingCloud2 120s linear infinite"
90− , animationDelay: "-120s"
91− , animationDirection: "alternate"
92− }
79+ { animation: "$movingCloud2 120s linear infinite"
80+ , animationDelay: "-120s"
81+ , animationDirection: "alternate"
82+ }
9383 , "@keyframes twinkle":
94− jss
95− { "0%": { fill: "rgba(250, 250, 250, 0.2)" }
96− , "50%": { fill: "rgba(250, 250, 250, 0.7)" }
97− , "70%": { fill: "rgba(250, 250, 250, 0.4)" }
98− , "100%": { fill: "rgba(250, 250, 250, 1.0)" }
99− }
84+ { "0%": { fill: "rgba(250, 250, 250, 0.2)" }
85+ , "50%": { fill: "rgba(250, 250, 250, 0.7)" }
86+ , "70%": { fill: "rgba(250, 250, 250, 0.4)" }
87+ , "100%": { fill: "rgba(250, 250, 250, 1.0)" }
88+ }
10089 , "@keyframes twinkleFast":
101− jss
102− { "0%": { fill: "rgba(250, 250, 250, 0.7)" }
103− , "100%": { fill: "rgba(250, 250, 250, 0.78)" }
104− }
90+ { "0%": { fill: "rgba(250, 250, 250, 0.7)" }
91+ , "100%": { fill: "rgba(250, 250, 250, 0.78)" }
92+ }
10593 , twinklingStar1:
106− jss
107− { animation: "$twinkleFast 0.2s ease-in-out infinite"
108− , animationDirection: "alternate"
109− }
94+ { animation: "$twinkleFast 0.2s ease-in-out infinite"
95+ , animationDirection: "alternate"
96+ }
11097 , twinklingStar2:
111− jss
112− { animation: "$twinkle 8s ease-in-out infinite"
113− , animationDelay: "4s"
114− , animationDirection: "alternate"
115− }
98+ { animation: "$twinkle 8s ease-in-out infinite"
99+ , animationDelay: "4s"
100+ , animationDirection: "alternate"
101+ }
116102 , twinklingStar3:
117− jss
118− { animation: "$twinkle 4s ease-in-out infinite"
119− , animationDelay: "3s"
120− , animationDirection: "alternate"
121− }
103+ { animation: "$twinkle 4s ease-in-out infinite"
104+ , animationDelay: "3s"
105+ , animationDirection: "alternate"
106+ }
122107 , "@keyframes rotateStars":
123− jss
124− { "0%": { transform: "rotate(0deg) scale(1,1)" }
125− , "100%": { transform: "rotate(1deg) scale(1.01, 1.01)" }
126− }
108+ { "0%": { transform: "rotate(0deg) scale(1,1)" }
109+ , "100%": { transform: "rotate(1deg) scale(1.01, 1.01)" }
110+ }
127111 , stars:
128− jss
129− { animation: "$rotateStars 30s linear infinite"
130− , transformOrigin: "top center"
131− , animationDirection: "alternate"
132− }
112+ { animation: "$rotateStars 30s linear infinite"
113+ , transformOrigin: "top center"
114+ , animationDirection: "alternate"
115+ }
133116 }
134117 React.component "LandingPageBackground" \{ className } -> React.do
135118 theme <- useTheme
@@ -209,7 +192,7 @@ mkLandingPageBackground = do
209192 , buildings theme.isLight scrolled
210193 -- bar
211194 , SVG.path
212− { fill: theme.backgroundColour
195+ { fill: theme.backgroundColour # toHexString
213196 , d: "M-3.028 431.298h826.844v20.006H-3.028z"
214197 }
215198 -- laptop
components/src/Yoga/Theme.purs+27−34
@@ -1,9 +1,9 @@
11module Yoga.Theme where
22
33import Prelude
4−import CSS (contrast, darken, isLight, lighten, rotateHue, toHexString)
5−import CSS as Color
4+import CSS (contrast, darken, isLight, lighten, rotateHue)
65import Color (Color)
6+import Color as Color
77import Data.Foldable (intercalate)
88import Data.Maybe (fromMaybe)
99import Data.Symbol (SProxy(..))
@@ -20,6 +20,14 @@ increaseContrast contrastWith = go 0
2020 else
2121 go (i + 1) (modify 0.1 col)
2222
23+unsafeWithAlpha ∷ Number -> String -> String
24+unsafeWithAlpha alpha s1 =
25+ fromMaybe "yellow" do
26+ c1 <- Color.fromHexString s1
27+ let
28+ { r, g, b } = Color.toRGBA' c1
29+ pure $ Color.cssStringRGBA (Color.rgba' r g b alpha)
30+
2331unsafeAlaColor ∷ (Color -> Color) -> String -> String
2432unsafeAlaColor fn s1 =
2533 fromMaybe "hotpink" do
@@ -32,59 +40,44 @@ f = SProxy
3240fromTheme ∷ Theme -> CSSTheme
3341fromTheme theme =
3442 RB.build
35− ( {- background -} RB.modify (f ∷ _ "backgroundColour") toHexString
36− >>> RB.insert (f ∷ _ "backgroundColourLighter")
37− (theme.backgroundColour # lighter >>> toHexString)
43+ ( {- background -} RB.insert (f ∷ _ "backgroundColourLighter")
44+ (theme.backgroundColour # lighter)
3845 >>> RB.insert (f ∷ _ "backgroundColourLightest")
39− (theme.backgroundColour # lighter # lighter >>> toHexString)
46+ (theme.backgroundColour # lighter # lighter)
4047 >>> RB.insert (f ∷ _ "backgroundColourDarker")
41− (theme.backgroundColour # darker >>> toHexString)
48+ (theme.backgroundColour # darker)
4249 >>> RB.insert (f ∷ _ "backgroundColourDarkest")
43− (theme.backgroundColour # darker # darker >>> toHexString)
44− >>> RB.modify (f ∷ _ "interfaceColour") toHexString
50+ (theme.backgroundColour # darker # darker)
4551 >>> RB.insert (f ∷ _ "interfaceColourLighter")
46− (theme.interfaceColour # lighter >>> toHexString)
52+ (theme.interfaceColour # lighter)
4753 >>> RB.insert (f ∷ _ "interfaceColourLightest")
48− (theme.interfaceColour # lighter >>> lighter >>> toHexString)
54+ (theme.interfaceColour # lighter >>> lighter)
4955 >>> RB.insert (f ∷ _ "interfaceColourDarker")
50− (theme.interfaceColour # darker >>> toHexString)
56+ (theme.interfaceColour # darker)
5157 >>> RB.insert (f ∷ _ "interfaceColourDarkest")
52− (theme.interfaceColour # darker >>> darker >>> toHexString)
58+ (theme.interfaceColour # darker >>> darker)
5359 -- foreground
5460
55− >>> RB.modify (f ∷ _ "textColour") toHexString
5661 >>> RB.insert (f ∷ _ "textColourLighter")
57− (theme.textColour # lighter >>> toHexString)
62+ (theme.textColour # lighter)
5863 >>> RB.insert (f ∷ _ "textColourLightest")
59− (theme.textColour # lighter >>> lighter >>> toHexString)
64+ (theme.textColour # lighter >>> lighter)
6065 >>> RB.insert (f ∷ _ "textColourDarker")
61− (theme.textColour # darker >>> toHexString)
66+ (theme.textColour # darker)
6267 >>> RB.insert (f ∷ _ "textColourDarkest")
63− (theme.textColour # darker >>> darker >>> toHexString)
68+ (theme.textColour # darker >>> darker)
6469 -- highlight
6570
66− >>> RB.modify (f ∷ _ "highlightColour") toHexString
6771 >>> RB.insert (f ∷ _ "highlightColourDark")
68− (theme.highlightColour # darken 0.2 # rotateHue (-10.0) # toHexString)
72+ (theme.highlightColour # darken 0.2 # rotateHue (-10.0))
6973 >>> RB.insert (f ∷ _ "highlightColourRotatedForwards")
70− (theme.highlightColour # rotateHue (20.0) # toHexString)
74+ (theme.highlightColour # rotateHue (20.0))
7175 >>> RB.insert (f ∷ _ "highlightColourRotatedBackwards")
72− (theme.highlightColour # rotateHue (-20.0) # toHexString)
76+ (theme.highlightColour # rotateHue (-20.0))
7377 -- altHighlight
7478
75− >>> RB.modify (f ∷ _ "altHighlightColour") toHexString
7679 >>> RB.insert (f ∷ _ "altHighlightColourDark")
77− (theme.altHighlightColour # darken 0.2 # toHexString)
78− -- palette
79−
80− >>> RB.modify (f ∷ _ "yellow") toHexString
81− >>> RB.modify (f ∷ _ "green") toHexString
82− >>> RB.modify (f ∷ _ "pink") toHexString
83− >>> RB.modify (f ∷ _ "orange") toHexString
84− >>> RB.modify (f ∷ _ "turquoise") toHexString
85− >>> RB.modify (f ∷ _ "red") toHexString
86− >>> RB.modify (f ∷ _ "blue") toHexString
87− >>> RB.modify (f ∷ _ "white") toHexString
80+ (theme.altHighlightColour # darken 0.2)
8881 -- fonts
8982
9083 >>> RB.modify (f ∷ _ "textFontFamily") (intercalate ",")
components/src/Yoga/Theme/CSSBaseline.purs+4−3
@@ -1,6 +1,7 @@
11module Yoga.Theme.CSSBaseline where
22
33import Prelude hiding (add)
4+import Color (toHexString)
45import Effect (Effect)
56import JSS (JSSClasses, JSSElem, jss, jssClasses)
67import React.Basic (ReactComponent)
@@ -70,11 +71,11 @@ styles =
7071 }
7172 , body:
7273 { margin: 0
73− , backgroundColor: theme.backgroundColour
74− , color: theme.textColour
74+ , backgroundColor: theme.backgroundColour # toHexString
75+ , color: theme.textColour # toHexString
7576 , fontFamily: theme.textFontFamily
7677 , "&::backdrop":
77− { backgroundColor: theme.backgroundColour
78+ { backgroundColor: theme.backgroundColour # toHexString
7879 }
7980 }
8081 , "h1, h2, h3, h4":
components/src/Yoga/Theme/Default.purs+5−2
@@ -30,6 +30,7 @@ darkTheme =
3030 , turquoise: Color.rgb 127 219 202
3131 , red: Color.rgb 255 88 116
3232 , blue: Color.rgb 130 170 255
33+ , grey: Color.rgb 150 150 150
3334 , white: Color.rgb 250 250 250
3435 , measure: "60ch"
3536 , borderThin: "0.125rem"
@@ -39,9 +40,11 @@ lightTheme ∷ Theme
3940lightTheme =
4041 darkTheme
4142 { textColour = Color.hsl 225.0 0.18 0.25
42− , backgroundColour = Color.hsl 230.0 0.15 0.90
43+ -- , backgroundColour = Color.hsl 210.0 0.08 0.87
44+ , backgroundColour = hex "#F6F9FC"
4345 , interfaceColour = Color.hsl 210.0 0.10 0.89
44− , highlightColour = Color.hsl 209.0 0.95 0.69
46+ -- , highlightColour = Color.hsl 209.0 0.95 0.69
47+ , highlightColour = Color.hsl 350.0 0.90 0.70
4548 , altHighlightColour = Color.hsl 84.0 0.617 0.631
4649 , green = Color.hsl 84.0 0.617 0.431
4750 , pink = Color.hsl 276.0 0.677 0.545
components/src/Yoga/Theme/ThemeStories.purs+16−15
@@ -1,6 +1,7 @@
11module Yoga.Theme.Stories where
22
33import Prelude hiding (add)
4+import Color (toHexString)
45import Effect (Effect)
56import React.Basic.DOM (css)
67import React.Basic.DOM as R
@@ -50,21 +51,21 @@ stories = do
5051 , paddingBottom: "20px"
5152 }
5253 , children:
53− [ sw "IF Darkest" cssTheme.interfaceColourDarkest
54− , sw "IF Darker" cssTheme.interfaceColourDarker
55− , sw "Interface" cssTheme.interfaceColour
56− , sw "IF Lighter" cssTheme.interfaceColourLighter
57− , sw "IF Lightest" cssTheme.interfaceColourLightest
58− , sw "Highlight" cssTheme.highlightColour
59− , sw "Highlight++" cssTheme.highlightColourRotatedForwards
60− , sw "HighlightGradient" $ "linear-gradient(45deg," <> cssTheme.highlightColourRotatedForwards <> "," <> cssTheme.highlightColourRotatedBackwards <> ")"
61− , sw "TXT Darkest" cssTheme.textColourDarkest
62− , sw "TXT Darker" cssTheme.textColourDarker
63− , sw "TXT" cssTheme.textColour
64− , sw "TXT Lighter" cssTheme.textColourLighter
65− , sw "TXT Lightest" cssTheme.textColourLightest
66− , sw "HighlightDK" cssTheme.highlightColourDark
67− , sw "Highlight--" cssTheme.highlightColourRotatedBackwards
54+ [ sw "IF Darkest" (toHexString cssTheme.interfaceColourDarkest)
55+ , sw "IF Darker" (toHexString cssTheme.interfaceColourDarker)
56+ , sw "Interface" (toHexString cssTheme.interfaceColour)
57+ , sw "IF Lighter" (toHexString cssTheme.interfaceColourLighter)
58+ , sw "IF Lightest" (toHexString cssTheme.interfaceColourLightest)
59+ , sw "Highlight" (toHexString cssTheme.highlightColour)
60+ , sw "Highlight++" (toHexString cssTheme.highlightColourRotatedForwards)
61+ , sw "HighlightGradient" $ "linear-gradient(45deg," <> toHexString cssTheme.highlightColourRotatedForwards <> "," <> toHexString cssTheme.highlightColourRotatedBackwards <> ")"
62+ , sw "TXT Darkest" (toHexString cssTheme.textColourDarkest)
63+ , sw "TXT Darker" (toHexString cssTheme.textColourDarker)
64+ , sw "TXT" (toHexString cssTheme.textColour)
65+ , sw "TXT Lighter" (toHexString cssTheme.textColourLighter)
66+ , sw "TXT Lightest" (toHexString cssTheme.textColourLightest)
67+ , sw "HighlightDK" (toHexString cssTheme.highlightColourDark)
68+ , sw "Highlight--" (toHexString cssTheme.highlightColourRotatedBackwards)
6869 ]
6970 }
7071 ]
components/src/Yoga/Theme/Types.purs+31−29
@@ -20,44 +20,46 @@ type Theme
2020 , red ∷ Color
2121 , blue ∷ Color
2222 , white ∷ Color
23+ , grey ∷ Color
2324 , measure ∷ String
2425 , borderThin ∷ String
2526 }
2627
2728type YogaTheme
28− = ( backgroundColour ∷ String
29− , backgroundColourLighter ∷ String
30− , backgroundColourLightest ∷ String
31− , backgroundColourDarker ∷ String
32− , backgroundColourDarkest ∷ String
33− , interfaceColour ∷ String
34− , interfaceColourDarker ∷ String
35− , interfaceColourDarkest ∷ String
36− , interfaceColourLighter ∷ String
37− , interfaceColourLightest ∷ String
38− , textColourLightest ∷ String
39− , textColourLighter ∷ String
40− , textColour ∷ String
41− , textColourDarker ∷ String
42− , textColourDarkest ∷ String
43− , highlightColourRotatedForwards ∷ String
44− , highlightColourRotatedBackwards ∷ String
45− , highlightColour ∷ String
46− , highlightColourDark ∷ String
47− , altHighlightColour ∷ String
48− , altHighlightColourDark ∷ String
29+ = ( backgroundColour ∷ Color
30+ , backgroundColourLighter ∷ Color
31+ , backgroundColourLightest ∷ Color
32+ , backgroundColourDarker ∷ Color
33+ , backgroundColourDarkest ∷ Color
34+ , interfaceColour ∷ Color
35+ , interfaceColourDarker ∷ Color
36+ , interfaceColourDarkest ∷ Color
37+ , interfaceColourLighter ∷ Color
38+ , interfaceColourLightest ∷ Color
39+ , textColourLightest ∷ Color
40+ , textColourLighter ∷ Color
41+ , textColour ∷ Color
42+ , textColourDarker ∷ Color
43+ , textColourDarkest ∷ Color
44+ , highlightColourRotatedForwards ∷ Color
45+ , highlightColourRotatedBackwards ∷ Color
46+ , highlightColour ∷ Color
47+ , highlightColourDark ∷ Color
48+ , altHighlightColour ∷ Color
49+ , altHighlightColourDark ∷ Color
4950 , isLight ∷ Boolean
5051 , textFontFamily ∷ String
5152 , headingFontFamily ∷ String
5253 , codeFontFamily ∷ String
53− , yellow ∷ String
54− , green ∷ String
55− , pink ∷ String
56− , orange ∷ String
57− , turquoise ∷ String
58− , red ∷ String
59− , blue ∷ String
60− , white ∷ String
54+ , yellow ∷ Color
55+ , green ∷ Color
56+ , pink ∷ Color
57+ , orange ∷ Color
58+ , turquoise ∷ Color
59+ , red ∷ Color
60+ , blue ∷ Color
61+ , grey ∷ Color
62+ , white ∷ Color
6163 , fontWeightBold ∷ String
6264 , measure ∷ String
6365 , borderThin ∷ String
components/src/Yoga/Typography/Header.purs+4−9
@@ -1,11 +1,12 @@
11module Yoga.Typography.Header where
22
33import Prelude
4+import Color (toHexString)
45import Data.Array as Array
56import Data.Foldable (intercalate)
67import Data.Maybe (Maybe)
78import Effect (Effect)
8−import JSS (jss, jssClasses)
9+import JSS (jssClasses)
910import React.Basic.DOM as R
1011import React.Basic.Hooks (ReactComponent, component)
1112import React.Basic.Hooks as React
@@ -26,12 +27,10 @@ mkH = do
2627 makeStylesJSS
2728 $ jssClasses \(theme ∷ CSSTheme) ->
2829 { common:
29− jss
30− { color: theme.textColour
30+ { color: theme.textColour # toHexString
3131 , fontFamily: theme.headingFontFamily
3232 }
3333 , h1:
34− jss
3534 { textTransform: "uppercase"
3635 , fontSize: "3.6em"
3736 , letterSpacing: "0.07em"
@@ -39,7 +38,6 @@ mkH = do
3938 , padding: 0
4039 }
4140 , h2:
42− jss
4341 { textTransform: "uppercase"
4442 , fontSize: "3em"
4543 , letterSpacing: "0.05em"
@@ -47,23 +45,20 @@ mkH = do
4745 , padding: 0
4846 }
4947 , h3:
50− jss
5148 { fontSize: "2.2em"
5249 , margin: 0
5350 , padding: 0
5451 }
5552 , h4:
56− jss
5753 { fontSize: "1.5em"
5854 , margin: 0
5955 , padding: 0
6056 }
6157 , h5:
62− jss
6358 { fontSize: "1.0em"
6459 , margin: 0
6560 , padding: 0
66− , color: theme.textColourLighter
61+ , color: theme.textColourLighter # toHexString
6762 }
6863 }
6964 component "Heading" \{ level, text, className } -> React.do
components/src/Yoga/Typography/Paragraph.purs+8−8
@@ -1,8 +1,9 @@
11module Yoga.Typography.Paragraph where
22
33import Prelude
4+import Color (toHexString)
45import Effect (Effect)
5−import JSS (jss, jssClasses)
6+import JSS (jssClasses)
67import React.Basic.DOM as R
78import React.Basic.Hooks (ReactComponent, component)
89import React.Basic.Hooks as React
@@ -15,13 +16,12 @@ mkP = do
1516 makeStylesJSS
1617 $ jssClasses \(theme ∷ CSSTheme) ->
1718 { p:
18− jss
19− { color: theme.textColour
20− , fontFamily: theme.textFontFamily
21− , fontSize: "1em"
22− , margin: "0.67em 0 0.33em 0"
23− , padding: "0.67em 0 0.33em 0"
24− }
19+ { color: theme.textColour # toHexString
20+ , fontFamily: theme.textFontFamily
21+ , fontSize: "1em"
22+ , margin: "0.67em 0 0.33em 0"
23+ , padding: "0.67em 0 0.33em 0"
24+ }
2525 }
2626 component "paragraph" \{ text } -> React.do
2727 classes <- useStyles {}
server/src/Main.purs+21−11
@@ -2,17 +2,16 @@ module Main where
22
33import Prelude
44
5−import Control.Parallel (parTraverse)
5+import Control.Parallel (parOneOf, parTraverse)
66import Data.Array ((..))
77import Data.Bifunctor (lmap)
88import Data.Either (Either(..))
99import Data.Int (fromString)
10−import Data.Maybe (Maybe, fromMaybe)
10+import Data.Maybe (Maybe(..), fromMaybe)
1111import Data.Newtype (un)
12−import Data.Time.Duration (Seconds(..), fromDuration)
13−import Data.Traversable (for)
12+import Data.Time.Duration (class Duration, Seconds(..), fromDuration)
1413import Effect (Effect)
15−import Effect.Aff (Aff, attempt, launchAff_, message)
14+import Effect.Aff (Aff, attempt, delay, launchAff_, message)
1615import Effect.Aff.Class (liftAff)
1716import Effect.Class (class MonadEffect, liftEffect)
1817import Effect.Class.Console (info, log)
@@ -59,14 +58,17 @@ type ErrorWithCode
5958asErrorWithCode ∷ ∀ a. a -> Maybe ErrorWithCode
6059asErrorWithCode = read_ <<< unsafeToForeign
6160
62−runCode ∷ Folder -> Aff ExecResult
63−runCode folder = execCommand folder "node run.js"
61+runCode ∷ ∀ d. Duration d => d -> Folder -> Aff (Maybe ExecResult)
62+runCode timeout folder = parOneOf
63+ [ Just <$> execCommand folder "exec node run.js"
64+ , Nothing <$ delay (timeout # fromDuration)
65+ ]
6466
6567compileAndRunJob ∷ CompileRequest -> (Handler -> Aff Unit) -> NewJob PscIdeConnection
6668compileAndRunJob json handle =
6769 NewJob \jobId conn -> do
6870 stringOrErr <- attempt $ compileCode json.code conn
69− case ((readJSON <$> stringOrErr) :: _ _ (_ _ CompileResult)) of
71+ case ((readJSON <$> stringOrErr) ∷ _ _ (_ _ CompileResult)) of
7072 Left e -> do
7173 handle $ setStatus 500
7274 log $ "Aff failed with " <> message e
@@ -75,13 +77,20 @@ compileAndRunJob json handle =
7577 handle $ setStatus 422
7678 handle $ Response.send $ write res
7779 Right (Right res) -> do
78− runResult <- runCode (getFolder conn)
79− resultBody <- toBody runResult
80− handle $ Response.send $ write (resultBody ∷ Body.RunResult)
80+ runResult <- runCode timeout (getFolder conn)
81+ case runResult of
82+ Nothing -> do
83+ handle $ setStatus 408
84+ handle $ Response.send $ write { error: "Timed out after running for " <> show timeout}
85+ Just rr -> do
86+ resultBody <- toBody rr
87+ handle $ Response.send $ write (resultBody ∷ Body.RunResult)
8188 Right (Left errs) -> do
8289 handle $ setStatus 500
8390 log $ "Could not decode: " <> show (lmap (const "no way") stringOrErr) <> "\nErrors: " <> show errs
8491 handle $ Response.send $ write {}
92+ where
93+ timeout = 1.0 # Seconds
8594
8695compileAndRunHandler ∷ Queue PscIdeConnection -> Handler
8796compileAndRunHandler queue = do
@@ -166,3 +175,4 @@ serverSetup app = do
166175 key <- readTextFile UTF8 "server.key"
167176 cert <- readTextFile UTF8 "server.cert"
168177 pure { key, cert }
178+
server/src/PscIdeClient.purs+2−2
@@ -104,8 +104,8 @@ newtype PscIdeConnection
104104 , folder ∷ Folder
105105 }
106106
107−derive instance ntPscIdeConnection :: Newtype PscIdeConnection _
108−instance eqPscIdeConnection :: Eq PscIdeConnection where
107+derive instance ntPscIdeConnection ∷ Newtype PscIdeConnection _
108+instance eqPscIdeConnection ∷ Eq PscIdeConnection where
109109 eq c1 c2 = (unwrap c1).port == (unwrap c2).port
110110
111111saveMainFile ∷ Folder -> String -> Aff Unit