Merge pull request #47 from strudel-science/update/code-content

Update code library pages

config/strudel-config.json

@@ -110,15 +110,15 @@
           "layoutComponent": "PageLayout",
           "children": [
             {
-              "name": "Getting Started",
-              "path": "/design-system/code-library/getting-started",
-              "markdownId": "code-library-getting-started",
+              "name": "Overview",
+              "path": "/design-system/code-library/overview",
+              "markdownId": "code-library-overview",
               "layoutComponent": "PageLayout"
             },
             {
-              "name": "React Templates",
-              "path": "/design-system/code-library/react-templates",
-              "markdownId": "code-library-react-templates",
+              "name": "Tutorials",
+              "path": "/design-system/code-library/tutorials",
+              "markdownId": "code-library-tutorials",
               "layoutComponent": "PageLayout"
             }
           ]

content/design-system/code-library/overview.mdx

@@ -0,0 +1,18 @@
+---
+id: 'code-library-overview'
+title: 'STRUDEL Kit'
+subtitle: 'Code templates for scientific task flow UIs'
+---
+import { Hero } from '/src/components/Hero';
+import { PageContainer } from '/src/components/PageContainer';
+
+<Hero>
+  STRUDEL Kit is a React-based JavaScript library for building scientific UIs based on the STRUDEL Design System and Task Flows. The library provides scaffolding and templates to help scientific teams jumpstart the development of task flows.
+</Hero>
+<PageContainer> 
+  ## Getting Started with STRUDEL Kit
+
+  [Checkout the project on GitHub](https://github.com/strudel-science/strudel-kit).
+
+  More details coming soon!
+</PageContainer> 

content/design-system/code-library/react-templates.mdx → content/design-system/code-library/tutorials.mdx

@@ -1,6 +1,6 @@
 ---
-id: 'code-library-react-templates'
-title: 'React Templates'
+id: 'code-library-tutorials'
+title: 'Tutorials'
 subtitle: ''
 ---
 import { Hero } from '/src/components/Hero';

src/pages/design-system/code-library.tsx

@@ -0,0 +1,17 @@
+import { navigate } from 'gatsby';
+import React, { useEffect } from 'react';
+import Seo from '../../components/Seo';
+
+/**
+ * Redirect to /design-system/code-library/overview because there is no top-level /design-system/code-library page
+ */
+const CodeLibraryPage: React.FC = () => {
+  useEffect(() => {
+    navigate('/design-system/code-library/overview');
+  }, []);
+  return null;
+};
+
+export const Head = () => <Seo title="Code Library" />
+
+export default CodeLibraryPage