Merge pull request #402 from drizzle-team/month-shipping

CHANGED: shipping section from weeks to months

Author: vitalii-staryk

src/components/LandingPage/Developers/Developers.astro

@@ -15,9 +15,9 @@ import homenko from './Images/team/homenko.jpg'
 import artem from './Images/team/artem.jpg'
 import vitalii from './Images/team/vitalii.jpg'
 import shippingData from '../../../data/shipping.yaml';
-import getWeekLabel from "../../../utils/getWeekLabel";
+import getMonthLabel from "../../../utils/getMonthLabel";
 import ProgressBar from "./ProgressBar.astro";
-import fillWeeksGaps from "../../../utils/fillWeeksGaps";
+import fillMonthsGaps from "../../../utils/fillMonthsGaps";
 import progress from "../../../data/progress";
 import addNofollowToExternalLinks from "../../../utils/addNofollowToExternalLinks";
 
@@ -83,7 +83,7 @@ const contributors: { name: string, photo: string}[] = [
   },
 ];
 
-const shipping = fillWeeksGaps(shippingData);
+const shipping = fillMonthsGaps(shippingData);
 ---
 <div class="developers_container">
   <div class="flex-container">
@@ -124,7 +124,7 @@ const shipping = fillWeeksGaps(shippingData);
         .map(([key, value]) => (
           <div class="week">
             <div class="week-title">
-              {getWeekLabel(key)}
+              {getMonthLabel(key)}
             </div>
             <div class="week-details-wrap">
               <ul class="week-details">
@@ -170,6 +170,17 @@ const shipping = fillWeeksGaps(shippingData);
     .week-text b {
         font-weight: 700;
     }
+
+    .week-text code {
+        font-size: 0.8125em;
+        padding: 1px 3px;
+    }
+
+    html.dark .week-text code {
+        background-color: #1a1a1a;
+        border-color: #292929;
+        color: #e2e8f0;
+    }
 </style>
 <style>
     .developers_container {
@@ -484,6 +495,7 @@ const shipping = fillWeeksGaps(shippingData);
         position: relative;
         border-radius: 8px;
         white-space: pre-line;
+        vertical-align: baseline;
     }
 
     html.dark .week-text {

src/data/shipping.yaml

@@ -1,4 +1,4 @@
-2024-10-07:
+2024-10:
   - |
     Documentation site restructure and improvements
 
@@ -48,32 +48,29 @@
     <li>LibSQL/Turso "generate" and "push" statement updates</li>
     <li>New `casing` param in `drizzle-kit`</li>
     </ul>
-    
-2024-09-09:
-  - Some Tweets 
 
-2024-08-19:
-  - We've updated <a href='https://x.com/DrizzleORM/status/1826693369357369712'>benchmarks</a> 🚀
+2024-09:
+  - Some Tweets
 
-2024-08-05:
+2024-08:
   - |
     <a href='https://x.com/DrizzleORM/status/1820462321942036749'><b>Drizzle Gateway</b></a> closed alpha release 🎉
   - |
     <a href='https://github.com/drizzle-team/brocli'><b>Brocli</b></a> - our new open-source library 👀
 
-  - | 
+  - |
     <a href='https://3310snake.com/'>Snake Game</a> released 🎉
     have some fun
     we've had a lot of fun
 
   - |
     <b>Kit <a href='https://github.com/drizzle-team/drizzle-orm/releases/tag/drizzle-kit%400.24.0'>v0.24.0</a> release</b>
-    
+
     <strong>Breaking changes:</strong>
     <ul>
     <li>Fixed <a href='https://github.com/drizzle-team/drizzle-kit-mirror/issues/342'>Composite primary key order is not consistent</a> by removing `sort` in SQLite</li>
     </ul>
-    
+
     <strong>Bug fixes:</strong>
     <ul>
     <li><a href='https://github.com/drizzle-team/drizzle-kit-mirror/issues/403'>[BUG] When using double type columns, import is not inserted</a></li>
@@ -95,14 +92,14 @@
     <li><a href='https://github.com/drizzle-team/drizzle-orm/issues/724'>[BUG]: jsonb always inserted as a json string when using postgres-js</a></li>
     <li><a href='https://github.com/drizzle-team/drizzle-orm/issues/1511'>[BUG]: jsonb type on postgres implement incorrectly</a></li>
     </ul>
-    
+
     <strong>Bug fixes:</strong>
     <ul>
     <li><a href='https://github.com/drizzle-team/drizzle-orm/issues/2568'>[BUG]: boolean mode not working with prepared statements (bettersqlite)</a></li>
     <li><a href='https://github.com/drizzle-team/drizzle-orm/issues/2672'>[BUG]: isTable helper function is not working</a></li>
     <li><a href='https://github.com/drizzle-team/drizzle-orm/issues/2690'>[BUG]: Documentation is outdated on inArray and notInArray Methods</a></li>
     </ul>
-  
+
   - |
     <b>Kit <a href='https://github.com/drizzle-team/drizzle-orm/releases/tag/drizzle-kit%400.23.2'>v0.23.2</a> release</b>
 
@@ -126,7 +123,28 @@
 
     • <a href='/docs/tutorials/drizzle-with-supabase'>Drizzle with Supabase Database</a>
     • <a href='/docs/tutorials/drizzle-with-vercel-edge-functions'>Drizzle with Vercel Edge Functions</a>
-2024-07-29:
+
+  - We've updated <a href='https://x.com/DrizzleORM/status/1826693369357369712'>benchmarks</a> 🚀
+
+2024-07:
+  - |
+    We've had podcast on <a href='https://www.youtube.com/watch?v=Hh9xqRWYEJs'>syntax.fm</a> 🎙️
+    Drizzle <> Sytnax merch drop - <a href='https://x.com/DrizzleORM/status/1815793307877871912'>see here</a>
+  - |
+    <b>ORM <a href='https://github.com/drizzle-team/drizzle-orm/releases/tag/0.32.1'>v0.32.1</a> release</b>
+
+    <ul>
+    <li>improved indexes API and typings</li>
+    <li>support for limit 0</li>
+    <li>array and notInArray accept empty []</li>
+    </ul>
+  - |
+    <b>Community highlights</b>
+
+    • <a href='https://drizzle.run'>drizzle.run</a> ships <a href='https://drizzle.run/visualizer'>schema visualizer</a> 👀
+    • <a href='https://x.com/thdxr/status/1818439495361937781'>sst dev</a> & drizzle studio update
+    • <a href='https://github.com/rhinobase/honohub'>Hono + Drizzle</a> headless CMS
+    • TypeScript based <a href='https://github.com/drepkovsky/drizzle-migrations'>down migrations</a>
   - |
     <b>Drizzle Kit goes open-source 🎉</b>
     
@@ -151,24 +169,4 @@
     • <a href='/docs/tutorials/drizzle-with-turso'>Drizzle <> Turso</a>
     • <a href='/docs/tutorials/drizzle-with-neon'>Drizzle <> Neon Postgres</a>
     • <a href='/docs/tutorials/drizzle-nextjs-neon'>Todo App with Neon Postgres</a>
-2024-07-22:
-  - |
-    <b>ORM <a href='https://github.com/drizzle-team/drizzle-orm/releases/tag/0.32.1'>v0.32.1</a> release</b>
-
-    <ul>
-    <li>improved indexes API and typings</li>
-    <li>support for limit 0</li>
-    <li>array and notInArray accept empty []</li>
-    </ul>
-  - |
-    <b>Community highlights</b>
-
-    • <a href='https://drizzle.run'>drizzle.run</a> ships <a href='https://drizzle.run/visualizer'>schema visualizer</a> 👀
-    • <a href='https://x.com/thdxr/status/1818439495361937781'>sst dev</a> & drizzle studio update
-    • <a href='https://github.com/rhinobase/honohub'>Hono + Drizzle</a> headless CMS
-    • TypeScript based <a href='https://github.com/drepkovsky/drizzle-migrations'>down migrations</a>
-2024-07-15:
-  - |
-    We've had podcast on <a href='https://www.youtube.com/watch?v=Hh9xqRWYEJs'>syntax.fm</a> 🎙️
-    Drizzle <> Sytnax merch drop - <a href='https://x.com/DrizzleORM/status/1815793307877871912'>see here</a>
-2024-06-10:
+2024-06:

src/utils/fillMonthsGaps.ts

@@ -0,0 +1,54 @@
+export type Months = Record<string, string[]>;
+
+export default (monthsObject: Months): Months => {
+  const months = { ...monthsObject };
+
+  const getMonthStart = (date: Date): Date => {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+  };
+
+  const addMonths = (date: Date, monthsToAdd: number): Date => {
+    const result = new Date(date);
+    result.setMonth(result.getMonth() + monthsToAdd);
+    return result;
+  };
+
+  const parseDate = (dateString: string): Date => {
+    return new Date(dateString);
+  };
+
+  const formatDate = (date: Date): string => {
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+  };
+
+  const sortedKeys = Object.keys(months).sort(
+    (a, b) => parseDate(a).getTime() - parseDate(b).getTime(),
+  );
+
+  let currentMonthStart = getMonthStart(parseDate(sortedKeys[0]));
+
+  const now = new Date();
+  const currentMonth = getMonthStart(now);
+
+  let filledMonths: Months = {};
+
+  for (const key of sortedKeys) {
+    const month = months[key];
+    const monthStart = getMonthStart(parseDate(key));
+
+    while (currentMonthStart.getTime() < monthStart.getTime()) {
+      filledMonths = { ...filledMonths, [formatDate(currentMonthStart)]: [] };
+      currentMonthStart = addMonths(currentMonthStart, 1);
+    }
+
+    filledMonths = { ...filledMonths, [key]: month };
+    currentMonthStart = addMonths(currentMonthStart, 1);
+  }
+
+  while (currentMonthStart.getTime() <= currentMonth.getTime()) {
+    filledMonths = { ...filledMonths, [formatDate(currentMonthStart)]: [] };
+    currentMonthStart = addMonths(currentMonthStart, 1);
+  }
+
+  return filledMonths;
+};

src/utils/fillWeeksGaps.ts

@@ -0,0 +1,25 @@
+export default (startDate: string): string => {
+  const start = new Date(startDate);
+  const now = new Date();
+
+  const currentMonthStart = new Date(now.getFullYear(), now.getMonth(), 1);
+  const inputMonthStart = new Date(start.getFullYear(), start.getMonth(), 1);
+
+  const diffTime = currentMonthStart.getTime() - inputMonthStart.getTime();
+  const diffMonths = Math.floor(diffTime / (30 * 24 * 60 * 60 * 1000));
+
+  if (diffMonths === 0) {
+    return "this month";
+  } else {
+    if (start.getFullYear() !== now.getFullYear()) {
+      return inputMonthStart.toLocaleString("en-US", {
+        month: "long",
+        year: "numeric",
+      });
+    } else {
+      return inputMonthStart.toLocaleString("en-US", {
+        month: "long",
+      });
+    }
+  }
+};