Updated template

Updated the template to use a 3 column layout on each card and link to the source on github.

Author: aefarrell

docs/make_docs.py

@@ -4,13 +4,13 @@
 from os import walk
 from os.path import abspath, dirname, isfile, join
 
-def format_date(value, format):
-    if format == "short":
+def format_date(value, fmt):
+    if fmt == "short":
         return value.strftime("%Y-%m-%d")
-    elif format == "long":
+    elif fmt == "long":
         return value.strftime("%B %d, %Y")
     else:
-        return value.strftime(format)
+        return value.strftime(fmt)
 
 def retrieve_cards(directory):
     cards = []
@@ -20,17 +20,21 @@ def retrieve_cards(directory):
                 with open(join(path, filename), 'r') as yml:
                     readme = yaml.safe_load(yml)
 
-                program = join(path,readme.get('program',None))
-                if isfile(program):
-                    with open(program, 'r') as bas:
+                program_file = readme.get('program',None)
+                program_full = join(path,program_file)
+                if isfile(program_full):
+                    with open(program_full, 'r') as bas:
                         readme['code'] = bas.read()
+                    
+                    relpath = path[len(root_dir):]
+                    readme['url'] = root_url+relpath+'/'+program_file
 
                 screenshot = join(path,readme.get('screenshot',None))
                 if isfile(screenshot):
                     with open(screenshot, 'rb') as bmp:
                         image = bmp.read()
 
-                    outfile = readme.get('program')+'.bmp'
+                    outfile = program_file+'.bmp'
                     with open(join(output_dir,'images',outfile), 'wb') as outbmp:
                         outbmp.write(image)
                         readme['screenshot'] = outfile
@@ -47,6 +51,7 @@ def retrieve_cards(directory):
 
 # walk the directory looking for 'read.me' files and associated '*.bas' files
 root_dir = dirname(script_dir)
+root_url='https://github.com/aefarrell/picomite_library/blob/main'
 categories = [ 'math', 'art', 'utils', 'toys' ]
 cards = { cat:retrieve_cards(join(root_dir,cat)) for cat in categories }
 

docs/templates/index.html

@@ -26,6 +26,7 @@ <h1> {{ category }} </h1>
 
           <div class="col-md-9">
             <div class="container">
+
             {% for card in cards[category] %}
             <div class="card border-success mb-3">
               <div class="card-header row m-0">
@@ -34,18 +35,27 @@ <h1> {{ category }} </h1>
               </div>
               <div class="card-body">
                 <div class="card-text">
-                    {% if card.screenshot %}<img src="images/{{ card.screenshot }}" class="d-block user-select-none" />{% endif %}
+                  <div class="row m-0">
+                    {% if card.screenshot %}
+                   <div class="col-md-5"><img src="images/{{ card.screenshot }}" class="d-block user-select-none" /></div>
+                   <div class="col-md-5 p-0">
+         {% else %}<div class="col-md-10 p-0">{% endif %}
                     <p>{{ card.description }}</p>
-                    <a href="{{ card.program }}.html"><button type="button" class="btn btn-success">Source Code</button></a>
-               </div>
+                   </div>
+                   <div class="col-md-2 p-0">
+                    <p class="text-end"><a href="{{ card.program }}.html"><button type="button" class="btn btn-success">Source</button></a></p>
+                    <p class="text-end"><a href="{{ card.url }}"><button type="button" class="btn btn-secondary">Github</button></a></p>
+                   </div>
+                  </div>
+                </div>
               </div>
-             </div>
-             {% endfor %}
-             </div>
             </div>
-            
+            {% endfor %}
+
+            </div>
           </div>
-        {% endif %}{% endfor %}
+      </div>
+      {% endif %}{% endfor %}
 
         <footer class="pt-3 mt-4 text-body-secondary border-top">
          <p>Made with <a href="https://getbootstrap.com/">Bootstrap</a> and <a href="https://bootswatch.com/vapor/">Bootswatch Vapor</a>, by <a href="https://github.com/aefarrell">Allan Farrell</a>.</p>

docs/templates/program.html

@@ -25,10 +25,21 @@
               </div>
               <div class="card-body">
                 <div class="card-text">
-                    {% if program.screenshot %}<img src="images/{{ program.screenshot }}" class="d-block user-select-none" />{% endif %}
+                  <div class="row m-0">
+                    {% if program.screenshot %}<div class="col-md-5"><img src="images/{{ program.screenshot }}" class="d-block user-select-none" /></div><div class="col-md-5 p-0">
+         {% else %}<div class="col-md-10 p-0">{% endif %}
                     <p>{{ program.description }}</p>
+                   </div>
+                   <div class="col-md-2 p-0">
+                    <p class="text-end"><a href="{{ program.url }}"><button type="button" class="btn btn-secondary">Github</button></a></p>
+                   </div>
+                  </div>
+                  <div class="row m-0">
+                    <div class="col-md-12 p-0">
                     <p><hr /></p>
                     <pre class="text-success">{{ program.code }}</pre>
+                    </div>
+                  </div>
                </div>
               </div>
              </div>