vocabulary-legacy

KO | EN

gitlite — search

#python #hacktoberfest #react #typescript #llm #golang #go #android #linux #docker #macos #windows #mcp #openai

vocabulary-legacy

(★ 88)

A cohesive design system & Vue component library to unify the web-facing Creative Commons

파일 탐색기

최종 버전 다운로드 (.zip)

- - cd-fonts.yml
  - cd-vocabulary.yml
  - cd-vue.yml
  - ci-build.yml
  - ci-lint.yml
  - ci-test.yml
  - project-automation.yml
  - release-drafter.yml
  - stale.yml
- dependabot.yml
- release-drafter.yml
- main.js
- preview.js
- - vocabulary.css
  - vocabulary.css.map
- - package.json
- - package.json
- - package.json
- vocabulary_logo.svg
- - fonts.sh
  - vocabulary.sh
  - vue_vocabulary.sh
- - fonts.sh
  - vocabulary.sh
  - vue-vocabulary.sh
- - fonts.js
  - vocabulary.js
  - vue_vocabulary.js
- - cclogo-shared-image.jpg
  - github_corner.svg
  - puff.svg
  - titlecard.png
- - index.js
- - assets.js
  - constants.js
  - global_header.js
  - render.js
  - vocabulary.js
- - breadcrumb.scss
  - button.scss
  - card.scss
  - color.scss
  - color_overrides.scss
  - footer.scss
  - form.scss
  - github_corner.scss
  - global_header.scss
  - header.scss
  - image.scss
  - layout.scss
  - locale.scss
  - modal.scss
  - notification.scss
  - pagination.scss
  - profile_image.scss
  - sidebar_menu.scss
  - spacing.scss
  - spacing_overrides.scss
  - table.scss
  - table_of_contents.scss
  - table_of_progress.scss
  - tabs.scss
  - typography.scss
  - typography_overrides.scss
  - vocabulary.scss
- - breadcrumb.stories.mdx
  - buttons.stories.mdx
  - cards.stories.mdx
  - checkbox.stories.mdx
  - color.stories.mdx
  - combined_header.stories.mdx
  - footer.stories.mdx
  - github_corner.stories.mdx
  - global_header.stories.mdx
  - grid.stories.mdx
  - header.stories.mdx
  - helpers.js
  - icon_font.stories.mdx
  - icons.stories.mdx
  - image.stories.mdx
  - input.stories.mdx
  - license_badge.stories.mdx
  - locale.stories.mdx
  - main_logos.stories.mdx
  - modal.stories.mdx
  - notification.stories.mdx
  - pagination.stories.mdx
  - product_logos.stories.mdx
  - profile_image.stories.mdx
  - radio.stories.mdx
  - select.stories.mdx
  - sidebar_menu.stories.mdx
  - spacing.stories.mdx
  - table_of_contents.stories.mdx
  - table_of_progress.stories.mdx
  - tables.stories.mdx
  - tabs.stories.mdx
  - textarea.stories.mdx
  - typography.stories.mdx
- index.js
- - VCheckbox.spec.js
.all-contributorsrc
.browserslistrc
.editorconfig
.eslintrc.js
.gitignore
babel.config.js
CHANGELOG.md
jest.config.js
LICENSE
package-lock.json
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## Code of conduct

[`CODE_OF_CONDUCT.md`][org-coc]:
> The Creative Commons team is committed to fostering a welcoming community.
> This project and all other Creative Commons open source projects are governed
> by our [Code of Conduct][code_of_conduct]. Please report unacceptable
> behavior to [conduct@creativecommons.org](mailto:conduct@creativecommons.org)
> per our [reporting guidelines][reporting_guide].

[org-coc]: https://github.com/creativecommons/.github/blob/main/CODE_OF_CONDUCT.md
[code_of_conduct]: https://opensource.creativecommons.org/community/code-of-conduct/
[reporting_guide]: https://opensource.creativecommons.org/community/code-of-conduct/enforcement/

# Creative Commons Vocabulary

> Vocabulary is a cohesive design system to unite the web facing Creative Commons.

[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/main/)

Vocabulary is the code implementation of Creative Commons' Design Language.
Vocabulary makes it easier to develop Creative Commons apps while ensuring a
consistently familiar experience.

-----

## 🚧  NOTICE

