badblocks/personal-site
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix script and style tags being outside the fragment (and thus rendering
All checks were successful
Build And Deploy / build-and-deploy (push) Successful in 1m23s
Details

Browse source 
before <html> tag)
This commit is contained in:
badblocks 2026-02-27 10:44:17 -08:00
parent e80bbb9619
commit 89c369d1cc
No known key found for this signature in database
2 changed files with 125 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/layouts/BaseLayout.astro
View file

@ -19,13 +19,16 @@
<meta name="generator" content={Astro.generator} />
<meta name="darkreader-lock" />
<link rel="sitemap" href="/sitemap-index.xml" />
<script data-goatcounter="https://badblocks.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
<slot name="head" />
</head>
<body>
<script
data-goatcounter="https://badblocks.goatcounter.com/count"
async
src="//gc.zgo.at/count.js"></script>
<script>
import "iconify-icon";
</script>
<slot name="head" />
</head>
<body>
<header>
<h1>badblocks.dev</h1>
<nav>

234
src/pages/contact.astro
View file

@ -26,124 +26,126 @@ const phoneValue = pickValue("phone");
const msgValue = pickValue("msg");
---
<script>
import Cap from "@cap.js/widget";
import "iconify-icon";
const captchaInput = document.querySelector("input[id='captcha']");
const captchaStatus = document.querySelector("#captchaStatus");
const statusText = captchaStatus?.querySelector("#statusText");
const initIcon = captchaStatus?.querySelector("#initIcon");
const completeIcon = captchaStatus?.querySelector("#completeIcon");
const errorIcon = captchaStatus?.querySelector("#errorIcon");
const progressIcon = captchaStatus?.querySelector("#progressIcon");
const cap = new Cap({
apiEndpoint: "/cap/",
});
if (
captchaStatus &&
statusText &&
initIcon &&
completeIcon &&
errorIcon &&
progressIcon
) {
cap.addEventListener("solve", function (e) {
const humanness = Math.round((85 + Math.random() * 14.9) * 10) / 10;
statusText.textContent = `${humanness}% human. Good enough!`;
progressIcon.classList.add("hidden");
errorIcon.classList.add("hidden");
initIcon.classList.add("hidden");
completeIcon.classList.remove("hidden");
});
cap.addEventListener("error", function (e) {
statusText.textContent = "Oops! We crashed!";
progressIcon.classList.add("hidden");
completeIcon.classList.add("hidden");
initIcon.classList.add("hidden");
errorIcon.classList.remove("hidden");
});
cap.addEventListener("progress", (event) => {
statusText.textContent = `Weighing your humanity... ${event.detail.progress}%`;
errorIcon.classList.add("hidden");
completeIcon.classList.add("hidden");
initIcon.classList.add("hidden");
progressIcon.classList.remove("hidden");
});
}
if (captchaInput && "value" in captchaInput) {
const { token } = await cap.solve();
captchaInput.value = token;
}
</script>
<style>
form {
display: grid;
row-gap: var(--stack-large);
column-gap: var(--gutter-large);
width: 100%;
margin-inline: auto;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"header header"
"name phone"
"msg msg"
"captcha otp"
"lbtn rbtn";
}
#header {
grid-area: header;
}
label[for="name"] {
grid-area: name;
}
label[for="phone"] {
grid-area: phone;
}
label[for="msg"] {
grid-area: msg;
}
label[for="otp"] {
grid-area: otp;
}
label[for="captcha"] {
grid-area: captcha;
}
#captchaStatus {
padding-block: calc(2px + (var(--stack-small) * 1));
cursor: text;
}
#statusText {
margin-inline-start: 0.5rem;
}
button#reset {
grid-area: lbtn;
}
button#send_otp {
grid-area: lbtn;
}
button#send_msg {
grid-area: rbtn;
}
fieldset {
display: contents;
}
.spin {
animation: spin 4s linear infinite;
position: relative;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<Layout>
<title slot="head">Contact</title>
<Fragment slot="head">
<script>
import Cap from "@cap.js/widget";
import "iconify-icon";
const captchaInput = document.querySelector("input[id='captcha']");
const captchaStatus = document.querySelector("#captchaStatus");
const statusText = captchaStatus?.querySelector("#statusText");
const initIcon = captchaStatus?.querySelector("#initIcon");
const completeIcon = captchaStatus?.querySelector("#completeIcon");
const errorIcon = captchaStatus?.querySelector("#errorIcon");
const progressIcon = captchaStatus?.querySelector("#progressIcon");
const cap = new Cap({
apiEndpoint: "/cap/",
});
if (
captchaStatus &&
statusText &&
initIcon &&
completeIcon &&
errorIcon &&
progressIcon
) {
cap.addEventListener("solve", function (e) {
const humanness = Math.round((85 + Math.random() * 14.9) * 10) / 10;
statusText.textContent = `${humanness}% human. Good enough!`;
progressIcon.classList.add("hidden");
errorIcon.classList.add("hidden");
initIcon.classList.add("hidden");
completeIcon.classList.remove("hidden");
});
cap.addEventListener("error", function (e) {
statusText.textContent = "Oops! We crashed!";
progressIcon.classList.add("hidden");
completeIcon.classList.add("hidden");
initIcon.classList.add("hidden");
errorIcon.classList.remove("hidden");
});
cap.addEventListener("progress", (event) => {
statusText.textContent = `Weighing your humanity... ${event.detail.progress}%`;
errorIcon.classList.add("hidden");
completeIcon.classList.add("hidden");
initIcon.classList.add("hidden");
progressIcon.classList.remove("hidden");
});
}
if (captchaInput && "value" in captchaInput) {
const { token } = await cap.solve();
captchaInput.value = token;
}
</script>
<style>
form {
display: grid;
row-gap: var(--stack-large);
column-gap: var(--gutter-large);
width: 100%;
margin-inline: auto;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"header header"
"name phone"
"msg msg"
"captcha otp"
"lbtn rbtn";
}
#header {
grid-area: header;
}
label[for="name"] {
grid-area: name;
}
label[for="phone"] {
grid-area: phone;
}
label[for="msg"] {
grid-area: msg;
}
label[for="otp"] {
grid-area: otp;
}
label[for="captcha"] {
grid-area: captcha;
}
#captchaStatus {
padding-block: calc(2px + (var(--stack-small) * 1));
cursor: text;
}
#statusText {
margin-inline-start: 0.5rem;
}
button#reset {
grid-area: lbtn;
}
button#send_otp {
grid-area: lbtn;
}
button#send_msg {
grid-area: rbtn;
}
fieldset {
display: contents;
}
.spin {
animation: spin 4s linear infinite;
position: relative;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</Fragment>
<Fragment slot="content">
<h2>Contact</h2>
{