pushing updates

command-line/css/print.css

@@ -62,7 +62,12 @@ html, body{
 }
 @page:right{
     margin: 15mm 20mm 17mm 30mm;
-
+}
+@page:left{
+    margin: 15mm 30mm 17mm 20mm;
+}
+@page main:right{
+    /* running header: contribution title (h2) */
     @top-center{
         content: string(contributiontitle);
         font-size: 8pt;
@@ -70,69 +75,97 @@ html, body{
         margin-top: 5mm;
     }
 }
-@page:left{
+@page main:left{
-    margin: 15mm 30mm 17mm 20mm;
+    /* running header: section title (h1) */
-
     @top-center{
-        content: string(sectiontitle);
+        content: element(sectiontitle);
         font-size: 8pt;
         text-transform: uppercase;
         margin-top: 5mm;
     }
 }
+@page section{
+    background-color: lightyellow;
+
+    @top-center{
+        content: none;
+    }
+}
+@page introduction{
+    /* exception running-header for the introduction */
+    @top-center{
+        content: element(introductiontitle);
+    }
+}
 @page:first{
     background-color: #b89ee6;
 
-    @top-left{
-        content: "";
-    }
     @top-center{
-        content: "";
+        content: none;
     }
     @bottom-center{
-        content: "";
+        content: none;
+    }
+}
+@page backcover{
+    background-color: #b89ee6;
+
+    @top-center{
+        content: none;
+    }
+    @bottom-center{
+        content: none;
     }
 }
 @page nomarks{
-    @top-left{
+
-        content: "";
-    }
     @top-center{
-        content: "";
+        content: none;
     }
     @bottom-center{
-        content: "";
+        content: none;
     }
 }
-@page:blank{    
+@page:blank{ 
-    @top-left{
+
-        content: "";
-    }
     @top-center{
-        content: "";
+        content: none;
     }
     @bottom-center{
-        content: "";
+        content: none;
     }
 }
 
 /* sections */
 
 div.section{
-    page-break-before: right;
+    page: main;
+    /* force an extra blank page before each section ... */
+    page-break-before: always;
 }
+    div.section.foreword_and_introduction{
+        page: main;
+        /* reset this extra page break for the foreword + introduction section (does not work?) */
+        page-break-before: none !important;
+    }
+    div.section h1{
+        page: section;
+        /* ... and make sure that each section starts on the right */
+        page-break-before: right;
+    }
 
-/* sub-sections */
+/* sub-sections -- page flows */
+div.multi,
+div.foreword, 
 div.introduction, 
 div.contribution{
     page-break-before: right; 
 }
-    div.introduction h1{
+    div.introduction{
-        display: none;
+        page: introduction;
     }
-div.cover.second,
+div.section.nomarks,
-div.multi,
+div.section.toc{
-div.series{
     page: nomarks;
 }
 div.cover.second,
@@ -143,13 +176,21 @@ div.series{
 div.appendix{
     page-break-before: always;
 }
+div.backcover{
+    page-break-before: always;
+    page: backcover;
+}
 
-div.cover{
+/* sub-sections -- lay-out rules */
+
+div.cover,
+div.backcover{
     hyphens: none;
     margin: -10mm 0 0 10mm;
 }
     div.cover,
-    div.cover ul li{
+    div.cover ul li,
+    div.backcover h2{
         font-size: 17pt;
         font-family: "bitter_semi";
         line-height: 1.4;
@@ -169,6 +210,15 @@ div.cover{
     div.cover.second ul li{
         color: black;
     }
+    div.backcover{
+    }
+        div.backcover h2{
+            margin-left: 0;
+        }
+        div.backcover p{
+            margin-bottom: 1em;
+            color: white;
+        }
 div.series{
     font-size: var(--small-font-size);
     line-height: var(--small-line-height);
@@ -181,18 +231,43 @@ div.series{
         column-gap: 5mm;
         column-fill: auto;
     }
-div.index{
+
+/* Table of Contents */
+div.toc *{
+    font-size: var(--font-size);
 }
-    div.index h3{
+    div.toc p:first-of-type{
-        margin: 1em 0 !important;
+        font-size: 17pt !important;
+        font-family: "bitter_semi";
+        line-height: 1.4;
+        letter-spacing: 0.025em;
+        margin: -10mm 0 1em 10mm !important;
     }
+    div.toc a::before{
+        content: target-counter(attr(href url), page);
+        float: left;
+        margin-left: -3em;
+    }
+    div.toc p{
+        margin-top: 1em;
+    }
+    div.toc ul{
+        margin: 1em 0 0 3em;
+        /*page-break-inside: avoid;*/
+        /*page-break-before: avoid;*/
+    }
+        div.toc ul li{
+            margin-bottom: 0.5em;
+        }
+
 div.introduction,
 div.contribution{
 }
-    /* author names */
+    div.introduction h1{
+        display: none;
+    }
     div.contribution h2 + p > b{
         font-weight: normal;
-        margin-left: var(--second-indent);
     }
 ol.references,
 ul /* This is tricky as it has no class, so these styles are applied to ALL ul elements */{
@@ -204,8 +279,9 @@ ul /* This is tricky as it has no class, so these styles are applied to ALL ul e
     margin: 0 1em;
     padding: 0;
 }
+    /* exceptions of columns */
     div.cover ul,
-    div.index ul{
+    div.toc ul{
         columns: unset;
     }
     ul li{
@@ -213,23 +289,33 @@ ul /* This is tricky as it has no class, so these styles are applied to ALL ul e
         text-indent: -1em;
     }
         div.cover ul li,
-        div.index ul li{
+        div.toc ul li{
             text-indent: 0;
         }
+div.item_index{
+}
+    div.item_index a::after{
+        content: target-counter(attr(href), page);
+        float: right;
+    }
 
 /* general elements*/
 
 h1{
-    string-set: sectiontitle content(text); 
+    /* section titles */
     font-size: 37pt;
     line-height: 1.15;
     margin: 0;
     word-break: normal;
     hyphens: none;
 }
+    /* h1's are preceded by a <span class="running-header"></span> */
+    .running-header{
+        position: running(sectiontitle);
+    }
 h2{
     /* Contribution titles */
-    string-set: contributiontitle content(text);
+    string-set: contributiontitle content(text) !important; /* using data attributes in HTML to save short versions of the title -- edited on the wiki */
     font-family: "bitter_semi";
     font-size: 16pt;
     line-height: 22pt;
@@ -237,6 +323,10 @@ h2{
     margin: 0 0 1em var(--second-indent);
     hyphens: none;
 }
+    div.foreword .running-header,
+    div.introduction .running-header{
+        position: running(introductiontitle);
+    }
 h3{
     /* Sub-headers + Notes/References sections + TOC headers*/
     font-size: 100%;
@@ -269,8 +359,13 @@ p{
     margin: 0;
     padding: 0;
 }
+    /* all exceptions on the text-indent */
+    div.toc p,
+    h2 + p,
+    h3 + p,
     div.series p,
     div.cover p,
+    div.backcover p,
     blockquote p{
         text-indent: unset !important;
     }
@@ -281,9 +376,9 @@ img{
     position: relative;
     display: block;
     width: 115mm; /* estimation of the full text width */
-    /*height: auto;*/
+    height: auto;
-    max-height: 220mm;
+    max-height: 200mm;
-    margin: 0 0 1em 0;
+    margin: 1em 0 1em 0;
 }
     .thumb{
         /* sometimes wrapper of img + image caption */
@@ -312,7 +407,7 @@ table{
 sup{
     line-height: 0;
     font-size: 7pt;
-    padding-left: 0.5mm;
+    padding-left: 0.15mm;
 }
 canvas{
     position: absolute;
@@ -344,3 +439,4 @@ a.external{
     }
 }
 
+

command-line/templates/template.html

@@ -6,6 +6,7 @@
 	<script src="./js/paged.polyfill.js" type="text/javascript"></script>
 	<link href="./css/interface.css" rel="stylesheet" type="text/css">
 	<link href="./css/print.css" rel="stylesheet" type="text/css" media="print">
+	<!-- <script src="https://gitlab.com/aesthetic-programming/book/-/raw/master/public/p5_SampleCode/libraries/p5.js"></script> -->
 </head>
 <body>
 	<div id="wrapper">

command-line/update.py

@@ -80,14 +80,76 @@ def download_media(html, images, wiki):
 
 	return html
 
-def split_h2_header(html):
+def insert_variable_geometry(html):
+	vg = """
+<script>
+	/*Sketch.js from the Chapter Variable Geometry in Aesthetic Programming - A Handbook of Software Studies, by Winnie Soon & Geoff Cox (2020) - http://aesthetic-programming.net/*/
+
+	/*Inspired by David Reinfurt's work - Multi*/
+	let moving_size = 50;
+	let static_size = 20;
+
+	function setup() {
+		createCanvas(windowWidth, windowHeight);
+		frameRate(15);
+	}
+
+	function draw() {
+		//background
+		background(230);
+		//left
+		noStroke()
+		fill(0);
+		rect(97, 169, 79, 12);
+
+		//right
+		rect(365, 184, 20, 15);
+		fill(20, 20, 120);
+
+		beginShape();
+		vertex(365, 199);
+		vertex(385, 199);
+		vertex(372, 216);
+		vertex(358, 216);
+		endShape(CLOSE);
+
+		//bottom
+		noFill();
+		stroke(130);
+		strokeWeight(2);
+		ellipse(255, 350, static_size, static_size);
+
+		//mouse interactions
+		stroke(180);
+		ellipse(mouseX, mouseY, moving_size, moving_size);
+
+		if (mouseIsPressed) {
+			static_size = floor(random(5, 20));
+		}
+	}
+</script>"""
+	html = html.replace("$multi", vg)
+	return html
+
+def add_item_inventory_links(html):
 	"""
 		html = string (HTML)
-		DOES NOT WORK YET!
 	"""
-	pattern = '<h2><span class="mw-headline" id=".*?">.*?:.*?</h2>' # split the h2 in two on the ":"
+	pattern = r'Item \d\d\d'
-	result = re.split(pattern, html) 
+	matches = re.findall(pattern, html)
-	# print(result[0])
+	index = {}
+	for match in matches:
+		number = match.replace('Item ', '').strip()
+		if not number in index:
+			index[number] = []
+			count = 1
+		else:
+			count = index[number][-1] + 1
+		index[number].append(count)
+		item_id = f'{ number }-{ index[number][-1] }'
+		html = html.replace(match, f'Item <a id="{ item_id }" href="#Item_Index">{ number }</a>')
+	import json
+	print(json.dumps(index, indent=4))
 	return html
 
 def clean_up(html):
@@ -113,7 +175,8 @@ def parse_page(pagename, wiki):
 		images = data['parse']['images']
 		html = download_media(html, images, wiki)
 		html = clean_up(html)
-		html = split_h2_header(html)
+		html = add_item_inventory_links(html)
+		# html = insert_variable_geometry(html)
 	else: 
 		html = None
 

web-interface/update.py

@@ -81,6 +81,78 @@ def download_media(html, images, wiki):
 
 	return html
 
+def insert_variable_geometry(html):
+	vg = """
+<script>
+	/*Sketch.js from the Chapter Variable Geometry in Aesthetic Programming - A Handbook of Software Studies, by Winnie Soon & Geoff Cox (2020) - http://aesthetic-programming.net/*/
+
+	/*Inspired by David Reinfurt's work - Multi*/
+	let moving_size = 50;
+	let static_size = 20;
+
+	function setup() {
+		createCanvas(windowWidth, windowHeight);
+		frameRate(15);
+	}
+
+	function draw() {
+		//background
+		background(230);
+		//left
+		noStroke()
+		fill(0);
+		rect(97, 169, 79, 12);
+
+		//right
+		rect(365, 184, 20, 15);
+		fill(20, 20, 120);
+
+		beginShape();
+		vertex(365, 199);
+		vertex(385, 199);
+		vertex(372, 216);
+		vertex(358, 216);
+		endShape(CLOSE);
+
+		//bottom
+		noFill();
+		stroke(130);
+		strokeWeight(2);
+		ellipse(255, 350, static_size, static_size);
+
+		//mouse interactions
+		stroke(180);
+		ellipse(mouseX, mouseY, moving_size, moving_size);
+
+		if (mouseIsPressed) {
+			static_size = floor(random(5, 20));
+		}
+	}
+</script>"""
+	html = html.replace("$multi", vg)
+	return html
+
+def add_item_inventory_links(html):
+	"""
+		html = string (HTML)
+	"""
+	pattern = r'Item \d\d\d'
+	matches = re.findall(pattern, html)
+	index = {}
+	for match in matches:
+		number = match.replace('Item ', '').strip()
+		if not number in index:
+			index[number] = []
+			count = 1
+		else:
+			count = index[number][-1] + 1
+		index[number].append(count)
+		item_id = f'{ number }-{ index[number][-1] }'
+		html = html.replace(match, f'Item <a id="{ item_id }" href="#Item_Index">{ number }</a>')
+	import json
+	print(json.dumps(index, indent=4))
+	return html
+
 def clean_up(html):
 	"""
 		html = string (HTML)
@@ -104,6 +176,8 @@ def parse_page(pagename, wiki):
 		images = data['parse']['images']
 		html = download_media(html, images, wiki)
 		html = clean_up(html)
+		html = add_item_inventory_links(html)
+		# html = insert_variable_geometry(html)
 	else: 
 		html = None