diff --git a/_includes/layouts/default.tsx b/_includes/layouts/default.tsx index f1bca2a..db2bd80 100644 --- a/_includes/layouts/default.tsx +++ b/_includes/layouts/default.tsx @@ -21,7 +21,7 @@ export default ({ theme={theme} extraStylesheets={extraStylesheets} cacheBust={cacheBust} - extraScripts={extraScripts} + extraScripts={[...(extraScripts || []), '/scripts/copy-code.js']} /> diff --git a/_includes/styles/copy-code-button.scss b/_includes/styles/copy-code-button.scss new file mode 100644 index 0000000..7ff7d65 --- /dev/null +++ b/_includes/styles/copy-code-button.scss @@ -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); + } +} diff --git a/_includes/styles/page.scss b/_includes/styles/page.scss index 1defc37..4c49dfe 100644 --- a/_includes/styles/page.scss +++ b/_includes/styles/page.scss @@ -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; diff --git a/_includes/styles/style.scss b/_includes/styles/style.scss index ed7df22..10627db 100644 --- a/_includes/styles/style.scss +++ b/_includes/styles/style.scss @@ -29,5 +29,6 @@ html { @import './background'; @import './footer'; @import './homelink'; +@import './copy-code-button.scss'; @import './hakken-dates.scss'; diff --git a/hakken-dates.js b/hakken-dates.js deleted file mode 100644 index a4d3f4d..0000000 --- a/hakken-dates.js +++ /dev/null @@ -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'); -})(); diff --git a/scripts/copy-code.js b/scripts/copy-code.js new file mode 100644 index 0000000..1b37649 --- /dev/null +++ b/scripts/copy-code.js @@ -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); + }); +})();