perf(remark): remove partials from page props (#195)

* perf(remark): remove partials from page props * chore(lint): add ts-prune
angrybacon · Jan 12, 2023 · c5dbd3b · c5dbd3b
1 parent a62f6eb
commit c5dbd3b
Show file tree

Hide file tree

Showing 18 changed files with 220 additions and 219 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -65,7 +65,6 @@
       "warn",
       { "ignoreRestSiblings": true }
     ],
-    "@typescript-eslint/no-use-before-define": "error",
     "camelcase": ["warn", { "ignoreDestructuring": true }],
     "import/extensions": [
       "error",

diff --git a/.gitignore b/.gitignore
@@ -3,5 +3,5 @@
 .vercel/
 coverage/
 node_modules/
-.env.local
+.env*.local
 tsconfig.tsbuildinfo
diff --git a/.ts-prunerc.json b/.ts-prunerc.json
@@ -0,0 +1,3 @@
+{
+  "ignore": "src/pages/"
+}
diff --git a/package.json b/package.json
@@ -6,10 +6,11 @@
     "node": "18"
   },
   "scripts": {
-    "build": "concurrently -c auto -n 'next,scryfall' 'NEXT_PUBLIC_HASH=$(git rev-parse --short HEAD) next build' 'yarn scryfall' --kill-others --success first",
-    "dev": "concurrently -c auto -n 'next,scryfall' 'NEXT_PUBLIC_HASH=$(git rev-parse --short HEAD) next dev' 'yarn scryfall'",
-    "lint": "yarn lint:code && yarn lint:typings",
+    "build": "concurrently 'NEXT_PUBLIC_HASH=$(git rev-parse --short HEAD) next build' 'yarn scryfall' --names 'next,scryfall' --prefix-colors auto --kill-others --success first",
+    "dev": "concurrently 'NEXT_PUBLIC_HASH=$(git rev-parse --short HEAD) next dev' 'yarn scryfall' --names 'next,scryfall' --prefix-colors auto",
+    "lint": "concurrently 'yarn:lint:*(!wiki)' --names --prefix-colors auto --success all",
     "lint:code": "eslint .",
+    "lint:prune": "ts-prune --error",
     "lint:typings": "tsc",
     "lint:wiki": "markdownlint markdown/",
     "prepare": "husky install",
@@ -73,6 +74,7 @@
     "markdownlint-cli": "0.33.0",
     "msw": "0.49.2",
     "prettier": "2.8.2",
+    "ts-prune": "0.10.3",
     "typescript": "4.9.4"
   }
 }
diff --git a/src/components/Remark/Remark.tsx b/src/components/Remark/Remark.tsx
@@ -9,7 +9,7 @@ import { Box } from '@mui/material';
 // eslint-disable-next-line import/no-cycle
 import { COMPONENTS, COMPONENTS_EXTRA } from '@/components/Remark/constants';
 import type { Decklists } from '@/tools/decklists/types';
-import type { Markdown, Partials } from '@/tools/markdown/types';
+import type { Markdown } from '@/tools/markdown/types';
 import { remarkAccordion } from '@/tools/remark/remarkAccordion';
 import { remarkBase } from '@/tools/remark/remarkBase';
 import { remarkCard } from '@/tools/remark/remarkCard';
@@ -20,15 +20,10 @@ import { remarkRow } from '@/tools/remark/remarkRow';
 interface Props {
   decklists: Decklists;
   markdown: Markdown;
-  partials: Partials;
 }
 
