margin top about page

stat css

.gitignore

@@ -17,3 +17,5 @@ share/
 __pycache__/
 *.jpg
 *.jpeg
+secrets.py
+archive/*

README.md

@@ -1,5 +1,3 @@
-# Wiki to HTML pages script
-![](https://pzwiki.wdka.nl/mw-mediadesign/images/8/82/Workflow-wiki2html.svg)
 
 ## Depencencies
 * python3
@@ -20,7 +18,9 @@
     * Install:
         * Debian/Ubuntu: `sudo apt install pandoc`
         * Mac: `brew install pandoc`
-
+* [html5lib](https://github.com/html5lib/html5lib-python)
+    * Install:
+        * `pip3 install html5lib`
 
 ## login.txt
 `login.txt` is a local and individual file, ignored by git, where you place you itch wiki username and password, in separate lines.
@@ -31,7 +31,53 @@ myusername
 mypassword
 ```
 
+## Create archive from wiki:
+
+### on sandbox server
+`python dumpwiki.py`
+
+### locally on your own machine:
+create archive folder: `mkdir archive`
+
+run script outputting to archive folder and **displaying the images from the wiki**:
+
+`python3 dumpwiki.py --imgsrc remote`
+
+run script outputting to archive folder and **displaying the images from local ../archive/images**:
+* requires running `download_imgs.py`
+`python3 dumpwiki.py`
+
+
 
+### Categories and Templates:
+For each Wiki Category in [Category Publish](https://hub.xpub.nl/sandbox/itchwiki/index.php/Category:Publish) 
+there should be an HTML [jinja2 template](https://jinja.palletsprojects.com/en/2.11.x/) 
+, with the same name of the category this repository `templates/`
+ 
+If not the `templates/default.html` will be used to render the pages under that Category.
+
+**CSS/JS files** are stored in `static/`. See `templates/default.html` to see how it links to `static/archive.css`
+
+
+### run on server
+* script (repository) location: `/var/www/html/archive/0`
+* go there `cd /var/www/html/archive/0`
+* run script `python3 dumpwiki.py`
+
+### git pull most recent changes to archive:  
+
+**Allow your sandbox pi user to make `git pull` by:**
+* in the sandbox pi, creating one ssh-key pair: `ssh-keygen`
+* the content of the public ssh key need to be copied: `cat ~/.ssh/id_rsa.pub`
+* And added to the user's public ssh keys in the gitear user profile: https://git.xpub.nl/user/settings/keys
+* Your gitea user is now is associated the public ssh key you just generated in the sandbox pi 
+
+* **Now you are able to `git pull` from `/var/www/html/archive/0` when ever need.**
+
+
+---
+
+# query2html.py
 ## Run
 
 `cd special-issue-11-wiki2html/`
@@ -42,7 +88,7 @@ Run scripts together with `./run.sh`
 1 script at a time:
 
 `python3 download_imgs.py`
-* Downloads all images from wiki to `images/` directory
+* Downloads all images from wiki to `../archive/images/` directory
 * and stores each image's metadata to `images.json`
 
 `python3 query2html.py`
@@ -100,3 +146,5 @@ It is
 to convert pdfs to jpgs:
 convert -quality 100 -density 300 [name-of-pdf] %02d.jpg
 
+# Wiki to HTML pages script
+![](https://pzwiki.wdka.nl/mw-mediadesign/images/8/82/Workflow-wiki2html.svg)

download_imgs.py

@@ -6,9 +6,9 @@ from functions import update_json, remove_nonwords
 
 
 site = Site(host='hub.xpub.nl/sandbox', path='/itchwiki/')
-wd = os.path.dirname(os.path.abspath(__file__)) # working directory
-
-imgdir = os.path.join(wd, 'images')
+wd = os.path.dirname(os.path.abspath(__file__))  # working directory
+parent_d = os.path.dirname(wd) # parent directory
+imgdir = os.path.join(parent_d, 'archive/images')
 os.makedirs(imgdir, exist_ok=True) # create images/ dir
 
 imgsjson_fn = os.path.join(wd, 'images.json')

dumpwiki.py

@@ -0,0 +1,171 @@
+import os, json, sys
+from mwclient import Site
+from jinja2 import Template
+from shutil import copy
+import html5lib
+from functions import Colors
+import argparse
+from xml.etree import ElementTree as ET
+from urllib.parse import quote as urlquote, unquote as urlunquote
+
+
+NS_MAIN = 0
+NS_CATEGORY = 14
+
+p = argparse.ArgumentParser(description="Dump wiki files to html",
+                            formatter_class=argparse.ArgumentDefaultsHelpFormatter)
+p.add_argument("--host",  metavar='', default="hub.xpub.nl/sandbox", help='wiki host')
+p.add_argument("--path", metavar='', default="/itchwiki/", help="Wiki path. Should end with /")
+p.add_argument("--output", default="../archive", help="Output path for pages")
+p.add_argument("--one", default=False, action="store_true", help="Output one page from each category only")
+p.add_argument("--skipimages", default=False, action="store_true", help="Don't do images (for testing)")
+p.add_argument("--imgsrc", default='archive',
+               choices=['archive', 'remote'],
+               help="What is the source of the images?")
+
+args = p.parse_args()
+print(args)
+# site and login
+
+site = Site(host=args.host, path=args.path)
+wd = os.path.dirname(os.path.abspath(__file__))  # working directory
+wd_name = os.path.split(wd)[-1] # name of dir running script
+
+# copy static/ to ../archive/static
+repo_static_path = './static'
+archive_static_path = os.path.join(args.output, repo_static_path)
+os.makedirs(archive_static_path, exist_ok=True) # create static/ dir in archive
+for static_file in os.listdir(path='./static'):
+    copy(src=os.path.join(repo_static_path, static_file),
+         dst=os.path.join(archive_static_path, static_file))
+
+
+with open('login.txt', 'r') as login:  # read login user & pwd
+    loginlines = login.read()
+    user, pwd = loginlines.split('\n')
+    site.login(username=user, password=pwd)  # login to wiki
+
+if not args.skipimages:
+    imgsjson_fn = os.path.join(wd, 'images.json') # read images.json file
+    with open(imgsjson_fn, 'r') as imgsjson_file:
+        images_info = json.load(imgsjson_file)
+
+
+SLASH = "\u2044"
+
+
+def filenameforpage(p):
+    f = p.name.replace(' ','_').replace('/', SLASH) + '.html'
+    return f
+
+def filenameforlink(href):
+    href = urlunquote(href)
+    if href.startswith("/sandbox/itchwiki/index.php/"):
+        href = href[len("/sandbox/itchwiki/index.php/"):]
+        href = href.replace(' ','_').replace('/', SLASH) + '.html'
+    href = urlquote(href)
+    return href
+
+
+def rewriteimglinks(tree, page):
+    # invoke after img src has been rewritten
+    # To: remove links to wiki File on all pages
+    # but Overview_main_page page where link to publication page is added
+    if page.name == 'Overview main page':
+        for div_parent in tree.findall(".//div[@class='tooltip']"):
+            anchor_of_img = div_parent.find(".//div/a")
+            if anchor_of_img.find(".//img") is not None: # <a> needs child <img>
+                a_tag = div_parent.find(".//p/span/a")
+                publication_href = a_tag.attrib.get('href')
+                anchor_of_img.attrib['href'] = publication_href
+    else:
+        for a in tree.findall(".//a[@class='image']"):  # select img wrapping a
+            if a.findall(".//img"):  # ensure a has child: img
+                a.attrib['href'] = 'javascript:void(0);'  # disable href
+    return tree
+
+def rewritelinks(html):
+    t = html5lib.parseFragment(html, treebuilder = "etree", namespaceHTMLElements = False)
+    for a in t.findall(".//*[@href]"):
+        linkclass = a.attrib.get("class", "")
+        href = a.attrib.get("href")
+        if "external" in linkclass:
+            # leave external links alone
+            continue
+        # print ("LINK", href)
+        if href.startswith("/sandbox/itchwiki/index.php/"):
+            new_href = filenameforlink(href)
+            a.attrib['href'] = new_href
+    html = ET.tostring(t, method="html", encoding="unicode")
+    return html
+
+
+def rewriteimgs(html, page):
+    t = html5lib.parseFragment(html, treebuilder = "etree", namespaceHTMLElements = False)
+
+    # replace images url with local image in ../images
+    for img in t.findall(".//img[@src]"):
+        # imgsrc can be:
+            # remote: url remains
+            # archive f' images/{img_filename}'
+            # local: f'../../images/{img_filename}'
+
+        if args.imgsrc == 'remote':
+            src = img.attrib.get("src")
+            if not src.startswith('http'):
+                img.attrib['src'] = 'https://hub.xpub.nl' + src
+        else:  # local / archive imgsrc
+            img_alt = img.attrib.get("alt")  # alt property has filename
+            img_page = f'File:{img_alt}' # find image it images.json
+            try:
+                # get its filename
+                img_filename = images_info[img_page]['filename']
+            except KeyError:
+                print(Colors.WARNING, f"{img_page} is not is missing from the local downloaded images")
+                print(Colors.GREEN, 'run python3 download_imgs.py to fix the issue', Colors.ENDC)
+                sys.exit()
+            # same dir as HTML files: archive/
+            img.attrib['src'] = f'./images/{img_filename}'
+
+        img.attrib['srcset'] = ""  # rm srcset value:it prevent imgs displaying
+        img.attrib['width'] = ""
+        img.attrib['height'] = ""
+
+    t = rewriteimglinks(tree=t, page=page)
+
+    html = ET.tostring(t, method="html", encoding="unicode")
+    return html
+
+def dumppage(p, template, rewrite_images=True):
+    htmlsrc = site.parse(page=p.name)['text']['*']
+    htmlsrc = rewritelinks(htmlsrc)
+    if rewrite_images:
+        htmlsrc = rewriteimgs(html=htmlsrc, page=p)
+    html = template.render(page=p, body=htmlsrc, staticpath='.')
+    with open(os.path.join(args.output, filenameforpage(p)), 'w') as f:
+        f.write(html)
+        # print(html, file=f)
+
+publish=site.Categories['Publish']
+for cat in publish.members():
+    if cat.namespace == NS_CATEGORY:
+        print('dumping category {}'.format(cat.page_title))
+        # title=site.Categories['Title']
+        try:
+            with open('templates/{}.html'.format(cat.page_title.lower())) as templatefile:
+                template = Template(templatefile.read())
+        except FileNotFoundError:
+            with open('templates/default.html') as templatefile:
+                template = Template(templatefile.read())
+        for p in cat.members():
+            print(p)
+            dumppage(p, template, rewrite_images=not args.skipimages)
+            if args.one:
+                break
+    else:
+        print("Dumping page {}".format(cat.page_title))
+        with open('templates/default.html') as templatefile:
+            template = Template(templatefile.read())
+        dumppage(cat, template, rewrite_images=not args.skipimages)
+
+

images2html.py

@@ -1,76 +0,0 @@
-import os, json
-from mwclient import Site
-from pprint import pprint
-from jinja2 import Template
-from functions import pandoc, page_props
-
-site = Site(host='hub.xpub.nl/sandbox', path='/itchwiki/')
-wd = os.path.dirname(os.path.abspath(__file__)) # working directory
-imgdir = os.path.join(wd, 'images')
-imgsjson_fn = os.path.join(wd, 'images.json')
-with open(imgsjson_fn, 'r') as imgsjson_file:
-    images_info = json.load(imgsjson_file)
-
-static_html = os.path.join(wd, 'static_html')
-os.makedirs(static_html, exist_ok=True) # create images/ dir
-
-with open(os.path.join(wd, 'login.txt'), 'r') as login:  # read login user & pwd
-    loginlines = login.read()
-    user, pwd = loginlines.split('\n')
-    site.login(username=user, password=pwd)  # login to wiki
-
-
-page_html_template = '''
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="../static/style.css" />
-    <title>{{title}}</title>
-</head>
-<body>
-    <h1>{{ title }}</h1>
-    <p><time datetime="{{date}}">{{date}}</time></p>
-    <div id="img">
-        <img src="{{ imgsrc }}" />
-    </div>
-    <div id="content">
-        {{ content }}
-    </div>
-    <footer>
-        Part {{part}} of {{partof}}
-    </footer>
-</body>
-</html>
-'''
-page_template = Template(page_html_template)
-
-
-for img_info in images_info.values():
-    print(img_info)
-    page_name = img_info['name']
-    page = site.pages[page_name]
-    # print(page)
-    # pprint(page.__dict__)
-    # print(dir(page))
-    pagetext = page.text()
-    pageproperties = page_props(wikicontent=pagetext)
-    print(pageproperties)
-
-    if pageproperties.get('Title'):
-        pagetext_html = pandoc(pwd=wd ,content=pagetext, format_in='mediawiki', format_out='html')
-        # print('pagetext', pagetext)
-        # print('pagetext_html', pagetext_html)
-        page_html = page_template.render(title=pageproperties.get('Title'),
-                                         date=pageproperties.get('Date'),
-                                         imgsrc=os.path.join(imgdir, img_info.get('filename')),
-                                         content=pagetext_html,
-                                         part=pageproperties.get('Part'),
-                                         partof=pageproperties.get('Partof'))
-        htmlpage_fn = "{}_{}.html".format(
-            pageproperties.get('Title').replace(" ", ""),
-            pageproperties.get('Part').zfill(3)
-        )
-        print(htmlpage_fn)
-        with open(os.path.join(static_html, htmlpage_fn), 'w') as htmlfile:
-            htmlfile.write(page_html)

query2html.py

@@ -2,7 +2,7 @@ import os, json, sys, urllib
 from mwclient import Site
 from pprint import pprint
 from jinja2 import Template
-from functions import pandoc, unpack_response, clean_dir, remove_nonwords
+from functions import unpack_response, clean_dir, remove_nonwords
 
 from functions import Colors
 import argparse
@@ -54,7 +54,6 @@ if args.dry is True:
 site = Site(host=args.host, path=args.path)
 
 wd = os.path.dirname(os.path.abspath(__file__))  # working directory
-imgdir = os.path.join(wd, 'images')
 imgsjson_fn = os.path.join(wd, 'images.json')
 with open(imgsjson_fn, 'r') as imgsjson_file:
     images_info = json.load(imgsjson_file)
@@ -74,11 +73,10 @@ with open(os.path.join(wd, 'templates/index.html')) as document_html:
 with open(os.path.join(wd, 'templates/document.html')) as document_html:
     document_template = Template(document_html.read())
 
-with open(os.path.join(wd, 'templates/document_part.html')) as document_html:
-    document_part_template = Template(document_html.read())
-
 all_document_parts = ''  # to append all content
 documentslist = []
+doc_imgs = []
+
 for answer in site.ask(query):
     # publication_title = ''
     # print(answer, answer.keys())
@@ -91,37 +89,42 @@ for answer in site.ask(query):
         print(Colors.GREEN, 'run python3 download_imgs.py to fix the issue', Colors.ENDC)
         sys.exit()
 
-    page = site.pages[[printout_dict['page']]]  # request that page from wiki
-    pagetext = page.text()
-    pagetext_html = pandoc(pwd=wd, content=pagetext, format_in='mediawiki', format_out='html')
-    img_local = os.path.join(imgdir, img_info.get('filename'))
+    img_local = os.path.join('../images', img_info.get('filename'))
 
-    # Todo: Create list of all images from document
-    # TODO: join document_part + document
     # TODO: look into the template structure of images : columns and rows
 
+    doc_imgs.append(img_local)
 
-    # RENDER document part
-    document_part_html = document_part_template.render(
-        printout_dict=printout_dict,
-        imgsrc=os.path.join(imgdir, img_info.get('filename')),
-        text=pagetext_html,
-        fullurl=fullurl,)
-    all_document_parts += document_part_html  # append resulting html from document part to the previous parts
-
+    # on last File(Part) of Document
     if printout_dict['Part'] == printout_dict['Partof']:
+        print(doc_imgs)
+
+        # organize doc_imgs into a matrix (list of lists)
+        # each sublist containing 4 items [[0,1,2,3][4,5,6,7],[8,9]]
+        # for template
+        doc_imgs_matrix = [doc_imgs[i:i+100] for i in range(0, len(doc_imgs), 100)]
+
+        
+      
+
         # RENDER DOCUMENT
         # by passing all_document_parts html to document_template content
         document_html = document_template.render(
             title=printout_dict.get('Title'),
             date=printout_dict.get('Date'),
+            organization=printout_dict.get('Organization'),
+            creator=printout_dict.get('Creator'),
+            format=printout_dict.get('Format'),
+            topic=printout_dict.get('Topic'),
+            imgsmatrix=doc_imgs_matrix,
             content=all_document_parts)  # render document template
+        # print(document_html)
+
         htmlpage_fn = "{}.html".format(
             remove_nonwords(printout_dict.get('Title')[0])
         )
         with open(os.path.join(static_html, htmlpage_fn), 'w') as htmlfile:
             htmlfile.write(document_html)
-        all_document_parts = ''  # Reset all_document_parts
 
         # add info to documentslist for index creation
         documentslist.append({'file': htmlpage_fn,
@@ -130,6 +133,11 @@ for answer in site.ask(query):
                               'creator': printout_dict.get('Creator')
                               })
 
+        # reset document_images list
+        doc_imgs = []
+
+
+
 # RENDER index.html from documentslist
 index_html = index_template.render(index='Index',
                                    query=query,

static/about.css

@@ -0,0 +1,148 @@
+body {
+    background-color: #F4EBE8;
+    font-family: Roboto Mono;
+}
+
+
+.projtextcont{
+display: inline-block;
+	/*align-items: center;
+  justify-content: center*/
+  color:#371F10;
+  margin-left:200px;
+  margin-bottom: 100px;
+  margin-top:60px;
+}
+
+.projtext{
+	width: 80%;
+	display: inline-block;
+  text-align: justify;
+}
+
+h1{
+  font-size:50px;
+  display: block;
+  width:65%;
+  text-align: left;
+  background-color: transparent;
+  right:auto;
+  position: relative;
+  padding: 0px;
+  top:0%;
+  z-index: 0;
+  margin-bottom:15px;
+  /*margin-top: 50px;*/
+}
+
+h2{
+  font-size:23px;
+  display: block;
+  width:65%;
+  text-align: left;
+}
+
+.img1{
+  display: inline-block;
+  width:80%;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  right: 0%;
+  align-content: right;
+}
+
+.img1 img{
+  margin-top: 20px;
+  width: 60%;
+  float:right;
+}
+
+.img2{
+  display: inline-block;
+  width:100%;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  right: 0%;
+  align-content: right;
+}
+
+.img2 img{
+  margin: 20px;
+  margin-left: 0px;
+  width: 45%;
+  float:left;
+}
+
+.img3{
+  display: flex;
+  width:100%;
+  margin-top: 0px;
+  margin-bottom: 20px;
+  right: 0%;
+  align-content: right;
+}
+
+.img3 img{
+  margin: 50px;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  width: 55%;
+  right: 0px;
+  float: right;
+  
+}
+/*.pagelink{
+  position: fixed;
+  display: inline;
+  left:0px;
+  width:20px;
+  height:20px;
+  padding:10px;
+  background-color: white;
+  z-index: 10;
+  font-size: 18px;
+  text-align: center;
+  border-top-style: solid;
+  border-right-style: solid;
+  border-bottom-style: solid;
+  /*border-style: solid;
+  border-width: 1px;
+  border-color: #371F10;
+  
+}
+
+.pagelink:hover{
+  background-color: #0BEFEB;
+}
+
+.pagelink{
+  background-color: white;
+}
+
+.pagelink a{
+  text-decoration: none;
+}
+
+/*.pagelink a:active{
+  background-color: #0BEFEB;
+}
+
+.active .pagelink:after{
+  background-color: #0BEFEB;
+}
+
+
+.pagelink .pagename{
+  display: inline;
+  position: absolute;
+  width: auto;
+  padding: 5px;
+  margin-left: 25px;
+  font-size: 13px;
+  background-color: white;
+  visibility: hidden;
+}
+
+.pagelink:hover .pagename{
+  visibility: visible;
+}*/

