eins/f0bm
1
0
Fork 0
forked from w0bm/f0bm
Code Pull Requests Activity

Compare commits

base: eins:45f9345e9c86d3337e7a828ad6fa35d314eeaa01
Branches Tags
eins:f0bm eins:eins-patch-1 w0bm:f0bm w0bm:eins-f0bm
...
compare: w0bm:eins-f0bm
Branches Tags
w0bm:f0bm w0bm:eins-f0bm eins:f0bm eins:eins-patch-1

8 Commits
45f9345e9c ... eins-f0bm

Author SHA1 Message Date
x
224064d0ca fixing background visibility and states 2026-01-23 18:37:44 +01:00
x
3ee28fd0b7 Merge branch 'f0bm' into eins-f0bm 2026-01-23 17:03:13 +01:00
eins
964284d5c9 REAL seamless now! 2026-01-23 15:53:45 +00:00
x
9a03d5f697 adding generic tag cards 2026-01-23 16:53:19 +01:00
eins
9b1041dda7 first version of infinite scrolling 2026-01-23 15:45:28 +00:00
eins
4bc8b8f436 Merge pull request 'fixed issues with the random button and hotkeys' (#2) from eins/f0bm:f0bm into f0bm 
Reviewed-on: w0bm/f0bm#2
 2026-01-23 14:53:20 +00:00
Kibi Kelburton
007cf3189c Merge pull request 'added AJAX loading for videos' (#1) from eins/f0bm:eins-patch-1 into f0bm 
Reviewed-on: w0bm/f0bm#1
Reviewed-by: Kibi Kelburton <schrumpel@noreply.DOMAIN>
 2026-01-23 13:33:59 +00:00
eins
4a2925b141 revert a4f9c48e13 
revert various fixes to get it working for myself
 2026-01-23 13:24:43 +00:00
13 changed files with 688 additions and 272 deletions
Expand all files Collapse all files

15
debug/check_last_item.mjs
View File

@@ -1,15 +0,0 @@
import db from "../src/inc/sql.mjs";
(async () => {
try {
const item = (await db`select * from items order by id desc limit 1`)?.[0];
console.log("Last Item:", item);
if (item) {
const tags = await db`select * from tags_assign where item_id = ${item.id}`;
console.log("Tags:", tags);
}
} catch (err) {
console.error(err);
}
process.exit(0);
})();

14
debug/trigger.mjs
View File

@@ -6,14 +6,13 @@ import { promises as fs } from "fs";
network: "console",
message: _args.join(" "),
args: _args.slice(1),
channel: "#w0bm",
channel: "console",
user: {
prefix: "console!console@console",
nick: "console",
username: "console",
account: "console"
},
raw: {},
reply: (...args) => console.log(args),
replyAction: (...args) => console.log(args),
replyNotice: (...args) => console.log(args)
@@ -25,14 +24,11 @@ import { promises as fs } from "fs";
)).filter(t => t[0].call.test(_e.message)).map(t => ({ name: t[0].name, f: t[0].f }));
try {
if (trigger.length === 0)
if(trigger.length === 0)
return console.error("no matches");
for (const t of trigger) {
console.log(`triggered > ${t.name} (${_e.message})`);
await t.f(_e);
}
} catch (err) {
console.log(`triggered > ${trigger[0].name} (${_e.message})`);
await trigger[0].f(_e);
} catch(err) {
console.error(err);
}
process.exit(0);
})();

3
init.sh
View File

@@ -1,3 +0,0 @@
#!/bin/bash
npm i
npm start

195
public/s/css/f0ck.css
View File

