From b563f8b3f42153fc71587d5a8ecd2d1969271ae4 Mon Sep 17 00:00:00 2001 From: WilliamRagstad Date: Sun, 4 Aug 2024 00:44:07 +0200 Subject: [PATCH] Replace dashboard image with code example --- src/components/CodeBox.jsx | 341 +++++++++++++++++++++++++++++++++++++ src/components/Hero.jsx | 12 +- src/layouts/Layout.astro | 30 ++++ tailwind.config.cjs | 1 + 4 files changed, 379 insertions(+), 5 deletions(-) create mode 100644 src/components/CodeBox.jsx diff --git a/src/components/CodeBox.jsx b/src/components/CodeBox.jsx new file mode 100644 index 0000000..7fcc3fb --- /dev/null +++ b/src/components/CodeBox.jsx @@ -0,0 +1,341 @@ +export const CodeBox = () => (<> + +
+
+
+
+ +
+
+
main.wx
+
+
+
handler.wx
+
+
+
auth.wx
+
+
+
package.json
+
+
+
+ + 
+					
+						

+							// HTML pages and fragments
+						

+						

+							get
+							
+							/
+							
+							{"("}
+							<html lang="en">
+						

+						

+							
+							<body>
+						

+						

+							
+							
+							<h1>
+							Hello from WebX!
+							</h1>
+						

+						

+							
+							
+							<button hx-get="/about"  hx-swap="outerHTML">
+							About
+							</button>
+						

+						

+							
+							
+							<h2>
+							Favorite Foods
+							</h2>
+						

+						

+							
+							
+							<ul id="foods">
+						

+						

+							
+							
+							
+							{"{"}
+							foods
+							.
+							map
+							{"("}
+							renderFood
+							{")}"}
+						

+						

+							
+							
+							</ul>
+						

+						

+							
+							
+							<form hx-post="/api/foods" hx-swap="afterend"
+						

+						

+							
+							
+							
+							 
+							 hx-target="#foods" hx-trigger="submit">
+						

+						

+							
+							
+							
+							<input type="text" name="name" placeholder="Food name"{"/>"}
+						

+						

+							
+							
+							
+							<input type="text" name="emoji" placeholder="Emoji"{"/>"}
+						

+						

+							
+							
+							
+							<button type="submit"{"/>"}
+							Add Food
+							</button>
+						

+						

+							
+							</form>
+						

+						

+							</body>
+							</html>
+							{")"}
+						

+						

+							get
+							
+							/about
+							
+							{"("}
+							<p>
+						

+						

+							
+							This is an example WebX project with
+						

+						

+							
+							a list of all of my favorite foods!
+						

+						

+							</p>
+							{")"}
+						

+						

+						

+							// Server-side code
+						

+						

+							model
+							
+							Food
+							
+							{"{"}
+							
+							name
+							:
+							
+							String
+							,
+							
+							emoji
+							:
+							
+							String
+							
+							{"}"}
+						

+						

+							handler
+							
+							renderFood
+							{"("}
+							food
+							:
+							 Food
+							{")"}
+							
+							{"("}
+							<li>
+							{"{"}food
+							.
+							emoji{"}"}
+							
+							{"{"}food
+							.
+							name{"}"}
+							</li>
+							{")"}
+						

+						

+							const
+							
+							foods
+							:
+							
+							Food
+							[]
+							{"="} 
+							[
+							
+						

+						

+							
+							{"{"}
+							
+							name
+							:
+							
+							"Hamburger"
+							,
+							
+							emoji
+							:
+							
+							"🍔"
+							
+							{"}"}
+							,
+						

+						

+							
+							{"{"}
+							
+							name
+							:
+							
+							"Pizza"
+							,
+							
+							emoji
+							:
+							
+							"🍕"
+							
+							{"}"}
+							,
+						

+						

+							
+							{"{"}
+							
+							name
+							:
+							
+							"Taco"
+							,
+							
+							emoji
+							:
+							
+							"🌮"
+							
+							{"}"}
+							,
+						

+						

+							]
+							;
+						

+						

+						

+							// API endpoints
+						

+						

+							location
+							
+							api
+							
+							{"{"}
+						

+						

+							
+							post
+							
+							/foods
+							
+							form
+							{"("}
+							name
+							:
+							
+							String
+							,
+							
+							emoji
+							:
+							
+							String
+							{")"}
+							
+							{"{"}
+						

+						

+							
+							
+							const
+							
+							newFood =
+							{" {"}
+							
+							name
+							,
+							
+							emoji
+							{" }"}{";"}
+						

+						

+							
+							
+							foods
+							.
+							push
+							{"("}
+							newFood
+							{")"}{";"}
+						

+						

+							
+							{"} -> "}
+							renderFood
+							{"("}
+							newFood
+							{")"}
+						

+						

+							{"}"}
+						

+					
+
+
+
+
+ +); diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 17a1059..4f47624 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -2,6 +2,7 @@ import { useState } from "react"; import { motion } from "framer-motion"; import { InvitationModal } from "./InvitationModal"; +import { CodeBox } from "./CodeBox"; import dashboard from "../assets/images/dashboard.jpg"; import darkFlowing from "../assets/images/backgrounds/flowing_dark.png"; import lightFlowing from "../assets/images/backgrounds/flowing_light.png"; @@ -11,7 +12,7 @@ export const Hero = () => { return (
{ animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} > -

+

{/* Discover new data flow */} Unleash the Power of Hypermedia

@@ -69,7 +70,7 @@ export const Hero = () => { animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.15 }} > -
+