path: root / src / INIT.du

'hide Necessary definitions for all pages under src

'if {or {empty {env OUTPUT_FORMAT}};{eq HTML;{env OUTPUT_FORMAT}}}

# FILENAME

'def FILENAME {trimEnd {1};du}html

# HEADER

Expected substitutions:
title - Page title
desc  - Page description

'def HEADER <!DOCTYPE html>\
<html lang="en">\
\
<head>\
	<meta charset="UTF-8">\
	<meta name="author" content="Kamen Mladenov">\
	<meta name="robots" content="index, follow">\
	<link rel="icon" href="/img/favicon.ico" type="image/x-icon">\
	<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">\
	<meta name="theme-color" content="#ffffff"/>\
	<meta name="viewport" content="width=device-width, initial-scale=1.0">\
	<link rel="stylesheet" href="/styles.css">\
	<link rel="stylesheet" href="/darkmode.css">\
	<link rel="stylesheet" href="/hide-js-styling.css">\
	<link rel="stylesheet" href="/presentation.css">\
	<link rel="stylesheet" href="./machine_table.css" id="upp2025_w02" disabled>\
	<script type="text/javascript" src="/scripts/styling-preload.js" crossorigin="anonymous"></script>\
	<meta name="description" content="{truncate {desc};120}">\
	<!-- Thanks https://stackoverflow.com/a/25093272/12036073 -->\
	<meta prefix="og: http://ogp.me/ns#" property="og:type" content="website">\
	<meta prefix="og: http://ogp.me/ns#" property="og:title" content="{title} &mdash; Syndamia">\
	<meta prefix="og: http://ogp.me/ns#" property="og:description" content="{truncate {desc};120}">\
	<meta prefix="og: http://ogp.me/ns#" property="og:image" content="https://syndamia.com/img/meta-banner.png">\
	<meta prefix="og: http://ogp.me/ns#" property="og:url" content="https://syndamia.com">\
	<title>{title} &mdash; Syndamia</title>\
</head>\
<body id="content-wrapper" text="black" bgcolor="white" link="#336700" vlink="#336700">\
	<span class="nocss-aid"><a href="#article-container">Jump to content</a><br><br></span>\
\
	<nav id="sidebar">\
		<nav id="header" class="sidebar-section">\
			<span class="nocss-aid">&#x25B2;</span>\
			<a href="/">Home</a>\
			<span id="expandNavbarBtn" class="btn">&#x25B2;</span>\
			<script type="text/javascript" src="/scripts/expand-navbar.js" crossorigin="anonymous" defer></script>\
			<span class="nocss-aid"><br></span>\
		</nav>\
\
		<nav id="index" class="sidebar-section">\
			<span class="nocss-aid">&boxvr;</span>\
\
			<span>Text</span><span class="nocss-aid"> &ndash; </span>\
			<span class="index-list">\
				<a class="index-list-item" href="/blog">Blog</a>\
				<span class="nocss-aid">&bull;</span>\
				<a class="index-list-item" href="/teaching">Teaching</a>\
			</span>\
\
			<span class="nocss-aid"><br>&boxvr;</span>\
\
			<span>Interactive</span><span class="nocss-aid"> &ndash; </span>\
			<span class="index-list">\
				<a class="index-list-item" href="/slides">Slides</a>\
				<span class="nocss-aid">&bull;</span>\
				<a class="index-list-item" href="/preserved-web-pages">Preserved web</a>\
			</span>\
\
			<span class="nocss-aid"><br>&boxvr;</span>\
\
			<span>Files</span><span class="nocss-aid"> &ndash; </span>\
			<span class="index-list">\
				<a class="index-list-item" href="/preserved-media">Archived media</a>\
				<span class="nocss-aid">&bull;</span>\
				<a class="index-list-item" href="/misc">Miscellaneous</a>\
			</span>\
\
			<span class="nocss-aid"><br>&boxur;</span>\
\
			<span>Me</span><span class="nocss-aid"> &ndash; </span>\
			<span class="index-list">\
				<a class="index-list-item" href="/about">About</a>\
				<span class="nocss-aid">&bull;</span>\
				<a class="index-list-item" href="/setup">Setup</a>\
			</span>\
			<span class="nocss-aid"><br></span>\
		</nav>\
\
		<!-- This nav is entirely removed in tiny website -->\
		<nav id="settingsWrapper" class="sidebar-section">\
			<span id="changeThemeBtn" class="btn setting-btn"><span>Light</span> theme</span>\
			<span id="changeWidthBtn" class="btn setting-btn"><span>Wide</span> text</span>\
			<span id="snowBtn" class="btn setting-btn nodisplay"><span>Remove</span> snowflakes</span>\
		</nav>\
\
		<span class="nocss-aid"><br></span>\
\
		<nav id="footer" class="sidebar-section">\
			<span class="nocss-aid">&boxDR;</span>\
\
			<a href="/license.html" title="CC BY-SA 4.0 and GNU GPLv3">CC BY-SA 4.0 and GNU GPLv3</a>\
\
			<span class="nocss-aid"><br>&boxV;</span><span class="brt"></span>\
\
			<a href="/privacy.html" title="Privacy policy">Privacy policy</a> &bull;\
			<a href="/accessibility.html" title="Accessibility">Accessibility</a><span class="br"></span><span class="nocss-aid"> &bull;</span>\
			<a href="/regarding-js.html" title="Regarding usage of JavaScript">Regarding JavaScript</a><span class="br"></span><span class="nocss-aid"> &bull;</span>\
			<a href="/acknowledgements.html" title="Acknowledgements">Acknowledgements</a><span class="br"></span>\
\
			<span class="nocss-aid"><br>&boxV;</span><span class="brt"></span>\
\
			<a href="https://gitlab.com/Syndamia" target="_blank" title="GitLab">GitLab</a> &bull;\
			<a href="https://github.com/Syndamia" target="_blank" title="GitHub">GitHub</a> &bull;\
			<a href="/about/#contact" target="_blank" title="Contact">Contact</a><span class="br"></span><span class="nocss-aid"> &bull;</span>\
			<a href="https://bg.linkedin.com/in/kamen-mladenov" target="_blank" title="Linkedin">LinkedIn</a><span class="br"></span>\
\
			<span class="nocss-aid"><br>&boxUR;</span><span class="brt"></span>\
\
			<a href="https://gitlab.com/Syndamia/syndamiadotcom" target="_blank" class="link-tab">Powered with:</a><span class="br"></span>\
			<a href="https://gitlab.com/Syndamia/dunbar" target="_blank" class="link-tab">dunbar</a><span class="br"></span><span class="nocss-aid">, </span>\
			<a href="https://invisible-island.net/mawk/" target="_blank" class="link-tab">mawk</a><span class="br"></span><span class="nocss-aid">, </span>\
			<a href="https://www.gnu.org/software/bash/" target="_blank" class="link-tab">GNU bash</a><span class="br"></span><span class="nocss-aid">, </span>\
			<a href="http://andre-simon.de/doku/highlight/en/highlight.php" target="_blank" class="link-tab">Highlight</a>\
		</nav>\
	</nav>\
\
	<article>\
		<script type="text/javascript" src="/scripts/page-width.js" crossorigin="anonymous" defer></script>\
		<script type="text/javascript" src="/scripts/snow-preload.js" crossorigin="anonymous" defer></script>\
		<div id="article-container">{def href_section;0}{def href_url;0}{def slide;0}{def URL;{trimStart {query inputFile};./website/}}

