Fix mobile view, add copy button for code blocks
This commit is contained in:
parent
bee867764b
commit
516b6567a2
|
|
@ -21,7 +21,7 @@ export default ({
|
|||
theme={theme}
|
||||
extraStylesheets={extraStylesheets}
|
||||
cacheBust={cacheBust}
|
||||
extraScripts={extraScripts}
|
||||
extraScripts={[...(extraScripts || []), '/scripts/copy-code.js']}
|
||||
/>
|
||||
<body className="ps-main">
|
||||
|
||||
|
|
|
|||
16
_includes/styles/copy-code-button.scss
Normal file
16
_includes/styles/copy-code-button.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
border: 12px solid black;
|
||||
margin-top: 10vh;
|
||||
margin-bottom: 10vh;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
flex-basis: 100%;
|
||||
font-size: 16px;
|
||||
|
|
@ -33,6 +34,8 @@
|
|||
color: var(--foreground);
|
||||
background: white;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
margin: 1vw;
|
||||
|
|
@ -97,6 +100,15 @@
|
|||
padding: 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
code {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
margin-top: 8px;
|
||||
|
|
|
|||
|
|
@ -29,5 +29,6 @@ html {
|
|||
@import './background';
|
||||
@import './footer';
|
||||
@import './homelink';
|
||||
@import './copy-code-button.scss';
|
||||
@import './hakken-dates.scss';
|
||||
|
||||
|
|
|
|||
109
hakken-dates.js
109
hakken-dates.js
|
|
@ -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
37
scripts/copy-code.js
Normal 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);
|
||||
});
|
||||
})();
|
||||
Loading…
Reference in a new issue