Hacker News API examples & templates
Use these vals as a playground to view and fork Hacker News API examples and templates on Val Town. Run any example below or find templates that can be used as a pre-built solution.
maxm
staticChess
HTTP
Check it out here: https://chess.maxmcd.com Plain, brutalist, no bloat chess. Every page is only html and css. Every chess move is made by clicking a link. Send a link to your friend and they'll send you one back to make your move. No silly animations or slick interactivity to trip up your gameplay. When Google indexes this site will we successfully compute all possible chess moves? Functionality is quite limited, and things might be broken. Please let me know if you find bugs! Inspired by this HN discussion about sites that have all possible game states of tic-tac-toe. I plan on extending this to support real gameplay. I think it could be a nice simple interface for long form games with friends. Might also be fun to add a static AI to play against. Feel free to PR any changes if you'd like to see something added.
30
petermillspaugh
newsletters
Script
Val Town email subscriptions: newsletters Cousin Val to @petermillspaugh/emailSubscription . Process for sending out a newsletter: Publish newsletter on the Web Fork and update monthly newsletter Val like january2024 Add new newsletter to this list Val sendEmailNewsletter cron val will attempt to send latest newsletter on the first of the month
0
ashryanio
routineTrackerApp
HTTP
Routine Tracker This is a little React component to make our 7yo's after school routine self-serve so she can be a bit more independent after school. To change the items in the list, modify the routineTasks array of objects: [
{name: "item", timed: false},
{name: "item 2", timed: true, duration: 2 * 60 }
{name: "item 3", timed: false, requiresParent: true}
] You can set the parent password on this line: const PARENT_PASSWORD_HASH = simpleHash("1234"); Todos Make the parent password modal touch friendly Track dates/times of list completions Show a tracker of how many completions this week
4
fil
cron_rezo_rss2bsky
Cron
Passerelle RSS vers BlueSky Ce script tourne une fois par heure et reposte les news de https://rezo.net/ vers le compte https://bsky.app/profile/rezo.net Il utilise 3 éléments: l'URL du flux RSS une variable de stockage de l'état, qu'il faut créer initialement comme let storage_rss_rezo = {} et qui sera mise à jour par le script les secrets du compte (username et mot de passe de l'application) Il appelle @me.bsky_rss_poll qui lit le flux, vérifie avec l'état s'il y a du nouveau, et au besoin nettoie le post, puis l'envoie avec le script @me.post_to_bsky . Sans oublier de mettre à jour l'état pour le prochain run. C'est un premier jet. Merci à @steve.krouse pour val.town et à @jordan pour ses scripts que j'ai bidouillés ici. À faire éventuellement: améliorer la logique; poster vers twitter .
0
petermillspaugh
emailSubscription
HTTP
Val Town email subscriptions 📧 Handles email subscription signup+verification and sending. Steps Fork and run the sibling Vals to set up SQLite tables: createSubscribers , createNewsletters , createEmailLogs Fork this Val and update for your use case (e.g. confirmation link, sendEmail args, form fields, etc.) Add an HTML form to your frontend that calls /send-verification , or just use / to return a simple HTML form Add a confirmation page on the frontend that calls /confirm-verification Fork sibling Vals to get verification email markup , send verification emails , create a list of newsletters , create a newsletter template , create an individual newsletter , send test emails , send emails , and handle unsubscribe Optionally, fork cousin Vals to view subscribers , email yourself daily subscriber count , email yourself a reminder to write your next newsletter , and send test emails Frontend form You should have a form that hits the /send-verification API endpoint on submit. Remember to adjust the endpoint URL to that of your fork (or else you'll be signing people up for my website!). As a simple alternative, you could use the / handler of this Val, which returns a simple HTML form. Here's a simple example using React: const EmailSignupForm = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
async function handleSubmit(e) {
e.preventDefault();
setName("");
setEmail("");
const formData = new FormData();
formData.append("name", name);
formData.append("email", email);
await fetch("https://petermillspaugh-emailSubscription.web.val.run/send-verification", {
method: "POST",
body: formData,
});
}
return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">First name</label>
<input
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
type="text"
required={true}
/>
<label htmlFor="email">Email</label>
<input
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
type="email"
required={true}
/>
<button type="submit">Subscribe</button>
</form>
);
}; You can see a full example on petemillspaugh.com: signup in the footer and code on github . You can add/remove input fields as you wish, of course (e.g. maybe you don't need a name, or maybe you want a how'd-you-hear-about-us field). Just adjust the SQL and frontend implementation accordingly. Frontend confirmation page Create a confirmation page that accepts an email and token as query params and calls the /confirm-verification endpoint. Simple example using React (and Next.js /page directory): const EmailConfirmationPage = () => {
const router = useRouter();
const { email, token } = router.query;
const [isConfirmed, setIsConfirmed] = useState(false);
useEffect(() => {
async function confirmEmail() {
if (!email || !token) return;
const response = await fetch(`https://petermillspaugh-emailSubscription.web.val.run/confirm-verification?email=${email}&token=${token}`, {
method: "PUT",
});
const { confirmed } = await response.json();
if (confirmed) setIsConfirmed(true);
}
confirmEmail();
}, [email, token]);
if (!isConfirmed) return null;
return (
<main>
<h1>You’re all set!</h1>
</main>
);
}; Full example is here and code is here . As an alternative, you could make /confirm-verification a GET route and have your email confirmation link sent by the first route be https://petermillspaugh-emailSubscription.web.val.run/confirm-verification?email=${email}&token=${token} (swapping in your namespace). That would be marginally faster, probably, but you'd still need some way to convey confirmation to the user (e.g. add some "You're all set" message to the return). Plus, the route writes to the subscribers table, so a PUT feels more appropriate. Notes Sending emails to people other than yourself on Val Town is a paid feature—if you want to stay on the free plan, you can go with a package like nodemailer or @sendgrid/mail
1
kaz
concentricCirclesApp
HTTP
* This app displays a thick horizontal line with a color gradient from dark red to yellow to light green.
* Below each section, there's a text input field. Each color section can have up to 8 values.
* It uses React for the UI and CSS for styling the gradient line and inputs.
* It includes a reorder functionality for the items in each section and an expandable "Learn more" section.
1
petermillspaugh
sendEmailNewsletter
Cron
Val Town email subscriptions: send email newsletter Cousin Val to @petermillspaugh/emailSubscription — see docs there. This Val has a few layers of protection to avoid double sending. Those mechanisms feel pretty hacky, so any suggestions are welcome! Feel free to comment on the Val or submit a PR.
0