jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-10-29 02:35:48 -04:00
Code Issues Activity

innerText -> textContent & other modernized DOM methods

Browse Source
This commit is contained in:
Jake Jarvis
2021-11-02 08:50:17 -04:00
parent 2d509e22a8
commit 2f56906cb8
9 changed files with 46 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/js/src/clipboard.js
View File

@@ -14,26 +14,26 @@ if (ClipboardJS.isSupported() && document.querySelector("div.highlight")) {
const button = document.createElement("button");
button.className = "copy-button";
button.innerText = defaultTerm;
button.textContent = defaultTerm;
// insert button as a sibling to Hugo's code fence
highlightDiv.parentNode.insertBefore(wrapperDiv, highlightDiv);
wrapperDiv.appendChild(highlightDiv);
wrapperDiv.insertBefore(button, wrapperDiv.firstChild);
highlightDiv.before(wrapperDiv);
wrapperDiv.prepend(button);
wrapperDiv.append(highlightDiv);
});
// now that all the buttons are in place, bind them to the copy action
new ClipboardJS("button.copy-button", {
text: (trigger) =>
// actual code element will have class "language-*", even if plaintext
trimNewlines(trigger.parentElement.querySelector('code[class^="language-"]').innerText),
trimNewlines(trigger.parentElement.querySelector('code[class^="language-"]').textContent),
}).on("success", (e) => {
// show a subtle indication of success
e.trigger.innerText = successTerm;
e.trigger.textContent = successTerm;
// reset button to original text after 2 seconds
setTimeout(() => {
e.trigger.innerText = defaultTerm;
e.trigger.textContent = defaultTerm;
}, 2000);
// text needed to be auto-selected to copy, unselect immediately

20
assets/js/src/contact.js
View File

@@ -3,7 +3,7 @@ import fetch from "cross-fetch";
// don't continue if there isn't a contact form on this page
// TODO: be better and only do any of this on /contact/
const contactForm = document.getElementById("contact-form");
const contactForm = document.querySelector("form#contact-form");
if (contactForm) {
contactForm.addEventListener("submit", (event) => {
@@ -11,17 +11,17 @@ if (contactForm) {
event.preventDefault();
// feedback <span>s for later
const successSpan = document.getElementById("contact-form-result-success");
const errorSpan = document.getElementById("contact-form-result-error");
const successSpan = document.querySelector("span#contact-form-result-success");
const errorSpan = document.querySelector("span#contact-form-result-error");
// disable the whole form if the button has been disabled below (on success)
const submitButton = document.getElementById("contact-form-btn-submit");
const submitButton = document.querySelector("button#contact-form-btn-submit");
if (submitButton.disabled === true) {
return;
}
// change button appearance between click and server response
submitButton.innerText = "Sending...";
submitButton.textContent = "Sending...";
submitButton.disabled = true; // prevent accidental multiple submissions
submitButton.style.cursor = "default";
@@ -60,7 +60,7 @@ if (contactForm) {
errorSpan.style.display = "none";
// let user know we were successful
successSpan.innerText = "Success! You should hear from me soon. :)";
successSpan.textContent = "Success! You should hear from me soon. :)";
} else {
// pass on an error sent by the server
throw new Error(data.message);
@@ -71,16 +71,16 @@ if (contactForm) {
// give user feedback based on the error message returned
if (message === "USER_INVALID_CAPTCHA") {
errorSpan.innerText = "Did you complete the CAPTCHA? (If you're human, that is...)";
errorSpan.textContent = "Did you complete the CAPTCHA? (If you're human, that is...)";
} else if (message === "USER_MISSING_DATA") {
errorSpan.innerText = "Please make sure that all fields are filled in.";
errorSpan.textContent = "Please make sure that all fields are filled in.";
} else {
// something else went wrong, and it's probably my fault...
errorSpan.innerText = "Internal server error. Try again later?";
errorSpan.textContent = "Internal server error. Try again later?";
}
// reset submit button to let user try again
submitButton.innerText = "Try Again";
submitButton.textContent = "Try Again";
submitButton.disabled = false;
submitButton.style.cursor = "pointer";
submitButton.blur(); // remove keyboard focus from the button

12
assets/js/src/counter.js
View File

@@ -6,7 +6,7 @@ import urlParse from "url-parse";
const HITS_ENDPOINT = "/api/hits/";
// don't continue if there isn't a span#meta-hits element on this page
const wrapper = document.getElementById("meta-hits");
const wrapper = document.querySelector("div#meta-hits");
// page must have both span#meta-hits and canonical URL to enter
if (wrapper) {
@@ -35,19 +35,19 @@ if (wrapper) {
wrapper.title = `${hitsComma} ${hitsPlural}`;
// finally inject the hits...
const counter = document.getElementById("meta-hits-counter");
const counter = document.querySelector("span#meta-hits-counter");
if (counter) {
counter.appendChild(document.createTextNode(hitsComma));
counter.append(hitsComma);
}
// ...and hide the loading spinner
const spinner = document.getElementById("meta-hits-loading");
const spinner = document.querySelector("div#meta-hits-loading");
if (spinner) {
spinner.style.display = "none";
spinner.remove();
}
})
.catch(() => {
// something went horribly wrong, initiate coverup
wrapper.style.display = "none";
wrapper.remove();
});
}

4
assets/js/src/dark-mode.js
View File

@@ -2,7 +2,7 @@ import { init as initDarkMode } from "dark-mode-switcheroo";
// HACK: disable theme transition until user's preference is auto-restored (1/2)
const disableTransitionCSSHack = document.createElement("style");
document.head.appendChild(disableTransitionCSSHack);
document.head.append(disableTransitionCSSHack);
disableTransitionCSSHack.sheet.insertRule(`
*,
::before,
@@ -19,7 +19,7 @@ initDarkMode({
// HACK: re-enable theme transitions after a very short delay, otherwise there's a weird race condition (2/2)
setTimeout(() => {
document.head.removeChild(disableTransitionCSSHack);
disableTransitionCSSHack.remove();
}, 500);
},
});

10
assets/js/src/projects.js
View File

@@ -12,7 +12,7 @@ const PROJECTS_ENDPOINT = "/api/projects/?top&limit=12";
// don't continue if there isn't a span#meta-hits element on this page
// TODO: be better.
const wrapper = document.getElementById("github-cards");
const wrapper = document.querySelector("div#github-cards");
if (wrapper) {
dayjs.extend(dayjsLocalizedFormat);
@@ -74,13 +74,13 @@ if (wrapper) {
const div = document.createElement("div");
div.classList.add("github-card");
render(template(repo), div);
wrapper.appendChild(div);
wrapper.append(div);
});
// we're done, hide the loading spinner
const spinner = document.getElementById("loading-spinner");
const spinner = document.querySelector("div.loading");
if (spinner) {
spinner.style.display = "none";
spinner.remove();
}
// the repo descriptions were added after the first twemoji parsing
@@ -90,6 +90,6 @@ if (wrapper) {
})
.catch(() => {
// something went horribly wrong, initiate coverup
wrapper.style.display = "none";
wrapper.remove();
});
}

5
assets/sass/abstracts/_settings.scss
View File

@@ -15,8 +15,9 @@ $webfont-mono-variable: "Roboto Mono var";
// System fonts:
// https://markdotto.com/2018/02/07/github-system-fonts/
// stylelint-disable-next-line value-keyword-case
$system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;
$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
$system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji";
$system-fonts-monospace: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
// Prefer web fonts with system fonts as backup:
$font-stack-sans: list.join($webfont-sans, $system-fonts-sans);

2
assets/sass/abstracts/_themes.scss
View File

@@ -18,7 +18,7 @@
transition: list.join($addTransitions, $defaults, $separator: comma);
// keep track of the original selector(s) calling this mixin for below
$selectors: "#{&}";
$selectors: #{&};
// add corresponding body.light and body.dark root selectors
@each $theme, $map in $themes {

3
layouts/_default/single.html
View File

@@ -30,7 +30,8 @@
{{ if eq hugo.Environment "production" }}
<div id="meta-hits" style="display: none;">
<span class="meta-icon">👀</span>
<div id="meta-hits-loading" class="loading"><div></div><div></div><div></div></div><span id="meta-hits-counter"></span>
<div id="meta-hits-loading" class="loading"><div></div><div></div><div></div></div>
<span id="meta-hits-counter"></span>
</div>
{{ end }}
</div>

20
yarn.lock
View File

@@ -261,14 +261,14 @@
js-tokens "^4.0.0"
"@babel/parser@^7.16.0":
version "7.16.0"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.0.tgz#cf147d7ada0a3655e79bf4b08ee846f00a00a295"
integrity sha512-TEHWXf0xxpi9wKVyBCmRcSSDjbJ/cl6LUdlbYUHEaNQUJGhreJbZrXT6sR4+fZLxVUJqNRB4KyOvjuy/D9009A==
version "7.16.2"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.2.tgz#3723cd5c8d8773eef96ce57ea1d9b7faaccd12ac"
integrity sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==
"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.0":
version "7.16.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.0.tgz#efb7f147042aca34ce8156a055906a7abaadeaf0"
integrity sha512-djyecbGMEh4rOb/Tc1M5bUW2Ih1IZRa9PoubnPOCzM+DRE89uGUHR1Y+3aDdTMW4drjGRZ2ol8dt1JUFg6hJLQ==
version "7.16.2"
resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.2.tgz#2977fca9b212db153c195674e57cfab807733183"
integrity sha512-h37CvpLSf8gb2lIJ2CgC3t+EjFbi0t8qS7LCS1xcJIlEXE4czlofwaW7W1HA8zpgOCzI9C1nmoqNR1zWkk0pQg==
dependencies:
"@babel/helper-plugin-utils" "^7.14.5"
@@ -3381,9 +3381,9 @@ ee-first@1.1.1:
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
electron-to-chromium@^1.3.878:
version "1.3.885"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.885.tgz#c8cec32fbc61364127849ae00f2395a1bae7c454"
integrity sha512-JXKFJcVWrdHa09n4CNZYfYaK6EW5aAew7/wr3L1OnsD1L+JHL+RCtd7QgIsxUbFPeTwPlvnpqNNTOLkoefmtXg==
version "1.3.886"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.886.tgz#ac039c4001b665b1dd0f0ed9c2e4da90ff3c9267"
integrity sha512-+vYdeBosI63VkCtNWnEVFjgNd/IZwvnsWkKyPtWAvrhA+XfByKoBJcbsMgudVU/bUcGAF9Xp3aXn96voWlc3oQ==
emoji-regex@^8.0.0:
version "8.0.0"
@@ -5074,7 +5074,7 @@ https-proxy-agent@^5.0.0:
"hugo-extended@github:jakejarvis/hugo-extended#main":
version "0.88.1-patch1"
resolved "https://codeload.github.com/jakejarvis/hugo-extended/tar.gz/8251c012de3d7d7916c1cbf21ac8013f90a1a93c"
resolved "https://codeload.github.com/jakejarvis/hugo-extended/tar.gz/8698b388877ef0f4ffcd3c4b0411ec0608d44561"
dependencies:
careful-downloader "^2.0.1"
log-symbols "^5.0.0"