website/views/styleguide.js at master · choojs/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
var objectKeys = require('object-keys')
var html = require('choo/html')
var raw = require('choo/html/raw')
var format = require('../components/format')
var options = require('../design/options')

module.exports = main

function main (state, emit) {
  return html`
    <div class="p1">
      <div class="p1 tac fs3">
        choo styleguide
      </div>
      ${block({
        title: 'colors',
        content: colors()
      })}
      ${block({
        title: 'headings',
        content: html`
          <div class="p0-5">
            <div class="p0-5 fs3">h1: internal event emitter</div>
            <div class="p0-5 fs2">h2: navigating programmatically</div>
            <div class="p0-5 fs1-5">h3: following links</div>
            <div class="p0-5 fs1 fc-pinker ttu">h4: mutable state</div>
            <div class="p0-5 fs1">p: a tiny little framework</div>
          </div>
        `
      })}
      ${block({
        title: 'body copy',
        content: html`
          <div class="markdown-body mxa copy fs1 p1">
            <h2>Perspiciatis amet</h2>
            <p>Nobis hic eos dolor accusantium cum ullam assumenda eos. Vel voluptatem itaque ipsam nisi accusamus debitis quae eveniet. Eaque iusto quod hic dolorem veritatis sapiente eligendi. Perspiciatis amet suscipit sed non.</p>
          </div>
        `
      })}
      ${block({
        title: 'code blocks',
        content: codeblock()
      })}
      ${block({
        title: 'animation frame',
        content: frame(),
        active: false
      })}
      ${block({
        title: 'markdown formatting',
        content: html`<div class="p1 markdown-body">See <a href="/markdown">/markdown</a></div>`
      })}
    </div>
  `
}

function block (props) {
  if (props.active === false) return
  return html`
    <div>
      <div class="px1 c12">
        <div class="bt2-pinker c12"></div>
      </div>
      <div class="c12 p1 pb0 ttu fs1 lh1 ff-mono fc-pinker">
        ${props.title}
      </div>
      <div class="c12 ${classContent()}">
        ${props.content}
      </div>
    </div>
  `

  function classContent () {
    return typeof props.content === 'string' ? 'p1' : ''
  }
}

function colors () {
  return html`
    <div class="x xw p0-5">
      ${objectKeys(options.colors).map(function (color) {
        var value = options.colors[color]
        return html`
          <div class="c6 x xac md-c3">
            <div class="p0-5 c6 md-c4">
              <div class="psr c12 b1-black">
                <div style="padding-bottom: 100%"></div>
                <div
                  class="psa t0 l0 r0 b0"
                  style="background: ${value}"
                ></div>
              </div>
            </div>
            <div class="p0-5">
              ${color}<br>
              <span class="fc-pinker">${value}</span>
            </div>
          </div>
        `
      })}
    </div>
  `
}

function codeblock () {
  return html`
    <div class="p1 markdown-body">
      ${format(`
\`\`\`
var el = html\`
  <section>
    <div id="first">hello</div>
    <div id="second">world</div> // nice one
  </section>
\`
\`\`\`
      `)}
    </div>
  `
}
function frame () {
  return html`
<div class="frame" style="font-size: Calc(3.75vw)">${raw(`------------------------------------
------------------------------------
----------------choo----------------
------------------------------------
------------------------------------
`)}</div>
`
}