Github-web-widget NPM

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>
);

github web component web-cell widget

dom-renderer koajax marked mobx prismjs web-cell

@everything-registry/sub-chunk-1766 @zalastax/nolb-github-w

3 months ago

4 months ago

4 months ago

3 years ago