path: root/web/cgit-extra.html

<script src="https://networkheaven.net/highlight.min.js" async></script>
<link rel="stylesheet" href="https://networkheaven.net/static/highlight.css" type="text/css" />
<script>

function repoPathFromLink( a ) {
  const href = new URL( a.getAttribute( "href" ), location.href );
  let p = href.pathname;
  if( !p.startsWith( "/" ) ) return null;
  p = p.slice( 1 );
  p = p.replace( /\/+$/, "" );
  if( !p ) return null;
  return p;
}

function branchFromForm() {
  const formWrap = document.querySelector( ".form" );
  const form = formWrap.querySelector( "form" );

  const branchEl = form.querySelector( "select" );
  if( !branchEl )
    return "";

  const branch = branchEl.value;
  if( !branch )
    return "";

  return branch;
}

async function getFile( repo, branch, file ) {
  try {
    const res = await fetch( `https://${location.host}/${repo}/plain/${file}` );
    if( !res.ok || !res.headers.get( "Content-Type" ).toLowerCase().startsWith( "text/plain" ) )
      return null;
    return await res.text();
  } catch( e ) {
    return null;
  }
}

function isWhiteChar( char ) {
  return char === " " || char === "\t" || char === "\n" || char === "\r";
}

function removeTrailingWhiteSpace( text ) {
  while( text.length > 1
    && isWhiteChar( text[text.length - 1] )
    && isWhiteChar( text[text.length - 2] )
  ) {
    text = text.slice( 0, -1 );
  }
  return text;
}

async function getReadmeFile( repo, branch ) {
  let file = await getFile( repo, branch, "README.md" );
  if( file )
    return { file: removeTrailingWhiteSpace( file ), isMd: true };

  file = await getFile( repo, branch, "README" );
  if( file )
    return { file: removeTrailingWhiteSpace( file ), isMd: false };

  return null;
}

function isIndex( repo ) {
  let path = location.pathname;
  return path.replaceAll( "/", "" ) === repo;
}

function parseLink( text, start ) {
  let isImg = 0;

  const open = text.indexOf( "[", start );
  if( open === -1 ) return null;
  const close = text.indexOf( "]", open );
  if( close === -1 ) return null;

  const lopen = close + 1;
  if( text[lopen] != '(' ) return { continue: true, end: lopen };
  const lclose = text.indexOf( ")", lopen );
  if( lclose === -1 ) return { continue: true, end: lopen };

  const title = text.substring( open + 1, close );
  const link = text.substring( lopen + 1, lclose );

  if( open > 0 && text[open-1] == "!" ) isImg = 1;
  return { title, link, start: open - (isImg?1:0), end: lclose + 1, img: isImg };
}

function parseLinks( text ) {
  let   start = 0;
  const links = [];

  while( true ) {
    const res = parseLink( text, start );
    if( !res )
      break;

    if( res.continue ) {
      start = res.end + 1;
      continue;
    }

    links.push( res );
    start = res.end + 1;
  }

  return links;
}

function replaceLinks( text, links ) {
  let offset = 0;
  for( let link of links ) {
    const start = link.start + offset;
    const end = link.end + offset;

    const textFirst = text.slice( 0, start );
    const textSecond = text.slice( end );

    let textMid = "";
    if( link.img ) {
      textMid = `<img src="${link.link}" alt="${link.title}" />`;
    } else {
      textMid = `<a href="${link.link}">${link.title}</a>`;
    }

    text = textFirst + textMid + textSecond;
    offset += textMid.length - ( link.end - link.start );
  }

  return text;
}

