Merge pull request #319 from icflorescu/next

Update README & docs website
icflorescu · Jun 8, 2023 · f087e6d · f087e6d
2 parents 623d11c + ba7b1c6
commit f087e6d
Show file tree

Hide file tree

Showing 22 changed files with 158 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 [![Downloads][downloads-image]][npm-url]
 [![Language][language-image]][repo-url]
 
-A "dark-theme aware" **table component** for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, multiple rows selection, column sorting, custom cell data rendering, row context menu, row expansion, and more.
+The "dark-theme aware" **table component** for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, multiple rows selection, column sorting, custom cell data rendering, row context menu, row expansion, and more.
 
 [![Mantine DataTable](https://user-images.githubusercontent.com/581999/189911698-369ba48e-65f0-4772-aad3-cb5e6d4cb59d.png)](https://icflorescu.github.io/mantine-datatable/)
 
@@ -25,6 +25,8 @@ Install the package and its dependencies:
 npm i @mantine/core @mantine/hooks @emotion/react mantine-datatable
 ```
 
+If you're using Next.js, Vite, CRA, Remix or Gatsby, you might need to install additional dependencies. Please refer to Mantine's [getting started page](https://mantine.dev/pages/getting-started/) for more details.
+
 Use it in your code:
 
 ```ts
@@ -74,7 +76,7 @@ export default function GettingStartedExample() {
 }
 ```
 
-Have a look at the available [component properties](https://icflorescu.github.io/mantine-datatable/component-properties) and make sure to browse the comprehensive list of [usage examples](https://icflorescu.github.io/mantine-datatable/examples/basic-usage).
+Make sure to browse the comprehensive list of [usage examples](https://icflorescu.github.io/mantine-datatable/examples/basic-usage) to learn how to unleash the full power of Mantine DataTable.
 
 ## Other useful resources
 

diff --git a/docs/components/AppFooter.tsx b/docs/components/AppFooter.tsx
@@ -3,8 +3,10 @@ import {
   AUTHOR_LINK,
   FOOTER_HEIGHT_ABOVE_NAVBAR_BREAKPOINT,
   FOOTER_HEIGHT_BELOW_NAVBAR_BREAKPOINT,
+  LICENSE_LINK,
   NAVBAR_BREAKPOINT,
   NAVBAR_WIDTH,
+  NPM_LINK,
   REPO_LINK,
   SPONSOR_LINK,
 } from '~/config';
@@ -60,7 +62,7 @@ export default function AppFooter() {
   const badgeParams = `?style=flat&color=${colors.blue[7].substring(1)}`;
   return (
     <div className={classes.root}>
-      <ExternalLink to={`${REPO_LINK}/blob/main/LICENSE`} rel="license">
+      <ExternalLink to={LICENSE_LINK} rel="license">
         <img src={`https://img.shields.io/npm/l/mantine-datatable.svg${badgeParams}`} alt="MIT License" />
       </ExternalLink>
       <Text size="sm" align="center">
@@ -77,7 +79,7 @@ export default function AppFooter() {
             alt="GitHub Stars"
           />
         </ExternalLink>
-        <ExternalLink to="https://npmjs.org/package/mantine-datatable">
+        <ExternalLink to={NPM_LINK}>
           <img src={`https://img.shields.io/npm/dm/mantine-datatable.svg${badgeParams}`} alt="NPM Downloads" />
         </ExternalLink>
       </Group>

diff --git a/docs/components/AppHeader.tsx b/docs/components/AppHeader.tsx
@@ -9,11 +9,12 @@ import {
   useMantineColorScheme,
 } from '@mantine/core';
 import { useWindowScroll } from '@mantine/hooks';
-import { IconHeartFilled, IconMenu2, IconMoon, IconSun } from '@tabler/icons-react';
-import { HEADER_HEIGHT, NAVBAR_BREAKPOINT, NAVBAR_WIDTH, REPO_LINK, SPONSOR_LINK } from '~/config';
+import { IconBrandNpm, IconHeartFilled, IconMenu2, IconMoon, IconSun } from '@tabler/icons-react';
+import { HEADER_HEIGHT, NAVBAR_BREAKPOINT, NAVBAR_WIDTH, NPM_LINK, REPO_LINK, SPONSOR_LINK } from '~/config';
 import AppHeaderColorSchemeLabel from './AppHeaderColorSchemeLabel';
 import GitHubIcon from './GitHubIcon';
 import Logo from './Logo';
+import { NpmDownloads } from './NpmDownloads';
 
 const REPO_LINK_ARIA_LABEL = 'View Mantine DataTable source code on GitHub';
 const SPONSORS_LINK_ARIA_LABEL = 'Sponsor Mantine DataTable project on GitHub Sponsors';
@@ -102,6 +103,7 @@ const useStyles = createStyles((theme) => {
     button: {
       border: buttonBorder,
       paddingRight: theme.spacing.xs,
+      minWidth: 120,
     },
     buttonIcon: {
       '&&': { marginRight: 8 },
@@ -168,6 +170,22 @@ export default function AppHeader({ onShowNavbarClick }: { onShowNavbarClick: ()
           >
             Sponsor
           </Button>
+          <Button
+            classNames={{
+              root: classes.button,
+              icon: cx(classes.buttonIcon),
+              label: classes.buttonLabel,
+            }}
+            size="xs"
+            variant="default"
+            leftIcon={<IconBrandNpm size={16} />}
+            component="a"
+            href={NPM_LINK}
+            target="_blank"
+            aria-label="View Mantine DataTable on npm"
+          >
+            <NpmDownloads />
+          </Button>
         </Group>
         <Logo className={classes.logo} insideHeader />
       </Group>

diff --git a/docs/components/AppNavbar.tsx b/docs/components/AppNavbar.tsx
@@ -77,23 +77,34 @@ export default function AppNavbar({ visible, onHideClick }: { visible: boolean;
         </Box>
         <Navbar.Section grow component={ScrollArea}>
           <Box my="xs">
-            {PAGES.map(({ icon, title, color, path, external, items }) => {
+            {PAGES.map(({ icon, title, description, color, path, external, items }) => {
               if (external) {
-                return <AppNavbarButton key={path} icon={icon!} title={title} color={color} href={path} externalLink />;
+                return (
+                  <AppNavbarButton
+                    key={path}
+                    icon={icon!}
+                    title={title}
+                    description={description}
+                    color={color}
+                    href={path}
+                    externalLink
+                  />
+                );
               }
               const to = `/${path || ''}`;
               return items ? (
                 <AppNavbarLinkList
                   key={to}
                   title={title}
                   color={color}
-                  items={items.map(({ title: itemTitle, path: itemPath }) => ({
+                  items={items.map(({ title: itemTitle, description: itemDescription, path: itemPath }) => ({
                     title: itemTitle,
+                    description: itemDescription,
                     to: `${to}/${itemPath}`,
                   }))}
                 />
               ) : (
-                <AppNavbarLink key={to} icon={icon} title={title} color={color} to={to} />
+                <AppNavbarLink key={to} icon={icon} title={title} description={description} color={color} to={to} />
               );
             })}
           </Box>

diff --git a/docs/components/AppNavbarButton.tsx b/docs/components/AppNavbarButton.tsx
@@ -40,6 +40,7 @@ export type AppNavbarButtonDisplayProps = {
   color?: MantineColor;
   icon: FC<{ size?: string | number }>;
   title: string;
+  description?: string;
 };
 
 type AppNavbarButtonProps = AppNavbarButtonDisplayProps & {
@@ -51,7 +52,7 @@ type AppNavbarButtonProps = AppNavbarButtonDisplayProps & {
 };
 
 export default forwardRef(function AppNavbarButton(
-  { color, icon: Icon, title, href, externalLink, onClick, active, rotateIcon }: AppNavbarButtonProps,
+  { color, icon: Icon, title, description, href, externalLink, onClick, active, rotateIcon }: AppNavbarButtonProps,
   ref: ForwardedRef<HTMLButtonElement | HTMLAnchorElement>
 ) {
   const { classes, cx } = useStyles({ color });
@@ -63,6 +64,7 @@ export default forwardRef(function AppNavbarButton(
       ref={ref}
       component={href ? 'a' : 'button'}
       href={href}
+      aria-label={description}
       target={externalLink ? '_blank' : undefined}
       onClick={onClick}
     >

diff --git a/docs/components/AppNavbarLinkList.tsx b/docs/components/AppNavbarLinkList.tsx
@@ -25,7 +25,9 @@ const useStyles = createStyles({
   },
 });
 
-type AppNavbarLinkList = Omit<AppNavbarButtonDisplayProps, 'icon'> & { items: { title: string; to: string }[] };
+type AppNavbarLinkList = Omit<AppNavbarButtonDisplayProps, 'icon'> & {
+  items: { title: string; description?: string; to: string }[];
+};
 
 export default function AppNavbarLinkList({ color, title, items }: AppNavbarLinkList) {
   const localStorageKey = `${title}-navlinks-open`;
@@ -79,8 +81,15 @@ export default function AppNavbarLinkList({ color, title, items }: AppNavbarLink
           className={cx(classes.connector, { [classes.connectorVisible]: connectorVisible })}
           sx={(theme) => ({ background: theme.fn.rgba(theme.colors[color || 'blue'][6], 0.5) })}
         />
-        {items.map(({ title, to }) => (
-          <AppNavbarLinkListItem key={to} title={title} to={to} color={color} active={to === asPath} />
+        {items.map(({ title, description, to }) => (
+          <AppNavbarLinkListItem
+            key={to}
+            title={title}
+            description={description}
+            to={to}
+            color={color}
+            active={to === asPath}
+          />
         ))}
       </Collapse>
     </>

diff --git a/docs/components/AppNavbarLinkListItem.tsx b/docs/components/AppNavbarLinkListItem.tsx
@@ -58,12 +58,13 @@ const useStyles = createStyles((theme, { color = 'blue' }: { color?: MantineColo
 
 type AppNavbarLinkListItemProps = {
   title: string;
+  description?: string;
   to: string;
   color?: MantineColor;
   active: boolean;
 };
 
-export default function AppNavbarLinkListItem({ title, to, color, active }: AppNavbarLinkListItemProps) {
+export default function AppNavbarLinkListItem({ title, description, to, color, active }: AppNavbarLinkListItemProps) {
   const { classes, cx } = useStyles({ color });
 
   return (
@@ -73,6 +74,7 @@ export default function AppNavbarLinkListItem({ title, to, color, active }: AppN
       className={cx(classes.root, { [classes.active]: active })}
       component={Link}
       href={to}
+      aria-label={description}
     >
       <div className={classes.content}>
         <Box className={classes.bullet} />

diff --git a/docs/components/NpmDownloads.tsx b/docs/components/NpmDownloads.tsx
@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+import useIsMounted from '~/lib/useIsMounted';
+
+export function NpmDownloads() {
+  const [downloads, setDownloads] = useState(process.env.INITIAL_NPM_DOWNLOADS);
+  const isMounted = useIsMounted();
+
+  useEffect(() => {
+    fetch('https://api.npmjs.org/downloads/point/last-month/mantine-datatable')
+      .then((res) => res.json())
+      .then((res) => !!isMounted && setDownloads(res.downloads));
+  }, [isMounted]);
+
+  return <>{downloads ? `${Math.round(downloads / 1000)}k/month` : '...'}</>;
+}
diff --git a/docs/components/PageNavigation.tsx b/docs/components/PageNavigation.tsx
@@ -48,6 +48,7 @@ export default function PageNavigation({ of }: { of: string }) {
         className={cx(classes.button, { [classes.withoutNext]: !next })}
         component={Link}
         href={`/${back.path}`}
+        aria-label={back.description || 'Go back'}
         rel="prev"
       >
         <Group px="sm" py="xs" position="apart" noWrap>
@@ -63,7 +64,13 @@ export default function PageNavigation({ of }: { of: string }) {
         </Group>
       </UnstyledButton>
       {next && (
-        <UnstyledButton className={classes.button} component={Link} href={`/${next.path}`} rel="next">
+        <UnstyledButton
+          className={classes.button}
+          component={Link}
+          href={`/${next.path}`}
+          aria-label={next.description || 'Up next'}
+          rel="next"
+        >
           <Group px="sm" py="xs" position="apart" noWrap>
             <div>
               <Text weight={500}>Up next</Text>

diff --git a/docs/components/PageSubtitle.tsx b/docs/components/PageSubtitle.tsx
@@ -16,9 +16,9 @@ export default function PageSubtitle({
       mb={mb}
       sx={(theme) => ({
         color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[8],
-        fontSize: '1.2rem',
+        fontSize: '1.25rem',
         [`@media (min-width: ${theme.breakpoints.sm})`]: {
-          fontSize: '1.3rem',
+          fontSize: '1.375rem',
         },
         [`@media (min-width: ${theme.breakpoints.md})`]: {
           fontSize: '1.5rem',

diff --git a/docs/components/PageTitle.tsx b/docs/components/PageTitle.tsx
@@ -30,6 +30,7 @@ export default function PageTitle({ of }: { of: string }) {
             fontSize: '2rem',
           },
           [`@media (min-width: ${theme.breakpoints.lg})`]: {
+            fontSize: '2.25rem',
             marginTop: '1em',
           },
         })}

diff --git a/docs/components/homePage/HomePageButtons.tsx b/docs/components/homePage/HomePageButtons.tsx
@@ -8,7 +8,7 @@ import { getFirstExamplePagePath } from '~/lib/page';
 const useStyles = createStyles((theme) => ({
   root: {
     margin: '2em 0 0',
-    '@media (min-width: 586px)': {
+    '@media (min-width: 600px)': {
       gap: theme.spacing.xl,
       margin: '3em 0 1em',
     },
@@ -18,7 +18,7 @@ const useStyles = createStyles((theme) => ({
     '@media (min-width: 420px)': {
       width: `calc(50% - ${theme.spacing.md} / 2)`,
     },
-    '@media (min-width: 586px)': {
+    '@media (min-width: 600px)': {
       width: 'auto',
     },
   },
@@ -29,7 +29,7 @@ const useStyles = createStyles((theme) => ({
     '@media (min-width: 420px)': {
       width: '100%',
     },
-    '@media (min-width: 586px)': {
+    '@media (min-width: 600px)': {
       width: 'initial',
     },
   },
@@ -48,6 +48,7 @@ export default function HomePageButtons() {
         leftIcon={<IconRocket />}
         component={Link}
         href="/getting-started"
+        aria-label="Get started with Mantine Table"
       >
         Get started
       </Button>
@@ -59,6 +60,7 @@ export default function HomePageButtons() {
         leftIcon={<GitHubIcon size={20} />}
         component="a"
         href={REPO_LINK}
+        aria-label="View Mantine Table source code on GitHub"
         target="_blank"
       >
         View code
@@ -70,6 +72,7 @@ export default function HomePageButtons() {
         gradient={{ from: 'green.7', to: 'green.6' }}
         leftIcon={<IconBulb />}
         component={Link}
+        aria-label="Learn how to use Mantine Table by example"
         href={getFirstExamplePagePath()}
       >
         Learn by example

diff --git a/docs/components/homePage/HomePageTitle.tsx b/docs/components/homePage/HomePageTitle.tsx
@@ -37,11 +37,11 @@ export default function HomePageTitle() {
   const { classes } = useStyles();
   return (
     <Title className={classes.root} order={2}>
-      A table component
+      The table component
       <br />
       for your Mantine
       <br />
-      <span className={classes.gradientText}>data-rich applications.</span>
+      <span className={classes.gradientText}>data-rich applications</span>
     </Title>
   );
 }
diff --git a/docs/config.ts b/docs/config.ts
@@ -12,13 +12,21 @@ export const SEO_CREATOR = '@icflorescu';
 export const HEADER_HEIGHT = 56;
 export const FOOTER_HEIGHT_BELOW_NAVBAR_BREAKPOINT = 164;
 export const FOOTER_HEIGHT_ABOVE_NAVBAR_BREAKPOINT = 64;
-export const NAVBAR_WIDTH = 280;
+export const NAVBAR_WIDTH = 300;
 export const NAVBAR_BREAKPOINT = 'md';
 
 export const AUTHOR_LINK = 'https://github.com/icflorescu';
 export const REPO_LINK = 'https://github.com/icflorescu/mantine-datatable';
+export const NPM_LINK = 'https://www.npmjs.com/package/mantine-datatable';
+export const LICENSE_LINK = `${REPO_LINK}/blob/main/LICENSE`;
 export const SPONSOR_LINK = 'https://github.com/sponsors/icflorescu';
 export const MANTINE_CONTEXTMENU_LINK = 'https://icflorescu.github.io/mantine-contextmenu/';
+export const MANTINE_LINK = 'https://mantine.dev';
+export const NEXTJS_LINK = 'https://nextjs.org';
+export const VITE_LINK = 'https://vitejs.dev';
+export const REMIX_LINK = 'https://remix.run';
+export const CRA_LINK = 'https://create-react-app.dev';
+export const GATSBY_LINK = 'https://www.gatsbyjs.com';
 
 export const PAGES: ({ external?: true; title: string; color?: MantineColor; description?: string } & (
   | {
@@ -45,7 +53,7 @@ export const PAGES: ({ external?: true; title: string; color?: MantineColor; des
     title: 'Examples',
     color: 'green',
     items: [
-      { path: 'basic-usage', title: 'Basic usage', description: 'Example: basic usage' },
+      { path: 'basic-usage', title: 'Basic usage', description: 'Example: basic usage of Mantine DataTable' },
       {
         path: 'basic-table-properties',
         title: 'Basic table properties',
@@ -211,6 +219,7 @@ export const PAGES: ({ external?: true; title: string; color?: MantineColor; des
     external: true,
     path: `${REPO_LINK}/blob/main/CHANGELOG.md`,
     title: 'Changelog',
+    description: 'Mantine DataTable changelog',
     color: 'gray',
     icon: IconList,
   },