[Beta] Remove styled-jsx (#4690)

3 years ago · cec374fa01
6 changed files with 133 additions and 164 deletions
--- a/beta/src/components/Layout/Toc.tsx
+++ b/beta/src/components/Layout/Toc.tsx
@ -28,7 +28,7 @@ export function Toc({
      <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
        On this page
      </h2>
-      <div className="toc h-full overflow-y-auto pl-4">
+      <div className="h-full overflow-y-auto pl-4 max-h-[calc(100vh-7.5rem)]">
        <ul className="space-y-2 pb-16">
          {headings &&
            headings.length > 0 &&
@ -65,17 +65,6 @@ export function Toc({
            })}
        </ul>
      </div>
-      <style jsx global>{`
-        .toc {
-          /** Screen - nav - toc offset */
-          max-height: calc(100vh - 7.5rem);
-        }
-        .toc-link > code {
-          overflow-wrap: break-word;
-          white-space: pre-wrap;
-          font-size: 90%;
-        }
-      `}</style>
    </nav>
  );
 }
--- a/beta/src/components/Layout/useTocHighlight.tsx
+++ b/beta/src/components/Layout/useTocHighlight.tsx
@ -9,7 +9,7 @@ const TOP_OFFSET = 75;

 export function getHeaderAnchors(): HTMLAnchorElement[] {
  return Array.prototype.filter.call(
-    document.getElementsByClassName(siteConfig.headerIdConfig.className),
+    document.getElementsByClassName('mdx-header-anchor'),
    function (testElement) {
      return (
        testElement.parentNode.nodeName === 'H1' ||
--- a/beta/src/components/MDX/Heading.tsx
+++ b/beta/src/components/MDX/Heading.tsx
@ -14,8 +14,6 @@ export interface HeadingProps {
  as?: any;
 }

-const anchorClassName = siteConfig.headerIdConfig.className;
-
 const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
  {as: Comp = 'div', className, children, id, isPageAnchor = true, ...props},
  ref
@ -26,71 +24,31 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
  }

  return (
-    <>
-      <Comp id={id} {...props} ref={ref} className={cn('heading', className)}>
-        {children}
-        {isPageAnchor && (
-          <a
-            href={`#${id}`}
-            aria-label={label}
-            title={label}
-            className={cn(
-              anchorClassName,
-              Comp === 'h1' ? 'hidden' : 'inline-block'
-            )}>
-            <svg
-              width="1em"
-              height="1em"
-              viewBox="0 0 13 13"
-              xmlns="http://www.w3.org/2000/svg"
-              className="text-gray-70 ml-2 h-5 w-5">
-              <g fill="currentColor" fillRule="evenodd">
-                <path d="M7.778 7.975a2.5 2.5 0 0 0 .347-3.837L6.017 2.03a2.498 2.498 0 0 0-3.542-.007 2.5 2.5 0 0 0 .006 3.543l1.153 1.15c.07-.29.154-.563.25-.773.036-.077.084-.16.14-.25L3.18 4.85a1.496 1.496 0 0 1 .002-2.12 1.496 1.496 0 0 1 2.12 0l2.124 2.123a1.496 1.496 0 0 1-.333 2.37c.16.246.42.504.685.752z" />
-                <path d="M5.657 4.557a2.5 2.5 0 0 0-.347 3.837l2.108 2.108a2.498 2.498 0 0 0 3.542.007 2.5 2.5 0 0 0-.006-3.543L9.802 5.815c-.07.29-.154.565-.25.774-.036.076-.084.16-.14.25l.842.84c.585.587.59 1.532 0 2.122-.587.585-1.532.59-2.12 0L6.008 7.68a1.496 1.496 0 0 1 .332-2.372c-.16-.245-.42-.503-.685-.75z" />
-              </g>
-            </svg>
-          </a>
-        )}
-      </Comp>
-      <style jsx>
-        {`
-          .heading {
-            scroll-margin-top: 2.5em;
-            /* Space for the anchor */
-            padding-right: 1em;
-          }
-          .heading:before {
-            height: 6rem;
-            margin-top: -6rem;
-            visibility: hidden;
-            content: '';
-          }
-
-          .heading .${anchorClassName} {
-            /* Prevent the anchor from
-               overflowing to its own line */
-            height: 0px;
-            width: 0px;
-          }
-
-          .heading .${anchorClassName} svg {
-            display: inline;
-          }
-
-          .heading .${anchorClassName} svg {
-            visibility: hidden;
-          }
-
-          .heading:hover .${anchorClassName} svg {
-            visibility: visible;
-          }
-
-          .heading .${anchorClassName}:focus svg {
-            visibility: visible;
-          }
-        `}
-      </style>
-    </>
+    <Comp id={id} {...props} ref={ref} className={cn('mdx-heading', className)}>
+      {children}
+      {isPageAnchor && (
+        <a
+          href={`#${id}`}
+          aria-label={label}
+          title={label}
+          className={cn(
+            'mdx-header-anchor',
+            Comp === 'h1' ? 'hidden' : 'inline-block'
+          )}>
+          <svg
+            width="1em"
+            height="1em"
+            viewBox="0 0 13 13"
+            xmlns="http://www.w3.org/2000/svg"
+            className="text-gray-70 ml-2 h-5 w-5">
+            <g fill="currentColor" fillRule="evenodd">
+              <path d="M7.778 7.975a2.5 2.5 0 0 0 .347-3.837L6.017 2.03a2.498 2.498 0 0 0-3.542-.007 2.5 2.5 0 0 0 .006 3.543l1.153 1.15c.07-.29.154-.563.25-.773.036-.077.084-.16.14-.25L3.18 4.85a1.496 1.496 0 0 1 .002-2.12 1.496 1.496 0 0 1 2.12 0l2.124 2.123a1.496 1.496 0 0 1-.333 2.37c.16.246.42.504.685.752z" />
+              <path d="M5.657 4.557a2.5 2.5 0 0 0-.347 3.837l2.108 2.108a2.498 2.498 0 0 0 3.542.007 2.5 2.5 0 0 0-.006-3.543L9.802 5.815c-.07.29-.154.565-.25.774-.036.076-.084.16-.14.25l.842.84c.585.587.59 1.532 0 2.122-.587.585-1.532.59-2.12 0L6.008 7.68a1.496 1.496 0 0 1 .332-2.372c-.16-.245-.42-.503-.685-.75z" />
+            </g>
+          </svg>
+        </a>
+      )}
+    </Comp>
  );
 });

--- a/beta/src/components/MDX/MDXComponents.tsx
+++ b/beta/src/components/MDX/MDXComponents.tsx
@ -80,21 +80,11 @@ const Blockquote = ({
  ...props
 }: JSX.IntrinsicElements['blockquote']) => {
  return (
-    <>
-      <blockquote
-        className="mdx-blockquote py-4 px-8 my-8 shadow-inner bg-highlight dark:bg-highlight-dark bg-opacity-50 rounded-lg leading-6 flex relative"
-        {...props}>
-        <span className="block relative">{children}</span>
-      </blockquote>
-      <style jsx global>{`
-        .mdx-blockquote > span > p:first-of-type {
-          margin-bottom: 0;
-        }
-        .mdx-blockquote > span > p:last-of-type {
-          margin-bottom: 1rem;
-        }
-      `}</style>
-    </>
+    <blockquote
+      className="mdx-blockquote py-4 px-8 my-8 shadow-inner bg-highlight dark:bg-highlight-dark bg-opacity-50 rounded-lg leading-6 flex relative"
+      {...props}>
+      <span className="block relative">{children}</span>
+    </blockquote>
  );
 };

@ -274,72 +264,6 @@ function IllustrationBlock({
        <div className="mdx-illustration-block">{images}</div>
      )}
      {author ? <AuthorCredit author={author} authorLink={authorLink} /> : null}
-      <style jsx global>{`
-        .mdx-illustration-block {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: nowrap;
-          justify-content: center;
-          align-content: stretch;
-          align-items: stretch;
-          gap: 42px;
-        }
-        ol.mdx-illustration-block {
-          gap: 60px;
-        }
-        .mdx-illustration-block li {
-          display: flex;
-          align-items: flex-start;
-          align-content: stretch;
-          justify-content: space-around;
-          position: relative;
-          padding: 1rem;
-        }
-        .mdx-illustration-block figure {
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          align-items: center;
-
-          justify-content: space-between;
-          position: relative;
-          height: 100%;
-        }
-        .mdx-illustration-block li:after {
-          content: ' ';
-          display: block;
-          position: absolute;
-          top: 50%;
-          right: 100%;
-          transform: translateY(-50%);
-          width: 60px;
-          height: 49px;
-          background: center / contain no-repeat url('/images/g_arrow.png');
-        }
-        .mdx-illustration-block li:first-child:after {
-          content: ' ';
-          display: none;
-        }
-        .mdx-illustration-block img {
-          max-height: 250px;
-          width: 100%;
-        }
-        @media (max-width: 680px) {
-          .mdx-illustration-block {
-            flex-direction: column;
-          }
-          .mdx-illustration-block img {
-            max-height: 200px;
-            width: auto;
-          }
-          .mdx-illustration-block li:after {
-            top: 0;
-            left: 50%;
-            right: auto;
-            transform: translateX(-50%) translateY(-100%) rotate(90deg);
-          }
-        }
-      `}</style>
    </div>
  );
 }
