15d5152 · rowtype-yoga/psfp

git.iko.soy/rowtype-yoga/psfp

on master help sign in

At least it compiles

15d5152Mark Eibes7 years ago

assets/fonts/Rubik-Medium.woff2new file

compare with master

unifiedsplit

Binary file not shown.

assets/fonts/Rubik-MediumItalic.woff2new file

Binary file not shown.

blog/package-lock.json+134−135

@@ -1084,9 +1084,9 @@

1084 },

1085 "dependencies": {

1086 "buffer": {

1087− "version": "5.4.3",

1087+ "version": "5.5.0",

1088− "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.4.3.tgz",

1088+ "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.5.0.tgz",

1089− "integrity": "sha512-zvj65TkFeIt3i6aj5bIvJDzjjQQGs4o/sNoezg1F1kYap9Nu2jcUdpwzRSJTHMMzG0H7bZkn4rNQpImhuxWX2A==",

1089+ "integrity": "sha512-9FTEDjLjwoAkEwyMGDjYJQN2gfRgOKBKRfiglhvibGbpeeU/pQn1bJxQqm32OD/AIeEuHxU9roxXxg34Byp/Ww==",

1090 "requires": {

1091 "base64-js": "^1.0.2",

1092 "ieee754": "^1.1.4"

@@ -3217,13 +3217,24 @@

3217 }

3218 },

3219 "bl": {

3220− "version": "3.0.0",

3220+ "version": "4.0.2",

3221− "resolved": "https://registry.npmjs.org/bl/-/bl-3.0.0.tgz",

3221+ "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz",

3222− "integrity": "sha512-EUAyP5UHU5hxF8BPT0LKW8gjYLhq1DQIcneOX/pL/m2Alo+OYDQAJlHq+yseMP50Os2nHXOSic6Ss3vSQeyf4A==",

3222+ "integrity": "sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==",

3223 "requires": {

3224+ "buffer": "^5.5.0",

3225+ "inherits": "^2.0.4",

3224− "readable-stream": "^3.0.1"

3226+ "readable-stream": "^3.4.0"

3225 },

3227 },

3226 "dependencies": {

3228 "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+ },

3227 "readable-stream": {

3238 "readable-stream": {

3228 "version": "3.6.0",

3239 "version": "3.6.0",

3229 "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",

3240 "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",

@@ -8974,14 +8985,39 @@

8974 }

8985 }

8975 },

8986 },

8976 "gatsby-plugin-manifest": {

8987 "gatsby-plugin-manifest": {

8977− "version": "2.2.42",

8988+ "version": "2.3.2",

8978− "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.2.42.tgz",

8989+ "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.3.2.tgz",

8979− "integrity": "sha512-3YWq2zfv6LR0FWlfhZL//mrueuTr+u9cSr8K9HIXKBVby1FZ2CndzaMPbmj61/FSqXHXX2/bhvOx5imFuZCxmw==",

8990+ "integrity": "sha512-tJQbofNs41rbcZN3W3SDrAHwXc5sYaLrWB+nPc8GTjz5rXzh76uRMMgMBLBfx4DtFInXFmM3igBjW58rikWVeg==",

8980 "requires": {

8991 "requires": {

8981− "@babel/runtime": "^7.7.6",

8992+ "@babel/runtime": "^7.8.7",

8982− "gatsby-core-utils": "^1.0.28",

8993+ "gatsby-core-utils": "^1.1.1",

8983 "semver": "^5.7.1",

8994 "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+ }

8985 }

9021 }

8986 },

9022 },

8987 "gatsby-plugin-mdx": {

9023 "gatsby-plugin-mdx": {

@@ -9140,15 +9176,15 @@

9140 }

9176 }

9141 },

9177 },

9142 "gatsby-plugin-sharp": {

9178 "gatsby-plugin-sharp": {

9143− "version": "2.4.5",

9179+ "version": "2.5.2",

9144− "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.4.5.tgz",

9180+ "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.5.2.tgz",

9145− "integrity": "sha512-O2FZcUd78aKNR7Hbommrbc5igW32U2MnenA/Oc55sklFUF+I1fu4N6zMoHfh7sVtWCqZEbQiNO310Zl8jstD5g==",

9181+ "integrity": "sha512-dWVnuOeeZhEsaYaBcctSybDzYv8wmsjZlxhFspnveMscEgO1whBW5eolBNzRLa+ooocW3wRKg0TYljLlLfHv4g==",

9146 "requires": {

9182 "requires": {

9147− "@babel/runtime": "^7.7.6",

9183+ "@babel/runtime": "^7.8.7",

9148 "async": "^2.6.3",

9184 "async": "^2.6.3",

9149 "bluebird": "^3.7.2",

9185 "bluebird": "^3.7.2",

9150 "fs-extra": "^8.1.0",

9186 "fs-extra": "^8.1.0",

9151− "gatsby-core-utils": "^1.0.28",

9187+ "gatsby-core-utils": "^1.1.1",

9152 "got": "^8.3.2",

9188 "got": "^8.3.2",

9153 "imagemin": "^6.1.0",

9189 "imagemin": "^6.1.0",

9154 "imagemin-mozjpeg": "^8.0.0",

9190 "imagemin-mozjpeg": "^8.0.0",

@@ -9160,11 +9196,19 @@

9160 "probe-image-size": "^4.1.1",

9196 "probe-image-size": "^4.1.1",

9161 "progress": "^2.0.3",

9197 "progress": "^2.0.3",

9162 "semver": "^5.7.1",

9198 "semver": "^5.7.1",

9163− "sharp": "^0.23.4",

9199+ "sharp": "^0.25.1",

9164 "svgo": "1.3.2",

9200 "svgo": "1.3.2",

9165− "uuid": "^3.3.3"

9201+ "uuid": "^3.4.0"

9166 },

9202 },

9167 "dependencies": {

9203 "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+ },

9168 "async": {

9212 "async": {

9169 "version": "2.6.3",

9213 "version": "2.6.3",

9170 "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",

9214 "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",

@@ -9172,6 +9216,21 @@

9172 "requires": {

9216 "requires": {

9173 "lodash": "^4.17.14"

9217 "lodash": "^4.17.14"

9174 }

9218 }

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=="

9175 }

9234 }

9176 }

9235 }

9177 },

9236 },

@@ -9306,17 +9365,32 @@

9306 }

9365 }

9307 },

9366 },

9308 "gatsby-transformer-sharp": {

9367 "gatsby-transformer-sharp": {

9309− "version": "2.3.14",

9368+ "version": "2.4.2",

9310− "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.3.14.tgz",

9369+ "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.4.2.tgz",

9311− "integrity": "sha512-tjz74lcJdAUFNtngmNBtyqXbIjb2Ux0GVeCpJsHfrWheJOsogPiO2Y3tp/NZJuonAWUawV8Mvr4TFjjF9p2GZw==",

9370+ "integrity": "sha512-y8p2eBXEkSft411jyR3KOzzPRbjJ7i4aJzopB1lCQrYgOoxRtA/DeiAaANziRhJWoJUDa7M30iElizUy7n9Kzw==",

9312 "requires": {

9371 "requires": {

9313− "@babel/runtime": "^7.7.6",

9372+ "@babel/runtime": "^7.8.7",

9314 "bluebird": "^3.7.2",

9373 "bluebird": "^3.7.2",

9315 "fs-extra": "^8.1.0",

9374 "fs-extra": "^8.1.0",

9316 "potrace": "^2.1.2",

9375 "potrace": "^2.1.2",

9317 "probe-image-size": "^4.1.1",

9376 "probe-image-size": "^4.1.1",

9318 "semver": "^5.7.1",

9377 "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+ }

9320 }

9394 }

9321 },

9395 },

9322 "gauge": {

9396 "gauge": {

@@ -10221,72 +10295,6 @@

10221 "replace-ext": "^1.0.0"

10295 "replace-ext": "^1.0.0"

10222 },

10296 },

10223 "dependencies": {

10297 "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− },

10290 "make-dir": {

10298 "make-dir": {

10291 "version": "1.3.0",

10299 "version": "1.3.0",

10292 "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",

10300 "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",

@@ -10301,26 +10309,6 @@

10301 "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="

10309 "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="

10302 }

10310 }

10303 }

10311 }

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="

10324 }

10312 }

10325 }

10313 }

10326 },

10314 },

@@ -12771,7 +12759,8 @@

12771 "nan": {

12759 "nan": {

12772 "version": "2.14.0",

12760 "version": "2.14.0",

12773 "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",

12761 "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",

12774− "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="

12762+ "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",

12763+ "optional": true

12775 },

12764 },

12776 "nanomatch": {

12765 "nanomatch": {

12777 "version": "1.2.13",

12766 "version": "1.2.13",

@@ -12792,9 +12781,9 @@

12792 }

12781 }

12793 },

12782 },

12794 "napi-build-utils": {

12783 "napi-build-utils": {

12795− "version": "1.0.1",

12784+ "version": "1.0.2",

12796− "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.1.tgz",

12785+ "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",

12797− "integrity": "sha512-boQj1WFgQH3v4clhu3mTNfP+vOBxorDlE8EKiMjUlLG3C4qAESnn9AxIOkFgTR2c9LtzNjPrjS60cT27ZKBhaA=="

12786+ "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg=="

12798 },

12787 },

12799 "natural-compare": {

12788 "natural-compare": {

12800 "version": "1.4.0",

12789 "version": "1.4.0",

@@ -12842,6 +12831,11 @@

12842 "semver": "^5.4.1"

12831 "semver": "^5.4.1"

12843 }

12832 }

12844 },

12833 },

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+ },

12845 "node-emoji": {

12839 "node-emoji": {

12846 "version": "1.10.0",

12840 "version": "1.10.0",

12847 "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",

12841 "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",

@@ -16554,25 +16548,25 @@

16554 "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="

16548 "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="

16555 },

16549 },

16556 "sharp": {

16550 "sharp": {

16557− "version": "0.23.4",

16551+ "version": "0.25.2",

16558− "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.23.4.tgz",

16552+ "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.25.2.tgz",

16559− "integrity": "sha512-fJMagt6cT0UDy9XCsgyLi0eiwWWhQRxbwGmqQT6sY8Av4s0SVsT/deg8fobBQCTDU5iXRgz0rAeXoE2LBZ8g+Q==",

16553+ "integrity": "sha512-l1GN0kFNtJr3U9i9pt7a+vo2Ij0xv4tTKDIPx8W6G9WELhPwrMyZZJKAAQNBSI785XB4uZfS5Wpz8C9jWV4AFQ==",

16560 "requires": {

16554 "requires": {

16561 "color": "^3.1.2",

16555 "color": "^3.1.2",

16562 "detect-libc": "^1.0.3",

16556 "detect-libc": "^1.0.3",

16563− "nan": "^2.14.0",

16557+ "node-addon-api": "^2.0.0",

16564 "npmlog": "^4.1.2",

16558 "npmlog": "^4.1.2",

16565 "prebuild-install": "^5.3.3",

16559 "prebuild-install": "^5.3.3",

16566− "semver": "^6.3.0",

16560+ "semver": "^7.1.3",

16567 "simple-get": "^3.1.0",

16561 "simple-get": "^3.1.0",

16568− "tar": "^5.0.5",

16562+ "tar": "^6.0.1",

16569 "tunnel-agent": "^0.6.0"

16563 "tunnel-agent": "^0.6.0"

16570 },

16564 },

16571 "dependencies": {

16565 "dependencies": {

16572 "semver": {

16566 "semver": {

16573− "version": "6.3.0",

16567+ "version": "7.1.3",

16574− "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",

16568+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.1.3.tgz",

16575− "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="

16569+ "integrity": "sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA=="

16576 }

16570 }

16577 }

16571 }

16578 },

16572 },

