opdavies/bootstrap-with-tailwind
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create index page with a base layout

Browse source
This commit is contained in:
Oliver Davies 2023-01-20 18:59:08 +00:00
parent b6fb7772d5
commit 7ca7f79f22
6 changed files with 116 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/layouts/BaseLayout.astro Normal file
View file

@ -0,0 +1,20 @@
---
interface Props {
title: string;
}
const { title } = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body class="font-sans">
<slot />
</body>
</html>

41
src/pages/album.astro Normal file
View file

@ -0,0 +1,41 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import Button from "../components/Button.astro";
import Card from "../components/Card.astro";
import Footer from "../components/Footer.astro";
import Jumbotron from "../components/Jumbotron.astro";
import Navbar from "../components/Navbar.astro";
export const name = 'Album';
---
<BaseLayout title={name}>
<Navbar title="Album" />
<Jumbotron title="Album example">
<p class="text-base leading-relaxed text-gray-500 sm:text-lg">
Something short and leading about the collection below—its contents, the
creator, etc. Make it short and sweet, but not too short so folks don't
simply skip over it entirely.
</p>
<div
class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1"
>
<Button shape="rounded" type="primary" text="Main call to action" />
<Button shape="rounded" type="secondary" text="Secondary action" />
</div>
</Jumbotron>
<div class="bg-gray-100">
<div class="max-w-xl mx-auto py-12 px-6 lg:max-w-6xl">
<div
class="grid grid-cols-1 gap-8 place-items-center md:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8"
>
{[...Array(9).keys()].map((_) => <Card />)}
</div>
</div>
</div>
<Footer />
</BaseLayout>

62
src/pages/index.astro
View file

@ -1,50 +1,26 @@
---
import Button from "../components/Button.astro";
import Card from "../components/Card.astro";
import Footer from "../components/Footer.astro";
import Jumbotron from "../components/Jumbotron.astro";
import Navbar from "../components/Navbar.astro";
import BaseLayout from "../layouts/BaseLayout.astro";
const title = "Bootstrap examples with Tailwind CSS"
const examples = [
{ title: "Album", url: "/album" }
]
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body class="font-sans">
<Navbar title="Album" />
<BaseLayout title="Bootstrap with Tailwind">
<div class="max-w-xl mx-auto py-10 prose">
<h1 class="text-center">{title}</h1>
<Jumbotron title="Album example">
<p class="text-base leading-relaxed text-gray-500 sm:text-lg">
Something short and leading about the collection below—its contents, the
creator, etc. Make it short and sweet, but not too short so folks don't
simply skip over it entirely.
</p>
<div
class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1"
>
<Button shape="rounded" type="primary" text="Main call to action" />
<Button shape="rounded" type="secondary" text="Secondary action" />
</div>
</Jumbotron>
<div class="bg-gray-100">
<div class="max-w-xl mx-auto py-12 px-6 lg:max-w-6xl">
<div
class="grid grid-cols-1 gap-8 place-items-center md:grid-cols-2 md:gap-6 lg:grid-cols-3 lg:gap-8"
>
{[...Array(9).keys()].map((_) => <Card />)}
</div>
</div>
</div>
<Footer />
</body>
</html>
<ul>
{examples.map(example => (
<li>
<a href={example.url}>{example.title}</a>
</li>
))}
</ul>
</div>
</BaseLayout>
<style is:global>
.markup p {