opdavies/reducing-utility-class-duplication
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: add examples

Browse source
This commit is contained in:
Oliver Davies 2023-01-08 23:36:25 +00:00
parent 5e2309ee08
commit fab4519724
9 changed files with 205 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Link.astro Normal file
View file

@ -0,0 +1,14 @@
---
interface Props {
name: string;
}
const { name } = Astro.props;
---
<a
class="py-2 block border-b-2 border-transparent hover:border-blue-500 hover:text-blue-500 focus:outline-none focus:bg-yellow-400 focus:border-current"
href="#0"
>
{name}
</a>

15
src/layouts/Layout.astro Normal file
View file

@ -0,0 +1,15 @@
---
---
<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="p-10">
<slot />
</body>
</html>

22
src/pages/css-component.astro Normal file
View file

@ -0,0 +1,22 @@
---
import Layout from "~/layouts/Layout.astro";
---
<Layout>
<ul
class="flex flex-col justify-center gap-4 sm:flex-row sm:flex-wrap sm:gap-6"
>
<li><a class="link" href="#0">About</a></li>
<li><a class="link" href="#0">Blog</a></li>
<li><a class="link" href="#0">Talks</a></li>
<li><a class="link" href="#0">Daily list</a></li>
<li><a class="link" href="#0">Search</a></li>
<li><a class="link" href="#0">About</a></li>
</ul>
</Layout>
<style>
.link {
@apply py-2 block border-b-2 border-transparent hover:border-blue-500 hover:text-blue-500 focus:outline-none focus:bg-yellow-400 focus:border-current;
}
</style>

16
src/pages/html-component.astro Normal file
View file

@ -0,0 +1,16 @@
---
import Layout from "~/layouts/Layout.astro";
import Link from "~/components/Link.astro";
---
<Layout>
<ul
class="flex flex-col justify-center gap-4 sm:flex-row sm:flex-wrap sm:gap-6"
>
<li><Link name="About" /></li>
<li><Link name="Blog" /></li>
<li><Link name="Talks" /></li>
<li><Link name="Daily list" /></li>
<li><Link name="Search" /></li>
</ul>
</Layout>

60
src/pages/index.astro
View file

@ -1,15 +1,51 @@
--- ---
import Layout from "~/layouts/Layout.astro";
--- ---
<html lang="en"> <Layout>
<head> <ul
<meta charset="utf-8" /> class="flex flex-col justify-center gap-4 sm:flex-row sm:flex-wrap sm:gap-6"
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> >
<meta name="viewport" content="width=device-width" /> <li>
<meta name="generator" content={Astro.generator} /> <a
<title>Astro</title> class="py-2 block border-b-2 border-transparent hover:border-blue-500 hover:text-blue-500 focus:outline-none focus:bg-yellow-400 focus:border-current"
</head> href="#0">About</a
<body> >
<h1>Astro</h1> </li>
</body>
</html> <li>
<a
class="py-2 block border-b-2 border-transparent hover:border-blue-500 hover:text-blue-500 focus:outline-none focus:bg-yellow-400 focus:border-current"
href="#0">Blog</a
>
</li>
<li>
<a
class="py-2 block border-b-2 border-transparent hover:border-blue-500 hover:text-blue-500 focus:outline-none focus:bg-yellow-400 focus:border-current"
href="#0">Talks</a
>
</li>
<li>
<a
class="py-2 block border-b-2 border-transparent hover:border-blue-500 hover:text-blue-500 focus:outline-none focus:bg-yellow-400 focus:border-current"
href="#0">Daily list</a
>
</li>
<li>
<a
class="py-2 block border-b-2 border-transparent hover:border-blue-500 hover:text-blue-500 focus:outline-none focus:bg-yellow-400 focus:border-current"
href="#0">Search</a
>
</li>
<li>
<a
class="py-2 block border-b-2 border-transparent hover:border-blue-500 hover:text-blue-500 focus:outline-none focus:bg-yellow-400 focus:border-current"
href="#0">About</a
>
</li>
</ul>
</Layout>

30
src/pages/loops-and-html-components.astro Normal file
View file

@ -0,0 +1,30 @@
---
import Layout from "~/layouts/Layout.astro";
import Link from "~/components/Link.astro";
type LinkItem = {
name: string;
};
const links: LinkItem[] = [
{ name: "About" },
{ name: "Blog" },
{ name: "Talks" },
{ name: "Daily list" },
{ name: "Search" },
];
---
<Layout>
<ul
class="flex flex-col justify-center gap-4 sm:flex-row sm:flex-wrap sm:gap-6"
>
{
links.map(link => (
<li>
<Link name={link.name} />
</li>
))
}
</ul>
</Layout>

34
src/pages/loops.astro Normal file
View file

@ -0,0 +1,34 @@
---
import Layout from "~/layouts/Layout.astro";
type LinkItem = {
name: string;
};
const links: LinkItem[] = [
{ name: "About" },
{ name: "Blog" },
{ name: "Talks" },
{ name: "Daily list" },
{ name: "Search" },
];
---
<Layout>
<ul
class="flex flex-col justify-center gap-4 sm:flex-row sm:flex-wrap sm:gap-6"
>
{
links.map(link => (
<li>
<a
class="py-2 block border-b-2 border-transparent hover:border-blue-500 hover:text-blue-500 focus:outline-none focus:bg-yellow-400 focus:border-current"
href="#0"
>
{link.name}
</a>
</li>
))
}
</ul>
</Layout>

18
src/pages/variables.astro Normal file
View file

@ -0,0 +1,18 @@
---
import Layout from "~/layouts/Layout.astro";
const linkClasses =
"py-2 block border-b-2 border-transparent hover:border-blue-500 hover:text-blue-500 focus:outline-none focus:bg-yellow-400 focus:border-current";
---
<Layout>
<ul
class="flex flex-col justify-center gap-4 sm:flex-row sm:flex-wrap sm:gap-6"
>
<li><a class={linkClasses} href="#0">About</a></li>
<li><a class={linkClasses} href="#0">Blog</a></li>
<li><a class={linkClasses} href="#0">Talks</a></li>
<li><a class={linkClasses} href="#0">Daily list</a></li>
<li><a class={linkClasses} href="#0">Search</a></li>
</ul>
</Layout>

10
tsconfig.json
View file

@ -1,3 +1,9 @@
{ {
"extends": "astro/tsconfigs/strict" "extends": "astro/tsconfigs/strict",
} "compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["src/*"],
}
}
}