fix: fixed readmes and such

.all-contributorsrc

@@ -5,7 +5,7 @@
 	"repoHost": "https://github.com",
 	"files": ["README.md", "packages/core/README.md", "packages/react/README.md"],
 	"imageSize": 100,
-	"commit": false,
+	"commit": true,
 	"commitConvention": "angular",
 	"contributors": [
 		{
@@ -14,6 +14,20 @@
 			"avatar_url": "https://avatars3.githubusercontent.com/u/4019718?v=4",
 			"profile": "https://favware.tech/",
 			"contributions": ["code", "doc", "example", "projectManagement"]
+		},
+		{
+			"login": "depfu[bot]",
+			"name": "depfu[bot]",
+			"avatar_url": "https://avatars.githubusercontent.com/in/715?v=4",
+			"profile": "https://github.com/apps/depfu",
+			"contributions": ["maintenance"]
+		},
+		{
+			"login": "dependabot[bot]",
+			"name": "dependabot[bot]",
+			"avatar_url": "https://avatars.githubusercontent.com/in/29110?v=4",
+			"profile": "https://github.com/apps/dependabot",
+			"contributions": ["maintenance"]
 		}
 	],
 	"contributorsPerLine": 7

.github/CODEOWNERS

@@ -1 +1 @@
-/packages/ @favna
+* @favna

.github/FUNDING.yml

@@ -3,6 +3,6 @@
 github: [kyranet, favna]
 patreon: kyranet
 open_collective: # Replace with a single Open Collective username
-ko_fi: # Replace with a single Ko-fi username
+ko_fi: kyranet
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-custom: # Replace with a single custom sponsorship URL
+custom: ['https://donate.skyra.pw/paypal', 'https://donate.favware.tech/paypal']

.github/dependabot.yml

@@ -0,0 +1,11 @@
+version: 2
+updates:
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+      day: 'sunday'
+      time: '12:00'
+    labels:
+      - 'Meta: Dependencies'
+      - 'Meta: Github'

.github/workflows/lint.yml → .github/workflows/continuous-integration.yml

@@ -1,4 +1,4 @@
-name: Lint
+name: Continuous Integration
 
 on:
   push:
@@ -30,24 +30,46 @@ jobs:
     outputs:
       commit_message: $( [ -z "${{ steps.pr_get_commit_message.outputs.pr_commit_message }}" ] && echo "${{ steps.push_get_commit_message.outputs.push_commit_message }}" || echo "${{ steps.pr_get_commit_message.outputs.pr_commit_message }}" )
 
-  eslint:
-    name: eslint
+  Linting:
+    name: Linting
     runs-on: ubuntu-latest
     if: "!contains(needs.pre_ci.outputs.commit_message, '[skip ci]')"
     needs: pre_ci
     steps:
       - name: Checkout Project
         uses: actions/checkout@v2
-      - name: Install NodeJS v12
+      - name: Use Node.js 14
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 14
       - name: Restore CI Cache
         uses: actions/cache@v1
         with:
           path: node_modules
-          key: ${{ runner.os }}-12-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-14-${{ hashFiles('**/yarn.lock') }}
       - name: Install Dependencies
         run: yarn --ignore-scripts --frozen-lockfile
       - name: Run ESLint
         run: yarn lint --fix=false
+
+  Building:
+    name: Compile source code
+    runs-on: ubuntu-latest
+    if: "!contains(needs.pre_ci.outputs.commit_message, '[skip ci]')"
+    needs: pre_ci
+    steps:
+      - name: Checkout Project
+        uses: actions/checkout@v2
+      - name: Use Node.js 14
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - name: Restore CI Cache
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-14-${{ hashFiles('**/yarn.lock') }}
+      - name: Install Dependencies
+        run: yarn --ignore-scripts --frozen-lockfile
+      - name: Build Code
+        run: yarn build

README.md

@@ -1,26 +1,41 @@
 <div align="center">
