Chooser

The 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.

About

Repository containing the source code for the new Creative Commons License Chooser. The new chooser is still in beta, and a beta deployment can be foundhere.

This site is built usingVue.js(and vue-cli).

Roadmap

Tasks, issues, and discussion related to the release of the new chooser are tracked with theLaunch Milestone.

Code of conduct

CODE_OF_CONDUCT.md:

The Creative Commons team is committed to fostering a welcoming community. This project and all other Creative Commons open source projects are governed by ourCode of Conduct.Please report unacceptable behavior to[email protected] per ourreporting guidelines.

Contributing

SeeCONTRIBUTING.md.

Using Docker

Containers

Thedocker-compose.ymlfile defines the following containers:

1. chooser-web- simple NGINX container servingdocs/
   • localhost:8888
2. chooser-node- Node14 container
   • localhost:8080
     • (requiresRun Node development server,below)

Docker desktop required

Before proceeding, ensure you have Docker installed on your local machine. If not, download and install Docker Desktop by visitingDocker's official websiteand follow the installation instructions.

Startup containers

The containers can be started with:

docker compose up

(SeeDocker Compose overview | Docker Docs for more information on managing containes withdocker compose.)

Initial setup

Before the chooser-node container can be used effectively, a clean install of NPM packages frompackage-lock.jsonis required:

docker composeexecchooser-node npm ci

This step generally only needs to be done once.

Run Node development server

1. Startup containers (see above)
2. Complete initial setup (see above)
3. Run Node development server

   docker composeexecchooser-node npm run serve

   • localhost:8080

Create production (standalone) build

1. Startup containers (see above)
2. Complete initial setup (see above)
3. Run Node development server

   docker composeexecchooser-node npm run build

   • (this automatically copies the generated files fromdist/to docs/)

The chooser is deployed to GitHub Pages. The source files for the beta deployment are contained in the./docs/dir, and are live. Any changes to this directory's contents will be automatically deployed, so please take care when making modifications to this location.

Create standalone (production) build

1. Startup containers (see above)
2. Complete initial setup (see above)
3. Run Node development server

   docker composeexecchooser-node npm run build

   • (this automatically copies the generated files fromdist/to docs/)

The chooser is deployed to GitHub Pages. The source files for the beta deployment are contained in the./docs/dir, and are live. Any changes to this directory's contents will be automatically deployed, so please take care when making modifications to this location.

For an embedded standalone build (no header nor footer), run:

docker composeexecchooser-node VUE_APP_CC_OUTPUT=embedded npm run build

(pleasedon'tcommit embedded builds todocs/)

Create a web component build

1. Startup containers (see above)
2. Complete initial setup (see above)
3. Run Node development server

   docker composeexecchooser-node npm run build-component

This will create a file in thedist/folder named license-chooser.min.js.It can be used to load the web-component in any JS project. There is also a sampledemo.htmlcreated.

To be able to use the file it should either be rendered statically from the integrater's web-app or be published on a CDN. Following code can be used to integrate this in other apps.

Note: the Chooser component depends on Vue 2.x, as can be seen in the following example.

<script src= "https://cdn.jsdelivr.net/npm/[email protected]" ></script>
<script src= "https://unpkg /@creativecommons/chooser/dist/license-chooser.js" ></script>

<license-chooser></license-chooser>

For an embedded web component build (no header nor footer), run:

docker composeexecchooser-node VUE_APP_CC_OUTPUT=embedded npm run build-component

Perform unit tests on standalone or embedded build

1. Startup containers (see above)
2. Complete initial setup (see above)
3. Run unit tests

   docker composeexecchooser-node npm run test:unit

Perform unit tests on web-component build

1. Startup containers (see above)
2. Complete initial setup (see above)
3. Create a web component build (see above)
4. Run unit tests

   docker composeexecchooser-node npm run test-component

   • It starts a server with thedist/demo.htmlon which tests can be run.

Perform Cypress tests

1. Startup containers (see above)
2. Run Cypress tests

   docker run -it -v$PWD:/e2e -w /e2e -e CYPRESS_baseUrl=http://host.docker.internal:8888 cypress/included:latest

   • (This will download the cypress/included image when first run)

CSS Build

The Chooser uses PostCSS plugin for PurgeCSS to make CSS bundle size smaller. It automatically removes unused CSS based on the classes found in the final built bundle. Some styles for dynamic components or dynamically-imported files can also be removed. If you find that the built site misses some styles, you can manually add the necessary classes or Regex expressions to thesafelist array in thepostcss.config.jsfile.

Embedded screenshot

The site can be built in two different modes:embeddedandstandalone. Embeddedmode removes the header and footer from the application, resulting in the following appearance:

To build intoembeddedmode, set the environment variable VUE_APP_CC_OUTPUT=embeddedon your server before building. If VUE_APP_CC_OUTPUTis unset or set to a different value, the app will build in the defaultstandalonemode, with its own header and footer.