Skip to content

Instantly share code, notes, and snippets.

@serverwentdown
Last active August 2, 2019 15:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save serverwentdown/38a044eb2eadbe32e21bd5a78a993845 to your computer and use it in GitHub Desktop.
Save serverwentdown/38a044eb2eadbe32e21bd5a78a993845 to your computer and use it in GitHub Desktop.
A custom template for Gitea to embed pages into tabs with an iframe. Requires the proper X-Frame-Options and Content-Security-Policy on the linked resource. The example below is how I use it for Drone. Install into data/gitea/templates/custom/extra_tabs.tmpl as described on https://docs.gitea.io/en-us/customizing-gitea/#customizing-gitea-pages
<a class="item" href="https://your.domain.here{{.RepoLink}}" data-iframe-tab="builds" title="Builds">
<i class="octicon octicon-gear"></i> <img src="https://your.domain.here/api/badges{{.RepoLink}}/status.svg?ref=refs/heads/master" style="width: auto">
</a>
<script>
document.addEventListener('DOMContentLoaded', () => {
const openFrame = (tab) => {
const name = tab.dataset.iframeTab;
const page = tab.href;
const realTabsDivider = document.querySelector('.repository .ui.tabs.divider');
realTabsDivider.style.marginBottom = '0';
const realTabs = document.querySelector('.repository .ui.tabs.container > .navbar');
for (let realTab of realTabs.children) {
realTab.classList.remove('active');
}
tab.classList.add('active');
let subtractHeight = realTabs.getBoundingClientRect().bottom;
const iframe = document.createElement('iframe');
iframe.src = page;
iframe.frameBorder = 0;
iframe.width = '100%';
iframe.height = '560';
iframe.style.height = 'calc(100vh - ' + subtractHeight + 'px)';
const container = document.querySelector('.repository > .ui.container');
container.style.width = '100%';
container.style.marginLeft = '0';
container.style.marginRight = '0';
container.innerHTML = '';
container.appendChild(iframe);
document.body.style.overflow = 'hidden';
window.location.assign('{{.RepoLink}}#' + name);
window.addEventListener('resize', () => {
subtractHeight = realTabs.getBoundingClientRect().bottom;
iframe.style.height = 'calc(100vh - ' + subtractHeight + 'px)';
});
};
const tabs = document.querySelectorAll('[data-iframe-tab]');
for (let tab of tabs) {
tab.addEventListener('click', e => {
e.preventDefault();
openFrame(tab);
});
}
const hash = window.location.hash.replace('#', '');
for (let tab of tabs) {
if (tab.dataset.iframeTab == hash) {
openFrame(tab);
break;
}
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment