\n 🇿🇦 South African Heritage\n

\n \n

\n onCategoryChange(null)}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n activeCategory === null\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'\n }`}\n >\n All Sites\n \n \n {categories.map((category) => (\n onCategoryChange(category.id)}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center space-x-1 ${\n activeCategory === category.id\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'\n }`}\n >\n {category.icon}\n {category.name}\n \n ))}\n

\n \n {/* Mobile menu */}\n

\n onCategoryChange(e.target.value || null)}\n className=\"block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\"\n >\n \n {categories.map((category) => (\n \n ))}\n \n

\n );\n}",[172,92,66],"8be2b6be-3fa4-11f0-bdc0-76b3cceeab13",["D",1748863640249],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { HeritageSite } from \"../../shared/types.ts\";\n\ninterface HeritageProps {\n site: HeritageSite;\n index: number;\n}\n\nexport default function Heritage({ site, index }: HeritageProps) {\n const getCategoryBadgeClass = (category: string) => {\n switch (category) {\n case 'historical':\n return 'category-badge category-historical';\n case 'cultural':\n return 'category-badge category-cultural';\n case 'natural':\n return 'category-badge category-natural';\n default:\n return 'category-badge';\n }\n };\n\n const getCategoryIcon = (category: string) => {\n switch (category) {\n case 'historical':\n return '🏛️';\n case 'cultural':\n return '🎭';\n case 'natural':\n return '🌿';\n default:\n return '📍';\n }\n };\n\n const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(site.imagePrompt)}`;\n\n return (\n

\n \n

\n \n {getCategoryIcon(site.category)} {site.category}\n \n

\n {site.yearEstablished && (\n

\n Est. {site.yearEstablished}\n

\n )}\n

\n \n

{site.name}

\n \n

\n 📍 {site.location}\n

\n \n

\n {site.description}\n

\n \n

Cultural Significance

\n {site.significance}\n

\n );\n}",[172,92,81],"9cf9f462-3fa4-11f0-8200-76b3cceeab13",["D",1748863668920],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport Navigation from \"./Navigation.tsx\";\nimport Heritage from \"./Heritage.tsx\";\nimport type { HeritageSite, HeritageCategory } from \"../../shared/types.ts\";\n\ndeclare global {\n interface Window {\n __INITIAL_DATA__?: {\n categories: HeritageCategory[];\n sites: HeritageSite[];\n };\n }\n}\n\nexport default function App() {\n const [categories, setCategories] = useState([]);\n const [sites, setSites] = useState([]);\n const [activeCategory, setActiveCategory] = useState(null);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n // Use initial data if available, otherwise fetch from API\n if (window.__INITIAL_DATA__) {\n setCategories(window.__INITIAL_DATA__.categories);\n setSites(window.__INITIAL_DATA__.sites);\n setLoading(false);\n } else {\n fetchData();\n }\n }, []);\n\n const fetchData = async () => {\n try {\n const [categoriesRes, sitesRes] = await Promise.all([\n fetch('/api/categories'),\n fetch('/api/sites')\n ]);\n \n const categoriesData = await categoriesRes.json();\n const sitesData = await sitesRes.json();\n \n setCategories(categoriesData);\n setSites(sitesData);\n } catch (error) {\n console.error('Error fetching data:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const filteredSites = activeCategory \n ? sites.filter(site => site.category === activeCategory)\n : sites;\n\n const activeCategories = categories.find(cat => cat.id === activeCategory);\n\n if (loading) {\n return (\n

Loading South African Heritage...

