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

Compare commits

base: joe:b5787fae94fb289061636012ce7a756884b2fa06
Branches Tags
joe:main
...
compare: joe:a60597157d04c36b378b769a9b76f31fe39fb0c1
Branches Tags
joe:main

2 commits
b5787fae94 ... a60597157d

Author SHA1 Message Date
Joe Lothan
a60597157d auto open and size about page 2026-05-27 22:17:37 -04:00
Joe Lothan
bc06e79c6c fix horizontal scroll on mobile 2026-05-27 20:48:06 -04:00
3 changed files with 34 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/about.html
View file

@ -8,7 +8,7 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 600px; max-width: 600px;
margin: 40px auto; margin: 20px auto;
padding: 0 20px; padding: 0 20px;
line-height: 1.6; line-height: 1.6;
color: #333; color: #333;
@ -17,7 +17,6 @@
body { background: #1c1b22; color: #fbfbfe; } body { background: #1c1b22; color: #fbfbfe; }
a { color: #8cb4ff; } a { color: #8cb4ff; }
} }
h1 { margin-bottom: 4px; }
.subtitle { color: #666; margin-bottom: 24px; } .subtitle { color: #666; margin-bottom: 24px; }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.subtitle { color: #8f8f9d; } .subtitle { color: #8f8f9d; }
@ -25,21 +24,16 @@
</style> </style>
</head> </head>
<body> <body>
<h1>About EveryTab</h1>
<p class="subtitle">You think <i>you</i> have too many tabs open?</p> <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>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>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>EveryTab just shows a random slice of the web, in all its messy and beautiful glory. Enjoy!</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> -->
</body> </body>
</html> </html>

6
frontend/index.html
View file

@ -33,9 +33,12 @@
} }
} }
html, body {
overflow-x: hidden;
}
body { body {
background: var(--bg); background: var(--bg);
overflow-x: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
} }
@ -269,6 +272,7 @@
height: 50vh; height: 50vh;
} }
/* Toolbar area (address bar) */ /* Toolbar area (address bar) */
.iframe-toolbar { .iframe-toolbar {
display: flex; display: flex;

37
frontend/site.js
View file

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