Skip to content

Commit b5c39ea

Browse files
FrontendlandFrontendland
committed
📝 Add readme and build script
1 parent cd94b2e commit b5c39ea

File tree

5 files changed

+156
-64
lines changed

5 files changed

+156
-64
lines changed

‎README.md

Lines changed: 110 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,126 @@
1-
# Astro Starter Kit: Minimal
1+
<p>
2+
<a href="https://webcoreui.dev">
3+
<img
4+
alt="Webcore - Frontend components for Astro, Svelte, and React"
5+
src="https://raw.githubusercontent.com/Frontendland/webcoreui/main/public/img/banner.png"
6+
/>
7+
</a>
8+
</p>
29

3-
```sh
4-
npm create astro@latest -- --template minimal
10+
<p>
11+
<a href="https://github.com/Frontendland/webcoreui/releases">
12+
<img
13+
src="https://img.shields.io/npm/v/webcoreui.svg?label=Latest%20Release"
14+
alt="Latest Release"
15+
/>
16+
</a>
17+
<a href="https://github.com/Frontendland/webcoreui/blob/main/LICENSE">
18+
<img
19+
src="https://img.shields.io/badge/license-MIT-blue"
20+
alt="License"
21+
/>
22+
</a>
23+
</p>
24+
25+
---
26+
## Table of Contents
27+
28+
- [Table of Contents](#table-of-contents)
29+
- [Documentation](#documentation)
30+
- [Getting started](#getting-started)
31+
- [Prerequisites](#prerequisites)
32+
- [Installation](#installation)
33+
- [Setup](#setup)
34+
- [Using Components](#using-components)
35+
36+
## Documentation
37+
38+
Full documentation coming soon on [webcoreui.dev/docs](https://webcoreui.dev/docs).
39+
40+
## Getting Started
41+
42+
Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems.
43+
44+
### Prerequisites
45+
46+
> [!NOTE]
47+
> Before getting started, make sure you have a package manager installed, such as <a href="https://nodejs.org/en/" rel="noreferrer">Node</a>.
48+
49+
Webcore components use Sass for styling. To use the component library, you must have the following packages installed:
50+
51+
- [Sass](https://www.npmjs.com/package/sass) - `v1.77` and above
52+
- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.4` and above
53+
54+
Depending on your project setup, you'll also need the following packages:
55+
56+
- **For Astro projects**
57+
- [Astro](https://www.npmjs.com/package/astro) - `v4.10` and above
58+
- **For Svelte projects**
59+
- [Svelte](https://www.npmjs.com/package/svelte) - `v4.2` and above
60+
- **For React projects**
61+
- [React](https://www.npmjs.com/package/react) - `v18.3` and above
62+
- [React DOM](https://www.npmjs.com/package/react-dom) -`v18.3` and above
63+
64+
### Installation
65+
66+
Install Webcore as a dependency by running one of the following command:
67+
68+
```bash
69+
# Using NPM
70+
npm i webcoreui
71+
72+
# Using Yarn
73+
yarn add webcoreui
574
```
675

7-
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
8-
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
9-
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
76+
### Setup
1077

11-
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
78+
1. Add the following to your `tsconfig.json` to include TypeScript types:
1279

13-
## 🚀 Project Structure
80+
```json
81+
{
82+
"include": ["webcoreui"]
83+
}
84+
```
1485

15-
Inside of your Astro project, you'll see the following folders and files:
86+
2. Setup default styles and fonts by calling the following in your global SCSS file:
1687

17-
```text
18-
/
19-
├── public/
20-
├── src/
21-
│ └── pages/
22-
│ └── index.astro
23-
└── package.json
88+
```scss
89+
@import 'webcoreui/styles';
90+
@include Setup((
91+
// Define paths for your fonts
92+
fontRegular: '/fonts/Inter-Regular.woff2',
93+
fontBold: '/fonts/Inter-Bold.woff2'
94+
));
2495
```
2596

26-
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
97+
> [!TIP]
98+
> You can download the fonts Webcore uses from the [`public/fonts`](https://github.com/Frontendland/webcoreui/tree/main/public/fonts) directory.
99+
100+
The `Setup` mixin can also accept the following options:
27101

28-
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
29102

30-
Any static assets, like images, can be placed in the `public/` directory.
103+
| Property | Default value | Purpose | | |
104+
|-----------|----------------|----------|---|---|
105+
| `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
106+
| `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). |
31107

32-
## 🧞 Commands
108+
### Using Components
33109

34-
All commands are run from the root of the project, from a terminal:
110+
Start using Webcore components in your code by importing them:
35111

36-
| Command | Action |
37-
| :------------------------ | :----------------------------------------------- |
38-
| `npm install` | Installs dependencies |
39-
| `npm run dev` | Starts local dev server at `localhost:4321` |
40-
| `npm run build` | Build your production site to `./dist/` |
41-
| `npm run preview` | Preview your build locally, before deploying |
42-
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
43-
| `npm run astro -- --help` | Get help using the Astro CLI |
112+
```astro
113+
---
114+
// Import the component relevant to your project
115+
// How to import Astro components
116+
import { Accordion } from 'webcoreui/astro'
44117
45-
## 👀 Want to learn more?
118+
// How to import Svelte components
119+
import { Accordion } from 'webcoreui/svelte'
46120
47-
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
121+
// How to import React components
122+
import { Accordion } from 'webcoreui/react'
123+
---
124+
125+
<Accordion items={[{ ... }]} />
126+
```

‎public/img/banner.png

15.3 KB
Loading

‎scripts/build.js

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,36 @@
11
import fs from 'fs'
22

3-
const destination = 'dist'
43
const folders = {
5-
'public': 'public',
6-
'src/components': 'components',
7-
'src/scss': 'scss'
4+
'public': 'dist/public',
5+
'src/components': 'dist/components',
6+
'src/scss': 'dist/scss'
7+
}
8+
9+
const files = {
10+
'src/astro.d.ts': 'dist/astro.d.ts',
11+
'src/astro.js': 'dist/astro.js'
812
}
913

1014
console.log('🚀 Preparing package build')
1115

12-
folders.forEach(folder => {
13-
fs.cp(folder, destination, { recursive: true }, error => {
14-
console.error('🚨 error copying assets', error)
16+
if (!fs.existsSync('dist')) {
17+
fs.mkdirSync('dist')
18+
}
19+
20+
Object.keys(folders).forEach(key => {
21+
fs.cp(key, folders[key], { recursive: true }, error => {
22+
if (error) {
23+
console.error('🚨 error copying directory', error)
24+
}
25+
})
26+
})
27+
28+
Object.keys(files).forEach(key => {
29+
fs.copyFile(key, files[key], error => {
30+
if (error) {
31+
console.error('🚨 error copying file', error)
32+
}
1533
})
1634
})
1735

18-
// generate astro.d.ts and astro.js files
19-
// copy components, public, and scss folder
20-
// copy package.json
21-
// minify files
22-
// put everything into dist folder
36+
console.log('✅ Package built')

‎src/scss/global/utility.scss

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,32 @@
1111
display: grid;
1212
gap: 20px;
1313
}
14-
}
1514

16-
@include Media('md') {
17-
.grid.md-2 {
18-
grid-template-columns: repeat(2, minmax(0, 1fr));
19-
}
15+
@include Media('md') {
16+
.grid.md-2 {
17+
grid-template-columns: repeat(2, minmax(0, 1fr));
18+
}
2019

21-
.grid.md-3 {
22-
grid-template-columns: repeat(3, minmax(0, 1fr));
23-
}
20+
.grid.md-3 {
21+
grid-template-columns: repeat(3, minmax(0, 1fr));
22+
}
2423

25-
.grid.md-4 {
26-
grid-template-columns: repeat(4, minmax(0, 1fr));
24+
.grid.md-4 {
25+
grid-template-columns: repeat(4, minmax(0, 1fr));
26+
}
2727
}
28-
}
2928

30-
@include Media('lg') {
31-
.grid.lg-2 {
32-
grid-template-columns: repeat(2, minmax(0, 1fr));
33-
}
29+
@include Media('lg') {
30+
.grid.lg-2 {
31+
grid-template-columns: repeat(2, minmax(0, 1fr));
32+
}
3433

35-
.grid.lg-3 {
36-
grid-template-columns: repeat(3, minmax(0, 1fr));
37-
}
34+
.grid.lg-3 {
35+
grid-template-columns: repeat(3, minmax(0, 1fr));
36+
}
3837

39-
.grid.lg-4 {
40-
grid-template-columns: repeat(4, minmax(0, 1fr));
38+
.grid.lg-4 {
39+
grid-template-columns: repeat(4, minmax(0, 1fr));
40+
}
4141
}
4242
}

‎src/scss/setup.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
$config: (
44
includeResets: true,
5-
includeFonts: true,
65
includeHelperClasses: true
76
);
87

0 commit comments

Comments
 (0)