Merge pull request #99 from codytodonnell/bugfix/links

Fix links

content/design-system/code-library.mdx

@@ -3,60 +3,45 @@ id: 'design-system-code-library'
 title: 'STRUDEL Kit'
 subtitle: 'Code templates for scientific task flow UIs'
 ---
-import { Link as MuiLink, Button, Box } from '@mui/material';
+import { Link as MuiLink, Button, Stack } from '@mui/material';
+import ArticleIcon from '@mui/icons-material/Article';
 import GitHubIcon from '@mui/icons-material/GitHub';
 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 their adaptation and use of common task flows in their products.
 
-  <Box
-    sx={{
-      display: 'inline-block',
-      marginTop: 2
-    }}
+  <Stack
+    direction="row"
+    spacing={2}
   >
+    <MuiLink href="https://strudel.science/strudel-kit/docs/" target='_blank'>
+      <Button variant="contained" startIcon={<ArticleIcon />}>
+        Documentation
+      </Button>
+    </MuiLink>
     <MuiLink href="https://github.com/strudel-science/strudel-kit" target='_blank'>
       <Button variant="contained" startIcon={<GitHubIcon />}>
-        Checkout on GitHub
+        GitHub
       </Button>
     </MuiLink>
-  </Box>
+  </Stack>
 </Hero>
 <PageContainer>
