diff options
Diffstat (limited to 'examples/ssr/src/pages')
-rw-r--r-- | examples/ssr/src/pages/cart.astro | 75 | ||||
-rw-r--r-- | examples/ssr/src/pages/index.astro | 54 | ||||
-rw-r--r-- | examples/ssr/src/pages/login.astro | 47 | ||||
-rw-r--r-- | examples/ssr/src/pages/products/[id].astro | 69 |
4 files changed, 124 insertions, 121 deletions
diff --git a/examples/ssr/src/pages/cart.astro b/examples/ssr/src/pages/cart.astro index 3277ff2db..2214703f2 100644 --- a/examples/ssr/src/pages/cart.astro +++ b/examples/ssr/src/pages/cart.astro @@ -1,47 +1,50 @@ --- -import Header from '../components/Header.astro'; -import Container from '../components/Container.astro'; -import { getCart } from '../api'; -import { isLoggedIn } from '../models/user'; +import Header from "../components/Header.astro"; +import Container from "../components/Container.astro"; +import { getCart } from "../api"; +import { isLoggedIn } from "../models/user"; -if(!isLoggedIn(Astro.request)) { - return Astro.redirect('/'); +if (!isLoggedIn(Astro.request)) { + return Astro.redirect("/"); } // They must be logged in. -const user = { name: 'test'}; // getUser? +const user = { name: "test" }; // getUser? const cart = await getCart(Astro.request); --- + <html> -<head> - <title>Cart | Online Store</title> - <style> - h1 { - font-size: 36px; - } - </style> -</head> -<body> - <Header /> + <head> + <title>Cart | Online Store</title> + <style> + h1 { + font-size: 36px; + } + </style> + </head> + <body> + <Header /> - <Container tag="main"> - <h1>Cart</h1> - <p>Hi { user.name }! Here are your cart items:</p> - <table> - <thead> - <tr> - <th>Item</th> - <th>Count</th> - </tr> - </thead> - <tbody> - {cart.items.map(item => <tr> - <td>{item.name}</td> - <td>{item.count}</td> - </tr>)} - </tbody> - </table> - </Container> -</body> + <Container tag="main"> + <h1>Cart</h1> + <p>Hi {user.name}! Here are your cart items:</p> + <table> + <thead> + <tr> + <th>Item</th> + <th>Count</th> + </tr> + </thead> + <tbody> + {cart.items.map((item) => ( + <tr> + <td>{item.name}</td> + <td>{item.count}</td> + </tr> + ))} + </tbody> + </table> + </Container> + </body> </html> diff --git a/examples/ssr/src/pages/index.astro b/examples/ssr/src/pages/index.astro index 8eb04ffa6..456de484c 100644 --- a/examples/ssr/src/pages/index.astro +++ b/examples/ssr/src/pages/index.astro @@ -1,36 +1,36 @@ --- -import Header from '../components/Header.astro'; -import Container from '../components/Container.astro'; -import ProductListing from '../components/ProductListing.astro'; -import { getProducts } from '../api'; -import '../styles/common.css'; +import Header from "../components/Header.astro"; +import Container from "../components/Container.astro"; +import ProductListing from "../components/ProductListing.astro"; +import { getProducts } from "../api"; +import "../styles/common.css"; const products = await getProducts(Astro.request); --- -<html> -<head> - <title>Online Store</title> - <style> - h1 { - font-size: 36px; - } - .product-listing-title { - text-align: center; - } +<html> + <head> + <title>Online Store</title> + <style> + h1 { + font-size: 36px; + } - .product-listing { + .product-listing-title { + text-align: center; + } - } - </style> -</head> -<body> - <Header /> + .product-listing { + } + </style> + </head> + <body> + <Header /> - <Container tag="main"> - <ProductListing products={products} class="product-listing"> - <h2 class="product-listing-title" slot="title">Product Listing</h2> - </ProductListing> - </Container> -</body> + <Container tag="main"> + <ProductListing products={products} class="product-listing"> + <h2 class="product-listing-title" slot="title">Product Listing</h2> + </ProductListing> + </Container> + </body> </html> diff --git a/examples/ssr/src/pages/login.astro b/examples/ssr/src/pages/login.astro index b12a82a5e..081aafedf 100644 --- a/examples/ssr/src/pages/login.astro +++ b/examples/ssr/src/pages/login.astro @@ -1,30 +1,31 @@ --- -import Header from '../components/Header.astro'; -import Container from '../components/Container.astro'; +import Header from "../components/Header.astro"; +import Container from "../components/Container.astro"; --- + <html> -<head> - <title>Online Store</title> - <style> - h1 { - font-size: 36px; - } - </style> -</head> -<body> - <Header /> + <head> + <title>Online Store</title> + <style> + h1 { + font-size: 36px; + } + </style> + </head> + <body> + <Header /> - <Container tag="main"> - <h1>Login</h1> - <form action="/login.form" method="POST"> - <label for="name">Name</label> - <input type="text" name="name"> + <Container tag="main"> + <h1>Login</h1> + <form action="/login.form" method="POST"> + <label for="name">Name</label> + <input type="text" name="name" /> - <label for="password">Password</label> - <input type="password" name="password"> + <label for="password">Password</label> + <input type="password" name="password" /> - <input type="submit" value="Submit"> - </form> - </Container> -</body> + <input type="submit" value="Submit" /> + </form> + </Container> + </body> </html> diff --git a/examples/ssr/src/pages/products/[id].astro b/examples/ssr/src/pages/products/[id].astro index f6ac67f82..9ec934aa2 100644 --- a/examples/ssr/src/pages/products/[id].astro +++ b/examples/ssr/src/pages/products/[id].astro @@ -1,46 +1,45 @@ --- -import Header from '../../components/Header.astro'; -import Container from '../../components/Container.astro'; -import AddToCart from '../../components/AddToCart.svelte'; -import { getProduct } from '../../api'; -import '../../styles/common.css'; +import Header from "../../components/Header.astro"; +import Container from "../../components/Container.astro"; +import AddToCart from "../../components/AddToCart.svelte"; +import { getProduct } from "../../api"; +import "../../styles/common.css"; const id = Number(Astro.params.id); const product = await getProduct(Astro.request, id); --- <html lang="en"> -<head> - <title>{product.name} | Online Store</title> - <style> - h2 { - text-align: center; - font-size: 3.5rem; - } + <head> + <title>{product.name} | Online Store</title> + <style> + h2 { + text-align: center; + font-size: 3.5rem; + } - figure { - display: grid; - grid-template-columns: 1fr 1fr; - } + figure { + display: grid; + grid-template-columns: 1fr 1fr; + } - img { - width: 400px; - } - </style> -</head> -<body> - <Header /> - - <Container tag="article"> - <h2>{product.name}</h2> - <figure> - <img src={product.image} /> - <figcaption> - <AddToCart client:idle id={id} name={product.name} /> - <p>Description here...</p> - </figcaption> - </figure> + img { + width: 400px; + } + </style> + </head> + <body> + <Header /> - </Container> -</body> + <Container tag="article"> + <h2>{product.name}</h2> + <figure> + <img src={product.image} /> + <figcaption> + <AddToCart client:idle id={id} name={product.name} /> + <p>Description here...</p> + </figcaption> + </figure> + </Container> + </body> </html> |