--- a/beta/src/siteConfig.ts
+++ b/beta/src/siteConfig.ts
@ -12,7 +12,4 @@ export const siteConfig = {
    apiKey: '861ccfb8707150c0e776b88357286123',
    indexName: 'beta-react',
  },
-  headerIdConfig: {
-    className: `anchor`,
-  },
 };
--- a/beta/src/styles/index.css
+++ b/beta/src/styles/index.css
@ -219,3 +219,104 @@
 html.dark .code-step * {
  color: white !important;
 }
+
+.mdx-heading {
+  scroll-margin-top: 2.5em;
+  /* Space for the anchor */
+  padding-right: 1em;
+}
+.mdx-heading:before {
+  height: 6rem;
+  margin-top: -6rem;
+  visibility: hidden;
+  content: '';
+}
+.mdx-heading .mdx-header-anchor {
+  /* Prevent the anchor from
+     overflowing to its own line */
+  height: 0px;
+  width: 0px;
+}
+.mdx-heading .mdx-header-anchor svg {
+  display: inline;
+}
+.mdx-heading .mdx-header-anchor svg {
+  visibility: hidden;
+}
+.mdx-heading:hover .mdx-header-anchor svg {
+  visibility: visible;
+}
+.mdx-heading .mdx-header-anchor:focus svg {
+  visibility: visible;
+}
+
+.mdx-blockquote > span > p:first-of-type {
+  margin-bottom: 0;
+}
+.mdx-blockquote > span > p:last-of-type {
+  margin-bottom: 1rem;
+}
+.mdx-illustration-block {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-content: stretch;
+  align-items: stretch;
+  gap: 42px;
+}
+ol.mdx-illustration-block {
+  gap: 60px;
+}
+.mdx-illustration-block li {
+  display: flex;
+  align-items: flex-start;
+  align-content: stretch;
+  justify-content: space-around;
+  position: relative;
+  padding: 1rem;
+}
+.mdx-illustration-block figure {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+
+  justify-content: space-between;
+  position: relative;
+  height: 100%;
+}
+.mdx-illustration-block li:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  transform: translateY(-50%);
+  width: 60px;
+  height: 49px;
+  background: center / contain no-repeat url('/images/g_arrow.png');
+}
+.mdx-illustration-block li:first-child:after {
+  content: ' ';
+  display: none;
+}
+.mdx-illustration-block img {
+  max-height: 250px;
+  width: 100%;
+}
+@media (max-width: 680px) {
+  .mdx-illustration-block {
+    flex-direction: column;
+  }
+  .mdx-illustration-block img {
+    max-height: 200px;
+    width: auto;
+  }
+  .mdx-illustration-block li:after {
+    top: 0;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%) translateY(-100%) rotate(90deg);
+  }
+}