diff options
| -rw-r--r-- | guide-src/index.html | 2 | ||||
| -rw-r--r-- | guide-src/make.py | 59 | ||||
| -rw-r--r-- | guide-src/outline.txt | 7 | ||||
| -rw-r--r-- | guide-src/widget-inputs.html | 41 | ||||
| -rw-r--r-- | guide-src/widget-inputs/builtins.html | 20 | ||||
| -rw-r--r-- | guide-src/widget-inputs/syntax.html | 16 | ||||
| -rw-r--r-- | style.css | 28 |
7 files changed, 99 insertions, 74 deletions
diff --git a/guide-src/index.html b/guide-src/index.html index c4f0869..c755491 100644 --- a/guide-src/index.html +++ b/guide-src/index.html @@ -1,4 +1,4 @@ ---- guide +--- introduction <h3>your first pugl</h3> <p> diff --git a/guide-src/make.py b/guide-src/make.py index 058a63b..6f03513 100644 --- a/guide-src/make.py +++ b/guide-src/make.py @@ -32,34 +32,46 @@ class Section: def __repr__(self): return ''.join(['Section(path=', repr(self.path), ', name=', repr(self.name), ', items=', repr(self.items), ')']) - + outline = [l.strip() for l in readlines('{}/outline.txt'.format(INPUT_DIR)) if l.strip()] -sections = [] +entries = [] for item in outline: if item[0] == '/': assert item.endswith('.html'), 'expected path ending in .html' - sections[-1].items.append(item[1:]) - else: + entries[-1].items.append(item[1:]) + elif ':' in item: [path, name] = item.split(': ') - sections.append(Section(path, name)) + entries.append(Section(path, name)) + else: + entries.append(item) sidebar_content = [ ('', '<a class="guide-sidebar-item" href="<ROOT>../index.html">back to pugl</a>'), - ('index.html', '<a class="guide-sidebar-item" href="<ROOT>index.html">the basics</a>'), ] -for section in sections: - sidebar_content.append(('', '<h3 class="guide-sidebar-heading">{}</h3>'.format(section.name))) - for item in section.items: - path = '{}/{}/{}'.format(INPUT_DIR, section.path, item) - file = open(path) - first_line = file.readline().strip() - file.close() - assert first_line.startswith(TITLE_PREFIX), 'file {} doesn\'t start with title prefix {}'.format(path, TITLE_PREFIX) - title = first_line[len(TITLE_PREFIX):].strip() - assert '"' not in path, 'path {} should not contain "'.format(path) - url = quote('{}/{}'.format(section.path, item)) - sidebar_content.append((section.path + '/' + item, '<a href="<ROOT>{}" class="guide-sidebar-item guide-sidebar-item-indented">{}</a>'.format(url, html.escape(title)))) +def add_sidebar_link_for_page(path, indented): + file = open(INPUT_DIR + '/' + path) + first_line = file.readline().strip() + file.close() + assert first_line.startswith(TITLE_PREFIX), 'file {} doesn\'t start with title prefix {}'.format(path, TITLE_PREFIX) + title = first_line[len(TITLE_PREFIX):].strip() + sidebar_content.append(( + path, + '<a href="<ROOT>{url}" class="guide-sidebar-item{c}">{title}</a>'.format( + url=quote(path), c=' guide-sidebar-item-indented' if indented else '', title=html.escape(title) + ) + )) + +for entry in entries: + if isinstance(entry, Section): + section = entry + sidebar_content.append(('', '<h3 class="guide-sidebar-heading">{}</h3>'.format(section.name))) + for item in section.items: + path = '{}/{}/{}'.format(INPUT_DIR, section.path, item) + add_sidebar_link_for_page(section.path + '/' + item, True) + else: + assert isinstance(entry, str) + add_sidebar_link_for_page(entry, False) def process_file(path): count = path.count('/') @@ -102,7 +114,10 @@ def process_file(path): f.write(output) f.close() -process_file('index.html') -for section in sections: - for item in section.items: - process_file('{}/{}'.format(section.path, item)) +for entry in entries: + if isinstance(entry, Section): + section = entry + for item in section.items: + process_file('{}/{}'.format(section.path, item)) + else: + process_file(entry) diff --git a/guide-src/outline.txt b/guide-src/outline.txt index 5ded64c..df12f5d 100644 --- a/guide-src/outline.txt +++ b/guide-src/outline.txt @@ -1,6 +1,5 @@ -widget-inputs: Widget inputs -/syntax.html -/builtins.html -development: Development +index.html +widget-inputs.html +development: development /index.html /js-features.html diff --git a/guide-src/widget-inputs.html b/guide-src/widget-inputs.html new file mode 100644 index 0000000..f0e8bdb --- /dev/null +++ b/guide-src/widget-inputs.html @@ -0,0 +1,41 @@ +--- widget inputs + +<h2>syntax</h2> + +<p> +here are the various ways of specifying widget inputs: +</p> +<table> +<tbody> +<tr><th style="min-width:10em;">format</th><th>example</th><th>description</th></tr> +<tr><td><code><number></code></td><td><code>5.3</code></td><td>a number</td></tr> +<tr><td><code>#RRGGBB</code></td><td><code>#ff831c</code></td><td>a 3-component vector whose values are taken from the given color code. a color picker will be shown next to the input.</td></tr> +<tr><td><code>#RRGGBBAA</code></td><td><code>#ff831c22</code></td><td>a 4-component vector whose values are taken from the color code.</td></tr> +<tr><td><code><widget name></code></td><td><code>add1</code></td><td>the output from another widget</td></tr> +<tr><td><code><input>,<input></code></td><td><code>.pos,0</code></td><td>a vector composed of <code>a</code> and <code>b</code> (which can themselves be vectors)</td></tr> +<tr><td><code><input>.<component></code></td><td><code>.pos.x</code></td><td>extract a single component from a vector</td></tr> +<tr><td><code><input>.<swizzle></code></td><td><code>.pos.yxy</code></td><td>reorder vector components (this example is equivalent to <code>.pos.y, .pos.x, .pos.y</code>)</td></tr> +</tbody> +</table> + + +<h2>built-in values</h2> + +all of pugl's built-in values begin with a <code>.</code> to distinguish +them from your widgets. +here they all are. +below, <code>float</code> refers to a plain old number, +<code>vec2</code> is a 2-component vector, etc. + +<table> +<tbody> +<tr><th>built‑in</th><th>type</th><th>description</th></tr> +<tr><td><code>.pos</code></td><td><code>vec2</code><td>the position of the pixel, with (−1, −1) being the bottom-left corner, and (+1, +1) being the top-right corner.</td></tr> +<tr><td><code>.pos01</code></td><td><code>vec2</code><td>the position of the pixel, with (0, 0) being the bottom-left corner, and (+1, +1) being the top-right corner.</td></tr> +<tr><td><code>.time</code></td><td><code>float</code><td>the amount of time that has passed (wraps around every hour to prevent imprecision issues).</td></tr> +<tr><td><code>.mouse</code></td><td><code>vec2</code><td>the position of the mouse ranging from (−1, −1) to (+1, +1).</td></tr> +<tr><td><code>.mouse01</code></td><td><code>vec2</code><td>the position of the mouse ranging from (0, 0) to (+1, +1).</td></tr> +<tr><td><code>.pi</code></td><td><code>float</code><td>π (3.1415…).</td></tr> +<tr><td><code>.2pi</code></td><td><code>float</code><td>2π (6.2831…).</td></tr> +</tbody> +</table> diff --git a/guide-src/widget-inputs/builtins.html b/guide-src/widget-inputs/builtins.html deleted file mode 100644 index 32cb3b1..0000000 --- a/guide-src/widget-inputs/builtins.html +++ /dev/null @@ -1,20 +0,0 @@ ---- built-in values - -all of pugl's built-in values begin with a <code>.</code> to distinguish -them from your widgets. -here they all are. -below, <code>float</code> refers to a plain old number, -<code>vec2</code> is a 2-component vector, etc. - -<table> -<tbody> -<tr><th>built‑in</th><th>type</th><th>description</th></tr> -<tr><td><code>.pos</code></td><td><code>vec2</code><td>the position of the pixel, with (−1, −1) being the bottom-left corner, and (+1, +1) being the top-right corner.</td></tr> -<tr><td><code>.pos01</code></td><td><code>vec2</code><td>the position of the pixel, with (0, 0) being the bottom-left corner, and (+1, +1) being the top-right corner.</td></tr> -<tr><td><code>.time</code></td><td><code>float</code><td>the amount of time that has passed (wraps around every hour to prevent imprecision issues).</td></tr> -<tr><td><code>.mouse</code></td><td><code>vec2</code><td>the position of the mouse ranging from (−1, −1) to (+1, +1).</td></tr> -<tr><td><code>.mouse01</code></td><td><code>vec2</code><td>the position of the mouse ranging from (0, 0) to (+1, +1).</td></tr> -<tr><td><code>.pi</code></td><td><code>float</code><td>π (3.1415…).</td></tr> -<tr><td><code>.2pi</code></td><td><code>float</code><td>2π (6.2831…).</td></tr> -</tbody> -</table> diff --git a/guide-src/widget-inputs/syntax.html b/guide-src/widget-inputs/syntax.html deleted file mode 100644 index 8026b33..0000000 --- a/guide-src/widget-inputs/syntax.html +++ /dev/null @@ -1,16 +0,0 @@ ---- syntax -<p> -here are the various ways of specifying widget inputs: -</p> -<table> -<tbody> -<tr><th style="min-width:10em;">format</th><th>example</th><th>description</th></tr> -<tr><td><code><number></code></td><td><code>5.3</code></td><td>a number</td></tr> -<tr><td><code>#RRGGBB</code></td><td><code>#ff831c</code></td><td>a 3-component vector whose values are taken from the given color code. a color picker will be shown next to the input.</td></tr> -<tr><td><code>#RRGGBBAA</code></td><td><code>#ff831c22</code></td><td>a 4-component vector whose values are taken from the color code.</td></tr> -<tr><td><code><widget name></code></td><td><code>add1</code></td><td>the output from another widget</td></tr> -<tr><td><code><input>,<input></code></td><td><code>.pos,0</code></td><td>a vector composed of <code>a</code> and <code>b</code> (which can themselves be vectors)</td></tr> -<tr><td><code><input>.<component></code></td><td><code>.pos.x</code></td><td>extract a single component from a vector</td></tr> -<tr><td><code><input>.<swizzle></code></td><td><code>.pos.yxy</code></td><td>reorder vector components (this example is equivalent to <code>.pos.y, .pos.x, .pos.y</code>)</td></tr> -</tbody> -</table> @@ -1,6 +1,5 @@ :root { - --ui-border: white; - --ui-height: 2.5em; + --color-text: #ddd; } body { @@ -10,7 +9,7 @@ body { body, dialog { background-color: black; - color: white; + color: var(--color-text); } a, a:visited { @@ -69,7 +68,14 @@ h6 { cursor: col-resize; display: flex; justify-content: center; - background: linear-gradient(90deg, #000, #444 30%, #fff 50%, #444 70%, #000); + background: linear-gradient( + 90deg, + #000, + #444 30%, + var(--color-text) 50%, + #444 70%, + #000 + ); } #ui { overflow-x: auto; @@ -82,9 +88,9 @@ h6 { } input, button { - border: 1px solid var(--ui-border); + border: 1px solid var(--color-text); background-color: transparent; - color: white; + color: var(--color-text); } input[type='submit']:hover, button:hover { @@ -131,7 +137,7 @@ input[type='color'] { padding: 0; margin: 0.2em 0.5em; border: 2px solid #000; - outline: 1px solid #fff; + outline: 1px solid var(--color-text); height: 1.3em; width: 1.3em; } @@ -190,7 +196,7 @@ input[type='checkbox'] { } .widget-choice { width: calc(100% - 0.4em); - border: 1px solid white; + border: 1px solid var(--color-text); margin: 0.2em; padding: 0.1em 0; } @@ -201,7 +207,7 @@ input[type='checkbox'] { #widget-choices { margin: 0.2em; padding-bottom: 0.3em; - border-bottom: 2px solid white; + border-bottom: 2px solid var(--color-text); } summary { cursor: pointer; @@ -255,7 +261,7 @@ input[type='number'] { #guide-sidebar { flex: 1; - border-right: 2px solid white; + border-right: 2px solid var(--color-text); height: 100vh; background: #333; overflow: auto; @@ -309,7 +315,7 @@ table { td, th { - border: 2px solid white; + border: 2px solid var(--color-text); margin: 0; padding: 0.2em; } |