margin top about page

Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html
final changes
39 changed files with 3322 additions and 84 deletions
--- a/.gitignore
+++ b/.gitignore
@ -18,3 +18,4 @@ __pycache__/
 *.jpg
 *.jpeg
 secrets.py
+archive/*
--- a/README.md
+++ b/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)
--- a/download_imgs.py
+++ b/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')
--- a/dumpwiki.py
+++ b/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)
+
+
--- a/populate_title_pages.py
+++ b/populate_title_pages.py
@ -0,0 +1,26 @@
+import os, argparse, sys, re, json
+from mwclient import (Site,
+                      errors)
+
+# API CALL
+# https://hub.xpub.nl/sandbox/itchwiki/api.php?action=smwbrowse&browse=pvalue&params={ "limit": 1500, "offset": 0, "property" : "Title", "search": "" }&format=json
+# generated orgs.json
+
+# login
+site = Site(host='hub.xpub.nl/sandbox', path='/itchwiki/')
+
+wd =os.path.dirname(os.path.abspath(__file__))  # parent working directory
+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
+
+
+with open('titles.json', 'r') as f:
+    titles = json.load(f)
+
+for pagename in titles['query']:
+    page = site.pages[pagename]
+    if not page.text(): # if page has no text
+        print(pagename)
+        page.save('{{Publication}}\n[[Category:Title]]')
--- a/populate_title_pages2.py
+++ b/populate_title_pages2.py
@ -0,0 +1,33 @@
+import os, argparse, sys, re, json
+from mwclient import (Site,
+                      errors)
+
+# API CALL
+# https://hub.xpub.nl/sandbox/itchwiki/api.php?action=smwbrowse&browse=pvalue&params={ "limit": 1500, "offset": 0, "property" : "Title", "search": "" }&format=json
+# generated orgs.json
+#             >>> result = site.api('query', prop='coordinates', titles='Oslo|Copenhagen')
+# login
+site = Site(host='hub.xpub.nl/sandbox', path='/itchwiki/')
+
+wd =os.path.dirname(os.path.abspath(__file__))  # parent working directory
+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
+
+# To query a large number of ite:
+
+for i in range(0, 1500, 100):
+    # variable  i will increase 100 at each iteration
+    # between 0 and 1400
+    # and will make the offset parameter change
+    print('\n', f'Querying from {i} to {i+100}', '\n')
+
+    ask_query = f'[[Category:Title]]|format=json|limit=100|offset={i}'
+
+    response = site.api(action='ask', query=ask_query)
+    for pagetitle in response['query']['results']:
+        print(pagetitle)
+        page = site.pages[pagetitle]
+#         # text = page.text()
+        page.save('{{Publication}}\n[[Category:Title]]')
--- a/query2html.py
+++ b/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,
--- a/static/about.css
+++ b/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;
+}*/
--- a/static/archive.css
+++ b/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 */
+
--- a/static/index.css
+++ b/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 */
--- a/static/orgs.css
+++ b/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;
+}
+
--- a/static/stats.css
+++ b/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;
+}
--- a/static/style.css
+++ b/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;
+}
--- a/static/timeline.css
+++ b/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;
+}
--- a/static/title.css
+++ b/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;
+}
+
+*/
--- a/static/title.js
+++ b/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)";
+}
--- a/static/topicformat.css
+++ b/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;
+}
+
--- a/static_website/item_page/1LiberationVol14No.
+++ b/static_website/item_page/1LiberationVol14No.
@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css" />
+    <title>Liberation: Vol. 14 No. 4</title>
+</head>
+<body>
+    <h1>Liberation: Vol. 14 No. 4 &#8629;</h1>
+    <h2>1986.6.1</h2>
+
+<!-- Header -->
+    <div class="header" id="myHeader">
+        <button class="btn active" onclick="four()">Overview</button>
+        <button class="btn" onclick="one()">100%</button>
+      
+    </div>
+
+<!-- metadata dropdown -->
+
+    <div id="rightnav" class="rightnav">
+      <a href="index.html" id="title">Title</a>
+      <a href="#" id="view">View</a>
+    </div>
+
+    <div id="leftnav" class="leftnav">
+      <a href="#" id="date">Date</a>
+      <a href="https://www.google.com/" id="creator">Creator</a>
+    </div>
+
+    <div class="metadata_Creator"><a href>National Democratic Front (NDF)</a>    
+    </div>
+
+   <button class="orgbtn" onclick="myFunction()">Organizations</button>
+
+   <div class="square"></div>
+
+    <div id="myDIV">
+    <ul><a href="index.html">New People's Army (NPA)</a></ul>, National Democratic Front (NDF), Armed Forces of the Philippines (AFP), International Monetary Fund (IMF), Katipunan ng mga Gurong Makabayan (KAGUMA), Philippine Conference for Human Rights (PCHR), World Bank (WB), Kilusang Mayo Uno - May First Movement (KMU), Kabataang Makabayan - Patriotic Youth (KM), National Press Club (NPC), Ministry of National Defense (MND), National Intelligence Security Authority (NISA), Federation of Free Farmers (FFF), Integrated National Police (INP), Military Security Unit (MSU), Communist Party of the Philippines (CPP), Civilian Home Defense Force (CHDF), Communist Party of the Philppines & New Peoples Army (CPP-NPA), Kilusan ng Magbubukid ng Pilipinas (KMP), Trade Union Congress of the Philippines (TUCP), Military Intelligence Service (MIS), Movement of Concerned Citizens for Civil Liberties (MCCCL), Executive Committee of the Central Committee (of the CPP) (EC-CC), National Economic Protectionism Association (NEPA), Pambansang Lakas ng Kilusang Mamamalakaya ng Pilipinas (PAMALAKAYA-Pilipinas), Reform the AFP Movement (RAM), Presidential Security Command (PSC), Metrocom Intelligence and Security Group (MISG), Civilian Armed Geographical Unit (CAFGU), Katipunan Dagiti Mannalon ti Isabela (KAMI-KMP)
+    </div>
+
+<div class="row"> 
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No401.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No405.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No409.jpg" style="width:100%">
+     <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No413.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No418.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No422.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No426.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No402.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No406.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No410.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No414.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No419.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No423.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No427.jpg" style="width:100%">
+  </div>  
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No403.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No407.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No411.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No415.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No420.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No424.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No428.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No404.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No408.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No412.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No416.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No421.jpg" style="width:100%">
+     <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/LiberationVol14No425.jpg" style="width:100%">
+  </div>
+</div>
+
+<script>
+// Get the elements with class="column"
+var elements = document.getElementsByClassName("column");
+
+// Declare a loop variable
+var i;
+
+// Four images side by side
+function four() {
+  for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "25%";  // IE10
+    elements[i].style.flex = "25%";
+  }
+}
+
+// Full-width images
+function one() {
+    for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "80%";  // IE10
+    elements[i].style.flex = "80%";
+  }
+}
+
+// // Two images side by side
+// function two() {
+//   for (i = 0; i < elements.length; i++) {
+//     elements[i].style.msFlex = "50%";  // IE10
+//     elements[i].style.flex = "50%";
+//   }
+// }
+
+// Add active class to the current button (highlight it)
+var header = document.getElementById("myHeader");
+var btns = header.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";
+  });
+}
+
+// toggle text
+function myFunction() {
+  var x = document.getElementById("myDIV");
+  if (x.style.display === "block") {
+    x.style.display = "none";
+  } else {
+    x.style.display = "block";
+  }
+}
+
+
+
+</script>
+
+</body>
+</html>
--- a/static_website/item_page/2NineteenEightySickYearoftheLupus.html
+++ b/static_website/item_page/2NineteenEightySickYearoftheLupus.html
@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css" />
+    <title>Nineteen Eighty Sick: Year of the Lupus</title>
+</head>
+<body>
+    <h1>Nineteen Eighty Sick: Year of the Lupus &#8629;</h1>
+    <h2>1986.1.1</h2>
+
+<!-- Header -->
+    <div class="header" id="myHeader">
+        <button class="btn active" onclick="four()">Overview</button>
+        <button class="btn" onclick="one()">100%</button>
+      
+    </div>
+
+<!-- metadata dropdown -->
+
+    <div id="rightnav" class="rightnav">
+      <a href="index.html" id="title">Title</a>
+      <a href="#" id="view">View</a>
+    </div>
+
+    <div id="leftnav" class="leftnav">
+      <a href="#" id="date">Date</a>
+      <a href="https://www.google.com/" id="creator">Creator</a>
+    </div>
+
+    <div class="metadata_Creator"><a href>Manuel Pamaran, Paki A. Lamero</a>    
+    </div>
+
+   <button class="orgbtn" onclick="myFunction()">Organizations</button>
+
+   <div class="square"></div>
+    <div id="myDIV">
+    <ul><a href="index.html">Kabataang Makabayan - Patriotic Youth (KM)</a></ul>
+    <ul><a href="index.html">Civilian Home Defense Force (CHDF)</a></ul>
+    </div>
+
+<div class="row"> 
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus01.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus05.jpg" style="width:100%">
+    
+  </div>
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus02.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus06.jpg" style="width:100%">
+    
+  </div>  
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus03.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus07.jpg" style="width:100%">
+    
+  </div>
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus04.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/NineteenEightySickYearofLupus08.jpg" style="width:100%">
+  
+  </div>
+</div>
+
+<script>
+// Get the elements with class="column"
+var elements = document.getElementsByClassName("column");
+
+// Declare a loop variable
+var i;
+
+// Four images side by side
+function four() {
+  for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "25%";  // IE10
+    elements[i].style.flex = "25%";
+  }
+}
+
+// Full-width images
+function one() {
+    for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "80%";  // IE10
+    elements[i].style.flex = "80%";
+  }
+}
+
+// // Two images side by side
+// function two() {
+//   for (i = 0; i < elements.length; i++) {
+//     elements[i].style.msFlex = "50%";  // IE10
+//     elements[i].style.flex = "50%";
+//   }
+// }
+
+// Add active class to the current button (highlight it)
+var header = document.getElementById("myHeader");
+var btns = header.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";
+  });
+}
+
+// toggle text
+function myFunction() {
+  var x = document.getElementById("myDIV");
+  if (x.style.display === "block") {
+    x.style.display = "none";
+  } else {
+    x.style.display = "block";
+  }
+}
+
+
+
+</script>
+
+</body>
+</html>
--- a/static_website/item_page/Freeallpoliticalprisonersoursolidaritywillsetthemfree.html
+++ b/static_website/item_page/Freeallpoliticalprisonersoursolidaritywillsetthemfree.html
@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css" />
+    <title>Free all political prisoners: our solidarity will set them free</title>
+</head>
+<body>
+    <h1>Free all political prisoners: our solidarity will set them free &#8629;</h1>
+    <h2>1984.12.4</h2>
+
+<!-- Header -->
+    <div class="header" id="myHeader">
+        <button class="btn active" onclick="four()">Overview</button>
+        <button class="btn" onclick="one()">100%</button>
+      
+    </div>
+
+<!-- metadata dropdown -->
+
+    <div id="rightnav" class="rightnav">
+      <a href="index.html" id="title">Title</a>
+      <a href="#" id="view">View</a>
+    </div>
+
+    <div id="leftnav" class="leftnav">
+      <a href="#" id="date">Date</a>
+      <a href="https://www.google.com/" id="creator">Creator</a>
+    </div>
+
+
+   <button class="orgbtn" onclick="myFunction()">Organizations</button>
+
+   <div class="square"></div>
+
+    <div id="myDIV">
+    <ul><a href="index.html">Task Force Detainees of the Philippines (TFDP)</a></ul>, Nationalist Alliance for Justice, Freedom and Democracy (NAJFD), Kapisanan para sa Pagpapalaya at Amnestiya ng mga Detenido sa Pilipinas - Association for the Release and Amnesty of Detainees in the Philippines (KAPATID)
+    </div>
+
+<div class="row"> 
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF269Freeallpoliticalprisoners01.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF269Freeallpoliticalprisoners02.jpg" style="width:100%">
+  </div>  
+  <div class="column">
+  </div>
+  <div class="column">
+  </div>
+</div>
+
+<script>
+// Get the elements with class="column"
+var elements = document.getElementsByClassName("column");
+
+// Declare a loop variable
+var i;
+
+// Four images side by side
+function four() {
+  for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "25%";  // IE10
+    elements[i].style.flex = "25%";
+  }
+}
+
+// Full-width images
+function one() {
+    for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "80%";  // IE10
+    elements[i].style.flex = "80%";
+  }
+}
+
+// // Two images side by side
+// function two() {
+//   for (i = 0; i < elements.length; i++) {
+//     elements[i].style.msFlex = "50%";  // IE10
+//     elements[i].style.flex = "50%";
+//   }
+// }
+
+// Add active class to the current button (highlight it)
+var header = document.getElementById("myHeader");
+var btns = header.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";
+  });
+}
+
+// toggle text
+function myFunction() {
+  var x = document.getElementById("myDIV");
+  if (x.style.display === "block") {
+    x.style.display = "none";
+  } else {
+    x.style.display = "block";
+  }
+}
+
+
+
+</script>
+
+</body>
+</html>
--- a/static_website/item_page/HamokIsulongAngPambansangDemokratikongRebolusyon.html
+++ b/static_website/item_page/HamokIsulongAngPambansangDemokratikongRebolusyon.html
@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css" />
+    <title>Hamok: Isulong Ang Pambansang Demokratikong Rebolusyon</title>
+</head>
+<body>
+    <h1>Hamok: Isulong Ang Pambansang Demokratikong Rebolusyon &#8629;</h1>
+    <h2>1977.6.12</h2>
+
+<!-- Header -->
+    <div class="header" id="myHeader">
+        <button class="btn active" onclick="four()">Overview</button>
+        <button class="btn" onclick="one()">100%</button>
+      
+    </div>
+
+<!-- metadata dropdown -->
+
+    <div id="rightnav" class="rightnav">
+      <a href="index.html" id="title">Title</a>
+      <a href="#" id="view">View</a>
+    </div>
+
+    <div id="leftnav" class="leftnav">
+      <a href="#" id="date">Date</a>
+      <a href="https://www.google.com/" id="creator">Creator</a>
+    </div>
+
+   
+
+   <button class="orgbtn" onclick="myFunction()">Organizations</button>
+
+   <div class="square"></div>
+
+    <div id="myDIV">
+    <ul><a href="index.html">All Organizations</a></ul>
+    </div>
+
+<div class="row"> 
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF383Hamok00.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF383Hamok01.jpg" style="width:100%">
+  </div>  
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF383Hamok02.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF383Hamok03.jpg" style="width:100%">
+  </div>
+</div>
+
+<script>
+// Get the elements with class="column"
+var elements = document.getElementsByClassName("column");
+
+// Declare a loop variable
+var i;
+
+// Four images side by side
+function four() {
+  for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "25%";  // IE10
+    elements[i].style.flex = "25%";
+  }
+}
+
+// Full-width images
+function one() {
+    for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "80%";  // IE10
+    elements[i].style.flex = "80%";
+  }
+}
+
+// // Two images side by side
+// function two() {
+//   for (i = 0; i < elements.length; i++) {
+//     elements[i].style.msFlex = "50%";  // IE10
+//     elements[i].style.flex = "50%";
+//   }
+// }
+
+// Add active class to the current button (highlight it)
+var header = document.getElementById("myHeader");
+var btns = header.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";
+  });
+}
+
+// toggle text
+function myFunction() {
+  var x = document.getElementById("myDIV");
+  if (x.style.display === "block") {
+    x.style.display = "none";
+  } else {
+    x.style.display = "block";
+  }
+}
+
+
+
+</script>
+
+</body>
+</html>
--- a/static_website/item_page/MartsangBayan.html
+++ b/static_website/item_page/MartsangBayan.html
@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="style.css" />
+    <title>Martsa ng Bayan</title>
+</head>
+<body>
+    <h1>Martsa ng Bayan &#8629;</h1>
+    <h2>1974.1.7</h2>
+
+<!-- Header -->
+    <div class="header" id="myHeader">
+        <button class="btn active" onclick="four()">Overview</button>
+        <button class="btn" onclick="one()">100%</button>
+      
+    </div>
+
+<!-- metadata dropdown -->
+
+    <div id="rightnav" class="rightnav">
+      <a href="index.html" id="title">Title</a>
+      <a href="#" id="view">View</a>
+    </div>
+
+    <div id="leftnav" class="leftnav">
+      <a href="#" id="date">Date</a>
+      <a href="https://www.google.com/" id="creator">Creator</a>
+    </div>
+
+    <div class="metadata_Creator"><a href>Philippine Conference for Human Rights (PCHR)</a>    
+    </div>
+
+   <button class="orgbtn" onclick="myFunction()">Organizations</button>
+
+   <div class="square"></div>
+
+    <div id="myDIV">
+    <ul><a href="index.html">All Organizations</a></ul>
+    </div>
+
+<div class="row"> 
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197401.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197405.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197409.jpg" style="width:100%">
+     <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197413.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197417.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197402.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197406.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197410.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197414.jpg" style="width:100%">
+  </div>  
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197403.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197407.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197411.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197415.jpg" style="width:100%">
+  </div>
+  <div class="column">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197404.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197408.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197412.jpg" style="width:100%">
+    <img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/MartsangBayanJanuary7197416.jpg" style="width:100%">
+  </div>
+</div>
+
+<script>
+// Get the elements with class="column"
+var elements = document.getElementsByClassName("column");
+
+// Declare a loop variable
+var i;
+
+// Four images side by side
+function four() {
+  for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "25%";  // IE10
+    elements[i].style.flex = "25%";
+  }
+}
+
+// Full-width images
+function one() {
+    for (i = 0; i < elements.length; i++) {
+    elements[i].style.msFlex = "80%";  // IE10
+    elements[i].style.flex = "80%";
+  }
+}
+
+// // Two images side by side
+// function two() {
+//   for (i = 0; i < elements.length; i++) {
+//     elements[i].style.msFlex = "50%";  // IE10
+//     elements[i].style.flex = "50%";
+//   }
+// }
+
+// Add active class to the current button (highlight it)
+var header = document.getElementById("myHeader");
+var btns = header.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";
+  });
+}
+
+// toggle text
+function myFunction() {
+  var x = document.getElementById("myDIV");
+  if (x.style.display === "block") {
+    x.style.display = "none";
+  } else {
+    x.style.display = "block";
+  }
+}
+
+
+
+</script>
+
+</body>
+</html>
--- a/static_website/item_page/index.html
+++ b/static_website/item_page/index.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css" />
+    <title></title>
+</head>
+<body>
+<h3>Results from query:<br/><code>[[Format::Song]]</code></h3>
+    <ul class="indexlist">
+    
+        <li><a href="./MartsangBayan.html">Martsa ng Bayan</a>
+       1974.1.7
+        Philippine Conference for Human Rights (PCHR)
+        </li>
+    
+        <li><a href="./HamokIsulongAngPambansangDemokratikongRebolusyon.html">Hamok: Isulong Ang Pambansang Demokratikong Rebolusyon</a>
+       1977.6.12
+        
+        </li>
+    
+        <li><a href="./Freeallpoliticalprisonersoursolidaritywillsetthemfree.html">Free all political prisoners: our solidarity will set them free</a>
+       1984.12.4
+        
+        </li>
+    
+        <li><a href="./2NineteenEightySickYearoftheLupus.html">Nineteen Eighty Sick: Year of the Lupus</a>
+       1986.1.1
+        Manuel Pamaran, Paki A. Lamero
+        </li>
+    
+        <li><a href="./1LiberationVol14No. 4.html">Liberation: Vol. 14 No. 4</a>
+       1986.6.1
+        National Democratic Front (NDF)
+        </li>
+    
+    </ul>
+</body>
+</html>
--- a/static_website/item_page/style.css
+++ b/static_website/item_page/style.css
@ -0,0 +1,337 @@
+
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  background-color: #aaa4a0;
+}
+
+/*index page links*/
+
+li a:hover {
+  text-decoration: none;
+  color: blue;
+}
+
+a:link {
+  text-decoration: none;
+  color: black;
+}
+
+a:visited {
+  text-decoration: none;
+  color: black;
+}
+
+h1 {
+	position: fixed;
+	/*height: 50px;
+	width: auto;*/
+	right:0%;
+	text-align: right;
+	background-color: grey;
+	padding: 3px 30px 3px 10px;
+}
+
+h2, h3{
+	position: fixed;
+	left: 0%;
+	top: 5%;
+	text-align: left;
+	background-color: grey;
+	padding: 3px 3px 3px 30px;
+}
+
+.indexlist {
+  position: absolute;
+  top:20%;
+}
+
+
+.header {
+	/*display: inline-block;*/
+	position: absolute;
+  	text-align: center;
+  	padding: 32px;
+  	top: 15%;
+  	right: 0%;
+  	z-index: -1;
+}
+
+.row {
+  display: -ms-flexbox; /* IE 10 */
+  display: flex;
+  position: absolute;
+  -ms-flex-wrap: wrap; /* IE 10 */
+  flex-wrap: wrap;
+  padding: 0 4px;
+  top: 35%;
+  z-index: -1;
+ 
+}
+
+/* Create two equal columns that sits next to each other */
+.column {
+  -ms-flex: 25%; /* IE 10 */
+  flex: 25%;
+  padding: 0 4px;
+}
+
+.column img {
+  margin-top: 8px;
+  vertical-align: middle;
+}
+
+/* Style the buttons */
+.btn {
+  position: relative;
+  border: none;
+  outline: none;
+  width: 110px;
+  text-align: center;
+  padding: 12px 0px;
+  background-color: grey;
+  cursor: pointer;
+  font-size: 18px;
+  margin-right: 5px;
+}
+
+.btn:hover {
+  background-color: black;
+  color: white;
+}
+
+.active {
+  background-color: black;
+  color: white;
+}
+
+/*metadata dropup*/
+
+.dropbtn {
+  background-color: black;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+  width: 200px;
+
+}
+
+.dropup {
+  position: absolute;
+  display: inline-block;
+}
+
+.dropup-content {
+  display: none;
+  position: absolute;
+  background-color: black;
+  opacity: 0.8;
+  min-width: 160px;
+  bottom: 50px;
+  z-index: 1;
+  width: 300px;
+  color: grey;
+}
+
+.dropup-content a {
+  color: grey;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropup-content a:hover {color: white;}
+
+.dropup:hover .dropup-content {
+  display: block;
+}
+
+.dropup:hover .dropbtn {
+  background-color: grey;
+}
+
+/*metadata dropdown*/
+.dropbtn {
+	position: fixed;
+  	background-color: #4CAF50;
+  	color: white;
+  	padding: 16px;
+  	font-size: 16px;
+  	border: none;
+  	cursor: pointer;
+  	bottom:30%;
+}
+
+.dropdown {
+  	position: fixed;
+  	display: inline-block;
+	bottom:30%;
+	width: 300px;
+}	
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  right: 0;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content a:hover {background-color: #f1f1f1;}
+.dropdown:hover .dropdown-content {display: block;}
+.dropdown:hover .dropbtn {background-color: #3e8e41;}
+
+
+
+
+
+/*something*/
+
+
+#rightnav a {
+  position: absolute;
+  right: -90px;
+  /*top:10%;*/
+  transition: 0.3s;
+  padding: 10px 50px 10px 30px;
+  width: 150px;
+  text-decoration: none;
+  font-size: 20px;
+  color: white;
+  border-radius: 0 5px 5px 0;
+  text-align: right;
+  font-size: 15px;
+}
+
+#rightnav a:hover {
+  right: 0;
+  background-color: black;
+}
+
+#title {
+  top: 10%;
+  background-color: black;
+}
+
+#view {
+  top: 27%;
+  background-color: black;
+}
+
+#leftnav a {
+  position: absolute;
+  left: -80px;
+  /*top:10%;*/
+  transition: 0.3s;
+  padding: 10px 50px 10px 20px;
+  width: 125px;
+  text-decoration: none;
+  font-size: 20px;
+  color: white;
+  border-radius: 5px 0 0 5px;
+  text-align: right;
+  font-size: 15px;
+}
+
+#leftnav a:hover {
+  left: 0;
+  background-color: black;
+}
+
+#date {
+  top: 14%;
+  background-color: black;
+}
+
+#creator {
+  top: 25%;
+  background-color: black;
+}
+
+.metadata_Creator{
+  position: absolute;
+  top:20%;
+  font-size: 18px;
+  background-color: grey;
+  padding: 3px 5px 3px 30px;
+  color: black;
+}
+
+.metadata_Creator a:hover{
+  color: blue;
+  text-decoration: none;
+}
+
+
+
+#myDIV {
+  display: none;
+  position: absolute;
+  width: 48%;
+  height: auto;
+  left:26%;
+  top:15%;
+  /*padding: 50px 0;*/
+  text-align: center;
+  background-color: grey;
+  margin-top: 20px;
+  z-index: 4;
+  opacity:0.8;
+  font-size: 15px;
+}
+
+#myDIV a:hover{
+  color: blue;
+}
+
+
+.orgbtn {
+  position: relative;
+  border: none;
+  outline: none;
+  width: 15%;
+  left:11%;
+  text-align: center;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  background-color: grey;
+  color: grey;
+  cursor: pointer;
+  font-size: 18px;
+  /*margin-right: 5px;*/
+}
+
+.orgbtn:hover {
+ background-color: black;
+ color:white; 
+} 
+
+
+.square {
+  display: block;
+  position: absolute;
+  width: 50%;
+  height: 80%;
+  left:25%;
+  top:11%;
+  text-align: center;
+  background-color: transparent;
+  z-index: 2;
+  border-color: black;
+  border: solid 5px;
+}
--- a/templates/about.html
+++ b/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>
--- a/templates/default.html
+++ b/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>
--- a/templates/document.html
+++ b/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>
-
--- a/templates/document1.html
+++ b/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>
+#}
--- a/templates/document2.html
+++ b/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>
+#}
--- a/templates/document_part.html
+++ b/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>
--- a/templates/format.html
+++ b/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>
--- a/templates/index.html
+++ b/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>
+
--- a/templates/language.html
+++ b/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>
--- a/templates/orgs.html
+++ b/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>
--- a/templates/statistics.html
+++ b/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>
--- a/templates/timeline.html
+++ b/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>
--- a/templates/title.html
+++ b/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>
--- a/templates/topic.html
+++ b/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>
--- a/titles.json
+++ b/titles.json
Author	SHA1	Message	Date
Your Name	e9cc85cc9c	margin top about page	4 years ago
Your Name	34b0a701d2	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Your Name	79ac680a70	final changes	4 years ago
E.zn	2b307f969f	Padding top	4 years ago
Sandra	e1e1d6d9de	padding n stuff	4 years ago
E.zn	b71558cca8	Ioana#4	4 years ago
E.zn	3d6d7ac5fc	Ioana#3	4 years ago
Sandra	cdbb3e77fa	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Sandra	64a78e48ee	grid fixes	4 years ago
E.zn	86177862c8	Iona#2	4 years ago
Damlanur	44d0024c97	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Damlanur	013a1c7d97	typo fixed in topicformat.css	4 years ago
E.zn	fb6b0fd74b	>>	4 years ago
Sandra	c520b30f93	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Sandra	18e826812b	h1	4 years ago
Damlanur	16a27445cd	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Damlanur	16c458d6a4	timeline css and html	4 years ago
Sandra	843cc1e518	bottom	4 years ago
Your Name	1a3757fd1b	navigation acitve	4 years ago
ioanatomici	047ebc6128	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
ioanatomici	47b6b5edb0	edited timeline css and html templates	4 years ago
Damlanur	ccabaab534	image width	4 years ago
Damlanur	8936a53ba8	css changes	4 years ago
Damlanur	46b8728eaa	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Damlanur	796987aeae	slashes fix on templates	4 years ago
E.zn	3ab051345d	G	4 years ago
ioanatomici	29ec4c4b24	edited timeline css and html templates	4 years ago
ioanatomici	1ffcaad7fc	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
ioanatomici	b21b2cc911	edited timeline css and html templates	4 years ago
E.zn	fae72f67a9	btn	4 years ago
Your Name	802a5248c2	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Your Name	61dbe9383b	navigation style	4 years ago
ioanatomici	98560ae573	edited timeline css and html templates	4 years ago
ioanatomici	22c9825112	edited timeline css and html templates	4 years ago
Damlanur	86577e1108	stats css Changes	4 years ago
Damlanur	fbe4bd8258	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Damlanur	5fc6231bee	fixed margin issue on stats	4 years ago
E.zn	2180fdaa09	Ioana	4 years ago
E.zn	9deaa75084	Buttons	4 years ago
Damlanur	b8b40746cb	css Changes	4 years ago
Damlanur	feb863723d	css changes to topicformat.css	4 years ago
Damlanur	1c33b080ef	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Damlanur	4b88dc81ef	stat template stat css	4 years ago
E.zn	765468b821	z	4 years ago
Your Name	659766748d	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Your Name	209f85434f	z index	4 years ago
E.zn	d56cd300da	----	4 years ago
Sandra	44258c5185	layout btn	4 years ago
Your Name	211fdfc986	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Your Name	b53694bbd6	centeringstuff	4 years ago
Sandra	dc636acba8	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Sandra	377c27a529	view btns	4 years ago
ioanatomici	bf07f294de	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
ioanatomici	68c0e98358	edited timeline css and html templates	4 years ago
E.zn	0d976cd949	-icon in the title	4 years ago
Sandra	df15d8c230	icons	4 years ago
Damlanur	b01b442f80	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Damlanur	26428d2c52	css changes	4 years ago
Your Name	68ccf2ae7d	about styling	4 years ago
Your Name	061f84e0bf	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Your Name	a448b43e94	style changes	4 years ago
acastro	4a943f9a7f	Merge branch 'imglink' of XPUB/special-issue-11-wiki2html into master	4 years ago
Castro0o	e1fb598cf4	Overview main page: img link to publication pages	4 years ago
Castro0o	11fe0bf03b	Overview main page: image as links (wip)	4 years ago
Castro0o	903bc06a2f	Merge branch 'master' of ssh://git.xpub.nl:2501/XPUB/special-issue-11-wiki2html into imglink	4 years ago
Sandra	fc7d9950c2	icons	4 years ago
Sandra	7c7f2ca52b	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Sandra	3ee99858f7	h1 width	4 years ago
E.zn	92622ad9ab	x	4 years ago
E.zn	c773995dc9	almost there	4 years ago
Sandra	40788358fe	icon size	4 years ago
Damlanur	8c232395d6	css Changes	4 years ago
Damlanur	1d6026da5f	css Changes	4 years ago
ioanatomici	ce9798e94a	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
ioanatomici	ed660b71e7	edited contents of <title> and <h1>	4 years ago
Your Name	c423548258	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Your Name	5d797dc1ac	about page	4 years ago
Castro0o	9b5f9a0876	Merge branch 'master' of ssh://git.xpub.nl:2501/XPUB/special-issue-11-wiki2html	4 years ago
Castro0o	2cfa36b9d9	dumpwiki.py copy ./static to ../archive/static and points to it on templates	4 years ago
ioanatomici	1d315a534c	updated timeline.css	4 years ago
Castro0o	f2d52d4e18	Merge branch 'master' of ssh://git.xpub.nl:2501/XPUB/special-issue-11-wiki2html into imglink	4 years ago
Your Name	d9884ef784	about page	4 years ago
Castro0o	875de65e35	TODO overview page	4 years ago
Damlanur	5a9751ca28	language template added changes 2 css changes 2 templates	4 years ago
Castro0o	4426fbca8b	image parent links: link to image file	4 years ago
E.zn	cf532723f8	---	4 years ago
E.zn	abb57a1353	--	4 years ago
Michael Murtaugh	dea78943e0	dump (main) pages tagged with Category:Publish as well, added --skipimages option for testing	4 years ago
Sandra	bcf1c1a981	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Sandra	68d8715f6f	button layout	4 years ago
E.zn	3acf149c38	cursors	4 years ago
E.zn	98509bca81	color	4 years ago
E.zn	48db7d45c3	line spacing edit after removing </p>	4 years ago
E.zn	f32c388d72	padding	4 years ago
E.zn	75de0645a1	freshface	4 years ago
Damlanur	2d7e8f5074	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Damlanur	91037bac2f	added font	4 years ago
E.zn	a09e40d7ab	Merge branch 'master' of ssh://git.xpub.nl:2501/XPUB/special-issue-11-wiki2html	4 years ago
Sandra	bf029b5ddc	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
E.zn	bef87c3247	indentation	4 years ago
Sandra	780ef2e296	title css	4 years ago
Damlanur	7ffa2a3303	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Damlanur	ffd8d78d35	+topic template +topic/format css	4 years ago
Your Name	553067c86c	added folders	4 years ago
Sandra	0569d746a8	title css	4 years ago
Sandra	5ff08005e3	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Sandra	d7bbacc5a7	title page htext	4 years ago
Castro0o	9ef1e86009	removed uncessary reference to printout_dict	4 years ago
Sandra	01fec0b462	title page changes	4 years ago
Your Name	fa55b4f397	add font	4 years ago
Sandra	359df675a4	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Sandra	bb72f56f57	title css	4 years ago
Your Name	0c47428159	css changes	4 years ago
E.zn	974933b5f2	js in it	4 years ago
E.zn	c88d426dea	Merge branch 'master' of ssh://git.xpub.nl:2501/XPUB/special-issue-11-wiki2html	4 years ago
E.zn	143c5c9446	orgs.css	4 years ago
Your Name	dcf3228373	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Your Name	8986251da3	index changes	4 years ago
E.zn	a3e66a04d7	orgs.html	4 years ago
E.zn	ebe8ba23a8	-	4 years ago
E.zn	78fe9d7359	orgs.html	4 years ago
Your Name	b0d77bf931	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Your Name	82c48e12d4	js in template	4 years ago
Castro0o	64d738bcde	removed print	4 years ago
Castro0o	fc1562bbd1	timeline css: horizontal divs	4 years ago
acastro	a95c47ed85	Merge branch 'img_without_a' of XPUB/special-issue-11-wiki2html into master	4 years ago
Castro0o	245b52c628	removing unecessary hyphen replacement (which i introduced)	4 years ago
Castro0o	27cc21a58a	disabeling links to wiki File pages	4 years ago
Michael Murtaugh	fa837a3791	added back missing ET.tostring in rewritelinks	4 years ago
acastro	f975fcaaff	Merge branch 'localimages' of XPUB/special-issue-11-wiki2html into master	4 years ago
Castro0o	984a96156b	removed --local	4 years ago
Castro0o	bf66a2d572	images: remote, local, archoive	4 years ago
Castro0o	5de30ed9ca	readme edit	4 years ago
Castro0o	63422103a2	download_imgs.py saving images to images/ in partent directory	4 years ago
ioanatomici	c2cb9d1de3	timeline.css	4 years ago
Castro0o	c0ad1dd621	writing html content to file	4 years ago
ioanatomici	25092cb9dd	no encoding error	4 years ago
Castro0o	0b29abe5b7	replacing hyphen	4 years ago
Castro0o	652d069c35	removing imgs srcset value	4 years ago
Your Name	7853740b7f	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Your Name	f130c8d70e	index template	4 years ago
Castro0o	a9fed3c9a4	timeline: template + css	4 years ago
Sandra	3e56a6c8f6	title link css	4 years ago
Sandra	3ee390bd98	title page css js	4 years ago
Sandra	c9e552a95d	image css	4 years ago
Sandra	a09633dc8f	img grid	4 years ago
Sandra	f59f9f76f1	css and js for title page	4 years ago
Castro0o	550442b4fc	documentation git pull in archive	4 years ago
Castro0o	3b5145d2b1	test (empty commit)	4 years ago
Castro0o	b59d8bae0e	added var staticpath to templates to allow JS/CSS files to be reached with running on --local or archive	4 years ago
acastro	72e71019ea	Merge branch 'archive_local' of XPUB/special-issue-11-wiki2html into master	4 years ago
Castro0o	4b09546c7f	option --local; documentation	4 years ago
Michael Murtaugh	d4fc79c742	urlquote/unquote for link rewriting	4 years ago
Sandra	399e49a58e	href	4 years ago
Michael Murtaugh	426889e00d	filenameforhref	4 years ago
Sandra	a57bfedd68	something	4 years ago
Michael Murtaugh	bf73e71300	rewritelinks starting	4 years ago
Sandra	61b4fe977e	Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html	4 years ago
Sandra	04e82c7206	publish cat	4 years ago
Castro0o	6837389a7e	adding ignore line for archive/ dir	4 years ago
Castro0o	88bf0a0b83	Merge branch 'master' of ssh://git.xpub.nl:2501/XPUB/special-issue-11-wiki2html	4 years ago
Sandra	8cbc1af235	fix slash	4 years ago
Sandra	ba677cf33a	title_html	4 years ago
Sandra	08aac084bc	dumpwiki	4 years ago
Sandra	74350d0ca6	Merge branch 'itempage'	4 years ago
Slayr	201b11de4d	query and css changes	4 years ago
Castro0o	4f2560ab71	popuylate all title value pages	4 years ago
E.zn	52d917c48c	title pages -- py/json	4 years ago
E.zn	48f304d903	-	4 years ago
E.zn	a69159e337	populate title pages [json/py]	4 years ago
Castro0o	36642f6e14	relative image path	4 years ago
Castro0o	e5bcb3ab91	generating document html pages with images in 4 columns rows	4 years ago
Castro0o	2636d37b97	remove document parts leftovers; saving document template rendering to disk	4 years ago
Castro0o	239bd2cb08	all imgs (parts) of document to document.html template	4 years ago
Slayr	51e62b6753	jinja	4 years ago
Slayr	66c9e1afd4	item page tryout	4 years ago