static/archive.css

@@ -0,0 +1,163 @@
+body {
+    background-color: #aaa4a0;
+    color: #371F10;
+    font-family: Roboto Mono, monospace;
+}
+/*.pagelink{
+  position: fixed;
+  display: inline;
+  left:0px;
+/*  width:20px;
+  height:20px;
+  padding: 0px 5px 0px 5px;
+  background-color: white;
+  z-index: 10;
+  font-size: 30px;
+  text-align: center;
+  border-top-style: solid;
+  border-right-style: solid;
+  border-bottom-style: solid;
+  /*border-style: solid;
+  border-width: 1px;
+  border-color: #371F10;
+
+}*/
+
+/*.pagelink:hover{
+  background-color: #0BEFEB;
+}
+.pagelink a{
+  text-decoration: none;
+}
+
+.pagelink .pagename{
+  display: inline;
+  position: absolute;
+  width: auto;
+  padding: 5px;
+  margin-left: 25px;
+  font-size: 13px;
+  background-color: white;
+  visibility: hidden;
+}
+
+.pagelink:hover .pagename{
+  visibility: visible;
+}*/
+
+.linkscont{
+  margin-top: 10%;
+  height: 100vh;
+  width: auto;
+  position: fixed;
+  left:0%;
+  z-index: 10;
+}
+
+.pagelink{
+  text-align:center;
+  vertical-align:middle;
+  display: block;
+  /*justify-content: center;*/
+  align-items: center;
+  position: fixed;
+  /*text-align: left;*/
+  /*display: block;*/
+  left:0px;
+  width:36px;
+  height:36px;
+  padding-top: 2px;
+  background-color: white;
+  z-index: 2; 
+  /*text-align: justify;*/
+  border-top-style: solid;
+  border-right-style: solid;
+  border-bottom-style: solid;
+  /*border-style: solid;*/
+  border-width: 1px;
+  border-color: #371F10;
+  
+}
+
+.icon{
+  text-align:center;
+  vertical-align:middle;
+ /* display: block;*/
+  /*justify-content: center;*/
+  align-items: center; 
+font-size: 24px;
+width: 100%;
+height: 100%;
+vertical-align:middle;
+}
+
+.active, .pagelink:hover{
+  background-color: #0BEFEB;
+}
+
+.pagelink{
+  background-color: white;
+}
+
+.pagelink a{
+  text-decoration: none;
+}
+
+/*.pagelink a:active{
+  background-color: #0BEFEB;
+}
+
+.active .pagelink:after{
+  background-color: #0BEFEB;
+}*/
+.mw-selflink{
+  /*width: 120%;
+  height: 120%;
+  background-color: #0BEFEB;*/
+  color:blue;
+
+}
+
+.pagelink .pagename{
+  display: inline-block;
+  position: relative;
+  width: auto;
+  padding: 5px;
+  margin-left: 20px;
+  font-size: 12px;
+  background-color: white;
+  visibility: hidden;
+  white-space: nowrap;
+}
+
+.pagelink:hover .pagename{
+  visibility: visible;
+  position: absolute;
+  z-index: 20;
+}
+
+h1 {
+	position: fixed;
+	right:0%;
+	bottom: 83%;
+	text-align: right;
+	background-color: rgba(11,239,235,0.7);
+  color: #371F10;
+	padding: 3px 35px 3px 10px;
+	z-index: 10;
+	font-size: 28px;
+  max-width: 93%;
+}
+
+a, a:visited{
+    color:#371F10;
+    text-decoration: underline;
+}
+
+a:hover {
+	text-decoration: none;
+  	color: blue;
+}
+
+a.image {cursor: default!important;} /* KEEP THIS: it is important to avoid images to seeming like links */
+

