☰

Pages to GitHub

Access the GitHub profile from *.github.io site

// ==UserScript==
// @name         Pages to GitHub
// @namespace    https://greatest.deepsurf.us/en/scripts/534709-pages-to-github
// @version      0.1.5
// @description  Access the GitHub profile from *.github.io site
// @author       Super Lee (https://github.com/superpung)
// @license      MIT
// @homepageURL  https://github.com/superpung/pages2github
// @supportURL   https://github.com/superpung/pages2github
// @match        *://*.github.io/*
// @icon         https://pages.github.com/favicon.ico
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  const host = window.location.hostname;
  const match = host.match(/^([a-zA-Z0-9-]+)\.github\.io$/);
  if (!match || !match[1]) return;

  if (window.top !== window.self) return;

  const username = match[1];
  const githubUrl = `https://github.com/${username}`;

  const style = document.createElement('style');
  style.textContent = `
  .gh-float-button {
    position: fixed;
    top: 20px;
    right: 0;
    z-index: 9999;
    background-color: #24292e;
    padding: 10px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    font-size: 14px;
    line-height: 1;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: translateX(calc(100% - 38px));
  }
  .gh-float-button:hover {
    transform: translateX(0);
  }
  .gh-float-button svg {
    height: 18px;
    width: 18px;
    flex-shrink: 0;
    margin-left: 0;
    margin-right: 6px;
  }
  .gh-float-button svg path {
    fill: white;
  }
  .gh-username {
    opacity: 0;
    color: white;
    transition: opacity 0.3s ease;
    white-space: nowrap;
  }
  .gh-float-button:hover .gh-username {
    opacity: 1;
  }
  `;
  document.head.appendChild(style);

  const button = document.createElement('div');
  button.className = 'gh-float-button';
  button.innerHTML = `
    <svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4.0275 0 0 4.12937 0 9.22764C0 13.3109 2.57625 16.7597 6.15375 17.9824C6.60375 18.0631 6.7725 17.7863 6.7725 17.5441C6.7725 17.3249 6.76125 16.5982 6.76125 15.8254C4.5 16.2522 3.915 15.2602 3.735 14.7412C3.63375 14.4759 3.195 13.6569 2.8125 13.4378C2.4975 13.2647 2.0475 12.838 2.80125 12.8264C3.51 12.8149 4.01625 13.4954 4.185 13.7723C4.995 15.1679 6.28875 14.7758 6.80625 14.5335C6.885 13.9337 7.12125 13.53 7.38 13.2993C5.3775 13.0687 3.285 12.2728 3.285 8.74319C3.285 7.73969 3.63375 6.9092 4.2075 6.26326C4.1175 6.03257 3.8025 5.08674 4.2975 3.81794C4.2975 3.81794 5.05125 3.57571 6.7725 4.76377C7.4925 4.55615 8.2575 4.45234 9.0225 4.45234C9.7875 4.45234 10.5525 4.55615 11.2725 4.76377C12.9938 3.56418 13.7475 3.81794 13.7475 3.81794C14.2425 5.08674 13.9275 6.03257 13.8375 6.26326C14.4113 6.9092 14.76 7.72815 14.76 8.74319C14.76 12.2843 12.6563 13.0687 10.6538 13.2993C10.98 13.5877 11.2613 14.1414 11.2613 15.0065C11.2613 16.2407 11.25 17.2326 11.25 17.5441C11.25 17.7863 11.4188 18.0746 11.8688 17.9824C15.4238 16.7597 18 13.2993 18 9.22764C18 4.12937 13.9725 0 9 0Z"/>
    </svg>

    <span class="gh-username">@${username}</span>
  `;
  button.onclick = () => {
    window.open(githubUrl, '_blank');
  };

  document.body.appendChild(button);
})();