diff --git a/src/components/changelog/ChangelogEntries.tsx b/src/components/changelog/ChangelogEntries.tsx index 52b121d99..606c1d8ae 100644 --- a/src/components/changelog/ChangelogEntries.tsx +++ b/src/components/changelog/ChangelogEntries.tsx @@ -55,7 +55,7 @@ const ChangelogEntries = ({ entries, title = 'Sitecore Changelog', linkHref = '/ {title} - } aria-label={'RSS'} colorScheme="primary" variant="ghost" size={'xs'} /> + } aria-label={'RSS'} colorScheme="neutral" variant="ghost" size={'xs'} /> diff --git a/src/components/lists/accelerate/AccelerateUpdates.tsx b/src/components/lists/accelerate/AccelerateUpdates.tsx index d0a8376c3..658be4f20 100644 --- 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 ( - + {title} - } aria-label={'RSS'} colorScheme="primary" variant="ghost" size={'xs'} /> + } aria-label={'RSS'} colorScheme="neutral" variant="ghost" size={'xs'} /> - - {recipes.map((entry, key) => { - return ( - - {!hideProductIcon && ( - - - - )} - - - - {entry.title} - - - - - {new Date(entry.lastUpdated).toLocaleString('en-US', { dateStyle: 'medium' })} - - - - ); - })} - + + + + All + + + XM Cloud + + + Content Hub + + + + + + + + recipe.product === 'XMCloud')} /> + + } aria-label={'RSS'} colorScheme="neutral" variant="ghost" size={'sm'} /> + + + + recipe.product === 'ContentHub')} /> + + } aria-label={'RSS'} colorScheme="neutral" variant="ghost" size={'sm'} /> + + + + ); }; +const RecipeList = ({ recipes, hideProductIcon, columns = 1, show = 5 }: { recipes: AccelerateRecipe[]; hideProductIcon?: boolean; columns?: number; show?: number }) => { + return ( + + {recipes.slice(0, show).map((entry, key) => { + return ( + + {!hideProductIcon && ( + + + + )} + + + + {entry.title} + + + + + {new Date(entry.lastUpdated).toLocaleString('en-US', { dateStyle: 'medium' })} + + + + ); + })} + + ); +}; + export default AccelerateUpdates; diff --git a/src/hooks/useSidebarNav.ts b/src/hooks/useSidebarNav.ts index 033e3417b..044b9bdc7 100644 --- a/src/hooks/useSidebarNav.ts +++ b/src/hooks/useSidebarNav.ts @@ -14,6 +14,7 @@ const useSidebarNav = (fileName: string, sidebarNavConfig: SidebarNavigationConf const [currentItem, setCurrentItem] = useState(null); const [previousItem, setPreviousItem] = useState(null); const [nextItem, setNextItem] = useState(null); + const [children, setChildren] = useState(null); const [parentItem, setParentItem] = useState(null); const [currentLevel, setCurrentLevel] = useState | 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 index d613a9220..4709d6e3d 100644 --- a/src/layouts/ArticlePage.tsx +++ b/src/layouts/ArticlePage.tsx @@ -8,7 +8,8 @@ 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'; @@ -16,6 +17,8 @@ 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 )} + + {/* Child Navigation */} + {children && ( + + Articles in this section: + + {children.map((child, i) => ( + + + + + + {child.title} + + ))} + + + )} + {customNavPager} diff --git a/src/lib/interfaces/page-info.ts b/src/lib/interfaces/page-info.ts index a0dc8d6da..aa0402501 100644 --- 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; collapsed?: boolean; + url: string; }; export type ChildPageInfo = PageInfo & { diff --git a/src/lib/utils/cookieUtil.ts b/src/lib/utils/cookieUtil.ts new file mode 100644 index 000000000..0b190c7cb --- /dev/null +++ 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 index 48526f600..7e053afc2 100644 --- 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 index d61898efc..c048ba77f 100644 --- 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; sidebarNavConfig: SidebarNavigationConfig }) { // Check for other page types if (pageInfo.pageType) { - switch (pageInfo.pageType.toLowerCase()) { + switch (pageInfo?.pageType.toLowerCase()) { case 'childoverview': return ; case 'social': diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e1d19f7f0..b1da106b2 100644 --- 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: {