How bagusyajamana/sk3nakopee works
Skena Coffee is a React cafe website organized as an editorial, interactive visitor experience. The principal journey is entering the page, exploring the coffee and food menu, and continuing through the brand story, brewing ritual, quote, location and closing section. The menu has distinct category selection, deck interaction and featured-item presentation stages. Layout hooks and the Pretext helper form an internal text-measurement layer for composed copy. Some section details come from the README; their wiring is shown only where documented.
Main entry points: App.jsx Page composition · MenuHighlights.jsx Menu highlights · pretext-helpers.js Pretext helpers · main.jsx React entry
Components 22
Page runtime
- React entry
src/main.jsx - Page composition
src/App.jsx
Menu experience
- Menu highlights
src/components/MenuHighlights.jsx - Menu content
src/data/menuItems.js - Category rail
src/components/CategoryToggleRail.jsx - Menu deck card
src/components/MenuDeckCard.jsx - Card face
src/components/MenuCardFace.jsx - Recommendation badge
src/components/RecommendedBadge.jsx - Menu preview
src/components/MenuPreviewImage.jsx
Editorial sections
- Navigation
src/components/Navbar.jsx - Hero opening
src/components/Hero.jsx - Coffee story
src/components/About.jsx - Brewing ritual
src/components/BrewGuide.jsx - Pull quote
src/components/PullQuote.jsx - Location and hours
src/components/LocationHours.jsx - Closing brand
src/components/Footer.jsx
Text layout
- Menu text layout
src/hooks/useMenuHighlightLayout.js - Obstacle text layout
src/hooks/useAboutOrbLayout.js - Brew text layout
src/hooks/useBrewGuidePretext.js - Quote text layout
src/hooks/usePullQuoteLayout.js - Pretext helpers
src/lib/pretext-helpers.js
Other components
- Visitor
Connections 24
- Visitor → React entry: opens site
- React entry → Page composition: renders
- Page composition → Navigation: renders
- Page composition → Hero opening: renders
- Page composition → Menu highlights: renders
- Page composition → Coffee story: renders
- Page composition → Brewing ritual: renders
- Page composition → Pull quote: renders
- Page composition → Location and hours: renders
- Page composition → Closing brand: renders
- Menu highlights → Menu content: reads categories
- Menu highlights → Category rail: renders and controls
- Menu highlights → Menu deck card: renders cards
- Menu highlights → Menu preview: renders preview
- Menu highlights → Menu text layout: measures descriptions
- Menu deck card → Card face: renders face
- Card face → Recommendation badge: shows recommendation
- Coffee story → Obstacle text layout: routes text
- Brewing ritual → Brew text layout: measures expansion
- Pull quote → Quote text layout: wraps around obstacle
- Menu text layout → Pretext helpers: measures text
- Obstacle text layout → Pretext helpers: lays out lines
- Brew text layout → Pretext helpers: measures text
- Quote text layout → Pretext helpers: lays out lines