static/index.css

@@ -0,0 +1,239 @@
+body {
+    background: white;
+    height: 100vh;
+}
+
+/*.img {
+        display: inline;
+}
+
+
+.thumb{
+        display: inline;
+}*/
+
+h1{
+  font-size: 20px;
+  margin-left: 20px;
+}
+
+.thumbborder {
+/*margin-bottom: 15px;*/
+/*border : 20px solid blue;*/
+width: 100%;
+height: 100%;
+display: inline-block;
+text-align: left;
+position: relative;
+display: inline-block;
+}
+
+.title{
+    margin-top: 15px;
+    line-height: 1.3;
+}
+    
+.linkscont{
+position-top:0px;
+}
+
+/*.pagelink{
+  position: fixed;
+  display: inline;
+  left:0px;
+  width:20px;
+  height:20px;
+  padding:10px;
+  background-color: white;
+  z-index: 10;
+  font-size: 18px;
+  text-align: center;
+  border-top-style: solid;
+  border-right-style: solid;
+  border-bottom-style: solid;
+  /*border-style: solid;
+  border-width: 1px;
+  border-color: #371F10;
+  
+}
+
+.pagelink:hover{
+  background-color: #0BEFEB;
+}
+.pagelink a{
+  text-decoration: none;
+}
+
+.pagelink .pagename{
+  display: inline;
+  position: absolute;
+  width: auto;
+  padding: 5px;
+  margin-left: 25px;
+  font-size: 13px;
+  background-color: white;
+  visibility: hidden;
+}
+
+.pagelink:hover .pagename{
+  visibility: visible;
+}*/
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  width: 70px;
+  margin: 16px;
+  vertical-align: top;
+}
+
+.tooltip .tooltiptext {
+  display: block;
+  visibility: hidden;
+  width: 400%;
+  height: auto;
+  /*min-height: 100%;*/
+  background-color: #0BEFEB;
+  /*opacity: 80%;*/
+  color: black;
+  text-align: left;
+  padding: 10px;
+  /*border-radius: 6px;*/
+/*  font-family: CothamSans;*/
+  font-size: 16px; 
+  position: absolute;
+  /*top: 0px;*/
+  z-index: 1;
+  margin-top:-10px;
+  /*vertical-align: top;*/
+  line-height: 1.3;
+  word-wrap: break-word;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+
+
+ul#menu li{
+    display: inline;
+    list-style: none;
+/*    margin-left: 10%
+    margin-right: 10%;*/
+    align-content: initial; 
+
+}
+
+ul#menu{
+    margin-left: 45px;
+    margin-right: 10px;
+    top:-15px;
+    bottom: 10px;
+    padding-left: 0px;
+    border: none;
+    width: 80vw;
+    height:100%;
+    left:0px;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    position: absolute;
+    scrollbar-width: thin;
+}
+
+
+div#myBtnContainer{
+ /*background-color: #F4EBE8;*/
+   /*margin-top: 20px;*/
+   margin-left: 30px;
+   margin-bottom: 30px;
+    border: none;
+    max-width: 15vw;
+    display: inline;
+   /* visibility: hidden;*/
+    height:100%;
+    right:0px;
+    top:0px;
+    position: fixed;
+    padding:10px;
+    overflow-y: hidden;
+    /*z-index: -1;*/
+overflow-y: scroll;
+  scrollbar-width: thin;
+   /* overflow-y: hidden;*/
+}
+
+div#myBtnContainer:hover{
+  
+}
+
+/*div#bigbtncontainer{
+  overflow-y: hidden;
+  -ms-overflow-style: none;   Internet Explorer 10+ 
+  scrollbar-width: thin;
+  /*overflow-y: scroll;
+  
+}*/
+/*div#myBtnContainer:hover{
+  background-color: white;
+  z-index: 1;
+}*/
+
+
+.filter {
+    display: inline-block;
+    box-shadow: 8px 8px 8px #C4BCB9;
+}
+
+.show {
+display: inline-block;
+/*box-shadow: 8px 8px 8px #303E88;*/
+box-shadow: 10px 10px 15px #0BEFEB;
+}
+
+
+
+/* Style the buttons */
+.btn {
+  border: none;
+  outline: none;
+  font-family: Roboto Mono;
+  font-size: 18px;
+  text-align: left;
+  display: block;
+  /*padding: 4px 6px;*/
+  /*text-shadow: 2px 2px 2px #9D9C9C;*/
+  /*background-color: blue;*/
+  cursor: pointer;
+  margin: 8px 2px 8px 2px;
+  padding: 4px;
+  color: #371F10;
+  background-color: transparent;
+}
+
+.btn:hover {
+  background-color: #F4EBE8;
+}
+
+.btn.active {
+  background-color: #0BEFEB;
+  color: white;
+}
+
+.mw-parser-output{
+  display: inline;
+}
+
+::-webkit-scrollbar {
+    display: none;
+}
+
+.line{
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 80vw;
+  height: 2px;
+  background-color: #0BEFEB;
+}
+
+a.image {cursor: pointer!important;} /* KEEP THIS: show imgs as link in Overview */

