Introducing Random Pages

Check it out here: https://teddysc.me/random

How they're made

• Next.js routes under /app
• /random/photo randomly selects a photo from my gallery images API and display it on the page
• /random/best-photo is like /random/photo but it selects from a limited subset of my favourite photos
• /random/mf calls an API hosted on Cloudflare Workers. The worker uses its D1 database binding to access the database where I store the posts on my channel, below is the SQL query used:
• /random/blog-post similar to the one above, but for blog posts on this site. No SQL involved, just the blog posts JSON API.

-- SQL query for /random/mf
  SELECT json_object(
    'mediaFile_url', json_extract(data, '$.mediaFile.url'),
    'title', json_extract(data, '$.title'),
    'link', json_extract(data, '$.link'),
    'description', json_extract(data, '$.description')
  ) AS extracted
  FROM items
  ORDER BY random()

Users navigation history is saved in component state, use the left/right button to navigate.

Buttons are made with Tailwind CSS.

Tips

• Hit the space bar or the r key to trigger the Refresh button.
• The hotkey for going to the previous random item is ← or h and the next is → or l (VIM key binding).
• Be careful, the Refresh buttons are addictive!

Use in ChatGPT

https://teddysc.me/randomgpt (ChatGPT subscription required)

Demo: https://g.teddysc.me/tddschn/96eabf1ff3cef9645b7d630a1eee240b

More details: My GPTs