Create the Redux Essentials page, take 2

docs/components/DetailedExplanation.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export const DetailedExplanation = ({
+  children,
+  title = 'Detailed Explanation'
+}) => {
+  return (
+    <details className="detailed-explanation">
+      <summary>
+        <h4>{title}</h4>
+      </summary>
+      {children}
+    </details>
+  )
+}

docs/tutorials/quick-start/quick-start-part-2.mdx

@@ -0,0 +1,11 @@
+---
+id: quick-start-part-2
+title: Redux Quick Start - Part 2
+sidebar_label: 'Building a Redux App'
+hide_title: true
+description: The official Quick Start tutorial for Redux - the fastest way to learn and start using Redux today!
+---
+
+import { DetailedExplanation } from '../../components/DetailedExplanation'
+
+# Quick Start, Part 2: Building a React + Redux App

website/package.json

@@ -6,8 +6,8 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-alpha.43",
-    "@docusaurus/preset-classic": "2.0.0-alpha.43",
+    "@docusaurus/core": "2.0.0-alpha.48",
+    "@docusaurus/preset-classic": "2.0.0-alpha.48",
     "classnames": "2.2.6",
     "react": "16.13.0",
     "react-dom": "16.13.0"

website/sidebars.js

@@ -11,23 +11,41 @@ module.exports = {
       'introduction/ecosystem',
       'introduction/examples'
     ],
-    'Basic Tutorial': [
-      'basics/basic-tutorial',
-      'basics/actions',
-      'basics/reducers',
-      'basics/store',
-      'basics/data-flow',
-      'basics/usage-with-react',
-      'basics/example'
-    ],
-    'Advanced Tutorial': [
-      'advanced/advanced-tutorial',
-      'advanced/async-actions',
-      'advanced/async-flow',
-      'advanced/middleware',
-      'advanced/usage-with-react-router',
-      'advanced/example-reddit-api',
-      'advanced/next-steps'
+    Tutorials: [
+      {
+        type: 'category',
+        label: 'Quick Start',
+        items: [
+          'tutorials/quick-start/quick-start-part-1',
+          'tutorials/quick-start/quick-start-part-2'
+        ]
+      },
+      {
+        type: 'category',
+        label: 'Basic Tutorial',
+        items: [
+          'basics/basic-tutorial',
+          'basics/actions',
+          'basics/reducers',
+          'basics/store',
+          'basics/data-flow',
+          'basics/usage-with-react',
+          'basics/example'
+        ]
+      },
+      {
+        type: 'category',
+        label: 'Advanced Tutorial',
+        items: [
+          'advanced/advanced-tutorial',
+          'advanced/async-actions',
+          'advanced/async-flow',
+          'advanced/middleware',
+          'advanced/usage-with-react-router',
+          'advanced/example-reddit-api',
+          'advanced/next-steps'
+        ]
+      }
     ],
     Recipes: [
       'recipes/recipe-index',

website/src/css/custom.css

@@ -1,3 +1,9 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+/* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #764abc;
   --ifm-color-primary-dark: #6a43a9;
@@ -8,29 +14,95 @@
   --ifm-color-primary-lightest: #9f80d0;
 
   --ifm-code-font-size: 95%;
+  --ifm-code-border-radius: 3px;
+  --ifm-code-background: rgba(27, 31, 35, 0.05);
   --ifm-blockquote-color: #ecf4f9;
   --ifm-blockquote-color-dark: #cbddea;
 
   --ifm-code-padding-vertical: 0.1rem;
   --ifm-code-padding-horizontal: 0.2rem;
+  --ifm-pre-background: rgb(39, 40, 34);
+
+  --ifm-alert-color: black;
+
+  --ra-admonition-color: #ecf4f9;
+  --ra-admonition-color-dark: #2a98b9;
+
+  --ra-admonition-color-important: #2a98b9;
+
+  --ra-admonition-color-success: #f1fdf9;
+  --ra-admonition-color-success-dark: #00bf88;
+
+  --ra-admonition-color-caution: #fffbf5;
+  --ra-admonition-color-caution-dark: #f0ad4e;
+
+  --ra-admonition-color-error: #fff2f2;
+  --ra-admonition-color-error-dark: #d9534f;
+
+  --ra-admonition-icon-color: black !important;
 }
 
+@media screen and (max-width: 996px) {
+  :root {
+    --ifm-font-size-base: 15px;
+  }
+}
+@media screen and (min-width: 997px) {
+  :root {
+    --ifm-font-size-base: 17px;
+  }
+}
 blockquote {
   color: var(--ifm-font-base-color);
   background-color: var(--ifm-blockquote-color);
   border-left: 6px solid var(--ifm-blockquote-color-dark);
   border-radius: var(--ifm-global-radius);
 }
 
+.docusaurus-highlight-code-line {
+  background-color: rgb(72, 77, 91);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
 code {
   background-color: var(--ifm-color-emphasis-300);
   border-radius: 0.2rem;
 }
 
-a code {
+a code,
+code a {
   color: inherit;
 }
 
+a.contents__link > code {
+  color: inherit;
+}
+
+a.contents__link.contents__link--active {
+  font-weight: 600;
+}
+
+a:visited {
+  color: var(--ifm-color-primary);
+}
+
+.pagination-nav .pagination-nav__link {
+  transition: all 0.2s ease;
+  border-color: var(--ifm-color-primary);
+}
+.pagination-nav__link .pagination-nav__link--label {
+  color: var(--ifm-color-primary);
+}
+.pagination-nav__link:hover {
+  background: var(--ifm-color-primary);
+  color: white;
+}
+
+.pagination-nav__link:hover * {
+  color: white;
+}
+
 .navbar .navbar__items {
   flex: 1 1 auto;
 }
@@ -73,24 +145,28 @@ a code {
   overflow: hidden;
 }
 
-.style-guide details {
+.style-guide details,
+details.detailed-explanation {
   background-color: var(--ifm-blockquote-color);
-  margin: 1rem 0;
-  padding: 1rem;
+  margin: 0.25rem 0;
+  padding: 0.25rem 0.5rem;
   border-radius: var(--ifm-global-radius);
 }
 
-.style-guide details summary {
+.style-guide details summary,
+details.detailed-explanation summary {
   cursor: pointer;
 }
 
-.style-guide details summary h4 {
+.style-guide details summary h4,
+details.detailed-explanation summary h4 {
   display: inline-block;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.style-guide details p {
+.style-guide details p,
+details.detailed-explanation p {
   margin-bottom: 0;
 }
 
@@ -114,3 +190,39 @@ a code {
   content: ' RECOMMENDED';
   color: #2b5a99;
 }
+
+.admonition {
+  color: var(--ifm-font-base-color);
+  border-radius: var(--ifm-global-radius);
+  border-left: 6px solid var(--ra-admonition-color-dark);
+}
+
+.admonition.admonition-note,
+.admonition.admonition-info,
+.admonition.admonition-important,
+.admonition.admonition-secondary {
+  --ra-admonition-color: #ecf4f9;
+  background-color: var(--ra-admonition-color);
+}
+
+.admonition.admonition-success,
+.admonition.admonition-tip {
+  background-color: var(--ra-admonition-color-success);
+  border-left-color: var(--ra-admonition-color-success-dark);
+}
+
+.admonition.admonition-caution {
+  background-color: var(--ra-admonition-color-caution);
+  border-left-color: var(--ra-admonition-color-caution-dark);
+}
+
+.admonition.admonition-warning,
+.admonition.admonition-danger {
+  background-color: var(--ra-admonition-color-error);
+  border-left-color: var(--ra-admonition-color-error-dark);
+}
+
+.admonition .admonition-icon svg {
+  fill: black;
+  stroke: black;
+}