From 3fdc6103e643db164ade31fe01b054c58c907ff7 Mon Sep 17 00:00:00 2001 From: Michiel Sikma Date: Sat, 21 Mar 2020 14:28:00 +0100 Subject: [PATCH] Some fixes to the docs generation, and style changes - table is now minimal size --- .../{docs-style.css => gh-markdown.css} | 178 +---------------- docs/resources/pokesprite-docs.css | 181 ++++++++++++++++++ scripts/gen_docs.py | 27 ++- 3 files changed, 204 insertions(+), 182 deletions(-) rename docs/resources/{docs-style.css => gh-markdown.css} (68%) create mode 100644 docs/resources/pokesprite-docs.css diff --git a/docs/resources/docs-style.css b/docs/resources/gh-markdown.css similarity index 68% rename from docs/resources/docs-style.css rename to docs/resources/gh-markdown.css index c9334aa5..70253fed 100644 --- a/docs/resources/docs-style.css +++ b/docs/resources/gh-markdown.css @@ -1,4 +1,8 @@ -/** Github markdown styling (minimized) - plus some small adjustments for PokéSprite */ +/** + * Github markdown styling + * + * Minimized and with some modifications. + */ :root { --gh-black: #24292e; @@ -274,7 +278,7 @@ .markdown-body table, .markdown-body ul { margin-bottom: 16px; - margin-top: 0; + margin-top: 16px; } .markdown-body hr { @@ -586,173 +590,3 @@ .markdown-body .text-section.last { padding-bottom: 2em; } - -/** Sprite overview table */ - -.markdown-body .pokesprite { - width: 100%; -} -.markdown-body .pokesprite tr.header th { - text-align: left; -} -.markdown-body .pokesprite tr.header th, -.markdown-body .pokesprite tr.header td { - white-space: nowrap; -} -.markdown-body .pokesprite thead tr.title th { - text-align: left; - background: var(--shade-0); - line-height: 23px !important; -} -.markdown-body .pokesprite thead tr.title th span { - font-weight: normal; - display: block; - font-size: smaller; - line-height: 1.5; - color: var(--shade-7) -} -.markdown-body .pokesprite tbody tr:hover td { - background: var(--shade-3); -} -.markdown-body .pokesprite tbody tr td[rowspan] { - background: var(--shade-0); -} -.markdown-body .pokesprite tbody tr td.group { - font-weight: 500; -} -.markdown-body .pokesprite tbody tr td.item-id { - padding-bottom: 0; -} -.markdown-body .pokesprite tbody tr td.item-id code { - display: inline-block; - padding-top: 1px; -} -.markdown-body .pokesprite tbody tr.variable-height td { - vertical-align: middle; -} -.markdown-body .pokesprite tbody attr span { - border-bottom: 1px dotted var(--gh-black); -} -.markdown-body .pokesprite tbody th, -.markdown-body .pokesprite tbody td { - vertical-align: top; - white-space: nowrap; - width: 10%; -} -.markdown-body .pokesprite tbody td.filler { - width: 50%; -} -.markdown-body .pokesprite tbody td code { - padding: 0; - background: transparent; -} -/* Image no. column */ -.markdown-body .pokesprite tr.header th:first-child, -.markdown-body .pokesprite tbody td:first-child { - text-align: right; - width: 1px; -} -/* Slug column - the table is designed so this column fills out most of the remaining space. */ -.markdown-body .pokesprite tr.header th:last-child, -.markdown-body .pokesprite tbody td:last-child { - width: 40%; -} -/* Form column - contains the form name, and is optionally followed by one or two td.min nodes. */ -.markdown-body .pokesprite tbody td.form { - width: 15%; -} -.markdown-body .pokesprite tbody td.min { - width: 0.1%; - text-align: center; - font-size: 14px; - font-weight: 500; -} -.markdown-body .pokesprite tbody td.min.gender-m { - color: #0c8bff; -} -.markdown-body .pokesprite tbody td.min.gender-f { - color: #ff3b60; -} -/* Pokémon sprites */ -.markdown-body .pokesprite tbody img { - image-rendering: pixelated; - image-rendering: crisp-edges; - max-width: inherit; -} -.markdown-body .pokesprite tbody td.image { - padding-left: 0; - padding-right: 0; - text-align: center; - width: 1px; -} -.markdown-body .pokesprite tbody td.image.item { - padding-top: 0; - padding-bottom: 0; -} -.markdown-body .pokesprite tfoot td { - line-height: 23px !important; -} -.markdown-body .pokesprite tfoot td span { - line-height: 1.5; - margin-top: 0.5em; - font-size: smaller; - font-weight: normal; - display: block; -} -.markdown-body .pokesprite tfoot td span:first-child { - margin-top: 0; -} -/* Some magic to get border rounding working. */ -.markdown-body .pokesprite { - border-collapse: separate; -} -.markdown-body .pokesprite td, -.markdown-body .pokesprite th { - border: none; - border-top: 1px solid var(--shade-4); - border-left: 1px solid var(--shade-4); -} -.markdown-body .pokesprite td:last-child, -.markdown-body .pokesprite th:last-child { - border-right: 1px solid var(--shade-4); -} -.markdown-body .pokesprite thead tr:first-child th:first-child { - border-top-left-radius: var(--rounding); -} -.markdown-body .pokesprite thead tr:first-child th:last-child { - border-top-right-radius: var(--rounding); -} -.markdown-body .pokesprite tfoot tr:last-child td { - border-bottom: 1px solid var(--shade-4); -} -.markdown-body .pokesprite tfoot tr:last-child td:first-child { - border-bottom-left-radius: var(--rounding); -} -.markdown-body .pokesprite tfoot tr:last-child td:last-child { - border-bottom-right-radius: var(--rounding); -} - -/* Differences per gen. */ - -.markdown-body .pokesprite th, -.markdown-body .pokesprite td { - line-height: 23px; -} -.markdown-body .pokesprite.gen8 th, -.markdown-body .pokesprite.gen8 td { - line-height: 33px; -} -.markdown-body .pokesprite tbody img { - display: block; - margin-left: auto !important; - margin-right: auto !important; -} -.markdown-body .pokesprite tbody img.i { - margin: 2px 0 0 0; -} -.markdown-body .pokesprite tbody img.p { - margin: -28px 0 -4px 0; -} -.markdown-body .pokesprite.gen8 tbody img.p { - margin: -18px 0 -4px 0; -} diff --git a/docs/resources/pokesprite-docs.css b/docs/resources/pokesprite-docs.css new file mode 100644 index 00000000..b47babf5 --- /dev/null +++ b/docs/resources/pokesprite-docs.css @@ -0,0 +1,181 @@ +/** + * Sprite overview table + * + * See gh-markdown.css for variables. + */ + +/* Column sizes */ +.markdown-body .pokesprite { + width: min-content; + margin: auto; +} +.markdown-body .pokesprite tbody th, +.markdown-body .pokesprite tbody td { +} +.markdown-body .pokesprite tbody td.filler { + width: 50%; +} +/* Slug column - the table is designed so this column fills out most of the remaining space. */ +.markdown-body .pokesprite tr.header th:last-child, +.markdown-body .pokesprite tbody td:last-child { +} +/* Form column - contains the form name, and is optionally followed by one or two td.min nodes. */ +.markdown-body .pokesprite tbody td.form { +} +.markdown-body .pokesprite tbody td.min { + width: 0.1%; +} +.markdown-body .pokesprite tbody td.image { + width: 1px; +} + +/* The rest */ +.markdown-body .pokesprite tr.header th { + text-align: left; +} +.markdown-body .pokesprite tr.header th, +.markdown-body .pokesprite tr.header td { + white-space: nowrap; +} +.markdown-body .pokesprite thead tr.title th { + text-align: left; + background: var(--shade-0); + line-height: 23px !important; +} +.markdown-body .pokesprite thead tr.title th span { + font-weight: normal; + display: block; + font-size: smaller; + line-height: 1.5; + color: var(--shade-7) +} +.markdown-body .pokesprite tbody tr:hover td { + background: var(--shade-3); +} +.markdown-body .pokesprite tbody tr td[rowspan] { + background: var(--shade-0); +} +.markdown-body .pokesprite tbody tr td.group { + font-weight: 500; +} +.markdown-body .pokesprite tbody tr td.item-id { + padding-bottom: 0; +} +.markdown-body .pokesprite tbody tr td.item-id code { + display: inline-block; + padding-top: 1px; +} +.markdown-body .pokesprite tbody tr.variable-height td { + vertical-align: middle; +} +.markdown-body .pokesprite tbody attr span { + border-bottom: 1px dotted var(--gh-black); +} +.markdown-body .pokesprite tbody th, +.markdown-body .pokesprite tbody td { + vertical-align: top; + white-space: nowrap; +} +.markdown-body .pokesprite tbody td code { + padding: 0; + background: transparent; +} +/* Image no. column */ +.markdown-body .pokesprite tr.header th:first-child, +.markdown-body .pokesprite tbody td:first-child { + text-align: right; + width: 1px; +} +.markdown-body .pokesprite tbody td.min { + text-align: center; + font-size: 14px; + font-weight: 500; +} +.markdown-body .pokesprite tbody td.min.gender-m { + color: #0c8bff; +} +.markdown-body .pokesprite tbody td.min.gender-f { + color: #ff3b60; +} +/* Pokémon sprites */ +.markdown-body .pokesprite tbody img { + image-rendering: pixelated; + image-rendering: crisp-edges; + max-width: inherit; +} +.markdown-body .pokesprite tbody td.image { + padding-left: 0; + padding-right: 0; + text-align: center; +} +.markdown-body .pokesprite tbody td.image.item { + padding-top: 0; + padding-bottom: 0; +} +.markdown-body .pokesprite tfoot td { + line-height: 23px !important; +} +.markdown-body .pokesprite tfoot td span { + line-height: 1.5; + margin-top: 0.5em; + font-size: smaller; + font-weight: normal; + display: block; +} +.markdown-body .pokesprite tfoot td span:first-child { + margin-top: 0; +} +/* Some magic to get border rounding working. */ +.markdown-body .pokesprite { + border-collapse: separate; +} +.markdown-body .pokesprite td, +.markdown-body .pokesprite th { + border: none; + border-top: 1px solid var(--shade-4); + border-left: 1px solid var(--shade-4); +} +.markdown-body .pokesprite td:last-child, +.markdown-body .pokesprite th:last-child { + border-right: 1px solid var(--shade-4); +} +.markdown-body .pokesprite thead tr:first-child th:first-child { + border-top-left-radius: var(--rounding); +} +.markdown-body .pokesprite thead tr:first-child th:last-child { + border-top-right-radius: var(--rounding); +} +.markdown-body .pokesprite tfoot tr:last-child td { + border-bottom: 1px solid var(--shade-4); +} +.markdown-body .pokesprite tfoot tr:last-child td:first-child { + border-bottom-left-radius: var(--rounding); +} +.markdown-body .pokesprite tfoot tr:last-child td:last-child { + border-bottom-right-radius: var(--rounding); +} + +/* Differences per gen. */ + +.markdown-body .pokesprite th, +.markdown-body .pokesprite td { + line-height: 23px; +} +.markdown-body .pokesprite.gen8 th, +.markdown-body .pokesprite.gen8 td { + line-height: 33px; +} +.markdown-body .pokesprite tbody img { + display: block; + margin-left: auto !important; + margin-right: auto !important; +} +.markdown-body .pokesprite tbody img.i { + margin: 2px 0 0 0; +} +.markdown-body .pokesprite tbody img.p { + margin: -28px 0 -4px 0; +} +.markdown-body .pokesprite.gen8 tbody img.p { + margin: -18px 0 -4px 0; +} diff --git a/scripts/gen_docs.py b/scripts/gen_docs.py index 84986133..77bff1cb 100755 --- a/scripts/gen_docs.py +++ b/scripts/gen_docs.py @@ -16,6 +16,7 @@ import json import subprocess +import html from os import makedirs from os.path import abspath, dirname from pathlib import Path @@ -85,12 +86,16 @@ def generate_index_page(version, commit): }, 'Index', version, commit, '.') return content -def wrap_docs_page(table_content, gen, gen_dir, curr_page, json_file, is_items_page, is_misc_page, version, commit, sprites_counter, new_sprites_only): +def wrap_docs_page(table_content, gen, gen_dir, curr_page, json_file, title, is_items_page, is_misc_page, version, commit, sprites_counter, new_sprites_only): '''Wraps a documentation page in a table node and adds styling''' gen_url = f'{REPO_BASE_URL}/{gen_dir}' json_url = f'{REPO_BASE_URL}/data/{json_file}' gen_link = f'{gen_dir}' json_link = f'data/{json_file}' + + if title is None and gen: + title = 'Gen ' + str(gen) + (f' (new sprites only)' if new_sprites_only else '') + main_info = '''

This table lists all inventory item sprites. These items are from the last several games and is up-to-date as of Pokémon Sword/Shield. The sprites are from Gen 3 through 8.

All sprites are 32×32 in size. There are sets of sprites: one with a Sword/Shield style white outline around the sprites, and one without (as all previous games). Both sets contain the same number of sprites.

@@ -124,7 +129,7 @@ def wrap_docs_page(table_content, gen, gen_dir, curr_page, json_file, is_items_p %(main_info)s

See the project page on Github for more information.

- +
%(table_content)s
@@ -135,7 +140,7 @@ def wrap_docs_page(table_content, gen, gen_dir, curr_page, json_file, is_items_p ''' % { 'table_content': table_content, 'title_sprite': get_title_venusaur(), - 'gen': gen, + 'gen': ' gen%s' % gen if gen else '', 'main_info': main_info, 'curr_page': curr_page, 'version': version, @@ -143,7 +148,7 @@ def wrap_docs_page(table_content, gen, gen_dir, curr_page, json_file, is_items_p 'commit': commit, 'project_url': PROJECT_URL, 'sprites_counter': sprites_counter - }, 'Gen ' + str(gen) + (f' (new sprites only)' if new_sprites_only else ''), version, commit, '..') + }, title, version, commit, '..') def get_menu_links(curr_page): menu = [ @@ -166,14 +171,15 @@ def wrap_in_html(content, title, version, commit, res_dir = '.'): - PokéSprite - %(title)s + PokéSprite%(title)s - + + %(content)s @@ -182,7 +188,7 @@ def wrap_in_html(content, title, version, commit, res_dir = '.'): '''.strip() % { 'res_dir': res_dir, 'content': content, - 'title': title, + 'title': ' - ' + title if title else '', 'version': version, 'commit': commit } @@ -331,6 +337,7 @@ def get_td_node(td): return f'{td}' def get_img_node(url, name, form_name, type): + form_name = html.escape(form_name) return f'{form_name}' def reset_counter(): @@ -432,7 +439,7 @@ def generate_misc_table(misc, meta, curr_page, json_file, version = '[unknown]', ''') buffer.append('') buffer.append('') - return wrap_docs_page('\n'.join(buffer), None, None, curr_page, json_file, False, True, version, commit, sprites_counter, False) + return wrap_docs_page('\n'.join(buffer), None, None, curr_page, json_file, 'Miscellaneous sprites', False, True, version, commit, sprites_counter, False) def generate_items_table(itm, itm_unl, inv, etc, dirs, curr_page, json_file, version = '[unknown]', commit = '[unknown]'): '''Generates a documentation table for inventory sprites''' @@ -510,7 +517,7 @@ def generate_items_table(itm, itm_unl, inv, etc, dirs, curr_page, json_file, ver ''') buffer.append('') buffer.append('') - return wrap_docs_page('\n'.join(buffer), None, None, curr_page, json_file, True, False, version, commit, sprites_counter, new_sprites_only) + return wrap_docs_page('\n'.join(buffer), None, None, curr_page, json_file, 'Inventory item sprites', True, False, version, commit, sprites_counter, new_sprites_only) def generate_dex_table(dex, etc, gen, gen_dir, curr_page, json_file, add_female = True, add_right = False, version = '[unknown]', commit = '[unknown]'): '''Generates a documentation table for Pokémon sprites''' @@ -622,7 +629,7 @@ def generate_dex_table(dex, etc, gen, gen_dir, curr_page, json_file, add_female ''') buffer.append('') buffer.append('') - return wrap_docs_page('\n'.join(buffer), gen, gen_dir, curr_page, json_file, False, False, version, commit, sprites_counter, new_sprites_only) + return wrap_docs_page('\n'.join(buffer), gen, gen_dir, curr_page, json_file, None, False, False, version, commit, sprites_counter, new_sprites_only) def main(): '''Generates several documentation files for the /docs directory'''