static/orgs.css

@@ -0,0 +1,107 @@
+
+#top {
+	padding-top: 25px;
+	padding-left: 50px;
+}
+
+body {
+	background-color: #F4EBE8;
+	font-family: Roboto Mono;
+}
+
+/* Organizations list */
+.collapsible{
+	font-size:14px;
+	padding-left: 70px;
+    line-height: 1;
+	color: #371F10;
+}
+
+.active, .collapsible:hover {
+	color: blue;
+	cursor: pointer;
+}
+
+.active, .collapsible:after {
+	padding-top: 10px;
+	padding-left: 85px;
+	color: #371F10;
+	font-weight: bold;
+	background-color: transparent;
+}
+
+/* Droped-down publication links */
+.content {
+	max-height: 0;
+   	overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    padding-left: 50px;
+    background-color: #371F10;
+    position: relative;
+    line-height: 30px;
+    margin-left: 85px;
+    color: white;
+    font-size: 14px;
+}
+
+.content a {
+	color:white;
+	text-decoration: none;
+}
+
+.content a:hover {
+	color: blue;
+	cursor: pointer;
+}
+
+/* Scroll buttons */
+.scrl {
+	position: fixed;
+	background-color: white;
+	color:#371F10;
+	cursor: pointer;
+	border:none;
+	border-right:1px solid #D1C8C8;
+	font-size: 25px;
+	width: 50px;
+	height: 50px;
+	font-weight: bold;
+	z-index: 10;
+	bottom: 0%;
+}
+
+.scrl:hover {
+	color: #0BEFEB;
+}
+
+button.down span, button.up span { 
+	position:relative; left: 30%;
+	position:relative; bottom: 65%;
+}
+
+.up {
+	right: 53px; 
+}
+
+.down {
+	right: 0%; 
+}
+
+button.bottom span, button.top span { 
+	position:relative; left: 15%;
+	position:relative; bottom: 65%;
+}
+
+.top {
+	right: 159px; 
+}
+
+.bottom {
+	right: 106px;
+}
+
+/* Scroll button title */
+.scbt {
+	visibility: hidden;
+}
+

static/stats.css

@@ -0,0 +1,50 @@
+body {
+	background-color: #F4EBE8;
+	font-family: Roboto Mono, monospace;
+	font-size:20px;
+
+}
+
+#statbody {
+  display: flex;
+	margin: 120px;
+	float: left
+}
+
+.statcontainer {
+  display: inline-block;
+  width: 50%;
+	min-height: 900px;
+	padding: 20px;
+	align-items: center;
+
+}
+
+.counter {
+  display: flex;
+	width: 100%
+}
+
+.box {
+  display: inline-block;
+  width: 40%;
+	text-align: center;
+	padding: 20px;
+
+}
+
+.number {
+  font-size: 72px;
+}
+
+#graphs {
+  width: 100%;
+}
+
+.image{
+  display: inline-block;
+  width: 100%;
+}
+#counter {
+  display: inline-block;
+}

static/style.css

@@ -1,14 +1,196 @@
-body{font-size: 12pt;}
 
-div.part {border: 1px solid #e5e5e5;
-          margin-bottom: 10px;
-          margin-top: 10px;
-          padding: 20px;}
 
-div#content img {width: 50%;}
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: #aaa4a0;
+}
 
+/*div.row {display: inline; }
+div.column { display: inline; }
+div.column img{ width:24%; }*/
 
