Merge branch 'main' of https://github.com/Sitecore/developer-portal

Sitecore · Dec 23, 2024 · b1a4103 · b1a4103
2 parents 76a08fe + 17adabd
commit b1a4103
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 49 deletions.
diff --git a/src/components/changelog/ChangelogEntries.tsx b/src/components/changelog/ChangelogEntries.tsx
@@ -55,7 +55,7 @@ const ChangelogEntries = ({ entries, title = 'Sitecore Changelog', linkHref = '/
         <Heading as={'h3'} size={'md'}>
           {title}
           <Link href="/changelog/rss.xml" ml={1}>
-            <IconButton icon={<Icon path={mdiRss} size={0.8} />} aria-label={'RSS'} colorScheme="primary" variant="ghost" size={'xs'} />
+            <IconButton icon={<Icon path={mdiRss} size={0.8} />} aria-label={'RSS'} colorScheme="neutral" variant="ghost" size={'xs'} />
           </Link>
         </Heading>
 

diff --git a/src/components/lists/accelerate/AccelerateUpdates.tsx b/src/components/lists/accelerate/AccelerateUpdates.tsx
@@ -1,6 +1,6 @@
 import { AccelerateRecipe } from '@/src/lib/accelerate/types/recipe';
 import { Product, Variant } from '@/src/lib/assets';
-import { Box, Card, CardBody, CardHeader, CardProps, chakra, Flex, Heading, HStack, IconButton, Link, SimpleGrid, Stack, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Card, CardBody, CardHeader, CardProps, chakra, Flex, Heading, HStack, IconButton, Link, SimpleGrid, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Text, useColorModeValue } from '@chakra-ui/react';
 import { mdiRss } from '@mdi/js';
 import Icon from '@mdi/react';
 import { TextLink } from '@src/components/links';
@@ -25,52 +25,87 @@ const CustomImage = chakra(Image, {
 const AccelerateUpdates = ({ title = 'Sitecore Accelerate updates', linkHref = '/learn/accelerate', linkText = 'See all recipes', recipes, hideProductIcon, columns }: AccelerateUpdatesProps) => {
   return (
     <Card variant={'unstyled'}>
-      <CardHeader justifyContent={'space-between'} display={'flex'} py={8}>
+      <CardHeader justifyContent={'space-between'} display={'flex'} pt={8}>
         <Heading as={'h3'} size={'md'}>
           {title}
           <Link href="/learn/accelerate/updates" ml="1">
-            <IconButton icon={<Icon path={mdiRss} size={0.8} />} aria-label={'RSS'} colorScheme="primary" variant="ghost" size={'xs'} />
+            <IconButton icon={<Icon path={mdiRss} size={0.8} />} aria-label={'RSS'} colorScheme="neutral" variant="ghost" size={'xs'} />
           </Link>
         </Heading>
         <TextLink href={linkHref} text={linkText} />
       </CardHeader>
       <CardBody py={{ base: '2', md: '4' }}>
-        <SimpleGrid columns={columns ? columns : 1} spacing={0}>
-          {recipes.map((entry, key) => {
-            return (
-              <Flex justifyContent={'items-start'} mb={5} key={key}>
-                {!hideProductIcon && (
-                  <Box display={{ base: 'none', sm: 'block' }} textAlign={'center'} mr={5} height={'43px'} width={'43px'}>
-                    <CustomImage
-                      boxSize={3}
-                      src={useColorModeValue(GetProductIcon(entry.product || Product.Default, Variant.Light), GetProductIcon(Product.XMCloud, Variant.Dark))}
-                      alt={'XM CLoud'}
-                      width={25}
-                      margin={'.5rem'}
-                      height={25}
-                      priority={true}
-                      maxWidth={'auto'}
-                    />
-                  </Box>
-                )}
-                <Stack fontSize={'sm'}>
-                  <Heading as={'h4'} size="sm">
-                    <Link href={entry.url} title={entry.title} color={'chakra-body-text'}>
-                      {entry.title}
-                    </Link>
-                  </Heading>
-
-                  <HStack spacing={'24px'}>
-                    <Text>{new Date(entry.lastUpdated).toLocaleString('en-US', { dateStyle: 'medium' })}</Text>
-                  </HStack>
-                </Stack>
-              </Flex>
-            );
-          })}
-        </SimpleGrid>
+        <Tabs size="sm" variant={'soft-rounded'}>
+          <TabList>
+            <Tab>
+              <Text>All</Text>
+            </Tab>
+            <Tab>
+              <Text>XM Cloud</Text>
+            </Tab>
+            <Tab>
+              <Text>Content Hub</Text>
+            </Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <RecipeList recipes={recipes} hideProductIcon={hideProductIcon} columns={columns} />
+            </TabPanel>
+            <TabPanel>
+              <RecipeList recipes={recipes.filter((recipe: AccelerateRecipe) => recipe.product === 'XMCloud')} />
+              <Link href="/learn/accelerate/xm-cloud/updates" position={'absolute'} top={0} right={0}>
+                <IconButton icon={<Icon path={mdiRss} size={0.8} />} aria-label={'RSS'} colorScheme="neutral" variant="ghost" size={'sm'} />
+              </Link>
+            </TabPanel>
+            <TabPanel>
+              <RecipeList recipes={recipes.filter((recipe: AccelerateRecipe) => recipe.product === 'ContentHub')} />
+              <Link href="/learn/accelerate/content-hub/updates" position={'absolute'} top={0} right={0}>
+                <IconButton icon={<Icon path={mdiRss} size={0.8} />} aria-label={'RSS'} colorScheme="neutral" variant="ghost" size={'sm'} />
+              </Link>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
       </CardBody>
     </Card>
   );
 };
 
+const RecipeList = ({ recipes, hideProductIcon, columns = 1, show = 5 }: { recipes: AccelerateRecipe[]; hideProductIcon?: boolean; columns?: number; show?: number }) => {
+  return (
+    <SimpleGrid columns={columns ? columns : 1} spacing={0}>
+      {recipes.slice(0, show).map((entry, key) => {
+        return (
+          <Flex justifyContent={'items-start'} mb={4} key={key}>
+            {!hideProductIcon && (
+              <Box display={{ base: 'none', sm: 'block' }} textAlign={'center'} mr={5} height={'43px'} width={'43px'}>
+                <CustomImage
+                  boxSize={3}
+                  src={useColorModeValue(GetProductIcon(entry.product || Product.Default, Variant.Light), GetProductIcon(Product.XMCloud, Variant.Dark))}
+                  alt={'XM CLoud'}
+                  width={25}
+                  margin={'.5rem'}
+                  height={25}
+                  priority={true}
+                  maxWidth={'auto'}
+                />
+              </Box>
+            )}
+            <Stack fontSize={'sm'}>
+              <Heading as={'h4'} size="sm">
+                <Link href={entry.url} title={entry.title} color={'chakra-body-text'}>
+                  {entry.title}
+                </Link>
+              </Heading>
+
+              <HStack spacing={'24px'}>
+                <Text>{new Date(entry.lastUpdated).toLocaleString('en-US', { dateStyle: 'medium' })}</Text>
+              </HStack>
+            </Stack>
+          </Flex>
+        );
+      })}
+    </SimpleGrid>
+  );
+};
+
 export default AccelerateUpdates;
diff --git a/src/hooks/useSidebarNav.ts b/src/hooks/useSidebarNav.ts
@@ -14,6 +14,7 @@ const useSidebarNav = (fileName: string, sidebarNavConfig: SidebarNavigationConf
   const [currentItem, setCurrentItem] = useState<SidebarNavigationItem | null>(null);
   const [previousItem, setPreviousItem] = useState<SidebarNavigationItem | null>(null);
   const [nextItem, setNextItem] = useState<SidebarNavigationItem | null>(null);
+  const [children, setChildren] = useState<SidebarNavigationItem[] | null>(null);
   const [parentItem, setParentItem] = useState<SidebarNavigationItem | null>(null);
   const [currentLevel, setCurrentLevel] = useState<Array<SidebarNavigationItem> | null>(null);
 
@@ -39,16 +40,12 @@ const useSidebarNav = (fileName: string, sidebarNavConfig: SidebarNavigationConf
     const parentItem = getParentRoute(sidebarNavConfig.routes, currentItem.path);
 
     // Find the previous and next items in the sidebar navigation
-
-    if (root) {
-      //  nextItem = currentItem?.children[1] || null;
-    }
-
-    // setNextItem(nextItem);
     setNextItem(nextItem);
     setCurrentItem(currentItem);
+    setChildren(currentItem.children);
     setParentItem(parentItem);
     setPreviousItem(previousItem);
+
     setCurrentLevel(findCurrentLevel(sidebarNavConfig.routes, currentUrlSegment));
   }, [fileName, root, currentPath, sidebarNavConfig]);
 
@@ -58,6 +55,7 @@ const useSidebarNav = (fileName: string, sidebarNavConfig: SidebarNavigationConf
     previousItem,
     nextItem,
     currentLevel,
+    children,
   };
 };
 

diff --git a/src/layouts/ArticlePage.tsx b/src/layouts/ArticlePage.tsx
@@ -8,14 +8,17 @@ import { useRouter } from 'next/router';
 
 import { TrackPageView } from '@/src/components/integrations/engage/TrackPageView';
 
-import { Heading } from '@chakra-ui/react';
+import { Heading, Link, List, ListIcon, ListItem, Stack, Text } from '@chakra-ui/react';
+import { mdiArrowRightCircle } from '@mdi/js';
 import { PromoCardProps, PromoList } from '../components/cards';
 import { SocialFeeds } from '../components/links';
 import GithubContributionNotice from '../components/markdown/contribute';
 import { ArticlePaging } from '../components/navigation/ArticlePaging';
 import BreadcrumbNav from '../components/navigation/BreadcrumbNav';
 import SidebarNavigation from '../components/navigation/SidebarNavigation';
 import { Hero } from '../components/ui/sections';
+import useSidebarNav from '../hooks/useSidebarNav';
+import { getItemUrl } from '../lib/sidebarNav';
 import { ThreeColumnLayout } from './ThreeColumnLayout';
 
 type ArticlePageProps = {
@@ -31,6 +34,7 @@ type ArticlePageProps = {
 
 const ArticlePage = ({ pageInfo, promoAfter, promoBefore, customNav, customNavPager, sidebarConfig }: ArticlePageProps) => {
   const router = useRouter();
+  const { children } = useSidebarNav(pageInfo.fileName, sidebarConfig, router.asPath);
 
   if (!pageInfo) {
     return <>No pageInfo found</>;
@@ -60,6 +64,25 @@ const ArticlePage = ({ pageInfo, promoAfter, promoBefore, customNav, customNavPa
           )}
           <PromoList data={promoBefore} />
           <RenderContent content={pageInfo.parsedContent} />
+
+          {/* Child Navigation */}
+          {children && (
+            <Stack gap={4}>
+              <Text fontWeight={'semibold'}>Articles in this section:</Text>
+              <List spacing="2">
+                {children.map((child, i) => (
+                  <ListItem key={i}>
+                    <ListIcon>
+                      <path d={mdiArrowRightCircle} />
+                    </ListIcon>
+
+                    <Link href={getItemUrl(sidebarConfig, child)}>{child.title}</Link>
+                  </ListItem>
+                ))}
+              </List>
+            </Stack>
+          )}
+
           <ArticlePaging enabled={sidebarConfig.enableNextPrevious} currentfileName={pageInfo.fileName} config={sidebarConfig} currentPath={router.asPath} />
           <GithubContributionNotice pageInfo={pageInfo} />
           {customNavPager}

diff --git a/src/lib/interfaces/page-info.ts b/src/lib/interfaces/page-info.ts
@@ -92,6 +92,7 @@ export type SidebarNavigationItem = {
   ignoreLink?: boolean;
   children: Array<SidebarNavigationItem>;
   collapsed?: boolean;
+  url: string;
 };
 
 export type ChildPageInfo = PageInfo & {

diff --git a/src/lib/utils/cookieUtil.ts b/src/lib/utils/cookieUtil.ts
@@ -0,0 +1,21 @@
+export const setCookie = (name: string, value: string, days: number) => {
+  const expires = new Date();
+
+  expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+  document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
+};
+
+export const getCookie = (name: string) => {
+  const cookieArray = document.cookie.split(';');
+
+  for (let i = 0; i < cookieArray.length; i++) {
+    const cookiePair = cookieArray[i].split('=');
+    const cookieName = cookiePair[0].trim();
+
+    if (cookieName === name) {
+      return decodeURIComponent(cookiePair[1]);
+    }
+  }
+
+  return null;
+};
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
@@ -1,5 +1,5 @@
+export * from './cookieUtil';
 export * from './dateUtil';
-// export * from './fsUtils';
 export * from './requests';
 export * from './sortUtil';
 export * from './stringUtil';

diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
@@ -1,11 +1,11 @@
 import { ChildPageInfo, PageInfo, SidebarNavigationConfig } from '@lib/interfaces/page-info';
 import { getChildNavgationInfo, getChildPageInfo, getPageInfo } from '@lib/page-info';
 import { getStaticPathsRecursively } from '@lib/staticPaths';
+
 import ArticlePage from '@src/layouts/ArticlePage';
 import ChildOverviewPage from '@src/layouts/ChildOverviewPage';
 import DefaultContentPage from '@src/layouts/DefaultContentPage';
 import SocialPage from '@src/layouts/SocialPage';
-
 import NewsLetterPage from '../layouts/NewsLetterPage';
 import Tutorial from '../layouts/Tutorial';
 
@@ -31,7 +31,6 @@ export async function getStaticProps(context: any) {
   if (pageInfo.hasSubPageNav) {
     sidebarNavConfig = await getChildNavgationInfo(context.params.slug.join('/'));
   }
-  // navData
 
   return {
     props: {
@@ -45,7 +44,7 @@ export async function getStaticProps(context: any) {
 export default function Slug({ pageInfo, childPageInfo, sidebarNavConfig }: { pageInfo: PageInfo; childPageInfo: Array<ChildPageInfo>; sidebarNavConfig: SidebarNavigationConfig }) {
   // Check for other page types
   if (pageInfo.pageType) {
-    switch (pageInfo.pageType.toLowerCase()) {
+    switch (pageInfo?.pageType.toLowerCase()) {
       case 'childoverview':
         return <ChildOverviewPage pageInfo={pageInfo} hasGrid={false} childPageInfo={childPageInfo} sidebarConfig={sidebarNavConfig} />;
       case 'social':

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -20,7 +20,7 @@ import { AccelerateRecipe } from '../lib/accelerate/types/recipe';
 
 export async function getStaticProps() {
   const pageInfo = await getPageInfo('home');
-  const recipes = await getLatestRecipes(undefined, 5);
+  const recipes = await getLatestRecipes();
 
   return {
     props: {