GitHub Web Widget

GitHub Web Widget

Web Components library for GitHub based on WebCell

NPM Dependency CI & CD

NPM

Demo

https://tech-query.me/GitHub-Web-Widget/demo/

Components

  1. Command Line
  2. Owner Profile (forked from http://github-profile.com/)
  3. Repository (forked from jQuery GitHub Widget)
  4. Issue
  5. 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/[email protected]/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/github-markdown.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/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>
);

Generated using TypeDoc