-div.metadata span.key {color: red;
-                       font-weight: bold;}
+.grid-container {
+  	display: grid;
+  	grid-template-columns: repeat(4, 1fr);
+  	grid-gap: 10px;
+  	position: absolute;
+  	top: 60%;
+	width: 96%;
+	height: auto;
+	left:2%;
+  	/*background-color: blue;*/
+  	text-align: : center;
+  	z-index: 5;
 
-#orc {color:blue;}
+}
+
+.grid-container > div {
+	position: relative;
+	/*background-color: green;*/
+	text-align: center;
+	/*padding-bottom: 1%;*/
+	z-index: 5;
+}
+
+img {
+	position: relative;
+	max-width: 100%;
+	max-height: 100%;
+
+	/*align-content: center;*/
+
+}
+
+/*links*/
+
+a:link {
+  text-decoration: none;
+  color: black;
+}
+
+a:visited {
+  text-decoration: none;
+  color: blue;
+}
+
+a:hover {
+	text-decoration: none;
+  	color: blue;
+}
+
+h1 {
+	position: fixed;
+	right:0%;
+	top:3%;
+	text-align: right;
+	background-color: grey;
+	padding: 3px 30px 3px 10px;
+	z-index: 10;
+	color: black;
+	font-size: 28px;
+}
+
+h2{
+	position: fixed;
+	right: 0%;
+	top: 15%;
+	text-align: left;
+	background-color: grey;
+	color: black;
+	padding: 3px 3px 3px 30px;
+	z-index: 10;
+	font-size: 20px;
+}
+
+.indexlist {
+  position: absolute;
+  top:20%;
+}
+
+
+/* Grid buttons */
+
+.header {
+	
+	position: absolute;
+  	text-align: center;
+  	padding: 32px;
+  	top: 30%;
+  	right: 0%;
+  	z-index: 9;
+  	width: auto;
+  	height: auto;
+}
+
+p {
+	display: inline-block;
+	position: relative;
+}
+
+.btn {
+  border: none;
+  outline: none;
+  width: 110px;
+  text-align: center;
+  padding: 12px 0px;
+  background-color: grey;
+  cursor: pointer;
+  font-size: 18px;
+  margin-right: 5px;
+  z-index: 9;
+}
+
+.btn:hover {
+  background-color: black;
+  color: blue;
+}
+
+.btn:active {
+  background-color: black;
+  color: white;
+}
+
+
+.metadata{
+	position: fixed;
+	top:5%;
+	left:0%;
+	background-color: ;
+	width: 40%;
+	z-index: 10;
+	opacity: 0.7;
+}
+
+.collapsible {
+  background-color: #777;
+  color: white;
+  cursor: pointer;
+  padding: 18px;
+  width: 10%;
+  height: auto;
+  border: none;
+  text-align: right;
+  outline: none;
+  font-size: 15px;
+  z-index: 10;
+  margin-top: 10px;
+}
+
+.active, .collapsible:hover {
+  background-color: #555;
+}
+
+.content {
+  position: relative;
+  padding: 0px 18px;
+  max-height: 0;
+  overflow: hidden;
+  width: 90%;
+  transition: max-height 0.2s ease-out;
+  background-color: grey;
+  color: white;
+  z-index: 10;
+  text-align: right;
+}
+
+.metadata_links {
+	display: block;
+	width: 100%;
+	position: relative;
+	right: 0%;
+	padding: 10px;
+	text-align: left;
+	/*background-color: blue;*/
+	font-size: 18px;
+}
+
+.metadata_organization {
+	font-size: 14px;
+}
+
+
+
+
+.fbtn {
+	font-style: italic;
+}

static/timeline.css

@@ -0,0 +1,97 @@
+body{ 
+	width: max-content;
+	background-color: #F4EBE8;
+}
+
+.pagetitle {
+	position: fixed;
+	right:0%;
+	top:5%;
+	text-align: right;
+	background-color: rgba(11,239,235,0.7);
+    color: #371F10;
+	padding: 3px 35px 3px 10px;
+	z-index: 10;
+	font-size: 28px;
+}
+
+.eventdate {
+	margin-top: 1%;
+}
+
+h2 {
+	font-size: 17px;
+	color: #371F10;
+	background-color: #0BEFEB;
+	padding: 5px;
+}
+
+div#body{ width: max-content;}
+
+.mw-parser-output{
+	/*! position: left top; */
+	/*! display: hidden; */
+	/*! display: inline; */
+	/*! vertical-align: top; */
+}
+
+.mw-parser-output > p{
+display: inline-block;
+}
+
+.content {
+	display: flex;
+	margin-right: 10vw;
+	margin-left: 5vw;
+}
+
+.indexlink {
+	position: fixed;
+	font-size: 20px;
+	bottom: 0%;
+	right: 3%;
+	background-color: transparent;
+	border: none;
+	border-right-color: transparent;
+	z-index: 10;
+	padding: 0px 30px 20px 10px
+	border: none;
+}
+
+.indexlink a {
+	text-decoration: none;
+}
+
+.event {
+	margin-top: 3%;
+	text-align-last: auto;
+	font-family: Roboto Mono;
+	font-size: 10px;
+	color: #371F10;
+	padding-left: 5vw;
+	display: inline-block;
+	width:200px;
+	vertical-align: top;
+}
+
+.eventfirstpages {
+	padding-bottom: 5vh;
+}
+
+.pubpageinfo {
+	font-size: 15px;
+	color: #371F10;
+}
+
+.thumbborder {
+	box-shadow: 10px 10px 15px #C4BCB9;
+	width: 40%;
+	height: auto;
+}
+
+.thumbborder:hover {
+	box-shadow: 10px 10px 15px #0BEFEB;
+	width:100%; 
+	transition:0.5s;
+	height: auto;
+}

static/title.css

@@ -0,0 +1,355 @@
+body {
+    background-color: #F4EBE8;
+    font-family: Roboto Mono;
+}
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 10px;
+    position: absolute;
+    top: 25%;
+    width: 82%;
+    height: auto;
+    left: 7%;
+    text-align: : center;
+    z-index: 5;
+    padding-bottom: 5%;
+
+}
+
+.grid-container > div {
+  position: relative;
+  text-align: center;
+  z-index: 5;
+
+}
+
+.thumbborder {
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+
+}
+
+
+/*links*/
+
+a:link {
+  text-decoration: ;
+  color: #371F10;
+}
+
+a:visited {
+  text-decoration: none;
+  color: #371F10;
+}
+
+a:hover {
+  text-decoration: none;
+    color: blue;
+}
+
+
+h1 {
+/*  position: fixed;
+  right:0%;
+  bottom:83%;
+  text-align: right;
+  background-color: rgba(11,239,235,0.7);
+  padding: 3px 35px 3px 10px;
+  z-index: 10;*/
+/*  font-size: ;*/
+/*  color: #371F10;
+  max-width: 90%;*/
+}
+
+h2{
+  position: fixed;
+  right: 0%;
+  top: 15%;
+  text-align: left;
+  background-color: rgba(11,239,235,0.7);
+  padding: 3px 35px 3px 10px;
+  z-index: 10;
+  font-size: 20px;
+  color: #371F10;
+}
+
+/*.viewnav {
+  position: fixed;
+  bottom: 1%;
+  right: 1%;
+  background-color: transparent;
+  width: 5%;
+  z-index: 9;
+}
+
+.collapsible2 {
+  background-color: transparent;
+  color: #371F10;
+  cursor: pointer;
+  padding: 0px;
+  width: 100%;
+  height: auto;
+  border: none;
+  text-align: center;
+  outline: none;
+  font-size: 40px;
+  z-index: 10;
+  margin-top: 0px;
+}
+
+.collapsible2:hover {
+  background-color: transparent;
+  color: blue;
+}
+
+.content2 {
+  position: absolute;
+  max-height: 0;
+  overflow: hidden;
+  width: auto;
+  transition: max-height 0.3s ease-out;
+  background-color: transparent;
+  color: white;
+  z-index: 10;
+  text-align: center;
+  bottom: 100%;
+}*/
+
+
+/* Grid buttons */
+
+.header {
+  
+    position: fixed;
+   /* text-align: center;*/
+    bottom: 0%;
+    right: 1%;
+    z-index: 9;
+    width: 110px;
+    height: 50px;
+    background-color: white;
+    color: #371F10;
+
+}
+
+p {
+  display: inline-block;
+  /*position: relative;*/
+  color: #371F10;
+}
+
+.btnov {
+  position: fixed;
+  display: inline;
+  right: 20px;
+  bottom:0px;
+  border: none;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+ /* padding: 5px 5px;*/
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 20px;
+  z-index: 9;
+  color: #371F10;
+  margin-bottom: 3px;
+}
+
+.btn {
+  position: fixed;
+  display: inline;
+  right: 70px;
+  bottom:0px;
+  border: none;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 30px;
+  z-index: 9;
+  color: #371F10;
+}
+
+.btn:hover {
+  color:rgba(11,239,235);
+/*  color: blue;*/
+}
+
+.btn:active {
+  color:rgba(11,239,235);
+}
+
+.btnov:hover {
+  color:rgba(11,239,235);
+/*  color: blue;*/
+}
+
+.btnov:active {
+  color:rgba(11,239,235);
+}
+
+.metadata{
+  position: fixed;
+  top: 25%;
+  right: 0%;
+  background-color: transparent;
+  width: 60%;
+  z-index: 10;
+  opacity: 1;
+  text-align: right;
+  /*align-items: right;
+  align-content: right;*/
+
+}
+
+.collapsible {
+  
+  display: inline-block;
+  right:0%;
+  background-color: white;
+  color: #371F10;
+  cursor: pointer;
+  padding: 18px;
+  width: 3%;
+  height: 100%;
+  /*border: solid 1px;*/
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  z-index: 10;
+  margin-top: 10px;
+
+}
+
+.active, .collapsible:hover {
+  color: #371F10;
+  background-color:rgba(11,239,235);
+}
+
+.content {
+  position: relative;
+  padding: 0px 18px;
+  max-height: 0;
+  overflow: hidden;
+  width: auto;
+  transition: max-height 0.2s ease-out;
+  background-color: white;
+  color: #371F10;
+  z-index: 10;
+  text-align: left;
+  opacity: 0.7;
+  right:0%;
+}
+
+a.content:link {
+  color:white;
+}
+
+.metadata_topic, .metadata_format, .metadata_creator, .metadata_organization {
+  max-width: 95%;
+}
+
+.fbtn {
+  font-style: italic;
+}
+
+.smw-template-furtherresults {
+  display: none;
+}
+/*
+.orglink {
+  position: fixed;
+  top: 30%;
+  left: 0%;
+  background-color: white;
+  z-index: 10;
+  font-size: 30px;
+  padding: 0px 5px 0px 5px;
+}
+
+.orglink .htext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  font-size: 15px;
+
+
+  position: absolute;
+  left: 50px;
+  z-index: 10;
+}
+
+.orglink:hover .htext {
+  visibility: visible;
+}
+
+.timelinelink {
+  position: fixed;
+  top: 20%;
+  left: 0%;
+  background-color: white;
+  z-index: 10;
+  font-size: 30px;
+  padding: 0px 5px 0px 5px; 
+}
+
+.timelinelink .htext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  font-size: 15px;
+
+
+  position: absolute;
+  left: 50px;
+  z-index: 10;
+}
+
+.timelinelink:hover .htext {
+  visibility: visible;
+}
+
+.indexlink {
+  position: fixed;
+  top:10%;
+  left:0%;
+  background-color: white;
+  z-index: 10;
+  font-size: 30px;
+  padding: 0px 5px 0px 5px;
+}
+
+.indexlink .htext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  font-size: 15px;
+
+
+  position: absolute;
+  left: 50px;
+  z-index: 10;
+}
+
+.indexlink:hover .htext {
+  visibility: visible;
+}
+
+*/

