Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/corllete/apos-ds
Design system / pattern library bundle for Apostrophe CMS v3
https://github.com/corllete/apos-ds
apostrophe apostrophecms design-system mongodb nunjucks nunjucks-components pattern-library story
Last synced: 1 day ago
JSON representation
Design system / pattern library bundle for Apostrophe CMS v3
- Host: GitHub
- URL: https://github.com/corllete/apos-ds
- Owner: corllete
- Created: 2021-02-16T18:07:14.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-03T16:02:49.000Z (12 days ago)
- Last Synced: 2024-11-03T16:03:44.127Z (12 days ago)
- Topics: apostrophe, apostrophecms, design-system, mongodb, nunjucks, nunjucks-components, pattern-library, story
- Language: CSS
- Homepage:
- Size: 6.76 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# What?
It's yet another design system but experimental and built for Nunjucks components, working on top of the awesome [Apostrophe](https://apostrophecms.com/) (version 3 alpha).
## Development / Demo install
Clone this and
```sh
npm i
```
Be sure you have mongodb running. If you don't but you have `docker-compose` installed - we got your back! Just do:
```sh
docker-compose up -d
```
It'll take a while but only the first time. Promise.
When you are ready playing stop your mongo:
```sh
docker-compose down
```
Your database will be saved no matter that. If you want to completely remove it:
```sh
docker volume ls
```
You should see `apos-ds_mongodb-data` (or similar if you cloned in different than the default folder).
Execute `docker volume rm apos-ds_mongodb-data` to remove it.
## Run it
You should have mongodb running on default port.
The demo app `packages/app` is slightly modified [Apostrophe 3 boilerplate](https://github.com/apostrophecms/a3-boilerplate).
In order to be able to manage (add, edit pages, etc) your installation, you have to create user:
```sh
cd packages/app && node app @apostrophecms/user:add dev admin
```
This will create user `dev` with administration permissions.
From the project root or inside `packages/app` run:
```sh
npm run dev
```
To disable Webpack Live and Hot Reload (for some reason):
```sh
WP_HOT=0 run dev
```
Some instructions are available on the initial home page. Log in and create new page with type `Design System`.
> NOTE: if you see an error in your terminal stating something along lines `slug already in use`, you need to reset
> your database (the design system is now parked at `/design-system` route). More information is available at the
> welcome screen of the app.
## Where are the docs?
[The integration guide](packages/apos-ds)
Take a look at the [`packages/app` for example integration](packages/app), stories and "Material Design Components" implementation.
Run `npm run dev` and open `http://localhost:3000/design-system`. Read the stories (they are documented) and the special `Docs` stories category and inspect the code in `packages/app`.
## Where is the npm package?
`npm i @corllete/apos-ds@alpha`
[The full story](packages/apos-ds)
## A quick look
