Skip to content

Commit

Permalink
Merge pull request #2463 from adevinta/upd-using-spark-docs
Browse files Browse the repository at this point in the history 
docs: update SB documentation
  • Loading branch information
@soykje
soykje authored Oct 10, 2024
2 parents 565758d + 1c7e1c0 commit c6d422a
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 108 deletions.
19 changes: 0 additions & 19 deletions .github/workflows/release.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,6 @@ jobs:
collaborators: 'outside'
env:
GITHUB_TOKEN: ${{ secrets.SA_TOKEN }}
maintainers:
runs-on: ubuntu-latest
name: Maintainers
steps:
- name: Doc maintainers
uses: akhilmhdh/[email protected]
if: github.event_name == 'push'
with:
image_size: 50
readme_path: 'documentation/contributing/Maintainers.md'
columns_per_row: 8
use_username: true
commit_message: 'docs(chore): update maintainers'
committer_username: 'spark-ui-bot'
committer_email: '[email protected]'
auto_detect_branch_protection: false
collaborators: 'outside'
env:
GITHUB_TOKEN: ${{ secrets.SA_TOKEN }}
release:
runs-on: ubuntu-latest
steps:
Expand Down
83 changes: 81 additions & 2 deletions documentation/contributing/Contributors.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,85 @@
# Contributors

<!-- readme: collaborators,spark-ui-bot/- -start -->
<!-- readme: contributors,spark-ui-bot/- -start -->
<table>
<tr>
<td align="center">
<a href="https://github.com/andresin87">
<img src="https://avatars.githubusercontent.com/u/1674036?v=4" width="50;" alt="andresin87"/>
<br />
<sub><b>andresin87</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/Powerplex">
<img src="https://avatars.githubusercontent.com/u/2033710?v=4" width="50;" alt="Powerplex"/>
<br />
<sub><b>Powerplex</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/acd02">
<img src="https://avatars.githubusercontent.com/u/51230231?v=4" width="50;" alt="acd02"/>
<br />
<sub><b>acd02</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/andresz1">
<img src="https://avatars.githubusercontent.com/u/6877967?v=4" width="50;" alt="andresz1"/>
<br />
<sub><b>andresz1</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/soykje">
<img src="https://avatars.githubusercontent.com/u/66770550?v=4" width="50;" alt="soykje"/>
<br />
<sub><b>soykje</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/kikoruiz">
<img src="https://avatars.githubusercontent.com/u/2622119?v=4" width="50;" alt="kikoruiz"/>
<br />
<sub><b>kikoruiz</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/solygambas">
<img src="https://avatars.githubusercontent.com/u/51904909?v=4" width="50;" alt="solygambas"/>
<br />
<sub><b>solygambas</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/arnau-rius">
<img src="https://avatars.githubusercontent.com/u/32937662?v=4" width="50;" alt="arnau-rius"/>
<br />
<sub><b>arnau-rius</b></sub>
</a>
</td></tr>
<tr>
<td align="center">
<a href="https://github.com/danieleloscozzese">
<img src="https://avatars.githubusercontent.com/u/8526031?v=4" width="50;" alt="danieleloscozzese"/>
<br />
<sub><b>danieleloscozzese</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/tomasmax">
<img src="https://avatars.githubusercontent.com/u/1105226?v=4" width="50;" alt="tomasmax"/>
<br />
<sub><b>tomasmax</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/ferminhg">
<img src="https://avatars.githubusercontent.com/u/944856?v=4" width="50;" alt="ferminhg"/>
<br />
<sub><b>ferminhg</b></sub>
</a>
</td></tr>
</table>
<!-- readme: collaborators,spark-ui-bot/- -end -->
<!-- readme: contributors,spark-ui-bot/- -end -->
6 changes: 0 additions & 6 deletions documentation/contributing/Contributors.mdx
View file

This file was deleted.

60 changes: 1 addition & 59 deletions documentation/contributing/Maintainers.md
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
# Maintainers

