Options
All
  • Public
  • Public/Protected
  • All
Menu

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

npm install github-web-widget

source/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Your Blog</title>
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/github-markdown.min.css"
        />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-okaidia.css"
        />
        <script
            crossorigin
            src="https://polyfill.app/api/polyfill?features=es.string.match-all,es.array.flat,es.object.from-entries,intersection-observer"
        ></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/details-element-polyfill.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
    </head>
    <body>
        <script src="index.tsx"></script>
    </body>
</html>

source/index.tsx

import { render, createCell } from 'web-cell';
import {
    CommandLine,
    GithubRepository,
    GithubIssue,
    GithubProfile,
    GithubEvents
} from 'github-web-widget/source';

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