feat: roller coaster logo and working favicon

- public/logo.svg: amber coaster silhouette (lift hill + vertical loop +
  camelback) on transparent background; used in header and README
- app/icon.tsx: PNG favicon via Next.js ImageResponse (works in all
  browsers including Safari); renders simplified hill + loop on dark
  rounded-square background
- app/page.tsx: logo img added next to "Thoosie Calendar" title in header
- README.md: logo displayed at top of document
- Remove app/icon.svg (replaced by icon.tsx → PNG)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-04 12:26:45 -04:00
parent 8b1c8dcb29
commit 81ff6ea659
5 changed files with 92 additions and 16 deletions

View File

@@ -1,5 +1,7 @@
# Thoosie Calendar
<img src="public/logo.svg" alt="Thoosie Calendar" width="320">
A week-by-week calendar showing operating hours for all Six Flags Entertainment Group theme parks — including the former Cedar Fair parks. Data is scraped from the Six Flags internal API and stored locally in SQLite. Click any park to see its full month calendar and live ride status with current wait times.
## Parks

View File

@@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<!-- Dark rounded background matching app --color-bg -->
<rect width="32" height="32" rx="6" fill="#0c1220"/>
<!-- Amber T: horizontal bar -->
<rect x="6" y="8" width="20" height="4" rx="1.5" fill="#f59e0b"/>
<!-- Amber T: vertical stem -->
<rect x="13" y="12" width="6" height="14" rx="1.5" fill="#f59e0b"/>
</svg>

Before

Width:  |  Height:  |  Size: 389 B

59
app/icon.tsx Normal file
View File

@@ -0,0 +1,59 @@
import { ImageResponse } from "next/og";
export const size = { width: 32, height: 32 };
export const contentType = "image/png";
export default function Icon() {
return new ImageResponse(
(
<div
style={{
width: 32,
height: 32,
borderRadius: 8,
backgroundColor: "#0c1220",
display: "flex",
position: "relative",
}}
>
{/* Ground line */}
<div
style={{
position: "absolute",
left: 3,
right: 3,
bottom: 7,
height: 2,
backgroundColor: "#f59e0b",
borderRadius: 1,
}}
/>
{/* Lift hill — semicircle bump */}
<div
style={{
position: "absolute",
left: 3,
bottom: 9,
width: 10,
height: 13,
backgroundColor: "#f59e0b",
borderRadius: "50% 50% 0 0",
}}
/>
{/* Vertical loop — circle outline */}
<div
style={{
position: "absolute",
right: 5,
bottom: 7,
width: 12,
height: 12,
border: "2.5px solid #f59e0b",
borderRadius: "50%",
}}
/>
</div>
),
{ width: 32, height: 32 },
);
}

View File

@@ -78,6 +78,9 @@ export default async function HomePage({ searchParams }: PageProps) {
justifyContent: "space-between",
gap: 12,
}}>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="/logo.svg" alt="" style={{ height: 28, width: "auto" }} />
<span style={{
fontSize: "1.1rem",
fontWeight: 700,
@@ -86,6 +89,7 @@ export default async function HomePage({ searchParams }: PageProps) {
}}>
Thoosie Calendar
</span>
</div>
<span style={{
background: "var(--color-surface)",

19
public/logo.svg Normal file
View File

@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 56" fill="none">
<!-- Lift hill + ground + camelback -->
<path
d="M 2 52 L 20 6 L 38 52 L 116 52 Q 134 22 152 52 L 196 52"
stroke="#f59e0b"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<!-- Vertical loop -->
<circle
cx="75"
cy="33"
r="19"
stroke="#f59e0b"
stroke-width="3.5"
fill="none"
/>
</svg>

After

Width:  |  Height:  |  Size: 434 B