# FOOTER

'def FOOTER <div class="gap"></div>\
			<footer>\
				<a href="/{URL}">Original markup</a>\
				&ensp;&bull;&ensp;\
				<a href="/license.html">CC BY-SA 4.0</a>\
				(unless stated otherwise)\
				&ensp;&bull;&ensp;\
				2020&ndash;2026\
			</footer>\
		</div>\
	</article>\
\
	<div id="scrollBtn" class="btn">&#xFE3D;</div>\
</body>\
\
<script type="text/javascript" src="/scripts/theme-changer.js" crossorigin="anonymous" defer></script>\
<script type="text/javascript" src="/scripts/back-to-top.js" crossorigin="anonymous" defer></script>\
<script type="text/javascript" src="/scripts/keyboard.js" crossorigin="anonymous" defer></script>\
<script type="text/javascript" src="/scripts/snow.js" crossorigin="anonymous" defer></script>\
\
</html>

# Blocks

'if {env HIGHLIGHT}
'cmdprocess code highlight -O html -f -S {default {normalise {LANG}};text}
'endif

## Attention

'let start question <div class="special-par question-par"><div class="special-contents special-with-icon"><img src="/img/dialog-question.png" class="special-par-icon borderless unzoomable" alt="question">
'let end   question </div></div>

