[DOCS]chore: optimisation

.changeset/wicked-squids-peel.md

@@ -0,0 +1,5 @@
+---
+'@kadena/docs': minor
+---
+
+updating to next 13.5 and some small performance updates

packages/apps/docs/.storybook/preview.ts

@@ -1,7 +1,7 @@
 import { darkThemeClass } from '@kadena/react-ui/theme';
 
 import { themes } from '@storybook/theming';
-import { RouterContext } from 'next/dist/shared/lib/router-context'; // next 12
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; // next 13
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

packages/apps/docs/next.config.mjs

@@ -92,8 +92,11 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true, // lint is a different task/phase
   },
+
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
   reactStrictMode: true,
+  productionBrowserSourceMaps: true,
+
   transpilePackages: ['@kadena/react-ui', 'react-tweet'],
   images: {
     remotePatterns: [

packages/apps/docs/package.json

@@ -53,7 +53,7 @@
     "mdast-util-to-markdown": "~1.5.0",
     "mdast-util-to-string": "~3.2.0",
     "mobx": "~6.9.0",
-    "next": "13.4.5",
+    "next": "13.5.3",
     "next-themes": "~0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/apps/docs/src/components/BottomPageSection/BottomPageSection.tsx

@@ -68,7 +68,11 @@ export const BottomPageSection: FC<IProps> = ({
         )}
       </Stack>
       <Divider />
-      <Stack justifyContent="space-between" width="100%">
+      <Stack
+        direction={{ xs: 'column', lg: 'row' }}
+        justifyContent="space-between"
+        width="100%"
+      >
         <PageHelpful editLink={editLink} />
         <Subscribe />
       </Stack>

packages/apps/docs/src/components/LastModifiedDate/LastModifiedDate.tsx

@@ -3,6 +3,7 @@
 import { Stack, Text } from '@kadena/react-ui';
 
 import { formatISODate } from '@/utils/dates';
+import { isValid } from 'date-fns';
 import type { FC } from 'react';
 import React from 'react';
 
@@ -11,7 +12,7 @@ interface IProps {
 }
 
 export const LastModifiedDate: FC<IProps> = ({ date }) => {
-  if (!date) return null;
+  if (!isValid(date) || !date) return null;
   const dateString = formatISODate(date);
   return (
     <Stack justifyContent="flex-end">

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

@@ -1,24 +1,26 @@
 import { asideListClass, asideListInnerVariants } from './styles.css';
 
 import classNames from 'classnames';
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 
 interface IProps {
   children: ReactNode;
   inner?: boolean;
-  // eslint-disable-next-line @rushstack/no-new-null
-  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>
-  );
-};
+export const AsideList = React.forwardRef<HTMLUListElement, IProps>(
+  ({ children, inner = false }, ref) => {
+    const classes = classNames(
+      asideListClass,
+      asideListInnerVariants[inner ? 'true' : 'false'],
+    );
+    return (
+      <ul ref={ref} className={classes}>
+        {children}
+      </ul>
+    );
+  },
+);
+
+AsideList.displayName = 'AsideList';

packages/apps/docs/src/components/Layout/Landing/components/Headers/HomeHeader.tsx

@@ -47,35 +47,37 @@ export const HomeHeader: FC<IProps> = ({ popularPages }) => {
   return (
     <header className={loaderHeaderClass}>
       <div className={wrapperClass}>
-        <Grid.Root columns={{ sm: 1, md: 2 }}>
-          <Grid.Item>
-            <Heading as="h1" variant="h2">
-              Kadena
-            </Heading>
-            <Stack direction="column" gap="$2xs">
-              <Heading as="h2" variant="h4">
-                Build your <GradientText>own</GradientText> Internet
+        <Box marginX={{ xs: '$1', sm: '$4' }}>
+          <Grid.Root columns={{ sm: 1, md: 2 }}>
+            <Grid.Item>
+              <Heading as="h1" variant="h2">
+                Kadena
               </Heading>
-              <span className={subheaderClass}>
-                Explore our guides and examples to build on Kadena
-              </span>
+              <Stack direction="column" gap="$2xs">
+                <Heading as="h2" variant="h4">
+                  Build your <GradientText>own</GradientText> Internet
+                </Heading>
+                <span className={subheaderClass}>
+                  Explore our guides and examples to build on Kadena
+                </span>
 
-              <Box marginTop="$5" marginRight="$40">
-                <SearchBar onKeyUp={handleKeyPress} />
-              </Box>
-            </Stack>
-          </Grid.Item>
-          <Grid.Item>
-            {popularPages.length > 0 && (
-              <Box
-                paddingLeft={{ sm: '$1', lg: '$15', xl: '$32', xxl: '$48' }}
-                marginRight="$10"
-              >
-                <MostPopular pages={popularPages} title="Most viewed docs" />
-              </Box>
-            )}
-          </Grid.Item>
-        </Grid.Root>
+                <Box marginTop="$5" marginRight="$40">
+                  <SearchBar onKeyUp={handleKeyPress} />
+                </Box>
+              </Stack>
+            </Grid.Item>
+            <Grid.Item>
+              {popularPages.length > 0 && (
+                <Box
+                  paddingLeft={{ sm: '$1', lg: '$15', xl: '$32', xxl: '$48' }}
+                  marginRight="$10"
+                >
+                  <MostPopular pages={popularPages} title="Most viewed docs" />
+                </Box>
+              )}
+            </Grid.Item>
+          </Grid.Root>
+        </Box>
       </div>
     </header>
   );

packages/apps/docs/src/components/Layout/Landing/components/Headers/style.css.ts

@@ -9,8 +9,11 @@ import { style } from '@vanilla-extract/css';
 export const headerClass = style([
   sprinkles({
     position: 'relative',
+    margin: 0,
+    padding: 0,
   }),
   {
+    width: '100vw',
     gridArea: 'pageheader',
     zIndex: 2,
     selectors: {
@@ -50,13 +53,14 @@ export const wrapperClass = style([
     alignItems: 'flex-start',
     width: '100%',
     paddingTop: '$20',
-    paddingRight: '$12',
+
     paddingBottom: '$20',
-    paddingLeft: '$4',
+
     marginX: 'auto',
     marginBottom: '$16',
   }),
   {
+    paddingInline: 0,
     maxWidth: $$pageWidth,
     backgroundColor: $$backgroundOverlayColor,
   },

packages/apps/docs/src/components/Layout/basestyles.css.ts

@@ -9,6 +9,7 @@ import {
 import { createVar, globalStyle, style } from '@vanilla-extract/css';
 
 globalStyle('html, body', {
+  margin: 0,
   backgroundColor: vars.colors.$background,
 });
 

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

@@ -47,7 +47,7 @@ export const Header: FC<IProps> = ({ menuItems, layout = 'full' }) => {
       </a>
       <div className={innerWrapperClass}>
         <div className={logoClass}>
-          <Link href="/" passHref>
+          <Link href="/" passHref aria-label="Go to the home page">
             <DocsLogo overwriteTheme="dark" />
           </Link>
         </div>

packages/apps/docs/src/components/Layout/components/Header/SearchButton.tsx

@@ -17,6 +17,7 @@ export const SearchButton: FC = () => {
     <button
       className={classNames(searchButtonClass, headerButtonClass)}
       onClick={handleOpenSearch}
+      aria-label="Open the search modal"
     >
       <SystemIcon.Magnify />
       <span className={searchButtonSlashClass}>

packages/apps/docs/src/components/Layout/components/Menu/MenuBack.tsx

@@ -15,5 +15,12 @@ export const MenuBack: FC<IProps> = ({ isOpen = false, onClick }) => {
     menuBackOpenVariants[isOpen ? 'isOpen' : 'isClosed'],
   );
 
-  return <button type="button" className={classes} onClick={onClick} />;
+  return (
+    <button
+      type="button"
+      className={classes}
+      onClick={onClick}
+      aria-label="Close the slide menu"
+    />
+  );
 };

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

@@ -49,7 +49,7 @@ export const TitleHeader: FC<IProps> = ({ title, subTitle, avatar }) => {
           </Stack>
           {subTitle !== undefined && (
             <span className={subheaderClass}>
-              <Heading as="h6" bold={false}>
+              <Heading as="h2" variant="h6" bold={false}>
                 {subTitle}
               </Heading>
             </span>

packages/apps/docs/src/components/Layout/components/articleStyles.css.ts

@@ -1,4 +1,4 @@
-import { breakpoints, sprinkles } from '@kadena/react-ui/theme';
+import { breakpoints, sprinkles, vars } from '@kadena/react-ui/theme';
 
 import type { LayoutType } from '@/types/Layout';
 import { style, styleVariants } from '@vanilla-extract/css';
@@ -7,9 +7,16 @@ export const articleClass = style([
   sprinkles({
     width: '100%',
     paddingY: 0,
-    paddingX: '$10',
+    paddingX: '$4',
     backgroundColor: 'transparent',
   }),
+  {
+    '@media': {
+      [`screen and ${breakpoints.md}`]: {
+        paddingInline: vars.sizes.$10,
+      },
+    },
+  },
 ]);
 
 export const contentClass = style([

packages/apps/docs/src/pages/_app.tsx

@@ -38,7 +38,6 @@ export const MyApp = ({
   Component: FC<IPageProps>;
 }): JSX.Element => {
   const props = deserializePageProps(pageProps);
-
   const Layout = getLayout(props.frontmatter.layout);
 
   // check for a router query
@@ -60,6 +59,7 @@ export const MyApp = ({
         <title>{props.frontmatter.title}</title>
         <meta name="title" content={props.frontmatter.title} />
         <meta name="description" content={props.frontmatter.description} />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
       <MDXProvider components={markDownComponents}>
         <ThemeProvider

packages/apps/docs/src/scripts/getdocstree.mjs

@@ -8,6 +8,7 @@ import { frontmatterFromMarkdown } from 'mdast-util-frontmatter';
 import { exec } from 'child_process';
 import { promisify } from 'util';
 import logUpdate from 'log-update';
+import { isValid } from 'date-fns';
 
 const promiseExec = promisify(exec);
 const errors = [];
@@ -43,11 +44,15 @@ const isMarkDownFile = (name) => {
   return extension.toLowerCase() === 'md' || extension.toLowerCase() === 'mdx';
 };
 
-const getLastModifiedDate = async (root) => {
+export const getLastModifiedDate = async (root) => {
   const { stdout } = await promiseExec(
     `git log -1 --pretty="format:%ci" ${root}`,
   );
-  return stdout;
+
+  const date = new Date(stdout);
+  if (!isValid(date)) return;
+
+  return date.toUTCString();
 };
 
 const isIndex = (file) => {

packages/apps/docs/src/scripts/importReadme.mjs

@@ -5,10 +5,8 @@ import { toMarkdown } from 'mdast-util-to-markdown';
 import { toString } from 'mdast-util-to-string';
 import { importReadMes } from './utils.mjs';
 import chalk from 'chalk';
-import { exec } from 'child_process';
-import { promisify } from 'util';
+import { getLastModifiedDate } from './getdocstree.mjs';
 
-const promiseExec = promisify(exec);
 const errors = [];
 
 const DOCSROOT = './src/pages/docs/';
@@ -216,13 +214,6 @@ const relinkReferences = (md, pages, root) => {
   relinkImageReferences(imageReferences, definitions, pages, root);
 };
 
-const getLastModifiedDate = async (root) => {
-  const { stdout } = await promiseExec(
-    `git log -1 --pretty="format:%ci" ${root}`,
-  );
-  return stdout;
-};
-
 const importDocs = async (filename, destination, parentTitle, options) => {
   const doc = fs.readFileSync(`./../../${filename}`, 'utf-8');
 

packages/apps/docs/src/utils/staticGeneration/checkSubTreeForActive.mjs

@@ -1,7 +1,7 @@
 import { getData } from './getData.mjs';
 import path from 'path';
 
-const omit = (obj, ...keysToOmit) =>
+const omit = (obj, keysToOmit) =>
   Object.keys(obj)
     .filter((key) => !keysToOmit.includes(key))
     .reduce((acc, key) => ({ ...acc, [key]: obj[key] }), {});
@@ -46,6 +46,8 @@ const mapSubTree = (pathname, noChildren, isRoot) => (item) => {
     'lastModifiedDate',
     'publishDate',
     'author',
+    'wordCount',
+    'readingTimeInMinutes',
   ]);
 
   if (IsMenuOpen(pathname, newItem.root)) {

packages/apps/immutable-records/package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@kadena/react-ui": "workspace:*",
     "@vanilla-extract/css": "1.12.0",
+    "mini-css-extract-plugin": "2.7.6",
     "next": "13.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"