GitHub Web Widget
Web Components library for GitHub based on WebCell
Demo
https://tech-query.me/GitHub-Web-Widget/demo/
Components
- Command Line
- Owner Profile (forked from http://github-profile.com/)
- Repository (forked from jQuery GitHub Widget)
- Issue
- Event Flow
Usage
Installation
npm install dom-renderer web-cell github-web-widget
npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
package.json
{
"scripts": {
"start": "parcel source/index.html --open",
"build": "parcel build source/index.html --public-url ."
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "ES2020",
"moduleResolution": "Node",
"useDefineForClassFields": true,
"jsx": "react-jsx",
"jsxImportSource": "dom-renderer"
}
}
.parcelrc
{
"extends": "@parcel/config-default",
"transformers": {
"*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
}
}
source/index.html
<!doctype html>
<html>
<head>
<title>Your Blog</title>
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/github-markdown-css@5.5.0/github-markdown.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/prismjs@1.29.0/themes/prism-okaidia.css"
/>
<script src="https://polyfill.web-cell.dev/feature/ECMAScript.js"></script>
<script src="https://polyfill.web-cell.dev/feature/WebComponents.js"></script>
<script src="https://polyfill.web-cell.dev/feature/ElementInternals.js"></script>
<script src="https://polyfill.web-cell.dev/feature/Detail.js"></script>
</head>
<body>
<script type="module" src="index.tsx"></script>
</body>
</html>
source/index.tsx
import { DOMRenderer } from 'dom-renderer';
import {
CommandLine,
GithubRepository,
GithubIssue,
GithubProfile,
GithubEvents
} from 'github-web-widget';
new DOMRenderer().render(
<main className="container">
<h1>GitHub Web Widget</h1>
<section>
<h2>Command Line</h2>
<CommandLine>npm install github-web-widget</CommandLine>
</section>
<section>
<h2>Repository</h2>
<GithubRepository owner="EasyWebApp" repository="WebCell" />
</section>
<section>
<h2>Issue</h2>
<GithubIssue
owner="jsdom"
repository="w3c-xmlserializer"
issue="2"
/>
</section>
<section>
<h2>Profile</h2>
<GithubProfile user="TechQuery" />
</section>
<section>
<h2>Event Flow</h2>
<GithubEvents />
</section>
</main>
);