Instructions to set up a similar website
1. Domain name
You can register/"buy"/aquire a domain name either at a registry or at a registrar.
Examples for a registry: nominet UK, dns.pl, denic, …
Examples for a registrar:
List of registrars authorized to register .de domains, among other TLDs.,
List of registrars authorized to register .pl domains, among other TLDs.,
List of registrars authorized to register .uk domains, among other TLDs.
EuroDNS,
...
TLD means Top Level Domain and an example for a TLD is .eu
Registering domains works similar to usual "web shopping". Prices to register a domain through a registrar vary mostly between 1€ and 20€ per a domain name per year.
Voilà, now you're a registrant of a domain.
2. Source code example for the website
You can save the following source code as an HTML file on your computer.
<main>
<section>
<h1>[Acknowledgements/acknowledgments of/for/∅ human rights] and [Human Rights acknowledgments/acknowledgements]</h1>
<script>
const TEXT_CONTENT = 'Acknowledgements/acknowledgments of/for/∅ human rights';
const TIMES = [ // Dates may never be in the future
{
from: Date.parse("2023-11-24T15:11:05Z"),
frequencyMS: 1,
placeholderText: "Human [characteristics/specifications/parameters]",
},
]
const DEFAULT_ENTRIES_PER_PAGE = 10;
const MAX_ENTRIES = 84_482_267;
</script>
<p id="not-exist-message">This page does not exist. Go to <a href="?page=1">first page</a>.</p>
<ol id="bekenntnis-list"></ol>
<div id="navigation">
<legend>
Number of acknowledgements/acknowledgments/bekenntnisse/entries/items displayed on the home page
<input id="entriesPerPageInput" type="number" value="4" />
<button id="changeEntriesPerPage">Submit</button>
</legend>
<ul>
<span style="flex-grow: 1"></span>
<!-- <li id="page-link-start"><a href="">start</a></li> -->
<li id="page-link-prev"><a href="">start</a></li>
<li id="page-link-first"><a href="">1</a></li>
<span id="start-dots">,…,</span>
<li id="page-link-current"><a href="">1</a></li>
<span id="end-dots">,…,</span>
<li id="page-link-last"><a href="">?</a></li>
<li id="page-link-next"><a href="">end</a></li>
<!-- <li id="page-link-end"><a href="">end</a></li> -->
</ul>
</div>
<p style="margin-top: 4rem">
Number of acknowledgements: <a href="https://www.destatis.de/EN/Themes/Society-Environment/Population/Current-Population/Tables/liste-current-population.html#651244">84,482,267</a> — Population of Federal Republic of Germany. Source: <a href="https://www.destatis.de/EN/Themes/Society-Environment/Population/Current-Population/Tables/liste-current-population.html#651244">https://www.destatis.de/EN/Themes/Society-Environment/Population/Current-Population/Tables/liste-current-population.html#651244</a>
</p>
<style>
#bekenntnis-list li {
margin-left: 4em;
margin-bottom: 1em;
}
#bekenntnis-list li > span + span {
margin-left: 1rem;
}
#bekenntnis-list li span:last-child {
vertical-align: top;
border-bottom: thin solid black;
width: 30rem;
display: inline-block
}
#bekenntnis-list {
list-style-type: none;
padding-left: 0;
}
#bekenntnis-list + #navigation {
margin-top: 4rem;
}
#navigation ul {
list-style-type: none;
display: flex;
flex-direction: row;
gap: 1em;
}
#navigation a {
text-decoration: none;
}
#navigation li#page-link-current {
border: thin solid black;
padding-inline: 0.1rem;
}
#navigation #page-link-current {
background-color: rgba(240, 128, 128, 0.356);
}
.listcomment {
position: relative;
}
.listcomment span {
position: absolute;
left: -35px;
}
footer {
border-top: thin solid black;
padding: 0.4rem;
}
</style>
<div>
<h2 style="margin-top: 7rem; margin-bottom: 0.2rem">Human Rights:</h2>
<ul>
<li>
<a href="https://www.bundestag.de/gg/grundrechte">https://www.bundestag.de/gg/grundrechte</a>
;
<a href="https://www.bundestag.de/gg/grundrechte">Grundrechte</a>
</li>
<li>
<a href="https://www.un.org/en/about-us/universal-declaration-of-human-rights">https://www.un.org/en/about-us/universal-declaration-of-human-rights</a>
;
<a href="https://www.un.org/en/about-us/universal-declaration-of-human-rights">Universal Declaration of Human Rights</a>
(10.12.1948)
</li>
<li>
<a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-civil-and-political-rights">https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-civil-and-political-rights</a>
;
<a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-civil-and-political-rights">International Covenant on Civil and Political Rights</a>
(16.12.)
</li>
<li>
<a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-economic-social-and-cultural-rights">https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-economic-social-and-cultural-rights</a>
;
<a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/international-covenant-economic-social-and-cultural-rights">International Covenant on Economic, Social and Cultural Rights</a>
(16.12.)
</li>
<li>
<a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-against-torture-and-other-cruel-inhuman-or-degrading">https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-against-torture-and-other-cruel-inhuman-or-degrading</a>
;
<a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-against-torture-and-other-cruel-inhuman-or-degrading">Convention against Torture and Other Cruel, Inhuman or Degrading Treatment or Punishment</a>
</li>
<li>
<a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-elimination-all-forms-discrimination-against-women">https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-elimination-all-forms-discrimination-against-women</a>
;
<a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-elimination-all-forms-discrimination-against-women">Convention on the Elimination of All Forms of Discrimination against Women New York, 18 December 1979</a>
</li>
<li>
<a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-rights-child">https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-rights-child</a>
;
<a href="https://www.ohchr.org/en/instruments-mechanisms/instruments/convention-rights-child">Convention on the Rights of the Child</a>
</li>
<li>
<a href="https://www.echr.coe.int/documents/d/echr/Convention_ENG">https://www.echr.coe.int/documents/d/echr/Convention_ENG</a>
;
<a href="https://www.echr.coe.int/documents/d/echr/Convention_ENG">European Convention on Human Right</a>
</li>
<li>
<a href="https://www.un.org/development/desa/disabilities/convention-on-the-rights-of-persons-with-disabilities/convention-on-the-rights-of-persons-with-disabilities-2.html">Convention on the Rights of Persons with Disabilities</a>
:
<a href="https://www.un.org/development/desa/disabilities/convention-on-the-rights-of-persons-with-disabilities/convention-on-the-rights-of-persons-with-disabilities-2.html">https://www.un.org/development/desa/disabilities/convention-on-the-rights-of-persons-with-disabilities/convention-on-the-rights-of-persons-with-disabilities-2.html</a>
</li>
<li>…</li>
<li>
<a href="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:12012P/TXT">https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:12012P/TXT</a>
;
<a href="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:12012P/TXT">Charter of Fundamental Rights of the European Union</a>
</li>
<li>…</li>
<li>
<a style="color: red" href="https://www.icrc.org/en/doc/war-and-law/treaties-customary-law/geneva-conventions/overview-geneva-conventions.htm">https://www.icrc.org/en/doc/war-and-law/treaties-customary-law/geneva-conventions/overview-geneva-conventions.htm</a>
;
<a style="color: red" href="https://www.icrc.org/en/doc/war-and-law/treaties-customary-law/geneva-conventions/overview-geneva-conventions.htm">Geneva Conventions</a>
</li>
</ul>
</div>
<script>
const NOW = Date.now();
function computeTotalEntries() {
let totalNumberOfEntries = 0
for (let i = 0; i < TIMES.length; i++) {
const endTime = TIMES.at(i + 1)?.from ?? NOW;
totalNumberOfEntries += Math.ceil((endTime - TIMES.at(i).from) / TIMES.at(i).frequencyMS);
}
if (MAX_ENTRIES < totalNumberOfEntries) {
return MAX_ENTRIES;
}
return totalNumberOfEntries;
}
function getPlaceholderTextForIndex(index) {
let currentMaxIndex = 0;
for (let i = 0; i < TIMES.length; i++) {
const endTime = TIMES.at(i + 1)?.from ?? NOW;
currentMaxIndex += Math.ceil((endTime - TIMES.at(i).from) / TIMES.at(i).frequencyMS);
if (currentMaxIndex > index) {
return TIMES.at(i).placeholderText;
}
}
}
function getTimeOfIndex(index) {
let currentMaxIndex = 0
let currentStartIndex = 0
for (let i = 0; i < TIMES.length; i++) {
const endTime = TIMES.at(i + 1)?.from ?? NOW;
currentStartIndex = currentMaxIndex
currentMaxIndex += Math.ceil((endTime - TIMES.at(i).from) / TIMES.at(i).frequencyMS);
// console.debug({
// index,
// endTime,
// currentStartIndex,
// currentMaxIndex
// })
if (currentMaxIndex > index) {
return new Date(TIMES.at(i).from + (index - currentStartIndex) * TIMES.at(i).frequencyMS);
}
}
console.error('That should not happen')
}
const parsedUrl = new URL(window.location.href);
const entriesPerPage = (parsedUrl.searchParams.get("entriesPerPage") ?? 10) * 1;
function getPageNumber() {
const queryParam = parsedUrl.searchParams.get("page")
if (!queryParam) {
return 10
}
if (queryParam === 'last') {
return LAST_PAGE
}
return queryParam * 1
}
const TOTAL_ENTRIES = computeTotalEntries()
const LAST_PAGE = Math.ceil(TOTAL_ENTRIES / entriesPerPage)
const pageNumber = getPageNumber()
function withLeadingZero(number) {
return String(number).padStart(2, "0")
}
function addListEntry(index) {
const container = document.createElement('li');
const dateContainer = document.createElement('span');
const entry_time = getTimeOfIndex(index)
const dateString = `${entry_time.getFullYear()}-${withLeadingZero(entry_time.getMonth() + 1)}-${withLeadingZero(entry_time.getDate())} ${withLeadingZero(entry_time.getHours())}:${withLeadingZero(entry_time.getMinutes())}:${withLeadingZero(entry_time.getSeconds())}`
dateContainer.textContent = dateString
const contentContainer = document.createElement('span');
contentContainer.textContent = TEXT_CONTENT
const placeholderContainer = document.createElement('span');
placeholderContainer.textContent = getPlaceholderTextForIndex(index)
const indexContainer = document.createElement('span');
indexContainer.textContent = (index + 1) + "."
container.appendChild(indexContainer)
container.appendChild(dateContainer)
container.appendChild(contentContainer)
container.appendChild(placeholderContainer)
document.querySelector('#bekenntnis-list').append(container);
}
if (parsedUrl.searchParams.get("page") === null) {
window.location.href = "?page=1"
}
if (pageNumber < 1 || pageNumber > LAST_PAGE) {
document.querySelector('#bekenntnis-list').style.display = 'none';
document.querySelector('#navigation').style.display = 'none';
} else {
document.querySelector('#not-exist-message').style.display = 'none';
}
const START_INDEX = ((pageNumber - 1) * entriesPerPage);
document.querySelector('#bekenntnis-list').start = 1;
const entriesLeftToDisplay = TOTAL_ENTRIES - ((pageNumber - 1) * entriesPerPage);
const entriesOnPage = Math.min(entriesLeftToDisplay, entriesPerPage);
for (let i = 0; i < entriesOnPage; i++) {
addListEntry(START_INDEX + i)
}
const start = document.querySelector('#page-link-first a')
start.href = `?page=${1}`;
// start.textContent = `${1}`;
if (pageNumber <= 1) {
document.querySelector('#page-link-prev').style.display = 'none';
document.querySelector('#page-link-first').style.display = 'none';
document.querySelector('#start-dots').style.display = 'none';
} else {
const prev = document.querySelector('#page-link-prev a')
prev.href = `?page=${pageNumber - 1}`;
// prev.textContent = `←`;
}
const current = document.querySelector('#page-link-current a')
current.href = `?page=${pageNumber}`;
current.textContent = `${pageNumber}`;
if (pageNumber >= LAST_PAGE) {
document.querySelector('#page-link-next').style.display = 'none';
document.querySelector('#page-link-last').style.display = 'none';
document.querySelector('#end-dots').style.display = 'none';
} else {
const next = document.querySelector('#page-link-next a')
next.href = `?page=${pageNumber + 1}`;
// next.textContent = `→`;
}
const end = document.querySelector('#page-link-last a')
end.href = `?page=${LAST_PAGE}`;
end.textContent = `${LAST_PAGE}`;
const entriesPerPageInput = document.querySelector('#entriesPerPageInput')
entriesPerPageInput.value = entriesPerPage
const changeEntriesPerPageButton = document.querySelector('#changeEntriesPerPage')
changeEntriesPerPageButton.addEventListener('click', () => {
window.location.href = `?page=${pageNumber}&entriesPerPage=${entriesPerPageInput.value}`
})
console.log({
TOTAL_ENTRIES,
DEFAULT_ENTRIES_PER_PAGE,
entriesPerPage,
LAST_PAGE,
pageNumber,
entriesLeftToDisplay,
entriesOnPage
});
</script>
</section>
</main>