-<p>
-<h1> Discord Components </h1>
-<h3> Fake Discord messages for the web </h3>
-</p>
-<p>
-	<a href="https://github.com/skyra-project/discord-components/blob/main/LICENSE.md">
-	<img src="https://img.shields.io/github/license/skyra-project/discord-components?logo=github&maxAge=3600&style=flat-square" alt="NPM version" />
-	</a>
-</p>
-
-<a href="https://depfu.com/github/skyra-project/discord-components?project_id=11733">
-<img src="https://badges.depfu.com/badges/2be62b7690111eea9aef95f7c8ca07fa/count.svg" alt="Depfu" />
-</a>
-
-<a href="https://donate.skyra.pw/patreon">
-<img src="https://img.shields.io/badge/donate-patreon-F96854.svg?logo=patreon" alt="Patreon" />
-</a>
+
+# Discord Components
+
+**Fake Discord messages for the web**
+
+[![License](https://img.shields.io/github/license/skyra-project/discord-components?logo=github&maxAge=3600&style=flat-square)](https://github.com/skyra-project/discord-components/blob/main/LICENSE.md)
+[![Depfu](https://badges.depfu.com/badges/2be62b7690111eea9aef95f7c8ca07fa/count.svg)](https://depfu.com/github/skyra-project/discord-components?project_id=11733)
+[![Patreon](https://img.shields.io/badge/donate-patreon-F96854.svg?logo=patreon)](https://donate.skyra.pw/patreon)
+
+[![npm](https://img.shields.io/npm/v/@skyra/discord-components-core?color=crimson&logo=npm&style=flat-square&label=@skyra/discord-components-core)](https://www.npmjs.com/package/@skyra/discord-components-core)
+[![npm](https://img.shields.io/npm/v/@skyra/discord-components-react?color=crimson&logo=npm&style=flat-square&label=@skyra/discord-components-react)](https://www.npmjs.com/package/@skyra/discord-components-react)
+
+[![Support Server](https://discord.com/api/guilds/254360814063058944/embed.png?style=banner2)](https://website.sapphire-project.vercel.app/discord)
+
 </div>
 
+---
+
+**_Table of Contents_**
+
+-   [Discord Components](#discord-components)
+    -   [Description](#description)
+    -   [Features](#features)
+    -   [Demos](#demos)
+        -   [Angular](#angular)
+        -   [React](#react)
+        -   [Vue](#vue)
+    -   [Screenshots](#screenshots)
+        -   [Dark Mode](#dark-mode)
+        -   [Light Mode](#light-mode)
+    -   [Contributors ✨](#contributors-%E2%9C%A8)
+
+## Description
+
 Discord message components to easily build and display fake Discord messages on your webpage.
 
-**This is an adoptation of [wc-discord-message] from [Danktuary]**
+**This is an adaptation of [wc-discord-message] from [Danktuary]**
 
 ## Features
 
@@ -31,9 +46,50 @@ Discord message components to easily build and display fake Discord messages on
 -   Display fake user, role, and channel mentions
 -   Complete embed support
 -   Simple syntax!
--   Available as WebComponents and ReactComponents
 
-Check out the [live demo](https://skyra-discord-components.netlify.app/) for further examples.
+## Demos
+
+### Angular
+
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/discord-components-angular-0xz0z)
+
+### React
+
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/discord-components-react-64k90)
+
+### Vue
+
+[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/discord-components-vue-g1w48)
+
+## Screenshots
+
+### Dark Mode
+
+**_A normal conversation_**
+
+![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/dark_mode/normal_conversation.png)
+
+**_Compact mode_**
+
+![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/dark_mode/compact_mode.png)
+
+**_With an embed_**
+
+![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/dark_mode/with_embed.png)
+
+### Light Mode
+
+**_A normal conversation_**
+
+![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/light_mode/normal_conversation.png)
+
+**_Compact mode_**
+
+![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/light_mode/compact_mode.png)
+
+**_With an embed_**
+
+![](https://raw.githubusercontent.com/skyra-project/discord-components/main/assets/light_mode/with_embed.png)
 
 ## Contributors ✨
 
@@ -45,10 +101,12 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <table>
   <tr>
     <td align="center"><a href="https://favware.tech/"><img src="https://avatars3.githubusercontent.com/u/4019718?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jeroen Claassens</b></sub></a><br /><a href="https://github.com/skyra-project/discord-components/commits?author=Favna" title="Code">💻</a> <a href="https://github.com/skyra-project/discord-components/commits?author=Favna" title="Documentation">📖</a> <a href="#example-Favna" title="Examples">💡</a> <a href="#projectManagement-Favna" title="Project Management">📆</a></td>
+    <td align="center"><a href="https://github.com/apps/depfu"><img src="https://avatars.githubusercontent.com/in/715?v=4?s=100" width="100px;" alt=""/><br /><sub><b>depfu[bot]</b></sub></a><br /><a href="#maintenance-depfu[bot]" title="Maintenance">🚧</a></td>
+    <td align="center"><a href="https://github.com/apps/dependabot"><img src="https://avatars.githubusercontent.com/in/29110?v=4?s=100" width="100px;" alt=""/><br /><sub><b>dependabot[bot]</b></sub></a><br /><a href="#maintenance-dependabot[bot]" title="Maintenance">🚧</a></td>
   </tr>
 </table>
 
-<!-- markdownlint-enable -->
+<!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->

package.json

@@ -23,15 +23,15 @@
 		"@commitlint/config-conventional": "^12.0.1",
 		"@rollup/plugin-commonjs": "^17.1.0",
 		"@rollup/plugin-node-resolve": "^11.2.0",
-		"@sapphire/eslint-config": "^3.0.1",
-		"@sapphire/prettier-config": "^1.0.7",
-		"@sapphire/ts-config": "^2.0.1",
+		"@sapphire/eslint-config": "^3.0.2",
+		"@sapphire/prettier-config": "^1.0.8",
+		"@sapphire/ts-config": "^2.1.0",
 		"@stencil/react-output-target": "^0.0.9",
-		"@types/node": "^14.14.31",
+		"@types/node": "^14.14.35",
 		"@types/react": "17.0.3",
 		"@types/react-dom": "17.0.2",
-		"@typescript-eslint/eslint-plugin": "^4.17.0",
-		"@typescript-eslint/parser": "^4.17.0",
+		"@typescript-eslint/eslint-plugin": "^4.18.0",
+		"@typescript-eslint/parser": "^4.18.0",
 		"cz-conventional-changelog": "^3.3.0",
 		"eslint": "^7.22.0",
 		"eslint-config-prettier": "^8.1.0",
@@ -49,7 +49,7 @@
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.40.0",
+		"rollup": "^2.42.0",
 		"rollup-plugin-cleaner": "^1.0.0",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-terser": "^7.0.2",
@@ -71,7 +71,7 @@
 		}
 	},
 	"resolutions": {
-		"acorn": "^8.0.5",
+		"acorn": "^8.1.0",
 		"minimist": "^1.2.5",
 		"kind-of": "^6.0.3",
 		"dot-prop": "^6.0.1"