Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ekafyi/junglejs-storybook-tailwind
Starter site for JungleJS + Storybook + TailwindCSS
https://github.com/ekafyi/junglejs-storybook-tailwind
Last synced: 20 days ago
JSON representation
Starter site for JungleJS + Storybook + TailwindCSS
- Host: GitHub
- URL: https://github.com/ekafyi/junglejs-storybook-tailwind
- Owner: ekafyi
- License: mit
- Created: 2020-07-26T16:10:27.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-16T07:59:20.000Z (almost 2 years ago)
- Last Synced: 2024-11-14T08:35:50.448Z (29 days ago)
- Language: JavaScript
- Size: 529 KB
- Stars: 27
- Watchers: 4
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- oss - JungleJS + Storybook + TailwindCSS Starter Site - Starter site for JungleJS + Storybook + TailwindCSS - Svelte, JungleJS, Storybook, TailwindCSS (Open Source Project / Starter Project)
README
# JungleJS + Storybook + TailwindCSS starter site
A starter site for:
- [JungleJS](https://www.junglejs.org) — Svelte and GraphQL-based static site generator
- [Storybook](https://storybook.js.org) — UI development environment
- [TailwindCSS](https://tailwindcss.com) — utility-first CSS frameworkRead my introduction posts on DEV:
- [JungleJS + Storybook + TailwindCSS starter](https://dev.to/ekafyi/junglejs-storybook-tailwindcss-starter-site-3dmf)
- [Get asynchronous data in JungleJS, the new Svelte JAMstack library](https://dev.to/ekafyi/get-asynchronous-data-in-junglejs-the-new-svelte-jamstack-library-1dkm)## Branches
- [master](https://github.com/ekafyi/junglejs-storybook-tailwind/tree/master) — JungleJS + Storybook + Tailwind CSS
- [with-async-data](https://github.com/ekafyi/junglejs-storybook-tailwind/tree/with-async-data) — master + async data fetching example## Quick start
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fekafyi%2Fjunglejs-storybook-tailwind%2Ftree%2Fmaster) [![Deploy with Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ekafyi/junglejs-storybook-tailwind)
Or [create a new repo](https://github.com/ekafyi/junglejs-storybook-tailwind/generate) with Github template.
## Install and develop
```bash
# Install the global Netlify CLI package if you haven’t
npm install netlify-cli -g# Clone and go to project directory
git clone https://github.com/ekafyi/junglejs-storybook-tailwind.git
cd junglejs-storybook-tailwind# Install dependencies
npm install# Start Jungle server
npm run start# Start Storybook server
npm run storybook
```Jungle runs on `localhost:3000`.
Storybook runs on `localhost:6006`.
## Directory structure
```sh
root
├── .storybook # Storybook config
├── src
│ ├── # ... Jungle components & routes dir
│ ├── stories # Storybook sample stories
│ ├── tailwind.css # Tailwind source file
│ └── template.html # Jungle template (with global.css swapped for tailwind.css)
├── static
│ ├── # ... other Jungle assets
│ ├── global.css # default Jungle CSS (not used)
│ └── tailwind.css # Tailwind output/generated file
├── # ... default jungle & package files
├── postcss.config.js
└── tailwind.config.js
```This starter uses as much default settings & file structure as possible. Only custom configuration files are shown above.
## Storybook
**.storybook/main.js**
In this starter, your Storybook files should have the extension `.stories.js`. The default sample stories are in `src/stories`, but you can move it anywhere within the `src` directory. You can override this configuration and add further customization in `.storybook/main.js`. More info: https://storybook.js.org/docs/configurations/overview
**.storybook/preview.js**
This file contains decorators for the `@storybook/addon-a11y` addon.
**.storybook/preview-head.html**
This file adds the generated CSS file (`tailwind.css`). Tailwind by default includes normalize and base styles, so [Jungle global CSS](https://github.com/junglejs/junglejs/blob/master/example/static/global.css) is not necessary; I leave it commented out.
More info: https://storybook.js.org/docs/configurations/add-custom-head-tags## Tailwind
This starter uses Tailwind with PostCSS on its own, NOT integrated to Storybook [custom webpack config](https://storybook.js.org/docs/configurations/custom-webpack-config/) nor to [Jungle config](https://github.com/ekafyi/junglejs-storybook-tailwind/blob/master/jungle.config.js). We simply run and watch for changes during development (`start` and `storybook` commands), and generate an optimized build version in `build` and `build-storybook`.
- To modify the postcss commands (including source and output files), open `package.json`.
- To integrate Tailwind with Storybook, [refer to this discussion](https://github.com/storybookjs/storybook/issues/4038).**src/tailwind.css**
Source Tailwind file. Add your additional global styles here.
**src/static/tailwind.css**
Output/generated Tailwind file. You should not be modifying this. It is minified during production.
**postcss.config.js**
PostCSS configuration file. [cssnano](https://cssnano.co/) (PostCSS minifier) and [autoprefixer](https://github.com/postcss/autoprefixer) are only run during production (`npm run build:css`). More info: https://tailwindcss.com/docs/using-with-preprocessors/#using-postcss-as-your-preprocessor
**tailwind.config.js**
Tailwind configuration file. The `purge` object defines what files are checked when “purging” (removing unused Tailwind classes in production).
More info:
- https://tailwindcss.com/docs/configuration
- https://tailwindcss.com/docs/controlling-file-size/## Deploy
Run `npm run build`.
Your site is in the `jungle/build` directory, ready to publish anywhere that hosts static sites (Github Pages, Netlify, Vercel, any cPanel-based hosting).
### Netlify CI/CD
Deploy your project to a Github or GitLab repo.
Run `netlify init` (or `ntl init` for short) to start the continuous deployment wizard. With this setup, Netlify will automatically build every time you push to your chosen branch.
More info: https://docs.netlify.com/configure-builds/get-started
### Vercel CI/CD
(Similar feature is available on Vercel but I haven’t got round to trying it. PR welcome.)
## Credits
Boilerplate code from [Jungle template](https://github.com/junglejs/template). Repo icon/logo by [Freepik](http://www.freepik.com) from [Flaticon](https://www.flaticon.com).
---
(c) 2020 Eka MIT License