feat: added resource section (#509)

* fixed

* feat: added resource section

* feat: added resource section

* revert changes cd6d848

* revert changes 65e9f3e

* revert changes 877b0f0

* revert changes 74711cd

* fix: fixed the width issue

* revert change

* fix: added resource icon

* Tiny changes to adjust look and feel.

* Last changes to fix dark theme

---------

Co-authored-by: Benjamin Granados <[email protected]>

Author: Akshaybagai52

CODEOWNERS

@@ -1,17 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
 
-declare global {
-  interface Window {
-    _carbonads: {
-      refresh: () => void;
-      reload: (where: string, force_serve: boolean) => void;
-      remove: (el: HTMLElement) => void;
-      srv: () => void;
-    };
-  }
-}
-
 type Props = {
   className?: string;
   variant?: 'sidebar';
@@ -22,41 +11,28 @@ function CarbonAds({ className, variant = 'sidebar' }: Props) {
   const router = useRouter();
 
   useEffect(() => {
-    const mobileMediaQuery = window.matchMedia('(max-width: 1023px)');
-    if (!mobileMediaQuery.matches) {
-      const hasCarbonAds = document.querySelector('#carbonads');
-      // Check if another ad is present to refresh
-      if (hasCarbonAds) {
-        window._carbonads.refresh();
-        return;
-      } else {
-        // Check if the script is present (ad is not yet present) so that duplicate requests are not made to carbon ads
-        const hasCarbonAdsScript = document.querySelector('#_carbonads_js');
-        if (!hasCarbonAdsScript) {
-          const carbonAdsScript = document.createElement('script');
-          carbonAdsScript.id = '_carbonads_js';
-          carbonAdsScript.type = 'text/javascript';
-          carbonAdsScript.async = true;
-          document
-            .querySelector('#carbonads-container')
-            ?.appendChild(carbonAdsScript);
-          carbonAdsScript.src = `//cdn.carbonads.com/carbon.js?serve=CE7I627Y&placement=json-schemaorg&rnd=${Math.random()}`;
-        }
-      }
+    const hasCarbonAdsScript = document.querySelector('#_carbonads_js');
+    if (!hasCarbonAdsScript) {
+      const carbonAdsScript = document.createElement('script');
+      carbonAdsScript.id = '_carbonads_js';
+      carbonAdsScript.type = 'text/javascript';
+      carbonAdsScript.async = true;
+      document
+        .querySelector('#carbonads-container')
+        ?.appendChild(carbonAdsScript);
+      carbonAdsScript.src = `//cdn.carbonads.com/carbon.js?serve=CE7I627Y&placement=json-schemaorg&rnd=${Math.random()}`;
+    }
 
-      const existingStyleSheet = document.querySelector('#_carbonads_css');
-      if (existingStyleSheet) {
-        existingStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
-      } else {
-        const carbonAdsStyleSheet = document.createElement('style');
-        carbonAdsStyleSheet.id = '_carbonads_css';
-        carbonAdsStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
-        document
-          .querySelector('#carbonads-container')
-          ?.appendChild(carbonAdsStyleSheet);
-      }
+    const existingStyleSheet = document.querySelector('#_carbonads_css');
+    if (existingStyleSheet) {
+      existingStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
     } else {
-      (carbonRef.current as HTMLElement).style.display = 'none';
+      const carbonAdsStyleSheet = document.createElement('style');
+      carbonAdsStyleSheet.id = '_carbonads_css';
+      carbonAdsStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
+      document
+        .querySelector('#carbonads-container')
+        ?.appendChild(carbonAdsStyleSheet);
     }
   }, [router.asPath]);
 

components/CarbonsAds.tsx

@@ -125,6 +125,22 @@ const getSpecificationPath = [
   '/specification-links',
   '/specification',
 ];
+const getResourcePath = [
+  '/resources/articles',
+  '/resources/books',
+  '/resources/articles',
+  '/resources/podcasts',
+  '/resources/papers',
+  '/resources/audios',
+];
+const resourceRoutes = [
+  { uri: '/resources/books', label: 'Books' },
+  { uri: '/resources/articles', label: 'Articles' },
+  { uri: '/resources/courses', label: 'Courses' },
+  { uri: '/resources/videos', label: 'Videos' },
+  { uri: '/resources/podcasts', label: 'Podcasts' },
+  { uri: '/resources/papers', label: 'Papers' },
+];
 export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
   const router = useRouter();
   const [open, setOpen] = useState(false);
@@ -184,13 +200,14 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
         </div>
 
         <div
-          className={`z-[150] absolute top-10 mt-24 left-0 h-full w-screen bg-white transform ${open ? '-translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out filter drop-shadow-md `}
+          className={`z-[150] absolute top-10 mt-24 left-0 h-full w-screen bg-white transform ${
+            open ? '-translate-x-0' : '-translate-x-full'
+          } transition-transform duration-300 ease-in-out filter drop-shadow-md `}
         >
           <div className='flex flex-col mt-4'>
             <DocsNav />
           </div>
         </div>
-
         <div className='dark:bg-slate-800 max-w-[1400px] grid grid-cols-1 lg:grid-cols-4 mx-4 md:mx-12'>
           <div className='hidden lg:block mt-24'>
             <DocsNav />
@@ -217,6 +234,7 @@ export const DocsNav = () => {
     getStarted: false,
     getReference: false,
     getSpecification: false,
+    getResources: false,
   });
   useEffect(() => {
     const pathWtihoutFragment = extractPathWithoutFragment(router.asPath);
@@ -228,6 +246,8 @@ export const DocsNav = () => {
       setActive({ ...active, getReference: true });
     } else if (getSpecificationPath.includes(pathWtihoutFragment)) {
       setActive({ ...active, getSpecification: true });
+    } else if (getResourcePath.includes(router.asPath)) {
+      setActive({ ...active, getResources: true });
     }
   }, [router.asPath]);
 
@@ -247,29 +267,37 @@ export const DocsNav = () => {
     setActive({ ...active, getSpecification: !active.getSpecification });
   };
 
+  const handleClickResources = () => {
+    setActive({ ...active, getResources: !active.getResources });
+  };
+
   const rotate = active.getDocs ? 'rotate(180deg)' : 'rotate(0)';
   const rotateG = active.getStarted ? 'rotate(180deg)' : 'rotate(0)';
   const rotateR = active.getReference ? 'rotate(180deg)' : 'rotate(0)';
   const rotateSpec = active.getSpecification ? 'rotate(180deg)' : 'rotate(0)';
+  const rotateResources = active.getResources ? 'rotate(180deg)' : 'rotate(0)';
 
   const { theme } = useTheme();
 
   const [learn_icon, setLearn_icon] = useState('');
   const [reference_icon, setReference_icon] = useState('');
   const [spec_icon, setSpec_icon] = useState('');
   const [overview_icon, setOverview_icon] = useState('');
+  const [resources_icon, setResources_icon] = useState('');
 
   useEffect(() => {
     if (theme === 'dark') {
       setOverview_icon('/icons/eye-dark.svg');
       setLearn_icon('/icons/compass-dark.svg');
       setReference_icon('/icons/book-dark.svg');
       setSpec_icon('/icons/clipboard-dark.svg');
+      setResources_icon('/icons/bookshelf-dark.svg');
     } else {
       setOverview_icon('/icons/eye.svg');
       setLearn_icon('/icons/compass.svg');
       setReference_icon('/icons/book.svg');
       setSpec_icon('/icons/clipboard.svg');
+      setResources_icon('/icons/bookshelf.svg');
     }
   }, [theme]);
 
@@ -575,6 +603,50 @@ export const DocsNav = () => {
           </div>
         </div>
       </div>
+      {/* Resources */}
+      <div className='mb-2 bg-slate-200 dark:bg-slate-900 p-2 rounded'>
+        <div
+          className='flex justify-between w-full items-center'
+          onClick={handleClickResources}
+        >
+          <div className='flex  items-center align-middle'>
+            <img
+              src={`${resources_icon}`}
+              alt='eye icon'
+              className='mr-2 w-6'
+            />
+            <SegmentHeadline label='Resources' />
+          </div>
+          <svg
+            id='arrow'
+            className='arrow'
+            style={{
+              transform: rotateResources,
+              transition: 'all 0.2s linear',
+            }}
+            xmlns='http://www.w3.org/2000/svg'
+            fill='none'
+            height='32'
+            viewBox='0 0 24 24'
+            width='24'
+          >
+            <path
+              clipRule='evenodd'
+              d='m16.5303 8.96967c.2929.29289.2929.76777 0 1.06063l-4 4c-.2929.2929-.7677.2929-1.0606 0l-4.00003-4c-.29289-.29286-.29289-.76774 0-1.06063s.76777-.29289 1.06066 0l3.46967 3.46963 3.4697-3.46963c.2929-.29289.7677-.29289 1.0606 0z'
+              fill='#707070'
+              fillRule='evenodd'
+            />
+          </svg>
+        </div>
+        <div
+          className={classnames('ml-6', { hidden: !active.getResources })}
+          id='resources'
+        >
+          {resourceRoutes.map(({ uri, label }) => (
+            <DocLink key={uri} uri={uri} label={label} />
+          ))}
+        </div>
+      </div>
     </div>
   );
 };

components/Sidebar.tsx

@@ -250,9 +250,7 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
             },
             table: {
               component: ({ children }) => (
-                <div className='max-w-[100%] mx-auto mb-8 overflow-auto'>
-                  <table className='table-auto'>{children}</table>
-                </div>
+                <table className='table-auto mb-8'>{children}</table>
               ),
             },
             thead: {

components/StyledMarkdown.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import yaml from 'js-yaml';
+import { getLayout } from '~/components/Sidebar';
+import Head from 'next/head';
+import { Headline1 } from '~/components/Headlines';
+
+type ResourcesProps = {
+  title: string;
+  url: string;
+  type: string;
+  summary: string;
+};
+
+type ParamProps = {
+  slug: string;
+};
+
+type DataProps = {
+  slug: string;
+  data: ResourcesProps[];
+};
+
+export async function getStaticPaths() {
+  const paths = [
+    { params: { slug: 'books' } },
+    { params: { slug: 'articles' } },
+    { params: { slug: 'courses' } },
+    { params: { slug: 'videos' } },
+    { params: { slug: 'podcasts' } },
+    { params: { slug: 'papers' } },
+  ];
+  return { paths, fallback: false };
+}
+
+export async function getStaticProps({ params }: { params: ParamProps }) {
+  const { slug } = params;
+  const data = await fetchResourceData(slug);
+
+  return {
+    props: {
+      data,
+    },
+  };
+}
+export default function ResourcePageComponent({ data }: { data: DataProps }) {
+  const { slug, data: resourceData } = data;
+  const routeName = slug.slice(0, -1);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filteredArticles, setFilteredArticles] = useState(
+    resourceData?.filter((item: ResourcesProps) => item.type === routeName),
+  );
+  useEffect(() => {
+    const results = resourceData.filter(
+      (item: ResourcesProps) =>
+        item.type === routeName &&
+        item.title.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+    setFilteredArticles(results);
+  }, [searchTerm, resourceData]);
+  function capitalizeFirstLetter(value: string) {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  }
+  const newTitle = capitalizeFirstLetter(slug);
+
+  return (
+    <section>
+      <Head>
+        <title>{newTitle}</title>
+      </Head>
+      <Headline1>{newTitle}</Headline1>
+      Welcome to the {`${newTitle}`} section. Please use the search box to
+      search for specific terms.
+      <div className='mt-6'>
+        <input
+          type='text'
+          name='text'
+          placeholder={`Search ${newTitle}`}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className='w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:border-blue-500 transition duration-300'
+        />
+        {filteredArticles &&
+          filteredArticles.map((item: ResourcesProps, index: number) => (
+            <div key={index} className='p-3'>
+              <a
+                href={item.url}
+                target='_blank'
+                rel='noreferrer'
+                className='text-xl text-blue-500 underline mb-2'
+              >
+                {item.title}
+              </a>
+              <p className='mt-2'>{item.summary}</p>
+            </div>
+          ))}
+      </div>
+    </section>
+  );
+}
+
+const fetchResourceData = async (slug: string) => {
+  try {
+    const apiUrl =
+      'https://raw.githubusercontent.com/sourcemeta/awesome-jsonschema/master/data.yaml';
+    const response = await axios.get(apiUrl);
+    const parsedData = yaml.load(response.data);
+    return {
+      slug,
+      data: parsedData,
+    };
+  } catch (error) {
+    console.error('Error fetching data');
+    return { slug, dummyData: 'No Data Found' };
+  }
+};
+ResourcePageComponent.getLayout = getLayout;