diff --git a/src/routes/about/+page.server.ts b/src/routes/about/+page.server.ts
new file mode 100644
index 0000000..9b7aa34
--- /dev/null
+++ b/src/routes/about/+page.server.ts
@@ -0,0 +1,13 @@
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+import { marked } from 'marked';
+
+export async function load() {
+ const about = readFileSync(resolve('static/about.md'), 'utf-8');
+ const howToPlay = readFileSync(resolve('static/how-to-play.md'), 'utf-8');
+
+ return {
+ about: await marked(about),
+ howToPlay: await marked(howToPlay)
+ };
+}
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..8b38c91
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1,48 @@
+
+ About — Bibdle
+
+
+
+
+
+
+
+
+
+
+ {#if aboutParts}
+ {@html aboutParts[0]}
+
+
+
+ {@html aboutParts[1]}
+ {:else}
+ {@html data.about}
+ {/if}
+
+
+
+ {@html data.howToPlay}
+
+
+
+
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 99419b9..7b93d94 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -2,20 +2,31 @@
@import 'tailwindcss';
@plugin '@tailwindcss/typography';
+@custom-variant dark (&:where(.dark, .dark *));
+
@theme {
--font-triodion: "PT Serif", serif;
}
html, body {
background: oklch(89.126% 0.06134 298.626);
+ transition: background 0.3s ease;
}
@media (prefers-color-scheme: dark) {
- html, body {
+ html:not(.light), body:not(.light) {
background: oklch(18% 0.03 298.626);
}
}
+html.dark, html.dark body {
+ background: oklch(18% 0.03 298.626);
+}
+
+html.light, html.light body {
+ background: oklch(89.126% 0.06134 298.626);
+}
+
.big-text {
font-size: 0.75rem;
text-transform: uppercase;
@@ -25,11 +36,19 @@ html, body {
}
@media (prefers-color-scheme: dark) {
- .big-text {
+ html:not(.light) .big-text {
color: rgb(156 163 175);
}
}
+html.dark .big-text {
+ color: rgb(156 163 175);
+}
+
+html.light .big-text {
+ color: rgb(107 114 128);
+}
+
/* Page load animations */
@keyframes fadeInUp {
from {
@@ -60,4 +79,4 @@ html, body {
.animate-delay-800 {
animation-delay: 0.8s;
-}
\ No newline at end of file
+}
diff --git a/src/routes/sitemap.xml/+server.ts b/src/routes/sitemap.xml/+server.ts
new file mode 100644
index 0000000..faee521
--- /dev/null
+++ b/src/routes/sitemap.xml/+server.ts
@@ -0,0 +1,23 @@
+import type { RequestHandler } from '@sveltejs/kit';
+
+export const GET: RequestHandler = () => {
+ const sitemap = `
+
+
+ https://bibdle.com/
+ daily
+ 1.0
+
+
+ https://bibdle.com/about
+ monthly
+ 0.5
+
+`;
+
+ return new Response(sitemap, {
+ headers: {
+ 'Content-Type': 'application/xml'
+ }
+ });
+};
diff --git a/static/about.md b/static/about.md
new file mode 100644
index 0000000..6e01c35
--- /dev/null
+++ b/static/about.md
@@ -0,0 +1,15 @@
+# About Bibdle
+
+Bibdle is a daily Bible guessing game. Every day, a random verse is posted to the website. Try to figure out which book of the Bible it comes from, in as few guesses as possible. That's it!
+
+---
+
+The game was built with the hope that it would be a small, delightful thing people can make part of their day. It's not a Bible study course. You don't need to know the Bible inside and out to enjoy it or to learn something from it.
+
+If you're someone who grew up in church and can name all 66 books in order, great. If you're someone who can barely tell the Old Testament from the New, that's great too. The game meets you where you are.
+
+It is completely free. If you'd like to support the developer (who works solely on small projects like this one) or express your thanks, you can become a Bibdle patron.
+
+If you use Bibdle, I would love to hear from you! I can be reached via email or through Bluesky.
+
+
diff --git a/static/how-to-play.md b/static/how-to-play.md
new file mode 100644
index 0000000..a3b88ca
--- /dev/null
+++ b/static/how-to-play.md
@@ -0,0 +1,47 @@
+# How to Play
+
+Each day, Bibdle gives you a verse from the Bible. Your job is to guess which book it comes from. (Genesis, John, Corinthians, etc.)
+
+You have unlimited guesses.
+
+---
+
+## The Basics
+
+1. **Read the verse.** It appears at the top of the page.
+2. **Make a guess.** Type or select a book of the Bible from the list.
+3. **Read the feedback.** After each guess, you'll get clues telling you how close you were.
+4. **Keep guessing** until you get it right.
+
+
+---
+
+## Feedback Hints
+
+After each wrong guess, you'll see the following hints:
+
+| Hint | What it means |
+|---|---|
+| **Testament** | If your guess was in the correct Testament (Old or New) |
+| **Section** | If your guess was in the correct section of the Bible (e.g. Gospels, Epistles, Major Prophets) |
+| **First Letter** | If your guess has the same first letter as the correct guess |
+
+Use the hints to narrow down your search.
+
+---
+
+## A Few Things to Know
+
+- **Everyone plays the same verse each day.** The daily verse resets at midnight.
+- **Your progress is saved automatically.** You can close the tab and come back later.
+
+---
+
+## Tips
+
+- Pay attention to writing style: the voice of Psalms is very different from Paul's letters.
+- Historical narrative (battles, kings, genealogies) tends to be Old Testament.
+- Short, poetic, or wisdom-focused verses could be Proverbs, Ecclesiastes, or Psalms.
+- If a verse mentions Jesus by name, it's in the New Testament.
+
+Good luck!
diff --git a/static/robots.txt b/static/robots.txt
index b6dd667..44b881a 100644
--- a/static/robots.txt
+++ b/static/robots.txt
@@ -1,3 +1,5 @@
# allow crawling everything by default
User-agent: *
Disallow:
+
+Sitemap: https://bibdle.com/sitemap.xml
diff --git a/todo.md b/todo.md
index 638fe42..e8ef345 100644
--- a/todo.md
+++ b/todo.md
@@ -59,6 +59,12 @@ I created Bibdle from a combination of two things. The first is my lifelong desi
# done
+## march 12th
+
+- Added about page with social buttons and XML sitemap for SEO
+- Fixed incorrect header background color on Desktop
+- Added color theme toggle button (commented out for now)
+
## feb 26th
- Added dark mode