Add auto-rendering of lab sheet to build script
continuous-integration/laminar-elessar Build 65 succeeded in 1 minute 18 seconds . Details

This commit is contained in:
Starbeamrainbowlabs 2019-10-21 13:08:54 +01:00
parent 449c17e946
commit f6bfba4b6a
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
2 changed files with 144 additions and 2 deletions

27
build
View File

@ -58,6 +58,8 @@ task_setup() {
check_command git true;
check_command node true;
check_command npm true;
check_command pandoc true;
check_command weasyprint true;
task_begin "Creating build output directory";
mkdir -p "${build_output_folder}";
@ -118,13 +120,34 @@ task_main-watch() {
task_main() {
tasks_run js-css;
if [ ! -d "${build_output_folder}/201" ]; then
task_begin "Creating 201 output subdirectory";
mkdir "${build_output_folder}/201";
task_end "$?";
fi
task_begin "Copying html";
cp index.html "${build_output_folder}";
task_end $?;
cp 201/index.html "${build_output_folder}/201";
task_end "$?";
task_begin "Copying images";
cp -r images/ "${build_output_folder}";
task_end $?;
task_end "$?";
task_begin "Rendering lab sheets: markdown -> html [phase 1/3]";
pandoc 201/Lab-Sheet.md --standalone --output 201/Lab-Sheet.html;
task_end "$?";
task_begin "Rendering lab sheets: html -> pdf [phase 2/3]";
weasyprint 201/Lab-Sheet.html 201/Lab-Sheet.pdf --stylesheet css/lab-sheet.css --format pdf --verbose;
exit_code="$?";
rm 201/Lab-Sheet.html;
task_end "${exit_code}";
task_begin "Rendering lab sheets: archiving [phase 3/3]";
mv 201/Lab-Sheet.pdf "${build_output_folder}/201";
task_end "$?";
}
task_js-css() {

119
css/lab-sheet.css Normal file
View File

@ -0,0 +1,119 @@
/* Base CSS */
/*
* This CSS file contains (for me) logical style defaults that are easy to read.
*
* This file is quite often used as a starting point for other projects.
*
* Todo:
* <button>
* <inputs>
* <progress>
* <meter>
*/
/* rem is relative to the html element, and em is relative to the current element. */
html { font-size:100%; }
body
{
font-family: sans-serif; /* Serif is awful :( */
background: #f3f3f3; /* Don't forget to update the @page one too for paged media */
color: #232323;
}
title { string-set: page-title content(text); }
/* Special tweaks for paged media (e.g. PDFs) */
@page {
font-family: sans-serif;
background: #f3f3f3; /* Set the background colour to cover the whole page */
@top-left {
content: "Freeside Linux 201 - Web Server Setup";
opacity: 0.6;
}
@top-right {
content: "By Starbeamrainbowlabs and @closebracket";
opacity: 0.6;
}
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
opacity: 0.6;
}
}
/* A small tweak to things more responsive */
iframe, object, embed, img, video, table {
max-width: 100%;
}
/* Turn the user's cursor into a hand when over things they can click */
button, summary {
cursor: pointer;
}
th, td {
margin: 4px 6px;
padding: 4px 6px;
}
pre { page-break-inside: avoid; break-inside: avoid; }
pre, code {
white-space: pre-wrap;
-moz-tab-size: 4;
tab-size: 4;
}
/* todo add the rest of the textbox like inputs here */
input[type=text], input[type=number], textarea {
margin: 3px 5px;
padding: 5px 8px;
background: white;
border: 0;
border-radius: 5px;
}
/* Utility / layout aids */
.float.left { float: left; }
.float.right { float: right; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }
.flex-6 { flex: 6; }
.small-spacing { margin: 2px 4px; padding: 2px 4px; }
.med-spacing { margin: 5px 8px; padding: 5px 8px; }
.high-spacing { margin: 8px 10px; padding: 8px 10px; }
.text-left { text-align: left; }
.text-centre { text-align: center; }
.text-right { text-align: right; }
.small-text { font-size: 0.8rem; }
.medium-text { font-size: 1rem; }
.large-text { font-size: 1.3rem; }
.bold-text { font-weight: bolder; }
.block { display: block; }
.inline { display: inline; }
.inline.block { display: inline-block; }
.invisilink { text-decoration: none; color: inherit; }
.invisilist { list-style-type: none; margin: 5px; padding: 5px; }
.tiny-image { max-width: 100px; max-height: 100px; }
.small-image { max-width: 250px; max-height: 250px; }
.medium-image { max-width: 450px; max-height: 450px; }
.large-image { max-width: 650px; max-height: 650px; }
.img-text-middle{ vertical-align: middle; }