Merge pull request #204 from codytodonnell/feature/stackblitz

Add examples section to the docs

Author: codytodonnell

docs/docs/examples/basic-sandbox.mdx

@@ -0,0 +1,7 @@
+# Basic Starter Kit
+
+<iframe
+  width="100%"
+  height="800"
+  src="https://stackblitz.com/github/strudel-science/strudel-kit?embed=1&file=src%2Fpages%2Findex.tsx"
+></iframe>

docs/docs/examples/climate-data-analysis-platform.mdx

@@ -0,0 +1,7 @@
+# Climate Data Analysis Platform
+
+<iframe
+  width="100%"
+  height="800"
+  src="https://stackblitz.com/github/sprblm/strudel-climate-example?embed=1&file=src%2Fpages%2Findex.tsx"
+></iframe>

docs/sidebars.ts

@@ -115,6 +115,15 @@ const sidebars: SidebarsConfig = {
         },
       ],
     },
+    {
+      type: 'category',
+      label: 'Examples',
+      collapsible: false,
+      items: [
+        'examples/basic-sandbox',
+        'examples/climate-data-analysis-platform',
+      ],
+    },
   ],
 };
 

docs/src/css/custom.css

@@ -6,17 +6,17 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #0143CF;
+  --ifm-color-primary: #0143cf;
   --ifm-color-primary-dark: #180333;
   --ifm-color-primary-darker: #180333;
   --ifm-color-primary-darkest: #180333;
-  --ifm-color-primary-light: #D6B5FF;
-  --ifm-color-primary-lighter: #D6B5FF;
-  --ifm-color-primary-lightest: #D6B5FF;
+  --ifm-color-primary-light: #d6b5ff;
+  --ifm-color-primary-lighter: #d6b5ff;
+  --ifm-color-primary-lightest: #d6b5ff;
   --ifm-code-font-size: 95%;
-  --ifm-table-stripe-background: #EEEEEE;
-  --ifm-background-color: #FFFFFF;
-  --ifm-background-surface-color: #FFFFFF;
+  --ifm-table-stripe-background: #eeeeee;
+  --ifm-background-color: #ffffff;
+  --ifm-background-surface-color: #ffffff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
@@ -33,30 +33,30 @@
 } */
 
 html[data-theme='dark'] {
-  --ifm-color-primary: #D6B5FF;
-  --ifm-color-primary-dark: #4F4063;
-  --ifm-color-primary-darker: #4F4063;
-  --ifm-color-primary-darkest: #4F4063;
-  --ifm-color-primary-light: #F7F0FF;
-  --ifm-color-primary-lighter: #F7F0FF;
-  --ifm-color-primary-lightest: #F7F0FF;
-  --ifm-table-stripe-background: #2E2E38;
-  --ifm-background-color: #1E1E24;
-  --ifm-background-surface-color: #2E2E38;
+  --ifm-color-primary: #d6b5ff;
+  --ifm-color-primary-dark: #4f4063;
+  --ifm-color-primary-darker: #4f4063;
+  --ifm-color-primary-darkest: #4f4063;
+  --ifm-color-primary-light: #f7f0ff;
+  --ifm-color-primary-lighter: #f7f0ff;
+  --ifm-color-primary-lightest: #f7f0ff;
+  --ifm-table-stripe-background: #2e2e38;
+  --ifm-background-color: #1e1e24;
+  --ifm-background-surface-color: #2e2e38;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
 .footer {
-  --ifm-footer-background-color: #EEEEEE;
+  --ifm-footer-background-color: #eeeeee;
   --ifm-footer-color: #000000;
   --ifm-footer-title-color: #000000;
   --ifm-footer-link-color: var(--ifm-color-primary);
 }
 
 html[data-theme='dark'] .footer--dark {
-  --ifm-footer-background-color: #2E2E38;
-  --ifm-footer-color: #FFFFFF;
-  --ifm-footer-title-color: #FFFFFF;
+  --ifm-footer-background-color: #2e2e38;
+  --ifm-footer-color: #ffffff;
+  --ifm-footer-title-color: #ffffff;
   --ifm-footer-link-color: var(--ifm-color-primary);
 }
 
@@ -74,7 +74,9 @@ html[data-theme='dark'] .footer--dark {
   opacity: 0.6;
 }
 
-.theme-doc-sidebar-item-category-level-1 > .menu__list-item-collapsible .menu__link--active {
+.theme-doc-sidebar-item-category-level-1
+  > .menu__list-item-collapsible
+  .menu__link--active {
   color: var(--ifm-menu-color);
 }
 
@@ -86,4 +88,13 @@ html[data-theme='dark'] .footer--dark {
 .playgroundPreview_node_modules-\@docusaurus-theme-live-codeblock-lib-theme-Playground-styles-module {
   margin-bottom: 0.5rem;
   border-radius: var(--ifm-code-border-radius);
-}
+}
+
+.docs-doc-id-examples\/basic-sandbox .container,
+.docs-doc-id-examples\/basic-sandbox .container .row,
+.docs-doc-id-examples\/basic-sandbox .container .row .col,
+.docs-doc-id-examples\/climate-data-analysis-platform .container,
+.docs-doc-id-examples\/climate-data-analysis-platform .container .row,
+.docs-doc-id-examples\/climate-data-analysis-platform .container .row .col {
+  max-width: 100% !important;
+}