fix(remark): scroll into anchors automatically (#232)

* fix(remark): scroll into anchors automatically

* fix(tweet): adjust automatic height

package.json

@@ -10,7 +10,7 @@
     "dev": "concurrently 'NEXT_PUBLIC_HASH=$(git rev-parse --short HEAD) next dev' 'yarn scryfall:dev' --names 'next,scryfall' --prefix-colors auto",
     "lint": "concurrently 'yarn:lint:*' --names --prefix-colors auto --success all",
     "lint:code": "eslint .",
-    "lint:format": "prettier --check markdown/ puzzles/ scryfall/ src/",
+    "lint:format": "prettier --check --loglevel warn markdown/ puzzles/ scryfall/ src/",
     "lint:prune": "ts-prune --error",
     "lint:typings": "tsc",
     "lint:wiki": "markdownlint markdown/",
@@ -28,7 +28,7 @@
     "@fontsource/libre-baskerville": "5.0.5",
     "@mdi/js": "7.2.96",
     "@mdi/react": "1.6.1",
-    "@mui/material": "5.14.1",
+    "@mui/material": "5.14.2",
     "@mui/system": "5.14.1",
     "@mui/utils": "5.14.1",
     "@vercel/analytics": "1.0.1",
@@ -50,7 +50,7 @@
     "remark-slug": "7.0.1",
     "remark-toc": "8.0.1",
     "sharp": "0.32.4",
-    "simple-icons": "9.6.0",
+    "simple-icons": "9.7.0",
     "unified": "10.1.2",
     "unist-util-select": "5.0.0",
     "unist-util-visit": "5.0.0"
@@ -59,25 +59,25 @@
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@types/mdast": "4.0.0",
-    "@types/node": "20.4.3",
-    "@types/react": "18.2.15",
+    "@types/node": "20.4.5",
+    "@types/react": "18.2.17",
     "@types/react-dom": "18.2.7",
     "@types/react-syntax-highlighter": "15.5.7",
     "@types/unist": "3.0.0",
-    "@typescript-eslint/eslint-plugin": "6.1.0",
-    "@typescript-eslint/parser": "6.1.0",
+    "@typescript-eslint/eslint-plugin": "6.2.0",
+    "@typescript-eslint/parser": "6.2.0",
     "concurrently": "8.2.0",
-    "eslint": "8.45.0",
+    "eslint": "8.46.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.8.0",
+    "eslint-config-prettier": "8.9.0",
     "eslint-import-resolver-typescript": "3.5.5",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.28.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.33.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "8.0.3",
-    "jest": "29.6.1",
-    "jest-environment-jsdom": "29.6.1",
+    "jest": "29.6.2",
+    "jest-environment-jsdom": "29.6.2",
     "lint-staged": "13.2.3",
     "markdownlint-cli": "0.35.0",
     "mdast-util-directive": "3.0.0",

scryfall/server.js

@@ -1,5 +1,5 @@
-const { RateLimit } = require('async-sema');
 const http = require('node:http');
+const { RateLimit } = require('async-sema');
 
 const CACHE = new Map();
 

src/components/Remark/Remark.tsx

@@ -1,4 +1,4 @@
-import type { FunctionComponent, ReactNode } from 'react';
+import { useEffect, type FunctionComponent, ReactNode } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkDirective from 'remark-directive';
 import remarkGfm from 'remark-gfm';
@@ -20,12 +20,15 @@ import { remarkRow } from '@/tools/remark/remarkRow';
 interface Props {
   decklists: Decklists;
   markdown: Partial;
+  /** Whether the component should scroll to the current anchor. */
+  withScroll?: boolean;
   withWrapper?: boolean;
 }
 
 export const Remark: FunctionComponent<Props> = ({
   decklists,
   markdown,
+  withScroll = true,
   withWrapper = true,
 }) => {
   const { partials, scries, text } = markdown;
@@ -62,6 +65,16 @@ export const Remark: FunctionComponent<Props> = ({
     </ReactMarkdown>
   );
 
+  useEffect(() => {
+    if (withScroll) {
+      const { hash } = window.location;
+      if (hash) {
+        const element = document.getElementById(hash.substring(1));
+        setTimeout(() => element?.scrollIntoView(), 700);
+      }
+    }
+  }, [withScroll]);
+
   return withWrapper ? (
     <Box
       sx={{

src/components/Remark/renderers/RemarkAccordion.tsx

@@ -64,7 +64,12 @@ export const RemarkAccordion: FunctionComponent<Props> = ({
     >
       {content}
       {partial && (
-        <Remark decklists={decklists} markdown={partial} withWrapper={false} />
+        <Remark
+          decklists={decklists}
+          markdown={partial}
+          withScroll={false}
+          withWrapper={false}
+        />
       )}
     </AccordionDetails>
   </Accordion>

src/components/Remark/renderers/RemarkTweet.tsx

@@ -22,7 +22,7 @@ interface Props extends ReactMarkdownProps {
 
 export const RemarkTweet: FunctionComponent<Props> = ({ id }) => {
   const [hasError, setHasError] = useState<boolean>(false);
-  const [height, setHeight] = useState<number>(400);
+  const [height, setHeight] = useState<number>(700);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const tweet = useRef<HTMLDivElement>(null);
   const { inView, ref: root } = useInView({
@@ -39,9 +39,9 @@ export const RemarkTweet: FunctionComponent<Props> = ({ id }) => {
       window.twttr.widgets
         .createTweet(id, tweet.current, options)
         .then(() => {
-          const height = tweet.current?.clientHeight ?? 0;
-          if (height) {
-            setHeight(height);
+          const value = tweet.current?.clientHeight ?? 0;
+          if (value) {
+            setHeight((previous) => Math.max(value, previous));
           } else {
             setHasError(true);
           }
@@ -62,6 +62,7 @@ export const RemarkTweet: FunctionComponent<Props> = ({ id }) => {
         display: 'flex',
         height,
         justifyContent: 'center',
+        minHeight: height,
         overflow: 'hidden',
         position: 'relative',
         transition: ({ transitions }) => transitions.create('height'),
@@ -72,7 +73,6 @@ export const RemarkTweet: FunctionComponent<Props> = ({ id }) => {
           <Box
             ref={tweet}
             sx={{
-              alignSelf: 'flex-start',
               width: '100%',
               '& > *': { mb: '0!important', mt: '0!important' },
             }}

src/pages/[category]/[chapter].tsx

@@ -1,11 +1,11 @@
+import { join } from 'path';
+import { ParsedUrlQuery } from 'querystring';
 import type {
   GetStaticPaths,
   GetStaticPathsResult,
   GetStaticProps,
   NextPage,
 } from 'next';
-import { join } from 'path';
-import { ParsedUrlQuery } from 'querystring';
 import { Card, CardContent } from '@mui/material';
 import { Banner } from '@/components/Banner/Banner';
 import { Layout } from '@/components/Layout/Layout';

src/pages/_app.tsx

@@ -1,8 +1,8 @@
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider } from '@/theme/ThemeContext';
 import { Analytics } from '@vercel/analytics/react';
+import { ThemeProvider } from '@/theme/ThemeContext';
 
 if (process.env.SCRYFALL_MOCKS === '1') {
   import('@/mocks/bootstrap');

src/pages/articles/[year]/[month]/[day]/[article].tsx

@@ -1,11 +1,11 @@
+import { join } from 'path';
+import { ParsedUrlQuery } from 'querystring';
 import type {
   GetStaticPaths,
   GetStaticPathsResult,
   GetStaticProps,
   NextPage,
 } from 'next';
-import { join } from 'path';
-import { ParsedUrlQuery } from 'querystring';
 import { Card, CardContent, Divider } from '@mui/material';
 import { Banner } from '@/components/Banner/Banner';
 import { Layout } from '@/components/Layout/Layout';
@@ -45,7 +45,7 @@ const ArticlePage: NextPage<Props> = ({ article, decklists, footer, menu }) => (
       </CardContent>
       <Divider />
       <CardContent>
-        <Remark decklists={decklists} markdown={footer} />
+        <Remark decklists={decklists} markdown={footer} withScroll={false} />
       </CardContent>
     </Card>
   </Layout>

src/theme/theme.ts

@@ -96,7 +96,12 @@ const customizeTheme = (options: ThemeOptions): Theme => {
         MuiCssBaseline: {
           styleOverrides: {
             blockquote: { margin: 0 },
-            '#__next, html, body': { height: '100%', fontSize: 18 },
+            '#__next, html, body': {
+              height: '100%',
+              fontSize: 18,
+              scrollBehavior: 'smooth',
+              scrollPadding: spacing(2),
+            },
             em: {
               fontDisplay: 'swap',
               fontFamily: 'Libre Baskerville, serif',

src/tools/scryfall/parse.ts

@@ -1,5 +1,5 @@
-import type { ScryCard, ScryDataItem } from '@/tools/scryfall/types';
 import { getPlaiceholder } from 'plaiceholder';
+import type { ScryCard, ScryDataItem } from '@/tools/scryfall/types';
 
 /** Make a `plaiceholder` preview for the provided image URL. */
 const makePreview = async (url: string): Promise<string> => {