sources were refactored

2025-02-05 20:26:53 +08:00 · 2022-04-05 19:18:19 +05:30 · 2022-04-05 19:18:19 +05:30 · ee2d87555a
commit ee2d87555a
parent 7704a2df1a
9 changed files with 108 additions and 179 deletions
--- 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'<li><a href="#{topic}">{topic.replace("-", " ")}</a></li>\n'
+    gen += f'<li><a class="link" href="#{topic}">{topic.replace("-", " ")}</a></li>\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:
--- 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 <a> 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 {
--- 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%);
--- 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);
-}
+}
+
+.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; }
+
--- a/docs/static/img/favicon.svg
+++ b/docs/static/img/favicon.svg
@ -48,18 +48,4 @@
       id="path888"
       sodipodi:nodetypes="cccccc" />
  </g>
-  <g
-     inkscape:groupmode="layer"
-     id="layer3"
-     inkscape:label="thread">
-    <path
-       style="fill:#ffffff;fill-opacity:0;stroke:#ffffff;stroke-width:0.499999;stroke-miterlimit:4;stroke-dasharray:1.5, 0.499999;stroke-dashoffset:0;stroke-opacity:1"
-       d="M 5.1515865,4.076792 55.384893,4.240495 52.344704,35.835092 30.408558,50.170762 8.2151632,35.952024 Z"
-       id="path2442" />
-    <path
-       style="fill:#ffffff;fill-opacity:0;stroke:#ffffff;stroke-width:0.499999;stroke-miterlimit:4;stroke-dasharray:1.5, 0.499999;stroke-dashoffset:0;stroke-opacity:1"
-       d="m 7.1160173,24.118664 c 4.7707617,-0.420949 16.9782977,1.496711 20.7200717,3.648229 3.250097,1.868804 9.775382,8.138358 8.980257,11.41241 -0.977976,4.026972 -3.414369,5.706203 -6.594878,5.799749 -3.180507,0.09354 -6.361015,-2.666014 -6.127154,-6.969054 0.233861,-4.303041 6.828738,-10.196331 12.020448,-11.739813 5.191709,-1.543481 16.884751,-1.870887 16.884751,-1.870887"
-       id="path2840"
-       sodipodi:nodetypes="csssssc" />
-  </g>
 </svg>