static/title.js

@@ -0,0 +1,9 @@
+// image grid
+
+function myFunction() {
+  document.getElementById("myDIV").style.gridTemplateColumns = "100%";
+}
+
+function myFunction2() {
+  document.getElementById("myDIV").style.gridTemplateColumns = "repeat(4, 1fr)";
+}

static/topicformat.css

@@ -0,0 +1,85 @@
+body {
+    background-color: #F4EBE8;
+    font-size: 18px;
+}
+
+/*.grid-container {
+  	display: inline-grid;
+  	grid-template-columns: repeat(3, 1fr);
+  	grid-column-gap: 5px;
+    grid-row-gap: 120px;
+    grid-auto-flow: dense;
+  	position: relative;
+  	top: 60%;
+    left: 5%;
+	  height: auto;
+    margin-left: 120px;
+    margin-right: 120px;
+  	text-align: center;
+  	z-index: 5;
+
+}
+
+.grid-container > div {
+	position: relative;
+	text-align: left;
+	z-index: 5;
+}*/
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 50px;
+    grid-row-gap: 100px;
+   /* grid-auto-flow: dense;*/
+    position: absolute;
+    top: 25%;
+    width: 90%;
+    height: auto;
+    left: 5%;
+    margin-left: 10px;
+    margin-right: 10px;
+    text-align: : center;
+    z-index: 5;
+    padding-bottom: 5%;
+
+}
+
+.grid-container > div {
+  position: relative;
+  text-align: center;
+  z-index: 5;
+}
+
+.thumbborder {
+    max-height: 100%;
+  position:relative;
+  display: inline-block;
+  max-width: 300px;
+}
+
+
+.img {
+  display: inline-block;
+  border-style:  hidden  hidden solid hidden;
+  border-color: #0BEFEB;
+  height: 500px;
+}
+
+.title {
+  display:block;
+}
+
+.tooltiptext {
+  display:block;
+  font-weight: normal;
+}
+
+.metatext {
+  display: inline-block;
+  width: 300px;
+  overflow-wrap: break-word;
+  border-style: hidden;
+  text-align: left;
+}
+

templates/about.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
+    <link rel="stylesheet" href="{{ staticpath }}/static/about.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <title>{{ page.name }}</title>
+</head>
+<body>
+  {{ body|safe }}
+</body>
+</html>

templates/default.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
+    <title>{{ page.name }}</title>
+</head>
+<body>
+
+    <h1>{{ page.name }}</h1>
+  <div id="body">{{ body|safe }}</div>
+
+</body>
+</html>

templates/document.html

@@ -3,14 +3,85 @@
 <head>
     <meta charset="utf-8">
     <link rel="stylesheet" href="../static/style.css" />
+    <script type="text/javascript" src="../static/script.js"></script>
     <title>{{ title[0] }}</title>
 </head>
 <body>
-    <h1>{{ title[0] }}</h1>
-    <p><time datetime="{{date}}">{{ date.year }}.{{ date.month }}.{{ date.day }}   </time></p>
-    <div id="content">
-        {{ content }}
+    <h1>{{ title[0] }} &#8629;</h1>
+    <h2><time datetime="{{date}}">{{ date.year }}.{{ date.month }}.{{ date.day }}</time></h2>
+
+<div class="metadata">
+<button class="collapsible cbtn">C</button>
+  <div class="content">
+<!-- metadata creator / format / topic  -->
+    <div class="metadata_creator">{{ creator }}</div>
+    <a class="metadata_links" href="allcreators.html">All Creators</a>
+  </div>
+<button class="collapsible fbtn">f</button>
+  <div class="content">    
+    <div class="metadata_format">{{ format }}</div>
+    <a class="metadata_links" href="allformats.html">All Formats</a>
+  </div>
+<button class="collapsible orgbtn">Org</button>
+  <div class="content">
+    <div class="metadata_organization">{{ organization }}</div>
+    <a class="metadata_links" href="allorganizations.html">All Organizations</a>
+  </div>
+<button class="collapsible tbtn">T</button>
+  <div class="content">    
+    <div class="metadata_topic">{{ topic }}</div>
+    <a class="metadata_links" href="alltopics.html">All Topics</a>
+  </div>
+</div>
+
+<!-- nav -->
+
+<!--     <div id="rightnav" class="rightnav">
+      <a href="index.html" id="titlenav">Title</a>
+    </div>
+
+    <div id="leftnav" class="leftnav">
+      <a href="timeline.html" id="datenav">Date</a>
+    </div> -->
+
+<!-- square -->
+
+<!--     <div class="square"></div> -->
+
+<!-- 2 btn grid switch for images -->
+
+    <div class="header" id="myHeader">
+    <p><button class="btn" onclick="myFunction()">100%</button></p>
+    <p><button class="btn" onclick="myFunction2()">overview</button></p>
     </div>
+
+<!-- images -->
+
+        {% for row in imgsmatrix %}
+            <div class="grid-container" id="myDIV">
+            {% for img in row %}
+              <div class="column">
+                <img src="{{ img }}">
+              </div>
+            {% endfor %}
+            </div>
+        {% endfor %}
+
+<script>
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.maxHeight){
+      content.style.maxHeight = null;
+    } else {
+      content.style.maxHeight = content.scrollHeight + "px";
+    } 
+  });
+}
+</script>
 </body>
 </html>