\n );\n }\n\n return (\n

\n \n \n {/* Hero Section */}\n

\n Discover South Africa's Rich Heritage\n

\n Explore the cultural treasures, historical landmarks, and natural wonders \n that tell the story of the Rainbow Nation\n

{sites.length}

Heritage Sites

Official Languages

UNESCO Sites

\n\n {/* Category Description */}\n {activeCategories && (\n

\n {activeCategories.icon} {activeCategories.name}\n

\n {activeCategories.description}\n

\n )}\n\n {/* Heritage Sites Grid */}\n

\n {filteredSites.length === 0 ? (\n

No heritage sites found for this category.

\n ) : (\n

\n {filteredSites.map((site, index) => (\n \n ))}\n

\n )}\n

\n\n {/* Footer */}\n \n

\n );\n}",[172,92,90],"pulls","branches",1,"forks","envVars",{"_196":26,"_198":26},"connections",{"_196":26,"_197":26},"count","unfilledCount","emptyCount",{"_35":285,"_13":284,"_64":277,"_45":-5,"_37":38,"_166":286,"_167":24,"_39":287,"_41":26,"_67":93,"_169":-5,"_69":30,"_170":-5,"_218":288,"_17":289},{"_35":275,"_13":276,"_64":105,"_45":277,"_37":38,"_166":278,"_167":24,"_39":279,"_41":190,"_67":280,"_169":281,"_69":30,"_170":-5,"_218":282,"_17":283},{"_35":271,"_13":172,"_64":165,"_45":-5,"_37":38,"_166":254,"_167":24,"_39":272,"_41":26,"_67":93,"_169":-5,"_69":30,"_170":-5,"_218":273,"_17":274},{"_35":164,"_13":92,"_64":91,"_45":165,"_37":38,"_166":42,"_167":24,"_39":268,"_41":26,"_67":93,"_169":-5,"_69":30,"_170":-5,"_218":269,"_17":270},{"_35":184,"_13":90,"_64":89,"_45":91,"_37":38,"_166":84,"_167":24,"_39":265,"_41":26,"_67":68,"_169":186,"_69":30,"_170":-5,"_218":266,"_17":267},{"_35":180,"_13":81,"_64":80,"_45":91,"_37":38,"_166":75,"_167":24,"_39":262,"_41":26,"_67":68,"_169":182,"_69":30,"_170":-5,"_218":263,"_17":264},{"_35":176,"_13":66,"_64":65,"_45":91,"_37":38,"_166":42,"_167":24,"_39":259,"_41":26,"_67":68,"_169":178,"_69":30,"_170":-5,"_218":260,"_17":261},{"_35":251,"_13":252,"_64":253,"_45":165,"_37":38,"_166":254,"_167":24,"_39":255,"_41":26,"_67":21,"_169":256,"_69":30,"_170":-5,"_218":257,"_17":258},{"_35":243,"_13":244,"_64":245,"_45":165,"_37":38,"_166":246,"_167":24,"_39":247,"_41":26,"_67":68,"_169":248,"_69":30,"_170":-5,"_218":249,"_17":250},{"_35":235,"_13":236,"_64":237,"_45":165,"_37":38,"_166":238,"_167":24,"_39":239,"_41":26,"_67":21,"_169":240,"_69":30,"_170":-5,"_218":241,"_17":242},{"_35":231,"_13":230,"_64":224,"_45":-5,"_37":38,"_166":225,"_167":24,"_39":232,"_41":26,"_67":93,"_169":-5,"_69":30,"_170":-5,"_218":233,"_17":234},{"_35":221,"_13":222,"_64":223,"_45":224,"_37":38,"_166":225,"_167":24,"_39":226,"_41":26,"_67":68,"_169":227,"_69":30,"_170":-5,"_218":228,"_17":229},{"_35":212,"_13":213,"_64":214,"_45":-5,"_37":38,"_166":215,"_167":24,"_39":216,"_41":190,"_67":21,"_169":217,"_69":30,"_170":-5,"_218":219,"_17":220},"54fea5b8-3fa4-11f0-8063-76b3cceeab13","README.md","041d43e8-3fa4-11f0-9737-76b3cceeab13",6,["D",1748863548155],"# South African Heritage Website 🇿🇦\n\nA comprehensive website showcasing the rich cultural heritage of South Africa, featuring historical sites, cultural traditions, and significant landmarks.\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main React app\n│ │ ├── Heritage.tsx # Heritage site component\n│ │ └── Navigation.tsx # Navigation component\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Custom styles\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── README.md\n```\n\n## Features\n\n- Interactive heritage site showcase\n- Detailed descriptions of cultural landmarks\n- AI-generated images for visual appeal\n- Responsive design with TailwindCSS\n- Categories: Historical Sites, Cultural Traditions, Natural Heritage\n\n## Tech Stack\n\n- Backend: Hono (TypeScript)\n- Frontend: React 18.2.0 with TypeScript\n- Styling: TailwindCSS\n- Images: AI-generated via Val Town image service\n\n## Getting Started\n\nThe main HTTP endpoint is in `backend/index.ts`. Visit the website to explore South Africa's rich heritage!","children",[],[213],"57d2af8c-3fa4-11f0-b992-76b3cceeab13","types.ts","57d2b05e-3fa4-11f0-b992-76b3cceeab13","8435ae41-df67-437e-b254-ed2708f5beff",7,["D",1748863552898],"export interface HeritageSite {\n id: string;\n name: string;\n description: string;\n category: 'historical' | 'cultural' | 'natural';\n location: string;\n yearEstablished?: number;\n significance: string;\n imagePrompt: string;\n}\n\nexport interface HeritageCategory {\n id: string;\n name: string;\n description: string;\n icon: string;\n}",[],[230,222],"shared","57d2b78e-3fa4-11f0-b992-76b3cceeab13",["D",1748863552898],[210],[230],"78abdf30-3fa4-11f0-9f61-76b3cceeab13","style.css","78abe00c-3fa4-11f0-9f61-76b3cceeab13",10,["D",1748863608014],"/* Custom styles for South African Heritage website */\n\n.heritage-card {\n background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.heritage-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n border-color: #3b82f6;\n}\n\n.category-badge {\n display: inline-flex;\n align-items: center;\n padding: 0.25rem 0.75rem;\n border-radius: 9999px;\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.category-historical {\n background-color: #fef3c7;\n color: #92400e;\n}\n\n.category-cultural {\n background-color: #ddd6fe;\n color: #5b21b6;\n}\n\n.category-natural {\n background-color: #d1fae5;\n color: #065f46;\n}\n\n.hero-pattern {\n background-image: \n radial-gradient(circle at 25px 25px, rgba(255,255,255,0.2) 2%, transparent 0%),\n radial-gradient(circle at 75px 75px, rgba(255,255,255,0.1) 2%, transparent 0%);\n background-size: 100px 100px;\n}\n\n.text-shadow {\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.animate-fade-in-up {\n animation: fadeInUp 0.6s ease-out forwards;\n}\n\n.stagger-1 { animation-delay: 0.1s; }\n.stagger-2 { animation-delay: 0.2s; }\n.stagger-3 { animation-delay: 0.3s; }\n.stagger-4 { animation-delay: 0.4s; }\n.stagger-5 { animation-delay: 0.5s; }\n.stagger-6 { animation-delay: 0.6s; }",[],[172,236],"7b8b9dee-3fa4-11f0-8285-76b3cceeab13","index.tsx","7b8b9e8e-3fa4-11f0-8285-76b3cceeab13",11,["D",1748863612836],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[172,244],"71e05b0e-3fa4-11f0-ba89-76b3cceeab13","index.html","71e05bc2-3fa4-11f0-ba89-76b3cceeab13",9,["D",1748863596612],"\n\n\n \n \n South African Heritage 🇿🇦\n \n \n \n \n\n\n

