Create index page with a base layout
This commit is contained in:
parent
b6fb7772d5
commit
7ca7f79f22
|
|
@ -12,6 +12,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/tailwind": "^2.1.3",
|
"@astrojs/tailwind": "^2.1.3",
|
||||||
|
"@tailwindcss/typography": "^0.5.9",
|
||||||
"astro": "^1.9.0",
|
"astro": "^1.9.0",
|
||||||
"tailwindcss": "^3.0.24"
|
"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 BaseLayout from "../layouts/BaseLayout.astro";
|
||||||
import Card from "../components/Card.astro";
|
|
||||||
import Footer from "../components/Footer.astro";
|
const title = "Bootstrap examples with Tailwind CSS"
|
||||||
import Jumbotron from "../components/Jumbotron.astro";
|
|
||||||
import Navbar from "../components/Navbar.astro";
|
const examples = [
|
||||||
|
{ title: "Album", url: "/album" }
|
||||||
|
]
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang="en">
|
<BaseLayout title="Bootstrap with Tailwind">
|
||||||
<head>
|
<div class="max-w-xl mx-auto py-10 prose">
|
||||||
<meta charset="utf-8" />
|
<h1 class="text-center">{title}</h1>
|
||||||
<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" />
|
|
||||||
|
|
||||||
<Jumbotron title="Album example">
|
<ul>
|
||||||
<p class="text-base leading-relaxed text-gray-500 sm:text-lg">
|
{examples.map(example => (
|
||||||
Something short and leading about the collection below—its contents, the
|
<li>
|
||||||
creator, etc. Make it short and sweet, but not too short so folks don't
|
<a href={example.url}>{example.title}</a>
|
||||||
simply skip over it entirely.
|
</li>
|
||||||
</p>
|
))}
|
||||||
|
</ul>
|
||||||
<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>
|
</div>
|
||||||
</Jumbotron>
|
</BaseLayout>
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<style is:global>
|
<style is:global>
|
||||||
.markup p {
|
.markup p {
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,8 @@ module.exports = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
|
require('@tailwindcss/typography'),
|
||||||
|
|
||||||
plugin(({ addVariant }) => {
|
plugin(({ addVariant }) => {
|
||||||
addVariant("hocus", ["&:hover", "&:focus"]);
|
addVariant("hocus", ["&:hover", "&:focus"]);
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
33
yarn.lock
33
yarn.lock
|
|
@ -453,6 +453,16 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
tsm "^2.1.4"
|
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":
|
"@types/acorn@^4.0.0":
|
||||||
version "4.0.6"
|
version "4.0.6"
|
||||||
resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
|
resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.6.tgz#d61ca5480300ac41a7d973dd5b84d0a591154a22"
|
||||||
|
|
@ -1874,6 +1884,21 @@ locate-path@^6.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
p-locate "^5.0.0"
|
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:
|
log-symbols@^5.1.0:
|
||||||
version "5.1.0"
|
version "5.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-5.1.0.tgz#a20e3b9a5f53fac6aeb8e2bb22c07cf2c8f16d93"
|
resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-5.1.0.tgz#a20e3b9a5f53fac6aeb8e2bb22c07cf2c8f16d93"
|
||||||
|
|
@ -2701,6 +2726,14 @@ postcss-nested@6.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
postcss-selector-parser "^6.0.10"
|
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:
|
postcss-selector-parser@^6.0.10:
|
||||||
version "6.0.11"
|
version "6.0.11"
|
||||||
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
|
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue