Create index page with a base layout
This commit is contained in:
parent
b6fb7772d5
commit
7ca7f79f22
|
|
@ -12,6 +12,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@astrojs/tailwind": "^2.1.3",
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
"astro": "^1.9.0",
|
||||
"tailwindcss": "^3.0.24"
|
||||
}
|
||||
|
|
|
|||
20
src/layouts/BaseLayout.astro
Normal file
20
src/layouts/BaseLayout.astro
Normal 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
41
src/pages/album.astro
Normal 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>
|
||||
|
|
@ -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" />
|
||||
<ul>
|
||||
{examples.map(example => (
|
||||
<li>
|
||||
<a href={example.url}>{example.title}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</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>
|
||||
</BaseLayout>
|
||||
|
||||
<style is:global>
|
||||
.markup p {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
|
||||
plugin(({ addVariant }) => {
|
||||
addVariant("hocus", ["&:hover", "&:focus"]);
|
||||
}),
|
||||
|
|
|
|||
33
yarn.lock
33
yarn.lock
|
|
@ -453,6 +453,16 @@
|
|||
dependencies:
|
||||
tsm "^2.1.4"
|
||||
|
||||
"@tailwindcss/typography@^0.5.9":
|
||||
version "0.5.9"
|
||||
resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.9.tgz#027e4b0674929daaf7c921c900beee80dbad93e8"
|
||||
integrity sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==
|
||||
dependencies:
|
||||
lodash.castarray "^4.4.0"
|
||||
lodash.isplainobject "^4.0.6"
|
||||
lodash.merge "^4.6.2"
|
||||
postcss-selector-parser "6.0.10"
|
||||
|
||||
"@types/acorn@^4.0.0":
|
||||
version "4.0.6"
|
||||
resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
|
||||
|
|
@ -1874,6 +1884,21 @@ locate-path@^6.0.0:
|
|||
dependencies:
|
||||
p-locate "^5.0.0"
|
||||
|
||||
lodash.castarray@^4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
|
||||
integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
|
||||
|
||||
lodash.isplainobject@^4.0.6:
|
||||
version "4.0.6"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
|
||||
integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
|
||||
|
||||
lodash.merge@^4.6.2:
|
||||
version "4.6.2"
|
||||
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
|
||||
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
|
||||
|
||||
log-symbols@^5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-5.1.0.tgz#a20e3b9a5f53fac6aeb8e2bb22c07cf2c8f16d93"
|
||||
|
|
@ -2701,6 +2726,14 @@ postcss-nested@6.0.0:
|
|||
dependencies:
|
||||
postcss-selector-parser "^6.0.10"
|
||||
|
||||
postcss-selector-parser@6.0.10:
|
||||
version "6.0.10"
|
||||
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
|
||||
integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
|
||||
dependencies:
|
||||
cssesc "^3.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
postcss-selector-parser@^6.0.10:
|
||||
version "6.0.11"
|
||||
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
|
||||
|
|
|
|||
Loading…
Reference in a new issue