Merge pull request #336 from icflorescu/next

Minor docs website improvements
icflorescu · Jun 15, 2023 · bbd9a0c · bbd9a0c
2 parents 5b09a57 + a753b96
commit bbd9a0c
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 27 deletions.
diff --git a/docs/components/AppFooter.tsx b/docs/components/AppFooter.tsx
@@ -1,4 +1,4 @@
-import { createStyles, Text } from '@mantine/core';
+import { createStyles, Group, Text } from '@mantine/core';
 import {
   AUTHOR_LINK,
   FOOTER_BREAKPOINT,
@@ -7,6 +7,7 @@ import {
   LICENSE_LINK,
   NAVBAR_BREAKPOINT,
   NAVBAR_WIDTH,
+  NPM_LINK,
   REPO_LINK,
   SPONSOR_LINK,
 } from '~/config';
@@ -29,11 +30,6 @@ const useStyles = createStyles((theme) => {
       justifyContent: 'center',
       alignItems: 'center',
       gap: theme.spacing.xs,
-      [`@media (min-width: ${FOOTER_BREAKPOINT}px)`]: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        height: FOOTER_HEIGHT_ABOVE_BREAKPOINT,
-      },
       [`@media (min-width: ${theme.breakpoints[NAVBAR_BREAKPOINT]})`]: {
         marginLeft: NAVBAR_WIDTH,
         '&::before': {
@@ -52,6 +48,11 @@ const useStyles = createStyles((theme) => {
           )} 30%)`,
         },
       },
+      [`@media (min-width: ${FOOTER_BREAKPOINT}px)`]: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        height: FOOTER_HEIGHT_ABOVE_BREAKPOINT,
+      },
     },
   };
 });
@@ -61,30 +62,44 @@ export default function AppFooter() {
     classes,
     theme: { colors },
   } = useStyles();
-  const badgeParams = `?style=flat&color=${colors.blue[7].substring(1)}`;
+  const color = colors.blue[7].substring(1);
+  const badgeParams = `?style=flat&color=${color}`;
   return (
     <div className={classes.root}>
-      <ExternalLink to={LICENSE_LINK} rel="license">
-        <img
-          src={`https://img.shields.io/npm/l/mantine-datatable.svg${badgeParams}`}
-          alt="MIT License"
-          aria-label="MantineDataTable is released under MIT license"
-        />
-      </ExternalLink>
+      <Group spacing="xs">
+        <ExternalLink to={LICENSE_LINK} rel="license">
+          <img
+            src={`https://img.shields.io/npm/l/mantine-datatable.svg${badgeParams}`}
+            alt="MIT License"
+            aria-label="MantineDataTable is released under MIT license"
+          />
+        </ExternalLink>
+        <ExternalLink to={SPONSOR_LINK}>
+          <img
+            src={`https://img.shields.io/static/v1?label=github&message=sponsor&color=${color}`}
+            alt="Sponsor the author"
+          />
+        </ExternalLink>{' '}
+      </Group>
       <Text size="sm" align="center">
         Built by <ExternalLink to={AUTHOR_LINK}>Ionut-Cristian Florescu</ExternalLink> and{' '}
         <ExternalLink to={`${REPO_LINK}/graphs/contributors`}>these awesome people</ExternalLink>
         .
         <br />
         Please <ExternalLink to={SPONSOR_LINK}>sponsor the project</ExternalLink> if you find it useful.
       </Text>
-      <ExternalLink to={REPO_LINK}>
-        <img
-          src={`https://img.shields.io/github/stars/icflorescu/mantine-datatable${badgeParams}`}
-          alt="GitHub Stars"
-          aria-label="Star Mantine DataTable on GitHub"
-        />
-      </ExternalLink>
+      <Group spacing="xs">
+        <ExternalLink to={REPO_LINK}>
+          <img
+            src={`https://img.shields.io/github/stars/icflorescu/mantine-datatable${badgeParams}`}
+            alt="GitHub Stars"
+            aria-label="Star Mantine DataTable on GitHub"
+          />
+        </ExternalLink>
+        <ExternalLink to={NPM_LINK}>
+          <img src={`https://img.shields.io/npm/dm/mantine-datatable.svg${badgeParams}`} alt="NPM Downloads" />
+        </ExternalLink>
+      </Group>
     </div>
   );
 }
diff --git a/docs/components/AppWrapper.tsx b/docs/components/AppWrapper.tsx
@@ -36,13 +36,13 @@ const useStyles = createStyles((theme) => {
           0
         )}), linear-gradient(${theme.fn.rgba(theme.black, shadowGradientAlpha)}, ${theme.fn.rgba(theme.black, 0)} 30%)`,
       },
+      [`@media (min-width: ${theme.breakpoints[NAVBAR_BREAKPOINT]})`]: {
+        marginLeft: NAVBAR_WIDTH,
+      },
       [`@media (min-width: ${FOOTER_BREAKPOINT}px)`]: {
         minHeight: `calc(100vh - ${HEADER_HEIGHT}px - ${FOOTER_HEIGHT_ABOVE_BREAKPOINT}px)`,
         marginBottom: FOOTER_HEIGHT_ABOVE_BREAKPOINT,
       },
-      [`@media (min-width: ${theme.breakpoints[NAVBAR_BREAKPOINT]})`]: {
-        marginLeft: NAVBAR_WIDTH,
-      },
     },
   };
 });

diff --git a/docs/components/NpmDownloads.tsx b/docs/components/NpmDownloads.tsx
@@ -11,5 +11,5 @@ export function NpmDownloads() {
       .then((res) => !!isMounted && setDownloads(res.downloads));
   }, [isMounted]);
 
-  return <>{downloads ? `${Math.round(downloads / 1000)}k/month` : '...'}</>;
+  return <>{downloads ? `${(downloads / 1000).toFixed(1)}k/month` : '...'}</>;
 }
diff --git a/docs/config.ts b/docs/config.ts
@@ -10,7 +10,7 @@ export const SEO_DEFAULT_DESCRIPTION =
 export const SEO_CREATOR = '@icflorescu';
 
 export const HEADER_HEIGHT = 56;
-export const FOOTER_BREAKPOINT = 1024;
+export const FOOTER_BREAKPOINT = 1200;
 export const FOOTER_HEIGHT_BELOW_BREAKPOINT = 164;
 export const FOOTER_HEIGHT_ABOVE_BREAKPOINT = 64;
 export const NAVBAR_WIDTH = 300;

diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
@@ -61,7 +61,8 @@ export default function Page() {
         </div>
         <Text className={classes.subtitle}>
           Mantine DataTable is a lightweight, dependency-free component that brings datagrid-like functionality to your
-          data-rich user interfaces. Features context-menu support and{' '}
+          data-rich user interfaces. Features{' '}
+          <InternalLink to="/examples/row-context-menu">context-menu support</InternalLink> and{' '}
           <InternalLink to="/examples/records-selection">
             intuitive Gmail-style additive batch rows selection
           </InternalLink>{' '}