https://github.com/cieloazul310/astro-sarkara-starter
https://github.com/cieloazul310/astro-sarkara-starter
astro pandacss
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/cieloazul310/astro-sarkara-starter
- Owner: cieloazul310
- Created: 2023-10-06T14:14:14.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-11T11:58:10.000Z (11 months ago)
- Last Synced: 2025-01-04T14:27:36.393Z (10 months ago)
- Topics: astro, pandacss
- Language: Astro
- Homepage: https://cieloazul310.github.io/astro-sarkara-starter/
- Size: 777 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Astro Sarkara Starter Kit
Astro starter based on [@cieloazul310/astro-sarkara](https://github.com/cieloazul310/astro-sarkara) package.
[](https://badge.fury.io/js/@cieloazul310%2Fastro-sarkara) [](https://app.netlify.com/sites/astro-sarkara-starter/deploys)
@cieloazul310/astro-sarkara
Astro
Panda CSS
## Demo
GitHub Pages
Netlify
## Getting started
```sh
npm create astro@latest -- --template cieloazul310/astro-sarkara-starter
```
Getting Started
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```text
/
├── content (Astro v5)
│ └── post/ <= Markdown / MDX contents
├── public/
├── src/
│ ├── components/
│ ├── data/
│ │ └── index.ts
│ ├── layout/
│ │ └── markdown.astro
│ ├── pages/
│ │ ├── post/
│ │ │ ├── [...page].astro <= for post list pages
│ │ │ └── [...slug].astro <= for each `.md/.mdx` page
│ │ └── index.mdx
│ ├── utils/
│ ├── index.css
│ ├── content.config.ts (Astro v5)
│ └── mdx-classes.ts
├── astro.config.ts
├── panda.config.ts
├── postcss.config.cjs
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## Configure
### panda.config.ts
```ts
import {
defineSarkaraConfig,
} from "@cieloazul310/astro-sarkara/preset";
// https://panda-css.com/docs/references/config
export default defineSarkaraConfig({
// primary and secondary colors is required
// https://panda-css.com/docs/customization/theme#colors
palette: { primary: "indigo", secondary: "amber" },
// Where to look for your css declarations
include: [
"./src/**/*.{js,ts,astro,mdx}",
"./node_modules/@cieloazul310/**/*.{js,ts,astro}",
],
// customizing theme
theme: {
extend: {
},
},
});
```
## Deploy configure
### GitHub Pages
1. Settings > Code and automation > Actions > General
Workflow permissions: **Read and write permissions**
2. Settings > Code and automation > Pages
Build and deployment Source: **GitHub Actions**
### Netlify
1. Site configuration > Build & Deploy > Continuous deployment
Build settings Build command:
`npm run build -- --site $URL`
## Astro Sarkara Tutorial