Merge pull request #6498 from vishalvivekm/tutorials

Tutorials updates

Author: Vivek Vishal

src/assets/data/tutorials/index.js

@@ -1,6 +1,6 @@
 const data = [
     {
-        date: "Oct. 1st, 2020",
+        date: "2020-10-01",
         topic: "An Introduction to Contributing to Meshery",
         resources: {
             slides: "https://docs.google.com/presentation/d/1Wc5ALdn-G3fADJ8I6nJlyOGhV2XHVprYPqDvkZ1MEqY/edit#",
@@ -14,7 +14,7 @@ const data = [
         ],
     },
     {
-        date: "Oct. 8th, 2020",
+        date: "2020-10-08",
         topic: "An Introduction to mesheryctl",
         resources: {
             slides: "https://docs.google.com/presentation/d/1LxhzJhUs9-Hc9mwlKVUMlDAVdH-QWLvU1KWxVuRbSHg/edit?usp=sharing",
@@ -28,7 +28,7 @@ const data = [
         ],
     },
     {
-        date: "Oct. 15th, 2020",
+        date: "2020-10-15",
         topic: "A tutorial on contributing to Layer5 and working with Git",
         resources: {
             slides: "https://docs.google.com/presentation/d/1UOlwFtZ-VJhW4RgQoSI_QOGUQ7OBG8NZDWrFUor7eyY/edit?usp=sharing",
@@ -42,7 +42,7 @@ const data = [
         ],
     },
     {
-        date: "Oct. 22nd, 2020",
+        date: "2020-10-22",
         topic: "An introduction to all Layer5 repositories",
         resources: {
             slides: "https://docs.google.com/document/d/1brtiJhdzal_O6NBZU_JQXiBff2InNtmgL_G1JgAiZtk/edit",
@@ -56,7 +56,7 @@ const data = [
         ],
     },
     {
-        date: "Oct. 29th, 2020",
+        date: "2020-10-29",
         topic: "A tutorial on Gatsby",
         resources: {
             slides: "https://www.gatsbyjs.com/docs/quick-start/",
@@ -74,35 +74,7 @@ const data = [
         ],
     },
     {
-        date: "Nov. 4 2020",
-        topic: "Functional Testing with Cypress in Meshery UI",
-        resources: {
-            slides: "https://layer5.io/blog/meshery/functional-testing-with-cypress-in-meshery-ui",
-            recording: "https://youtu.be/pIFSI7xtwFs",
-        },
-        presenters: [
-            {
-                link: "/community/members/rodolfo-martinez-vega",
-                name: "Rodolfo Martinez Vega",
-            }
-        ]
-    },
-   
-    {
-        date: "Jan. 28 2021",
-        topic: "Beginner's guide to contributing to Meshery and mesheryctl",
-        resources: {
-            slides: "https://docs.google.com/presentation/d/1oUzWQpFeFbpIs_sejtOPbF9J4nigj9ziEAzoWxmm6ig/edit",
-            recording: "https://youtu.be/hh_kFLZx3G4",
-        },
-        presenters: [
-            {
-                name: "Navendu Pottekkat",
-            }
-        ]
-    },
-    {
-        date: "Jul. 27 2021",
+        date: "2021-07-27",
         topic: "Contributing to Meshery API Swagger Documentation" ,
         resources: {
             recording: "https://www.youtube.com/watch?v=NAvt6B5kNIQ"
@@ -115,7 +87,7 @@ const data = [
         ]
     },
     {
-        date: "Apr. 10, 2025",
+        date: "2025-04-10",
         topic: "Working with Meshery Docs",
         resources: {
             slides: "https://docs.google.com/presentation/d/1kQIzSa4f-pOH8cM4SwEdbFZGI_SXVyyhc9zUZPB7bsI/edit?usp=sharing",
@@ -129,7 +101,7 @@ const data = [
         ]
     },    
     {
-        date: "Apr. 17, 2025",
+        date: "2025-04-17",
         topic: "End-to-end Testing in Meshery CLI",
         resources: {
             slides: "https://docs.google.com/presentation/d/1OhUhqIZVPdnjD7eO1ppeXVvTa-P2lIcdCXHncTOX_XE/edit?usp=sharing",
@@ -143,7 +115,7 @@ const data = [
         ]
     },
     {
-        date: "Apr. 24, 2025",
+        date: "2025-04-24",
         topic: "Meshery CI and CD",
         resources: {
             slides: "https://docs.google.com/presentation/d/1hUDhFeYP7dtCQhOEw2U_wQ-G718Y2e5iU3drMDOdIws/edit?usp=sharing",
@@ -157,7 +129,7 @@ const data = [
         ]
     },
     {
-        date: "Apr. 30, 2025",
+        date: "2025-04-30",
         topic: "Meshery CLI",
         resources: {
             slides: "https://docs.google.com/presentation/d/1lRop7DAAMUBmuFdzZK25LdQrkLG08eVsXEaDrauP3S8/edit?usp=sharing",
@@ -175,7 +147,7 @@ const data = [
         ],
     },
     {
-        date: "May 8th, 2025",
+        date: "2025-05-08",
         topic: "End-to-end Testing in Meshery UI using Playwright",
         resources: {
             slides: "https://docs.google.com/presentation/d/1Vcq48Y0nLZsrKKFNYBJ5fm9bIcb2m6ZnYxq2azn6nlM/edit?slide=id.g35936fe4c88_0_0#slide=id.g35936fe4c88_0_0",
@@ -189,7 +161,7 @@ const data = [
         ],
     },
     {
-        date: "May 15th, 2025",
+        date: "2025-05-15",
         topic: "Meshery UI",
         resources: {
             slides: "https://docs.google.com/presentation/d/1MRDs28YmzrO1t5QNz7WTp50ukCz6fB2p3awZz63HJmA/edit?slide=id.g34811bf5022_0_3#slide=id.g34811bf5022_0_3",

src/sections/Community/Newcomers-guide/Tutorials-table/TutorialsTable.style.js

@@ -34,4 +34,14 @@ export const TutorialsTableWrapper = styled.div`
       }
     }
     }
+    .newBadge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    img {
+      height: 26px;
+      width: auto;
+    }
+  }
 `;

src/sections/Community/Newcomers-guide/Tutorials-table/index.js

@@ -8,9 +8,42 @@ const TutorialsTable = () => {
 
   const columns = React.useMemo(
     () => [
+      {
+        Header: "Date",
+        accessor: "date",
+        Cell: ({ value }) => {
+          const parsedDate = new Date(value);
+          return (
+            <span>
+              {parsedDate.toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              })}
+            </span>
+          );
+        }
+      },
       {
         Header: "Topic",
         accessor: "topic",
+        Cell: ({ row, value }) => {
+          const parsedDate = new Date(row.original.date);
+          const thisYear = new Date().getFullYear();
+          const isNew = parsedDate.getFullYear() === thisYear;
+
+          return (
+            <span className="newBadge">
+              {value}
+              {isNew && (
+                <img
+                  src="/images/new-badge.png"
+                  alt="New"
+                />
+              )}
+            </span>
+          );
+        },
       },
       {
         Header: "Resources",
@@ -39,17 +72,19 @@ const TutorialsTable = () => {
     ],
     []
   );
+  const sortedData = React.useMemo(() => {
+    return [...data].sort((a, b) => new Date(b.date) - new Date(a.date));
+  }, []);
 
+  const tableInstance = useTable({ columns, data: sortedData });
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
-  } = useTable({
-    columns,
-    data,
-  });
+  } = tableInstance;
+
 
   return (
     <TutorialsTableWrapper>
@@ -88,3 +123,4 @@ const TutorialsTable = () => {
 };
 
 export default TutorialsTable;
+