index.html

<!-- TODO: aria stuff I guess -->

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Next PR Number - Forget guessing or checking afterhand</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Get the number the next pull request will be assigned for a public GitHub repository. Forget guessing the number or checking afterhand.">
    <meta property="og:title" content="Next PR Number">
    <meta property="og:description" content="Get the number the next pull request will be assigned for a public GitHub repository. Forget guessing the number or checking afterhand.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://ichard26.github.io/next-pr-number/">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Next PR Number">
    <meta name="twitter:description" content="Get the number the next pull request will be assigned for a public GitHub repository. Forget guessing the number or checking afterhand.">
    <link rel="canonical" href="https://ichard26.github.io/next-pr-number/">
    <link rel="icon" href="https://ichard26.github.io/favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="https://ichard26.github.io/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="https://ichard26.github.io/favicon-32x32.png">
    <script defer type="module" src="main.js"></script>
    <script defer="" data-domain="ichard26.github.io" src="https://webstats.internal.floralily.dev/js/script.js"></script>
    <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>

    <style>
      :root {
        --background-color: #f5f5f5;
        --primary-accent-color: #1e7c7f;
        --primary-dark-accent-color: #135b5e;
        --primary-light-accent-color: #69c4c7;
        --disabled-accent-color: darkslategray;
        --error-color: #c70101;
        --admonition-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzIDloLTJWN2gybTAgMTBoLTJ2LTZoMm0tMS05QTEwIDEwIDAgMCAwIDIgMTJhMTAgMTAgMCAwIDAgMTAgMTAgMTAgMTAgMCAwIDAgMTAtMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48L3N2Zz4K");
      }

      html, body {
        width: 100%;
        height: 100%;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
      }

      body {
        display: flex;
        box-sizing: border-box;
        max-width: 330px;
        padding: 40px 20px 5px 20px;
        margin: 0 auto 0 auto;
        flex-direction: column;
        background-color: var(--background-color);
      }

      a {
        color: var(--primary-accent-color);
      }

      /* For browsers that don't recognize <output> */
      output {
        display: block;
      }

      .admonition {
        /* The containing container for .admonition-header::before will be the root viewport if
         * position is set to static here. The containing container is important as it
         * determines where the right/left/top/bottom offset starts from for absolutely
         * positioned elements. */
        position: relative;
        border-radius: 0.2rem;
        overflow: hidden;
        box-shadow: 0 0.2rem 0.5rem rgb(0 0 0 / 5%), 0 0 0.0625rem rgb(0 0 0 / 10%);
        font-size: 0.85rem;
      }

      .admonition-header {
        margin: 0;
        padding: 0.5rem;
        /* Give some extra room for the icon (since normal document flow isn't being used for
         * it). */
        padding-left: 2rem;
        background-color: var(--primary-accent-color);
        color: white;
        font-weight: bold;
      }

      .admonition-header::before {
        /* Apparently this is necessary so content (or mask-image) works. *shrug* */
        display: block;
        /* We need to pretend there is content and give this pseudo element some area so
         * mask-image works. */
        width: 1rem;
        height: 1rem;
        content: '';
        /* To position the icon correctly, we need to avoid using normal document flow since
         * that would put this pseudo on its own line (due to display: block). */
        position: absolute;
        left: 0.5rem;
        /* ... and now for the actual icon, gosh that took a lot of preamble. */
        background-color: white;
        -webkit-mask-image: var(--admonition-icon);
        mask-image: var(--admonition-icon);
      }

      .admonition-body {
        margin: 0.7rem;
      }

      h1, h2, .repo-input, .get-button, .output-text-container, footer {
        padding: 10px 15px;
        margin: auto;
        box-sizing: border-box;
        text-align: center;
      }

      h2 {
        font-size: 1.3rem;
        font-weight: 400;
      }

      .input-form {
        padding: 15px 0;
      }

      .repo-input, .get-button {
        width: 100%;
        border: 2px solid var(--primary-accent-color);
        font-size: 1rem;
      }

      .repo-input {
        border-bottom-width: 1px;
      }

      .repo-input:read-only, .get-button:disabled {
        transition: filter 300ms, border-color 300ms, color 300ms;
        filter: grayscale(80%);
        border-color: var(--disabled-accent-color);
      }

      .repo-input:read-only {
        color: var(--disabled-accent-color);
        border-bottom: none;
      }

      .get-button {
        background-color: var(--primary-accent-color);
        color: white;
        border-top-width: 1px;
      }

      .get-button:hover:enabled {
        transition: background-color 250ms;
        background-color: var(--primary-dark-accent-color);
      }

      .get-button:active {
        transition: background-color 50ms;
        background-color: var(--primary-light-accent-color);
      }

      .output-text-container p {
        margin-top: 0;
      }

      .result-text {
        font-size: 1.4rem;
        color: var(--primary-accent-color);
      }

      footer {
        margin-top: auto;
        margin-bottom: 0;
        font-size: 0.85rem;
      }

      footer p {
        margin: 3px;
      }

      #tip-admonition {
        position: absolute;
        top: 15px;
        left: 15px;
        /* Using clamp so it doesn't look stupid on super wide screens. */
        width: clamp(200px, 22vw, 400px);
      }

      /* I really don't wanna make the admonition mobile friendly so let's hide it */
      @media (max-width: 900px) {
        #tip-admonition {
          display: none;
        }
      }

      .error {
        color: var(--error-color);
      }
    </style>
  </head>

  <body>
    <main>
      <h1>Next PR Number</h1>
      <h2>Get the number the next pull request will be assigned with for a public GitHub repository.</h2>
      <div class="input-form">
        <input class="repo-input" placeholder="{owner}/{name} or GitHub URL" type="text" autocapitalize="off" autofocus>
        <button class="get-button">Get</button>
      </div>
      <div class="output-text-container">
        <i><p class="working-status-text"></p></i>
        <output class="result-text"></output>
      </div>
    </main>
    <footer>
      <p>
        Design inspired by
        <a href="https://github.com/Mariatta/check_python_cla">Mariatta's Check Python CLA</a>
      </p>
      <hr>
      <p>© 2023
        <a href="https://ichard26.github.io/">Richard Si</a>
        -
        <a href="https://github.com/ichard26/next-pr-number">Source</a>
        -
        <a href="https://ichard26.github.io/privacy/">Privacy</a>
      </p>
    </footer>
    <div id="tip-admonition" class="admonition">
      <p class="admonition-header">Tip!</p>
      <p class="admonition-body">You can use URL query parameters to prefill the repository. For example:
        <a href="https://ichard26.github.io/next-pr-number/?owner=ichard26&amp;name=next-pr-number" target="_blank">
          ichard26.github.io/next-pr-number/?owner=ichard26&amp;name=next-pr-number
        </a>
      </p>
    <div>
  </body>

</html>