--- a/docs/static/img/logo-white.svg
+++ b/docs/static/img/logo-white.svg
@ -1,69 +0,0 @@
-<svg
-   width ="55px"
-   height="55px"
-   viewBox="0 0 60 85"
-   version="1.1"
-   id="logo-white"
-   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
-   sodipodi:docname="pocketlang.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="2"
-     inkscape:cx="96.75"
-     inkscape:cy="171.25"
-     inkscape:window-width="1920"
-     inkscape:window-height="1001"
-     inkscape:window-x="-9"
-     inkscape:window-y="-9"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1"
-     inkscape:snap-text-baseline="true"
-     width="199mm" />
-  <defs
-     id="defs2" />
-  <g
-     inkscape:groupmode="layer"
-     id="layer1"
-     inkscape:label="gear"
-     style="display:inline">
-    <path
-       id="path7786"
-       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.115739;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
-       inkscape:transform-center-y="-1.9949254e-06"
-       d="m 34.643917,1.118321 a 8.9533033,8.9533033 0 0 0 -2.69906,1.0376614 l 0.02687,1.3332539 A 7.7433246,7.7433246 0 0 0 30.298448,5.0255765 L 29.02204,4.9186054 a 8.9533033,8.9533033 0 0 0 -1.188559,2.6308473 l 0.882634,0.8728154 a 7.7433246,7.7433246 0 0 0 -0.147796,1.4789789 7.7433246,7.7433246 0 0 0 0.07131,1.022678 l -0.922422,0.807701 a 8.9533033,8.9533033 0 0 0 1.052647,2.705262 l 1.25212,-0.02687 a 7.7433246,7.7433246 0 0 0 1.5813,1.633493 l -0.101287,1.278475 a 8.9533033,8.9533033 0 0 0 2.679424,1.205092 l 0.912607,-0.980818 a 7.7433246,7.7433246 0 0 0 1.217496,0.09819 7.7433246,7.7433246 0 0 0 0.801499,-0.04651 l 0.901756,1.094505 a 8.9533033,8.9533033 0 0 0 2.708878,-0.941544 l -0.02946,-1.467093 a 7.7433246,7.7433246 0 0 0 1.617988,-1.492417 l 1.557528,0.130741 a 8.9533033,8.9533033 0 0 0 1.16944,-2.446877 L 43.910528,11.359044 A 7.7433246,7.7433246 0 0 0 44.054705,9.901251 7.7433246,7.7433246 0 0 0 43.993215,8.927666 L 45.197278,7.8734641 A 8.9533033,8.9533033 0 0 0 44.211292,5.3774934 l -1.591117,0.034105 A 7.7433246,7.7433246 0 0 0 41.063163,3.788443 L 41.18357,2.2655384 A 8.9533033,8.9533033 0 0 0 38.591997,1.1803314 L 37.584305,2.2639879 A 7.7433246,7.7433246 0 0 0 36.311517,2.1580514 7.7433246,7.7433246 0 0 0 35.53637,2.2019754 Z m 1.798857,4.5098017 a 4.2080248,4.2080248 0 0 1 4.208012,4.2080123 4.2080248,4.2080248 0 0 1 -4.208012,4.20801 4.2080248,4.2080248 0 0 1 -4.208013,-4.20801 4.2080248,4.2080248 0 0 1 4.208013,-4.2080123 z" />
-    <path
-       id="path25778"
-       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.115739;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
-       inkscape:transform-center-y="-1.9949254e-06"
-       d="m 47.399493,19.594186 a 8.9533033,8.9533033 0 0 0 -2.69906,1.03766 l 0.02687,1.33325 a 7.7433246,7.7433246 0 0 0 -1.67328,1.53634 l -1.276409,-0.10697 a 8.9533033,8.9533033 0 0 0 -1.188558,2.63085 l 0.882634,0.87281 a 7.7433246,7.7433246 0 0 0 -0.147796,1.47898 7.7433246,7.7433246 0 0 0 0.07131,1.02268 l -0.922422,0.8077 a 8.9533033,8.9533033 0 0 0 1.052647,2.70526 l 1.25212,-0.0269 a 7.7433246,7.7433246 0 0 0 1.5813,1.63349 l -0.101287,1.27848 a 8.9533033,8.9533033 0 0 0 2.679424,1.20509 l 0.912607,-0.98082 a 7.7433246,7.7433246 0 0 0 1.217496,0.0982 7.7433246,7.7433246 0 0 0 0.801499,-0.0465 l 0.901756,1.09451 a 8.9533033,8.9533033 0 0 0 2.708878,-0.94155 l -0.02946,-1.46709 a 7.7433246,7.7433246 0 0 0 1.617988,-1.49242 l 1.557528,0.13074 a 8.9533033,8.9533033 0 0 0 1.16944,-2.44687 l -1.128615,-1.11622 a 7.7433246,7.7433246 0 0 0 0.144177,-1.45779 7.7433246,7.7433246 0 0 0 -0.0615,-0.97358 l 1.204061,-1.0542 a 8.9533033,8.9533033 0 0 0 -0.985986,-2.49597 l -1.591117,0.0341 a 7.7433246,7.7433246 0 0 0 -1.556999,-1.62314 l 0.120407,-1.52291 a 8.9533033,8.9533033 0 0 0 -2.591573,-1.0852 l -1.007692,1.08365 a 7.7433246,7.7433246 0 0 0 -1.272788,-0.10593 7.7433246,7.7433246 0 0 0 -0.775148,0.0439 z m 1.798857,4.5098 a 4.2080248,4.2080248 0 0 1 4.208012,4.20801 4.2080248,4.2080248 0 0 1 -4.208012,4.20801 4.2080248,4.2080248 0 0 1 -4.208013,-4.20801 4.2080248,4.2080248 0 0 1 4.208013,-4.20801 z" />
-    <path
-       id="path25860"
-       style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.233957;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.01214575"
-       inkscape:transform-center-y="2.7909511e-05"
-       d="m 16.864499,16.897796 a 18.098269,18.098269 0 0 0 -5.455899,2.09753 l 0.05432,2.69504 a 15.65241,15.65241 0 0 0 -3.3823803,3.10558 l -2.5801414,-0.21624 a 18.098269,18.098269 0 0 0 -2.4025611,5.31802 l 1.7841639,1.76431 a 15.65241,15.65241 0 0 0 -0.2987575,2.98962 15.65241,15.65241 0 0 0 0.1441486,2.06725 l -1.8645916,1.6327 a 18.098269,18.098269 0 0 0 2.1278282,5.46842 l 2.5310449,-0.0544 a 15.65241,15.65241 0 0 0 3.1964503,3.30195 l -0.204743,2.58433 a 18.098269,18.098269 0 0 0 5.416207,2.43598 l 1.84475,-1.98264 a 15.65241,15.65241 0 0 0 2.461055,0.1985 15.65241,15.65241 0 0 0 1.620156,-0.0939 l 1.822815,2.21245 a 18.098269,18.098269 0 0 0 5.475745,-1.90327 l -0.05955,-2.96557 a 15.65241,15.65241 0 0 0 3.270613,-3.01679 l 3.148397,0.26426 a 18.098269,18.098269 0 0 0 2.363915,-4.94612 l -2.281391,-2.25632 a 15.65241,15.65241 0 0 0 0.29144,-2.94678 15.65241,15.65241 0 0 0 -0.124316,-1.968 l 2.433898,-2.13099 a 18.098269,18.098269 0 0 0 -1.993081,-5.04535 l -3.216293,0.0689 a 15.65241,15.65241 0 0 0 -3.147329,-3.28104 l 0.243391,-3.07841 a 18.098269,18.098269 0 0 0 -5.238623,-2.19363 l -2.036956,2.1905 a 15.65241,15.65241 0 0 0 -2.572822,-0.21413 15.65241,15.65241 0 0 0 -1.566889,0.0888 z m 3.636222,9.11615 a 8.5061304,8.5061304 0 0 1 8.506105,8.50609 8.5061304,8.5061304 0 0 1 -8.506105,8.50611 8.5061304,8.5061304 0 0 1 -8.506106,-8.50611 8.5061304,8.5061304 0 0 1 8.506106,-8.50609 z"
-       inkscape:transform-center-x="-4.7871538e-06" />
-  </g>
-  <g
-     inkscape:groupmode="layer"
-     id="layer2"
-     inkscape:label="pocket"
-     style="display:inline">
-    <path
-       style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#02509b;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0"
-       d="M 2.1788564,32.895766 58.000619,32.958436 54.078933,68.971646 30.334364,83.826456 5.8464835,68.252946 Z"
-       id="path888"
-       sodipodi:nodetypes="cccccc" />
-  </g>
-</svg>
--- 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"
--- a/docs/markdown/template.html
+++ b/docs/markdown/template.html
@ -21,7 +21,7 @@
        <a href="{{ URL_POCKET_HOME }}">
          <div class="flex flac">
            {{ LOGO_WHITE }}
-            <h1>Pocketlang Docs</h1>
+            <h1 id="nav-title">Pocketlang Docs</h1>
          </div>
        </a>
        <!-- Toggle menu icon. -->
@ -32,7 +32,7 @@
      </div>
    </div>
    <!-- Generated navigation tree. -->
-    <div id="navtree">
+    <div id="navtree" class="space-bottom">
      <ul>
        {{ NAVIGATION_TREE }}
      </ul>
--- a/docs/templates/index.html
+++ b/docs/templates/index.html
@ -146,7 +146,8 @@ end
            <p>Run</p>
          </div>
        </div>
-        <div id="code-editor" class="editor language-ruby"></div>
+
+        <div id="code-editor" class="editor code language-ruby"></div>
      </div>
      
      <p class="code-area-label">output</p>