Polka dot pattern, Example page improvements and finished readme

README.md

@@ -1,4 +1,4 @@
-# tailwindcss-bg-patterns (IN-DEVELOPMENT)
+# @yet3/tailwindcss-bg-patterns
 
 ![GitHub license](https://img.shields.io/github/license/yet3/tailwindcss-bg-patterns?style=flat)
 <a href='https://www.npmjs.com/package/@yet3/tailwindcss-bg-patterns'>
@@ -15,12 +15,20 @@ See a [live demo](https://yet3.github.io/tailwindcss-bg-patterns/)
 
 - [Installation](#installation)
 - [Config](#config)
-- [Usage](#usage)
+- [Example usage](#grid)
+- [Patterns](#patterns)
+  - [Grid](#grid)
+  - [Hatching](#hatching)
+  - [Cross-Hatching](#cross-hatching)
+  - [Polka dot](#polka-dot)
+  - [Hexagonal Polka dot](#hexagonal-polka-dot)
+- [Todo](#support)
+- [Support](#support)
 
 ## Installation
 
 ```sh
-npm install -D @yet3/tailwindcss-bg-patterns
+npm install --save-dev @yet3/tailwindcss-bg-patterns
 ```
 
 ```sh
@@ -57,30 +65,84 @@ export default {
 };
 ```
 
-## Usage
+## Example usage
 
+```html
+<div
+  class="bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32"
+/>
 ```
-bg-pattern-grid
 
-bg-pattern-hatching
-bg-pattern-hatching-left-to-right
-bg-pattern-hatching-right-to-left
+this code will result in:
+
+<img src="./public/grid.png" alt="Grid pattern" height="200" />
 
-bg-pattern-cross-hatching
+## Patterns
 
-bg-pattern-line-2 // line width
-bg-pattern-line-[8] // custom line width
-bg-pattern-line-red-500 // line color
-bg-pattern-line-[#a2a2a2] // custom line color
+### Grid
+See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#grid)
 
-bg-pattern-spacing-24 // space between pattern lines
-bg-pattern-spacing-[321] // custom space between pattern lines
+```html
+<div
+  class="bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32"
+/>
 ```
 
 <img src="./public/grid.png" alt="Grid pattern" height="200" />
 
+### Hatching
+See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hatching)
+
 ```html
 <div
-  class="bg-blue-500 bg-pattern-grid bg-pattern-line-2 bg-pattern-line-white bg-pattern-spacing-32"
+  class="bg-blue-500 bg-pattern-hatching bg-pattern-line-0.5 bg-pattern-spacing-16 bg-pattern-hatching-left-to-right"
 />
 ```
+
+<img src="./public/hatching.png" alt="Hatching pattern" height="200" />
+
+### Cross-Hatching
+See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#cross-hatching)
+
+```html
+<div
+  class="bg-blue-500 bg-pattern-cross-hatching bg-pattern-line-0.5 bg-pattern-spacing-16"
+/>
+```
+
+<img src="./public/cross-hatching.png" alt="Cross-Hatching pattern" height="200" />
+
+### Polka dot
+See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#polka-dot)
+
+```html
+<div
+  class="bg-blue-500 bg-pattern-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-16"
+/>
+```
+
+<img src="./public/polka-dot.png" alt="Polka dot pattern" height="200" />
+
+### Hexagonal polka dot
+See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hexagonal-polka-dot)
+
+```html
+<div
+  class="bg-blue-500 bg-pattern-hex-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-16"
+/>
+```
+
+<img src="./public/hex-polka-dot.png" alt="Polka dot pattern" height="200" />
+
+## Todo
+
+- [ ] Add utility to adjust pattern opacity
+- [ ] Add pattern: horizontal-lines (x-lines?)
+- [ ] Add pattern: vertical-lines (y-lines?)
+- [ ] Add pattern: checkers
+- [ ] Add pattern: honeycomb
+- [ ] Add pattern: bricks
+
+## Support
+
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W618YWH4)

example/src/app.css

@@ -3,6 +3,7 @@
 @import 'tailwindcss/utilities';
 
 html {
+	scroll-behavior: smooth;
 	font-family: 'Open Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
 		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }

example/src/common/Anchor.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface IProps {
+		class?: string;
+		href: string;
+		ariaLabel: string;
+
+		children: Snippet;
+	}
+
+	const { children, href, ariaLabel, class: className }: IProps = $props();
+</script>
+
+<a {href} aria-label={ariaLabel} rel="noopener noreferrer" target="_blank" class={className}>
+	{@render children()}
+</a>

example/src/common/BuyMeCoffee.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Anchor from './Anchor.svelte';
+</script>
+
+<Anchor href="https://ko-fi.com/W7W618YWH4" ariaLabel="Support me on ko-fi (opnes in a new tab)">
+	<img
+		style="border:0px;height:32px;"
+		src="https://storage.ko-fi.com/cdn/kofi5.png?v=6"
+		alt="Buy Me a Coffee at ko-fi.com"
+	/>
+</Anchor>

example/src/common/Code.svelte

@@ -1,16 +1,18 @@
-<script lang="ts">
-	import { onDestroy } from 'svelte';
-	import Highlight from 'svelte-highlight';
-	import type { LanguageType } from 'svelte-highlight/languages';
-	import { Icon } from 'svelte-icons-pack';
-	import { FaCopy } from 'svelte-icons-pack/fa';
-
+<script lang="ts" module>
 	export interface ICodeBaseProps {
 		class?: string;
 		code: string;
 
 		noStyle?: boolean;
 	}
+</script>
+
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import Highlight from 'svelte-highlight';
+	import type { LanguageType } from 'svelte-highlight/languages';
+	import { Icon } from 'svelte-icons-pack';
+	import { FaCopy } from 'svelte-icons-pack/fa';
 
 	interface IProps extends ICodeBaseProps {
 		language: LanguageType<string>;

example/src/common/Pattern.svelte

@@ -1,25 +1,34 @@
-<script lang="ts">
-	import HtmlCode from './HtmlCode.svelte';
-
+<script lang="ts" module>
 	export interface IPatternConfig {
 		name: string;
-		description: string;
+		description?: string;
+		options?: IPatternConfig[];
 	}
+
 	export interface IPattern {
+		id: string;
 		name: string;
 		class: string;
 		configClasses: IPatternConfig[];
 	}
+</script>
+
+<script lang="ts">
+	import HtmlCode from './HtmlCode.svelte';
 
 	interface IProps {
 		data: IPattern;
 	}
 
 	const { data }: IProps = $props();
-	const { name, configClasses, class: className } = data;
+	const { id, name, configClasses, class: className } = data;
 </script>
 
-<section class="grid lg:grid-cols-[2fr_minmax(400px,1fr)] gap-x-8 gap-y-4">
+<section
+	{id}
+	aria-label={`Pattern: ${name}`}
+	class="grid lg:grid-cols-[2fr_minmax(400px,1fr)] gap-x-8 gap-y-4"
+>
 	<article class="flex flex-col justify-center">
 		<h2 class="mb-4 text-3xl font-medium">{name}</h2>
 
@@ -28,8 +37,20 @@
 			{#each configClasses as config}
 				<li class="flex max-xl:flex-col">
 					<code class="ml-1 font-medium text-class">.{config.name}</code>
-					<p class="ml-3 text-white/75">{config.description}</p>
+					{#if config.description}
+						<p class="ml-3 text-white/75">{config.description}</p>
+					{/if}
 				</li>
+				{#if config.options}
+					<ul class="ml-4 ~2xs/xs:~text-sm/base grid content-start gap-1">
+						{#each config.options as opt}
+							<li class="flex items-center">
+								<code class="text-nowrap ml-1 font-medium text-class/80">{opt.name}</code>
+								<p class="ml-2 text-white/60 ~2xs/xs:~text-xs/base">{opt.description}</p>
+							</li>
+						{/each}
+					</ul>
+				{/if}
 			{/each}
 		</ul>
 

example/src/modules/Footer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Anchor from '$common/Anchor.svelte';
+</script>
+
+<footer class="pb-2">
+	<p class="text-center">
+		Made by <Anchor
+			href="https://www.maxkasperowicz.com/"
+			ariaLabel={`My portfolio (opens in a new tab)`}
+			class="text-blue-300 underline">me</Anchor
+		>. Using SvelteKit and TailwindCSS
+	</p>
+</footer>

example/src/modules/Header.svelte

@@ -1,23 +1,41 @@
 <script lang="ts">
+	import Anchor from '$common/Anchor.svelte';
 	import BashCode from '$common/BashCode.svelte';
+	import BuyMeCoffee from '$common/BuyMeCoffee.svelte';
 	import SimpleTabs from '$common/SimpleTabs.svelte';
 	import { Icon } from 'svelte-icons-pack';
 	import { AiFillGithub } from 'svelte-icons-pack/ai';
+	import { TrFillBriefcase2 } from 'svelte-icons-pack/tr';
 </script>
 
 <header class="mt-8 mb-12 flex flex-col items-center">
 	<h1 class="font-medium ~xs/sm:~text-2xl/4xl text-center">@yet3/tailwindcss-bg-patterns</h1>
 	<h3 class="text-lg text-white/50 mt-2 font-medium">IN-DEVELOPMENT</h3>
-	<a
-		href="https://github.com/yet3/tailwindcss-bg-patterns"
-		rel="noopener noreferrer"
-		target="_blank"
-		class="mt-4"
-	>
-		<p class="flex items-center underline text-blue-300 ~xs/sm:~text-base/xl">
-			Read more on <Icon className="ml-1 fill-white" src={AiFillGithub} size={28} />
-		</p>
-	</a>
+	<ul class="mt-4 grid grid-flow-col items-center gap-4" aria-label="My links">
+		<li>
+			<Anchor
+				href="https://github.com/yet3/tailwindcss-bg-patterns"
+				ariaLabel="Github (opens in a new tab)"
+				class="flex items-center"
+			>
+				<Icon className="mr-1 fill-white" src={AiFillGithub} size={28} />
+				Github
+			</Anchor>
+		</li>
+		<li>
+			<Anchor
+				href="https://github.com/yet3/tailwindcss-bg-patterns"
+				ariaLabel="Github (opens in a new tab)"
+				class="flex items-center"
+			>
+				<Icon className="mr-1 fill-white" src={TrFillBriefcase2} size={24} />
+				Portfolio
+			</Anchor>
+		</li>
+		<li>
+			<BuyMeCoffee />
+		</li>
+	</ul>
 
 	<SimpleTabs class="w-full max-w-[1000px] mt-12 px-4" tabs={['npm', 'pnpm', 'yarn']}>
 		{#snippet tab(idx)}