Add a blog page and posts folder

This commit is contained in:
Nicolas Dickinson 2023-05-12 16:02:02 +02:00
parent 0d80158651
commit 836dcc0178
11 changed files with 620 additions and 9 deletions

View File

@ -2,12 +2,13 @@ project:
type: website type: website
website: website:
title: "washweb-website" title: "WASH Web"
navbar: navbar:
left: left:
- href: index.qmd - href: index.qmd
text: Home text: Home
- about.qmd - about.qmd
- posts.qmd
format: format:
html: html:

View File

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>washweb-website - About</title> <title>WASH Web - About</title>
<style> <style>
code{white-space: pre-wrap;} code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;} span.smallcaps{font-variant: small-caps;}
@ -71,7 +71,7 @@ ul.task-list li input[type="checkbox"] {
<div class="navbar-container container-fluid"> <div class="navbar-container container-fluid">
<div class="navbar-brand-container"> <div class="navbar-brand-container">
<a class="navbar-brand" href="./index.html"> <a class="navbar-brand" href="./index.html">
<span class="navbar-title">washweb-website</span> <span class="navbar-title">WASH Web</span>
</a> </a>
</div> </div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
@ -87,6 +87,10 @@ ul.task-list li input[type="checkbox"] {
<a class="nav-link active" href="./about.html" aria-current="page"> <a class="nav-link active" href="./about.html" aria-current="page">
<span class="menu-text">About</span></a> <span class="menu-text">About</span></a>
</li> </li>
<li class="nav-item">
<a class="nav-link" href="./posts.html">
<span class="menu-text">News</span></a>
</li>
</ul> </ul>
<div id="quarto-search" class="" title="Search"></div> <div id="quarto-search" class="" title="Search"></div>
</div> <!-- /navcollapse --> </div> <!-- /navcollapse -->

View File

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>washweb-website - WASH Web</title> <title>WASH Web</title>
<style> <style>
code{white-space: pre-wrap;} code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;} span.smallcaps{font-variant: small-caps;}
@ -71,7 +71,7 @@ ul.task-list li input[type="checkbox"] {
<div class="navbar-container container-fluid"> <div class="navbar-container container-fluid">
<div class="navbar-brand-container"> <div class="navbar-brand-container">
<a class="navbar-brand" href="./index.html"> <a class="navbar-brand" href="./index.html">
<span class="navbar-title">washweb-website</span> <span class="navbar-title">WASH Web</span>
</a> </a>
</div> </div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
@ -87,6 +87,10 @@ ul.task-list li input[type="checkbox"] {
<a class="nav-link" href="./about.html"> <a class="nav-link" href="./about.html">
<span class="menu-text">About</span></a> <span class="menu-text">About</span></a>
</li> </li>
<li class="nav-item">
<a class="nav-link" href="./posts.html">
<span class="menu-text">News</span></a>
</li>
</ul> </ul>
<div id="quarto-search" class="" title="Search"></div> <div id="quarto-search" class="" title="Search"></div>
</div> <!-- /navcollapse --> </div> <!-- /navcollapse -->
@ -98,7 +102,13 @@ ul.task-list li input[type="checkbox"] {
<!-- sidebar --> <!-- sidebar -->
<!-- margin-sidebar --> <!-- margin-sidebar -->
<div id="quarto-margin-sidebar" class="sidebar margin-sidebar"> <div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
<nav id="TOC" role="doc-toc" class="toc-active">
<h2 id="toc-title">On this page</h2>
<ul>
<li><a href="#who-can-take-part" id="toc-who-can-take-part" class="nav-link active" data-scroll-target="#who-can-take-part">Who can take part?</a></li>
</ul>
</nav>
</div> </div>
<!-- main --> <!-- main -->
<main class="content" id="quarto-document-content"> <main class="content" id="quarto-document-content">
@ -120,9 +130,13 @@ ul.task-list li input[type="checkbox"] {
</header> </header>
<p>WASHWeb is a participatory initiative to give you better access to water, sanitation and hygiene information. Citizens, suppliers, NGOs and governments can take part to better use evidence to and to make information accessible.</p> <p>WASH Web is a set of participatory initiative to give you and everyone you know better access to water, sanitation and hygiene information. This web page is where you can find more information about taking part in various ways</p>
<section id="who-can-take-part" class="level2">
<h2 class="anchored" data-anchor-id="who-can-take-part">Who can take part?</h2>
<p>Citizens, suppliers, NGOs and governments can take part to better use evidence to and to make information accessible.</p>
</section>
</main> <!-- /main --> </main> <!-- /main -->
<script id="quarto-html-after-body" type="application/javascript"> <script id="quarto-html-after-body" type="application/javascript">

6
_site/listings.json Normal file
View File

@ -0,0 +1,6 @@
[
{
"listing": "/posts.html",
"items": []
}
]

308
_site/posts.html Normal file
View File

@ -0,0 +1,308 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
<meta charset="utf-8">
<meta name="generator" content="quarto-1.2.269">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>WASH Web - News</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
</style>
<script src="site_libs/quarto-nav/quarto-nav.js"></script>
<script src="site_libs/quarto-nav/headroom.min.js"></script>
<script src="site_libs/clipboard/clipboard.min.js"></script>
<script src="site_libs/quarto-search/autocomplete.umd.js"></script>
<script src="site_libs/quarto-search/fuse.min.js"></script>
<script src="site_libs/quarto-search/quarto-search.js"></script>
<meta name="quarto:offset" content="./">
<script src="site_libs/quarto-listing/list.min.js"></script>
<script src="site_libs/quarto-listing/quarto-listing.js"></script>
<script src="site_libs/quarto-html/quarto.js"></script>
<script src="site_libs/quarto-html/popper.min.js"></script>
<script src="site_libs/quarto-html/tippy.umd.min.js"></script>
<script src="site_libs/quarto-html/anchor.min.js"></script>
<link href="site_libs/quarto-html/tippy.css" rel="stylesheet">
<link href="site_libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<script src="site_libs/bootstrap/bootstrap.min.js"></script>
<link href="site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="site_libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
<script id="quarto-search-options" type="application/json">{
"location": "navbar",
"copy-button": false,
"collapse-after": 3,
"panel-placement": "end",
"type": "overlay",
"limit": 20,
"language": {
"search-no-results-text": "No results",
"search-matching-documents-text": "matching documents",
"search-copy-link-title": "Copy link to search",
"search-hide-matches-text": "Hide additional matches",
"search-more-match-text": "more match in this document",
"search-more-matches-text": "more matches in this document",
"search-clear-button-title": "Clear",
"search-detached-cancel-button-title": "Cancel",
"search-submit-button-title": "Submit"
}
}</script>
<script>
window.document.addEventListener("DOMContentLoaded", function (_event) {
const listingTargetEl = window.document.querySelector('#listing-listing .list');
if (!listingTargetEl) {
// No listing discovered, do not attach.
return;
}
const options = {
valueNames: ['listing-categories',{ data: ['index'] },{ data: ['categories'] },{ data: ['listing-date-sort'] },{ data: ['listing-file-modified-sort'] }],
searchColumns: ["listing-categories"],
};
window['quarto-listings'] = window['quarto-listings'] || {};
window['quarto-listings']['listing-listing'] = new List('listing-listing', options);
if (window['quarto-listing-loaded']) {
window['quarto-listing-loaded']();
}
});
window.addEventListener('hashchange',() => {
if (window['quarto-listing-loaded']) {
window['quarto-listing-loaded']();
}
})
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body class="nav-fixed">
<div id="quarto-search-results"></div>
<header id="quarto-header" class="headroom fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark ">
<div class="navbar-container container-fluid">
<div class="navbar-brand-container">
<a class="navbar-brand" href="./index.html">
<span class="navbar-title">WASH Web</span>
</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav navbar-nav-scroll me-auto">
<li class="nav-item">
<a class="nav-link" href="./index.html">
<span class="menu-text">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">
<span class="menu-text">About</span></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="./posts.html" aria-current="page">
<span class="menu-text">News</span></a>
</li>
</ul>
<div id="quarto-search" class="" title="Search"></div>
</div> <!-- /navcollapse -->
</div> <!-- /container-fluid -->
</nav>
</header>
<!-- content -->
<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article page-navbar">
<!-- sidebar -->
<!-- margin-sidebar -->
<div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
<h5 class="quarto-listing-category-title">Categories</h5><div class="quarto-listing-category category-default"><div class="category" data-category="">All <span class="quarto-category-count">(0)</span></div></div></div>
<!-- main -->
<main class="content" id="quarto-document-content">
<header id="title-block-header" class="quarto-title-block default">
<div class="quarto-title">
<h1 class="title">News</h1>
</div>
<div class="quarto-title-meta">
</div>
</header>
<div class="quarto-listing quarto-listing-container-grid" id="listing-listing">
<div class="list grid quarto-listing-cols-3">
</div>
<div class="listing-no-matching d-none">
No matching items
</div>
</div></main> <!-- /main -->
<script id="quarto-html-after-body" type="application/javascript">
window.document.addEventListener("DOMContentLoaded", function (event) {
const toggleBodyColorMode = (bsSheetEl) => {
const mode = bsSheetEl.getAttribute("data-mode");
const bodyEl = window.document.querySelector("body");
if (mode === "dark") {
bodyEl.classList.add("quarto-dark");
bodyEl.classList.remove("quarto-light");
} else {
bodyEl.classList.add("quarto-light");
bodyEl.classList.remove("quarto-dark");
}
}
const toggleBodyColorPrimary = () => {
const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
if (bsSheetEl) {
toggleBodyColorMode(bsSheetEl);
}
}
toggleBodyColorPrimary();
const icon = "";
const anchorJS = new window.AnchorJS();
anchorJS.options = {
placement: 'right',
icon: icon
};
anchorJS.add('.anchored');
const clipboard = new window.ClipboardJS('.code-copy-button', {
target: function(trigger) {
return trigger.previousElementSibling;
}
});
clipboard.on('success', function(e) {
// button target
const button = e.trigger;
// don't keep focus
button.blur();
// flash "checked"
button.classList.add('code-copy-button-checked');
var currentTitle = button.getAttribute("title");
button.setAttribute("title", "Copied!");
let tooltip;
if (window.bootstrap) {
button.setAttribute("data-bs-toggle", "tooltip");
button.setAttribute("data-bs-placement", "left");
button.setAttribute("data-bs-title", "Copied!");
tooltip = new bootstrap.Tooltip(button,
{ trigger: "manual",
customClass: "code-copy-button-tooltip",
offset: [0, -8]});
tooltip.show();
}
setTimeout(function() {
if (tooltip) {
tooltip.hide();
button.removeAttribute("data-bs-title");
button.removeAttribute("data-bs-toggle");
button.removeAttribute("data-bs-placement");
}
button.setAttribute("title", currentTitle);
button.classList.remove('code-copy-button-checked');
}, 1000);
// clear code selection
e.clearSelection();
});
function tippyHover(el, contentFn) {
const config = {
allowHTML: true,
content: contentFn,
maxWidth: 500,
delay: 100,
arrow: false,
appendTo: function(el) {
return el.parentElement;
},
interactive: true,
interactiveBorder: 10,
theme: 'quarto',
placement: 'bottom-start'
};
window.tippy(el, config);
}
const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
for (var i=0; i<noterefs.length; i++) {
const ref = noterefs[i];
tippyHover(ref, function() {
// use id or data attribute instead here
let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
try { href = new URL(href).hash; } catch {}
const id = href.replace(/^#\/?/, "");
const note = window.document.getElementById(id);
return note.innerHTML;
});
}
const findCites = (el) => {
const parentEl = el.parentElement;
if (parentEl) {
const cites = parentEl.dataset.cites;
if (cites) {
return {
el,
cites: cites.split(' ')
};
} else {
return findCites(el.parentElement)
}
} else {
return undefined;
}
};
var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
for (var i=0; i<bibliorefs.length; i++) {
const ref = bibliorefs[i];
const citeInfo = findCites(ref);
if (citeInfo) {
tippyHover(citeInfo.el, function() {
var popup = window.document.createElement('div');
citeInfo.cites.forEach(function(cite) {
var citeDiv = window.document.createElement('div');
citeDiv.classList.add('hanging-indent');
citeDiv.classList.add('csl-entry');
var biblioDiv = window.document.getElementById('ref-' + cite);
if (biblioDiv) {
citeDiv.innerHTML = biblioDiv.innerHTML;
}
popup.appendChild(citeDiv);
});
return popup.innerHTML;
});
}
}
});
</script>
</div> <!-- /content -->
</body></html>

View File

@ -11,6 +11,20 @@
"href": "index.html", "href": "index.html",
"title": "WASH Web", "title": "WASH Web",
"section": "", "section": "",
"text": "WASHWeb is a participatory initiative to give you better access to water, sanitation and hygiene information. Citizens, suppliers, NGOs and governments can take part to better use evidence to and to make information accessible." "text": "WASH Web is a set of participatory initiative to give you and everyone you know better access to water, sanitation and hygiene information. This web page is where you can find more information about taking part in various ways"
},
{
"objectID": "index.html#who-can-take-part",
"href": "index.html#who-can-take-part",
"title": "WASH Web",
"section": "Who can take part?",
"text": "Who can take part?\nCitizens, suppliers, NGOs and governments can take part to better use evidence to and to make information accessible."
},
{
"objectID": "posts.html",
"href": "posts.html",
"title": "News",
"section": "",
"text": "No matching items"
} }
] ]

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,243 @@
const kProgressiveAttr = "data-src";
let categoriesLoaded = false;
window.quartoListingCategory = (category) => {
if (categoriesLoaded) {
activateCategory(category);
setCategoryHash(category);
}
};
window["quarto-listing-loaded"] = () => {
// Process any existing hash
const hash = getHash();
if (hash) {
// If there is a category, switch to that
if (hash.category) {
activateCategory(hash.category);
}
// Paginate a specific listing
const listingIds = Object.keys(window["quarto-listings"]);
for (const listingId of listingIds) {
const page = hash[getListingPageKey(listingId)];
if (page) {
showPage(listingId, page);
}
}
}
const listingIds = Object.keys(window["quarto-listings"]);
for (const listingId of listingIds) {
// The actual list
const list = window["quarto-listings"][listingId];
// Update the handlers for pagination events
refreshPaginationHandlers(listingId);
// Render any visible items that need it
renderVisibleProgressiveImages(list);
// Whenever the list is updated, we also need to
// attach handlers to the new pagination elements
// and refresh any newly visible items.
list.on("updated", function () {
renderVisibleProgressiveImages(list);
setTimeout(() => refreshPaginationHandlers(listingId));
// Show or hide the no matching message
toggleNoMatchingMessage(list);
});
}
};
window.document.addEventListener("DOMContentLoaded", function (_event) {
// Attach click handlers to categories
const categoryEls = window.document.querySelectorAll(
".quarto-listing-category .category"
);
for (const categoryEl of categoryEls) {
const category = categoryEl.getAttribute("data-category");
categoryEl.onclick = () => {
activateCategory(category);
setCategoryHash(category);
};
}
// Attach a click handler to the category title
// (there should be only one, but since it is a class name, handle N)
const categoryTitleEls = window.document.querySelectorAll(
".quarto-listing-category-title"
);
for (const categoryTitleEl of categoryTitleEls) {
categoryTitleEl.onclick = () => {
activateCategory("");
setCategoryHash("");
};
}
categoriesLoaded = true;
});
function toggleNoMatchingMessage(list) {
const selector = `#${list.listContainer.id} .listing-no-matching`;
const noMatchingEl = window.document.querySelector(selector);
if (noMatchingEl) {
if (list.visibleItems.length === 0) {
noMatchingEl.classList.remove("d-none");
} else {
if (!noMatchingEl.classList.contains("d-none")) {
noMatchingEl.classList.add("d-none");
}
}
}
}
function setCategoryHash(category) {
setHash({ category });
}
function setPageHash(listingId, page) {
const currentHash = getHash() || {};
currentHash[getListingPageKey(listingId)] = page;
setHash(currentHash);
}
function getListingPageKey(listingId) {
return `${listingId}-page`;
}
function refreshPaginationHandlers(listingId) {
const listingEl = window.document.getElementById(listingId);
const paginationEls = listingEl.querySelectorAll(
".pagination li.page-item:not(.disabled) .page.page-link"
);
for (const paginationEl of paginationEls) {
paginationEl.onclick = (sender) => {
setPageHash(listingId, sender.target.getAttribute("data-i"));
showPage(listingId, sender.target.getAttribute("data-i"));
return false;
};
}
}
function renderVisibleProgressiveImages(list) {
// Run through the visible items and render any progressive images
for (const item of list.visibleItems) {
const itemEl = item.elm;
if (itemEl) {
const progressiveImgs = itemEl.querySelectorAll(
`img[${kProgressiveAttr}]`
);
for (const progressiveImg of progressiveImgs) {
const srcValue = progressiveImg.getAttribute(kProgressiveAttr);
if (srcValue) {
progressiveImg.setAttribute("src", srcValue);
}
progressiveImg.removeAttribute(kProgressiveAttr);
}
}
}
}
function getHash() {
// Hashes are of the form
// #name:value|name1:value1|name2:value2
const currentUrl = new URL(window.location);
const hashRaw = currentUrl.hash ? currentUrl.hash.slice(1) : undefined;
return parseHash(hashRaw);
}
const kAnd = "&";
const kEquals = "=";
function parseHash(hash) {
if (!hash) {
return undefined;
}
const hasValuesStrs = hash.split(kAnd);
const hashValues = hasValuesStrs
.map((hashValueStr) => {
const vals = hashValueStr.split(kEquals);
if (vals.length === 2) {
return { name: vals[0], value: vals[1] };
} else {
return undefined;
}
})
.filter((value) => {
return value !== undefined;
});
const hashObj = {};
hashValues.forEach((hashValue) => {
hashObj[hashValue.name] = decodeURIComponent(hashValue.value);
});
return hashObj;
}
function makeHash(obj) {
return Object.keys(obj)
.map((key) => {
return `${key}${kEquals}${obj[key]}`;
})
.join(kAnd);
}
function setHash(obj) {
const hash = makeHash(obj);
window.history.pushState(null, null, `#${hash}`);
}
function showPage(listingId, page) {
const list = window["quarto-listings"][listingId];
if (list) {
list.show((page - 1) * list.page + 1, list.page);
}
}
function activateCategory(category) {
// Deactivate existing categories
const activeEls = window.document.querySelectorAll(
".quarto-listing-category .category.active"
);
for (const activeEl of activeEls) {
activeEl.classList.remove("active");
}
// Activate this category
const categoryEl = window.document.querySelector(
`.quarto-listing-category .category[data-category='${category}'`
);
if (categoryEl) {
categoryEl.classList.add("active");
}
// Filter the listings to this category
filterListingCategory(category);
}
function filterListingCategory(category) {
const listingIds = Object.keys(window["quarto-listings"]);
for (const listingId of listingIds) {
const list = window["quarto-listings"][listingId];
if (list) {
if (category === "") {
// resets the filter
list.filter();
} else {
// filter to this category
list.filter(function (item) {
const itemValues = item.values();
if (itemValues.categories !== null) {
const categories = itemValues.categories.split(",");
return categories.includes(category);
} else {
return false;
}
});
}
}
}
}

View File

@ -2,4 +2,8 @@
title: "WASH Web" title: "WASH Web"
--- ---
WASHWeb is a participatory initiative to give you better access to water, sanitation and hygiene information. Citizens, suppliers, NGOs and governments can take part to better use evidence to and to make information accessible. WASH Web is a set of participatory initiative to give you and everyone you know better access to water, sanitation and hygiene information. This web page is where you can find more information about taking part in various ways
## Who can take part?
Citizens, suppliers, NGOs and governments can take part to better use evidence to and to make information accessible.

8
posts.qmd Normal file
View File

@ -0,0 +1,8 @@
---
title: "News"
listing:
contents: posts # all Quarto docs in the `posts` directory will be included on your listing page
type: grid # or `default` or `table`; each type has its own set of yaml options to include
sort: "date desc" # can also sort on more than one field
categories: true # allows you to sort posts by assigned categories
---

7
posts/_metadata.yml Normal file
View File

@ -0,0 +1,7 @@
# options specified here will apply to all posts in this folder
# prevents posts from re-rendering unless explicitly told to do so (for more, see https://quarto.org/docs/projects/code-execution.html#freeze)
freeze: true
# enable banner style title blocks (see https://quarto.org/docs/authoring/title-blocks.html)
title-block-banner: true