onebigear
/
special-issue-11-wiki2html
forked from XPUB/special-issue-11-wiki2html
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'itempage'

Browse Source
master
Sandra 5 years ago
parent 51e62b6753 201b11de4d
commit 74350d0ca6
5 changed files with 296 additions and 65 deletions
Show Stats Download Patch File Download Diff File

48
query2html.py
Unescape Escape View File

@ -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,

198
static/style.css
Unescape Escape View File

@ -1,14 +1,196 @@
body{font-size: 12pt;}
div.part {border: 1px solid #e5e5e5;
margin-bottom: 10px;
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #aaa4a0;
}
/*div.row {display: inline; }
div.column { display: inline; }
div.column img{ width:24%; }*/
.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;
}
.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;
padding: 20px;}
}
.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;
}
div#content img {width: 50%;}
div.metadata span.key {color: red;
font-weight: bold;}
#orc {color:blue;}
.fbtn {
font-style: italic;
}

81
templates/document.html
Unescape Escape View File

@ -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>

31
templates/document_part.html
Unescape Escape View File

@ -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>

1
templates/index.html
Unescape Escape View File

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<link rel="stylesheet" href="../static/style.css" />
</head>
<body>
<h3>Resultsss from query:<br/><code>{{query}}</code></h3>

Write Preview
Loading…
Cancel
Save