Fix mobile, fix sort issues, split components into files

src/components/CountdownItem.ts

@@ -0,0 +1,15 @@
+import { div, h3, p, reusable, span, strong } from '@dolanske/cascade'
+import type { FormattedEvent } from '../events'
+
+export const CountdownItem = reusable('li', (ctx, props: FormattedEvent) => {
+  ctx.nest([
+    h3(props.name),
+    p(props.description).if(props.description),
+    div().class('divider'),
+    span(props.displayDate).class('date'),
+    div([
+      strong(props.untilDate),
+      span(props.untilTime),
+    ]).class('countdown'),
+  ])
+})

src/components/Sidebar.ts

@@ -0,0 +1,13 @@
+import { div, h2, img, p, span, strong } from '@dolanske/cascade'
+
+export const Sidebar = div().setup((ctx) => {
+  ctx.class('sidebar')
+  ctx.nest([
+    img().attr('src', 'https://mavulp.github.io/countdown/logo.svg'),
+    h2([
+      span('Hivecom'),
+      strong('Countdown'),
+    ]),
+    p().html(`Collection of upcoming events in the hivecom community. If you want your event added, please <a href="https://github.com/Mavulp/countdown/issues/new?assignees=dolanske&labels=&projects=&template=new-event.md&title=%5BRequest%5D+New+event" tarrget="_blank">create an issue</a>. <br /><br /> Designed and implemented by dolanske on Wednesday, in 2024.`),
+  ])
+})

src/main.ts

@@ -1,4 +1,4 @@
-import { div, fragment, h2, h3, img, p, reusable, span, strong, ul } from '@dolanske/cascade'
+import { div, fragment, ul } from '@dolanske/cascade'
 import { ref } from '@vue/reactivity'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -7,34 +7,27 @@ import duration from 'dayjs/plugin/duration'
 import type { FormattedEvent } from './events'
 import { events } from './events'
 import { INPUT_FORMAT, formatEventData } from './time'
+import { CountdownItem } from './components/CountdownItem'
+import { Sidebar } from './components/Sidebar'
 
 dayjs.extend(relativeTime)
 dayjs.extend(customParseFormat)
 dayjs.extend(duration)
 
-const CountdownItem = reusable('li', (ctx, props: FormattedEvent) => {
-  ctx.nest([
-    h3(props.name),
-    p(props.description).if(props.description),
-    div().class('divider'),
-    span(props.displayDate).class('date'),
-    div([
-      strong(props.untilDate),
-      span(props.untilTime),
-    ]).class('countdown'),
-  ])
-})
-
+// One time use component for logic extraction
 const Countdown = ul().setup((ctx) => {
   // Get the square root of the event count, to more evenly distrubute them
   // across the viewport
   const columns = Math.min(3, Math.ceil(Math.sqrt(events.length)))
   ctx.style({ 'grid-template-columns': `repeat(${columns}, 1fr)` })
 
-  // Preformat events to contain the `until` property which is derived from the
-  // event date
+  // Preformat events to include the countdown values
   const formattedEvents = ref<FormattedEvent[]>(formatEventData(
-    events
+    // Deploying to github pages creates a static file which is served to all
+    // users. So when a user visits the page, the array would get sorted. Next
+    // user would re-sort it again. By creating a shallow copy we should
+    // hopefully prevent this from happening
+    [...events]
       .filter(item => dayjs(item.date, INPUT_FORMAT).diff(dayjs()) > 0)
       .sort((a, b) => dayjs(a.date).diff(dayjs(b.date)) > 0 ? 1 : -1),
   ))
@@ -44,7 +37,7 @@ const Countdown = ul().setup((ctx) => {
     formattedEvents.value = formatEventData(formattedEvents.value)
   }, 1000)
 
-  // Render
+  // Render items
   ctx.for(formattedEvents, (event) => {
     return CountdownItem().props(event)
   })
@@ -53,19 +46,7 @@ const Countdown = ul().setup((ctx) => {
   ctx.onDestroy(() => clearInterval(intervalHandler))
 })
 
-const Sidebar = div().setup((ctx) => {
-  ctx.class('sidebar')
-  ctx.nest([
-    img().attr('src', 'https://mavulp.github.io/countdown/logo.svg'),
-    h2([
-      span('Hivecom'),
-      strong('Countdown'),
-    ]),
-    p().html(`Collection of upcoming events in the hivecom community. If you want your event added, please <a href="https://github.com/Mavulp/countdown/issues/new?assignees=dolanske&labels=&projects=&template=new-event.md&title=%5BRequest%5D+New+event" tarrget="_blank">create an issue</a>. <br /><br /> Designed and implemented by dolanske on Wednesday, in 2024.`),
-  ])
-})
-
-const App = fragment().nest([
+const App = fragment([
   Countdown,
   div(
     Sidebar,

src/style/index.css

@@ -1,20 +1,23 @@
 @import url('./variables.css');
 @import url('./reset.css');
 @import url('./fonts.css');
+@import url('./viewports.css');
 
-/* Style shit bro */
 h1 {
   display: none;
 }
 
+html {
+  background-color: var(--color-bg-black);
+}
+
 #app {
   font-family: 'Inter';
   font-size: 63.5%;
   position: relative;
   color: var(--color-text);
   min-height: 100vh;
   width: 100vw;
-  background-color: var(--color-bg-black);
 
   display: flex;
 
@@ -168,15 +171,3 @@ h1 {
     }
   }
 }
-
-@media screen and (max-width: 1280px) {
-  ul {
-    grid-template-columns: 1fr 1fr !important;
-  }
-}
-
-@media screen and (max-width: 888px) {
-  ul {
-    grid-template-columns: 1fr !important;
-  }
-}

src/style/viewports.css

@@ -0,0 +1,74 @@
+@media screen and (max-width: 1280px) {
+  #app ul {
+    grid-template-columns: 1fr 1fr !important;
+  }
+}
+
+@media screen and (max-width: 888px) {
+  #app ul {
+    grid-template-columns: 1fr !important;
+
+    li {
+      padding: 16px;
+
+      h3 {
+        font-size: 0.9rem;
+      }
+
+      .date,
+      p {
+        font-size: 0.7rem;
+      }
+
+      .countdown {
+        strong {
+          font-size: 1.8rem;
+        }
+
+        span {
+          font-size: 0.7rem;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 512px) {
+  #app {
+    flex-direction: column-reverse;
+
+    .sidebar-wrap {
+      width: 100%;
+
+      .sidebar {
+        display: flex;
+        border-bottom: 1px solid var(--color-border);
+        width: 100%;
+        position: relative;
+        gap: 8px;
+        align-items: flex-start;
+
+        img {
+          position: relative;
+          top: unset;
+          right: unset;
+          width: 24px;
+          margin-right: 8px;
+        }
+
+        h2 {
+          writing-mode: initial;
+          text-orientation: initial;
+          font-size: 1rem;
+          /* align-self: flex-end; */
+          margin: 0;
+          text-align: right;
+
+          span {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}

src/time.ts

@@ -1,6 +1,7 @@
 import dayjs from 'dayjs'
 import type { CountdownEvent, FormattedEvent } from './events'
 
+// Specify the date input format
 export const INPUT_FORMAT = 'DD-MM-YYYY'
 
 export function formatDateUntil(date: string) {