/github-issue-widget

:railway_track: GitHub Issue Widget bring your issue tracking to your website.

Primary LanguageHTMLMIT LicenseMIT

Currently work in progress! Please do not use productively.

  • Receive Token (CORS PROBLEM)
  • Check Cookie, if User already logedin
  • Integrate Oktokit.js
  • Integrate GitHub Form Schema HTML
  • Submit Issue
  • Define Readme

GitHub Issue Widget

npm version npm downloads License

GitHub Issue Widget for your Website

Features

GitHub Issue Widget bring your issue tracking to your website.

Setup

yarn add github-issue-widget # yarn
npm i github-issue-widget # npm
  1. Create your own GitHub OAuth App (https://github.com/settings/developers)
    1. Application name: name of the website (Issue Widget (Example))
    2. Homepage URL: url of the page in which the widget was integrated (https://127.0.0.1:5173)
    3. Authorization callback URL: url of the page in which the widget was integrated (https://127.0.0.1:5173/example/index.html)
  2. Generate a new client secret
  3. Copy client id and client secret

Basic usage

<div id="widget"></div>
import 'github-issue-widget/dist/style.css';
import { GitHubIssueWidget } from 'github-issue-widget';

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('widget').innerHTML = new GitHubIssueWidget({
    owner: 'JonathanSchndr',
    repository: 'github-issue-widget',
    branch: 'main',
    issueSchemaPath: '.github/ISSUE_TEMPLATE/bug_report.yml',
    appClientId: '',
    appClientSecret: '',
  }).render();
})

Development

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Change vite.confg.js to mode:'development' / minify:false / sourcemap:true
  4. Start development server using yarn dev && yarn build:watch or npm run dev && npm run build:watch

License

Copyright (c) 2022 Jonathan Schneider MIT License