git ssb

2+

mixmix / ticktack



Commit 2d04dec61acfbf82575af91b95b3e52781e1def3

Browse Files

get mcss online (with insert-css), add private page and thread partial

mix irving committed on 8/7/2017, 11:53:34 PM
Parent: 58e30dfb4da48b50f038bbe045e8550cce9429bd

Files changed

app/html/app.jschanged
app/html/thread.jsadded
app/html/thread.mcssadded
app/index.jschanged
app/page/home.jschanged
app/page/private.jsadded
index.jschanged
main.jschanged
package-lock.jsonchanged
package.jsonchanged
styles/css.jsadded
styles/index.jsadded
styles/mcss.jsadded
styles/mixins.jsadded
app/html/app.jsView
@@ -1,15 +1,21 @@
11 const nest = require('depnest')
2+const values = require('lodash/values')
3+const insertCss = require('insert-css')
24
35 exports.gives = nest('app.html.app')
46
57 exports.needs = nest({
6- 'app.sync.goTo': 'first'
8+ 'app.sync.goTo': 'first',
9+ 'styles.css': 'first'
710 })
811
912 exports.create = (api) => {
1013 return nest('app.html.app', app)
1114
1215 function app () {
16+ const css = values(api.styles.css()).join('\n')
17+ insertCss(css)
18+
1319 return api.app.sync.goTo({ page: 'home' })
1420 }
1521 }
app/html/thread.jsView
@@ -1,0 +1,23 @@
1+const nest = require('depnest')
2+const { h } = require('mutant')
3+const pull = require('pull-stream')
4+
5+exports.gives = nest('app.html.thread')
6+
7+exports.needs = nest({
8+ 'app.sync.goTo': 'first'
9+})
10+
11+exports.create = (api) => {
12+ return nest('app.html.thread', thread)
13+
14+ function thread (source) {
15+ // location here can expected to be: { page: 'home' }
16+ const { goTo } = api.app.sync
17+
18+ return h('Thread', [
19+ 'thread content'
20+ ])
21+ }
22+}
23+
app/html/thread.mcssView
@@ -1,0 +1,4 @@
1+Thread {
2+ background-color: lightblue
3+}
4+
app/index.jsView
@@ -1,11 +1,13 @@
11 module.exports = {
22 html: {
3- app: require('./html/app')
3+ app: require('./html/app'),
4+ thread: require('./html/thread')
45 },
56 page: {
67 group: require('./page/group'),
7- home: require('./page/home')
8+ home: require('./page/home'),
9+ private: require('./page/private')
810 },
911 sync: {
1012 goTo: require('./sync/goTo')
1113 }
app/page/home.jsView
@@ -1,7 +1,9 @@
11 const nest = require('depnest')
22 const { h } = require('mutant')
33
4+const dummyMsg = require('../../test/fixtures/thread')[0]
5+
46 exports.gives = nest('app.page.home')
57
68 exports.needs = nest({
79 'app.sync.goTo': 'first'
@@ -16,8 +18,9 @@
1618
1719 return h('div', [
1820 h('h1', 'Home'),
1921 h('div', { 'ev-click': () => goTo({ page: 'home' }) }, 'Home'),
20- h('div', { 'ev-click': () => goTo({ type: 'group', key: '%sadlkjas;lkdjas' }) }, 'Group')
22+ h('div', { 'ev-click': () => goTo({ type: 'group', key: '%sadlkjas;lkdjas' }) }, 'Group'),
23+ h('div', { 'ev-click': () => goTo(dummyMsg) }, 'Private message')
2124 ])
2225 }
2326 }
app/page/private.jsView
@@ -1,0 +1,26 @@
1+const nest = require('depnest')
2+const { h } = require('mutant')
3+
4+exports.gives = nest('app.page.private')
5+
6+exports.needs = nest({
7+ 'app.sync.goTo': 'first',
8+ 'app.html.thread': 'first'
9+})
10+
11+exports.create = (api) => {
12+ return nest('app.page.private', private)
13+
14+ function private (location) {
15+ // location here can expected to be an ssb-message
16+ const { goTo } = api.app.sync
17+
18+ const thread = api.app.html.thread()
19+
20+ return h('div', [
21+ h('h1', 'Private message'),
22+ h('div', { 'ev-click': () => goTo({ page: 'home' }) }, 'Home'),
23+ thread
24+ ])
25+ }
26+}
index.jsView
@@ -1,6 +1,7 @@
11 const ticktack = {
22 app: require('./app'),
3- router: require('./router')
3+ router: require('./router'),
4+ styles: require('./styles')
45 }
56
67 module.exports = ticktack
main.jsView
@@ -12,8 +12,9 @@
1212 const sockets = combine(
1313 ticktack,
1414 patchcore
1515 )
16+debugger
1617
1718 const api = entry(sockets, nest('app.html.app', 'first'))
1819
1920 const app = api.app.html.app()
package-lock.jsonView
@@ -385,8 +385,13 @@
385385 "requires": {
386386 "json-buffer": "2.0.11"
387387 }
388388 },
389+ "clone": {
390+ "version": "1.0.2",
391+ "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz",
392+ "integrity": "sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk="
393+ },
389394 "color-hash": {
390395 "version": "1.0.3",
391396 "resolved": "https://registry.npmjs.org/color-hash/-/color-hash-1.0.3.tgz",
392397 "integrity": "sha1-wOeVLwbQIuVI5l2iOVEr1n04Ce4="
@@ -497,8 +502,16 @@
497502 "version": "0.4.2",
498503 "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
499504 "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8="
500505 },
506+ "defaults": {
507+ "version": "1.0.3",
508+ "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
509+ "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
510+ "requires": {
511+ "clone": "1.0.2"
512+ }
513+ },
501514 "depject": {
502515 "version": "4.1.0",
503516 "resolved": "https://registry.npmjs.org/depject/-/depject-4.1.0.tgz",
504517 "integrity": "sha1-nJbqrazRaLrbQIeUv1+GeJg84YM=",
@@ -553,8 +566,17 @@
553566 "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
554567 }
555568 }
556569 },
570+ "each-async": {
571+ "version": "1.1.1",
572+ "resolved": "https://registry.npmjs.org/each-async/-/each-async-1.1.1.tgz",
573+ "integrity": "sha1-3uUim98KtrogEqOV4bhpq/iBNHM=",
574+ "requires": {
575+ "onetime": "1.1.0",
576+ "set-immediate-shim": "1.0.1"
577+ }
578+ },
557579 "ed2curve": {
558580 "version": "0.1.4",
559581 "resolved": "https://registry.npmjs.org/ed2curve/-/ed2curve-0.1.4.tgz",
560582 "integrity": "sha1-lKRCSLuH2jXbDv968KpXYWgRf1k=",
@@ -738,8 +760,13 @@
738760 "version": "1.3.4",
739761 "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
740762 "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4="
741763 },
764+ "insert-css": {
765+ "version": "2.0.0",
766+ "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz",
767+ "integrity": "sha1-610Ql7dUL0x56jBg067gfQU4gPQ="
768+ },
742769 "invariant": {
743770 "version": "2.2.2",
744771 "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
745772 "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=",
@@ -830,8 +857,16 @@
830857 "requires": {
831858 "js-tokens": "3.0.2"
832859 }
833860 },
861+ "micro-css": {
862+ "version": "2.0.1",
863+ "resolved": "https://registry.npmjs.org/micro-css/-/micro-css-2.0.1.tgz",
864+ "integrity": "sha1-qE1+KmpKtzRpbYWDa52DrHnGj7g=",
865+ "requires": {
866+ "optimist": "0.6.1"
867+ }
868+ },
834869 "minimatch": {
835870 "version": "3.0.4",
836871 "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
837872 "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
@@ -961,8 +996,22 @@
961996 "requires": {
962997 "wrappy": "1.0.2"
963998 }
964999 },
1000+ "onetime": {
1001+ "version": "1.1.0",
1002+ "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
1003+ "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k="
1004+ },
1005+ "optimist": {
1006+ "version": "0.6.1",
1007+ "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
1008+ "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
1009+ "requires": {
1010+ "minimist": "0.0.8",
1011+ "wordwrap": "0.0.3"
1012+ }
1013+ },
9651014 "options": {
9661015 "version": "0.0.6",
9671016 "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",
9681017 "integrity": "sha1-7CLTEoBrtT5zF3Pnza788cZDEo8="
@@ -1183,8 +1232,31 @@
11831232 "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
11841233 }
11851234 }
11861235 },
1236+ "read-directory": {
1237+ "version": "2.1.0",
1238+ "resolved": "https://registry.npmjs.org/read-directory/-/read-directory-2.1.0.tgz",
1239+ "integrity": "sha512-RD9AvPCvlPKI3cKJUT0pAQ/jdJfWYlelF0nm/K8lmS6yMV/Nku8tz72ocD6ThSqkuvxCAPMkIsSLgjkRwNTYDQ==",
1240+ "requires": {
1241+ "defaults": "1.0.3",
1242+ "each-async": "1.1.1",
1243+ "glob": "7.1.2",
1244+ "static-module": "1.5.0",
1245+ "through2": "2.0.3"
1246+ },
1247+ "dependencies": {
1248+ "through2": {
1249+ "version": "2.0.3",
1250+ "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
1251+ "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=",
1252+ "requires": {
1253+ "readable-stream": "2.3.3",
1254+ "xtend": "4.0.1"
1255+ }
1256+ }
1257+ }
1258+ },
11871259 "readable-stream": {
11881260 "version": "2.3.3",
11891261 "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
11901262 "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
@@ -1237,8 +1309,13 @@
12371309 "version": "0.0.0",
12381310 "resolved": "https://registry.npmjs.org/separator-escape/-/separator-escape-0.0.0.tgz",
12391311 "integrity": "sha1-5DNnaTICBFTjwUhwxRfqHeVsL6Q="
12401312 },
1313+ "set-immediate-shim": {
1314+ "version": "1.0.1",
1315+ "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
1316+ "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E="
1317+ },
12411318 "setimmediate": {
12421319 "version": "1.0.5",
12431320 "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
12441321 "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
@@ -1638,8 +1715,13 @@
16381715 "version": "1.0.2",
16391716 "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
16401717 "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
16411718 },
1719+ "wordwrap": {
1720+ "version": "0.0.3",
1721+ "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
1722+ "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
1723+ },
16421724 "wrappy": {
16431725 "version": "1.0.2",
16441726 "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
16451727 "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
package.jsonView
@@ -17,9 +17,15 @@
1717 "license": "GPL-3.0",
1818 "dependencies": {
1919 "depject": "^4.1.0",
2020 "depnest": "^1.3.0",
21+ "insert-css": "^2.0.0",
22+ "libnested": "^1.2.1",
23+ "lodash": "^4.17.4",
24+ "micro-css": "^2.0.1",
2125 "mutant": "^3.21.2",
2226 "patchcore": "^1.9.0",
27+ "pull-stream": "^3.6.0",
28+ "read-directory": "^2.1.0",
2329 "setimmediate": "^1.0.5"
2430 }
2531 }
styles/css.jsView
@@ -1,0 +1,43 @@
1+const nest = require('depnest')
2+const { each, map } = require('libnested')
3+const compile = require('micro-css')
4+const { assign } = Object
5+
6+exports.gives = nest('styles.css')
7+
8+exports.needs = {
9+ styles: {
10+ mcss: 'reduce',
11+ mixins: 'reduce'
12+ }
13+}
14+
15+exports.create = function (api) {
16+ return nest('styles.css', css)
17+
18+ function css (sofar = {}) {
19+ const mcssObj = api.styles.mcss()
20+ const mixinObj = api.styles.mixins()
21+
22+ const mcssMixinsStr = mixinsToMcss(mixinObj)
23+ const cssObj = mcssToCss(mcssObj, mcssMixinsStr)
24+ return assign(sofar, cssObj)
25+ }
26+}
27+
28+function mixinsToMcss (mixinsObj) {
29+ var mcss = ''
30+ each(mixinsObj, (mixinStr, [name]) => {
31+ // QUESTION: are mixins mcss specific or should we convert to mcss here?
32+ // as in, mixins are dom style objects and we use something like `inline-style` package
33+ mcss += mixinStr + '\n'
34+ })
35+ return mcss
36+}
37+
38+function mcssToCss (mcssObj, mixinsStr) {
39+ return map(mcssObj, (mcssStr, [name]) => {
40+ return compile(mixinsStr + '\n' + mcssStr)
41+ })
42+}
43+
styles/index.jsView
@@ -1,0 +1,5 @@
1+module.exports = {
2+ css: require('./css'),
3+ mcss: require('./mcss'),
4+ mixins: require('./mixins')
5+}
styles/mcss.jsView
@@ -1,0 +1,26 @@
1+const nest = require('depnest')
2+const readDirectory = require('read-directory')
3+const path = require('path')
4+const { basename } = path
5+const { each } = require('libnested')
6+
7+const contents = readDirectory.sync(path.join(__dirname, '..'), {
8+ extensions: false,
9+ filter: '**/*.mcss',
10+ ignore: '**/node_modules/**'
11+})
12+
13+exports.gives = nest('styles.mcss')
14+
15+exports.create = function (api) {
16+ return nest('styles.mcss', mcss)
17+
18+ function mcss (sofar = {}) {
19+ each(contents, (content, [filename]) => {
20+ const name = basename(filename)
21+ sofar[name] = content
22+ })
23+ return sofar
24+ }
25+}
26+
styles/mixins.jsView
@@ -1,0 +1,32 @@
1+const nest = require('depnest')
2+const { assign } = Object
3+
4+exports.gives = nest('styles.mixins')
5+
6+exports.create = (api) => {
7+ return nest('styles.mixins', (sofar = {}) => {
8+ return assign(sofar, { mainMixins })
9+ })
10+}
11+
12+const mainMixins = `
13+$colorPrimary {
14+ color: green
15+}
16+
17+$colorSubtle {
18+ color: gray
19+}
20+
21+$avatarSmall {
22+ width: 32px
23+ height: 32px
24+}
25+
26+$avatarLarge {
27+ width: 56px
28+ height: 56px
29+}
30+`
31+
32+

Built with git-ssb-web