Astro Sarkara
Astro components and layout package built with Panda CSS.
Demo
https://cieloazul310.github.io/astro-sarkara
Astro
https://astro.build/
Panda CSS
https://panda-css.com/
Getting started with the template
npm create astro@latest -- --template cieloazul310/astro-sarkara-starterGetting started with an empty project
1. Create Astro project
npm create astro@latesthttps://docs.astro.build/ja/getting-started/
2. Install Panda CSS and configure
npm install -D @pandacss/dev @pandacss/astro
npx panda init// astro.config.ts
import { defineConfig } from 'astro/config';
import pandacss from '@pandacss/astro';
export default defineConfig({
integrations: [pandacss()],
});{
"scripts": {
"prepare": "panda codegen",
}
}https://panda-css.com/docs/installation/astro
3. Add astro-sarkara and configure
npm install @cieloazul310/astro-sarkara// panda.config.ts
import { defineSarkaraConfig } from "@cieloazul310/astro-sarkara/preset";
export default defineSarkaraConfig({
palette: { primary: "teal", secondary: "yellow" },
include: ["./src/**/*.{js,jsx,ts,tsx,astro,mdx}"],
// ...pandaConfig,
});https://panda-css.com/docs/references/config
4. Codegen
rm -rf styled-system
npm run prepareUsage
Layout
---
// src/pages/index.astro
import { defineSiteMetadata, SarkaraLayout } from "@cieloazul310/astro-sarkara";
const siteMetadata = defineSiteMetadata({
title: "Site title",
description: "Site description",
});
---
<SarkaraLayout siteMetadata={siteMetadata}>
<!-- contents -->
</SarkaraLayout>Components
---
// src/pages/index.astro
import {
defineSiteMetadata,
SarkaraLayout,
Paper,
} from "@cieloazul310/astro-sarkara";
import { css } from "@cieloazul310/sarkara-css";
const siteMetadata = defineSiteMetadata({
title: "Site title",
description: "Site description",
});
---
<SarkaraLayout siteMetadata={siteMetadata}>
<Paper>
<p class={css({ fontSize: "xl" })}>Hello, Astro</p>
</Paper>
</SarkaraLayout>Configure panda.config.ts
1. Using defineSarkaraConfig
// import { defineConfig } from "@pandacss/dev";
import {
defineSarkaraConfig,
// createSarkaraPreset,
// astroComponentsPaths,
} from "@cieloazul310/astro-sarkara/preset";
export default defineSarkaraConfig({
palette: { primary: "teal", secondary: "yellow" },
include: ["./src/**/*.{js,jsx,ts,tsx,astro,mdx}"],
// ...pandaConfig,
});
/* equivalent to
export default defineConfig({
presets: [
"@pandacss/dev/presets",
createSarkaraPreset({ palette: { primary: "teal", secondary: "yellow" } }),
],
include: ["./src/**/*.{js,ts,astro}", ...astroComponentsPaths],
outdir: "@cieloazul310/sarkara-css",
emitPackage: true,
});
*/https://panda-css.com/docs/references/config#presets
colors.primary and colors.secondary is required, and you can set any colors.
https://panda-css.com/docs/customization/theme#colors
primary: teal
secondary: yellow
danger: red
primary.100 => teal.100
secondary.600 => yellow.600
danger.800 => red.800emitPackage
Whether to emit the artifacts to node_modules as a package. Will generate a package.json file that contains exports for each of the the generated outdir entrypoints:
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent