Merge pull request 'Revert to stream landing page, add date markers' (#59) from r/lumbung.space:main into main

Reviewed-on: ruangrupa/lumbung.space#59

themes/lumbung-theme/layouts/_default/list.html

@@ -23,6 +23,10 @@
           {{ else if in .Params.categories "pen" }}
 
             {{- partial "pen_card.html" . -}}
+
+          {{ else if in .Params.categories "book" }}
+
+            {{- partial "book.html" . -}}
           
           {{ else if in .Params.categories "page" }}
 

themes/lumbung-theme/layouts/index.html

@@ -1,82 +1,32 @@
 {{ define "main" }}
   <main>
     <section class='entries'>
-      <div class="welcome-text"><u>lumbung.space</u> is a social and publishing platform for sharing harvests by all members online. It is non-extractive, co governed by the users, and is built on open platforms.</div>
+      <div class="h-feed">
-      <div class="app-columns">
+{{ range (.Paginate (.Site.RegularPages.GroupByDate "January 2006") 20 ).PageGroups  }}
-        <div class="app-column">
-          <a href="/timeline/">
-            <img class="app-icon" src="/img/buttons/harvest.svg" alt="harvest">
-            <p class="app-name">harvest</p>
-          </a>
-          <p class="app-description">Digital timeline of harvests for collective learning</p>
-        </div>
 
-        <div class="app-column">
+          <span class="date-marker">{{ .Key }}</span>
-          <a href="/calendar/">
+          {{ range .Pages }}
-            <img class="app-icon" src="/img/buttons/calendar.svg" alt="calendar">
+          {{ if in .Params.categories "tv"}}
-            <p class="app-name">calendar</p>
+            {{- partial "video_box.html" . -}}
-          </a>
+          {{ else if in .Params.categories "calendar" }}
-          <p class="app-description">Watch out for upcoming lumbung programs on our open-source calendar</p>
+            {{- partial "calendar_card.html" . -}}
-        </div>
+          {{ else if in .Params.categories "network" }}
-
+            {{- partial "network_card.html" . -}}
-        <div class="app-column">
+          {{ else if in .Params.categories "pen" }}
-          <a href="/tv/">
+            {{- partial "pen_card.html" . -}}
-            <img class="app-icon" src="/img/buttons/tv.svg" alt="tv">
+          {{ else if in .Params.categories "shouts" }}
-            <p class="app-name">tv</p>
+            {{- partial "shout_card.html" . -}}
-          </a>
+          {{ else if in .Params.categories "books.lumbung.space"}}
-          <p class="app-description">Video archive. Watch or upload videos or start a livestream</p>
+          {{- partial "book_card.html" . -}}
-        </div>
+          {{ else }}
-      
+            {{- partial "card.html" . -}}
-        <div class="app-column">
+          {{ end }}  
-          <a href="/social/">
+        {{ end }}
-            <img class="app-icon" src="/img/buttons/social.svg" alt="social">
+        {{ end }}
-            <p class="app-name">social</p>
-          </a>
-          <p class="app-description">Like twitter but for us! Jokes, announcements, chitchat</p>
-        </div>
-
-        <div class="app-column">
-          <a href="/pen/">
-            <img class="app-icon" src="/img/buttons/pen.svg" alt="lumbung.pen">
-            <p class="app-name">pen</p>
-          </a>
-          <p class="app-description">Write and publish longer texts.</p>
-        </div>
-
-        <div class="app-column">
-          <a href="/shouts/">
-            <img class="app-icon" src="/img/buttons/shouts.svg" alt="shouts">
-            <p class="app-name">shouts</p>
-          </a>
-          <p class="app-description">lumbung members and artists share content from their ekosistems</p>
-        </div>
-      
-        <div class="app-column">
-          <a href="/tags/lumbungkios/">
-            <img class="app-icon" src="/img/buttons/kios.svg" alt="kios">
-            <p class="app-name">kios</p>
-          </a>
-          <p class="app-description">Network of decentralized and self-run Kios to sell products at different locations</p>
-        </div>
-
-        <div class="app-column">
-          <a href="/tags/lumbunggallery/">
-            <img class="app-icon" src="/img/buttons/gallery.svg" alt="gallery">
-            <p class="app-name">gallery</p>
-          </a>
-          <p class="app-description">Collectively governed, non speculative, and regenerative gallery of the lumbung network</p>
-        </div>
-
-        <div class="app-column">
-          <a href="https://books.lumbung.space/">
-            <img class="app-icon" src="/img/buttons/books.svg" alt="lumbung.books">
-            <p class="app-name">books</p>
-          </a>
-          <p class="app-description">Archive of publications. Share, read or download PDFs and ebooks</p>
-        </div>
-      
       </div>
-
+      <nav class="pagination-container">
+        {{ template "_internal/pagination.html" . }}
+      </nav>
       <div class="lumbung-radio-player" onclick="window.open('https://lumbungradio.stationofcommons.org', 'Lumbung Radio', 'height=800,width=450')">
         <svg class="lumbung-radio-play-button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M7 4V20L20 12L7 4Z" fill="#CA14D4" stroke="#CA14D4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -85,5 +35,4 @@
         <img src="/img/lumbung-radio-logo.png" alt="" height="30">
       </div>
   </main>
-{{ end }}
+{{ end }}
-

themes/lumbung-theme/static/css/main.css

@@ -45,6 +45,9 @@
 
     --sounds-light: #ECC5EC;
     --sounds-dark: #CA14D4;
+
+    --books-dark: #954d43;
+    --books-light: #edd7c4;
 }
 
 
@@ -94,6 +97,26 @@ body > iframe {
     background-color: peachpuff;
 }
 
+.date-marker{
+    background-color: #333333;
+    color: white;
+    font-style: bold;
+    padding: 1em;
+    margin: 1em;
+    height: max-content;
+    flex: 0 0 15%;
+    font-family: Gudea;
+    font-weight: 700;
+    text-align: center;
+}
+.date-marker:nth-child(odd){
+    transform: rotate(3deg);
+}
+.date-marker:nth-child(even){
+    transform: rotate(-2deg);
+}
+
+
 .side-bar {
     border: 2px solid var(--border-color);
     max-width: 400px;
@@ -723,6 +746,18 @@ div.pen-source {
     color: var(--kios-dark);
 }
 
+/* books cards */
+
+.book.card {
+    background-color: var(--books-light);
+    color: var(--books-dark);
+    border-color: var(--books-dark);
+}
+
+.tape-label.book span{
+    background-color: var(--books-dark);
+}
+
 /* calendar cards */
 
 .card.calendar {
@@ -816,7 +851,7 @@ div.pen-source {
 }
 
 
-/* Card metadata (video & calendar) */
+/* Card metadata (video, calendar & books) */
 
 .tape-label {
     display: flex;