function escapeHtml( html ) {
  const entityMap = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;',
    '/': '&#x2F;',
    '`': '&#x60;',
    '=': '&#x3D;'
  };

  return String( html ).replace( /[&<>"'`=\/]/g, ( s, i, str ) => {
    if( str.slice( i, i + 6 ).toLowerCase() === "<code>" ) return "<";
    if( s === '<' ) {
      if( str.slice( i, i + 6 ).toLowerCase() === "<code>"
        || str.slice( i, i + 7 ).toLowerCase() === "</code>" ) {
        return "<";
      }
    }

    if( s === '>' ) {
      if( str.slice( i - 5, i + 1 ).toLowerCase() === "<code>"
        || str.slice( i - 6, i + 1 ).toLowerCase() === "</code>" ) {
        return ">";
      }
    }

    if( s === '/' ) {
      if( str.slice( i - 1, i + 6 ).toLowerCase() === "</code>" ) {
        return "/";
      }
    }

    return entityMap[s];
  });
}

function replaceCodeTicks( text ) {
  let inBlock = 0;
  let tick = text.indexOf( "```" );
  while( tick != -1 ) {
    if( !inBlock ) {
      let second = text.slice( tick + 3 );
      while( isWhiteChar( second[0] ) )
        second = second.slice( 1 );
      text = text.slice( 0, tick ) + "<code>" + second;
      tick = text.indexOf( "```", tick );
    } else {
      let second = text.slice( tick + 3 );
      while( second.length > 1 && isWhiteChar( second[0] ) && isWhiteChar( second[1] ) )
        second = second.slice( 1 );
      text = text.slice( 0, tick ) + "</code>" + second;
      tick = text.indexOf( "```", tick );
    }
    inBlock = !inBlock;
  }

  return escapeHtml( text );
}

function runHighlight() {
  if( typeof( hljs )  === 'undefined' || !hljs )
    return setTimeout( runHighlight, 200 );

  hljs.highlightAll();
}


function createReadme( text, isMd ) {
  const tr = document.createElement( "tr" );
  const td = document.createElement( "td" );
  const pre = document.createElement( "pre" );
  tr.appendChild( td );
  td.appendChild( pre );
  td.setAttribute( "colspan", "4" );
  if( !isMd )
    pre.innerHTML = text;
  else {
    const noTicks = replaceCodeTicks( text );
    const links = parseLinks( noTicks );
    pre.innerHTML = replaceLinks( noTicks, links );
  }

  pre.style.whiteSpace = "pre-wrap";
  pre.style.fontFamily = "JPN12";
  pre.style.padding = 0;
  pre.style.marginTop = "0px";
  pre.style.marginBottom = "0px";
  tr.classList.add( "nohover" );
  tr.style.backgroundColor = "#808080"
  const list = document.querySelector( ".list" );
  const tbody = list.querySelector( "tbody" );

  let insertTarget = tbody.children[3];
  for( let i = 2; i < tbody.children.length; ++i ) {
    if( tbody.children[i-1].classList.contains( "nohover" ) ) {
      insertTarget = tbody.children[i];
      break;
    }
  }

  tbody.insertBefore( tr, insertTarget );

  const th = document.createElement( "th" );
  th.classList.add( "left" );
  th.setAttribute( "colspan", "4" );
  th.innerHTML = "Readme";
  tbody.insertBefore( th, tr );

  setTimeout( runHighlight );
}

function isCodeView( repo ) {
  return location.pathname.includes( `/${repo}/tree` );
}

function isMainPage() {
  return location.pathname === "/";
}

async function getActivityData( days ) {
  const response = await fetch( "https://networkheaven.net/git-access.log" );
  const data = await response.text();
  const ret = new Array( days ).fill( 0 );
  let highest = 0;

  const now = new Date();
  let start = data.length - 1;
  let line = '';
  for( let i = data.length - 1; i >= 0; --i ) {
    if( i != 0 && data[i] != '\n' )
      continue;

    line = data.substring( i, start );
    start = i;
    if( !line.length )
      continue;

    const date = new Date( parseInt( line ) * 1000 );
    const delta = Math.floor( ( now - date ) / 1000 / 60 / 60 / 24 );
    if( delta > days )
      break;

    ret[delta] += 1;
    if( ret[delta] > highest )
      highest = ret[delta];
  }

  return { values: ret, highest };
}