-export const Remark: FunctionComponent<Props> = ({
-  decklists,
-  markdown,
-  partials,
-}) => {
-  const { scries, text } = markdown;
+export const Remark: FunctionComponent<Props> = ({ decklists, markdown }) => {
+  const { partials, scries, text } = markdown;
 
   /** Vendor plugins to run against the node tree. */
   const basePlugins: PluggableList = [

diff --git a/src/components/Remark/renderers/RemarkAccordion.tsx b/src/components/Remark/renderers/RemarkAccordion.tsx
@@ -13,7 +13,7 @@ import { alpha } from '@mui/material/styles';
 // eslint-disable-next-line import/no-cycle
 import { Remark } from '@/components/Remark/Remark';
 import type { Decklists } from '@/tools/decklists/types';
-import type { Markdown, Partials } from '@/tools/markdown/types';
+import type { Markdown } from '@/tools/markdown/types';
 
 // NOTE Because this feature allows Markdown content within itself, it
 //      introduces a circular reference but is controlled as long as it doesn't
@@ -24,57 +24,43 @@ import type { Markdown, Partials } from '@/tools/markdown/types';
 export interface Props extends ReactMarkdownProps {
   decklists: Decklists;
   markdown?: Markdown;
-  partials: Partials;
 }
 
 export const RemarkAccordion: FunctionComponent<Props> = ({
-  children,
+  children: [title = 'Expand', ...content] = [],
   decklists,
   markdown,
-  partials,
-}) => {
-  const [title, ...content] = children;
-
-  if (!title) return null;
-
-  return (
-    <Box
-      sx={(theme) => ({
-        ...theme.mixins.barf,
-        border: 1,
-        borderColor: 'divider',
-        borderLeft: 0,
-        borderRight: 0,
-        '& + &': { borderTop: 0, mt: '0!important' },
-      })}
-    >
-      <Accordion elevation={0}>
-        <AccordionSummary
-          expandIcon={<Icon path={mdiChevronDown} size={1} />}
-          sx={(theme) => theme.mixins.gutters}
-        >
-          <Typography component="div">{title}</Typography>
-        </AccordionSummary>
-        <AccordionDetails
-          sx={(theme) => ({
-            ...theme.mixins.gutters,
-            bgcolor: alpha(theme.palette.primary.light, 0.1),
-            borderTop: 1,
-            borderTopColor: 'divider',
-            py: 2,
-            '& h6:first-of-type': { mt: 0 },
-          })}
-        >
-          {content}
-          {markdown && (
-            <Remark
-              decklists={decklists}
-              markdown={markdown}
-              partials={partials}
-            />
-          )}
-        </AccordionDetails>
-      </Accordion>
-    </Box>
-  );
-};
+}) => (
+  <Box
+    sx={(theme) => ({
+      ...theme.mixins.barf,
+      border: 1,
+      borderColor: 'divider',
+      borderLeft: 0,
+      borderRight: 0,
+      '& + &': { borderTop: 0, mt: '0!important' },
+    })}
+  >
+    <Accordion elevation={0}>
+      <AccordionSummary
+        expandIcon={<Icon path={mdiChevronDown} size={1} />}
+        sx={(theme) => theme.mixins.gutters}
+      >
+        <Typography component="div">{title}</Typography>
+      </AccordionSummary>
+      <AccordionDetails
+        sx={(theme) => ({
+          ...theme.mixins.gutters,
+          bgcolor: alpha(theme.palette.primary.light, 0.1),
+          borderTop: 1,
+          borderTopColor: 'divider',
+          py: 2,
+          '& h6:first-of-type': { mt: 0 },
+        })}
+      >
+        {content}
+        {markdown && <Remark decklists={decklists} markdown={markdown} />}
+      </AccordionDetails>
+    </Accordion>
+  </Box>
+);
diff --git a/src/pages/[category]/[chapter].tsx b/src/pages/[category]/[chapter].tsx
@@ -10,27 +10,15 @@ import type { Decklists } from '@/tools/decklists/types';
 import { getChapters } from '@/tools/markdown/getChapters';
 import { getMarkdown } from '@/tools/markdown/getMarkdown';
 import { getMenu } from '@/tools/markdown/getMenu';
-import { getPartials } from '@/tools/markdown/getPartials';
-import type {
-  Document,
-  Markdown,
-  Menu,
-  Partials,
-} from '@/tools/markdown/types';
+import type { Document, Markdown, Menu } from '@/tools/markdown/types';
 
 interface Props {
   decklists: Decklists;
   markdown: Markdown;
   menu: Menu;
-  partials: Partials;
 }
 
-const ChapterPage: NextPage<Props> = ({
-  decklists,
-  markdown,
-  menu,
-  partials,
-}) => {
+const ChapterPage: NextPage<Props> = ({ decklists, markdown, menu }) => {
   const { title } = markdown.matter;
 
   if (!title) return null;
@@ -42,11 +30,7 @@ const ChapterPage: NextPage<Props> = ({
           <Typography align="center" variant="h1">
             {title}
           </Typography>
-          <Remark
-            decklists={decklists}
-            markdown={markdown}
-            partials={partials}
-          />
+          <Remark decklists={decklists} markdown={markdown} />
         </CardContent>
       </Card>
     </Layout>
@@ -72,12 +56,11 @@ export const getStaticProps: GetStaticProps<Props, Query> = async ({
 }) => ({
   props: {
     decklists: getDecklists(),
-    markdown: await getMarkdown(
+    markdown: await getMarkdown({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      join('chapters', params!.category, params!.chapter)
-    ),
+      path: join('chapters', params!.category, params!.chapter),
+    }),
     menu: getMenu(),
-    partials: await getPartials(),
   },
 });
 

diff --git a/src/pages/articles/[year]/[month]/[day]/[article].tsx b/src/pages/articles/[year]/[month]/[day]/[article].tsx
@@ -9,30 +9,22 @@ import { Remark } from '@/components/Remark/Remark';
 import { getDecklists } from '@/tools/decklists/getDecklists';
 import type { Decklists } from '@/tools/decklists/types';
 import { getArticles } from '@/tools/markdown/getArticles';
-import { getMarkdown } from '@/tools/markdown/getMarkdown';
+import { getMarkdown, getMarkdownPartial } from '@/tools/markdown/getMarkdown';
 import { getMenu } from '@/tools/markdown/getMenu';
-import { getPartials } from '@/tools/markdown/getPartials';
-import type {
-  Document,
-  Markdown,
-  Menu,
-  Partials,
-} from '@/tools/markdown/types';
+import type { Document, Markdown, Menu } from '@/tools/markdown/types';
 
 interface Props {
   decklists: Decklists;
   footer: Markdown;
   markdown: Markdown;
   menu: Menu;
-  partials: Partials;
 }
 
 const ArticlePage: NextPage<Props> = ({
   decklists,
   footer,
   markdown,
   menu,
-  partials,
 }) => {
   const { matter } = markdown;
   const { authors, bannerData, title } = matter;
@@ -44,15 +36,11 @@ const ArticlePage: NextPage<Props> = ({
       <Card>
         <Banner authors={authors} banner={bannerData} title={title} />
         <CardContent>
-          <Remark
-            decklists={decklists}
-            markdown={markdown}
-            partials={partials}
-          />
+          <Remark decklists={decklists} markdown={markdown} />
         </CardContent>
         <Divider />
         <CardContent>
-          <Remark decklists={decklists} markdown={footer} partials={partials} />
+          <Remark decklists={decklists} markdown={footer} />
         </CardContent>
       </Card>
     </Layout>
@@ -80,20 +68,19 @@ export const getStaticProps: GetStaticProps<Props, Query> = async ({
 }) => ({
   props: {
     decklists: getDecklists(),
-    footer: await getMarkdown('partials/article-footer'),
-    markdown: await getMarkdown(
-      join(
+    footer: await getMarkdownPartial('article-footer'),
+    markdown: await getMarkdown({
+      path: join(
         'articles',
         /* eslint-disable @typescript-eslint/no-non-null-assertion */
         params!.year,
         params!.month,
         params!.day,
         params!.article
         /* eslint-enable @typescript-eslint/no-non-null-assertion */
-      )
-    ),
+      ),
+    }),
     menu: getMenu(),
-    partials: await getPartials(),
   },
 });
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -7,33 +7,20 @@ import { Remark } from '@/components/Remark/Remark';
 import { getDecklists } from '@/tools/decklists/getDecklists';
 import type { Decklists } from '@/tools/decklists/types';
 import { getArticles } from '@/tools/markdown/getArticles';
-import { getMarkdown } from '@/tools/markdown/getMarkdown';
+import { getMarkdownPartial } from '@/tools/markdown/getMarkdown';
 import { getMenu } from '@/tools/markdown/getMenu';
-import { getPartials } from '@/tools/markdown/getPartials';
-import type {
-  Document,
-  Markdown,
-  Menu,
-  Partials,
-} from '@/tools/markdown/types';
+import type { Document, Markdown, Menu } from '@/tools/markdown/types';
 
 const ARTICLES_INITIAL_SIZE = 5;
 
 interface Props {
   articles: Document[];
   decklists: Decklists;
   menu: Menu;
-  partials: Partials;
   welcome: Markdown;
 }
 
-const HomePage: NextPage<Props> = ({
-  articles,
-  decklists,
-  menu,
-  partials,
-  welcome,
-}) => {
+const HomePage: NextPage<Props> = ({ articles, decklists, menu, welcome }) => {
   const articleRoot = useRef<HTMLDivElement>(null);
   const [size, setSize] = useState(ARTICLES_INITIAL_SIZE);
 
@@ -54,11 +41,7 @@ const HomePage: NextPage<Props> = ({
         <Grid item sm={7}>
           <Card>
             <CardContent>
-              <Remark
-                decklists={decklists}
-                markdown={welcome}
-                partials={partials}
-              />
+              <Remark decklists={decklists} markdown={welcome} />
             </CardContent>
           </Card>
         </Grid>
@@ -93,8 +76,7 @@ export const getStaticProps: GetStaticProps<Props> = async () => ({
     articles: await getArticles(),
     decklists: getDecklists(),
     menu: getMenu(),
-    partials: await getPartials(),
-    welcome: await getMarkdown('partials/welcome'),
+    welcome: await getMarkdownPartial('welcome'),
   },
 });