\n \n\n",[],[172,252],["D",1748863626360],[],[172,92,66],["D",1748863640249],[],[172,92,81],["D",1748863668920],[],[172,92,90],["D",1748863626360],[203,204,205],[172,92],"71e06e1e-3fa4-11f0-ba89-76b3cceeab13",["D",1748863596612],[202,206,207,208],[172],"a1414b4c-3fa4-11f0-b088-76b3cceeab13","index.ts","0519d87d-2f97-4f50-973c-e6b0fb0b3ab7",15,["D",1748863676099],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport type { HeritageSite, HeritageCategory } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Heritage data\nconst heritageCategories: HeritageCategory[] = [\n {\n id: \"historical\",\n name: \"Historical Sites\",\n description: \"Ancient ruins, colonial buildings, and sites of historical significance\",\n icon: \"🏛️\"\n },\n {\n id: \"cultural\",\n name: \"Cultural Heritage\",\n description: \"Traditional practices, art forms, and cultural landmarks\",\n icon: \"🎭\"\n },\n {\n id: \"natural\",\n name: \"Natural Heritage\",\n description: \"UNESCO World Heritage natural sites and protected areas\",\n icon: \"🌿\"\n }\n];\n\nconst heritageSites: HeritageSite[] = [\n {\n id: \"robben-island\",\n name: \"Robben Island\",\n description: \"A UNESCO World Heritage Site, Robben Island served as a prison for political prisoners during apartheid, most notably Nelson Mandela who was imprisoned here for 18 years. The island now stands as a symbol of the triumph of democracy and freedom over oppression.\",\n category: \"historical\",\n location: \"Western Cape, Cape Town\",\n yearEstablished: 1999,\n significance: \"Symbol of the struggle against apartheid and the triumph of democracy\",\n imagePrompt: \"robben-island-prison-south-africa-historical-site-with-ocean-view\"\n },\n {\n id: \"cradle-of-humankind\",\n name: \"Cradle of Humankind\",\n description: \"One of the world's most important paleoanthropological sites, containing a complex of limestone caves with the largest collection of human ancestral remains ever found. The area has yielded evidence of human evolution spanning over 3.5 million years.\",\n category: \"natural\",\n location: \"Gauteng Province\",\n yearEstablished: 1999,\n significance: \"Contains the world's richest hominin fossil bearing sites\",\n imagePrompt: \"cradle-of-humankind-south-africa-limestone-caves-archaeological-site\"\n },\n {\n id: \"drakensberg\",\n name: \"uKhahlamba-Drakensberg Park\",\n description: \"The Drakensberg Mountains contain the largest and most concentrated group of paintings in Africa south of the Sahara, made by the San people over a period of 4,000 years. The area combines both natural beauty and cultural heritage.\",\n category: \"cultural\",\n location: \"KwaZulu-Natal\",\n yearEstablished: 2000,\n significance: \"Largest collection of San rock art in Africa\",\n imagePrompt: \"drakensberg-mountains-south-africa-san-rock-art-ancient-paintings\"\n },\n {\n id: \"cape-floral-kingdom\",\n name: \"Cape Floral Region\",\n description: \"Despite being the smallest of the world's six floral kingdoms, the Cape Floral Region has the highest known concentration of plant species in the world. It contains nearly 20% of Africa's flora on just 4% of its land area.\",\n category: \"natural\",\n location: \"Western Cape and Eastern Cape\",\n yearEstablished: 2004,\n significance: \"Highest plant diversity per unit area in the world\",\n imagePrompt: \"cape-floral-region-south-africa-fynbos-protea-flowers-biodiversity\"\n },\n {\n id: \"mapungubwe\",\n name: \"Mapungubwe Cultural Landscape\",\n description: \"The remains of the largest kingdom in the subcontinent before the arrival of Europeans. Mapungubwe developed into the largest kingdom in the subcontinent and was the precursor to the Great Zimbabwe civilization.\",\n category: \"historical\",\n location: \"Limpopo Province\",\n yearEstablished: 2003,\n significance: \"Evidence of the first indigenous kingdom in southern Africa\",\n imagePrompt: \"mapungubwe-archaeological-site-south-africa-ancient-kingdom-ruins\"\n },\n {\n id: \"vredefort-dome\",\n name: \"Vredefort Dome\",\n description: \"The world's oldest and largest clearly visible meteorite impact structure. Created by a meteorite impact 2.023 billion years ago, it provides crucial evidence of the Earth's geological history and the impact of extraterrestrial bodies.\",\n category: \"natural\",\n location: \"Free State Province\",\n yearEstablished: 2005,\n significance: \"World's oldest and largest meteorite impact structure\",\n imagePrompt: \"vredefort-dome-south-africa-meteorite-impact-crater-geological-formation\"\n },\n {\n id: \"zulu-culture\",\n name: \"Zulu Cultural Heritage\",\n description: \"The Zulu nation represents one of South Africa's largest ethnic groups, known for their rich traditions, warrior history, beadwork, and cultural practices. Their heritage includes traditional ceremonies, music, dance, and the legacy of leaders like King Shaka Zulu.\",\n category: \"cultural\",\n location: \"KwaZulu-Natal\",\n significance: \"Largest ethnic group in South Africa with rich warrior traditions\",\n imagePrompt: \"zulu-cultural-heritage-south-africa-traditional-dress-beadwork-ceremony\"\n },\n {\n id: \"khoi-san-heritage\",\n name: \"Khoi-San Heritage\",\n description: \"The Khoi-San peoples are the indigenous inhabitants of southern Africa, with a history spanning thousands of years. Their heritage includes unique languages with click consonants, traditional hunting and gathering practices, and extensive rock art.\",\n category: \"cultural\",\n location: \"Throughout South Africa\",\n significance: \"Indigenous peoples of southern Africa with ancient cultural traditions\",\n imagePrompt: \"khoi-san-heritage-south-africa-traditional-hunter-gatherer-culture-rock-art\"\n },\n {\n id: \"cape-dutch-architecture\",\n name: \"Cape Dutch Architecture\",\n description: \"A unique architectural style that developed in the Western Cape during the 17th-18th centuries, blending Dutch, German, French, and indigenous influences. Characterized by whitewashed walls, thatched roofs, and ornate gables.\",\n category: \"historical\",\n location: \"Western Cape\",\n yearEstablished: 1600,\n significance: \"Unique colonial architectural style reflecting cultural fusion\",\n imagePrompt: \"cape-dutch-architecture-south-africa-whitewashed-buildings-thatched-roofs-gables\"\n }\n];\n\n// API Routes\napp.get(\"/api/categories\", (c) => {\n return c.json(heritageCategories);\n});\n\napp.get(\"/api/sites\", (c) => {\n const category = c.req.query(\"category\");\n if (category) {\n const filteredSites = heritageSites.filter(site => site.category === category);\n return c.json(filteredSites);\n }\n return c.json(heritageSites);\n});\n\napp.get(\"/api/sites/:id\", (c) => {\n const id = c.req.param(\"id\");\n const site = heritageSites.find(s => s.id === id);\n if (!site) {\n return c.json({ error: \"Site not found\" }, 404);\n }\n return c.json(site);\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main page\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject initial data\n const initialData = {\n categories: heritageCategories,\n sites: heritageSites\n };\n \n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\nexport default app.fetch;",[],[284,276],"backend","6beac694-3fa4-11f0-ae95-76b3cceeab13",8,["D",1748863586608],[200],[284],["D",1748863412453],{"_11":12,"_142":72},{"_11":12,"_138":-5,"_71":72,"_31":70,"_139":140,"_141":30},{"_41":129,"_13":16,"_35":38,"_130":95,"_131":-5,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":14,"_137":12},"ctx",{"_54":-5,"_161":327,"_328":329,"_330":331,"_332":30,"_333":30,"_334":30,"_335":24,"_336":-5,"_337":-7,"_338":-7,"_339":26,"_340":30,"_341":30,"_342":-5,"_343":30,"_344":30,"_345":30,"_346":-5},"ENV",{"_298":299,"_300":301,"_302":16,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · components