revert: remove unrelated files from PR

Author: pranjalisr

src/components/Page/Page.jsx

@@ -25,11 +25,13 @@ export default function Page(props) {
   } = props;
 
   const isDynamicContent = props.content instanceof Promise;
-  const [content, setContent] = useState(
-    isDynamicContent
-      ? placeholderString()
-      : () => props.content.default || props.content,
+  const [dynamicContent, setContent] = useState(
+    isDynamicContent ? placeholderString() : null,
   );
+  const content = isDynamicContent
+    ? dynamicContent
+    : props.content.default || props.content;
+
   const [contentLoaded, setContentLoaded] = useState(!isDynamicContent);
 
   useEffect(() => {
@@ -44,6 +46,7 @@ export default function Page(props) {
   }, [props.content]);
 
   const { hash, pathname } = useLocation();
+  const isBlogIndex = pathname === "/blog/";
 
   useEffect(() => {
     let observer;
@@ -52,13 +55,15 @@ export default function Page(props) {
         const target = document.querySelector("#md-content");
         // two cases here
         // 1. server side rendered page, so hash target is already there
-        if (document.querySelector(hash)) {
-          document.querySelector(hash).scrollIntoView();
+        // Note: Why this change because we use getElementById instead of querySelector(hash) here because
+        // CSS selectors cannot start with a digit (e.g. #11-in-scope is invalid)
+        if (document.getElementById(hash.slice(1))) {
+          document.getElementById(hash.slice(1)).scrollIntoView();
         } else {
           // 2. dynamic loaded content
           // we need to observe the dom change to tell if hash exists
           observer = new MutationObserver(() => {
-            const element = document.querySelector(hash);
+            const element = document.getElementById(hash.slice(1));
             if (element) {
               element.scrollIntoView();
             }
@@ -99,9 +104,12 @@ export default function Page(props) {
     );
   }
   return (
-    <section className="page">
+    <main id="main-content" className="page">
       <Markdown>
         <h1>{title}</h1>
+        {rest.date && pathname.startsWith("/blog/") && !isBlogIndex && (
+          <div className="blog-post-date">{rest.date}</div>
+        )}
 
         {rest.thirdParty ? (
           <div className="italic my-[20px]">
@@ -114,6 +122,27 @@ export default function Page(props) {
 
         <div id="md-content">{contentRender}</div>
 
+        {rest.url === "/blog/" && (
+          <div className="blog-list">
+            {(props.pages || [])
+              .filter((post) => post.url !== "/blog/")
+              .map((post) => (
+                <div key={post.url} className="blog-post-item">
+                  <h2>
+                    <Link to={post.url}>{post.title}</Link>
+                  </h2>
+                  {post.date && (
+                    <div className="blog-post-date">{post.date}</div>
+                  )}
+                  <p>{post.teaser}</p>
+                  <Link to={post.url} className="read-more">
+                    Read More &rarr;
+                  </Link>
+                </div>
+              ))}
+          </div>
+        )}
+
         {loadRelated && (
           <div className="print:hidden">
             <h2>Further Reading</h2>
@@ -129,7 +158,7 @@ export default function Page(props) {
 
         <PageLinks page={rest} />
 
-        {(previous || next) && (
+        {!isBlogIndex && (previous || next) && (
           <AdjacentPages previous={previous} next={next} />
         )}
 
@@ -143,7 +172,7 @@ export default function Page(props) {
           </div>
         )}
       </Markdown>
-    </section>
+    </main>
   );
 }
 
@@ -153,6 +182,7 @@ Page.propTypes = {
   related: PropTypes.array,
   previous: PropTypes.object,
   next: PropTypes.object,
+  pages: PropTypes.array,
   content: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.func,

src/components/Sidebar/Sidebar.jsx

@@ -31,7 +31,11 @@ export default function Sidebar({ className = "", pages, currentPage }) {
     <nav className={`sidebar ${className}`}>
       <div className="sidebar__inner">
         <div className="relative z-0 bg-white dark:bg-gray-100 ">
+          <label htmlFor="docs-version" className="sr-only">
+            Select webpack version
+          </label>
           <select
+            id="docs-version"
             className="text-gray-600 text-14 px-5 py-5 appearance-none box-border border border-gray-200 border-solid flex-col flex w-full rounded-none bg-transparent bg-none"
             value={version}
             onChange={(event) => {

src/remark-plugins/remark-custom-asides/__snapshots__/index.test.mjs.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`customize blockquote should transform W> into aside of warning 1`] = `
-"<aside class="warning"><h6 class="warning__prefix">warning</h6><p>hello world</p></aside>
+"<aside class="warning"><p class="warning__prefix">warning</p><p>hello world</p></aside>
 "
 `;

src/remark-plugins/remark-custom-asides/index.mjs

@@ -37,11 +37,11 @@ export default function remarkCustomAsides(
         // remove custom characters from paragraph
         node.children = [
           {
-            type: "heading",
-            depth: 6,
+            type: "paragraph",
             data: {
               // see https://github.com/syntax-tree/mdast-util-to-hast#hname
               // add a className to heading
+              hName: "p",
               hProperties: {
                 className: `${className}__prefix`,
               },

src/remark-plugins/remark-custom-asides/index.test.mjs

@@ -20,7 +20,7 @@ W> hello world
         (err, { value: contents }) => {
           expect(err).toBeUndefined();
           expect(contents).toContain('<aside class="warning"');
-          expect(contents).toContain('<h6 class="warning__prefix"');
+          expect(contents).toContain('<p class="warning__prefix"');
           expect(contents).toContain("warning");
           expect(contents).toMatchSnapshot();
         },