'let start warn <div class="special-par warn-par"><div class="special-contents special-with-icon"><img src="/img/dialog-warning.png" class="special-par-icon borderless unzoomable" alt="warn">
'let end   warn </div></div>

'let start important <div class="special-par important-par"><div class="special-contents special-with-icon"><img src="/img/dialog-important.png" class="special-par-icon borderless unzoomable" alt="important">
'let end   important </div></div>

'let start note <div class="special-par note-par"><div class="special-contents">
'let end   note </div></div>

## Headers

For each header (except H1) we'll add a "gap" element and an anchor link to the end.
The gap is only for visual purposes.

href function
'def fhref {default {normalise {1}};section-{inc {2}}}
auto href
'def ahref {def href;{fhref {query line};href_section}}{href}
url href
'def uhref {url {1};#{fhref {1};href_url}}

'let start header2 <div class="gap"></div> <h2 id="{ahref}">
'let end   header2 </h2> <a class="h-anchor" href="#{href}" aria-hidden="true">#</a>
'let start header3 <div class="gap"></div> <h3 id="{ahref}">
'let end   header3 </h3> <a class="h-anchor" href="#{href}" aria-hidden="true">#</a>
'let start header4 <div class="gap"></div> <h4 id="{ahref}">
'let end   header4 </h4> <a class="h-anchor" href="#{href}" aria-hidden="true">#</a>
'let start header5 <div class="gap"></div> <h5 id="{ahref}">
'let end   header5 </h5> <a class="h-anchor" href="#{href}" aria-hidden="true">#</a>
'let start header6 <div class="gap"></div> <h6 id="{ahref}">
'let end   header6 </h6> <a class="h-anchor" href="#{href}" aria-hidden="true">#</a>

## Teaching

'let start solution-link <div class="exercise-solution">&lt; 
'let end   solution-link &gt;</div>

## Contents

'let start contents <div id="contents-container"><h2 id="contents">Contents</h2> <a class="h-anchor" href="#contents" aria-hidden="true">#</a>
'let end   contents </div>

## Presentations

'let start         font18 <div class="font18">
'let end           font18 </div>
'let start     centered18 <div class="centered font18">
'let end       centered18 </div>
'let start        slide18 <div id="slide-{inc slide}" class="slide font18">
'let end          slide18 </div>
'let start middle_slide18 <div id="slide-{inc slide}" class="slide centered-slide font18"><div></div><div>
'let end   middle_slide18 </div><div></div></div>
'let start  title_slide18 <div id="slide-{inc slide}" class="slide centered-slide centered font18"><div></div><div>
'let end    title_slide18 </div><div></div></div>

'let start         font20 <div class="font20">
'let end           font20 </div>
'let start     centered20 <div class="centered font20">
'let end       centered20 </div>
'let start        slide20 <div id="slide-{inc slide}" class="slide font20">
'let end          slide20 </div>
'let start middle_slide20 <div id="slide-{inc slide}" class="slide centered-slide font20"><div></div><div>
'let end   middle_slide20 </div><div></div></div>
'let start  title_slide20 <div id="slide-{inc slide}" class="slide centered-slide centered font20"><div></div><div>
'let end    title_slide20 </div><div></div></div>