let spinnerFrame = 0;
const spinnerFrames = [
  '/',
  '-',
  '\\',
  '|',
];

function doSpinner() {
  if( spinnerFrame >= spinnerFrames.length )
    spinnerFrame = 0;
  const frame = spinnerFrames[spinnerFrame];
  const spinners = document.querySelectorAll( ".spinner" );
  if( !spinners.length )
    return;
  for( const el of spinners )
    el.innerText = frame;
  spinnerFrame++;
  setTimeout( doSpinner, 150 );
}

function createActivityContainer() {
  const wrapper = document.createElement( "div" );
  wrapper.classList.add( "activity-outer" );

  const title = document.createElement( "h2" );
  title.classList.add( "activity-title" );
  title.textContent = "Activity";
  wrapper.appendChild( title );

  const hr = document.createElement( "hr" );
  hr.classList.add( "activity-hr" );
  wrapper.appendChild( hr );

  const inner = document.createElement( "div" );
  inner.classList.add( "activity-inner" );
  wrapper.appendChild( inner );

  const table = document.createElement( "table" );
  table.classList.add( "activity-table" );
  inner.appendChild( table );

  const spinner = document.createElement( "div" );
  spinner.classList.add( "spinner" );
  spinner.innerText = "-";
  inner.appendChild( spinner );
  setTimeout( doSpinner, 150 );

  const content = document.querySelector( ".content" );
  content.appendChild( wrapper );
}

function getActivityColor( commits, highest ) {
  if( !commits ) return null;

  let percent = commits / highest;
  let color = [
    255 * (1.0 - percent),
    255 * percent,
    255
  ];

  return `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
}

async function createActivityGraph() {
  const date = new Date();
  let weekday = date.getDay();
  // christ is king
  if( weekday == 0 ) weekday = 6;
  else weekday -= 1;

  const activity = await getActivityData( 365 + weekday );
  const table = document.querySelector( ".activity-table" );

  let row = document.createElement( "tr" );
  table.appendChild( row );
  let rowc = 0;
  let colc = 0;
  for( let i = 0; i < 365 + weekday; ++i ) {
    const day = 364 + weekday - i;
    const commits = activity.values[day];
    const acol = getActivityColor( commits, activity.highest );
    const cell = document.createElement( "td" );
    cell.classList.add( "activity-cell-" + day );
    if( acol )
      cell.style.backgroundColor = acol;

    const popup = document.createElement( "div" );
    popup.classList.add( "popup" );
    if( i > 20 ) popup.classList.add( "right" );
    const dateStr = new Date( (new Date()) - day * 24 * 60 * 60 * 1000 ).toLocaleDateString();
    popup.innerText = `${dateStr}\n${commits} commits`;

    cell.appendChild( popup );
    row.appendChild( cell );
  }

  const wrapper = document.querySelector( ".activity-outer" );
  const spinner = wrapper.querySelector( ".spinner" );
  if( spinner )
    spinner.remove();
}

const main = async () => {
  if( isMainPage() ) {
    if( document.querySelector( ".content" ) == null )
      return setTimeout( main, 1 );
    createActivityContainer();
    return setTimeout( createActivityGraph );
  }

  const mainEl = document.querySelector( ".main" );
  if( !mainEl )
    return;

  const repoEl = mainEl.querySelectorAll( "a" )[1];
  if( !repoEl )
    return;

  const repo = repoPathFromLink( repoEl );
  if( !repo )
    return;

  if( isCodeView( repo ) )
    return setTimeout( runHighlight );

  if( !isIndex( repo ) )
    return;

  const branch = branchFromForm();
  const { file, isMd } = await getReadmeFile( repo, branch );
  createReadme( file, isMd );
}

setTimeout( main );
</script>