-

templates/document1.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../static/style.css" />
+    <script type="text/javascript" src="../static/script.js"></script>
+    <title>{{ title[0] }}</title>
+</head>
+<body>
+    <h1>{{ title[0] }}</h1>
+    <h2><time datetime="{{date}}">{{ date.year }}.{{ date.month }}.{{ date.day }}</time></h2>
+
+<div id="ExpCol">
+    <h3>Metadata</h3> 
+</div>    
+<div id="content">
+<!-- metadata creator / format / topic  -->
+
+    <a class="metadata_links" href="allcreators.html" id="creatornav">Creator</a>
+    <div class="metadata_creator">{{ creator }}</div>
+
+    <a class="metadata_links" href="allformats.html" id="formatnav">Format</a>
+    <div class="metadata_format">{{ format }}</div>
+
+    <a class="metadata_links" href="alltopics.html" id="topicnav">Topic</a>
+    <div class="metadata_topic">{{topic}}</div>
+</div> 
+
+
+
+
+<!-- nav -->
+
+    <div id="rightnav" class="rightnav">
+      <a href="index.html" id="titlenav">Title</a>
+    </div>
+
+    <div id="leftnav" class="leftnav">
+      <a href="timeline.html" id="datenav">Date</a>
+    </div>
+
+<!-- organizations toogle -->
+
+   <button class="orgbtn" onclick="orgFunc()">Organizations</button>
+
+    <div class="metadata_organizations" id="org">
+      <ul>{{ organization }}</ul>
+    </div>
+
+<!-- square -->
+
+    <div class="square"></div>
+
+<!-- 2 btn grid switch for images -->
+
+    <div class="header" id="myHeader">
+    <p><button class="btn" onclick="myFunction()">100%</button></p>
+    <p><button class="btn" onclick="myFunction2()">overview</button></p>
+    </div>
+
+<!-- images -->
+
+        {% for row in imgsmatrix %}
+            <div class="grid-container" id="myDIV">
+            {% for img in row %}
+              <div class="column">
+                <img src="{{ img }}">
+              </div>
+            {% endfor %}
+            </div>
+        {% endfor %}
+
+
+</body>
+</html>
+{#
+<div class="row">
+  <div class="column">
+    <img src="./images/VF383Hamok00.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="./images/VF383Hamok01.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="./images/VF383Hamok02.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="./images/VF383Hamok03.jpg" style="width:100%">
+  </div>
+</div>
+#}

templates/document2.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../static/style.css" />
+    <script type="text/javascript" src="../static/script.js"></script>
+    <title>{{ title[0] }}</title>
+</head>
+<body>
+    <h1>{{ title[0] }}</h1>
+    <h2><time datetime="{{date}}">{{ date.year }}.{{ date.month }}.{{ date.day }}</time></h2>
+
+<!-- metadata creator / format / topic  -->
+
+    <div class="metadata_creator">{{ creator }}</div>
+
+    <div class="metadata_format">{{ format }}</div>
+
+    <div class="metadata_topic">{{topic}}</div>
+
+
+<!-- nav -->
+
+    <div id="rightnav" class="rightnav">
+      <a href="index.html" id="titlenav">Title</a>
+    </div>
+
+    <div id="leftnav" class="leftnav">
+      <a href="timeline.html" id="datenav">Date</a>
+      <a href="allcreators.html" id="creatornav">Creator</a>
+      <a href="allformats.html" id="formatnav">Format</a>
+      <a href="alltopics.html" id="topicnav">Topic</a>
+    </div>
+
+<!-- organizations toogle -->
+
+   <button class="orgbtn" onclick="orgFunc()">Organizations</button>
+
+    <div class="metadata_organizations" id="org">
+      <ul>{{ organization|list }}</ul>
+    </div>
+
+<!-- square -->
+
+    <div class="square"></div>
+
+<!-- 2 btn grid switch for images -->
+
+    <div class="header" id="myHeader">
+    <p><button class="btn" onclick="myFunction()">100%</button></p>
+    <p><button class="btn" onclick="myFunction2()">overview</button></p>
+    </div>
+
+<!-- images -->
+
+        {% for row in imgsmatrix %}
+            <div class="grid-container" id="myDIV">
+            {% for img in row %}
+              <div class="column">
+                <img src="{{ img }}">
+              </div>
+            {% endfor %}
+            </div>
+        {% endfor %}
+
+
+</body>
+</html>
+{#
+<div class="row">
+  <div class="column">
+    <img src="./images/VF383Hamok00.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="./images/VF383Hamok01.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="./images/VF383Hamok02.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="./images/VF383Hamok03.jpg" style="width:100%">
+  </div>
+</div>
+#}

templates/document_part.html

@@ -1,31 +0,0 @@
-<div class="part">
-
-    <div class="img">
-        <img src="{{ imgsrc }}" />
-        <a href="https:{{ fullurl }}">{{ fullurl }}</a>
-    </div>
-
-    <div class="text">
-        {{ text | safe }}
-    </div>
-
-    <div class="metadata">
-        <h3>Metadata</h3>
-        {% for key, valuelist in  printout_dict.items() %}
-            <div class="metadata_{{key}}">
-                {% if key == 'Date' %}
-                    <span class="key">{{key}}</span>
-                    <span class="value">{{valuelist.year}} {{valuelist.month}} {{valuelist.day}}</span>
-                {% elif key == 'page' %}
-                    <span class="key">{{key|upper}}</span>
-                    <span class="value">{{valuelist}}</span>
-                {% else %}
-                    {% if valuelist|length > 0 %}
-                        <span class="key">{{key|upper}}</span>
-                        <span class="value">{{valuelist | join(", ")}}</span>
-                    {% endif %}
-                {% endif %}
-            </div>
-        {% endfor %}
-    </div>
-</div>

templates/format.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
+    <link rel="stylesheet" href="{{ staticpath }}/static/topicformat.css" />
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <title>{{ page.name }}</title>
+</head>
+<body class="title">
+
+    <h1>{{ page.name }}</h1>
+  <div id="body">{{ body|safe }}</div>
+
+</body>
+</html>

templates/index.html

@@ -1,18 +1,116 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>{{title}}</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css"/>
+    <link rel="stylesheet" href="{{ staticpath }}/static/index.css"/>`
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <!-- <script type="text/javascript" src="{{ staticpath }}/static/index.js"></script> -->
+    <title>{{ page.name }}</title>
 </head>
 <body>
-<h3>Resultsss from query:<br/><code>{{query}}</code></h3>
-    <ul>
-    {% for doc in documentslist %}
-        <li><a href="./{{ doc['file'] }}">{{ doc['title'][0] }}</a>
-       {{ doc['date'].year }}.{{ doc['date'].month }}.{{ doc['date'].day }}
-        {{doc['creator'] | join(", ")}}
-        </li>
-    {% endfor %}
-    </ul>
+<!-- <div class="pagelink">[[Overview_main_page|&#8625;]]<span class="pagename">Main Page</span></div>
+<div class="pagelink">[[Dates_of_Events|&#9481;]]<span class="pagename">Timeline</span></div>
+<div class="pagelink">[[Organizations|&#9636;]]<span class="pagename">Organizations</span></div> -->
+<div class="bigbtncontainer">
+  <div id="myBtnContainer">
+  <button class="btn active" onclick="filterSelection('All')">All Publications</button>
+  <button class="btn" onclick="filterSelection('Arts and Culture')">Arts and Culture</button>
+  <button class="btn" onclick="filterSelection('Civil Rights')">Civil Rights</button>
+  <button class="btn" onclick="filterSelection('Clergy / Religion')">Clergy / Religion</button>
+  <button class="btn" onclick="filterSelection('Economics')">Economics</button>
+  <button class="btn" onclick="filterSelection('Education')">Education</button>
+  <button class="btn" onclick="filterSelection('Elections')">Elections</button>
+  <button class="btn" onclick="filterSelection('Food Production / Nutrition / Food')">Food Production / Nutrition / Food</button>
+  <button class="btn" onclick="filterSelection('Healthcare')">Healthcare</button>
+  <button class="btn" onclick="filterSelection('Imprisonment')">Imprisonment</button>
+  <button class="btn" onclick="filterSelection('Infrastructure')">Infrastructure</button>
+  <button class="btn" onclick="filterSelection('Internal Affairs')">Internal Affairs</button>
+  <button class="btn" onclick="filterSelection('International Affairs')">International Affairs</button>
+  <button class="btn" onclick="filterSelection('Key Political Figures')">Key Political Figures</button>
+  <button class="btn" onclick="filterSelection('Martial Law')">Martial Law</button>
+  <button class="btn" onclick="filterSelection('Military Abuse')">Military Abuse</button>
+  <button class="btn" onclick="filterSelection('Military Resources')">Military Resources</button>
+  <button class="btn" onclick="filterSelection('Natural Phenomena')">Natural Phenomena</button>
+  <button class="btn" onclick="filterSelection('Political Ideologies')">Political Ideologies</button>
+  <button class="btn" onclick="filterSelection('Resistance Tactics')">Resistance Tactics</button>
+  <button class="btn" onclick="filterSelection('Social Policies')">Social Policies</button>
+  <button class="btn" onclick="filterSelection('US Foreign Policy')">US Foreign Policy</button>
+  <button class="btn" onclick="filterSelection('Workers Rights')">Workers Rights</button>
+  <div class="line"></div>
+  <button class="btn" onclick="filterSelection('Agenda')">Agenda</button>
+  <button class="btn" onclick="filterSelection('Article')">Article</button>
+  <button class="btn" onclick="filterSelection('Bulletin')">Bulletin</button>
+  <button class="btn" onclick="filterSelection('Comic')">Comic</button>
+  <button class="btn" onclick="filterSelection('Editorial')">Editorial</button>
+  <button class="btn" onclick="filterSelection('Handbook')">Handbook</button>
+  <button class="btn" onclick="filterSelection('Interview')">Interview</button>
+  <button class="btn" onclick="filterSelection('Invitation')">Invitation</button>
+  <button class="btn" onclick="filterSelection('Legal Document')">Legal Document</button>
+  <button class="btn" onclick="filterSelection('Letter')">Letter</button>
+  <button class="btn" onclick="filterSelection('List')">List</button>
+  <button class="btn" onclick="filterSelection('Manifesto')">Manifesto</button>
+  <button class="btn" onclick="filterSelection('Manual')">Manual</button>
+  <button class="btn" onclick="filterSelection('News')">News</button>
+  <button class="btn" onclick="filterSelection('Notes')">Notes</button>
+  <button class="btn" onclick="filterSelection('Pamphlet')">Pamphlet</button>
+  <button class="btn" onclick="filterSelection('Paper')">Paper</button>
+  <button class="btn" onclick="filterSelection('Poem')">Poem</button>
+  <button class="btn" onclick="filterSelection('Reader')">Reader</button>
+  <button class="btn" onclick="filterSelection('Report')">Report</button>
+  <button class="btn" onclick="filterSelection('Song')">Song</button>
+  <button class="btn" onclick="filterSelection('Statement')">Statement</button>
+</div>
+</div>
+<!-- <ul id="menu"> -->
+    {{ body|safe }}
+<!-- </ul> -->
+
 </body>
-</html>
+</html>
+
+<script>
+filterSelection("All")
+function filterSelection(c) {
+  var x, i;
+  x = document.getElementsByClassName("filter");
+  if (c == "All") c = "";
+  for (i = 0; i < x.length; i++) {
+    w3RemoveClass(x[i], "show");
+    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
+  }
+}
+
+function w3AddClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
+  }
+}
+
+function w3RemoveClass(element, name) {
+  var i, arr1, arr2;
+  arr1 = element.className.split(" ");
+  arr2 = name.split(" ");
+  for (i = 0; i < arr2.length; i++) {
+    while (arr1.indexOf(arr2[i]) > -1) {
+      arr1.splice(arr1.indexOf(arr2[i]), 1);     
+    }
+  }
+  element.className = arr1.join(" ");
+}
+
+// Add active class to the current button (highlight it)
+var btnContainer = document.getElementById("myBtnContainer");
+var btns = btnContainer.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+  btns[i].addEventListener("click", function(){
+    var current = document.getElementsByClassName("active");
+    current[0].className = current[0].className.replace(" active", "");
+    this.className += " active";
+  });
+}
+</script>
+

templates/language.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
+    <link rel="stylesheet" href="{{ staticpath }}/static/topicformat.css" />
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <title>{{ page.name }}</title>
+</head>
+<body class="title">
+
+    <h1>{{ page.name }}</h1>
+  <div id="body">{{ body|safe }}</div>
+
+</body>
+</html>

templates/orgs.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
+    <link rel="stylesheet" href="{{ staticpath }}/static/orgs.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/orgs.js"></script>
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <title>{{ page.name }}</title>
+</head>
+<body>
+    <h1>{{ page.name }}</h1>
+
+    <div class="scrollcolumn">
+      <button onclick="scrollWin(0,-5000)" class="up scrl"><span>&#8988;</span><span class="scbt">Up</span></button>
+      <button onclick="scrollWin(0,5000)" class="down scrl"><span>&#8991;</span><span class="scbt">Down</span></button>
+      <button onclick="scrollToTop()" class="top scrl"><span>&#9140;</span><span class="scbt">Top</span></button>
+      <button onclick="scrollToBottom()" class="bottom scrl"><span>&#9141;</span><span class="scbt">Bottom</span></button>
+    </div>
+    
+    <div id="body">{{ body|safe }}</div>
+      
+    <script>
+      var coll = document.getElementsByClassName("collapsible");
+      var i;
+
+        for (i = 0; i < coll.length; i++) {
+         coll[i].addEventListener("click", function() {
+         this.classList.toggle("active");
+         var content = this.nextElementSibling;
+         if (content.style.maxHeight){
+            content.style.maxHeight = null;
+         } else {
+            content.style.maxHeight = content.scrollHeight + "px";
+         } 
+        });
+       }
+
+      function scrollWin(x, y) {
+      window.scrollBy(x, y);
+      } 
+
+      var elmnt = document.getElementById("top");
+
+      function scrollToTop() {
+        elmnt.scrollIntoView(true); // Top
+      }
+
+      function scrollToBottom() {
+        elmnt.scrollIntoView(false); // Bottom
+      }
+    </script>
+</body>
+</html>

templates/statistics.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
+    <link rel="stylesheet" href="{{ staticpath }}/static/stats.css" />
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <title>{{ page.name }}</title>
+</head>
+<body class="title">
+
+    <h1>{{ page.name }}</h1>
+  <div id="body">{{ body|safe }}</div>
+
+</body>
+</html>

templates/timeline.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
+    <link rel="stylesheet" href="{{ staticpath }}/static/timeline.css" />
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <title>Timeline</title>
+</head>
+<body>
+	<h1>Timeline</h1>    
+	<div id="body">{{ body|safe }}</div>
+
+</body>
+</html>

templates/title.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
+    <link rel="stylesheet" href="{{ staticpath }}/static/title.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/title.js"></script>
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <title>{{ page.name }}</title>
+</head>
+<body class="title">
+
+    <h1>{{ page.name }} &#8629;</h1>
+
+<!-- <div class="viewnav">
+  <div class="collapsible2 viewbtn">&#9634;</div>
+  <div class="content2"> -->
+	<div class="header" id="myHeader">
+    <p><button class="btn clicked" onclick="myFunction()">&#9635;</button></p>
+    <p><button class="btnov clicked" onclick="myFunction2()">&#9580;&#9580;</button></p>
+    </div>
+<!--   </div> 
+<div> -->
+  
+	<div id="body">{{ body|safe }}</div>
+  
+<script>
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.maxHeight){
+      content.style.maxHeight = null;
+    } else {
+      content.style.maxHeight = content.scrollHeight + "px";
+    } 
+  });
+}
+
+var links = document.querySelectorAll("*[title]");
+for (var i=0; i<links.length; i++) {   links[i].setAttribute("title", "");  }
+
+</script>
+</body>
+</html>

templates/topic.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
+    <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
+    <link rel="stylesheet" href="{{ staticpath }}/static/topicformat.css" />
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
+    <title>{{ page.name }}</title>
+</head>
+<body class="title">
+
+    <h1>{{ page.name }}</h1>
+  <div id="body">{{ body|safe }}</div>
+
+</body>
+</html>