Skip to content

Latest commit

 

History

History
145 lines (105 loc) · 3.23 KB

README.md

File metadata and controls

145 lines (105 loc) · 3.23 KB
Raw

Astrolace

An easy way to use Shoelace.style within your Astro Project!

Usage

Installation

Install the integration automatically using the Astro CLI:

pnpm astro add @matthiesenxyz/astrolace
npx astro add @matthiesenxyz/astrolace
yarn astro add @matthiesenxyz/astrolace

Or install it manually:

  1. Install the required dependencies
pnpm add @matthiesenxyz/astrolace
npm install @matthiesenxyz/astrolace
yarn add @matthiesenxyz/astrolace
  1. Add the integration to your astro config
+import astrolace from "@matthiesenxyz/astrolace";

export default defineConfig({
  integrations: [
+    astrolace(),
  ],
});

Setup

  1. Add the <ShoelaceHeader> Element to your Layout's <head>
---
import { ShoelaceHeader } from "astrolace:components/header";

---

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Example</title>
        <ShoelaceHeader />
    </head>
</html>
  1. Use any of the exported components!
---
import { 
    Alert, AnimatedImage, Avatar, Badge, Breadcrumb, BreadcrumbItem, 
    ButtonGroup, Button, Card, Carousel, CarouselItem, Checkbox, 
    ColorPicker, CopyButton, Details, Divider, Dialog, Drawer, 
    Dropdown, FormatBytes, FormatDate, FormatNumber, Icon, IconButton,
    ImageComparer, Include, Input, Menu, MenuItem, MenuLabel,  MutationObserver, 
    Option, Popup, ProgressBar, ProgressRing, QrCode, Radio, RadioButton, 
    RadioGroup, Range, Rating, RelativeTime, ResizeObserver, Select, 
    Skeleton, Spinner, SplitPanel, Switch, Tab, TabGroup, TabPanel, 
    Tag, Textarea, Tooltip, Tree, TreeItem, VisuallyHidden
} from "astrolace:components";
---

Advanced Configuration

Tools

  • registerIconLibrary - Allows the user to register extra icons (example shown is to register the default icon library(Bootstrap Icons))
---
import { ShoelaceHeader } from "astrolace:components/header";
---
<html>
    <head>
        <ShoelaceHeader />
        <script>
        // `registerIconLibrary` function from Shoelace.style
        import { registerIconLibrary } from "astrolace:tools";

        // Register the default icon library
        registerIconLibrary('default', {
            resolver: name => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/${name}.svg`
        });
        </script>
    </head>
</html>

Types

All types are exported from "astrolace:types".

Contributing

This package is structured as a monorepo:

  • playground contains code for testing the package
  • package contains the actual package

Install dependencies using pnpm:

pnpm i --frozen-lockfile

Start the playground and package watcher:

pnpm dev

You can now edit files in package. Please note that making changes to those files may require restarting the playground dev server.

Licensing

MIT Licensed. Made with ❤️ by AdamMatthiesen.

Acknowledgements