-  ## STRUDEL Tech Stack
-
-  STRUDEL Kit is made up of two main products: **strudel-cli**, a command-line tool for quickly generating Task Flow template code, and the **STRUDEL React templates**, code templates for building STRUDEL Task Flows using the React web library.
-
-  **strudel-cli**
-
-  - [Command line](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line)
-  - [Python](https://www.python.org/)
-  - [Cookiecutter](https://cookiecutter.readthedocs.io/en/latest/README.html)
-  - [JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON)
-
-  **STRUDEL React Templates**
-
-  - [TypeScript](https://www.typescriptlang.org/)
-  - [React](https://react.dev/)
-  - [Material UI Components](https://mui.com/material-ui/getting-started/)
-  - [Plotly.js](https://plotly.com/javascript/)
-
-  ## Learning Resources
+  STRUDEL Kit is made up of two main products: **strudel-cli**, a command-line tool for quickly generating Task Flow template code, and the **STRUDEL React templates**, code templates for building STRUDEL Task Flows using the React web library. Check out the list of resources below to start learning the skills you need to get started building web applicaitons with STRUDEL Kit.
 
-  **STRUDEL**
+  **STRUDEL Kit**
 
+  - [Introduction and Getting Started](https://strudel.science/strudel-kit/docs/)
   - [Tutorials](https://strudel.science/design-system/tutorials/)
-  - [Task Flows](https://strudel.science/design-system/task-flows/overview/)
   - [Community Discussions](https://github.com/orgs/strudel-science/discussions)
-  - [Events](https://strudel.science/engage/events/)
-  - [Connect and Contribute](https://strudel.science/engage/contribute/)
 
   **Web Development**
 
   - [Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)
-  - [TypeScript for JavaScript Programmers](https://www.typescriptlang.org/docs/handbook/-typescript-in-5-minutes.html)
+  - [Learn React: Describing the UI](https://react.dev/learn/describing-the-ui)
+  - [Learn TypeScript](https://www.typescriptlang.org/docs/)
 
   **Material UI**
 

content/design-system/task-flows/compare-data.mdx

@@ -6,7 +6,7 @@ tags: ['comparison', 'differences', 'analysis']
 intent: 'Enables users to scan and compare multiple complex entities with similar information categories to support decision making based on the differences.'
 intentDetails: 'Comparison may be between just two entities requiring a dedicated focus on differences in values, shown visually or numerically. Comparison may also be between multiple attributes — requiring a soft highlight on all differences and other visual representations.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/compare-data'
-codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/compare-data'
+codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/compare-data'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A65420&mode=design&t=w7GGrEXSOV1T8UCr-1'
 iconImage: '../../images/task-flows/overview-icons/compare-data.png'
 ---

content/design-system/task-flows/contribute-data.mdx

@@ -6,7 +6,7 @@ tags: ['upload', 'dataset', 'register', 'repository']
 intent: 'Enables users to upload their work and data to a community managed repository.'
 intentDetails: 'This type of Task Flow promotes community sharing of research data / knowledge and is essential for growth & promotion of open science.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/contribute-data'
-codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/contribute-data'
+codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/contribute-data'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A62422&mode=design&t=YPdwq8c0BdXx5Um8-1'
 iconImage: '../../images/task-flows/overview-icons/contribute-data.png'
 ---

content/design-system/task-flows/explore-data.mdx

@@ -6,7 +6,7 @@ tags: ['data table', 'data grid', 'summary', 'filter', 'facets', 'search']
 intent: 'Enables users to view and work with data in a tabular layout with search, sort, filter, and summary view interactions.'
 intentDetails: 'It is the most commonly used task flow to showcase any entity and make it easily consumable and accessible.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/explore-data'
-codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/explore-data'
+codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/explore-data'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A52634&mode=design&t=YPdwq8c0BdXx5Um8-1'
 iconImage: '../../images/task-flows/overview-icons/explore-data.png'
 ---

content/design-system/task-flows/monitor-activities.mdx

@@ -6,7 +6,7 @@ tags: ['jobs', 'experiments', 'observations']
 intent: 'Enables users to monitor running tasks, jobs, experiments, and observational studies and make decisions based on the status of those activities.'
 intentDetails: 'Monitoring can be both real-time and asynchronous. Live monitoring of experiments helps teams determine if something has gone wrong and the experiment needs to be stopped (such as in cases where there are problems with an instrument). Asynchronous task monitoring can be used to determine if the task should be run again in cases of failures.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/monitor-activities'
-codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/monitor-activities'
+codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A67734&mode=design&t=YPdwq8c0BdXx5Um8-1'
 iconImage: '../../images/task-flows/overview-icons/monitor-activity.png'
 ---

content/design-system/task-flows/run-computation.mdx

@@ -6,7 +6,7 @@ tags: ['execution', 'scenario', 'job', 'simulation', 'optimization', 'stepper',
 intent: 'Enables users to run computation(s) through a multi-step flow to generate results.'
 intentDetails: 'Computations could be optimizations, calculations, or simulations for a model, scenario, or experiment with attributes to observe and compare results. Attributes may include input data and settings. Computations may be long running and require the ability for a user to leave the flow and return later.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/run-computation'
-codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/run-computation'
+codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/run-computation'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A26644&mode=design&t=YPdwq8c0BdXx5Um8-1'
 iconImage: '../../images/task-flows/overview-icons/run-computation.png'
 ---

content/design-system/task-flows/search-data-repositories.mdx

@@ -6,7 +6,7 @@ tags: ['dataset', 'repository']
 intent: 'Enables exploration and evaluation of datasets from a repository which users can download or export.'
 intentDetails: 'A dataset repository lists multiple verified datasets, often uploaded by the community and available to the community to evaluate, download, and use for further research.'
 exampleUrl: 'https://strudel.science/strudel-kit/#/search-data-repositories'
-codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/strudel-demo-app/src/app/search-data-repositories'
+codeUrl: 'https://strudel.science/strudel-kit/docs/task-flows/search-data-repositories'
 figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A45832&mode=design&t=YPdwq8c0BdXx5Um8-1'
 iconImage: '../../images/task-flows/overview-icons/search-data-repository.png'
 ---

content/design-system/tutorials.mdx

@@ -32,8 +32,8 @@ import { Link } from 'gatsby';
         >
           <Stack spacing={2}>
             <Typography variant="h6" sx={{ marginBottom: '0 !important' }}>
-              <MuiLink href="https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/0-introduction.md">
-                Getting Started with STRUDEL Kit (Beta)
+              <MuiLink href="https://strudel.science/strudel-kit/docs/guides/tutorials/basic-app-with-strudel/introduction" target="_blank">
+                Getting Started with STRUDEL Kit
               </MuiLink>
             </Typography>
             <Typography>
@@ -48,7 +48,8 @@ import { Link } from 'gatsby';
             >
               <Button 
                 variant="contained" 
-                href="https://github.com/strudel-science/strudel-kit/blob/main/docs/getting-started/0-introduction.md"
+                href="https://strudel.science/strudel-kit/docs/guides/tutorials/basic-app-with-strudel/introduction"
+                target="_blank"
               >
                 See tutorial
               </Button>

src/components/layouts/TaskFlowLayout.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Box, Chip, Grid, Link as MuiLink, Stack, Typography } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
-import GitHubIcon from '@mui/icons-material/GitHub';
+import CodeIcon from '@mui/icons-material/Code';
 import DrawIcon from '@mui/icons-material/Draw';
 import BaseLayout from './BaseLayout';
 import { PageProps, Link, HeadProps } from 'gatsby';
@@ -129,13 +129,13 @@ const TaskFlowLayout: React.FC<PageProps<any, TaskFlowPageContext>> = ({ pageCon
             <Grid item md={4}>
               {hasCode && (
                 <MuiLink href={pageContext.frontmatter.codeUrl} target='_blank'>
-                  <Button variant="contained" fullWidth startIcon={<GitHubIcon />}>
+                  <Button variant="contained" fullWidth startIcon={<CodeIcon />}>
                     Code
                   </Button>
                 </MuiLink>
               )}
               {!hasCode && (
-                <Button variant="contained" fullWidth startIcon={<GitHubIcon />} disabled aria-label="Code templates on GitHub coming soon!">
+                <Button variant="contained" fullWidth startIcon={<CodeIcon />} disabled aria-label="Code templates on GitHub coming soon!">
                   Coming soon!
                 </Button>
               )}

src/hooks/useTaskFlow.tsx

@@ -60,6 +60,7 @@ export const useTaskFlow = (name: string) => {
   );
   const taskFlowConfig = findPageByName(name, configJson.pages);
   if (taskFlowConfig) {
+    console.log(allMdx);
     const mdx = allMdx.nodes?.find((md) => md.frontmatter.id === taskFlowConfig.markdownId);
     return {
       ...taskFlowConfig,