@@ -97,5 +105,19 @@ {{integrations-and-plugins}} | BTCPay Server
+
+
+
+
+
+
+ Skip to content
+
{{individual-donations}}
} } + diff --git a/src/html/integrations/tmpl.html b/src/html/integrations/tmpl.html new file mode 100644 index 00000000..9534a6cc --- /dev/null +++ b/src/html/integrations/tmpl.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + {{_hreflangLinks}} + + + +
+
+
+
+
+
diff --git a/src/html/menu-tmpl.html b/src/html/menu-tmpl.html
index 75c1af5e..5b362a18 100644
--- a/src/html/menu-tmpl.html
+++ b/src/html/menu-tmpl.html
@@ -77,19 +77,16 @@
+
+ {{_menTemp}}
+
+
+
+
+ {{_ftblk}}
+ {{integrations-and-plugins}}
+
+
+
+ {{_integrationsFilters}}
+ - {{_integrationsGrid}}
- {{live-demo}}
+ {{getting-started}}
+ {{live-demo}}
+
+
diff --git a/src/html/tmpl.html b/src/html/tmpl.html
index e02aaa0c..339e8121 100644
--- a/src/html/tmpl.html
+++ b/src/html/tmpl.html
@@ -10,11 +10,18 @@
+
+
+
+
+
+ {{_hreflangLinks}}
+
+
+
+
+ Choose language
+ +
+
+
+ - {{_allLngOpts}}
@@ -65,23 +87,22 @@
@@ -193,62 +214,10 @@
{{start-accepting-bitcoin}}
-{{btcpay-server-tag-line}}
+{{btcpay-server-tag-line}}
- 
- 
+
+
-
+
+
{{automation-via-api}}
-
+ {{case-studies}}
--
-
-
-
-
-
- Namecheap
-Namecheap surpasses $73M in BTC revenue with 1.1m transactions through BTCPay
- -
- -
-
-
-
- Bitcoin Atlantis
-€115,100 from 8,750 Transactions in 3 Days, Showcasing Bitcoin's Role as a Payment Method.
- -
- -
-
-
-
- Bitcoin People
-Bitcoin People built a mobile app on top of BTCPay's API to scale bitcoin to 270 merchants.
- -
- -
-
-
-
- Bitcoin Jungle
-Bitcoin Jungle enables 200+ stores in Costa Rica to embrace Bitcoin.
- -
-
+
{{case-studies}}
+ {{_caseStudiesBlock}} +
@@ -256,7 +225,8 @@
{{integrations-and-plugins}}
-
+
{{opencart}}
@@ -267,7 +237,7 @@
- {{integrations-and-plugins}}
{{wix}} - + {{pretix}} @@ -277,7 +247,7 @@{{integrations-and-plugins}}
- {{api}} + {{api}} @@ -285,7 +255,7 @@{{integrations-and-plugins}}
- {{woocommerce}} + {{woocommerce}} @@ -293,7 +263,7 @@{{integrations-and-plugins}}
- {{drupal}} + {{drupal}} @@ -324,21 +294,24 @@{{integrations-and-plugins}}
{{ghost}} - + {{custom-integration}} - + {{whmcs}} - {{magento}} + {{magento}} - {{prestashop}} + {{prestashop}} - {{zapier}} + {{zapier}} {{invoiceninja}} @@ -346,22 +319,42 @@{{integrations-and-plugins}}
{{integrations-and-plugins}}
+{{integrations-and-plugins}}
-
-
-
-
-
- {{what-is-btcpay}}
-
-
-
-
+
@@ -412,12 +406,12 @@ {{btcpay-for-communities}}
-
+
{{what-is-btcpay}}
+
+
+
+
+ -
+
-
+ ++
What is BTCPay Server
+++
+
+
+ -
+ ++
{{btcpay-for-communities}}
+++
+
+
+
@@ -369,8 +362,8 @@
- 
+
{{btcpay-for-communities}}
{{docs}}
{{need-help-using}}
- {{read-docs}} + {{read-docs}}{{having-a-technical}}
@@ -379,7 +372,8 @@{{docs}}
+
+ `;
+ }
+
+ function makeIframe(card, autoplay, requestFs) {
+ const player = card.querySelector('.vc-player');
+ if (!player || !player.dataset.yt) return;
+ const id = player.dataset.yt;
+ const auto = autoplay ? '1' : '0';
+ player.innerHTML = ``;
+ if (requestFs && isSmallScreen()) {
+ const inner = card.querySelector('.vc-inner') || player;
+ reqFullscreen(inner);
+ }
+ }
+
+ function stopNonActive() {
+ cards.forEach((c, idx) => { if (idx !== i) makeThumb(c); });
+ }
+
+ function updateDots() {
+ if (!dotsWrap) return;
+ dotsWrap.innerHTML = '';
+ cards.forEach((c, idx) => {
+ const dot = document.createElement('button');
+ dot.type = 'button';
+ const titleEl = c.querySelector('.vc-title');
+ const label = (titleEl && titleEl.textContent || '').trim() || `Slide ${idx+1}`;
+ dot.setAttribute('aria-label', label);
+ dot.setAttribute('role', 'tab');
+ dot.setAttribute('aria-selected', idx === i ? 'true' : 'false');
+ dot.addEventListener('click', ()=>{ i = idx; update(); });
+ dotsWrap.appendChild(dot);
+ })
+ }
+
+ function update() {
+ const px = centerActivePx();
+ cards.forEach((c, idx) => c.classList.toggle('is-active', idx === i));
+ track.style.transform = `translateX(-${px}px)`;
+ updateDots();
+ stopNonActive();
+ // announce to SR
+ if (ariaLive) {
+ const titleEl = cards[i].querySelector('.vc-title');
+ const label = (titleEl && titleEl.textContent || '').trim() || `Slide ${i+1}`;
+ ariaLive.textContent = `${i+1} of ${cards.length}: ${label}`;
+ }
+ // autoplay if requested and current not yet iframe
+ if (pendingAutoplay) {
+ const player = cards[i].querySelector('.vc-player');
+ if (player && !player.querySelector('iframe')) makeIframe(cards[i], true, true);
+ pendingAutoplay = false;
+ }
+ }
+
+ function go(dir, opts) {
+ i = (i + dir + cards.length) % cards.length;
+ pendingAutoplay = !!(opts && opts.autoplay);
+ update();
+ }
+
+ if (prev) prev.addEventListener('click', () => go(-1, {autoplay:false}));
+ if (next) next.addEventListener('click', () => go(1, {autoplay:false}));
+ root.addEventListener('keydown', (e)=>{
+ if (e.key === 'ArrowLeft') { go(-1, {autoplay:false}); }
+ if (e.key === 'ArrowRight') { go(1, {autoplay:false}); }
+ });
+
+ root.addEventListener('click', (e)=>{
+ const btn = e.target.closest('.vc-play');
+ if (!btn) return;
+ const card = e.target.closest('.vc-card');
+ const idx = cards.indexOf(card);
+ if (idx === i) makeIframe(card, true, true);
+ });
+
+ // touch swipe
+ let tsX = 0, tsY = 0, isTouching = false;
+ root.addEventListener('touchstart', (e)=>{
+ const t = e.changedTouches[0];
+ tsX = t.clientX; tsY = t.clientY; isTouching = true;
+ }, {passive: true});
+
+ // wheel/trackpad horizontal paging
+ let wheelLock = false;
+ root.addEventListener('wheel', (e)=>{
+ // only handle if horizontal intent (or strong vertical like 2-finger scroll)
+ const ax = Math.abs(e.deltaX);
+ const ay = Math.abs(e.deltaY);
+ if (wheelLock) return;
+ if (ax > 10 || ay > 30) {
+ const dir = (e.deltaX > 0 || e.deltaY > 0) ? 1 : -1;
+ wheelLock = true;
+ e.preventDefault();
+ go(dir, {autoplay:false});
+ setTimeout(()=> wheelLock = false, 400);
+ }
+ }, {passive: false});
+ root.addEventListener('touchend', (e)=>{
+ if (!isTouching) return;
+ const t = e.changedTouches[0];
+ const dx = t.clientX - tsX; const dy = t.clientY - tsY;
+ isTouching = false;
+ if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) {
+ if (dx < 0) go(1, {autoplay:true}); else go(-1, {autoplay:true});
+ }
+ }, {passive: true});
+
+ cards.forEach(makeThumb);
+ update();
+ window.addEventListener('resize', ()=> update());
+ window.addEventListener('orientationchange', ()=>{
+ const active = cards[i];
+ if (!active) return;
+ const hasIframe = !!active.querySelector('.vc-player iframe');
+ if (window.innerWidth <= 700) {
+ if (window.innerWidth > window.innerHeight && hasIframe && !document.fullscreenElement) {
+ const inner = active.querySelector('.vc-inner') || active.querySelector('.vc-player');
+ if (inner && inner.requestFullscreen) try { inner.requestFullscreen(); } catch(_) {}
+ } else if (window.innerWidth <= window.innerHeight && document.fullscreenElement) {
+ if (document.exitFullscreen) try { document.exitFullscreen(); } catch(_) {}
+ }
+ }
+ });
+})();
+
+// Language modal + search
+(function(){
+ const modal = document.getElementById('langModal');
+ if (!modal) return;
+ const openers = document.querySelectorAll('.open-lang-modal');
+ const closer = modal.querySelector('[data-lang-modal-close]');
+ const search = document.getElementById('langSearch');
+ const list = document.getElementById('langAllList');
+ const links = list ? Array.from(list.querySelectorAll('li')) : [];
+ function open() { modal.removeAttribute('hidden'); if (search) setTimeout(()=>search.focus(), 10); }
+ function close() { modal.setAttribute('hidden', ''); }
+ openers.forEach(el => el.addEventListener('click', (e)=>{ e.preventDefault(); open(); }));
+ if (closer) closer.addEventListener('click', (e)=>{ e.preventDefault(); close(); });
+ modal.addEventListener('click', (e)=>{ if (e.target === modal) close(); });
+ document.addEventListener('keydown', (e)=>{ if (e.key === 'Escape' && !modal.hasAttribute('hidden')) close(); });
+ if (search && links.length) {
+ search.addEventListener('input', ()=>{
+ const q = search.value.trim().toLowerCase();
+ links.forEach(li => {
+ const text = (li.textContent || '').toLowerCase();
+ li.style.display = !q || text.indexOf(q) >= 0 ? '' : 'none';
+ })
+ })
+ }
+})();
+
+// Language dropdown (compact lists)
+(function(){
+ const triggers = Array.from(document.querySelectorAll('#lnNom'));
+ if (!triggers.length) return;
+ triggers.forEach(trigger => {
+ const parent = trigger.closest('.lnNomPar');
+ if (!parent) return;
+ trigger.addEventListener('click', function(e){
+ parent.classList.toggle('open');
+ });
+ document.addEventListener('click', function(e){
+ if (!parent.contains(e.target)) parent.classList.remove('open');
+ });
+ });
+})();
+
+// Integrations grid subtle parallax
+(function(){
+ const root = document.querySelector('.integrations-grid');
+ if (!root) return;
+ const prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+ if (prefersReduced) return;
+
+ const items = Array.from(root.querySelectorAll('.svg-link'));
+ if (!items.length) return;
+
+ // Stable depth pattern; increase overall depth and avoid zeros for more motion
+ const pattern = [0.85, 0.55, 0.2, -0.45, -0.8, 0.35, -0.25, -0.6, 0.5, -0.3, 0.7, 0.15, -0.5, 0.4];
+ items.forEach((el, idx) => {
+ const d = parseFloat(el.getAttribute('data-depth'));
+ const depth = Number.isFinite(d) ? Math.max(-1, Math.min(1, d)) : pattern[idx % pattern.length];
+ // @ts-ignore - stash for quick access
+ el._depth = depth;
+ // small perf hint
+ el.style.willChange = 'transform';
+ });
+
+ const MAX_SHIFT_DESKTOP = 36; // px
+ const MAX_SHIFT_MOBILE = 22; // px
+
+ let ticking = false;
+ function onScroll() {
+ if (!ticking) {
+ ticking = true;
+ requestAnimationFrame(update);
+ }
+ }
+
+ function update() {
+ ticking = false;
+ const rect = root.getBoundingClientRect();
+ const vh = window.innerHeight || document.documentElement.clientHeight || 800;
+ const maxShift = (vh <= 700) ? MAX_SHIFT_MOBILE : MAX_SHIFT_DESKTOP;
+
+ // Visibility progress of the grid through the viewport: 0..1
+ const total = rect.height + vh || 1;
+ const seen = Math.min(total, Math.max(0, vh - rect.top));
+ const phase = seen / total; // 0 at first touch, 1 when fully passed
+ const base = (phase - 0.5) * 2 * maxShift; // -max..max around the midpoint
+
+ items.forEach((el) => {
+ // @ts-ignore
+ const depth = el._depth || 0;
+ const shift = Math.round((base * depth) * 100) / 100;
+ el.style.transform = `translateY(${shift}px)`;
+ });
+ }
+
+ // Only run reactions while in view to save work
+ if ('IntersectionObserver' in window) {
+ const io = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ window.addEventListener('scroll', onScroll, { passive: true });
+ window.addEventListener('resize', onScroll);
+ onScroll();
+ } else {
+ window.removeEventListener('scroll', onScroll);
+ window.removeEventListener('resize', onScroll);
+ }
+ });
+ }, { root: null, threshold: 0 });
+ io.observe(root);
+ } else {
+ window.addEventListener('scroll', onScroll, { passive: true });
+ window.addEventListener('resize', onScroll);
+ onScroll();
+ }
+})();
+
+// Contributors: staggered pop-in (Mexican wave) when in view
+(function(){
+ const grid = document.getElementById('donGr');
+ if (!grid) return;
+ const prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+ if (prefersReduced) return;
+
+ const items = Array.from(grid.querySelectorAll('.ind-icon'));
+ if (!items.length) return;
+
+ // Prepare initial state only when JS is active
+ grid.classList.add('-wave-ready');
+ items.forEach((el, i) => el.style.setProperty('--i', String(i)));
+
+ function activate() {
+ grid.classList.add('is-inview');
+ }
+
+ if ('IntersectionObserver' in window) {
+ const section = document.getElementById('contributors') || grid;
+ const io = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ activate();
+ io.disconnect(); // fire once
+ }
+ });
+ }, { root: null, threshold: 0.15 });
+ io.observe(section);
+ } else {
+ // Fallback without IO: trigger shortly after load
+ setTimeout(activate, 200);
+ }
+})();
diff --git a/tasks/copy_static.js b/tasks/copy_static.js
new file mode 100644
index 00000000..235f0f71
--- /dev/null
+++ b/tasks/copy_static.js
@@ -0,0 +1,28 @@
+// Cross-platform copy: copies contents of src/static into dist
+const { readdirSync, statSync, mkdirSync, copyFileSync } = require('fs')
+const { resolve, join, relative, dirname } = require('path')
+
+const SRC = resolve(__dirname, '../src/static')
+const DEST = resolve(__dirname, '../dist')
+
+function walk(dir) {
+ return readdirSync(dir).flatMap(name => {
+ const p = join(dir, name)
+ const s = statSync(p)
+ return s.isDirectory() ? walk(p) : [p]
+ })
+}
+
+function main() {
+ const files = walk(SRC)
+ files.forEach(file => {
+ const rel = relative(SRC, file)
+ const out = join(DEST, rel)
+ mkdirSync(dirname(out), { recursive: true })
+ copyFileSync(file, out)
+ })
+ console.log(`✅ Copied ${files.length} static file(s) to dist/`)
+}
+
+try { main() } catch (e) { console.error('🚨 copy_static failed:', e.message); process.exit(1) }
+
diff --git a/tasks/fetch_case_studies.js b/tasks/fetch_case_studies.js
new file mode 100644
index 00000000..facbba40
--- /dev/null
+++ b/tasks/fetch_case_studies.js
@@ -0,0 +1,76 @@
+// Build-time fetcher for blog case studies
+// Writes data/caseStudies.json for tasks/render_html.js to consume
+const { writeFileSync, mkdirSync } = require('fs')
+const { resolve, dirname } = require('path')
+const request = require('sync-request')
+
+function tryFetch(url) {
+ try {
+ const res = request('GET', url, { headers: { 'User-Agent': 'btcpayserver.org-build' } })
+ if (res.statusCode >= 200 && res.statusCode < 300) return res.getBody('utf8')
+ } catch {}
+ return null
+}
+
+function saveJSON(file, data) {
+ const filePath = resolve(__dirname, `../data/${file}`)
+ mkdirSync(dirname(filePath), { recursive: true })
+ writeFileSync(filePath, JSON.stringify(data, null, 2))
+}
+
+function run() {
+ // Prefer JSON Feed if available
+ const jsonFeed = tryFetch('https://blog.btcpayserver.org/feed.json')
+ if (jsonFeed) {
+ try {
+ const feed = JSON.parse(jsonFeed)
+ let items = (feed.items || []).filter(it => (it.tags || []).some(t => /case[- ]?stud/i.test(t))).map(it => ({
+ id: it.id || it.url,
+ title: it.title,
+ excerpt: (it.summary || '').replace(/\s+/g, ' ').trim(),
+ hero: (it.image || ''),
+ url: it.url,
+ pdf: null
+ }))
+ // take top 5
+ if (items.length >= 5) {
+ return saveJSON('caseStudies.json', items.slice(0,5))
+ }
+ // pad to at least 5 with known fallbacks
+ const fallback = [
+ { id: 'namecheap', title: 'Namecheap', excerpt: 'Namecheap surpasses $73M in BTC revenue with 1.1m transactions through BTCPay', hero: '/img/case-studies/namecheap-featured.png', url: 'https://blog.btcpayserver.org/case-study-namecheap/', pdf: '/case-studies/namecheap.pdf' },
+ { id: 'bitcoin-atlantis', title: 'Bitcoin Atlantis', excerpt: '€115,100 from 8,750 transactions in 3 days.', hero: '/img/case-studies/bitcoin-atlantis-featured.png', url: 'https://blog.btcpayserver.org/case-study-bitcoin-atlantis/', pdf: '/case-studies/BitcoinAtlantis.pdf' },
+ { id: 'bitcoin-people', title: 'Bitcoin People', excerpt: "Built a mobile app atop BTCPay's API to scale to 270 merchants.", hero: '/img/case-studies/bitcoin-people.jpg', url: 'https://blog.btcpayserver.org/case-study-bitcoin-people/', pdf: '/case-studies/BitcoinPeople2024.pdf' },
+ { id: 'bitcoin-jungle', title: 'Bitcoin Jungle', excerpt: 'Enables 200+ stores in Costa Rica to embrace Bitcoin.', hero: '/img/case-studies/bitcoin-jungle.jpg', url: 'https://blog.btcpayserver.org/case-study-bitcoin-jungle-cr/', pdf: '/case-studies/BitcoinJungleCR2023.pdf' },
+ { id: 'hodlhodl', title: 'HodlHodl', excerpt: 'A Bitcoin business case using BTCPay Server.', hero: '/img/case-studies/hodlhodl.jpg', url: 'https://blog.btcpayserver.org/category/case-studies/', pdf: null }
+ ]
+ const seen = new Set(items.map(it => it.id))
+ for (const f of fallback) { if (items.length >= 5) break; if (!seen.has(f.id)) items.push(f) }
+ return saveJSON('caseStudies.json', items.slice(0,5))
+ } catch {}
+ }
+
+ // Fallback: default to existing static examples (no network parsing of RSS here)
+ const fallback = [
+ {
+ id: 'namecheap',
+ title: 'Namecheap',
+ excerpt: 'Namecheap surpasses $73M in BTC revenue with 1.1m transactions through BTCPay',
+ hero: '/img/case-studies/namecheap-featured.png',
+ url: 'https://blog.btcpayserver.org/case-study-namecheap/',
+ pdf: '/case-studies/namecheap.pdf'
+ },
+ { id: 'bitcoin-atlantis', title: 'Bitcoin Atlantis', excerpt: '€115,100 from 8,750 transactions in 3 days.', hero: '/img/case-studies/bitcoin-atlantis-featured.png', url: 'https://blog.btcpayserver.org/case-study-bitcoin-atlantis/', pdf: '/case-studies/BitcoinAtlantis.pdf' },
+ { id: 'bitcoin-people', title: 'Bitcoin People', excerpt: "Built a mobile app atop BTCPay's API to scale to 270 merchants.", hero: '/img/case-studies/bitcoin-people.jpg', url: 'https://blog.btcpayserver.org/case-study-bitcoin-people/', pdf: '/case-studies/BitcoinPeople2024.pdf' },
+ { id: 'bitcoin-jungle', title: 'Bitcoin Jungle', excerpt: 'Enables 200+ stores in Costa Rica to embrace Bitcoin.', hero: '/img/case-studies/bitcoin-jungle.jpg', url: 'https://blog.btcpayserver.org/case-study-bitcoin-jungle-cr/', pdf: '/case-studies/BitcoinJungleCR2023.pdf' },
+ { id: 'hodlhodl', title: 'HodlHodl', excerpt: 'A Bitcoin business case using BTCPay Server.', hero: '/img/case-studies/hodlhodl.jpg', url: 'https://blog.btcpayserver.org/category/case-studies/', pdf: null }
+ ]
+ saveJSON('caseStudies.json', fallback.slice(0,5))
+}
+
+try {
+ run()
+ console.log('✅ Case studies data prepared')
+} catch (e) {
+ console.error('🚨 Could not generate case studies:', e.message)
+}
diff --git a/tasks/optimize_images.js b/tasks/optimize_images.js
new file mode 100644
index 00000000..f93309d3
--- /dev/null
+++ b/tasks/optimize_images.js
@@ -0,0 +1,35 @@
+// Optional image optimizer: generates WebP/AVIF alongside originals
+// Safe no-op if sharp is not installed.
+const { readdirSync, statSync, readFileSync, writeFileSync, mkdirSync } = require('fs')
+const { join, dirname, extname, basename } = require('path')
+
+let sharp
+try { sharp = require('sharp') } catch { console.log('ℹ️ Image optimizer: sharp not installed; skipping.') ; process.exit(0) }
+
+const SRC = join(__dirname, '../src/static/img')
+const OUT = join(__dirname, '../dist/img')
+
+function walk(dir) {
+ return readdirSync(dir).flatMap(name => {
+ const p = join(dir, name)
+ const s = statSync(p)
+ if (s.isDirectory()) return walk(p)
+ return [p]
+ })
+}
+
+async function convert(file) {
+ const buf = readFileSync(file)
+ const rel = file.replace(SRC, '')
+ const base = join(OUT, dirname(rel), basename(rel, extname(rel)))
+ mkdirSync(dirname(base), { recursive: true })
+ await sharp(buf).webp({ quality: 82 }).toFile(base + '.webp')
+ await sharp(buf).avif({ quality: 55 }).toFile(base + '.avif')
+}
+
+(async function(){
+ const files = walk(SRC).filter(f => /\.(png|jpg|jpeg)$/i.test(f))
+ await Promise.all(files.map(convert))
+ console.log(`✅ Image optimization complete: ${files.length} files processed.`)
+})().catch(e => { console.error('🚨 Image optimize failed:', e.message); process.exit(1) })
+
diff --git a/tasks/render_html.js b/tasks/render_html.js
index 86c3ff05..d4204e0e 100644
--- a/tasks/render_html.js
+++ b/tasks/render_html.js
@@ -15,6 +15,7 @@ const indexTmpl = getTemplate('html/tmpl.html')
const donateTmpl = getTemplate('html/donate/tmpl.html')
const menuTmpl = getTemplate('html/menu-tmpl.html')
const footerTmpl = getTemplate('html/footer-tmpl.html')
+const integrationsTmpl = getTemplate('html/integrations/tmpl.html')
const contributors = getContributorJSON()
const _contributorsBlock = contributors.map((item) => `