├── .gitattributes ├── .github ├── ISSUE_TEMPLATE │ ├── submission.yaml │ └── update.yaml └── workflows │ └── update-readme.yaml ├── code-of-conduct.md ├── contributing.md ├── readme.md └── src ├── _data └── standalones.json └── readme.njk /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | readme.md merge=union 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/submission.yaml: -------------------------------------------------------------------------------- 1 | name: Submission 2 | description: You would like to add a new standalone to the project 3 | title: "Submission: " 4 | labels: ["submission"] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Thanks for your submission! Want to save us time? Follow the [contributing guide](https://github.com/davatron5000/awesome-standalones/blob/master/contributing.md) and once approved we can merge it directly in. Alternatively follow the steps below. 10 | - type: input 11 | id: name 12 | attributes: 13 | label: Name 14 | description: The name of your standalone, preferably the tag name (e.g. "play-button"). 15 | placeholder: standalone-name 16 | validations: 17 | required: true 18 | - type: dropdown 19 | id: category 20 | attributes: 21 | label: Category 22 | description: The category your standalone falls into. If you don't think it fits into any please propose a new category via a pull request. 23 | options: 24 | - extensions 25 | - time 26 | - forms 27 | - utilities 28 | - media 29 | - design 30 | - custom 31 | - novelty 32 | default: 0 33 | - type: input 34 | id: repo 35 | attributes: 36 | label: Repo 37 | description: The source code for the standalone, if it exists publically 38 | placeholder: https://github.com/daviddarnes/play-button 39 | - type: input 40 | id: url 41 | attributes: 42 | label: URL 43 | description: A main page for the standalone (homepage, post, demo, etc) 44 | placeholder: https://darn.es/play-button-web-component/ 45 | - type: input 46 | id: script 47 | attributes: 48 | label: Install script 49 | description: The advisted method of installing the standalone in a web project 50 | placeholder: npm install @daviddarnes/play-button 51 | - type: textarea 52 | id: snippet 53 | attributes: 54 | label: Snippet example 55 | description: An example snippet of HTML to demonstate how to use the component 56 | render: html 57 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/update.yaml: -------------------------------------------------------------------------------- 1 | name: Update 2 | description: You would like to update an existing standalone 3 | title: "Update: " 4 | labels: ["update"] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Want to save time? Find your standalone in [the main JSON file](https://github.com/davatron5000/awesome-standalones/blob/main/src/_data/standalones.json) and update it directly with a pull request. Don't forget to check our [contributing guide](https://github.com/davatron5000/awesome-standalones/blob/main/contributing.md). 10 | - type: input 11 | id: name 12 | attributes: 13 | label: Name 14 | description: The name of your standalone 15 | placeholder: standalone-name 16 | validations: 17 | required: true 18 | - type: dropdown 19 | id: attributes 20 | attributes: 21 | label: Attribute(s) 22 | description: The attribute(s) you'd like to change. 23 | multiple: true 24 | options: 25 | - name 26 | - category 27 | - repo 28 | - url 29 | - script 30 | - snippet 31 | validations: 32 | required: true 33 | - type: textarea 34 | id: Changes 35 | attributes: 36 | label: Changes 37 | description: The changes you'd like to make 38 | -------------------------------------------------------------------------------- /.github/workflows/update-readme.yaml: -------------------------------------------------------------------------------- 1 | name: Update readme.md 2 | 3 | on: push 4 | 5 | jobs: 6 | format-code: 7 | runs-on: ubuntu-latest 8 | 9 | permissions: 10 | # Give the default GITHUB_TOKEN write permission to commit and push the 11 | # added or changed files to the repository. 12 | contents: write 13 | 14 | steps: 15 | - uses: actions/checkout@v4 16 | with: 17 | ref: ${{ github.head_ref }} 18 | 19 | # Run eleventy to build the readme.md 20 | - run: cd src && npx @11ty/eleventy --output=../ && cd ../ 21 | 22 | # Commit all changed files back to the repository 23 | - uses: stefanzweifel/git-auto-commit-action@v5 24 | with: 25 | # Optional. Commit message for the created commit. 26 | commit_message: Update readme.md 27 | -------------------------------------------------------------------------------- /code-of-conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at rupato@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [http://contributor-covenant.org/version/1/4][version] 72 | 73 | [homepage]: http://contributor-covenant.org 74 | [version]: http://contributor-covenant.org/version/1/4/ 75 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | Please note that this project is released with a 4 | [Contributor Code of Conduct](code-of-conduct.md). By participating in this 5 | project you agree to abide by its terms. 6 | 7 | --- 8 | 9 | Ensure your pull request adheres to the following guidelines: 10 | 11 | - Items should be added like this: 12 | ```json 13 | { 14 | "name": "play-button", 15 | "category": "extension", 16 | "repo": "https://github.com/daviddarnes/play-button", 17 | "url": "https://darn.es/play-button-web-component/", 18 | "script": "npm install @daviddarnes/play-button", 19 | "snippet": "" 20 | } 21 | ``` 22 | - Items should always have a `name`, `category` and `repo` 23 | - `category` can be `custom`, `design`, `extensions`, `forms`, `media`, `novelty`, `time`, `utilities` 24 | - `url`, `script` and `snippet` are optional 25 | - If it's a significant change, please file an issue to discuss first 26 | - And don't forget to check other PRs for duplicates 27 | 28 | Thank you for your suggestions! 29 | 30 | ## Updating your PR 31 | 32 | A lot of times, making a PR adhere to the standards above can be difficult. 33 | If the maintainers notice anything that we'd like changed, we'll ask you to 34 | edit your PR before we merge it. There's no need to open a new PR, just edit 35 | the existing one. If you're not sure how to do that, 36 | [here is a guide](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) 37 | on the different ways you can update your PR so that we can merge it. 38 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Awesome Standalones [![Awesome](https://awesome.re/badge.svg)](https://awesome.re) 2 | 3 | > A curated list of **66** awesome framework-agnostic standalone web components 4 | 5 | ## Element Extensions 6 | 7 | Web Components that extend or add to an existing semantic element. 8 | 9 | - [``](https://codepen.io/levimcg/pen/ZEYapRY) 10 | - [``](https://github.com/andrico1234/autosize-textarea) 11 | - [``](https://github.com/github/details-dialog-element) 12 | - [``](https://github.com/github/details-menu-element) 13 | - [``](https://github.com/zachleat/details-utils) 14 | - [``](https://darn.es/heading-anchors-web-component) 15 | - [``](https://image-compare-component.netlify.app) 16 | - [``](https://darn.es/link-peek-web-component) 17 | - [``](https://github.com/rg-wood/link-preview) 18 | - [``](https://darn.es/play-button-web-component) 19 | - [``](https://darn.es/random-source-web-component) 20 | - [``](https://darn.es/share-button-web-component) 21 | - [``](https://stephen.band/slide-show/) 22 | - [``](https://github.com/github/tab-container-element) 23 | - [``](https://github.com/github/task-lists-element) 24 | 25 | ## `