Fix mobile view, add copy button for code blocks

This commit is contained in:
Benjamin Bädorf 2022-12-10 16:55:06 +01:00
parent bee867764b
commit 516b6567a2
No known key found for this signature in database
GPG key ID: 4406E80E13CD656C
6 changed files with 67 additions and 110 deletions

View file

@ -21,7 +21,7 @@ export default ({
theme={theme} theme={theme}
extraStylesheets={extraStylesheets} extraStylesheets={extraStylesheets}
cacheBust={cacheBust} cacheBust={cacheBust}
extraScripts={extraScripts} extraScripts={[...(extraScripts || []), '/scripts/copy-code.js']}
/> />
<body className="ps-main"> <body className="ps-main">

View file

@ -0,0 +1,16 @@
.ps-copy-code-button {
margin: 0;
background-color: var(--background-alt);
color: var(--foreground-alt);
text-transform: uppercase;
font-size: 12px;
border-radius: 1em;
margin-left: 0.25em;
border: 2px solid var(--foreground);
cursor: pointer;
&:hover {
background-color: var(--foreground);
color: var(--background);
}
}

View file

@ -25,6 +25,7 @@
border: 12px solid black; border: 12px solid black;
margin-top: 10vh; margin-top: 10vh;
margin-bottom: 10vh; margin-bottom: 10vh;
width: 100%;
max-width: 700px; max-width: 700px;
flex-basis: 100%; flex-basis: 100%;
font-size: 16px; font-size: 16px;
@ -33,6 +34,8 @@
color: var(--foreground); color: var(--foreground);
background: white; background: white;
word-break: break-word; word-break: break-word;
display: flex;
flex-direction: column;
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
margin: 1vw; margin: 1vw;
@ -97,6 +100,15 @@
padding: 4px; padding: 4px;
} }
pre {
display: flex;
flex-direction: row;
}
code {
overflow: scroll;
}
> * { > * {
margin-bottom: 0; margin-bottom: 0;
margin-top: 8px; margin-top: 8px;

View file

@ -29,5 +29,6 @@ html {
@import './background'; @import './background';
@import './footer'; @import './footer';
@import './homelink'; @import './homelink';
@import './copy-code-button.scss';
@import './hakken-dates.scss'; @import './hakken-dates.scss';

View file

@ -1,109 +0,0 @@
(() => {
const skippedMonths = [
{ m: 8, y: 2022 },
{ m: 12, y: 2022 },
];
const i18n = {
en: {
comingDates: 'The following dates are scheduled:',
friday: 'friday',
sunday: 'sunday',
until: 'until',
months: [
'Jan.',
'Feb.',
'Mar.',
'Apr.',
'May',
'Jun.',
'Jul.',
'Aug.',
'Sep.',
'Oct.',
'Nov.',
'Dec.',
],
},
de: {
comingDates: 'Folgende Termine stehen an:',
friday: 'Freitag',
sunday: 'Sonntag',
until: 'bis',
months: [
'Jan.',
'Feb.',
'Mär.',
'Apr.',
'Mai',
'Jun.',
'Jul.',
'Aug.',
'Sep.',
'Okt.',
'Nov.',
'Dez.',
],
},
};
const datesLists = {
en: document.getElementById('dates-list-en'),
de: document.getElementById('dates-list-de'),
};
const day = 24 * 60 * 60 * 1000;
const week = 7 * day;
const endOfWeekend = 2 * day;
const start = new Date();
const hakkens = [];
// We'll be looking about half a year into the future
for (let i = 0; i < 185; i++) {
const dateToTry = new Date(start.valueOf() + (i * day));
if (dateToTry.getDay() !== 5) {
continue;
}
const oneWeekLater = new Date(dateToTry.valueOf() + week);
if (dateToTry.getMonth() === oneWeekLater.getMonth()) {
continue;
}
const m = dateToTry.getMonth() + 1;
const y = dateToTry.getFullYear();
if (skippedMonths.find((s) => s.m === m && s.y === y)) {
continue;
}
hakkens.push(dateToTry);
}
// Helper function to add leading zeros to dates
const d = (num) => ('0' + num).slice(-2);
const writeText = (lang) => {
const p = document.createElement('p');
p.innerHTML = i18n[lang].comingDates;
datesLists[lang].appendChild(p);
}
const writeDateList = (lang) => {
const ul = document.createElement('ul');
hakkens.forEach(hakken => {
hakkend = new Date(hakken.valueOf() + endOfWeekend);
const showFirstMonth = hakken.getMonth() !== hakkend.getMonth();
const li = document.createElement('li');
li.innerHTML = `
${i18n[lang].friday} ${d(hakken.getDate())}. ${showFirstMonth ? i18n[lang].months[hakken.getMonth()] : ''}
${i18n[lang].until}
${d(hakkend.getDate())}. ${i18n[lang].months[hakkend.getMonth()]}
`;
ul.appendChild(li);
});
datesLists[lang].appendChild(ul);
}
writeText('de');
writeText('en');
writeDateList('de');
writeDateList('en');
})();

37
scripts/copy-code.js Normal file
View file

@ -0,0 +1,37 @@
(() => {
const findLanguage = (el) => {
if (el.lang) {
return el.lang;
}
if (el.parentElement) {
return findLanguage(el.parentElement);
}
return 'en';
}
const codeInPreElements = document.querySelectorAll('section pre code');
codeInPreElements.forEach((element) => {
const lang = findLanguage(element);
const button = document.createElement('button');
const resetButtonText = () => {
button.innerHTML = { en: 'Copy', de: 'Kopieren' }[lang];
}
button.className = 'ps-copy-code-button';
button.addEventListener('click', () => {
navigator.clipboard.writeText(element.innerHTML);
button.innerHTML = { en: 'Copied!', de: 'Kopiert!' }[lang];
setTimeout(resetButtonText, 1000);
});
resetButtonText();
element.after(button);
});
})();