As of 2022-09-19, this repository is currently **unstable**, the
Vocabulary project as a whole is undergoing major changes related to: [Vocabulary Roadmap (work in progress) · Issue #16 · creativecommons/vocabulary](https://github.com/creativecommons/vocabulary/issues/16).

If you are using this repository in a project, it is **strongly recommended**
that you lock your version to the latest stable release for the time being, as
new releases at the moment are not guaranteed to be non-breaking, and will
likely require manual intervention to correct and/or upgrade.

The following repos are directly affected by this work:

- [creativecommons/cc-assets][gh-cc-assets]
- [cc-archive/vocabulary-legacy][cc-vocab] (this repository)
- [cc-archive/vocabulary-components][gh-vocab-components]
- [cc-archive/vocabulary-fonts][gh-vocab-fonts]
- [cc-archive/vocabulary-styles][gh-vocab-styles]

[gh-cc-assets]: https://github.com/creativecommons/cc-assets
[cc-vocab]: https://github.com/cc-archive/vocabulary-legacy
[gh-vocab-components]: https://github.com/cc-archive/vocabulary-components
[gh-vocab-fonts]: https://github.com/cc-archive/vocabulary-fonts
[gh-vocab-styles]: https://github.com/cc-archive/vocabulary-styles

### Legacy use

See [Track Legacy Vocabulary use · Issue #17 · creativecommons/vocabulary
](https://github.com/creativecommons/vocabulary/issues/17).

-----

## ~~Suspension and Redistribution~~

~~This `vocabulary` package has been suspended to be redistributed and divided into `vocabulary-components`, `vocabulary-fonts`, `vocabulary-styles`.~~

~~They are now accessible at:~~
* ~~[vocabulary-components](https://github.com/cc-archive/vocabulary-components)~~
* ~~[vocabulary-fonts](https://github.com/cc-archive/vocabulary-fonts)~~
* ~~[vocabulary-styles](https://github.com/cc-archive/vocabulary-styles)~~

(This work was never completed and shouldn't be used.)

## Included Packages

`vocabulary` is a monorepo containing three packages:

| Package                         | Description                                           |                                                                                                                                                          |
| ------------------------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| @creativecommons/vocabulary     | The main CSS component library                        | [![install size](https://packagephobia.com/badge?p=@creativecommons/vocabulary)](https://packagephobia.com/result?p=@creativecommons/vocabulary)         |
| @creativecommons/fonts          | A collection of typefaces and icon fonts              | [![install size](https://packagephobia.com/badge?p=@creativecommons/fonts)](https://packagephobia.com/result?p=@creativecommons/fonts)                   |
| @creativecommons/vue-vocabulary | Vue component library powered by the main CSS library | [![install size](https://packagephobia.com/badge?p=@creativecommons/vue-vocabulary)](https://packagephobia.com/result?p=@creativecommons/vue-vocabulary) |

## Installation

To setup you will need to have [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) installed.

Instailling with `npm` is lightweight, tweakable and much more performant as the code runs very close to the operating system. On the other hand, all dependencies must be manually resolved and each developer has a different setup.

#### Project dependencies

If you have the system dependencies installed, you can install the project dependencies via `npm`:

```bash
npm install --legacy-peer-deps
```

## Running the project

Once the project dependencies are installed, run the following command to start the project:

```bash
npm run serve
```

### Building the packages

To build the files for an individual package, run the relevant build command:

- `build:fonts`
- `build:vocabulary`
- `build:vue-vocabulary`

For example, to build the `fonts` package, run the following commands:

```bash
npm install --legacy-peer-deps
npm run build:fonts
```

Sometimes, on windows environments you may get an error about linebreaks, fix that by running the command as

```bash
npm run build:fonts --fix
```

> ## IMPORTANT NOTE: The `serve` command has the -s flag for static assets serving

## Using

To use Vocabulary in your projects, refer to [this document](https://cc-vocabulary.netlify.com/?path=/docs/vocabulary-usage--page).

## Contributing

We're always looking for contributors to help us find and fix bugs, build new features, help us improve the project documentation or translate the project to another language.See [`CONTRIBUTING.md`][org-contrib] for making contributions.

[org-contrib]: https://github.com/creativecommons/.github/blob/main/CONTRIBUTING.md

Vocabulary is continuously evolving and improving. You can contribute to the project in a number of ways.

| What       | How                                                                                                                                                   |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Code**   | If you are a developer, feel free to resolve open issues, raise PRs, add new features to existing components or add new components altogether.        |
| **Design** | If you are a designer, your inputs on making every component more intuitive, aesthetic and joyful will reverberate through the entire ecosystem.      |
| **Test**   | If you are a user of these components, your feedback, bug reports and feature requests will drive the project forward so that we can meet your needs. |
| **Write**  | If you have a knack for writing technical articles, you could be the voice of the library's documentation, making it easy to use and understand.      |
| **Share**  | If you can't contribute in these ways, you can refer the project to a friend who might be able to. Spreading the word is the easiest way to help out. |

Interested?

The following instructions are in addition to the processes in our general [Contribution](https://opensource.creativecommons.org/contributing-code/) and [Pull Request](https://opensource.creativecommons.org/contributing-code/pr-guidelines/) guidelines on the Creative Common Open Source website. If you haven't read them already, read them first.

These instructions are a port of the general guidelines, tailored specifically for Vocabulary.

### Discussing Changes

For bug reports and feature requests, use [GitHub issues](https://github.com/creativecommons/vocabulary-legacy/issues/new/choose) with the appropriate labels. We can discuss the possibility of that change or new feature being implemented and released in the future. This lets us come to an agreement about the proposed idea before any work is done.

### Assigning work

If the issue is already assigned to somebody, it is considered polite to give the last assignee a week's time to attempt it before you do. You can express an intention to work on it nonetheless so that it can be reassigned to you if the last assignee bails.

Submitting PRs without commenting your intent to solve an issue is risky because if someone else does ask to work on it before your PR comes in, your PR will be put on hold for a week.

### Making changes

Do all work on its own branch. Use meaningful branch names.

Examples

```bash
  broken_links_readme
  typo_misspelled
```

Use clean commit messages, as imperative sentences in the present tense.

Examples:

```bash
  Remove the broken links from the `README.md` file
  Fix the typo on line 12, where 'misspelled' was misspelled as 'mispelled'
```

Update your fork from time to time. See GitHub Help pages for instructions on how to do that.

Write new tests, and update existing ones, for the changes you make.

### Testing

While our [Husky](https://www.npmjs.com/package/husky) setup will prevent you from committing poorly linted code, it cannot catch logical problems. For that we have some tests.

#### **Unit**

Running unit tests is easy.

```bash
  npm run test:unit
```

Running this command will run a general test. Test can also be run for individual packages by running their respective commands

```bash
  npm run test:vue-vocabulary
```

## CI/CD

We use [Github Actions](https://github.com/features/actions) to automate some parts of our CI/CD pipeline. When contributing code, rather than having to commit/push every time a check fails, it will be useful to automate this process on your development environment to be sure all checks done will be successful.

### Setting up CI testing on your Development Environment

We recommend using the cross-platform package [Nektos/act](https://github.com/nektos/act). It requires Docker to run workflows.

#### **Install Dependencies**

##### - **Docker**

If you don't have `Docker` installed, you can follow the links below to set it up depending on your environment.

- [x] Mac : [Docker for Mac](https://docs.docker.com/desktop/mac/install/)
- [x] Linux : [Docker for Linux](https://docs.docker.com/engine/install/)
- [x] Windows : [Docker for Windows](https://docs.docker.com/desktop/windows/install/)

##### - **Nektos/act**

Install using any of the methods below depending on your environment.

| Package / Method                                                                      | Command                                                                                                                      |
| ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **[Homebrew](https://brew.sh/) (Linux/macOS)**                                        | `brew install act`                                                                                                           |
| **[MacPorts](https://www.macports.org) (macOS)**                                      | `sudo port install act`                                                                                                      |
| **[Chocolatey](https://chocolatey.org/) (Windows)**                                   | `choco install act-cli`                                                                                                      |
| **[Scoop](https://scoop.sh/) (Windows)**                                              | `scoop install act`                                                                                                          |
| **[AUR](https://aur.archlinux.org/packages/act/) (Linux)**                            | `yay -S act`                                                                                                                 |
| **[Nix](https://nixos.org) (Linux/macOS)**                                            | [Nix recipe](https://github.com/NixOS/nixpkgs/blob/master/pkgs/development/tools/misc/act/default.nix)                       |
| **[Go](https://golang.org) (Linux/Windows/macOS/any other platform supported by Go)** | `go install github.com/nektos/act@latest`                                                                                    |
| **[Manual Download](https://github.com/nektos/act/releases/latest) (GitHub)**         | Download the [latest release](https://github.com/nektos/act/releases/latest) and add the path to your binary into your PATH. |

#### **Running Workflows**

Once you have downloaded and installed the package with its dependencies, it will automatically read the CI scripts from your [/.github/workflows](https://github.com/creativecommons/vocabulary-legacy/tree/main/.github/workflows) folder.

##### Trigger all workflows

To trigger all the CI workflows, `cd` into the root folder of this project (`vocabulary`) and run the command:

```bash
act
```

If you have permission errors, you run it as a sudo user:

```bash
sudo act
```

**NB:** _When you run it for the first time, it will ask you to choose a docker image to be used as default._

##### Trigger a specific workflow

To run a specific workflow, for example, the `build` workflow, you can specify it by running:

```bash
act -j build
```

If you want to see all the workflows available, you run the command:

```bash
act -l
```

Currently, we have four CI workflows namely:

```
- build
- lint
- test
- update_release_draft
```

We recommended that you run these workflows on your development environment so that if any errors occur, you can identify and resolve them before opening a PR.

You can refer the [Netktos/act Documentation](https://github.com/nektos/act/blob/master/README.md) for more commands and configuration options.

## Versioning

Vocabulary uses [CalVer](https://calver.org/) for version numbering, in the `YYYY.M.Micro` format. `Micro` is bumped whenever there are multiple releases in a month, for example `2020.7.1` is the first release in July 2020, while `2020.7.2` is the second.

## License

Licensed under the Expat/[MIT](http://www.opensource.org/licenses/MIT) license.

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<table>
 <tr>
 <td align="center"><a href="https://github.com/Akpjunior94"><img src="https://avatars.githubusercontent.com/u/56775903?v=4?s=100" width="100px;" alt=""/> Akpan Abraham</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=Akpjunior94" title="Code">💻</a></td>
 <td align="center"><a href="https://anik.live/"><img src="https://avatars.githubusercontent.com/u/16396161?v=4?s=100" width="100px;" alt=""/> Anik Das</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=sadn1ck" title="Code">💻</a></td>
 <td align="center"><a href="https://github.com/arushivii"><img src="https://avatars.githubusercontent.com/u/43967251?v=4?s=100" width="100px;" alt=""/> Arushi Verma</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=arushivii" title="Code">💻</a></td>
 <td align="center"><a href="http://brenoferreira.github.io"><img src="https://avatars.githubusercontent.com/u/707019?v=4?s=100" width="100px;" alt=""/> Breno Ferreira</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=brenoferreira" title="Code">💻</a> <a href="https://github.com/creativecommons/vocabulary-legacy/pulls?q=is%3Apr+reviewed-by%3Abrenoferreira" title="Reviewed Pull Requests">👀</a></td>
 <td align="center"><a href="https://conye.netlify.app/"><img src="https://avatars.githubusercontent.com/u/25040059?v=4?s=100" width="100px;" alt=""/> Chidiebere Onyegbuchulem</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=chidexebere" title="Code">💻</a></td>
 <td align="center"><a href="https://dhruvkb.github.io"><img src="https://avatars.githubusercontent.com/u/16580576?v=4?s=100" width="100px;" alt=""/> Dhruv Bhanushali</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=dhruvkb" title="Code">💻</a> <a href="#mentoring-dhruvkb" title="Mentoring">🧑‍🏫</a> <a href="https://github.com/creativecommons/vocabulary-legacy/pulls?q=is%3Apr+reviewed-by%3Adhruvkb" title="Reviewed Pull Requests">👀</a></td>
 <td align="center"><a href="http://dhruvi16.me"><img src="https://avatars.githubusercontent.com/u/34674462?v=4?s=100" width="100px;" alt=""/> Dhruvi Butti</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=Dhruvi16" title="Code">💻</a> <a href="#design-Dhruvi16" title="Design">🎨</a></td>
 </tr>
 <tr>
 <td align="center"><a href="https://github.com/Bob160"><img src="https://avatars.githubusercontent.com/u/58000961?v=4?s=100" width="100px;" alt=""/> Efio-esien Efiom</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=Bob160" title="Code">💻</a></td>
 <td align="center"><a href="https://github.com/krhitesh"><img src="https://avatars.githubusercontent.com/u/25616334?v=4?s=100" width="100px;" alt=""/> Hitesh</a> <a href="#infra-krhitesh" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=krhitesh" title="Tests">⚠️</a> <a href="#platform-krhitesh" title="Packaging/porting to new platform">📦</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=krhitesh" title="Code">💻</a></td>
 <td align="center"><a href="http://hugo.solar"><img src="https://avatars.githubusercontent.com/u/894708?v=4?s=100" width="100px;" alt=""/> Hugo Solar</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=hugosolar" title="Code">💻</a> <a href="https://github.com/creativecommons/vocabulary-legacy/pulls?q=is%3Apr+reviewed-by%3Ahugosolar" title="Reviewed Pull Requests">👀</a></td>
 <td align="center"><a href="https://github.com/jahnvigupta"><img src="https://avatars.githubusercontent.com/u/43217070?v=4?s=100" width="100px;" alt=""/> Jahnvi Gupta</a> <a href="#design-jahnvigupta" title="Design">🎨</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=jahnvigupta" title="Code">💻</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=jahnvigupta" title="Tests">⚠️</a></td>
 <td align="center"><a href="http://kritigodey.com"><img src="https://avatars.githubusercontent.com/u/287034?v=4?s=100" width="100px;" alt=""/> Kriti Godey</a> <a href="#projectManagement-kgodey" title="Project Management">📆</a></td>
 <td align="center"><a href="https://github.com/krysal"><img src="https://avatars.githubusercontent.com/u/9145885?v=4?s=100" width="100px;" alt=""/> Krystle Salazar</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=krysal" title="Documentation">📖</a></td>
 <td align="center"><a href="https://github.com/megha070"><img src="https://avatars.githubusercontent.com/u/40516822?v=4?s=100" width="100px;" alt=""/> Megha Varshney</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=megha070" title="Code">💻</a> <a href="#design-megha070" title="Design">🎨</a></td>
 </tr>
 <tr>
 <td align="center"><a href="https://github.com/waridrox"><img src="https://avatars.githubusercontent.com/u/58583793?v=4?s=100" width="100px;" alt=""/> Mohammad Warid</a> <a href="#infra-waridrox" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=waridrox" title="Code">💻</a></td>
 <td align="center"><a href="https://github.com/MuluhGodson"><img src="https://avatars.githubusercontent.com/u/40151808?v=4?s=100" width="100px;" alt=""/> MuluhGodson</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=MuluhGodson" title="Documentation">📖</a></td>
 <td align="center"><a href="https://nilshah98.me/"><img src="https://avatars.githubusercontent.com/u/22821480?v=4?s=100" width="100px;" alt=""/> Neel Shah</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=nilshah98" title="Code">💻</a></td>
 <td align="center"><a href="https://blackcipher101.github.io/portfolio"><img src="https://avatars.githubusercontent.com/u/33775493?v=4?s=100" width="100px;" alt=""/> Nehal Nevle</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=Blackcipher101" title="Code">💻</a></td>
 <td align="center"><a href="https://silvinabt87.github.io"><img src="https://avatars.githubusercontent.com/u/57196258?v=4?s=100" width="100px;" alt=""/> Silvina Tamburini</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=silvinabt87" title="Tests">⚠️</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=silvinabt87" title="Code">💻</a></td>
 <td align="center"><a href="https://tanuj22.github.io"><img src="https://avatars.githubusercontent.com/u/42486853?v=4?s=100" width="100px;" alt=""/> Tanuj Agarwal</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=Tanuj22" title="Documentation">📖</a></td>
 <td align="center"><a href="https://github.com/clasick"><img src="https://avatars.githubusercontent.com/u/13066221?v=4?s=100" width="100px;" alt=""/> Vignesh Kumar</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=clasick" title="Code">💻</a></td>
 </tr>
 <tr>
 <td align="center"><a href="https://kushaggarwal.github.io/me/"><img src="https://avatars.githubusercontent.com/u/44523552?v=4?s=100" width="100px;" alt=""/> kush aggarwal</a> <a href="https://github.com/creativecommons/vocabulary-legacy/commits?author=kushaggarwal" title="Code">💻</a></td>
 </tr>
</table>

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

vocabulary-legacy

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vocabulary-legacy

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README