11![ GitHub contributors] ( https://img.shields.io/github/contributors/creativecommons/chooser )
22![ GitHub Sponsors] ( https://img.shields.io/github/sponsors/creativecommons )
33![ GitHub] ( https://img.shields.io/github/license/creativecommons/chooser )
4- ![ npm] ( https://img.shields.io/npm/v/@creativecommons/chooser )
5- ![ Libraries.io dependency status for latest release, scoped npm package] ( https://img.shields.io/librariesio/release/npm/@creativecommons/chooser )
6- ![ npm] ( https://img.shields.io/npm/dm/@creativecommons/chooser )
74![ GitHub issues] ( https://img.shields.io/github/issues-raw/creativecommons/chooser )
85![ GitHub Repo stars] ( https://img.shields.io/github/stars/creativecommons/chooser?style=social )
96![ GitHub forks] ( https://img.shields.io/github/forks/creativecommons/chooser?style=social )
107
11-
128# Chooser
139
1410The Creative Commons License Chooser is meant to help people learn about CC licenses, and select the license that best fits their needs. The new version in this repo places greater importance on usability, and an educational experience of the six CC licenses.
@@ -18,12 +14,8 @@ The Creative Commons License Chooser is meant to help people learn about CC lice
1814
1915Repository containing the source code for the new Creative Commons License Chooser. The new chooser is still in beta, and a beta deployment can be found [ here] ( https://chooser-beta.creativecommons.org/ ) .
2016
21- This site is built using [ Vue.js] ( https://vuejs.org/ ) (and vue-cli).
22-
23-
24- ### Roadmap
17+ This site is built using HTML, CSS, and JS.
2518
26- Tasks, issues, and discussion related to the release of the new chooser are tracked with the [ ` Launch Milestone ` ] ( https://github.com/creativecommons/chooser/milestone/1 ) .
2719
2820
2921## Code of conduct
@@ -47,182 +39,14 @@ See [`CONTRIBUTING.md`][org-contrib].
4739[ org-contrib ] : https://github.com/creativecommons/.github/blob/main/CONTRIBUTING.md
4840
4941
50- ## Using Docker
51-
52-
53- ### Containers
54-
55- The [ ` docker-compose.yml ` ] ( docker-compose.yml ) file defines the following
56- containers:
57- 1 . ** chooser-web** - simple NGINX container serving [ ` docs/ ` ] ( docs )
58- - [ localhost:8888] ( http://localhost:8888/ )
59- 2 . ** chooser-node** - Node14 container
60- - [ localhost:8080] ( http://localhost:8080/ )
61- - (requires ** Run Node development server** , below)
62-
63-
64- ### Docker desktop required
65-
66- Before proceeding, ensure you have Docker installed on your local machine. If
67- not, download and install Docker Desktop by visiting [ Docker's official
68- website] ( https://www.docker.com/products/docker-desktop ) and follow the
69- installation instructions.
70-
71-
72- ### Startup containers
73-
74- The containers can be started with:
75- ``` shell
76- docker compose up
77- ```
78- (See [ Docker Compose overview | Docker Docs] ( https://docs.docker.com/compose/ )
79- for more information on managing containes with ` docker compose ` .)
80-
81-
82- ### Initial setup
83-
84- Before the chooser-node container can be used effectively, a clean install of
85- NPM packages from ` package-lock.json ` is required:
86- ``` shell
87- docker compose exec chooser-node npm ci
88- ```
89- ** This step generally only needs to be done once.**
90-
91-
92- ### Run Node development server
93-
94- 1 . Startup containers (see above)
95- 2 . Complete initial setup (see above)
96- 3 . Run Node development server
97- ``` shell
98- docker compose exec chooser-node npm run serve
99- ```
100- - [localhost:8080](http://localhost:8080/)
101-
102-
103- # ## Create production (standalone) build
104-
105- 1. Startup containers (see above)
106- 2. Complete initial setup (see above)
107- 3. Run Node development server
108- ` ` ` shell
109- docker compose exec chooser-node npm run build
110- ` ` `
111- - (this automatically copies the generated files from [` dist/` ](dist) to
112- [` docs/` ](docs))
113-
114- The chooser is deployed to GitHub Pages. The source files for the beta
115- deployment are contained in the ` ./docs/` dir, and are live. Any changes to
116- this directory' s contents will be automatically deployed, so please take care
117- when making modifications to this location.
118-
119-
120- ### Create standalone (production) build
121-
122- 1. Startup containers (see above)
123- 2. Complete initial setup (see above)
124- 3. Run Node development server
125- ```shell
126- docker compose exec chooser-node npm run build
127- ```
128- - (this automatically copies the generated files from [`dist/`](dist) to
129- [`docs/`](docs))
130-
131- The chooser is deployed to GitHub Pages. The source files for the beta
132- deployment are contained in the `./docs/` dir, and are live. Any changes to
133- this directory' s contents will be automatically deployed, so please take care
134- when making modifications to this location.
135-
136- For an embedded standalone build (no header nor footer), run:
137- ` ` ` shell
138- docker compose exec chooser-node VUE_APP_CC_OUTPUT=embedded npm run build
139- ` ` `
140- ** (please _don' t_ commit embedded builds to `docs/`)**
141-
142-
143- ### Create a web component build
144-
145- 1. Startup containers (see above)
146- 2. Complete initial setup (see above)
147- 3. Run Node development server
148- ```shell
149- docker compose exec chooser-node npm run build-component
150- ```
151-
152- This will create a file in the [`dist/`](dist) folder named
153- `license-chooser.min.js`. It can be used to load the web-component in any JS
154- project. There is also a sample `demo.html` created.
155-
156- To be able to use the file it should either be rendered statically from the
157- integrater' s web-app or be published on a CDN. Following code can be used to
158- integrate this in other apps.
159-
160- Note: the Chooser component depends on Vue 2.x, as can be seen in the following
161- example.
162-
163- ` ` `
164- < script src=" https://cdn.jsdelivr.net/npm/vue@2.x.x" ></script>
165- < script src=" https://unpkg.com/@creativecommons/chooser/dist/license-chooser.js" ></script>
166-
167- < license-chooser></license-chooser>
168- ` ` `
169-
170- For an embedded web component build (no header nor footer), run:
171- ` ` ` shell
172- docker compose exec chooser-node VUE_APP_CC_OUTPUT=embedded npm run build-component
173- ` ` `
174-
175-
176- # # Perform unit tests on standalone or embedded build
177-
178- 1. Startup containers (see above)
179- 2. Complete initial setup (see above)
180- 2. Run unit tests
181- ` ` ` shell
182- docker compose exec chooser-node npm run test:unit
183- ` ` `
184-
185- # # Perform unit tests on web-component build
186-
187- 1. Startup containers (see above)
188- 2. Complete initial setup (see above)
189- 3. Create a web component build (see above)
190- 2. Run unit tests
191- ` ` ` shell
192- docker compose exec chooser-node npm run test-component
193- ` ` `
194- - It starts a server with the ` dist/demo.html` on which tests can be run.
195-
196-
197- # # Perform Cypress tests
198-
199- 1. Startup containers (see above)
200- 2. Run Cypress tests
201- ` ` ` shell
202- docker run -it -v $PWD :/e2e -w /e2e -e CYPRESS_baseUrl=http://host.docker.internal:8888 cypress/included:latest
203- ` ` `
204- - (This will download the cypress/included image when first run)
205-
206-
207- # # CSS Build
208-
209- The Chooser uses PostCSS plugin for PurgeCSS to make CSS bundle size smaller.
210- It automatically removes unused CSS based on the classes found in the final
211- built bundle. Some styles for dynamic components or dynamically-imported files
212- can also be removed. If you find that the built site misses some styles, you
213- can manually add the necessary classes or Regex expressions to the ` safelist`
214- array in the ` postcss.config.js` file.
215-
42+ ## Development
21643
217- # # Embedded screenshot
44+ * ` /src/index.html ` : relevant markup, and makes use of the ` template ` element to load the main tool recommendation content via JavaScript.
45+ * ` /src/style.css ` : localized styles, built on to of [ Vocabulary] [ vocabulary ] .
46+ * ` /src/scripts.js ` : relevant JavaScript logic.
21847
219- The site can be built in two different modes: ` embedded` and ` standalone` .
220- ` Embedded` mode removes the header and footer from the application, resulting
221- in the following appearance:
22248
223- < img src=" static/embedded-screenshot.png" alt=" Application built in embedded mode" >
49+ ## Setup
50+ 1 . open the ` src/index.html ` file within a browser to view the Chooser.
22451
225- To build into _embedded_ mode, set the environment variable
226- ` VUE_APP_CC_OUTPUT=embedded` on your server before building. If
227- ` VUE_APP_CC_OUTPUT` is unset or set to a different value, the app will build in
228- the default _standalone_ mode, with its own header and footer.
52+ [ vocabulary ] : https://github.com/creativecommons/vocabulary
0 commit comments