alice.pds.demo.boltless.dev
This repository has no description
1{{ define "title" }}timeline{{ end }}
2
3{{ define "extrameta" }}
4 <meta property="og:title" content="timeline · tangled" />
5 <meta property="og:type" content="object" />
6 <meta property="og:url" content="https://tangled.org" />
7 <meta property="og:description" content="tightly-knit social coding" />
8{{ end }}
9
10{{ define "mainLayout" }}
11<div class="flex-grow">
12 <div class="max-w-screen-xl mx-auto flex flex-col gap-4">
13 <main>{{ block "content" . }}{{ end }}</main>
14 </div>
15</div>
16{{ end }}
17
18{{ define "content" }}
19<div class="lg:hidden">
20 {{ template "timeline/fragments/newsletter" . }}
21 {{ template "timeline/fragments/goodfirstissues" . }}
22 {{ template "timeline/fragments/trending" . }}
23 {{ template "timeline/fragments/timeline" . }}
24</div>
25
26<div class="hidden lg:grid grid-cols-3 gap-x-2 gap-y-6">
27 <div id="gfi-banner" class="col-span-3 max-w-4xl w-full mx-auto">
28 {{ template "timeline/fragments/goodfirstissues" . }}
29 </div>
30 <div id="newsletter-widget-col" class="pl-8 flex-col hidden">
31 {{ template "timeline/fragments/newsletterWidget" . }}
32 </div>
33
34 <div class="col-span-2 flex flex-col">
35 {{ template "timeline/fragments/timeline" . }}
36 </div>
37 <div class="flex flex-col gap-6 pl-8">
38 {{ template "timeline/fragments/trendingSidebar" . }}
39 </div>
40</div>
41
42<script>
43 (function() {
44 var gfi = document.getElementById('gfi-banner');
45 var col = document.getElementById('newsletter-widget-col');
46 if (!gfi || !col) return;
47
48 function showNewsletter() {
49 col.classList.remove('hidden');
50 col.classList.add('flex');
51 gfi.classList.remove('col-span-3', 'max-w-4xl', 'mx-auto');
52 gfi.classList.add('col-span-2');
53 }
54
55 function hideNewsletter() {
56 col.classList.add('hidden');
57 col.classList.remove('flex');
58 gfi.classList.remove('col-span-2');
59 gfi.classList.add('col-span-3', 'max-w-4xl', 'mx-auto');
60 }
61
62 // If the newsletter widget is still in the DOM, switch to two-column
63 if (document.getElementById('newsletter-widget')) {
64 showNewsletter();
65 }
66
67 // Watch for mid-session dismissal
68 var obs = new MutationObserver(function() {
69 if (!document.getElementById('newsletter-widget')) {
70 hideNewsletter();
71 obs.disconnect();
72 }
73 });
74 obs.observe(col, { childList: true, subtree: true });
75 })();
76</script>
77{{ end }}