@@ -17724,18 +17718,23 @@

17724 "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="

17718 "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="

17725 },

17719 },

17726 "tar": {

17720 "tar": {

17727− "version": "5.0.5",

17721+ "version": "6.0.1",

17728− "resolved": "https://registry.npmjs.org/tar/-/tar-5.0.5.tgz",

17722+ "resolved": "https://registry.npmjs.org/tar/-/tar-6.0.1.tgz",

17729− "integrity": "sha512-MNIgJddrV2TkuwChwcSNds/5E9VijOiw7kAc1y5hTNJoLDSuIyid2QtLYiCYNnICebpuvjhPQZsXwUL0O3l7OQ==",

17723+ "integrity": "sha512-bKhKrrz2FJJj5s7wynxy/fyxpE0CmCjmOQ1KV4KkgXFWOgoIT/NbTMnB1n+LFNrNk0SSBVGGxcK5AGsyC+pW5Q==",

17730 "requires": {

17724 "requires": {

17731 "chownr": "^1.1.3",

17725 "chownr": "^1.1.3",

17732 "fs-minipass": "^2.0.0",

17726 "fs-minipass": "^2.0.0",

17733 "minipass": "^3.0.0",

17727 "minipass": "^3.0.0",

17734 "minizlib": "^2.1.0",

17728 "minizlib": "^2.1.0",

17735− "mkdirp": "^0.5.0",

17729+ "mkdirp": "^1.0.3",

17736 "yallist": "^4.0.0"

17730 "yallist": "^4.0.0"

17737 },

17731 },

17738 "dependencies": {

17732 "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+ },

17739 "yallist": {

17738 "yallist": {

17740 "version": "4.0.0",

17739 "version": "4.0.0",

17741 "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

17740 "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

@@ -17755,11 +17754,11 @@

17755 }

17754 }

17756 },

17755 },

17757 "tar-stream": {

17756 "tar-stream": {

17758− "version": "2.1.0",

17757+ "version": "2.1.2",

17759− "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.0.tgz",

17758+ "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.2.tgz",

17760− "integrity": "sha512-+DAn4Nb4+gz6WZigRzKEZl1QuJVOLtAwwF+WUxy1fJ6X63CaGaUAxJRD2KEn1OMfcbCjySTYpNC6WmfQoIEOdw==",

17759+ "integrity": "sha512-UaF6FoJ32WqALZGOIAApXx+OdxhekNMChu6axLJR85zMMjXKWFGjbIRe+J6P4UnRGg9rAwWvbTT0oI7hD/Un7Q==",

17761 "requires": {

17760 "requires": {

17762− "bl": "^3.0.0",

17761+ "bl": "^4.0.1",

17763 "end-of-stream": "^1.4.1",

17762 "end-of-stream": "^1.4.1",

17764 "fs-constants": "^1.0.0",

17763 "fs-constants": "^1.0.0",

17765 "inherits": "^2.0.3",

17764 "inherits": "^2.0.3",

@@ -18145,9 +18144,9 @@

18145 },

18144 },

18146 "dependencies": {

18145 "dependencies": {

18147 "buffer": {

18146 "buffer": {

18148− "version": "5.4.3",

18147+ "version": "5.5.0",

18149− "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.4.3.tgz",

18148+ "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.5.0.tgz",

18150− "integrity": "sha512-zvj65TkFeIt3i6aj5bIvJDzjjQQGs4o/sNoezg1F1kYap9Nu2jcUdpwzRSJTHMMzG0H7bZkn4rNQpImhuxWX2A==",

18149+ "integrity": "sha512-9FTEDjLjwoAkEwyMGDjYJQN2gfRgOKBKRfiglhvibGbpeeU/pQn1bJxQqm32OD/AIeEuHxU9roxXxg34Byp/Ww==",

18151 "requires": {

18150 "requires": {

18152 "base64-js": "^1.0.2",

18151 "base64-js": "^1.0.2",

18153 "ieee754": "^1.1.4"

18152 "ieee754": "^1.1.4"

blog/package.json+3−3

@@ -10,16 +10,16 @@

10 "gatsby": "^2.19.45",

11 "gatsby-image": "^2.2.8",

12 "gatsby-plugin-alias-imports": "^1.0.5",

13− "gatsby-plugin-manifest": "^2.2.4",

13+ "gatsby-plugin-manifest": "^2.3.2",

14 "gatsby-plugin-mdx": "^1.0.0",

15 "gatsby-plugin-offline": "^2.2.4",

16 "gatsby-plugin-purescript": "^2.0.0",

17 "gatsby-plugin-react-helmet": "^3.1.3",

18 "gatsby-plugin-react-svg": "^3.0.0",

19− "gatsby-plugin-sharp": "^2.2.9",

19+ "gatsby-plugin-sharp": "^2.5.2",

20 "gatsby-plugin-web-font-loader": "^1.0.4",

21 "gatsby-source-filesystem": "^2.1.8",

22− "gatsby-transformer-sharp": "^2.2.5",

22+ "gatsby-transformer-sharp": "^2.4.2",

23 "mdx-utils": "^0.2.0",

24 "monaco-editor": "^0.20.0",

25 "monaco-editor-webpack-plugin": "^1.8.2",

blog/src/components/PSLayout.purs+42−38

@@ -2,18 +2,20 @@ module PSLayout where

3import Prelude

5+import Color (toHexString)

5import Data.Array as Array

6import Data.Array as Array

6−import Data.Maybe (fromMaybe)

7+import Data.Maybe (Maybe(..), fromMaybe)

7import Data.Nullable (Nullable)

8import Data.Nullable (Nullable)

8import Data.Nullable as Nullable

9import Data.Nullable as Nullable

9import Data.String as String

10import Data.String as String

10import Effect (Effect)

11import Effect (Effect)

11import JSS (jss, jssClasses)

12import JSS (jss, jssClasses)

13+import Justifill (justifill)

12import Milkis.Impl (FetchImpl)

14import Milkis.Impl (FetchImpl)

13import React.Basic (JSX, ReactComponent)

15import React.Basic (JSX, ReactComponent)

14import React.Basic.DOM (unsafeCreateDOMComponent)

16import React.Basic.DOM (unsafeCreateDOMComponent)

15import React.Basic.DOM as R

17import React.Basic.DOM as R

16−import React.Basic.Helpers (element_)

18+import React.Basic.Helpers (jsx)

17import React.Basic.Hooks (ReactChildren, component, componentWithChildren, element, reactChildrenToArray)

19import React.Basic.Hooks (ReactChildren, component, componentWithChildren, element, reactChildrenToArray)

18import React.Basic.Hooks as React

20import React.Basic.Hooks as React

19import Yoga.CompileEditor.Component (mkCompileEditor)

21import Yoga.CompileEditor.Component (mkCompileEditor)

@@ -62,10 +64,10 @@ mkLayout fetchImpl = do

62 mdxProviderComponent <- mkMdxProviderComponent fetchImpl

64 mdxProviderComponent <- mkMdxProviderComponent fetchImpl

63 componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do

65 componentWithChildren "MDXLayout" \{ children, siteInfo } -> React.do

64 pure

66 pure

65− $ element_ themeProvider

67+ $ element themeProvider

66 { theme: fromTheme darkTheme

68 { theme: fromTheme darkTheme

67 , children:

69 , children:

68− [ element_ mdxProviderComponent

70+ [ element mdxProviderComponent

69 { children

71 { children

70 , siteInfo

72 , siteInfo

71 }

73 }

@@ -88,31 +90,30 @@ mkMdxProviderComponent fetchImpl = do

88 h <- mkH

90 h <- mkH

89 p <- mkP

91 p <- mkP

90 useStyles <-

92 useStyles <-

93+ makeStylesJSS

91− makeStylesJSS $ jssClasses \(theme :: CSSTheme) ->

94+ $ jssClasses \(theme ∷ CSSTheme) ->

92− { code:

95+ { code:

93− jss

94− { fontFamily: theme.codeFontFamily

96+ { fontFamily: theme.codeFontFamily

95− , backgroundColor: theme.interfaceColour

97+ , backgroundColor: toHexString $ theme.interfaceColour

96− , fontSize: "10pt"

98+ , fontSize: "10pt"

97− , border: "1px solid #383c39"

99+ , border: "1px solid #383c39"

98− , padding: "3px"

100+ , padding: "3px"

99− , borderRadius: "3px"

101+ , borderRadius: "3px"

100− }

102+ }

101− , flexer:

103+ , flexer:

102− jss

103− { display: "flex"

104+ { display: "flex"

104− , flexDirection: "row"

105+ , flexDirection: "row"

106+ }

105 }

107 }

106− }

107 componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do

108 componentWithChildren "MDXProviderComponent" \{ children, siteInfo } -> React.do

108 classes <- useStyles {}

109 classes <- useStyles {}

109 let

110 let

110− baseline child = element_ cssBaseline { kids: child }

111+ baseline child = element cssBaseline { kids: child }

111

112

112 siteInfoJSX =

113 siteInfoJSX =

113 R.div

114 R.div

114 { children:

115 { children:

115− [ element_ header { kids: [ R.text siteInfo.site.siteMetadata.title ], className: "" }

116+ [ jsx header { className: "" } [ R.text siteInfo.site.siteMetadata.title ]

116 , element sidebar { links: siteInfo.site.siteMetadata.menuLinks }

117 , element sidebar { links: siteInfo.site.siteMetadata.menuLinks }

117 , R.div_ (reactChildrenToArray children)

118 , R.div_ (reactChildrenToArray children)

118 ]

119 ]

@@ -121,17 +122,17 @@ mkMdxProviderComponent fetchImpl = do

121 mdxComponents =

122 mdxComponents =

122 { h1:

123 { h1:

123 \props ->

124 \props ->

124− element_ h { level: H2, text: props.children }

125+ element h ({ level: H2, text: props.children, className: Nothing })

125 , h2:

126 , h2:

126 \props ->

127 \props ->

127− element_ h { level: H3, text: props.children }

128+ element h { level: H3, text: props.children, className: Nothing }

128 , h3:

129 , h3:

129 \props ->

130 \props ->

130− element_ h { level: H4, text: props.children }

131+ element h { level: H4, text: props.children , className: Nothing}

131 , p:

132 , p:

132 \props ->

133 \props ->

133 R.div

134 R.div

134− { children: [ element_ p { text: props.children } ]

135+ { children: [ element p { text: props.children } ]

135 }

136 }

136 , inlineCode:

137 , inlineCode:

137 \props -> do

138 \props -> do

@@ -164,7 +165,7 @@ mkMdxProviderComponent fetchImpl = do

164

165

165 language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))

166 language = fromMaybe "" (classNameQ >>= String.stripPrefix (String.Pattern "language-"))

166 if isCode then

167 if isCode then

167− element_ editor

168+ element editor

168 { initialCode: fromMaybe "" codeQ

169 { initialCode: fromMaybe "" codeQ

169 , height

170 , height

170 , language

171 , language

@@ -185,22 +186,25 @@ mkMdxProviderComponent fetchImpl = do

185mkSidebar = do

186mkSidebar = do

186 withSidebar <- WithSidebar.makeComponent

187 withSidebar <- WithSidebar.makeComponent

187 useStyles <-

188 useStyles <-

189+ makeStylesJSS

188− makeStylesJSS $ jssClasses \(theme :: CSSTheme) ->

190+ $ jssClasses \(theme ∷ CSSTheme) ->

189− { flexer:

191+ { flexer:

190− jss

192+ jss

191− { display: "flex"

193+ { display: "flex"

192− , flexDirection: "row"

194+ , flexDirection: "row"

193− , width: "300px"

195+ , width: "300px"

194− , height: "300px"

196+ , height: "300px"

197+ }

195 }

198 }

196− }

197 component "Sidebar" \{ links } -> React.do

199 component "Sidebar" \{ links } -> React.do

198 classes <- useStyles {}

200 classes <- useStyles {}

199 pure

201 pure

200− $ element_ withSidebar

202+ $ element withSidebar

203+ ( justifill

201− { sidebarChildren: [ R.div_ [ R.text "hahahaha"] ]

204+ { sidebarChildren: [ R.div_ [ R.text "hahahaha" ] ]

202− , notSidebarChildren: []

205+ , notSidebarChildren: [] ∷ Array JSX

203− }

206+ }

207+ )

204

208

205foreign import mdxProvider ∷

209foreign import mdxProvider ∷

206 ∀ r.

210 ∀ r.

components/.vscode/settings.json+4−1

@@ -1,5 +1,8 @@

2 "editor.formatOnSave": true,

3 "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

components/src/Storybook/Decorator/FullScreen.purs+17−17

@@ -2,8 +2,7 @@ module Storybook.Decorator.FullScreen where

3import Prelude

4import Data.Array (find)

5−import Data.Map (Map)

6−import Data.Traversable (for_, traverse_)

5+import Data.Traversable (traverse_)

7import Effect (Effect)

6import Effect (Effect)

8import JSS (jss, jssClasses)

7import JSS (jss, jssClasses)

9import React.Basic (JSX)

8import React.Basic (JSX)

@@ -13,7 +12,6 @@ import React.Basic.DOM.Events (targetValue)

13import React.Basic.Events (handler)

12import React.Basic.Events (handler)

14import React.Basic.Hooks (ReactComponent, component, element, useEffect, useState, (/\))

13import React.Basic.Hooks (ReactComponent, component, element, useEffect, useState, (/\))

15import React.Basic.Hooks as React

14import React.Basic.Hooks as React

16−import Simple.JSON (readJSON_, writeJSON)

17import Web.HTML (window)

15import Web.HTML (window)

18import Web.HTML.Window (localStorage)

16import Web.HTML.Window (localStorage)

19import Web.Storage.Storage (getItem, setItem)

17import Web.Storage.Storage (getItem, setItem)

@@ -52,15 +50,16 @@ fullScreenDecorator mkChild = do

52 ]

50 ]

53 }

51 }

55−type ThemesWithNames

53+type NamedTheme

56− = Map String CSSTheme

57−

58−type DefaultTheme

59 = { name ∷ String, theme ∷ CSSTheme }

54 = { name ∷ String, theme ∷ CSSTheme }

61mkThemeSwitcher ∷

56mkThemeSwitcher ∷

62 Effect

57 Effect

63− ( ReactComponent { defaultTheme ∷ DefaultTheme, themes ∷ Array DefaultTheme, child ∷ JSX }

58+ ( ReactComponent

59+ { defaultTheme ∷ NamedTheme

60+ , themes ∷ Array NamedTheme

61+ , child ∷ JSX

62+ }

64 )

63 )

65mkThemeSwitcher = do

64mkThemeSwitcher = do

66 themeProvider <- mkThemeProvider

65 themeProvider <- mkThemeProvider

@@ -80,20 +79,21 @@ mkThemeSwitcher = do

80 component "ThemeSwitcher" \{ defaultTheme, themes, child } -> React.do

79 component "ThemeSwitcher" \{ defaultTheme, themes, child } -> React.do

81 { theme, name } /\ modTheme <- useState defaultTheme

80 { theme, name } /\ modTheme <- useState defaultTheme

82 useEffect unit do

81 useEffect unit do

83− maybeSaved <- getItem "theme" storage <#> (_ >>= readJSON_)

82+ maybeSaved <- getItem "theme" storage

84− for_ maybeSaved (modTheme <<< const)

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

85 pure mempty

89 pure mempty

86 classes <- useStyles {}

90 classes <- useStyles {}

87− let

88− setTheme newTheme = do

89− setItem "theme" (writeJSON newTheme) storage

90− modTheme (const newTheme)

91 let

92 handleClicked maybeValue =

93− traverse_ setTheme do

93+ traverse_ (modTheme <<< const) do

94 value <- maybeValue

95− themes # find \x -> x.name == value

95+ find (\x -> x.name == value) themes

96− let

96+

97 themeSelect =

98 R.select

99 { onChange: handler targetValue handleClicked

components/src/Yoga/Box/Styles.purs+3−2

@@ -1,6 +1,7 @@

1module Yoga.Box.Styles where

3import Prelude

4+import Color (toHexString)

4import Data.Maybe (Maybe)

5import Data.Maybe (Maybe)

5import JSS (JSSClasses, JSSElem, jssClasses)

6import JSS (JSSClasses, JSSElem, jssClasses)

6import Yoga.Helpers ((?||))

7import Yoga.Helpers ((?||))

@@ -25,8 +26,8 @@ styles =

25 { box:

26 { box:

26 \props ->

27 \props ->

27 { padding: props.padding ?|| "var(--s1)"

28 { padding: props.padding ?|| "var(--s1)"

28− , "--colour-light": theme.backgroundColour

29+ , "--colour-light": theme.backgroundColour # toHexString

29− , "--colour-dark": theme.textColour

30+ , "--colour-dark": theme.textColour # toHexString

30 , color: "var(--colour-dark)"

31 , color: "var(--colour-dark)"

31 , backgroundColor: "var(--colour-light)"

32 , backgroundColor: "var(--colour-light)"

32 , border: props.border ?|| "0 solid"

33 , border: props.border ?|| "0 solid"

components/src/Yoga/Button/Component.purs+66−43

@@ -1,12 +1,11 @@

1module Yoga.Button.Component where

3import Prelude

4−import CSS (ColorSpace(..), hotpink, mix, toHexString)

4+import CSS (Color, ColorSpace(..), mix, toHexString)

5import CSS as Color

6−import Color (fromHexString)

7import Data.Foldable (intercalate)

6import Data.Foldable (intercalate)

8import Data.Interpolate (i)

7import Data.Interpolate (i)

9−import Data.Maybe (Maybe, fromMaybe)

8+import Data.Maybe (Maybe)

10import Data.Monoid (guard)

9import Data.Monoid (guard)

11import Effect (Effect)

10import Effect (Effect)

12import JSS (JSSClasses, JSSElem, jssClasses)

11import JSS (JSSClasses, JSSElem, jssClasses)

@@ -16,7 +15,7 @@ import React.Basic.Events (EventHandler)

16import React.Basic.Hooks (ReactComponent, component)

15import React.Basic.Hooks (ReactComponent, component)

17import React.Basic.Hooks as React

16import React.Basic.Hooks as React

18import Yoga.Helpers ((?||))

17import Yoga.Helpers ((?||))

19−import Yoga.Theme (increaseContrast, unsafeAlaColor)

18+import Yoga.Theme (increaseContrast, unsafeWithAlpha)

20import Yoga.Theme.Styles (makeStylesJSS)

19import Yoga.Theme.Styles (makeStylesJSS)

21import Yoga.Theme.Types (CSSTheme, YogaTheme)

20import Yoga.Theme.Types (CSSTheme, YogaTheme)

@@ -38,24 +37,30 @@ highlightStyles =

38 $ \(theme ∷ CSSTheme) ->

37 $ \(theme ∷ CSSTheme) ->

39 { highlightedButton:

38 { highlightedButton:

40 { background:

39 { background:

41− Color.cssStringRGBA do

40+ linearGradient

42− let

41+ ( if theme.isLight then

43− col = Color.fromHexString theme.backgroundColour ?|| hotpink

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

45− { r, g, b, a } = Color.toRGBA (col)

56+ { r, g, b, a } = Color.toRGBA (Color.saturate (10.0) col)

46− Color.rgba r g b 0.2

57+ Color.rgba r g b 0.5

58+ ]

47 , "&:active":

59 , "&:active":

48 { background:

60 { background:

49− linearGradient [ "145deg", theme.highlightColourDark, theme.highlightColour ]

61+ linearGradient "145deg" [ theme.highlightColourDark, theme.highlightColour ]

50 }

62 }

51− , color:

63+ , color: Color.white

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

59 }

64 }

60 }

65 }

@@ -69,12 +74,20 @@ styles =

69 jssClasses

74 jssClasses

70 $ \(theme ∷ CSSTheme) ->

75 $ \(theme ∷ CSSTheme) ->

71 { buttonContainer:

76 { buttonContainer:

72− { padding: "2px"

77+ { padding: "var(--s-4)"

78+ , background:

79+ linearGradient "135deg"

73− , background: linearGradient [ "135deg", theme.highlightColourRotatedBackwards, theme.highlightColourRotatedForwards ]

80+ [ theme.highlightColourRotatedBackwards

81+ , theme.highlightColourRotatedForwards

82+ ]

74 , borderRadius: "var(--s1)"

83 , borderRadius: "var(--s1)"

75 , height: "calc(var(--s1) - var(--s1-3))"

84 , height: "calc(var(--s1) - var(--s1-3))"

76 , minWidth: "var(--s2)"

85 , minWidth: "var(--s2)"

77 , boxSizing: "border-box"

86 , boxSizing: "border-box"

87+ , boxShadow:

88+ ( unsafeWithAlpha 0.15 "#000000"

89+ )

90+ <> " 0px 1px 2px 2px"

78 }

91 }

79 , "@keyframes gradientBG":

92 , "@keyframes gradientBG":

80 { "0%": { backgroundPosition: "0% 50%" }

93 { "0%": { backgroundPosition: "0% 50%" }

@@ -83,15 +96,22 @@ styles =

83 }

96 }

84 , btn:

97 , btn:

85 { width: "100%"

98 { 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+ ]

87 , color:

104 , color:

105+ let

88− theme.highlightColour

106+ c = theme.highlightColour

107+ in

89− # unsafeAlaColor \c -> if Color.isLight c then Color.darken 0.2 c else Color.lighten 0.2 c

108+ if Color.isLight c then Color.rotateHue (-10.0) c else Color.lighten 0.2 c

90 , borderRadius: "var(--s1)"

109 , borderRadius: "var(--s1)"

91 , border: "0"

110 , border: "0"

92− , height: "var(--s2)"

111+ , height: "calc(var(--s2) + var(--s-4) - 2px)"

93− , fontSize: "var(--s-1)"

112+ , fontSize: "calc(var(--s-1))"

94− , fontFamily: theme.textFontFamily

113+ , fontFamily: "Rubik Regular"

114+ , fontWeight: "600"

95 , padding: "0 var(--s0) 0 var(--s0)"

115 , padding: "0 var(--s0) 0 var(--s0)"

96 , letterSpacing: "var(--s-5)"

116 , letterSpacing: "var(--s-5)"

97 , textTransform: "uppercase"

117 , textTransform: "uppercase"

@@ -99,41 +119,44 @@ styles =

99 , "&:focus":

119 , "&:focus":

100 { background:

120 { background:

101 linearGradient

121 linearGradient

102− [ "145deg"

122+ "145deg"

103− , theme.interfaceColourDarker

123+ [ theme.interfaceColourDarker

104 , theme.highlightColourDark

124 , theme.highlightColourDark

105 , theme.highlightColour

125 , theme.highlightColour

106 ]

126 ]

107 , color:

127 , color:

108− fromMaybe theme.textColour do

128+ do

109− hlc <- theme.highlightColour # fromHexString

110− hlcd <- theme.highlightColourDark # fromHexString

111 let

129 let

130+ hlc = theme.highlightColour

131+

132+ hlcd = theme.highlightColourDark

133+

112 bg = if theme.isLight then hlc else mix HSL hlc hlcd 0.5

134 bg = if theme.isLight then hlc else mix HSL hlc hlcd 0.5

135+

113− tc <- theme.textColour # fromHexString

136+ tc = theme.textColour

114− pure $ increaseContrast bg tc # toHexString

137+ increaseContrast bg tc

115 , backgroundSize: "200% 400%, 100% 100%"

138 , backgroundSize: "200% 400%, 100% 100%"

116 , animation: "$gradientBG 3s ease infinite"

139 , animation: "$gradientBG 3s ease infinite"

117 }

140 }

118 , "&:active":

141 , "&:active":

119 { boxShadow:

142 { boxShadow:

120 ( i "inset 6px 6px 6px "

143 ( i "inset 6px 6px 6px "

121− theme.backgroundColourDarkest

144+ (toHexString theme.backgroundColourDarkest)

122 ", inset -6px -6px 6px "

145 ", inset -6px -6px 6px "

123− theme.backgroundColourLightest ∷

146+ (toHexString theme.backgroundColourLightest)

147+ ) ∷

124− String

148+ String

125− )

126 , background:

149 , background:

127 linearGradient

150 linearGradient

128− [ "145deg"

151+ "145deg"

129− , theme.backgroundColourDarker

152+ [ theme.backgroundColourDarker

130 , theme.backgroundColourLighter

153 , theme.backgroundColourLighter

131 ]

154 ]

132 }

155 }

133 , "&:disabled":

156 , "&:disabled":

134 { boxShadow: "0 0 0 black"

157 { boxShadow: "0 0 0 black"

135− , background: theme.backgroundColour

158+ , background: theme.grey

136− , border: "1px dotted " <> theme.interfaceColourLightest

159+ , border: "1px dotted " <> toHexString theme.interfaceColourLightest

137 , textDecoration: "line-through"

160 , textDecoration: "line-through"

138 , textDecorationColor: theme.red

161 , textDecorationColor: theme.red

139 }

162 }

@@ -176,5 +199,5 @@ mkButton = do

176 ]

199 ]

177 }

200 }

178

201

179−linearGradient ∷ Array String -> String

202+linearGradient ∷ String -> Array Color -> String

180−linearGradient elems = "linear-gradient(" <> intercalate "," elems <> ")"

203+linearGradient direction elems = "linear-gradient(" <> direction <> "," <> intercalate "," (map toHexString elems) <> ")"

components/src/Yoga/Card/Component.purs+33−36

@@ -1,9 +1,10 @@

1module Yoga.Card.Component where

3import Prelude

4+import Color (toHexString)

4import Data.Interpolate (i)

5import Data.Interpolate (i)

5import Effect (Effect)

6import Effect (Effect)

6−import JSS (JSSClasses, JSSElem, jss, jssClasses)

7+import JSS (JSSClasses, JSSElem, jssClasses)

7import React.Basic (JSX)

8import React.Basic (JSX)

8import React.Basic.DOM as R

9import React.Basic.DOM as R

9import React.Basic.Hooks (ReactComponent, component)

10import React.Basic.Hooks (ReactComponent, component)

@@ -18,16 +19,15 @@ styles ∷ JSSClasses YogaTheme StyleProps ( card ∷ JSSElem StyleProps )

18styles =

19styles =

19 jssClasses \(theme ∷ CSSTheme) ->

20 jssClasses \(theme ∷ CSSTheme) ->

20 { card:

21 { card:

21− jss

22− { background: (i "linear-gradient(145deg," theme.backgroundColourDarker ", " theme.backgroundColourLighter ")") ∷ String

22+ { background: (i "linear-gradient(145deg," (toHexString theme.backgroundColourDarker) ", " (toHexString theme.backgroundColourLighter) ")") ∷ String

23− , color: theme.textColour

23+ , color: theme.textColour # toHexString

24− , fontFamily: theme.textFontFamily

24+ , fontFamily: theme.textFontFamily

25− , margin: "20px"

25+ , margin: "20px"

26− , boxShadow:

26+ , boxShadow:

27− (i "30px 30px 60px " theme.backgroundColourDarker ", -30px -30px 60px " theme.backgroundColourLighter ";") ∷ String

27+ (i "30px 30px 60px " (toHexString theme.backgroundColourDarker) ", -30px -30px 60px " (toHexString theme.backgroundColourLighter) ";") ∷ String

28− , borderRadius: "15px"

28+ , borderRadius: "15px"

29− , padding: "36px 40px 32px 40px"

29+ , padding: "36px 40px 32px 40px"

30− }

30+ }

31 }

33mkCard ∷

@@ -58,13 +58,12 @@ mkCardTitle = do

58 makeStylesJSS

59 $ jssClasses \(theme ∷ CSSTheme) ->

60 { cardtitle:

61− jss

62− { color: theme.textColourLightest

61+ { color: theme.textColourLightest # toHexString

63− , fontSize: "1.2em"

62+ , fontSize: "1.2em"

64− , fontWeight: "400"

63+ , fontWeight: "400"

65− , fontFamily: theme.headingFontFamily

64+ , fontFamily: theme.headingFontFamily

66− , padding: "4px 8px"

65+ , padding: "4px 8px toHexString"

67− }

66+ }

68 }

67 }

69 component "CardTitle" \{ kids } -> React.do

68 component "CardTitle" \{ kids } -> React.do

70 classNames <- useStyles {}

69 classNames <- useStyles {}

@@ -85,14 +84,13 @@ mkCardSubtitle = do

85 makeStylesJSS

84 makeStylesJSS

86 $ jssClasses \(theme ∷ CSSTheme) ->

85 $ jssClasses \(theme ∷ CSSTheme) ->

87 { cardtitle:

86 { cardtitle:

88− jss

89− { color: theme.textColourDarker

87+ { color: theme.textColourDarker # toHexString

90− , opacity: "0.8"

88+ , opacity: "0.8"

91− , fontSize: "1.0em"

89+ , fontSize: "1.0em"

92− , fontWeight: "500"

90+ , fontWeight: "500"

93− , fontFamily: theme.headingFontFamily

91+ , fontFamily: theme.headingFontFamily

94− , padding: "4px 8px 22px 8px"

92+ , padding: "4px 8px 22px 8px"

95− }

93+ }

96 }

94 }

97 component "CardSubtitle" \{ kids } -> React.do

95 component "CardSubtitle" \{ kids } -> React.do

98 classNames <- useStyles {}

96 classNames <- useStyles {}

@@ -113,16 +111,15 @@ mkCardContent = do

113 makeStylesJSS

111 makeStylesJSS

114 $ jssClasses \(theme ∷ CSSTheme) ->

112 $ jssClasses \(theme ∷ CSSTheme) ->

115 { cardContent:

113 { cardContent:

116− jss

117− { fontFamily: theme.textFontFamily

114+ { fontFamily: theme.textFontFamily

118− , color: theme.textColourDarker

115+ , color: theme.textColourDarker # toHexString

119− , fontSize: "0.8em"

116+ , fontSize: "0.8em"

120− , fontWeight: "300"

117+ , fontWeight: "300"

121− , "WebkitFontSmoothing": "subpixel-antialiased"

118+ , "WebkitFontSmoothing": "subpixel-antialiased"

122− , textAlign: "justify"

119+ , textAlign: "justify"

123− , hyphens: "auto"

120+ , hyphens: "auto"

124− , padding: "4px 8px 22px 8px"

121+ , padding: "4px 8px 22px 8px"

125− }

122+ }

126 }

123 }

127 component "CardContent" \{ kids } -> React.do

124 component "CardContent" \{ kids } -> React.do

128 classNames <- useStyles {}

125 classNames <- useStyles {}

components/src/Yoga/CompileEditor/Component.purs+19−27

@@ -1,7 +1,7 @@

1module Yoga.CompileEditor.Component where

3import Prelude hiding (add)

4−import CSS (JustifyContentValue(..), flexEnd)

4+import CSS (JustifyContentValue(..), flexEnd, toHexString)

5import Data.Array (intercalate)

6import Data.Either (Either(..))

7import Data.Foldable (for_)

@@ -51,16 +51,13 @@ mkCompileEditor fetch = do

51 , padding: "20px"

52 , marginTop: "0px"

53 , 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

55 , display: "flex"

56 , flexDirection: "column"

57 , minWidth: theme.measure

58 }

59 , card:

60− { marginLeft: "35px"

61− , marginRight: "35px"

62− , opacity: 0

63− , zIndex: 0

60+ { zIndex: 0

64 }

61 }

65 , cardHidden: { opacity: 0 }

62 , cardHidden: { opacity: 0 }

66 , compileError: { color: theme.red, opacity: 1, transition: "opacity 2.0s ease" }

63 , compileError: { color: theme.red, opacity: 1, transition: "opacity 2.0s ease" }

@@ -99,28 +96,23 @@ mkCompileEditor fetch = do

99 res <- compileAndRun (M.fetch fetch) { code }

96 res <- compileAndRun (M.fetch fetch) { code }

100 setCompileResult (Just res) # liftEffect

97 setCompileResult (Just res) # liftEffect

101 pure

98 pure

102− $ fragment

99+ $ jsx stack { space: "--s1" }

103− [ R.div

104− { children:

105− pure

106− $ jsx stack { space: "--s0" }

100+ [ jsx stack { space: "--s0", className: classes.editor }

107− [ element editor { onLoad, height, language }

101+ [ element editor { onLoad, height, language }

108− , jsx cluster { justify: JustifyContentValue flexEnd }

102+ , jsx cluster { justify: JustifyContentValue flexEnd }

109− [ R.div_

103+ [ R.div_

110− [ jsx button

104+ [ jsx button

111− { onClick: handler_ reset

105+ { onClick: handler_ reset

112− }

106+ }

113− [ R.text "Reset" ]

107+ [ R.text "Reset" ]

114− , jsx button

108+ , jsx button

115− { buttonType: HighlightedButton

109+ { buttonType: HighlightedButton

116− , onClick: handler_ compile

110+ , onClick: handler_ compile

117− }

111+ }

118− [ R.text "Compile" ]

112+ [ R.text "Run" ]

119− ]

120− ]

121 ]

113 ]

122− , className: classes.editor

114+ ]

123− }

115+ ]

124 , element card

116 , element card

125 { kids: [ R.text (compileResultToString compileResult) ]

117 { kids: [ R.text (compileResultToString compileResult) ]

126 , className: classes.card <> " " <> compileResultToClass compileResult

118 , className: classes.card <> " " <> compileResultToClass compileResult

components/src/Yoga/Font/Rubik.js+2−2

@@ -1,6 +1,6 @@

1exports.rubikRegularwoff2 = require("../../../assets/fonts/Rubik-Regular.woff2");

2−exports.rubikBoldwoff2 = require("../../../assets/fonts/Rubik-Bold.woff2");

2+exports.rubikMediumwoff2 = require("../../../assets/fonts/Rubik-Medium.woff2");

3−exports.rubikBoldItalicwoff2 = require("../../../assets/fonts/Rubik-BoldItalic.woff2");

3+exports.rubikMediumItalicwoff2 = require("../../../assets/fonts/Rubik-MediumItalic.woff2");

4exports.rubikItalicwoff2 = require("../../../assets/fonts/Rubik-Italic.woff2");

5exports.rubikLightwoff2 = require("../../../assets/fonts/Rubik-Light.woff2");

6exports.rubikLightItalicwoff2 = require("../../../assets/fonts/Rubik-LightItalic.woff2");

components/src/Yoga/Font/Rubik.purs+17−12

@@ -4,32 +4,32 @@ import Prelude

4import Unsafe.Coerce (unsafeCoerce)

5import Yoga.Font (Font, FontFamily)

7−foreign import rubikRegularwoff2 :: Font

7+foreign import rubikRegularwoff2 ∷ Font

9−foreign import rubikBoldwoff2 :: Font

9+foreign import rubikMediumwoff2 ∷ Font

11−foreign import rubikBoldItalicwoff2 :: Font

11+foreign import rubikMediumItalicwoff2 ∷ Font

13−foreign import rubikItalicwoff2 :: Font

13+foreign import rubikItalicwoff2 ∷ Font

15−foreign import rubikLightwoff2 :: Font

15+foreign import rubikLightwoff2 ∷ Font

17−foreign import rubikLightItalicwoff2 :: Font

17+foreign import rubikLightItalicwoff2 ∷ Font

19−fontFamilies :: Array FontFamily

19+fontFamilies ∷ Array FontFamily

20fontFamilies =

21 [ { fontFamily: "Rubik"

22 , src: "url(" <> unsafeCoerce rubikItalicwoff2 <> """) format("woff2")"""

23 , fontWeight: "normal"

24 , fontStyle: "italic"

25 }

26− , { fontFamily: "Rubik"

26+ , { fontFamily: "Rubik Medium"

27− , src: "url(" <> unsafeCoerce rubikBoldwoff2 <> """) format("woff2")"""

27+ , src: "url(" <> unsafeCoerce rubikMediumwoff2 <> """) format("woff2")"""

28− , fontWeight: "bold"

28+ , fontWeight: "400"

29 , fontStyle: "normal"

30 }

31 , { fontFamily: "Rubik"

32− , src: "url(" <> unsafeCoerce rubikBoldItalicwoff2 <> """) format("woff2")"""

32+ , src: "url(" <> unsafeCoerce rubikMediumItalicwoff2 <> """) format("woff2")"""

33 , fontWeight: "bold"

34 , fontStyle: "italic"

35 }

@@ -38,12 +38,17 @@ fontFamilies =

38 , fontWeight: "400"

39 , fontStyle: "normal"

40 }

41+ , { fontFamily: "Rubik Light"

42+ , src: "url(" <> unsafeCoerce rubikLightwoff2 <> """) format("woff2")"""

43+ , fontWeight: "400"

44+ , fontStyle: "normal"

45+ }

41 , { fontFamily: "Rubik Light"

46 , { fontFamily: "Rubik Light"

42 , src: "url(" <> unsafeCoerce rubikLightItalicwoff2 <> """) format("woff2")"""

47 , src: "url(" <> unsafeCoerce rubikLightItalicwoff2 <> """) format("woff2")"""

43 , fontWeight: "400"

48 , fontWeight: "400"

44 , fontStyle: "italic"

49 , fontStyle: "italic"

45 }

50 }

46− , { fontFamily: "Rubik"

51+ , { fontFamily: "Rubik Regular"

47 , src: "url(" <> unsafeCoerce rubikRegularwoff2 <> """) format("woff2")"""

52 , src: "url(" <> unsafeCoerce rubikRegularwoff2 <> """) format("woff2")"""

48 , fontWeight: "normal"

53 , fontWeight: "normal"

49 , fontStyle: "normal"

54 , fontStyle: "normal"

components/src/Yoga/Header/Component.purs+19−20

@@ -1,9 +1,10 @@

1module Yoga.Header.Component where

3import Prelude

4+import Color (toHexString)

4import Data.Interpolate (i)

5import Data.Interpolate (i)

5import Effect (Effect)

6import Effect (Effect)

6−import JSS (jss, jssClasses)

7+import JSS (jssClasses)

7import React.Basic (JSX)

8import React.Basic (JSX)

8import React.Basic.DOM as R

9import React.Basic.DOM as R

9import React.Basic.Hooks (ReactComponent, component, element)

10import React.Basic.Hooks (ReactComponent, component, element)

@@ -24,26 +25,24 @@ mkHeader = do

24 makeStylesJSS

25 makeStylesJSS

25 $ jssClasses \(theme ∷ CSSTheme) ->

26 $ jssClasses \(theme ∷ CSSTheme) ->

26 { card:

27 { card:

27− jss

28− { background: theme.backgroundColour

28+ { background: theme.backgroundColour # toHexString

29− , borderBottom: "1px solid " <> theme.backgroundColourLightest

29+ , borderBottom: "1px solid " <> (theme.backgroundColourLightest # toHexString)

30− , borderRight: "1px solid " <> theme.backgroundColourLightest

30+ , borderRight: "1px solid " <> (theme.backgroundColourLightest # toHexString)

31− , borderLeft: "1px solid " <> theme.backgroundColourLightest

31+ , borderLeft: "1px solid " <> (theme.backgroundColourLightest # toHexString)

32− , color: theme.textColour

32+ , color: theme.textColour # toHexString

33− , fontFamily: theme.textFontFamily

33+ , fontFamily: theme.textFontFamily

34− , fontSize: "2em"

34+ , fontSize: "2em"

35− , padding: "20px"

35+ , padding: "20px"

36− , display: "flex"

36+ , display: "flex"

37− , flex: "0 0 100%"

37+ , flex: "0 0 100%"

38− , boxShadow:

38+ , boxShadow:

39− (i "30px 30px 60px " theme.backgroundColourDarker ", -30px -30px 60px " theme.backgroundColourLighter ";") ∷ String

39+ (i "30px 30px 60px " (toHexString theme.backgroundColourDarker) ", -30px -30px 60px " (toHexString theme.backgroundColourLighter) ";") ∷ String

40− }

40+ }

41 , logo:

42− jss

43− { fill: theme.textColour

42+ { fill: theme.textColour # toHexString

44− , marginRight: "10px"

43+ , marginRight: "10px"

45− , marginBottom: "5px"

44+ , marginBottom: "5px"

46− }

45+ }

47 }

46 }

48 component "Header" \{ kids, className } -> React.do

47 component "Header" \{ kids, className } -> React.do

49 classNames <- useStyles {}

48 classNames <- useStyles {}

components/src/Yoga/JSS.purs+4−1

@@ -1,7 +1,7 @@

1module JSS where

3import Prelude

4−import CSS (Key(..), Rule(..), StyleM, Value(..), plain, runS)

4+import CSS (Color, Key(..), Rule(..), StyleM, Value(..), cssStringRGBA, plain, runS)

5import Data.Foldable (foldMap)

6import Data.Symbol (class IsSymbol, SProxy(..), reflectSymbol)

7import Debug.Trace (spy)

@@ -90,6 +90,9 @@ class JSSAble p a | a -> p where

90instance jssAbleJssElem ∷ JSSAble p (JSSElem p) where

91 jss = identity

93+instance jssAbleColor ∷ JSSAble p Color where

94+ jss c = PrimitiveJss (coerce (cssStringRGBA c))

95+

93instance jssAbleString ∷ JSSAble p String where

96instance jssAbleString ∷ JSSAble p String where

94 jss = coerce >>> PrimitiveJss

97 jss = coerce >>> PrimitiveJss

components/src/Yoga/Modal/Styles.purs+3−4

@@ -1,9 +1,8 @@

1module Yoga.Modal.Styles where

3import Prelude hiding (top)

4−import CSS (backgroundColor, black, borderRadius, boxShadow, fromHexString, hotpink, nil, rem)

4+import CSS (backgroundColor, black, borderRadius, boxShadow, nil, rem, toHexString)

5import JSS (JSSClasses, JSSElem, jssClasses)

6−import Yoga.Helpers ((?||))

7import Yoga.Theme.Types (YogaTheme)

6import Yoga.Theme.Types (YogaTheme)

9type PropsR

8type PropsR

@@ -36,11 +35,11 @@ styles =

36 }

35 }

37 , box:

36 , box:

38 do

37 do

39− backgroundColor (fromHexString theme.interfaceColour ?|| hotpink)

38+ backgroundColor theme.interfaceColour

40 boxShadow nil nil (3.5 # rem) black

39 boxShadow nil nil (3.5 # rem) black

41 borderRadius boxBorderRadius boxBorderRadius boxBorderRadius boxBorderRadius

40 borderRadius boxBorderRadius boxBorderRadius boxBorderRadius boxBorderRadius

42 , closeIcon:

41 , closeIcon:

43− { fill: theme.backgroundColour

42+ { fill: toHexString theme.backgroundColour

44 , width: "calc(0.67 * var(--s1))"

43 , width: "calc(0.67 * var(--s1))"

45 , height: "calc(0.67 * var(--s1))"

44 , height: "calc(0.67 * var(--s1))"

46 , margin: 0

45 , margin: 0

components/src/Yoga/Monaco/Editor.purs+11−11

@@ -1,6 +1,8 @@

1module Yoga.Editor where

3import Prelude

4+import CSS (backgroundColor, borderBox, boxSizing, margin, pct, unitless, width)

5+import CSS.Overflow (hidden, overflowY)

4import Control.Promise (Promise)

6import Control.Promise (Promise)

5import Control.Promise as Promise

7import Control.Promise as Promise

6import Data.Maybe (Maybe(..), maybe)

8import Data.Maybe (Maybe(..), maybe)

@@ -12,7 +14,7 @@ import Effect.Aff.Compat (EffectFn1)

12import Effect.Class (liftEffect)

14import Effect.Class (liftEffect)

13import Effect.Uncurried (EffectFn2, mkEffectFn1, mkEffectFn2)

15import Effect.Uncurried (EffectFn2, mkEffectFn1, mkEffectFn2)

14import Foreign (Foreign, unsafeToForeign)

16import Foreign (Foreign, unsafeToForeign)

15−import JSS (jss, jssClasses)

17+import JSS (jssClasses)

16import Prim.Row (class Union)

18import Prim.Row (class Union)

17import React.Basic (JSX, ReactComponent, Ref, element, fragment)

19import React.Basic (JSX, ReactComponent, Ref, element, fragment)

18import React.Basic.DOM as R

20import React.Basic.DOM as R

@@ -95,16 +97,14 @@ mkEditor = do

95 useStyles <-

97 useStyles <-

96 makeStylesJSS

98 makeStylesJSS

97 $ jssClasses \(theme ∷ CSSTheme) ->

99 $ jssClasses \(theme ∷ CSSTheme) ->

98− ( { wrapper:

100+ { wrapper:

99− jss

101+ do

100− { margin: "0"

102+ margin (0.0 # unitless) (0.0 # unitless) (0.0 # unitless) (0.0 # unitless)

101− , boxSizing: "border-box"

103+ boxSizing borderBox

102− , width: "100%"

104+ width (100.0 # pct)

103− , overflowY: "hidden"

105+ overflowY hidden

104− , backgroundColor: theme.backgroundColour

106+ backgroundColor theme.backgroundColour

105− }

106− }

107+ }

107− )

108 component "Editor" \{ onLoad, height, language } -> React.do

109 classes <- useStyles {}

110 maybeEditor /\ modifyEditor <- useState Nothing

components/src/Yoga/SVG/Icon.purs+12−14

@@ -1,9 +1,10 @@

1module Yoga.SVG.Icon where

3import Prelude

4+import Color (toHexString)

4import Data.Monoid (guard)

5import Data.Monoid (guard)

5import Effect (Effect)

6import Effect (Effect)

6−import JSS (jss, jssClasses)

7+import JSS (jssClasses)

7import Prim.Row (class Union)

8import Prim.Row (class Union)

8import React.Basic.DOM.SVG as SVG

9import React.Basic.DOM.SVG as SVG

9import React.Basic.Events (EventHandler)

10import React.Basic.Events (EventHandler)

@@ -105,22 +106,19 @@ mkMenu = do

105 makeStylesJSS

106 makeStylesJSS

106 $ jssClasses \(theme ∷ CSSTheme) ->

107 $ jssClasses \(theme ∷ CSSTheme) ->

107 { arrow:

108 { arrow:

108− jss

109− { fill: theme.textColour

109+ { fill: theme.textColour # toHexString

110− , transition: "0.3s ease-out"

110+ , transition: "0.3s ease-out"

111− }

111+ }

112 , arrowInactive:

113− jss

114− { fillOpacity: ".1"

113+ { fillOpacity: ".1"

115− }

114+ }

116 , svg:

115 , svg:

117− jss

118− { width: "100%"

116+ { width: "100%"

119− , height: "100%"

117+ , height: "100%"

120− , "&:hover":

118+ , "&:hover":

121− { fill: theme.backgroundColour

119+ { fill: theme.backgroundColour # toHexString

122− }

123 }

120 }

121+ }

124 }

122 }

125 component "MenuIcon" \{ activeArrowDirection } -> React.do

123 component "MenuIcon" \{ activeArrowDirection } -> React.do

126 classes <- useStyles {}

124 classes <- useStyles {}

components/src/Yoga/SVG/Image.purs+66−83

@@ -1,6 +1,7 @@

1module Yoga.SVG.Image where

3import Prelude

4+import Color (toHexString)

4import Data.Array (elem, foldl, head, intercalate, snoc, uncons, zip, (:))

5import Data.Array (elem, foldl, head, intercalate, snoc, uncons, zip, (:))

5import Data.Int (round, toNumber)

6import Data.Int (round, toNumber)

6import Data.Maybe (Maybe(..), maybe)

7import Data.Maybe (Maybe(..), maybe)

@@ -8,7 +9,7 @@ import Data.String (codePointFromChar)

8import Data.String as String

9import Data.String as String

9import Data.Tuple.Nested ((/\))

10import Data.Tuple.Nested ((/\))

10import Effect (Effect)

11import Effect (Effect)

11−import JSS (jss, jssClasses)

12+import JSS (jssClasses)

12import Random.PseudoRandom (mkSeed, randomRs)

13import Random.PseudoRandom (mkSeed, randomRs)

13import React.Basic (JSX, element)

14import React.Basic (JSX, element)

14import React.Basic.DOM (unsafeCreateDOMComponent)

15import React.Basic.DOM (unsafeCreateDOMComponent)

@@ -32,104 +33,86 @@ mkLandingPageBackground = do

32 makeStylesJSS

33 makeStylesJSS

33 $ jssClasses \(theme ∷ CSSTheme) ->

34 $ jssClasses \(theme ∷ CSSTheme) ->

34 { laptopBackground:

35 { laptopBackground:

35− jss

36− { fill: theme.backgroundColour

36+ { fill: theme.backgroundColour # toHexString

37− }

37+ }

38 , lightEllipsis:

39− jss

40− { cx: if theme.isLight then "721" else "175"

39+ { cx: if theme.isLight then "721" else "175"

41− , cy: if theme.isLight then "355" else "310"

40+ , cy: if theme.isLight then "355" else "310"

42− , rx: if theme.isLight then "647" else "330"

41+ , rx: if theme.isLight then "647" else "330"

43− , ry: if theme.isLight then "310" else "252"

42+ , ry: if theme.isLight then "310" else "252"

44− }

43+ }

45 , laptopBody:

44 , laptopBody:

46− jss

47− { fill: if theme.isLight then "url(#_Linear9)" else "url(#_Linear12)"

45+ { fill: if theme.isLight then "url(#_Linear9)" else "url(#_Linear12)"

48− }

46+ }

49 , screenText:

47 , screenText:

50− jss

51− { fontFamily: theme.codeFontFamily

48+ { fontFamily: theme.codeFontFamily

52− , fontSize: "0.85em"

49+ , fontSize: "0.85em"

53− , fill: theme.textColour

50+ , fill: theme.textColour # toHexString

54− }

51+ }

55− , keyword: jss { fill: theme.green }

52+ , keyword: { fill: theme.green # toHexString }

56− , typeName: jss { fill: theme.pink }

53+ , typeName: { fill: theme.pink # toHexString }

57 , "@keyframes animatedCursor":

54 , "@keyframes animatedCursor":

58− jss

59− { "0%": { opacity: "0.0" }

55+ { "0%": { opacity: "0.0" }

60− , "50%": { opacity: "1.0" }

56+ , "50%": { opacity: "1.0" }

61− }

57+ }

62 , cursor:

58 , cursor:

63− jss

64− { animation: "$animatedCursor 0.5s linear infinite"

59+ { animation: "$animatedCursor 0.5s linear infinite"

65− , animationDirection: "alternate"

60+ , animationDirection: "alternate"

66− }

61+ }

67 , "@keyframes movingCloud1":

62 , "@keyframes movingCloud1":

68− jss

69− { "0%": { transform: "translate3d(-140%, 4%, 0)" }

63+ { "0%": { transform: "translate3d(-140%, 4%, 0)" }

70− , "100%": { transform: "translate3d(70%, -4%, 0)" }

64+ , "100%": { transform: "translate3d(70%, -4%, 0)" }

71− }

65+ }

72 , movingCloud1:

66 , movingCloud1:

73− jss

74− { animation: "$movingCloud1 200s linear infinite"

67+ { animation: "$movingCloud1 200s linear infinite"

75− , animationDelay: "-150s"

68+ , animationDelay: "-150s"

76− }

69+ }

77 , "@keyframes movingCloud2":

70 , "@keyframes movingCloud2":

78− jss

79− { "0%": { transform: "translate3d(-10%, 0%, 0)" }

71+ { "0%": { transform: "translate3d(-10%, 0%, 0)" }

80− , "100%": { transform: "translate3d(10%, 0%, 0)" }

72+ , "100%": { transform: "translate3d(10%, 0%, 0)" }

81− }

73+ }

82 , movingCloud2:

74 , movingCloud2:

83− jss

84− { animation: "$movingCloud2 120s linear infinite"

75+ { animation: "$movingCloud2 120s linear infinite"

85− , animationDirection: "alternate"

76+ , animationDirection: "alternate"

86− }

77+ }

87 , movingCloud3:

78 , movingCloud3:

88− jss

89− { animation: "$movingCloud2 120s linear infinite"

79+ { animation: "$movingCloud2 120s linear infinite"

90− , animationDelay: "-120s"

80+ , animationDelay: "-120s"

91− , animationDirection: "alternate"

81+ , animationDirection: "alternate"

92− }

82+ }

93 , "@keyframes twinkle":

83 , "@keyframes twinkle":

94− jss

95− { "0%": { fill: "rgba(250, 250, 250, 0.2)" }

84+ { "0%": { fill: "rgba(250, 250, 250, 0.2)" }

96− , "50%": { fill: "rgba(250, 250, 250, 0.7)" }

85+ , "50%": { fill: "rgba(250, 250, 250, 0.7)" }

97− , "70%": { fill: "rgba(250, 250, 250, 0.4)" }

86+ , "70%": { fill: "rgba(250, 250, 250, 0.4)" }

98− , "100%": { fill: "rgba(250, 250, 250, 1.0)" }

87+ , "100%": { fill: "rgba(250, 250, 250, 1.0)" }

99− }

88+ }

100 , "@keyframes twinkleFast":

89 , "@keyframes twinkleFast":

101− jss

102− { "0%": { fill: "rgba(250, 250, 250, 0.7)" }

90+ { "0%": { fill: "rgba(250, 250, 250, 0.7)" }

103− , "100%": { fill: "rgba(250, 250, 250, 0.78)" }

91+ , "100%": { fill: "rgba(250, 250, 250, 0.78)" }

104− }

92+ }

105 , twinklingStar1:

93 , twinklingStar1:

106− jss

107− { animation: "$twinkleFast 0.2s ease-in-out infinite"

94+ { animation: "$twinkleFast 0.2s ease-in-out infinite"

108− , animationDirection: "alternate"

95+ , animationDirection: "alternate"

109− }

96+ }

110 , twinklingStar2:

97 , twinklingStar2:

111− jss

112− { animation: "$twinkle 8s ease-in-out infinite"

98+ { animation: "$twinkle 8s ease-in-out infinite"

113− , animationDelay: "4s"

99+ , animationDelay: "4s"

114− , animationDirection: "alternate"

100+ , animationDirection: "alternate"

115− }

101+ }

116 , twinklingStar3:

102 , twinklingStar3:

117− jss

118− { animation: "$twinkle 4s ease-in-out infinite"

103+ { animation: "$twinkle 4s ease-in-out infinite"

119− , animationDelay: "3s"

104+ , animationDelay: "3s"

120− , animationDirection: "alternate"

105+ , animationDirection: "alternate"

121− }

106+ }

122 , "@keyframes rotateStars":

107 , "@keyframes rotateStars":

123− jss

124− { "0%": { transform: "rotate(0deg) scale(1,1)" }

108+ { "0%": { transform: "rotate(0deg) scale(1,1)" }

125− , "100%": { transform: "rotate(1deg) scale(1.01, 1.01)" }

109+ , "100%": { transform: "rotate(1deg) scale(1.01, 1.01)" }

126− }

110+ }

127 , stars:

111 , stars:

128− jss

129− { animation: "$rotateStars 30s linear infinite"

112+ { animation: "$rotateStars 30s linear infinite"

130− , transformOrigin: "top center"

113+ , transformOrigin: "top center"

131− , animationDirection: "alternate"

114+ , animationDirection: "alternate"

132− }

115+ }

133 }

116 }

134 React.component "LandingPageBackground" \{ className } -> React.do

117 React.component "LandingPageBackground" \{ className } -> React.do

135 theme <- useTheme

118 theme <- useTheme

@@ -209,7 +192,7 @@ mkLandingPageBackground = do

209 , buildings theme.isLight scrolled

192 , buildings theme.isLight scrolled

210 -- bar

193 -- bar

211 , SVG.path

194 , SVG.path

212− { fill: theme.backgroundColour

195+ { fill: theme.backgroundColour # toHexString

213 , d: "M-3.028 431.298h826.844v20.006H-3.028z"

196 , d: "M-3.028 431.298h826.844v20.006H-3.028z"

214 }

197 }

215 -- laptop

198 -- laptop

components/src/Yoga/Theme.purs+27−34

@@ -1,9 +1,9 @@

1module Yoga.Theme where

3import Prelude

4−import CSS (contrast, darken, isLight, lighten, rotateHue, toHexString)

4+import CSS (contrast, darken, isLight, lighten, rotateHue)

5−import CSS as Color

6import Color (Color)

5import Color (Color)

6+import Color as Color

7import Data.Foldable (intercalate)

8import Data.Maybe (fromMaybe)

9import Data.Symbol (SProxy(..))

@@ -20,6 +20,14 @@ increaseContrast contrastWith = go 0

20 else

21 go (i + 1) (modify 0.1 col)

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+

23unsafeAlaColor ∷ (Color -> Color) -> String -> String

31unsafeAlaColor ∷ (Color -> Color) -> String -> String

24unsafeAlaColor fn s1 =

32unsafeAlaColor fn s1 =

25 fromMaybe "hotpink" do

33 fromMaybe "hotpink" do

@@ -32,59 +40,44 @@ f = SProxy

32fromTheme ∷ Theme -> CSSTheme

40fromTheme ∷ Theme -> CSSTheme

33fromTheme theme =

41fromTheme theme =

34 RB.build

42 RB.build

35− ( {- background -} RB.modify (f ∷ _ "backgroundColour") toHexString

36− >>> RB.insert (f ∷ _ "backgroundColourLighter")

43+ ( {- background -} RB.insert (f ∷ _ "backgroundColourLighter")

37− (theme.backgroundColour # lighter >>> toHexString)

44+ (theme.backgroundColour # lighter)

38 >>> RB.insert (f ∷ _ "backgroundColourLightest")

45 >>> RB.insert (f ∷ _ "backgroundColourLightest")

39− (theme.backgroundColour # lighter # lighter >>> toHexString)

46+ (theme.backgroundColour # lighter # lighter)

40 >>> RB.insert (f ∷ _ "backgroundColourDarker")

47 >>> RB.insert (f ∷ _ "backgroundColourDarker")

41− (theme.backgroundColour # darker >>> toHexString)

48+ (theme.backgroundColour # darker)

42 >>> RB.insert (f ∷ _ "backgroundColourDarkest")

49 >>> RB.insert (f ∷ _ "backgroundColourDarkest")

43− (theme.backgroundColour # darker # darker >>> toHexString)

50+ (theme.backgroundColour # darker # darker)

44− >>> RB.modify (f ∷ _ "interfaceColour") toHexString

45 >>> RB.insert (f ∷ _ "interfaceColourLighter")

51 >>> RB.insert (f ∷ _ "interfaceColourLighter")

46− (theme.interfaceColour # lighter >>> toHexString)

52+ (theme.interfaceColour # lighter)

47 >>> RB.insert (f ∷ _ "interfaceColourLightest")

53 >>> RB.insert (f ∷ _ "interfaceColourLightest")

48− (theme.interfaceColour # lighter >>> lighter >>> toHexString)

54+ (theme.interfaceColour # lighter >>> lighter)

49 >>> RB.insert (f ∷ _ "interfaceColourDarker")

55 >>> RB.insert (f ∷ _ "interfaceColourDarker")

50− (theme.interfaceColour # darker >>> toHexString)

56+ (theme.interfaceColour # darker)

51 >>> RB.insert (f ∷ _ "interfaceColourDarkest")

57 >>> RB.insert (f ∷ _ "interfaceColourDarkest")

52− (theme.interfaceColour # darker >>> darker >>> toHexString)

58+ (theme.interfaceColour # darker >>> darker)

53 -- foreground

59 -- foreground

55− >>> RB.modify (f ∷ _ "textColour") toHexString

56 >>> RB.insert (f ∷ _ "textColourLighter")

61 >>> RB.insert (f ∷ _ "textColourLighter")

57− (theme.textColour # lighter >>> toHexString)

62+ (theme.textColour # lighter)

58 >>> RB.insert (f ∷ _ "textColourLightest")

63 >>> RB.insert (f ∷ _ "textColourLightest")

59− (theme.textColour # lighter >>> lighter >>> toHexString)

64+ (theme.textColour # lighter >>> lighter)

60 >>> RB.insert (f ∷ _ "textColourDarker")

65 >>> RB.insert (f ∷ _ "textColourDarker")

61− (theme.textColour # darker >>> toHexString)

66+ (theme.textColour # darker)

62 >>> RB.insert (f ∷ _ "textColourDarkest")

67 >>> RB.insert (f ∷ _ "textColourDarkest")

63− (theme.textColour # darker >>> darker >>> toHexString)

68+ (theme.textColour # darker >>> darker)

64 -- highlight

69 -- highlight

66− >>> RB.modify (f ∷ _ "highlightColour") toHexString

67 >>> RB.insert (f ∷ _ "highlightColourDark")

71 >>> RB.insert (f ∷ _ "highlightColourDark")

68− (theme.highlightColour # darken 0.2 # rotateHue (-10.0) # toHexString)

72+ (theme.highlightColour # darken 0.2 # rotateHue (-10.0))

69 >>> RB.insert (f ∷ _ "highlightColourRotatedForwards")

73 >>> RB.insert (f ∷ _ "highlightColourRotatedForwards")

70− (theme.highlightColour # rotateHue (20.0) # toHexString)

74+ (theme.highlightColour # rotateHue (20.0))

71 >>> RB.insert (f ∷ _ "highlightColourRotatedBackwards")

75 >>> RB.insert (f ∷ _ "highlightColourRotatedBackwards")

72− (theme.highlightColour # rotateHue (-20.0) # toHexString)

76+ (theme.highlightColour # rotateHue (-20.0))

73 -- altHighlight

77 -- altHighlight

75− >>> RB.modify (f ∷ _ "altHighlightColour") toHexString

76 >>> RB.insert (f ∷ _ "altHighlightColourDark")

79 >>> RB.insert (f ∷ _ "altHighlightColourDark")

77− (theme.altHighlightColour # darken 0.2 # toHexString)

80+ (theme.altHighlightColour # darken 0.2)

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

88 -- fonts

81 -- fonts

90 >>> RB.modify (f ∷ _ "textFontFamily") (intercalate ",")

83 >>> RB.modify (f ∷ _ "textFontFamily") (intercalate ",")

components/src/Yoga/Theme/CSSBaseline.purs+4−3

@@ -1,6 +1,7 @@

1module Yoga.Theme.CSSBaseline where

3import Prelude hiding (add)

4+import Color (toHexString)

4import Effect (Effect)

5import Effect (Effect)

5import JSS (JSSClasses, JSSElem, jss, jssClasses)

6import JSS (JSSClasses, JSSElem, jss, jssClasses)

6import React.Basic (ReactComponent)

7import React.Basic (ReactComponent)

@@ -70,11 +71,11 @@ styles =

70 }

71 }

71 , body:

72 , body:

72 { margin: 0

73 { margin: 0

73− , backgroundColor: theme.backgroundColour

74+ , backgroundColor: theme.backgroundColour # toHexString

74− , color: theme.textColour

75+ , color: theme.textColour # toHexString

75 , fontFamily: theme.textFontFamily

76 , fontFamily: theme.textFontFamily

76 , "&::backdrop":

77 , "&::backdrop":

77− { backgroundColor: theme.backgroundColour

78+ { backgroundColor: theme.backgroundColour # toHexString

78 }

79 }

80 }

80 , "h1, h2, h3, h4":

81 , "h1, h2, h3, h4":

components/src/Yoga/Theme/Default.purs+5−2

@@ -30,6 +30,7 @@ darkTheme =

30 , turquoise: Color.rgb 127 219 202

31 , red: Color.rgb 255 88 116

32 , blue: Color.rgb 130 170 255

33+ , grey: Color.rgb 150 150 150

33 , white: Color.rgb 250 250 250

34 , white: Color.rgb 250 250 250

34 , measure: "60ch"

35 , measure: "60ch"

35 , borderThin: "0.125rem"

36 , borderThin: "0.125rem"

@@ -39,9 +40,11 @@ lightTheme ∷ Theme

39lightTheme =

40lightTheme =

40 darkTheme

41 darkTheme

41 { textColour = Color.hsl 225.0 0.18 0.25

42 { 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"

43 , interfaceColour = Color.hsl 210.0 0.10 0.89

45 , 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

45 , altHighlightColour = Color.hsl 84.0 0.617 0.631

48 , altHighlightColour = Color.hsl 84.0 0.617 0.631

46 , green = Color.hsl 84.0 0.617 0.431

49 , green = Color.hsl 84.0 0.617 0.431

47 , pink = Color.hsl 276.0 0.677 0.545

50 , pink = Color.hsl 276.0 0.677 0.545

components/src/Yoga/Theme/ThemeStories.purs+16−15

@@ -1,6 +1,7 @@

1module Yoga.Theme.Stories where

3import Prelude hiding (add)

4+import Color (toHexString)

4import Effect (Effect)

5import Effect (Effect)

5import React.Basic.DOM (css)

6import React.Basic.DOM (css)

6import React.Basic.DOM as R

7import React.Basic.DOM as R

@@ -50,21 +51,21 @@ stories = do

50 , paddingBottom: "20px"

51 , paddingBottom: "20px"

51 }

52 }

52 , children:

53 , children:

53− [ sw "IF Darkest" cssTheme.interfaceColourDarkest

54+ [ sw "IF Darkest" (toHexString cssTheme.interfaceColourDarkest)

54− , sw "IF Darker" cssTheme.interfaceColourDarker

55+ , sw "IF Darker" (toHexString cssTheme.interfaceColourDarker)

55− , sw "Interface" cssTheme.interfaceColour

56+ , sw "Interface" (toHexString cssTheme.interfaceColour)

56− , sw "IF Lighter" cssTheme.interfaceColourLighter

57+ , sw "IF Lighter" (toHexString cssTheme.interfaceColourLighter)

57− , sw "IF Lightest" cssTheme.interfaceColourLightest

58+ , sw "IF Lightest" (toHexString cssTheme.interfaceColourLightest)

58− , sw "Highlight" cssTheme.highlightColour

59+ , sw "Highlight" (toHexString cssTheme.highlightColour)

59− , sw "Highlight++" cssTheme.highlightColourRotatedForwards

60+ , sw "Highlight++" (toHexString cssTheme.highlightColourRotatedForwards)

60− , sw "HighlightGradient" $ "linear-gradient(45deg," <> cssTheme.highlightColourRotatedForwards <> "," <> cssTheme.highlightColourRotatedBackwards <> ")"

61+ , sw "HighlightGradient" $ "linear-gradient(45deg," <> toHexString cssTheme.highlightColourRotatedForwards <> "," <> toHexString cssTheme.highlightColourRotatedBackwards <> ")"

61− , sw "TXT Darkest" cssTheme.textColourDarkest

62+ , sw "TXT Darkest" (toHexString cssTheme.textColourDarkest)

62− , sw "TXT Darker" cssTheme.textColourDarker

63+ , sw "TXT Darker" (toHexString cssTheme.textColourDarker)

63− , sw "TXT" cssTheme.textColour

64+ , sw "TXT" (toHexString cssTheme.textColour)

64− , sw "TXT Lighter" cssTheme.textColourLighter

65+ , sw "TXT Lighter" (toHexString cssTheme.textColourLighter)

65− , sw "TXT Lightest" cssTheme.textColourLightest

66+ , sw "TXT Lightest" (toHexString cssTheme.textColourLightest)

66− , sw "HighlightDK" cssTheme.highlightColourDark

67+ , sw "HighlightDK" (toHexString cssTheme.highlightColourDark)

67− , sw "Highlight--" cssTheme.highlightColourRotatedBackwards

68+ , sw "Highlight--" (toHexString cssTheme.highlightColourRotatedBackwards)

68 ]

69 ]

69 }

70 }

70 ]

71 ]

components/src/Yoga/Theme/Types.purs+31−29

@@ -20,44 +20,46 @@ type Theme

20 , red ∷ Color

21 , blue ∷ Color

22 , white ∷ Color

23+ , grey ∷ Color

23 , measure ∷ String

24 , measure ∷ String

24 , borderThin ∷ String

25 , borderThin ∷ String

25 }

26 }

27type YogaTheme

28type YogaTheme

28− = ( backgroundColour ∷ String

29+ = ( backgroundColour ∷ Color

29− , backgroundColourLighter ∷ String

30+ , backgroundColourLighter ∷ Color

30− , backgroundColourLightest ∷ String

31+ , backgroundColourLightest ∷ Color

31− , backgroundColourDarker ∷ String

32+ , backgroundColourDarker ∷ Color

32− , backgroundColourDarkest ∷ String

33+ , backgroundColourDarkest ∷ Color

33− , interfaceColour ∷ String

34+ , interfaceColour ∷ Color

34− , interfaceColourDarker ∷ String

35+ , interfaceColourDarker ∷ Color

35− , interfaceColourDarkest ∷ String

36+ , interfaceColourDarkest ∷ Color

36− , interfaceColourLighter ∷ String

37+ , interfaceColourLighter ∷ Color

37− , interfaceColourLightest ∷ String

38+ , interfaceColourLightest ∷ Color

38− , textColourLightest ∷ String

39+ , textColourLightest ∷ Color

39− , textColourLighter ∷ String

40+ , textColourLighter ∷ Color

40− , textColour ∷ String

41+ , textColour ∷ Color

41− , textColourDarker ∷ String

42+ , textColourDarker ∷ Color

42− , textColourDarkest ∷ String

43+ , textColourDarkest ∷ Color

43− , highlightColourRotatedForwards ∷ String

44+ , highlightColourRotatedForwards ∷ Color

44− , highlightColourRotatedBackwards ∷ String

45+ , highlightColourRotatedBackwards ∷ Color

45− , highlightColour ∷ String

46+ , highlightColour ∷ Color

46− , highlightColourDark ∷ String

47+ , highlightColourDark ∷ Color

47− , altHighlightColour ∷ String

48+ , altHighlightColour ∷ Color

48− , altHighlightColourDark ∷ String

49+ , altHighlightColourDark ∷ Color

49 , isLight ∷ Boolean

50 , isLight ∷ Boolean

50 , textFontFamily ∷ String

51 , textFontFamily ∷ String

51 , headingFontFamily ∷ String

52 , headingFontFamily ∷ String

52 , codeFontFamily ∷ String

53 , codeFontFamily ∷ String

53− , yellow ∷ String

54+ , yellow ∷ Color

54− , green ∷ String

55+ , green ∷ Color

55− , pink ∷ String

56+ , pink ∷ Color

56− , orange ∷ String

57+ , orange ∷ Color

57− , turquoise ∷ String

58+ , turquoise ∷ Color

58− , red ∷ String

59+ , red ∷ Color

59− , blue ∷ String

60+ , blue ∷ Color

61+ , grey ∷ Color

60− , white ∷ String

62+ , white ∷ Color

61 , fontWeightBold ∷ String

63 , fontWeightBold ∷ String

62 , measure ∷ String

64 , measure ∷ String

63 , borderThin ∷ String

65 , borderThin ∷ String

components/src/Yoga/Typography/Header.purs+4−9

@@ -1,11 +1,12 @@

1module Yoga.Typography.Header where

3import Prelude

4+import Color (toHexString)

4import Data.Array as Array

5import Data.Array as Array

5import Data.Foldable (intercalate)

6import Data.Foldable (intercalate)

6import Data.Maybe (Maybe)

7import Data.Maybe (Maybe)

7import Effect (Effect)

8import Effect (Effect)

8−import JSS (jss, jssClasses)

9+import JSS (jssClasses)

9import React.Basic.DOM as R

10import React.Basic.DOM as R

10import React.Basic.Hooks (ReactComponent, component)

11import React.Basic.Hooks (ReactComponent, component)

11import React.Basic.Hooks as React

12import React.Basic.Hooks as React

@@ -26,12 +27,10 @@ mkH = do

26 makeStylesJSS

27 makeStylesJSS

27 $ jssClasses \(theme ∷ CSSTheme) ->

28 $ jssClasses \(theme ∷ CSSTheme) ->

28 { common:

29 { common:

29− jss

30− { color: theme.textColour

30+ { color: theme.textColour # toHexString

31 , fontFamily: theme.headingFontFamily

32 }

33 , h1:

34− jss

35 { textTransform: "uppercase"

34 { textTransform: "uppercase"

36 , fontSize: "3.6em"

35 , fontSize: "3.6em"

37 , letterSpacing: "0.07em"

36 , letterSpacing: "0.07em"

@@ -39,7 +38,6 @@ mkH = do

39 , padding: 0

38 , padding: 0

40 }

39 }

41 , h2:

40 , h2:

42− jss

43 { textTransform: "uppercase"

41 { textTransform: "uppercase"

44 , fontSize: "3em"

42 , fontSize: "3em"

45 , letterSpacing: "0.05em"

43 , letterSpacing: "0.05em"

@@ -47,23 +45,20 @@ mkH = do

47 , padding: 0

45 , padding: 0

48 }

46 }

49 , h3:

47 , h3:

50− jss

51 { fontSize: "2.2em"

48 { fontSize: "2.2em"

52 , margin: 0

49 , margin: 0

53 , padding: 0

50 , padding: 0

54 }

51 }

55 , h4:

52 , h4:

56− jss

57 { fontSize: "1.5em"

53 { fontSize: "1.5em"

58 , margin: 0

54 , margin: 0

59 , padding: 0

55 , padding: 0

60 }

56 }

61 , h5:

57 , h5:

62− jss

63 { fontSize: "1.0em"

58 { fontSize: "1.0em"

64 , margin: 0

59 , margin: 0

65 , padding: 0

60 , padding: 0

66− , color: theme.textColourLighter

61+ , color: theme.textColourLighter # toHexString

67 }

62 }

68 }

63 }

69 component "Heading" \{ level, text, className } -> React.do

64 component "Heading" \{ level, text, className } -> React.do

components/src/Yoga/Typography/Paragraph.purs+8−8

@@ -1,8 +1,9 @@

1module Yoga.Typography.Paragraph where

3import Prelude

4+import Color (toHexString)

4import Effect (Effect)

5import Effect (Effect)

5−import JSS (jss, jssClasses)

6+import JSS (jssClasses)

6import React.Basic.DOM as R

7import React.Basic.DOM as R

7import React.Basic.Hooks (ReactComponent, component)

8import React.Basic.Hooks (ReactComponent, component)

8import React.Basic.Hooks as React

9import React.Basic.Hooks as React

@@ -15,13 +16,12 @@ mkP = do

15 makeStylesJSS

16 makeStylesJSS

16 $ jssClasses \(theme ∷ CSSTheme) ->

17 $ jssClasses \(theme ∷ CSSTheme) ->

17 { p:

18 { p:

18− jss

19− { color: theme.textColour

19+ { color: theme.textColour # toHexString

20− , fontFamily: theme.textFontFamily

20+ , fontFamily: theme.textFontFamily

21− , fontSize: "1em"

21+ , fontSize: "1em"

22− , margin: "0.67em 0 0.33em 0"

22+ , margin: "0.67em 0 0.33em 0"

23− , padding: "0.67em 0 0.33em 0"

23+ , padding: "0.67em 0 0.33em 0"

24− }

24+ }

25 }

26 component "paragraph" \{ text } -> React.do

27 classes <- useStyles {}

server/src/Main.purs+21−11

@@ -2,17 +2,16 @@ module Main where

3import Prelude

5−import Control.Parallel (parTraverse)

5+import Control.Parallel (parOneOf, parTraverse)

6import Data.Array ((..))

7import Data.Bifunctor (lmap)

8import Data.Either (Either(..))

9import Data.Int (fromString)

10−import Data.Maybe (Maybe, fromMaybe)

10+import Data.Maybe (Maybe(..), fromMaybe)

11import Data.Newtype (un)

12−import Data.Time.Duration (Seconds(..), fromDuration)

12+import Data.Time.Duration (class Duration, Seconds(..), fromDuration)

13−import Data.Traversable (for)

14import Effect (Effect)

13import Effect (Effect)

15−import Effect.Aff (Aff, attempt, launchAff_, message)

14+import Effect.Aff (Aff, attempt, delay, launchAff_, message)

16import Effect.Aff.Class (liftAff)

15import Effect.Aff.Class (liftAff)

17import Effect.Class (class MonadEffect, liftEffect)

16import Effect.Class (class MonadEffect, liftEffect)

18import Effect.Class.Console (info, log)

17import Effect.Class.Console (info, log)

@@ -59,14 +58,17 @@ type ErrorWithCode

59asErrorWithCode ∷ ∀ a. a -> Maybe ErrorWithCode

58asErrorWithCode ∷ ∀ a. a -> Maybe ErrorWithCode

60asErrorWithCode = read_ <<< unsafeToForeign

59asErrorWithCode = read_ <<< unsafeToForeign

62−runCode ∷ Folder -> Aff ExecResult

61+runCode ∷ ∀ d. Duration d => d -> Folder -> Aff (Maybe ExecResult)

62+runCode timeout folder = parOneOf

63−runCode folder = execCommand folder "node run.js"

63+ [ Just <$> execCommand folder "exec node run.js"

64+ , Nothing <$ delay (timeout # fromDuration)

65+ ]

65compileAndRunJob ∷ CompileRequest -> (Handler -> Aff Unit) -> NewJob PscIdeConnection

67compileAndRunJob ∷ CompileRequest -> (Handler -> Aff Unit) -> NewJob PscIdeConnection

66compileAndRunJob json handle =

68compileAndRunJob json handle =

67 NewJob \jobId conn -> do

69 NewJob \jobId conn -> do

68 stringOrErr <- attempt $ compileCode json.code conn

70 stringOrErr <- attempt $ compileCode json.code conn

69− case ((readJSON <$> stringOrErr) :: _ _ (_ _ CompileResult)) of

71+ case ((readJSON <$> stringOrErr) ∷ _ _ (_ _ CompileResult)) of

70 Left e -> do

72 Left e -> do

71 handle $ setStatus 500

73 handle $ setStatus 500

72 log $ "Aff failed with " <> message e

74 log $ "Aff failed with " <> message e

@@ -75,13 +77,20 @@ compileAndRunJob json handle =

75 handle $ setStatus 422

77 handle $ setStatus 422

76 handle $ Response.send $ write res

78 handle $ Response.send $ write res

77 Right (Right res) -> do

79 Right (Right res) -> do

78− runResult <- runCode (getFolder conn)

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

79− resultBody <- toBody runResult

86+ resultBody <- toBody rr

80− handle $ Response.send $ write (resultBody ∷ Body.RunResult)

87+ handle $ Response.send $ write (resultBody ∷ Body.RunResult)

81 Right (Left errs) -> do

88 Right (Left errs) -> do

82 handle $ setStatus 500

89 handle $ setStatus 500

83 log $ "Could not decode: " <> show (lmap (const "no way") stringOrErr) <> "\nErrors: " <> show errs

90 log $ "Could not decode: " <> show (lmap (const "no way") stringOrErr) <> "\nErrors: " <> show errs

84 handle $ Response.send $ write {}

91 handle $ Response.send $ write {}

92+ where

93+ timeout = 1.0 # Seconds

86compileAndRunHandler ∷ Queue PscIdeConnection -> Handler

95compileAndRunHandler ∷ Queue PscIdeConnection -> Handler

87compileAndRunHandler queue = do

96compileAndRunHandler queue = do

@@ -166,3 +175,4 @@ serverSetup app = do

166 key <- readTextFile UTF8 "server.key"

175 key <- readTextFile UTF8 "server.key"

167 cert <- readTextFile UTF8 "server.cert"

176 cert <- readTextFile UTF8 "server.cert"

168 pure { key, cert }

177 pure { key, cert }

178+

server/src/PscIdeClient.purs+2−2

@@ -104,8 +104,8 @@ newtype PscIdeConnection

104 , folder ∷ Folder

105 }

106

107−derive instance ntPscIdeConnection :: Newtype PscIdeConnection _

107+derive instance ntPscIdeConnection ∷ Newtype PscIdeConnection _

108−instance eqPscIdeConnection :: Eq PscIdeConnection where

108+instance eqPscIdeConnection ∷ Eq PscIdeConnection where

109 eq c1 c2 = (unwrap c1).port == (unwrap c2).port

110

111saveMainFile ∷ Folder -> String -> Aff Unit