<!-- readme: contributors,spark-ui-bot/- -start -->
<table>
<tr>
<td align="center">
<a href="https://github.com/andresin87">
<img src="https://avatars.githubusercontent.com/u/1674036?v=4" width="50;" alt="andresin87"/>
<br />
<sub><b>andresin87</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/Powerplex">
<img src="https://avatars.githubusercontent.com/u/2033710?v=4" width="50;" alt="Powerplex"/>
Expand All @@ -24,62 +16,12 @@
<sub><b>acd02</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/andresz1">
<img src="https://avatars.githubusercontent.com/u/6877967?v=4" width="50;" alt="andresz1"/>
<br />
<sub><b>andresz1</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/soykje">
<img src="https://avatars.githubusercontent.com/u/66770550?v=4" width="50;" alt="soykje"/>
<br />
<sub><b>soykje</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/kikoruiz">
<img src="https://avatars.githubusercontent.com/u/2622119?v=4" width="50;" alt="kikoruiz"/>
<br />
<sub><b>kikoruiz</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/solygambas">
<img src="https://avatars.githubusercontent.com/u/51904909?v=4" width="50;" alt="solygambas"/>
<br />
<sub><b>solygambas</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/arnau-rius">
<img src="https://avatars.githubusercontent.com/u/32937662?v=4" width="50;" alt="arnau-rius"/>
<br />
<sub><b>arnau-rius</b></sub>
</a>
</td></tr>
<tr>
<td align="center">
<a href="https://github.com/danieleloscozzese">
<img src="https://avatars.githubusercontent.com/u/8526031?v=4" width="50;" alt="danieleloscozzese"/>
<br />
<sub><b>danieleloscozzese</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/tomasmax">
<img src="https://avatars.githubusercontent.com/u/1105226?v=4" width="50;" alt="tomasmax"/>
<br />
<sub><b>tomasmax</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/ferminhg">
<img src="https://avatars.githubusercontent.com/u/944856?v=4" width="50;" alt="ferminhg"/>
<br />
<sub><b>ferminhg</b></sub>
</a>
</td></tr>
</tr>
</table>
<!-- readme: contributors,spark-ui-bot/- -end -->
6 changes: 0 additions & 6 deletions documentation/contributing/Maintainers.mdx
View file

This file was deleted.

26 changes: 10 additions & 16 deletions documentation/using-spark/Setup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,21 @@ import { Callout } from '@docs/helpers/Callout'

# Setup

## 1. Setup TailwindCSS
## Prerequisites

If you haven't installed **TailwindCSS** on your project yet, you **must** follow the [TailwindCSS installation guide](https://tailwindcss.com/docs/installation).
**Spark UI** being based on **Tailwind CSS** library, you will need to [have it installed](https://tailwindcss.com/docs/installation) in your system.

## 2. IntelliSense
To take benefit of a full empowered developper experience (autocomplete, syntax highlighting, linting...), you should also take a look at [**Tailwind CSS IntelliSense**](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code) extension. For now it comes actually only for VS Code but you also may be interested on equivalent solutions such as the ones provided [for JetBrains IDEs](https://www.jetbrains.com/help/webstorm/tailwind-css.html).

The official Tailwind CSS [IntelliSense extension](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code) for **Visual Studio Code** enhances the Tailwind development experience by providing users with advanced features such as autocomplete, syntax highlighting, and linting.
## Spark setup

**JetBrains IDEs** like WebStorm, PhpStorm, and others include [support](https://www.jetbrains.com/help/webstorm/tailwind-css.html) for intelligent Tailwind CSS completions in your HTML and when using @apply.

## 3. Setup Spark

After setting up **Tailwind** for your application, install the following packages via your command line:
After completing the Tailwind CSS setup, you'll simply have to install the following packages via your command line:

```bash
npm i @spark-ui/tailwind-plugins @spark-ui/theme-utils
```

Next, navigate to your **Tailwind config file**. Refer to the example below for proper configuration of our **Spark plugins**:
Navigate to your `tailwind.config.js` file and refer to the example below for proper configuration of our **Spark plugins**:

```js
// tailwind.config.js
Expand All @@ -51,9 +47,9 @@ Two important notes regarding the example above:
- we are using our default themes from our `theme-utils` package. However, you can replace it with your own themes, as long as they adhere to our `Theme` interface.
The Theme interface is available through the [**@spark-ui/theme-utils**](?path=/docs/utils-theme--docs) package.

- The `sparkConfig` plugin accepts an object with two fields: `themes` and `htmlFontSize`.
- the `sparkConfig` plugin accepts an object with two fields:

**themes**:
**`themes`:**

An object containing your themes. Each key in the object will be extracted to a `[data-theme]` attribute, and the values will be converted to CSS custom properties inside the `css` file generated by Tailwing. **Note that this object requires a key with a value of default**, which specifies the default theme for your project.

Expand Down Expand Up @@ -81,7 +77,7 @@ Tailwind will generate the following CSS:
}
```

**htmlFontSize (optional)**:
**`htmlFontSize` (optional):**

Spark uses a base font size of **16 pixels** as a standard value for calculating the sizes of all other font-related properties defined in the theme. For example, our `spacing.lg` value is defined as **1rem**, which is equal to 16 pixels (based on the default base font size of 16 pixels).

Expand Down Expand Up @@ -113,15 +109,13 @@ module.exports = {
}
```

That's all there is to it! 🎉

<Callout marginBottom="large">
If you want to know more about the custom token class names used in Spark, please check out our
[**dedicated page**](https://sparkui.vercel.app/viewer/) where you can find a comprehensive list
of these class names.
</Callout>

<div className="flex justify-end mt-md">
<div className="mt-md flex justify-end">
<Card
href="/?path=/docs/using-spark-styling-overview--docs#overview-of-spark-styling-solution"
description="Spark styling solution overview"
Expand Down

0 comments on commit c6d422a

Please sign in to comment.