diff --git a/docs/generate.py b/docs/generate.py index b1282fe..9bbc05c 100644 --- a/docs/generate.py +++ b/docs/generate.py @@ -37,15 +37,17 @@ THIS_PATH = abspath(dirname(__file__)) BUILD_DIR = join(THIS_PATH, "build") STATIC_DIR = join(THIS_PATH, "static") MARKDOWN_DIR = join(THIS_PATH, "markdown") + +TEMPLATE_PATH = join(THIS_PATH, 'templates/docs.html') DOCS_URL_PATH = f"docs/{POCKETLANG_VERSION}/" ## Html generated at docs/* path. def main(): check_wasm() clean() make_build_dir() - gen_home_page() + gen_site_pages() context = collect_doc_pages() - generate_pages(context) + gen_doc_pages(context) print("Docs generated successfully") ## INTERNAL ################################################################### @@ -78,12 +80,13 @@ def make_build_dir(): open(join(BUILD_DIR, '.nojekyll'), 'w').close() copytree(STATIC_DIR, join(BUILD_DIR, "static")) -def gen_home_page(): - template = read(join(THIS_PATH, "index.html")) - template = template.replace("{{ STATIC_DIR }}", "./static/") - template = template.replace("{{ DOCS_URL }}", DOCS_URL_PATH) - with open(join(BUILD_DIR, 'index.html'), 'w') as fp: - fp.write(template) +def gen_site_pages(): + for site_page in ["index.html"]: + template = read(join(THIS_PATH, f"templates/{site_page}")) + template = template.replace("{{ STATIC_DIR }}", "./static/") + template = template.replace("{{ DOCS_URL }}", DOCS_URL_PATH) + with open(join(BUILD_DIR, site_page), 'w') as fp: + fp.write(template) ## FIXME: wirte a better md -> html compiler (or use some libraries). ## Compile the markdown files to html. and return the a tuple of (html, topics) @@ -162,17 +165,17 @@ def generate_navtree(context): def generate_toc_entries(topics): gen = "" for topic in topics: - gen += f'
  • {topic.replace("-", " ")}
    • \n' + gen += f'
  • {topic.replace("-", " ")}
    • \n' return gen ## Build the template page with the generated context. -def generate_pages(context): +def gen_doc_pages(context): navtree = generate_navtree(context) - template = read(join(MARKDOWN_DIR, 'template.html')) + template = read(TEMPLATE_PATH) template = template.replace("{{ NAVIGATION_TREE }}", navtree) template = template.replace("{{ LOGO_WHITE }}", - read(join(STATIC_DIR, "img/logo-white.svg"))) + read(join(STATIC_DIR, "img/pocketlang.svg"))) template = template.replace("{{ URL_POCKET_HOME }}", "../../index.html") for section in context: diff --git a/docs/static/css/docs.css b/docs/static/css/docs.css index 7754fc2..96cc88f 100644 --- a/docs/static/css/docs.css +++ b/docs/static/css/docs.css @@ -1,24 +1,29 @@ :root { - --navigation-width: 300px; - - /* Horizontal padding of the content. */ - --content-h-padding: 30px; - - /* These values used to calculate margin top for smaller screen. */ - --navtop-v-margin: 15px; /* Vertical margin. */ - --navtop-height: 30px; /* Height of it's content. */ - - --navbar-height: calc(var(--navtop-v-margin) * 2 + var(--navtop-height)); --nav-h-padding: 24px; /* Navigation content horizontal padding. */ + --navigation-width: 300px; /* Width of the side navigation bar. */ + --content-h-padding: 30px; /* Horizontal padding of the content. */ + --navtop-v-margin: 15px; /* Vertical margin. */ + --navtop-height: 30px; /* Height of it's content. */ + --navbar-height: calc(var(--navtop-v-margin) * 2 + var(--navtop-height)); + + --pocket-logo-size: 55px; - --color-nav-bg: var(--color-theme); - --color-nav-font: white; + /* Colors */ --color-title-underline: #d8dee4; --color-footer-font: #616161; --color-nav-section-hover: #5988bf; + --color-nav-topics-border: #3b3b3b66; + + /* Font size */ + --fs-nav-title : 20px; + --fs-nav-section: 16px; + --fs-nav-topics: 14px; + --fs-toc-title: 18px; + --fs-toc-item: 15px; + --fs-footer: 13px; } html { @@ -36,15 +41,14 @@ html { top: 0; bottom: 0; z-index: 1; overflow-y: auto; - background-color: var(--color-nav-bg); - color: var(--color-nav-font); + background-color: var(--color-theme); + color: white; user-select: none; } #main { margin-left: var(--navigation-width); display: flex; - color: var(--color-default-font); } #content-body { @@ -55,7 +59,6 @@ html { #table-of-content { position: sticky; top: 0; - min-width: 300px; width: auto; max-width: 500px; @@ -66,23 +69,22 @@ html { /* NAVIGATION */ /*****************************************************************************/ -#navigation a { - color: var(--color-nav-font); -} - -/* To show an empty space below, after toggiling in smaller screen. */ -#navtree { - padding-bottom: 30px; -} - -/* For smaller screen the margin will be overriden. */ #navtop { - padding: var(--nav-h-padding) 20px; + padding: var(--nav-h-padding); } -/* Title on the navigation top. */ -#navtop h1 { - font-size: 18px; +#nav-title { + font-size: var(--fs-nav-title); +} + +#pocket-logo { + width: var(--pocket-logo-size); + height: var(--pocket-logo-size); +} + +/* Override the color to match the background. */ +#pocket-logo path { + fill:white !important; } #toggle-menu { @@ -91,10 +93,10 @@ html { } .nav-section { - font-size: 14px; + font-size: var(--fs-nav-section); font-weight: bolder; padding: 8px var(--nav-h-padding); - + display: flex; align-items: center; justify-content: space-between; @@ -118,64 +120,38 @@ html { } .nav-topics a { - font-size: 14px; + font-size: var(--fs-nav-topics); font-weight: normal; padding: 6px 0px 6px 15px; margin-left: var(--nav-h-padding); - border-left: 2px solid #3b3b3b66; + border-left: 2px solid var(--color-nav-topics-border); display: block; text-decoration: none; } -/*****************************************************************************/ -/* MAIN */ -/*****************************************************************************/ - -#main a:not(.anchor) { - color: var(--color-link); -} - -#main a:not(.anchor):hover { - text-decoration: underline; -} - -#content-body ol, #content-body ul { - padding-left: 32px; - margin-bottom: 16px; -} - -#content-body li { - margin-top: 8px; -} - /*****************************************************************************/ /* TABLE OF CONTENT */ /*****************************************************************************/ -#table-of-content a:hover { - text-decoration: underline; -} - #table-of-content { padding: 30px 30px 0px 10px; } #table-of-content h3 { margin-bottom: 10px; - font-size: 17px; + font-size: var(--fs-toc-title); } #table-of-content li { + font-size: var(--fs-toc-item); margin-top: 5px; - font-size: 15px; font-weight: 300; } #content-footer { font-weight: bolder; - font-size: 13px; - + font-size: var(--fs-footer); margin-top: 30px; padding-top: 10px; margin-bottom: 30px; @@ -214,14 +190,25 @@ html { line-height: 26px; } -/*****************************************************************************/ -/* INLINE */ -/*****************************************************************************/ +#content-body ol, #content-body ul { + padding-left: 32px; + margin-bottom: 16px; +} -.flex { display: flex; } -.flac { align-items: center; } -.fljc { justify-content: center; } -.flsb { justify-content: space-between; } +#content-body li { + margin-top: 8px; +} + +/* Since content body tags are auto generated, We cannot (mybe possible) + add the link classes, so we're re-defining the link style here. */ + +#content-body a:not(.anchor) { + color: var(--color-link); +} + +#content-body a:not(.anchor):hover { + text-decoration: underline; +} /*****************************************************************************/ /* MEDIA SIZE OVERRIDE */ @@ -233,6 +220,7 @@ html { width: 100%; bottom: auto; } + #navigation.collapsed { height: auto; } @@ -241,7 +229,7 @@ html { padding: var(--navtop-v-margin) 20px; } - #logo-white { + #pocket-logo { display: none; } @@ -250,13 +238,14 @@ html { } #table-of-content { - padding-left: var(--content-h-padding); /* Match the content body padding. */ + /* Match the content body padding. */ + padding-left: var(--content-h-padding); top: var(--navbar-height); } #main { margin-top: var(--navbar-height); - margin-left: 0; + margin-left: 0; /* No more sidebar. */ } #toggle-menu { diff --git a/docs/static/css/home.css b/docs/static/css/home.css index a7a6867..ea00dbe 100644 --- a/docs/static/css/home.css +++ b/docs/static/css/home.css @@ -166,10 +166,6 @@ html { margin : 30px 0px 5px 0px; } -.editor, .editor span { - font-family: var(--font-mono); -} - #code-output { font-family: var(--font-mono); background-color: hsl(210, 0%, 99%); diff --git a/docs/static/css/style.css b/docs/static/css/style.css index 35cfe85..35b84cc 100644 --- a/docs/static/css/style.css +++ b/docs/static/css/style.css @@ -26,6 +26,7 @@ margin: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; + color: inherit; } /* Scroll bar override (Not works with Firefox and IE) */ @@ -36,12 +37,12 @@ pre:first-line { line-height: 0; } -code, code span { +code, code span, +.code, .code span { font-family: var(--font-mono); } a { - color: inherit; text-decoration: none; } @@ -56,4 +57,26 @@ ul li { } .anchor:hover { color: var(--color-theme); -} \ No newline at end of file +} + +.link:not(.anchor) { + color: var(--color-link); +} + +.link:not(.anchor):hover { + text-decoration: underline; +} + +/*****************************************************************************/ +/* INLINE */ +/*****************************************************************************/ + +.space-bottom { /* Add margin to have a space after that element. */ + margin-bottom: 30px; +} + +.flex { display: flex; } +.flac { align-items: center; } +.fljc { justify-content: center; } +.flsb { justify-content: space-between; } + diff --git a/docs/static/img/favicon.svg b/docs/static/img/favicon.svg index 7e34b3a..5009498 100644 --- a/docs/static/img/favicon.svg +++ b/docs/static/img/favicon.svg @@ -48,18 +48,4 @@ id="path888" sodipodi:nodetypes="cccccc" /> - - - - diff --git a/docs/static/img/logo-white.svg b/docs/static/img/logo-white.svg deleted file mode 100644 index b840650..0000000 --- a/docs/static/img/logo-white.svg +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - - - - - - diff --git a/docs/static/img/pocketlang.svg b/docs/static/img/pocketlang.svg index 5929693..3877ac1 100644 --- a/docs/static/img/pocketlang.svg +++ b/docs/static/img/pocketlang.svg @@ -6,7 +6,7 @@ height="85mm" viewBox="0 0 60 85" version="1.1" - id="svg5" + id="pocket-logo" inkscape:version="1.1.2 (b8e25be833, 2022-02-05)" sodipodi:docname="pocketlang.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" diff --git a/docs/markdown/template.html b/docs/templates/docs.html similarity index 95% rename from docs/markdown/template.html rename to docs/templates/docs.html index c4c5677..f68a3a3 100644 --- a/docs/markdown/template.html +++ b/docs/templates/docs.html @@ -21,7 +21,7 @@
    {{ LOGO_WHITE }} -

    Pocketlang Docs

    +

    Pocketlang Docs

     @@ -32,7 +32,7 @@ - -
    + +

    output