joe/everytab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

auto open and size about page

Browse source
This commit is contained in:
Joe Lothan 2026-05-27 22:17:37 -04:00
parent bc06e79c6c
commit a60597157d
3 changed files with 30 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/about.html
View file

@ -8,7 +8,7 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 600px;
margin: 40px auto;
margin: 20px auto;
padding: 0 20px;
line-height: 1.6;
color: #333;
@ -17,7 +17,6 @@
body { background: #1c1b22; color: #fbfbfe; }
a { color: #8cb4ff; }
}
h1 { margin-bottom: 4px; }
.subtitle { color: #666; margin-bottom: 24px; }
@media (prefers-color-scheme: dark) {
.subtitle { color: #8f8f9d; }
@ -25,21 +24,16 @@
</style>
</head>
<body>
<h1>About EveryTab</h1>
<p class="subtitle">You think <i>you</i> have too many tabs open?</p>
<p>Welcome to EveryTab, a collection of every site on the web.</p>
<p>The data comes from <a href="https://commoncrawl.org">Common Crawl</a>, a free, open archive of the web. Every month, we process the latest crawl, extract website titles, download the favicons, and bundle it up into the site you see here.</p>
<p>Click on a tab to visit the site. Scroll down for more tabs. Some sites (marked with an ↗) do not allow embedding. Clicking them will open a new tab in your browser.</p>
<p>Click on a tab to visit the site and scroll down for more tabs. Some sites do not allow embedding so clicking them will open a new tab (in your browser) instead.</p>
<p>The web data come from <a href="https://commoncrawl.org">Common Crawl</a>, a free, open archive of the web. Every month, we process the latest crawl, extract website titles, download the favicons, and bundle it up into the site you see here.</p>
<p>Note that, like the web itself, some sites are broken, profane, fake news, pornographic, trying to harvest your data, serving malware, or an affront to humanity itself. But some of them are pretty cool too.</p>
<p>EveryTab just shows a random slice of the web, in all its messy and beautiful glory.</p>
<p>Enjoy!</p>
<!-- <p>For more information about the inspiration and design of this website, visit <a href="future blog post link</a>.</p> -->
<p>EveryTab just shows a random slice of the web, in all its messy and beautiful glory. Enjoy!</p>
</body>
</html>

1
frontend/index.html
View file

@ -272,6 +272,7 @@
height: 50vh;
}
/* Toolbar area (address bar) */
.iframe-toolbar {
display: flex;

37
frontend/site.js
View file

@ -124,8 +124,8 @@ function createRow(entries, rowIndex) {
row.className = "tab-row";
const pxPerSec = 15 + (rng() * 10); // 15-25 px/sec, consistent across screen sizes
const goLeft = rng() > 0.5;
const stagger = rng();
const goLeft = rowIndex === 0 ? true : rng() > 0.5;
const stagger = rowIndex === 0 ? 0 : rng();
// Store config — animation starts after DOM insertion (needs measured width)
row._animConfig = { pxPerSec, goLeft, stagger };
@ -221,8 +221,7 @@ async function loadMore() {
iframe_ok: true,
_isAbout: true,
};
const pos = Math.floor(rng() * Math.min(entries.length, tabsPerRow()));
entries.splice(pos, 0, aboutEntry);
entries.splice(0, 0, aboutEntry);
}
renderEntries(entries);
loadingEl.style.display = "none";
@ -232,8 +231,6 @@ async function loadMore() {
const aboutTab = container.querySelector(".tab-about");
if (aboutTab) {
aboutTab.click();
// Use smaller viewer for initial about page
if (activeViewer) activeViewer.classList.add("iframe-viewer-small");
}
}
}
@ -301,17 +298,18 @@ function openInlineViewer(tabEl, entry, url) {
// Build the viewer
const viewer = document.createElement("div");
viewer.className = "iframe-viewer";
const isAbout = entry._isAbout;
// Title bar
// Title bar (hidden on desktop, shown on mobile)
const titlebar = document.createElement("div");
titlebar.className = "iframe-titlebar";
titlebar.textContent = entry.title || entry.url;
viewer.appendChild(titlebar);
// Toolbar (address bar area)
const toolbar = document.createElement("div");
toolbar.className = "iframe-toolbar";
// URL bar pill
const urlbar = document.createElement("div");
urlbar.className = "iframe-urlbar";
@ -343,12 +341,27 @@ function openInlineViewer(tabEl, entry, url) {
close.addEventListener("click", closeInlineViewer);
toolbar.appendChild(close);
viewer.appendChild(toolbar);
const iframe = document.createElement("iframe");
iframe.sandbox = "allow-scripts allow-same-origin allow-forms";
iframe.src = url;
viewer.appendChild(titlebar);
viewer.appendChild(toolbar);
// About page: auto-size iframe to content height (same-origin)
if (isAbout) {
iframe.addEventListener("load", () => {
try {
const body = iframe.contentDocument.body;
const lastEl = body.lastElementChild;
const contentHeight = lastEl.offsetTop + lastEl.offsetHeight +
parseInt(getComputedStyle(body).marginTop) +
parseInt(getComputedStyle(body).marginBottom);
const chromeHeight = viewer.offsetHeight - iframe.clientHeight;
viewer.style.height = (contentHeight + chromeHeight) + "px";
} catch (e) {}
});
}
viewer.appendChild(iframe);
// Insert after the row
@ -356,8 +369,8 @@ function openInlineViewer(tabEl, entry, url) {
activeViewer = viewer;
activeRow = row;
// Scroll so the viewer is visible
viewer.scrollIntoView({ behavior: "smooth", block: "start" });
// Scroll so the tab row + viewer are visible
row.scrollIntoView({ behavior: "smooth", block: "start" });
}
function closeInlineViewer() {