Merge branch 'main' into feature/reorganize-patterns

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gutenberg-best-practices",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -14,14 +14,17 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.1.0",
-    "@docusaurus/preset-classic": "^3.1.0",
-    "@easyops-cn/docusaurus-search-local": "^0.40.1",
-    "@mdx-js/react": "^3.0.0",
-    "clsx": "^2.1.0",
+    "@docusaurus/core": "^3.5.0",
+    "@docusaurus/plugin-content-docs": "^3.5.0",
+    "@docusaurus/preset-classic": "^3.5.0",
+    "@docusaurus/theme-classic": "^3.5.0",
+    "@docusaurus/theme-search-algolia": "^3.5.0",
+    "@easyops-cn/docusaurus-search-local": "^0.44.5",
+    "@mdx-js/react": "^3.0.1",
+    "clsx": "^2.1.1",
     "prism-react-renderer": "^2.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "browserslist": {
     "production": [

src/css/custom.css

@@ -18,4 +18,5 @@
 @import "global-sidebar";
 @import "homepage-search";
 @import "homepage-components";
-@import "docs-content";
+@import "docs-content";
+@import "toc";

src/css/global-footer.css

@@ -3,14 +3,20 @@
   border-top: 2px solid var(--ifm-color-secondary-lightest);
 }
 
+.footer > .container {
+  padding: 0;
+  margin: 0;
+  max-width: 100%;
+}
+
 .footer-about {
   background-color: var(--ifm-color-secondary-lightest);
   padding: 3rem var(--ifm-spacing-horizontal);
 }
 
 .footer-about-inner {
   margin: 0 auto;
-  max-width: var(--wide-width);
+  max-width: var(--normal-width);
   text-align: center;
 }
 
@@ -57,14 +63,18 @@
   background-color: var(--ifm-color-primary-dark);
 }
 
+.footer__links {
+  max-width: var(--normal-width);
+  margin: 0 auto;
+}
 
 .footer-10up {
   padding: 3rem var(--ifm-spacing-horizontal);
 }
 
 .footer-10up .wrap {
   margin: 0 auto;
-  max-width: var(--wide-width);
+  max-width: var(--normal-width);
   text-align: center;
 }
 
@@ -96,4 +106,4 @@
   .footer-10up p {
     margin: 0;
   }
-}
+}

src/css/global-site.css

@@ -32,7 +32,7 @@ main > .container {
 }
 
 .content-wrapper {
-  width: var(--wide-width);
+  width: var(--normal-width);
   margin-inline: auto;
 }
 

src/css/toc.css

@@ -0,0 +1,32 @@
+.table-of-contents {
+  border-left: none;
+}
+
+.table-of-contents li {
+  margin: 0 0.25rem 0 0;
+}
+
+.table-of-contents li  ul {
+  margin-left: 0.75rem;
+}
+
+.table-of-contents a {
+  padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
+  text-decoration: none;
+  border-radius: .5rem;
+}
+
+.table-of-contents:hover {
+  color: var(--ifm-color-primary);
+  text-decoration: underline;
+}
+
+.table-of-contents .table-of-contents__link--active {
+  outline: 1px solid #ddd;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1);
+  font-weight: 700;
+}
+
+.table-of-contents code {
+  font-size: inherit;
+}

src/css/variables.css

@@ -20,7 +20,7 @@
   --ifm-link-decoration: underline;
   --ifm-link-hover-color: var(--ifm-color-primary-dark);
   --ifm-code-font-size: 1rem;
-  --ifm-container-width-xl: 80ch;
+  --ifm-container-width-xl: 120ch;
   --ifm-container-width: 80ch;
   --ifm-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI",
     Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
@@ -36,6 +36,7 @@
   --c-10up-secondary-dark: #7ED5D4;
 
   --wide-width: min(calc(100vw - 2.5rem), calc(var(--ifm-container-width-xl) + 300px));
+  --normal-width: min(calc(100vw - 2.5rem), calc(var(--ifm-container-width) + 300px));
 
   --docusaurus-highlighted-code-line-bg: #e0e0e0;
-}
+}