@@ -1197,7 +1197,9 @@ body {
overscroll-behavior-y: contain;
overflow: unset;
font-size: 14px;
height: /* 100%; */auto;
height:
/* 100%; */
auto;
}
.wrapper {
@@ -1318,6 +1320,13 @@ div.posts>a:hover::after {
grid-template-columns: auto 1fr 0fr;
justify-content: start;
border-bottom: 1px solid var(--nav-border-color);
background: var(--nav-bg);
transition: background 0.2s ease;
}
.navbar.scrolled {
background: #000 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.navbar-brand {
@@ -1424,7 +1433,7 @@ ul.navbar-nav li.nav-item {
}
.nav-link[data-toggle="dropdown"].ddcontent::after {
content: "\00a0("attr(content) ")\00a0\25bc";
content: "\00a0(" attr(content) ")\00a0\25bc";
}
.nav-link[data-toggle="dropdown"]:not(.ddcontent)::after {
@@ -1576,14 +1585,10 @@ span.placeholder {
}
@media (max-width: 1056px) {
.navbar {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas: 'f0ck f0ck f0ck';
}
/* Navbar grid layout removed for modern-navbar compatibility */
.navbar-brand {
grid-area: f0ck;
/* maintained for potential other uses or reset */
}
.pagination-container-fluid {
@@ -1608,7 +1613,7 @@ span.placeholder {
}
@media (max-width: 1325px) {
/* ranking page - idea */
/* ranking page - idea */
/* .ranking {
grid-template-columns: 1fr 1fr !important;
} */
@@ -1783,8 +1788,9 @@ span.placeholder {
.index-container {
width: 100%;
padding: 5px;
/* background-color: var(--navigation-links-bg);
*/}
/* background-color: var(--navigation-links-bg);
*/
}
@media (min-width: 361px) {
.embed-responsive-image {
@@ -2779,7 +2785,9 @@ ul.navbar-nav-guests li.nav-item {
margin-right: .5rem;
}
.navbar-expand-lg .navbar-nav-guests .nav-link, .pagination > a, .pagination > span {
.navbar-expand-lg .navbar-nav-guests .nav-link,
.pagination>a,
.pagination>span {
padding-right: .5rem;
padding-left: .5rem;
}
@@ -2792,7 +2800,7 @@ ul.navbar-nav-guests li.nav-item {
margin: 0;
padding: 5px;
}
ul.navbar-nav-guests li.nav-item {
margin-right: unset;
}
@@ -2812,16 +2820,20 @@ ul.navbar-nav-guests li.nav-item {
/* Pagination Responsiveness */
@media (max-width: 799px) {
.navbar-expand-lg .navbar-nav-guests .nav-link, .pagination > a, .pagination > span {
.navbar-expand-lg .navbar-nav-guests .nav-link,
.pagination>a,
.pagination>span {
padding-right: 2px;
padding-left: 2px;
}
.pagination > a, .pagination > span {
.pagination>a,
.pagination>span {
margin-right: 2px;
margin-left: 2px;
}
.pagination {
justify-content: center !important;
}
@@ -2830,15 +2842,19 @@ ul.navbar-nav-guests li.nav-item {
/* fadeIn effect */
@keyframes fadeIn {
0% {
opacity: 0;
opacity: 0;
}
100% {
opacity: 1;
opacity: 1;
}
}
img#f0ck-image, div.imageDoor, div.posts a, video {
animation: 1s ease-out 0s 1 fadeInFX;
img#f0ck-image,
div.imageDoor,
div.posts a,
video {
animation: 1s ease-out 0s 1 fadeInFX;
}
/* f0ckgle */
@@ -2867,7 +2883,7 @@ img#f0ck-image, div.imageDoor, div.posts a, video {
background: var(--nav-bg);
padding: 5px;
}
.profile_head_avatar {
margin: 0;
}
@@ -2892,11 +2908,13 @@ img#f0ck-image, div.imageDoor, div.posts a, video {
padding: 5px;
}
.f0cks h5, .favs h5 {
.f0cks h5,
.favs h5 {
background: var(--dropdown-bg);
}
.f0cks-header, .favs-header {
.f0cks-header,
.favs-header {
display: grid;
grid-template-columns: 1fr auto;
background: var(--img-border-color);
@@ -2925,7 +2943,7 @@ div.favs div.posts {
filter: blur(100px);
transform: translate3d(0, 0, 0);
z-index: 0;
transition: 2s ease;
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.2;
}
@@ -2940,46 +2958,50 @@ button#togglebg {
0% {
opacity: 0;
}
100% {
100% {
opacity: 1;
}
}
}
@keyframes fadeOutFX {
0% {
opacity: 1;
}
100% {
100% {
opacity: 0;
}
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
opacity: 0;
}
100% {
opacity: 0.2;
}
opacity: 0.2;
}
}
@keyframes fadeOut {
0% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
.fader-in {
animation: fadeIn .8s steps(100) forwards;
opacity: 0.4 !important;
}
.fader-out {
animation: fadeOut .8s steps(100) forwards
}
opacity: 0 !important;
}
.settings {
display: grid;
@@ -3004,6 +3026,7 @@ input#s_avatar {
#s_avatar:hover {
background: #ffffff0f;
}
.theforceofthree {
display: grid;
grid-template-columns: 0.4fr 1fr 0.4fr;
@@ -3011,4 +3034,90 @@ input#s_avatar {
.upload {
padding: 10px;
}
}
/* Infinite scroll loading indicator */
.loading-spinner {
display: inline-block;
font-size: 12px;
color: var(--footbar-color);
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 0.1;
}
50% {
opacity: 1;
}
/* Modern Tags Layout */
.tags-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px 0;
}
.tag-card {
display: flex;
flex-direction: column;
background: var(--badge-bg, #171717);
border-radius: 12px;
overflow: hidden;
text-decoration: none !important;
transition: transform 0.2s, box-shadow 0.2s;
border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.1));
position: relative;
}
.tag-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
background: var(--dropdown-bg, #232323);
border-color: var(--accent, #9f0);
}
.tag-card-image {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
background: #000;
}
.tag-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
opacity: 0.8;
}
.tag-card:hover .tag-card-image img {
transform: scale(1.1);
opacity: 1;
}
.tag-card-content {
padding: 15px;
display: flex;
flex-direction: column;
gap: 5px;
}
.tag-name {
color: var(--white, #fff);
font-weight: bold;
font-size: 1.1em;
font-family: var(--font, monospace);
}
.tag-count {
color: #888;
font-size: 0.9em;
}

385
public/s/js/f0ck.js
View File

@@ -8,6 +8,25 @@ window.requestAnimFrame = (function () {
(() => {
let video;
// Initialize background preference
if (localStorage.getItem('background') == undefined) {
localStorage.setItem('background', 'true');
}
var background = localStorage.getItem('background') === 'true';
// Apply initial visual state
var initialCanvas = document.getElementById('bg');
if (initialCanvas) {
if (background) {
initialCanvas.classList.add('fader-in');
initialCanvas.classList.remove('fader-out');
} else {
initialCanvas.classList.add('fader-out');
initialCanvas.classList.remove('fader-in');
}
}
if (elem = document.querySelector("#my-video")) {
video = new v0ck(elem);
document.addEventListener("keydown", e => {
@@ -17,13 +36,27 @@ window.requestAnimFrame = (function () {
}
});
const toggleBg = document.getElementById('togglebg');
if (toggleBg) {
toggleBg.addEventListener('click', function (e) {
e.preventDefault();
background = !background;
localStorage.setItem('background', background.toString());
var canvas = document.getElementById('bg');
if (elem !== null) {
// ... existing code ...
}
}
// Export init function for dynamic calls
window.initBackground = () => {
// Re-fetch elements as they might have been replaced
const elem = document.querySelector("#my-video");
const canvas = document.getElementById('bg');
if (elem) {
// Initialize video wrapper if needed or just get instance
// Assuming v0ck handles re-init or we just use raw element for events
// But video variable is local.
// We need to re-bind 'play' event if it's a new element.
if (canvas) {
// Restore visual state on re-init
if (background) {
canvas.classList.add('fader-in');
canvas.classList.remove('fader-out');
@@ -31,33 +64,102 @@ window.requestAnimFrame = (function () {
canvas.classList.add('fader-out');
canvas.classList.remove('fader-in');
}
animationLoop();
});
}
if (elem !== null) {
if (localStorage.getItem('background') == undefined) {
localStorage.setItem('background', 'true');
}
const context = canvas.getContext('2d');
const cw = canvas.width = canvas.clientWidth | 0;
const ch = canvas.height = canvas.clientHeight | 0;
var background = localStorage.getItem('background') === 'true';
var canvas = document.getElementById('bg');
if (canvas) {
var context = canvas.getContext('2d');
var cw = canvas.width = canvas.clientWidth | 0;
var ch = canvas.height = canvas.clientHeight | 0;
function animationLoop() {
if (video.paused || video.ended || !background)
const animationLoop = () => {
if (elem.paused || elem.ended || !background)
return;
context.drawImage(video, 0, 0, cw, ch);
context.drawImage(elem, 0, 0, cw, ch);
window.requestAnimFrame(animationLoop);
}
elem.addEventListener('play', animationLoop);
if (!elem.paused) {
animationLoop();
}
}
}
}
};
// Initial call
window.initBackground();
const loadPageAjax = async (url) => {
// Show loading indicator
const navbar = document.querySelector("nav.navbar");
if (navbar) navbar.classList.add("pbwork");
try {
// Extract page number, user, tag, etc.
let page = 1;
const pMatch = url.match(/\/p\/(\d+)/);
if (pMatch) page = pMatch[1];
// Extract context
let tag = null, user = null, mime = null;
const tagMatch = url.match(/\/tag\/([^/]+)/);
if (tagMatch) tag = decodeURIComponent(tagMatch[1]);
const userMatch = url.match(/\/user\/([^/]+)/);
if (userMatch) user = decodeURIComponent(userMatch[1]);
const mimeMatch = url.match(/\/(image|audio|video)/);
if (mimeMatch) mime = mimeMatch[1];
let ajaxUrl = `/ajax/items/?page=${page}`;
if (tag) ajaxUrl += `&tag=${encodeURIComponent(tag)}`;
if (user) ajaxUrl += `&user=${encodeURIComponent(user)}`;
if (mime) ajaxUrl += `&mime=${encodeURIComponent(mime)}`;
console.log("Fetching Page:", ajaxUrl);
const response = await fetch(ajaxUrl, { credentials: 'include' });
const data = await response.json();
if (data.success) {
// Replace grid content
// If "infinite scroll" we might append, but pagination implies jumping properly?
// User said "resembled in pagination", which implies staying in sync.
// If I click Next Page, I expect to SEE page 2.
// But infinite scroll usually appends.
// Let's implement REPLACE for explicit page navigation to be safe/standard.
// Wait, the "infinite scroll" feature usually implies APPEND.
// If the user wants infinite scroll, they shouldn't click pagination?
// But if they scroll, `changePage` is called which clicks `.next`.
// So if I replace content, it breaks infinite scroll flow (items disappear).
// So I should APPEND if it's "next page" and we are already on the page?
// But `changePage` is triggered by scroll.
// Let's APPEND.
const posts = document.querySelector('.posts');
if (posts) {
// Check if we are appending (next page) or jumping
// For simple "infinite scroll", we append.
posts.insertAdjacentHTML('beforeend', data.html);
}
// Update pagination
if (data.pagination) {
document.querySelectorAll('.pagination-wrapper').forEach(el => el.innerHTML = data.pagination);
}
// Update History
history.pushState({}, '', url);
}
} catch (err) {
console.error(err);
window.location.href = url; // Fallback
} finally {
if (navbar) navbar.classList.remove("pbwork");
// Restore pagination visibility for Grid View
const navPag = document.querySelector('.pagination-container-fluid');
if (navPag) navPag.style.display = '';
}
};
let tt = false;
const stimeout = 500;
@@ -68,6 +170,18 @@ window.requestAnimFrame = (function () {
}
};
// Navbar scroll effect - make background black when scrolling
const navbar = document.querySelector('.navbar');
if (navbar) {
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
}
const loadItemAjax = async (url, inheritContext = true) => {
console.log("loadItemAjax called with:", url, "inheritContext:", inheritContext);
// Show loading indicator
@@ -77,6 +191,10 @@ window.requestAnimFrame = (function () {
// Extract item ID from URL. Regex now handles query params, hashes, and trailing slashes.
const match = url.match(/\/(\d+)(?:\/|#|\?|$)/);
// Hide navbar pagination for Item View (matches SSR)
const navPag = document.querySelector('.pagination-container-fluid');
if (navPag) navPag.style.display = 'none';
if (!match) {
console.warn("loadItemAjax: No ID match found in URL", url);
// fallback for weird/external links
@@ -87,12 +205,15 @@ window.requestAnimFrame = (function () {
// <context-preservation>
// Extract context from Target URL first
let tag = null, user = null;
let tag = null, user = null, isFavs = false;
const tagMatch = url.match(/\/tag\/([^/]+)/);
if (tagMatch) tag = decodeURIComponent(tagMatch[1]);
const userMatch = url.match(/\/user\/([^/]+)/);
if (userMatch) user = decodeURIComponent(userMatch[1]); // Note: "user" variable shadowed? No, block scope or different name? let user defined above.
if (userMatch) {
user = decodeURIComponent(userMatch[1]);
if (url.includes(`/user/${userMatch[1]}/favs`)) isFavs = true;
}
// If missing and inheritContext is true, check Window Location
if (inheritContext) {
@@ -102,7 +223,10 @@ window.requestAnimFrame = (function () {
}
if (!user) {
const wUserMatch = window.location.href.match(/\/user\/([^/]+)/);
if (wUserMatch) user = decodeURIComponent(wUserMatch[1]);
if (wUserMatch) {
user = decodeURIComponent(wUserMatch[1]);
if (window.location.href.includes(`/user/${wUserMatch[1]}/favs`)) isFavs = true;
}
}
}
// </context-preservation>
@@ -114,13 +238,14 @@ window.requestAnimFrame = (function () {
const params = new URLSearchParams();
if (tag) params.append('tag', tag);
if (user) params.append('user', user);
if (isFavs) params.append('fav', 'true');
if ([...params].length > 0) {
ajaxUrl += '?' + params.toString();
}
console.log("Fetching:", ajaxUrl);
const response = await fetch(ajaxUrl);
const response = await fetch(ajaxUrl, { credentials: 'include' });
if (!response.ok) throw new Error(`Network response was not ok: ${response.status}`);
const rawText = await response.text();
@@ -175,13 +300,17 @@ window.requestAnimFrame = (function () {
// If we inherited context, we should reflect it in the URL
let pushUrl = `/${itemid}`;
// Logic from ajax.mjs context reconstruction:
if (user) pushUrl = `/user/${user}/${itemid}`; // User takes precedence usually? Or strictly mutually exclusive in UI
if (user) {
pushUrl = `/user/${user}/${itemid}`;
if (isFavs) pushUrl = `/user/${user}/favs/${itemid}`;
}
else if (tag) pushUrl = `/tag/${tag}/${itemid}`;
// We overwrite proper URL even if the link clicked was "naked"
history.pushState({}, '', pushUrl);
setupMedia();
if (window.initBackground) window.initBackground();
// Try to extract ID from response if possible or just use itemid
document.title = `f0bm - ${itemid}`;
if (navbar) navbar.classList.remove("pbwork");
@@ -254,12 +383,50 @@ window.requestAnimFrame = (function () {
// Standard item links
e.preventDefault();
loadItemAjax(link.href, true);
if (link.href.match(/\/p\/\d+/) || link.href.match(/[?&]page=\d+/)) {
loadPageAjax(link.href);
} else {
loadItemAjax(link.href, true);
}
} else if (e.target.closest('#togglebg')) {
e.preventDefault();
background = !background;
localStorage.setItem('background', background.toString());
var canvas = document.getElementById('bg');
if (canvas) {
if (background) {
canvas.classList.remove('fader-out');
canvas.classList.add('fader-in');
// Re-trigger loop if started completely fresh or paused
if (video && !video.paused) {
// We need to access animationLoop from closure?
// Accessing it via window.initBackground might be cleaner or just restart it.
// But initBackground defines it locally.
// We can just rely on initBackground being called or canvas update.
// Actually, if we just change opacity, the loop doesn't need to stop/start technically,
// but for performance we stopped it if !background.
// So we should restart it.
window.initBackground();
}
} else {
canvas.classList.remove('fader-in');
canvas.classList.add('fader-out');
}
}
}
});
window.addEventListener('popstate', (e) => {
loadItemAjax(window.location.href, true);
if (window.location.href.match(/\/p\/\d+/) || window.location.href.match(/[?&]page=\d+/) || window.location.pathname === '/') {
// Ideally we should reload page or call loadPageAjax(currentUrl) if it supports it
// But if we are going BACK to index from item, we expect grid.
// loadItemAjax fails on index.
// loadPageAjax handles /p/N logic.
// If just slash, loadPageAjax might default to page 1.
loadPageAjax(window.location.href);
} else {
loadItemAjax(window.location.href, true);
}
});
// <keybindings>
@@ -335,59 +502,116 @@ window.requestAnimFrame = (function () {
}
// </image-responsive>
// <scroller>
let tts = 0;
const scroll_treshold = 1;
if ([...document.querySelectorAll("div.posts")].length === 1) {
document.addEventListener("wheel", e => {
// <infinite-scroll>
const postsContainer = document.querySelector("div.posts");
if (postsContainer) {
// Infinite scroll state
let infiniteState = {
loading: false,
hasMore: true,
currentPage: 1
};
// Extract current page from URL
const pageMatch = window.location.pathname.match(/\/p\/(\d+)/);
if (pageMatch) infiniteState.currentPage = parseInt(pageMatch[1]);
// Extract context (tag/user/mime) from URL
const getContext = () => {
const ctx = {};
const tagMatch = window.location.pathname.match(/\/tag\/([^/]+)/);
if (tagMatch) ctx.tag = decodeURIComponent(tagMatch[1]);
const userMatch = window.location.pathname.match(/\/user\/([^/]+)/);
if (userMatch) ctx.user = decodeURIComponent(userMatch[1]);
const mimeMatch = window.location.pathname.match(/\/(image|audio|video)(?:\/|$)/);
if (mimeMatch) ctx.mime = mimeMatch[1];
return ctx;
};
// Build URL path for history
const buildUrl = (page) => {
const ctx = getContext();
let path = '/';
if (ctx.tag) path += `tag/${ctx.tag}/`;
if (ctx.user) path += `user/${ctx.user}/`;
if (ctx.mime) path += `${ctx.mime}/`;
if (page > 1) path += `p/${page}`;
return path.replace(/\/$/, '') || '/';
};
// Fetch and append more items
const loadMoreItems = async () => {
if (infiniteState.loading || !infiniteState.hasMore) return;
infiniteState.loading = true;
const foot = document.querySelector("div#footbar");
if (foot) {
foot.innerHTML = '<span class="loading-spinner">Loading...</span>';
foot.style.color = 'var(--footbar-color)';
}
const nextPage = infiniteState.currentPage + 1;
const ctx = getContext();
const params = new URLSearchParams();
params.append('page', nextPage);
if (ctx.tag) params.append('tag', ctx.tag);
if (ctx.user) params.append('user', ctx.user);
if (ctx.mime) params.append('mime', ctx.mime);
try {
const response = await fetch(`/ajax/items?${params.toString()}`);
const data = await response.json();
if (data.success && data.html) {
// Append new thumbnails
postsContainer.insertAdjacentHTML('beforeend', data.html);
// Update state
infiniteState.currentPage = data.currentPage;
infiniteState.hasMore = data.hasMore;
// Update URL
history.replaceState({}, '', buildUrl(infiniteState.currentPage));
// Update pagination display if exists
const paginationLinks = document.querySelectorAll('.pagination .pagination-int-item, .pagination .btn');
paginationLinks.forEach(el => {
if (el.textContent.trim() == infiniteState.currentPage) {
el.classList.add('disabled');
}
});
} else {
infiniteState.hasMore = false;
}
} catch (err) {
console.error('Infinite scroll fetch error:', err);
} finally {
infiniteState.loading = false;
if (foot) {
foot.innerHTML = infiniteState.hasMore ? '&#9660;' : '&#8212;';
foot.style.color = 'transparent';
}
}
};
// Scroll detection - preload before reaching bottom
const PRELOAD_OFFSET = 500; // pixels before bottom to trigger load
window.addEventListener("scroll", () => {
if (!document.querySelector('#main')) return;
if (Math.ceil(window.innerHeight + window.scrollY) >= document.querySelector('#main').offsetHeight && e.deltaY > 0) { // down
if (elem = document.querySelector(".pagination > .next:not(.disabled)")) {
if (tts < scroll_treshold) {
const foot = document.querySelector("div#footbar");
if (foot) {
foot.style.boxShadow = "inset 0px 4px 0px var(--footbar-color)";
foot.style.color = "var(--footbar-color)";
}
tts++;
}
else
changePage(elem);
}
}
else if (window.scrollY <= 0 && e.deltaY < 0) { // up
if (elem = document.querySelector(".pagination > .prev:not(.disabled)")) {
if (tts < scroll_treshold) {
const nav = document.querySelector("nav.navbar");
if (nav) {
nav.style.boxShadow = "0px 2px 0px var(--loading-indicator-color)";
nav.style.transition = ".2s ease-in-out";
}
tts++;
}
else
changePage(elem);
}
}
else {
tts = 0;
const foot = document.querySelector("div#footbar");
if (foot) {
foot.style.boxShadow = "unset";
foot.style.color = "transparent";
}
const nav = document.querySelector("nav.navbar");
if (nav) nav.style.boxShadow = "unset";
const scrollPosition = window.innerHeight + window.scrollY;
const pageHeight = document.querySelector('#main').offsetHeight;
const distanceFromBottom = pageHeight - scrollPosition;
// Load more when within PRELOAD_OFFSET pixels of bottom
if (distanceFromBottom < PRELOAD_OFFSET && infiniteState.hasMore && !infiniteState.loading) {
loadMoreItems();
}
});
}
const rmatch = /\/p\/(\d+?)/;
if (document.referrer.match(rmatch) && document.location.href.match(rmatch))
if (document.location.href.match(rmatch) < document.referrer.match(rmatch))
document.body.scrollTop = document.body.scrollHeight;
// </scroller>
// </infinite-scroll>
// <swipe>
const swipeRT = {
@@ -524,6 +748,7 @@ window.requestAnimFrame = (function () {
// </scroller>
})();
// disable default scroll event when mouse is on content div
// this is useful for items that have a lot of tags for example: 12536
const targetSelector = '.content';

69
src/inc/routes/ajax.mjs
View File

@@ -23,7 +23,8 @@ export default (router, tpl) => {
url: contextUrl,
user: query.user,
tag: query.tag,
mime: query.mime
mime: query.mime,
fav: query.fav === 'true'
});
if (!data.success) {
@@ -38,10 +39,8 @@ export default (router, tpl) => {
if (req.session) {
data.session = { ...req.session };
// data.user comes from f0cklib (uploader). req.session.user is logged-in user string.
// If template engine confuses them, removing session.user from this context might help.
// item-partial doesn't use session.user.
// Note: If anything fails, it prints literal code, so we ensure no collision.
if (data.session.user) delete data.session.user;
// Templates use session.user for matching favorites. We must preserve it.
// if (data.session.user) delete data.session.user; // REMOVED THIS
} else {
data.session = false;
}
@@ -64,5 +63,65 @@ export default (router, tpl) => {
});
});
// Infinite scroll endpoint for index thumbnails
router.get(/\/ajax\/items/, async (req, res) => {
let query = {};
if (typeof req.url === 'string') {
const parsedUrl = url.parse(req.url, true);
query = parsedUrl.query;
} else {
query = req.url.qs || {};
}
const page = parseInt(query.page) || 1;
const data = await f0cklib.getf0cks({
page: page,
tag: query.tag || null,
user: query.user || null,
mime: query.mime || null,
mode: req.session.mode,
session: !!req.session,
fav: false
});
if (!data.success) {
return res.reply({
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
success: false,
html: '',
hasMore: false
})
});
}
// Render just the thumbnail items
const itemsHtml = tpl.render('snippets/items-grid', {
items: data.items,
link: data.link
});
// Render pagination
const paginationHtml = tpl.render('snippets/pagination', {
pagination: data.pagination,
link: data.link
});
const hasMore = data.pagination.next !== null;
return res.reply({
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
success: true,
html: itemsHtml,
pagination: paginationHtml,
hasMore: hasMore,
nextPage: data.pagination.next,
currentPage: data.pagination.page
})
});
});
return router;
};

41
src/inc/routes/tag_image.mjs Normal file
View File

@@ -0,0 +1,41 @@
import crypto from 'crypto';
export default (router, tpl) => {
router.get(/^\/tag_image\/(?<tag>.+)$/, async (req, res) => {
const tag = req.params.tag;
// Create a deterministic hash from the tag
const hash = crypto.createHash('md5').update(tag).digest('hex');
// Generate colors from hash
const c1 = '#' + hash.substring(0, 6);
const c2 = '#' + hash.substring(6, 12);
const c3 = '#' + hash.substring(12, 18);
// Generate some deterministic numbers for shapes
const n1 = parseInt(hash.substring(18, 20), 16);
const n2 = parseInt(hash.substring(20, 22), 16);
const svg = `
<svg width="300" height="150" viewBox="0 0 300 150" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:${c1};stop-opacity:1" />
<stop offset="100%" style="stop-color:${c2};stop-opacity:1" />
</linearGradient>
</defs>
<rect width="300" height="150" fill="url(#grad)" />
<circle cx="${n1}%" cy="${n2}%" r="${(n1 + n2) / 4}" fill="${c3}" fill-opacity="0.3" />
<circle cx="${100 - n1}%" cy="${100 - n2}%" r="${(n1 + n2) / 3}" fill="${c3}" fill-opacity="0.2" />
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="24" fill="#fff" fill-opacity="0.9" font-weight="bold">${tag}</text>
</svg>
`.trim();
res.writeHead(200, {
'Content-Type': 'image/svg+xml',
'Cache-Control': 'public, max-age=86400'
});
res.end(svg);
});
return router;
};

178
src/inc/trigger/parser.mjs
View File

@@ -9,8 +9,8 @@ import fs from "fs";
import path from "path";
const regex = {
all: /https?:\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/gi,
yt: /(?:youtube\.com\/\S*(?:(?:\/e(?:mbed))?\/|watch\/?\?(?:\S*?&?v\=))|youtu\.be\/)([a-zA-Z0-9_-]{6,11})/gi,
all: /https?:\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?/gi,
yt: /(?:youtube\.com\/\S*(?:(?:\/e(?:mbed))?\/|watch\/?\?(?:\S*?&?v\=))|youtu\.be\/)([a-zA-Z0-9_-]{6,11})/gi,
imgur: /(?:https?:)?\/\/(\w+\.)?imgur\.com\/(\S*)(\..{3,4})/i,
fourchan: /https?:\/\/i\.4cdn\.org\/(\w+)\/(\d+)\.(\w{3,4})/i,
instagram: /(?:https?:\/\/www\.)?instagram\.com\S*?\/(?:p|reel)\/(\w{11})\/?/im
@@ -23,35 +23,35 @@ export default async bot => {
name: "parser",
call: regex.all,
active: true,
f: async e => {
f: e => {
const links = e.message.match(regex.all)?.filter(link => !link.includes(cfg.main.url.domain)) || [];
let repost;
if (e.media)
if(e.media)
links.push(e.media);
if (links.length === 0)
if(links.length === 0)
return false;
if (e.message.match(/\!i(gnore)?\b/))
if(e.message.match(/\!i(gnore)?\b/))
return false;
if (!e.channel.includes("w0bm") && (!e.message.match(/\!w(0bm)?\b/i) && (typeof e.raw.forward_from == 'undefined')))
if(!e.channel.includes("w0bm") && (!e.message.match(/\!w(0bm)?\b/i) && (typeof e.raw.forward_from == 'undefined')))
return false;
if (e.type === 'tg' && // proto: tg
if(e.type === 'tg' && // proto: tg
!e.message.match(/\!w(0bm)?\b/i) && // !w / !w0bm
!e.raw.forward_date && // is forwarded?
!mediagroupids.has(e.raw.media_group_id) // prepared mediagroup?
) {
return false;
}
else if (e.raw.media_group_id && e.message.match(/\!w(0bm)?\b/i)) {
else if(e.raw.media_group_id && e.message.match(/\!w(0bm)?\b/i)) {
mediagroupids.add(e.raw.media_group_id);
}
console.log(`parsing ${links.length} link${links.length > 1 ? "s" : ""}...`);
for (const link of links) {
links.forEach(async link => {
//if(regex.imgur.test(link))
// return await e.reply(`fuck imgur... seriously`);
@@ -63,7 +63,7 @@ export default async bot => {
// check repost (link)
repost = await queue.checkrepostlink(link);
if (repost)
if(repost)
return await e.reply(`repost motherf0cker (link): ${cfg.main.url.full}/${repost}`);
// generate uuid
@@ -73,41 +73,39 @@ export default async bot => {
// read metadata
let ext;
const proxyArgs = cfg.main.socks ? `--proxy ${cfg.main.socks}` : '';
if (link.match(regex.instagram)) {
if(link.match(regex.instagram)) {
// is instagram
try {
// @flummi -> is there a variable for the actual work directory so it doesn't have to be hardcoded?
const meta = JSON.parse((await queue.exec(`yt-dlp ${proxyArgs} -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' --skip-download --dump-json "${link}"`)).stdout);
const meta = JSON.parse((await queue.exec(`yt-dlp --proxy ${cfg.main.socks} -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' --skip-download --dump-json "${link}"`)).stdout);
ext = meta.ext;
} catch (err) {
} catch(err) {
const tmphead = (await fetch(link, { method: "HEAD" })).headers["content-type"];
// this can be undefined for unsupported mime types, but will be caught in the general mime check below
ext = cfg.mimes[tmphead];
}
}
else if (link.match(regex.imgur)) {
else if(link.match(regex.imgur)) {
// imghure
ext = link.split('.').pop();
}
else if (link.match(regex.yt)) {
else if(link.match(regex.yt)) {
//yt - fuck anti bot protection
try {
const meta = JSON.parse((await queue.exec(`yt-dlp ${proxyArgs} -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' -I 1 --skip-download --dump-json "${link}"`)).stdout);
const meta = JSON.parse((await queue.exec(`yt-dlp --proxy ${cfg.main.socks} -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' -I 1 --skip-download --dump-json "${link}"`)).stdout);
ext = meta.ext;
} catch (err) {
console.error("YT-DLP Error:", err);
} catch(err) {
const tmphead = (await fetch(link, { method: "HEAD" })).headers["content-type"];
// this can be undefined for unsupported mime types, but will be caught in the general mime check below
ext = cfg.mimes[tmphead];
}
}
else if (link.match(regex.fourchan)) {
else if(link.match(regex.fourchan)) {
//4chan - fuck cloudflare :)
try {
const meta = JSON.parse((await queue.exec(`yt-dlp ${proxyArgs} -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' --skip-download --dump-json "${link}"`)).stdout);
const meta = JSON.parse((await queue.exec(`yt-dlp --proxy ${cfg.main.socks} -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' --skip-download --dump-json "${link}"`)).stdout);
ext = meta.ext;
} catch (err) {
} catch(err) {
const tmphead = (await fetch(link, { method: "HEAD" })).headers["content-type"];
// this can be undefined for unsupported mime types, but will be caught in the general mime check below
ext = cfg.mimes[tmphead];
@@ -119,15 +117,14 @@ export default async bot => {
try {
const meta = JSON.parse((await queue.exec(`yt-dlp -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' --skip-download --dump-json "${link}"`)).stdout);
ext = meta.ext;
} catch (err) {
console.error('err:', err);
if (e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, err);
return await e.reply('something went wrong lol / check maxfilesize?');
} catch(err) {
const tmphead = (await fetch(link, { method: "HEAD" })).headers["content-type"];
// this can be undefined for unsupported mime types, but will be caught in the general mime check below
ext = cfg.mimes[tmphead];
}
}
if (!Object.values(cfg.mimes).includes(ext?.toLowerCase())) {
if(!Object.values(cfg.mimes).includes(ext?.toLowerCase())) {
return console.log('mime schmime ' + ext);
}
@@ -139,44 +136,44 @@ export default async bot => {
const start = new Date();
let source;
if (link.match(regex.instagram)) {
if(link.match(regex.instagram)) {
try {
// add --cookies <path-to-cookies-file> on local instance if you want to avoid getting rate limited or optionally use a socks proxy from a network that is not being detected as a public network
source = (await queue.exec(`yt-dlp ${proxyArgs} -f 'bv*[height<=1080]+ba/b[height<=1080] / wv*+ba/w' "${link}" --max-filesize ${maxfilesize / 1024}k --postprocessor-args "ffmpeg:-bitexact" -o "./tmp/${uuid}.%(ext)s" --print after_move:filepath --merge-output-format "mp4"`)).stdout.trim();
} catch (err) {
if (e.type == 'tg')
source = (await queue.exec(`yt-dlp --proxy ${cfg.main.socks} -f 'bv*[height<=1080]+ba/b[height<=1080] / wv*+ba/w' "${link}" --max-filesize ${maxfilesize / 1024}k --postprocessor-args "ffmpeg:-bitexact" -o "./tmp/${uuid}.%(ext)s" --print after_move:filepath --merge-output-format "mp4"`)).stdout.trim();
} catch(err) {
if(e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, "instagram dl error");
return await e.reply("instagram dl error", err);
}
}
else if (link.match(regex.imgur)) {
else if(link.match(regex.imgur)) {
// imghure via torsocks // needs torsocks setup so this is optional
try {
await queue.exec(`torsocks wget ${link} -O ./tmp/${uuid}.${ext}`);
source = `./tmp/${uuid}.${ext}`;
} catch (err) {
} catch(err) {
console.error('err:', err);
if (e.type == 'tg')
if(e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, err);
return await e.reply('something went wrong lol');
}
}
else if (link.match(regex.yt)) {
else if(link.match(regex.yt)) {
try {
// add --cookies <path-to-cookies-file> on local instance if you want to avoid getting rate limited or optionally use a socks proxy from a network that is not being detected as a public network
source = (await queue.exec(`yt-dlp ${proxyArgs} -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' "${link}" -I 1 --max-filesize ${maxfilesize / 1024}k --postprocessor-args "ffmpeg:-bitexact" -o "./tmp/${uuid}.%(ext)s" --print after_move:filepath --merge-output-format "mp4"`)).stdout.trim();
} catch (err) {
if (e.type == 'tg')
source = (await queue.exec(`yt-dlp --proxy ${cfg.main.socks} -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' "${link}" -I 1 --max-filesize ${maxfilesize / 1024}k --postprocessor-args "ffmpeg:-bitexact" -o "./tmp/${uuid}.%(ext)s" --print after_move:filepath --merge-output-format "mp4"`)).stdout.trim();
} catch(err) {
if(e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, "yt dl error");
return await e.reply("yt dl error", err);
}
}
else if (link.match(regex.fourchan)) {
else if(link.match(regex.fourchan)) {
// 4chan via proxy - fuck cloudflare
try {
source = (await queue.exec(`yt-dlp ${proxyArgs} -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' "${link}" --max-filesize ${maxfilesize / 1024}k --postprocessor-args "ffmpeg:-bitexact" -o "./tmp/${uuid}.%(ext)s" --print after_move:filepath --merge-output-format "mp4"`)).stdout.trim();
} catch (err) {
if (e.type == 'tg')
source = (await queue.exec(`yt-dlp --proxy ${cfg.main.socks} -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' "${link}" --max-filesize ${maxfilesize / 1024}k --postprocessor-args "ffmpeg:-bitexact" -o "./tmp/${uuid}.%(ext)s" --print after_move:filepath --merge-output-format "mp4"`)).stdout.trim();
} catch(err) {
if(e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, "yt dl error");
return await e.reply("yt dl error", err);
}
@@ -185,23 +182,23 @@ export default async bot => {
// everything except the exceptions
try {
source = (await queue.exec(`yt-dlp -f 'bv*[height<=720]+ba/b[height<=720] / wv*+ba/w' "${link}" --max-filesize ${maxfilesize / 1024}k --postprocessor-args "ffmpeg:-bitexact" -o "./tmp/${uuid}.%(ext)s" --print after_move:filepath --merge-output-format "mp4"`)).stdout.trim();
} catch (err) {
} catch(err) {
console.error('err:', err);
if (e.type == 'tg')
if(e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, err);
return await e.reply('something went wrong lol / check maxfilesize?');
}
}
// </download data>
if (!source) {
if (e.type == 'tg')
if(!source) {
if(e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, "something went wrong lol");
return await e.reply("something went wrong lol");
}
if (source.match(/larger than/)) {
if (e.type == 'tg')
if(source.match(/larger than/)) {
if(e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, "too large lol");
return await e.reply("too large lol");
}
@@ -209,38 +206,38 @@ export default async bot => {
// filesize check
const size = fs.statSync(source).size;
if (size > maxfilesize) {
await fs.promises.unlink(source).catch(_ => { });
if (e.type == 'tg')
if(size > maxfilesize) {
await fs.promises.unlink(source).catch(_=>{});
if(e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, `too large lol. (${lib.formatSize(size)} / ${lib.formatSize(maxfilesize)})`);
return await e.reply(`too large lol. (${lib.formatSize(size)} / ${lib.formatSize(maxfilesize)})`);
}
// mime check
let mime = (await queue.exec(`file --mime-type -b ${source}`)).stdout.trim();
try {
if (mime == 'video/x-matroska') { // mkv failsafe
if(mime == 'video/x-matroska') { // mkv failsafe
await queue.exec(`ffmpeg -i ./tmp/${uuid}.mkv -codec copy ./tmp/${uuid}.mp4`);
await fs.promises.unlink(source).catch(_ => { });
await fs.promises.unlink(source).catch(_=>{});
source = source.replace(/\.mkv$/, '.mp4');
mime = 'video/mp4';
}
if (source.match(/\.opus$/)) { // opus failsafe
if(source.match(/\.opus$/)) { // opus failsafe
await queue.exec(`ffmpeg -i ./tmp/${uuid}.opus -codec copy ./tmp/${uuid}.ogg`);
await fs.promises.unlink(source);
source = source.replace(/\.opus$/, '.ogg');
mime = 'audio/ogg';
}
} catch (err) {
await fs.promises.unlink(source).catch(_ => { });
if (e.type == 'tg')
} catch(err) {
await fs.promises.unlink(source).catch(_=>{});
if(e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, "something went wrong lol");
return await e.reply("something went wrong lol");
}
if (!Object.keys(cfg.mimes).includes(mime)) {
await fs.promises.unlink(source).catch(_ => { });
if (e.type == 'tg')
if(!Object.keys(cfg.mimes).includes(mime)) {
await fs.promises.unlink(source).catch(_=>{});
if(e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, `lol, go f0ck yourself (${mime})`);
return await e.reply(`lol, go f0ck yourself (${mime})`);
}
@@ -250,9 +247,9 @@ export default async bot => {
// check repost (checksum)
repost = await queue.checkrepostsum(checksum);
if (repost) {
await fs.promises.unlink(source).catch(_ => { });
if (e.type == 'tg')
if(repost) {
await fs.promises.unlink(source).catch(_=>{});
if(e.type == 'tg')
return await e.editMessageText(msg.result.chat.id, msg.result.message_id, `repost motherf0cker (checksum): ${cfg.main.url.full}/${repost}`);
return await e.reply(`repost motherf0cker (checksum): ${cfg.main.url.full}/${repost}`);
}
@@ -260,7 +257,7 @@ export default async bot => {
const filename = path.basename(source);
await fs.promises.copyFile(source, `./public/b/${filename}`);
await fs.promises.unlink(source).catch(_ => { });
await fs.promises.unlink(source).catch(_=>{});
// user alias
let username = e.user.nick || e.user.username;
@@ -271,42 +268,33 @@ export default async bot => {
where lower(user_alias.alias) ilike ${username}
limit 1
`)?.[0]?.user;
if (alias) {
if(alias) {
username = alias;
}
await db`
insert into items ${db({
src: e.media ? "" : link,
dest: filename,
mime: mime,
size: size,
checksum: checksum,
username: username,
userchannel: e.channel,
usernetwork: e.network,
stamp: ~~(new Date() / 1000),
active: true
}, 'src', 'dest', 'mime', 'size', 'checksum', 'username', 'userchannel', 'usernetwork', 'stamp', 'active')
insert into items ${
db({
src: e.media ? "" : link,
dest: filename,
mime: mime,
size: size,
checksum: checksum,
username: username,
userchannel: e.channel,
usernetwork: e.network,
stamp: ~~(new Date() / 1000),
active: true
}, 'src', 'dest', 'mime', 'size', 'checksum', 'username', 'userchannel', 'usernetwork', 'stamp', 'active')
}
`;
const itemid = await queue.getItemID(filename);
// auto-tag sfw
await db`
insert into tags_assign ${db({
item_id: itemid,
tag_id: 1, // sfw
user_id: 2 // f0ck
}, 'item_id', 'tag_id', 'user_id')
}
`;
// generate thumbnail
try {
await queue.genThumbnail(filename, mime, itemid, link);
} catch (err) {
} catch(err) {
await queue.exec(`magick ./mugge.png ./public/t/${itemid}.webp`);
}
@@ -327,13 +315,13 @@ export default async bot => {
let outputmsgirc = `[f0cked] link: ${cfg.main.url.full}/${itemid} | size: ${lib.formatSize(size)} | speed: ${speed}`;
let outputmsgtg = `[f0cked] size: ${lib.formatSize(size)} | speed: ${speed}`;
if (tags?.length > 0) {
if(tags?.length > 0) {
const tagstr = tags.join(', ');
outputmsgirc += ` | tags: ${tagstr}`;
outputmsgtg += ` | tags: ${tagstr}`;
}
if (e.type == 'tg') {
if(e.type == 'tg') {
await e.deleteMessage(msg.result.chat.id, msg.result.message_id);
await e.reply(outputmsgtg, {
reply_markup: JSON.stringify({
@@ -351,7 +339,7 @@ export default async bot => {
else {
await e.reply(outputmsgirc);
}
}
});
}
}];
};

2
views/item.html
View File

@@ -1,5 +1,5 @@
@include(snippets/header)
<canvas class="hidden-xs" id="bg"></canvas>
<div class="wrapper">
<div id="main">

15
views/snippets/header.html
View File

@@ -1,14 +1,19 @@
<!doctype html>
<html lang="en" theme="@if(typeof theme !== "undefined"){{ theme }}@endif" res="@if(typeof fullscreen !== "undefined"){{ fullscreen == 1 ? 'fullscreen' : '' }}@endif">
<html lang="en" theme="@if(typeof theme !== 'undefined'){{ theme }}@endif"
res="@if(typeof fullscreen !== 'undefined'){{ fullscreen == 1 ? 'fullscreen' : '' }}@endif">
<head>
@if(typeof item !== "undefined")<title>f0bm - {{ item.id }}</title>@else<title>f0bm</title>@endif
@if(typeof item !== 'undefined')<title>f0bm - {{ item.id }}</title>@else<title>f0bm</title>@endif
<link rel="icon" type="image/gif" href="/s/img/favicon.png" />
<link rel="stylesheet" href="/s/css/f0ck.css?v=@mtime(/public/s/css/f0ck.css)">
<link rel="stylesheet" href="/s/css/w0bm.css?v=@mtime(/public/s/css/w0bm.css)">
<link rel="stylesheet" href="/s/css/w0bm.css?v=@mtime(/public/s/css/w0bm.css)">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@if(typeof item !== "undefined")<link rel="canonical" href="https://w0bm.com/{{ item.id }}" />@endif
@if(typeof item !== 'undefined')
<link rel="canonical" href="https://w0bm.com/{{ item.id }}" />@endif
</head>
<body>
<!-- hier splitting betreiben -->
@include(snippets/navbar)
<canvas class="hidden-xs" id="bg"></canvas>
@include(snippets/navbar)

7
views/snippets/items-grid.html Normal file
View File

@@ -0,0 +1,7 @@
@each(items as item)
<a href="{{ link.main }}{{ item.id }}" data-mime="{{ item.mime }}"
data-mode="{{ item.tag_id ? ['','sfw','nsfw'][item.tag_id] : 'null' }}"
style="background-image: url('/t/{{ item.id }}.webp')">
<p></p>
</a>
@endeach

6
views/snippets/navbar.html
View File

@@ -2,7 +2,6 @@
<!-- logged in -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a>
<div class="navigation-links-guest">
<ol>
<a href="/tags">tags</a>
@@ -13,7 +12,7 @@
</ol>
</div>
<!-- show pagination only for tags and main page -->
@if(!/^\/\d$/.test(url.pathname))
@if(!/^\/\d+$/.test(url.pathname))
<div class="collapse navbar-collapse show" id="navbarSupportedContent">
<div class="pagination-container-fluid">
<div class="pagination-wrapper">
@@ -27,7 +26,6 @@
<!-- not logged in -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a>
<div class="navigation-links-guest">
<ol>
<a href="/tags">tags</a>
@@ -38,7 +36,7 @@
</ol>
</div>
<!-- show pagination only for tags and main page -->
@if(!/^\/\d$/.test(url.pathname))
@if(!/^\/\d+$/.test(url.pathname))
<div class="collapse navbar-collapse show" id="navbarSupportedContent">
<div class="pagination-container-fluid">
<div class="pagination-wrapper">

30
views/tags.html
View File

@@ -2,27 +2,33 @@
<div id="main">
<div class="container">
<h3 style="text-align: center;">☯</h3>
<div class="tags">
<div class="tags-grid">
@if(session)
@each(toptags_regged as toptag)
<div class="tag badge badge-light mr-2">
<div class="tagbox-body">
<span class="toptag_id">{!! toptag.tag !!}</span>
<span class="toptag_tag"><a href="/tag/{!! toptag.tag !!}">{{ toptag.total_items }}</a></span>
<a href="/tag/{!! toptag.tag !!}" class="tag-card">
<div class="tag-card-image">
<img src="/tag_image/{!! toptag.tag !!}" loading="lazy" alt="{!! toptag.tag !!}">
</div>
</div>
<div class="tag-card-content">
<span class="tag-name">#{!! toptag.tag !!}</span>
<span class="tag-count">{{ toptag.total_items }} posts</span>
</div>
</a>
@endeach
@else
@each(toptags as toptag)
<div class="tag badge badge-light mr-2">
<div class="tagbox-body">
<span class="toptag_id">{!! toptag.tag !!}</span>
<span class="toptag_tag"><a href="/tag/{!! toptag.tag !!}">{{ toptag.total_items }}</a></span>
<a href="/tag/{!! toptag.tag !!}" class="tag-card">
<div class="tag-card-image">
<img src="/tag_image/{!! toptag.tag !!}" loading="lazy" alt="{!! toptag.tag !!}">
</div>
</div>
<div class="tag-card-content">
<span class="tag-name">#{!! toptag.tag !!}</span>
<span class="tag-count">{{ toptag.total_items }} posts</span>
</div>
</a>
@endeach
@endif
</div>
</div>
</div>
@include(snippets/footer)
@include(snippets/footer)