forked from pub-solar/pub.solar
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}
|
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">
|
||||||
|
|
||||||
|
|
|
||||||
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;
|
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;
|
||||||
|
|
|
||||||
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
||||||
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