[DOCS]chore: blog layout refactor (#852)

.changeset/many-beds-carry.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/docs/src/components/Layout/Blog/ArticleMetadataItem.tsx

@@ -0,0 +1,7 @@
+import { articleMetaDataItemClass } from './styles.css';
+
+import React, { FC, PropsWithChildren } from 'react';
+
+export const ArticleMetadataItem: FC<PropsWithChildren> = ({ children }) => (
+  <span className={articleMetaDataItemClass}>{children}</span>
+);

packages/apps/docs/src/components/Layout/Blog/Blog.tsx

@@ -1,5 +1,6 @@
 import { Grid, Stack } from '@kadena/react-ui';
 
+import { baseGridClass } from '../basestyles.css';
 import {
   articleClass,
   contentClass,
@@ -9,12 +10,16 @@ import {
 import { Template } from '../components/Template';
 import { globalClass } from '../global.css';
 
-import { articleTopMetadataClass, bottomWrapperClass } from './Blog.css';
-import { ArticleMetadataItem, PageGrid } from './styles';
+import { ArticleMetadataItem } from './ArticleMetadataItem';
+import {
+  articleTopMetadataClass,
+  bottomWrapperClass,
+  pageGridClass,
+} from './styles.css';
 
 import { IPageProps } from '@/types/Layout';
 import { formatDateDistance } from '@/utils/dates';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import React, { FC } from 'react';
 
 export const Blog: FC<IPageProps> = ({
@@ -26,20 +31,21 @@ export const Blog: FC<IPageProps> = ({
   const readingTimeLabel =
     readingTimeInMinutes && readingTimeInMinutes > 1 ? 'minutes' : 'minute';
 
-  const contentClassNames = classNames(
+  const contentClassNames = classnames(
     contentClass,
     contentClassVariants[frontmatter.layout] ?? '',
   );
 
+  const gridClassNames = classnames(globalClass, baseGridClass, pageGridClass);
+
   return (
-    <PageGrid className={globalClass}>
+    <div className={gridClassNames}>
       <Template menuItems={leftMenuTree} hideSideMenu layout="landing">
         <TitleHeader
           title="BlogChain"
           subTitle="The place where the blog meets the chain"
           icon="BlogChain"
         />
-
         <div id="maincontent" className={contentClassNames}>
           <article className={articleClass}>
             <div className={articleTopMetadataClass}>
@@ -74,7 +80,7 @@ export const Blog: FC<IPageProps> = ({
           </article>
         </div>
       </Template>
-    </PageGrid>
+    </div>
   );
 };
 

packages/apps/docs/src/components/Layout/Blog/styles.css.ts

@@ -0,0 +1,73 @@
+import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
+
+import { style } from '@vanilla-extract/css';
+
+export const bottomWrapperClass = style([
+  sprinkles({
+    width: '100%',
+    paddingTop: '$20',
+    marginTop: '$20',
+  }),
+  {
+    borderTop: `1px solid ${vars.colors.$borderDefault}`,
+  },
+]);
+
+export const articleTopMetadataClass = style([
+  sprinkles({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: '100%',
+    marginBottom: '$5',
+    paddingX: 0,
+    paddingY: '$5',
+  }),
+  {
+    borderBottom: `1px solid ${vars.colors.$borderDefault}`,
+    opacity: '0.6',
+  },
+]);
+
+export const pageGridClass = style({
+  gridTemplateColumns: 'auto auto',
+  gridTemplateAreas: `
+            "header header"
+            "pageheader pageheader"
+            "content"
+            "footer footer"
+          `,
+
+  '@media': {
+    [`screen and ${breakpoints.md}`]: {
+      gridTemplateColumns: '0% 5% auto 5%',
+
+      gridTemplateAreas: `
+              "header header header header"
+              "pageheader pageheader pageheader pageheader"
+              ". content . ."
+              "footer footer footer footer"
+            `,
+    },
+
+    [`screen and ${breakpoints.xxl}`]: {
+      gridTemplateColumns: '0% minmax(20%, auto) auto minmax(20%, auto)',
+      gridTemplateAreas: `
+              "header header header header"
+              "pageheader pageheader pageheader pageheader"
+              ". content ."
+              "footer footer footer footer"
+            `,
+    },
+  },
+});
+
+export const articleMetaDataItemClass = style({
+  selectors: {
+    '&:not(:first-of-type)::before': {
+      content: '"•"',
+      height: '100%',
+      margin: vars.sizes.$3,
+    },
+  },
+});

packages/apps/docs/src/components/Layout/Full/Full.tsx

@@ -1,6 +1,6 @@
 import { Heading } from '@kadena/react-ui';
 
-import { basebackgroundClass } from '../basestyles.css';
+import { basebackgroundClass, baseGridClass } from '../basestyles.css';
 import {
   articleClass,
   contentClass,
@@ -9,15 +9,14 @@ import {
 import { Template } from '../components/Template';
 import { globalClass } from '../global.css';
 
+import { AsideList, ListItem } from './components/Aside';
 import {
-  Aside,
-  AsideList,
-  ListItem,
-  StickyAside,
-  StickyAsideWrapper,
-} from './components/Aside';
-import { PageGrid } from './styles';
-import { asidebackgroundClass } from './styles.css';
+  asidebackgroundClass,
+  asideClass,
+  pageGridClass,
+  stickyAsideClass,
+  stickyAsideWrapperClass,
+} from './styles.css';
 
 import { BottomPageSection } from '@/components/BottomPageSection';
 import { Breadcrumbs } from '@/components/Breadcrumbs';
@@ -84,8 +83,10 @@ export const Full: FC<IPageProps> = ({
     asidebackgroundClass,
   );
 
+  const gridClassNames = classnames(globalClass, baseGridClass, pageGridClass);
+
   return (
-    <PageGrid className={globalClass}>
+    <div className={gridClassNames}>
       <Template menuItems={leftMenuTree}>
         <div className={contentClassNames} id="maincontent">
           <article className={articleClass} ref={scrollRef}>
@@ -99,10 +100,10 @@ export const Full: FC<IPageProps> = ({
           </article>
         </div>
         <div className={backgroundClassnames} />
-        <Aside data-cy="aside">
+        <aside className={asideClass} data-cy="aside">
           {showSideMenu && (
-            <StickyAsideWrapper>
-              <StickyAside>
+            <div className={stickyAsideWrapperClass}>
+              <div className={stickyAsideClass}>
                 <Heading as="h6" transform="uppercase">
                   On this page
                 </Heading>
@@ -120,12 +121,12 @@ export const Full: FC<IPageProps> = ({
                     );
                   })}
                 </AsideList>
-              </StickyAside>
-            </StickyAsideWrapper>
+              </div>
+            </div>
           )}
-        </Aside>
+        </aside>
       </Template>
-    </PageGrid>
+    </div>
   );
 };
 

packages/apps/docs/src/components/Layout/Full/components/Aside/AsideLink.tsx

@@ -1,5 +1,11 @@
-import { AsideItem, AsideItemLink } from './AsideStyles';
+import {
+  asideItemClass,
+  asideItemLinkActiveVariants,
+  asideItemLinkClass,
+} from './styles.css';
 
+import classNames from 'classnames';
+import Link from 'next/link';
 import React, { FC, MouseEventHandler, ReactNode } from 'react';
 
 interface IProps {
@@ -17,12 +23,17 @@ export const AsideLink: FC<IProps> = ({
   isActive,
   onClick,
 }) => {
+  const linkClass = classNames(
+    asideItemLinkClass,
+    asideItemLinkActiveVariants[isActive ? 'true' : 'false'],
+  );
+
   return (
-    <AsideItem>
-      <AsideItemLink href={href} onClick={onClick} isActive={isActive}>
+    <li className={asideItemClass}>
+      <Link href={href} onClick={onClick} className={linkClass}>
         {label}
-      </AsideItemLink>
+      </Link>
       {children}
-    </AsideItem>
+    </li>
   );
 };

packages/apps/docs/src/components/Layout/Full/components/Aside/AsideList.tsx

@@ -0,0 +1,22 @@
+import { asideListClass, asideListInnerVariants } from './styles.css';
+
+import classNames from 'classnames';
+import React, { FC, ReactNode } from 'react';
+
+interface IProps {
+  children: ReactNode;
+  inner?: boolean;
+  ref?: React.MutableRefObject<HTMLUListElement | null>;
+}
+
+export const AsideList: FC<IProps> = ({ children, inner = false, ref }) => {
+  const classes = classNames(
+    asideListClass,
+    asideListInnerVariants[inner ? 'true' : 'false'],
+  );
+  return (
+    <ul ref={ref} className={classes}>
+      {children}
+    </ul>
+  );
+};