diff --git a/package.json b/package.json index 26de909..e9b5b41 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ }, "dependencies": { "@astrojs/tailwind": "^2.1.3", + "@tailwindcss/typography": "^0.5.9", "astro": "^1.9.0", "tailwindcss": "^3.0.24" } diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro new file mode 100644 index 0000000..6b15770 --- /dev/null +++ b/src/layouts/BaseLayout.astro @@ -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> diff --git a/src/pages/album.astro b/src/pages/album.astro new file mode 100644 index 0000000..d40171b --- /dev/null +++ b/src/pages/album.astro @@ -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> diff --git a/src/pages/index.astro b/src/pages/index.astro index 9c19a8d..c62948f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -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 { diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 2839ff2..9997a63 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -29,6 +29,8 @@ module.exports = { }, }, plugins: [ + require('@tailwindcss/typography'), + plugin(({ addVariant }) => { addVariant("hocus", ["&:hover", "&:focus"]); }), diff --git a/yarn.lock b/yarn.lock index 9452dbd..91e9bbf 100644 --- a/yarn.lock +++ b/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"