Last active
June 24, 2024 07:46
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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
Very nice, if you are still using Gitea 5 years later, would you say this remains the best way to document or reference part of syntax highlighted code?