'let start         font22 <div class="font22">
'let end           font22 </div>
'let start     centered22 <div class="centered font22">
'let end       centered22 </div>
'let start        slide22 <div id="slide-{inc slide}" class="slide font22">
'let end          slide22 </div>
'let start middle_slide22 <div id="slide-{inc slide}" class="slide centered-slide font22"><div></div><div>
'let end   middle_slide22 </div><div></div></div>
'let start  title_slide22 <div id="slide-{inc slide}" class="slide centered-slide centered font22"><div></div><div>
'let end    title_slide22 </div><div></div></div>

'let start         font25 <div class="font25">
'let end           font25 </div>
'let start     centered25 <div class="centered font25">
'let end       centered25 </div>
'let start        slide25 <div id="slide-{inc slide}" class="slide font25">
'let end          slide25 </div>
'let start middle_slide25 <div id="slide-{inc slide}" class="slide centered-slide font25"><div></div><div>
'let end   middle_slide25 </div><div></div></div>
'let start  title_slide25 <div id="slide-{inc slide}" class="slide centered-slide centered font25"><div></div><div>
'let end    title_slide25 </div><div></div></div>

'let start         font27 <div class="font27">
'let end           font27 </div>
'let start     centered27 <div class="centered font27">
'let end       centered27 </div>
'let start        slide27 <div id="slide-{inc slide}" class="slide font27">
'let end          slide27 </div>
'let start middle_slide27 <div id="slide-{inc slide}" class="slide centered-slide font27"><div></div><div>
'let end   middle_slide27 </div><div></div></div>
'let start  title_slide27 <div id="slide-{inc slide}" class="slide centered-slide centered font27"><div></div><div>
'let end    title_slide27 </div><div></div></div>

'let start         font35 <div class="font35">
'let end           font35 </div>
'let start     centered35 <div class="centered font35">
'let end       centered35 </div>
'let start        slide35 <div id="slide-{inc slide}" class="slide font35">
'let end          slide35 </div>
'let start middle_slide35 <div id="slide-{inc slide}" class="slide centered-slide font35"><div></div><div>
'let end   middle_slide35 </div><div></div></div>
'let start  title_slide35 <div id="slide-{inc slide}" class="slide centered-slide centered font35"><div></div><div>
'let end    title_slide35 </div><div></div></div>

'let start         font <div>
'let end           font </div>
'let start     centered <div class="centered">
'let end       centered </div>
'let start        slide <div id="slide-{inc slide}" class="slide">
'let end          slide </div>
'let start middle_slide <div id="slide-{inc slide}" class="slide centered-slide"><div></div><div>
'let end   middle_slide </div><div></div></div>
'let start  title_slide <div id="slide-{inc slide}" class="slide centered-slide centered"><div></div><div>
'let end    title_slide </div><div></div></div>

'let start row <div class="layout-table"><div class="layout-row">
'let end   row </div></div>
'let start sqrow <div class="layout-table fixed-layout"><div class="layout-row">
'let end   sqrow </div></div>

'let start  width5% <div class="width5per">
'let end    width5% </div>
'let start width10% <div class="width10per">
'let end   width10% </div>
'let start width15% <div class="width15per">
'let end   width15% </div>
'let start width20% <div class="width20per">
'let end   width20% </div>
'let start width25% <div class="width25per">
'let end   width25% </div>
'let start width30% <div class="width30per">
'let end   width30% </div>
'let start width35% <div class="width35per">
'let end   width35% </div>
'let start width40% <div class="width40per">
'let end   width40% </div>
'let start width45% <div class="width45per">
'let end   width45% </div>
'let start width50% <div class="width50per">
'let end   width50% </div>
'let start width55% <div class="width55per">
'let end   width55% </div>
'let start width60% <div class="width60per">
'let end   width60% </div>
'let start width65% <div class="width65per">
'let end   width65% </div>
'let start width70% <div class="width70per">
'let end   width70% </div>
'let start width75% <div class="width75per">
'let end   width75% </div>
'let start width80% <div class="width80per">
'let end   width80% </div>
'let start width85% <div class="width85per">
'let end   width85% </div>
'let start width90% <div class="width90per">
'let end   width90% </div>
'let start width95% <div class="width95per">
'let end   width95% </div>

'let start fright <div class="float-right">
'let end   fright </div>
'let start column <div class="column">
'let end   column </div>

# Substitutions

'def due_for_rework {url {b {i Due for rework}};/rework.html}
'def nohtml {greplace {1};<;&lt\;}

## Country flags

'def gb <img src="/img/gb.svg" class="flag unzoomable svg" alt="ENG" height=18>
'def bg <img src="/img/bg.svg" class="flag unzoomable svg" alt="BGN" height=18>

## File types

'def    ft-photo <span class="file-type-icon">&#xeb0a;</span>
'def     ft-text <span class="file-type-icon">&#xeaa2;</span>
'def      ft-zip <span class="file-type-icon">&#xed4e;</span>
'def    ft-movie <span class="file-type-icon">&#xeafa;</span>
'def ft-markdown <span class="file-type-icon">&#xec41;</span>
'def  ft-browser <span class="file-type-icon">&#xebb7;</span>

## Pagenav

Expects substitutions:
reading
created
edited

'def breadcrumb &raquo; {def x/...;{>= {count {1};/};1}}{if {x/...};{url {substrBefore {1};/};{default {2};./}};{italic {substrAfter {1};/}}} {{if {x/...};breadcrumb;none} {substrAfter {1};/};{substrAfter {2};../}}

'def pagenav <div id="pagenav">\
    <div id="pagenav-stats">\
        <strong>Reading: {1}</strong> &ensp;||&ensp; <strong>Created: {2}</strong> &ensp;||&ensp; <strong>Edited: {3}</strong>\
        &ensp;||&ensp;\
        <a href="https://gitlab.com/Syndamia/syndamiadotcom/-/blob/master/src/{URL}"><strong>GitLab source</strong></a>\
    </div>\
    <div id="pagenav-breadcrumb">\
        {breadcrumb {trimEnd {URL};.du;/index};{repeat ../;{- {count {URL};/};1}}}\
    </div>\
</div>

## Presentations

'def line <hr/>

'def presentation-controller <nav id="presentCont">\
	<span id="prevSlideBtn" class="btn nodisplay">&#x2190;</span>\
	<a id="slideIndex" class="nodisplay" href="#slide-0">0</a>\
	<span id="nextSlideBtn" class="btn nodisplay">&#x2192;</span>\
	<span id="incrementationBtn" class="btn nodisplay">&#x22EE;</span>\
	<span id="articleBtn" class="btn setting-btn">As article &#x2632;</span>\
	<span id="presentBtn" class="btn setting-btn">Present &#x239A;</span>\
	<span id="printBtn" class="btn setting-btn">Print &#x2399;</span>\
</nav><br><br>\
<script type="text/javascript" src="/scripts/presentation.js" crossorigin="anonymous"></script>

'def newrow </div><div class="layout-row">

'def br1 <div class="br1"></div>
'def br2 <div class="br2"></div>
'def br3 <div class="br3"></div>
'def br4 <div class="br4"></div>
'def br5 <div class="br5"></div>
'def br6 <div class="br6"></div>
'def br7 <div class="br7"></div>
'def br8 <div class="br8"></div>
'def br9 <div class="br9"></div>

## Pagination

            1         2          3        4    5
{pagination START_URL;PREV_TITLE;PREV_URL;NEXT;NEXT_URL}

'def pagination {if {1};{code {url {nohtml <<};{1}}} || }{if {2};{code {url {nohtml <} {2};{3}}}}{if {2}{4}; || }{if {4};{code {url {4} {nohtml >};{5}}}}

'else
'exit 1
'endif