diff --git a/docs/404.html b/docs/404.html index c5920935..55277799 100644 --- a/docs/404.html +++ b/docs/404.html @@ -4,7 +4,7 @@ STRUDEL Kit - + diff --git a/docs/assets/js/3de759d6.14561e4b.js b/docs/assets/js/3de759d6.14561e4b.js new file mode 100644 index 00000000..636a0e69 --- /dev/null +++ b/docs/assets/js/3de759d6.14561e4b.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkstrudel_docs=self.webpackChunkstrudel_docs||[]).push([[754],{8260:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>s,toc:()=>d});var a=t(4848),i=t(8453);const o={toc_min_heading_level:2,toc_max_heading_level:2},l="US-RSE Tutorial",s={id:"guides/tutorials/usrse",title:"US-RSE Tutorial",description:"October 9, 2024",source:"@site/docs/guides/tutorials/usrse.mdx",sourceDirName:"guides/tutorials",slug:"/guides/tutorials/usrse",permalink:"/strudel-kit/docs/guides/tutorials/usrse",draft:!1,unlisted:!1,editUrl:"https://github.com/strudel-science/strudel-kit/tree/main/docs/docs/guides/tutorials/usrse.mdx",tags:[],version:"current",frontMatter:{toc_min_heading_level:2,toc_max_heading_level:2},sidebar:"mainSidebar",previous:{title:"Continue Learning",permalink:"/strudel-kit/docs/guides/tutorials/basic-app-with-strudel/continue-learning"},next:{title:"Overview",permalink:"/strudel-kit/docs/task-flows/overview"}},r={},d=[{value:"Helpful Links",id:"helpful-links",level:2},{value:"Configuring a STRUDEL Task Flow",id:"configuring-a-strudel-task-flow",level:2},{value:"1. Update the data.list object",id:"1-update-the-datalist-object",level:3},{value:"2. Update the data.detail object",id:"2-update-the-datadetail-object",level:3},{value:"3. Update page titles in the pages.index object",id:"3-update-page-titles-in-the-pagesindex-object",level:3},{value:"4. Update the column definitions in pages.index.tableColumns",id:"4-update-the-column-definitions-in-pagesindextablecolumns",level:3},{value:"5. Update the filter definitions in pages.index.tableFilters",id:"5-update-the-filter-definitions-in-pagesindextablefilters",level:3},{value:"Customizing the Theme",id:"customizing-the-theme",level:2},{value:"1. Change palette.mode to dark",id:"1-change-palettemode-to-dark",level:3},{value:"2. Change the palette.background colors",id:"2-change-the-palettebackground-colors",level:3},{value:"3. Change the palette.primary colors",id:"3-change-the-paletteprimary-colors",level:3},{value:"4. Change the shape.borderRadius",id:"4-change-the-shapeborderradius",level:3},{value:"5. Change the primary font in typography.fontFamily",id:"5-change-the-primary-font-in-typographyfontfamily",level:3},{value:"React Basics",id:"react-basics",level:2},{value:"1. Make a new folder and file",id:"1-make-a-new-folder-and-file",level:3},{value:"2. Create a HelloWorldPage component",id:"2-create-a-helloworldpage-component",level:3},{value:"3. Make a new _components folder and component file",id:"3-make-a-new-_components-folder-and-component-file",level:3},{value:"4. Create a TagList component",id:"4-create-a-taglist-component",level:3},{value:"5. Import and use the TagList component in HelloWorldPage",id:"5-import-and-use-the-taglist-component-in-helloworldpage",level:3},{value:"6. Add a tags prop to the TagList component",id:"6-add-a-tags-prop-to-the-taglist-component",level:3},{value:"7. Loop through tags to render each item",id:"7-loop-through-tags-to-render-each-item",level:3},{value:"8. Pass values to the tags prop on HelloWorldPage",id:"8-pass-values-to-the-tags-prop-on-helloworldpage",level:3},{value:"Material UI Basics",id:"material-ui-basics",level:2},{value:"1. Import the Chip component to TagList.tsx",id:"1-import-the-chip-component-to-taglisttsx",level:3},{value:"2. Replace the li elements with Chip components",id:"2-replace-the-li-elements-with-chip-components",level:3},{value:"3. Import the Stack component to TagList.tsx",id:"3-import-the-stack-component-to-taglisttsx",level:3},{value:"4. Replace the ul element with the Stack component",id:"4-replace-the-ul-element-with-the-stack-component",level:3},{value:"5. Import the Typography component to index.tsx",id:"5-import-the-typography-component-to-indextsx",level:3},{value:"6. Wrap the title text with the Typography component",id:"6-wrap-the-title-text-with-the-typography-component",level:3},{value:"7. Import the Container component to index.tsx",id:"7-import-the-container-component-to-indextsx",level:3},{value:"6. Replace the div element with the Container component",id:"6-replace-the-div-element-with-the-container-component",level:3},{value:"7. Use the sx prop to style Typography",id:"7-use-the-sx-prop-to-style-typography",level:3},{value:"Customizing the Task Flow",id:"customizing-the-task-flow",level:2},{value:"1. Import the TagList component to PreviewPanel.tsx",id:"1-import-the-taglist-component-to-previewpaneltsx",level:3},{value:"2. Replace the row description with a TagList",id:"2-replace-the-row-description-with-a-taglist",level:3},{value:"3. Add another TagList directly after the first",id:"3-add-another-taglist-directly-after-the-first",level:3},{value:"4. Replace Property Group 1 with Location data",id:"4-replace-property-group-1-with-location-data",level:3},{value:"4. Replace Property Group 2 with Record data",id:"4-replace-property-group-2-with-record-data",level:3}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{id:"us-rse-tutorial",children:"US-RSE Tutorial"}),"\n",(0,a.jsx)(n.p,{children:"October 9, 2024"}),"\n",(0,a.jsx)(n.p,{children:"This is a follow along guide to the US-RSE tutorial conducted over Zoom. Use this guide to follow along with all of the code edits made live during the tutorial demonstration."}),"\n",(0,a.jsx)(n.h2,{id:"helpful-links",children:"Helpful Links"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://stackblitz.com/edit/vitejs-vite-jjdxuj?file=README.md&terminal=dev",children:"StackBlitz Code Starter"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://stackblitz.com/edit/vitejs-vite-eykdvw?file=README.md",children:"StackBlitz Code Live In Progress"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://docs.google.com/presentation/d/1CmflcN_H_xCFPRV9qp4IjluHUkOvpW7Il5U5naN_emI/edit#slide=id.g25e5f40b217_0_317",children:"Slides"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://techdocs.gbif.org/en/openapi/v1/occurrence",children:"GBIF API Documentation"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://api.gbif.org/v1/occurrence/search",children:"GBIF Occurrence Endpoint Example"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://mui.com/material-ui/all-components/",children:"Material UI Documentation"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://zerotomastery.io/cheatsheets/react-cheat-sheet/",children:"React Cheatsheet"})}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"configuring-a-strudel-task-flow",children:"Configuring a STRUDEL Task Flow"}),"\n",(0,a.jsxs)(n.p,{children:["Each Task Flow is configured inside of its own ",(0,a.jsx)(n.code,{children:"taskflow.config.ts"})," file. We will be configuring the Explore Data Task Flow which has already been included in this project."]}),"\n",(0,a.jsxs)(n.p,{children:["You can find the configuration file at ",(0,a.jsx)(n.code,{children:"src/pages/explore-data/_config/taskflow.config.ts"})]}),"\n",(0,a.jsxs)(n.h3,{id:"1-update-the-datalist-object",children:["1. Update the ",(0,a.jsx)(n.code,{children:"data.list"})," object"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'list: {\n source: "https://api.gbif.org/v1/occurrence/search",\n staticParams: null,\n idField: "key",\n queryMode: "server",\n}\n'})}),"\n",(0,a.jsxs)(n.h3,{id:"2-update-the-datadetail-object",children:["2. Update the ",(0,a.jsx)(n.code,{children:"data.detail"})," object"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'detail: {\n source: "https://api.gbif.org/v1/occurrence",\n staticParams: null,\n idField: "key",\n queryMode: "server",\n}\n'})}),"\n",(0,a.jsxs)(n.h3,{id:"3-update-page-titles-in-the-pagesindex-object",children:["3. Update page titles in the ",(0,a.jsx)(n.code,{children:"pages.index"})," object"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{children:'{\n pages: {\n index: {\n title: "Biodiversity Explorer",\n description: "Explore species observations around the world.",\n ...\n }\n }\n}\n'})}),"\n",(0,a.jsxs)(n.h3,{id:"4-update-the-column-definitions-in-pagesindextablecolumns",children:["4. Update the column definitions in ",(0,a.jsx)(n.code,{children:"pages.index.tableColumns"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'tableColumns: [\n {\n field: "scientificName",\n headerName: "Name",\n width: 200\n },\n {\n field: "year",\n headerName: "Year",\n width: 150\n },\n {\n field: "basisOfRecord",\n headerName: "Basis of Record",\n width: 150\n },\n {\n field: "elevation",\n headerName: "Elevation",\n width: 150,\n type: \'number\'\n }\n],\n'})}),"\n",(0,a.jsxs)(n.h3,{id:"5-update-the-filter-definitions-in-pagesindextablefilters",children:["5. Update the filter definitions in ",(0,a.jsx)(n.code,{children:"pages.index.tableFilters"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'tableFilters: [\n {\n field: "elevation",\n label: "Elevation",\n paramType: "array-string",\n filterComponent: "RangeSlider",\n filterProps: {\n min: 0,\n max: 100\n }\n },\n {\n field: "basisOfRecord",\n label: "Basis of Record",\n paramType: \'repeated\',\n filterComponent: "CheckboxList",\n filterProps: {\n options: [\n {\n label: "Preserved Specimen",\n value: "PRESERVED_SPECIMEN"\n },\n {\n label: "Fossil Specimen",\n value: "FOSSIL_SPECIMEN"\n },\n {\n label: "Living Specimen",\n value: "LIVING_SPECIMEN"\n },\n {\n label: "Observation",\n value: "OBSERVATION"\n },\n {\n label: "Human Observation",\n value: "HUMAN_OBSERVATION"\n },\n {\n label: "Machine Observation",\n value: "MACHINE_OBSERVATION"\n }\n ]\n }\n },\n]\n'})}),"\n",(0,a.jsx)(n.h2,{id:"customizing-the-theme",children:"Customizing the Theme"}),"\n",(0,a.jsxs)(n.p,{children:["Theming is handled by Material UI's ",(0,a.jsx)(n.a,{href:"https://mui.com/material-ui/customization/theming/",children:"theme object"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["You can modify global theme variables in ",(0,a.jsx)(n.code,{children:"src/theme.tsx"}),"."]}),"\n",(0,a.jsxs)(n.h3,{id:"1-change-palettemode-to-dark",children:["1. Change ",(0,a.jsx)(n.code,{children:"palette.mode"})," to dark"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"mode: 'dark',\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"2-change-the-palettebackground-colors",children:["2. Change the ",(0,a.jsx)(n.code,{children:"palette.background"})," colors"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"background: {\n default: '#222',\n paper: '#333',\n},\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"3-change-the-paletteprimary-colors",children:["3. Change the ",(0,a.jsx)(n.code,{children:"palette.primary"})," colors"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"primary: {\n main: '#5dffe2',\n // Exclude light, dark, or contrastText to have them\n // calculated automatically based on the main color.\n light: '#99ffec',\n dark: '#00e0b7',\n // contrastText: '#fff',\n},\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"4-change-the-shapeborderradius",children:["4. Change the ",(0,a.jsx)(n.code,{children:"shape.borderRadius"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"borderRadius: 0,\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"5-change-the-primary-font-in-typographyfontfamily",children:["5. Change the primary font in ",(0,a.jsx)(n.code,{children:"typography.fontFamily"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'fontFamily: `"Avenir", "Verdana", "Arial", sans-serif`,\n'})}),"\n",(0,a.jsx)(n.h2,{id:"react-basics",children:"React Basics"}),"\n",(0,a.jsx)(n.p,{children:"Before we start customizing the Explore Data template, we will cover some basics of React and Material UI components."}),"\n",(0,a.jsxs)(n.p,{children:["You may find it helpful to reference the ",(0,a.jsx)(n.a,{href:"https://zerotomastery.io/cheatsheets/react-cheat-sheet/",children:"React syntax cheatsheet"})," during this section."]}),"\n",(0,a.jsx)(n.h3,{id:"1-make-a-new-folder-and-file",children:"1. Make a new folder and file"}),"\n",(0,a.jsxs)(n.p,{children:["Create a new folder inside of ",(0,a.jsx)(n.code,{children:"src/pages"})," called ",(0,a.jsx)(n.code,{children:"hello-world"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["Then, create a file inside ",(0,a.jsx)(n.code,{children:"hello-world"})," called ",(0,a.jsx)(n.code,{children:"index.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{children:"src\n\u251c\u2500\u2500 pages\n\u2502 \u251c\u2500\u2500 hello-world\n\u2502 \u2502 \u251c\u2500\u2500 index.tsx\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"2-create-a-helloworldpage-component",children:["2. Create a ",(0,a.jsx)(n.code,{children:"HelloWorldPage"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"const HelloWorldPage: React.FC = () => {\n return (\n
\n Hello World!\n
\n );\n};\n\nexport default HelloWorldPage;\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"3-make-a-new-_components-folder-and-component-file",children:["3. Make a new ",(0,a.jsx)(n.code,{children:"_components"})," folder and component file"]}),"\n",(0,a.jsxs)(n.p,{children:["Create a new folder inside of ",(0,a.jsx)(n.code,{children:"hello-world"})," called ",(0,a.jsx)(n.code,{children:"_components"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["Then, create a file inside ",(0,a.jsx)(n.code,{children:"_components"})," called ",(0,a.jsx)(n.code,{children:"TagList.tsx"}),"."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{children:"src\n\u251c\u2500\u2500 pages\n\u2502 \u251c\u2500\u2500 hello-world\n\u2502 \u2502 \u251c\u2500\u2500 _components\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 TagList.tsx\n\u2502 \u2502 \u251c\u2500\u2500 index.tsx\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"4-create-a-taglist-component",children:["4. Create a ",(0,a.jsx)(n.code,{children:"TagList"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"export const TagList: React.FC = () => {\n return (\n \n )\n}\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"5-import-and-use-the-taglist-component-in-helloworldpage",children:["5. Import and use the ",(0,a.jsx)(n.code,{children:"TagList"})," component in ",(0,a.jsx)(n.code,{children:"HelloWorldPage"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"import { TagList } from './_components/TagList';\n\nconst HelloWorldPage: React.FC = () => {\n return (\n
\n Hello World!\n \n
\n );\n};\n\nexport default HelloWorldPage;\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"6-add-a-tags-prop-to-the-taglist-component",children:["6. Add a ",(0,a.jsx)(n.code,{children:"tags"})," prop to the ",(0,a.jsx)(n.code,{children:"TagList"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"interface TagListProps {\n tags: string[];\n}\n\nexport const TagList: React.FC = ({ tags }) => {\n return (\n \n )\n}\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"7-loop-through-tags-to-render-each-item",children:["7. Loop through ",(0,a.jsx)(n.code,{children:"tags"})," to render each item"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"export const TagList: React.FC = ({ tags }) => {\n return (\n \n )\n}\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"8-pass-values-to-the-tags-prop-on-helloworldpage",children:["8. Pass values to the ",(0,a.jsx)(n.code,{children:"tags"})," prop on ",(0,a.jsx)(n.code,{children:"HelloWorldPage"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"const HelloWorldPage: React.FC = () => {\n return (\n
\n Hello World!\n \n
\n );\n};\n"})}),"\n",(0,a.jsx)(n.h2,{id:"material-ui-basics",children:"Material UI Basics"}),"\n",(0,a.jsx)(n.p,{children:"Material UI is included in the STRUDEL application by default. It contains many useful components for reusable elements and patterns throughout a web user interface."}),"\n",(0,a.jsxs)(n.p,{children:["See more in the ",(0,a.jsx)(n.a,{href:"https://mui.com/material-ui/all-components/",children:"Materials UI Docs"}),"."]}),"\n",(0,a.jsxs)(n.h3,{id:"1-import-the-chip-component-to-taglisttsx",children:["1. Import the ",(0,a.jsx)(n.code,{children:"Chip"})," component to ",(0,a.jsx)(n.code,{children:"TagList.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"import { Chip } from '@mui/material';\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"2-replace-the-li-elements-with-chip-components",children:["2. Replace the ",(0,a.jsx)(n.code,{children:"li"})," elements with ",(0,a.jsx)(n.code,{children:"Chip"})," components"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"export const TagList: React.FC = ({ tags }) => {\n return (\n
    \n {tags.map((tag) => (\n \n ))}\n
\n )\n}\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"3-import-the-stack-component-to-taglisttsx",children:["3. Import the ",(0,a.jsx)(n.code,{children:"Stack"})," component to ",(0,a.jsx)(n.code,{children:"TagList.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"import { Chip, Stack } from '@mui/material';\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"4-replace-the-ul-element-with-the-stack-component",children:["4. Replace the ",(0,a.jsx)(n.code,{children:"ul"})," element with the ",(0,a.jsx)(n.code,{children:"Stack"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:'export const TagList: React.FC = ({ tags }) => {\n return (\n \n {tags.map((tag) => (\n \n ))}\n \n )\n}\n'})}),"\n",(0,a.jsxs)(n.h3,{id:"5-import-the-typography-component-to-indextsx",children:["5. Import the ",(0,a.jsx)(n.code,{children:"Typography"})," component to ",(0,a.jsx)(n.code,{children:"index.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"import { Typography } from '@mui/material';\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"6-wrap-the-title-text-with-the-typography-component",children:["6. Wrap the title text with the ",(0,a.jsx)(n.code,{children:"Typography"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"const HelloWorldPage: React.FC = () => {\n return (\n
\n \n Hello World!\n \n \n
\n );\n};\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"7-import-the-container-component-to-indextsx",children:["7. Import the ",(0,a.jsx)(n.code,{children:"Container"})," component to ",(0,a.jsx)(n.code,{children:"index.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"import { Container, Typography } from '@mui/material';\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"6-replace-the-div-element-with-the-container-component",children:["6. Replace the ",(0,a.jsx)(n.code,{children:"div"})," element with the ",(0,a.jsx)(n.code,{children:"Container"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"const HelloWorldPage: React.FC = () => {\n return (\n \n \n Hello World!\n \n \n \n );\n};\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"7-use-the-sx-prop-to-style-typography",children:["7. Use the ",(0,a.jsx)(n.code,{children:"sx"})," prop to style ",(0,a.jsx)(n.code,{children:"Typography"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"\n Hello World!\n\n"})}),"\n",(0,a.jsx)(n.h2,{id:"customizing-the-task-flow",children:"Customizing the Task Flow"}),"\n",(0,a.jsx)(n.p,{children:"Now we will utilize the component we made in the preview panel and add some more custom data to the panel."}),"\n",(0,a.jsxs)(n.p,{children:["For this exercise we will be working inside of ",(0,a.jsx)(n.code,{children:"src/pages/explore-data/_components_/PreviewPanel.tsx"})]}),"\n",(0,a.jsxs)(n.h3,{id:"1-import-the-taglist-component-to-previewpaneltsx",children:["1. Import the ",(0,a.jsx)(n.code,{children:"TagList"})," component to ",(0,a.jsx)(n.code,{children:"PreviewPanel.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:"import { TagList } from '../../hello-world/_components/TagList';\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"2-replace-the-row-description-with-a-taglist",children:["2. Replace the row description with a ",(0,a.jsx)(n.code,{children:"TagList"})]}),"\n",(0,a.jsx)(n.p,{children:"Replace:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:'Row description, subtitle, or helper text.\n'})}),"\n",(0,a.jsx)(n.p,{children:"With:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:"\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"3-add-another-taglist-directly-after-the-first",children:["3. Add another ",(0,a.jsx)(n.code,{children:"TagList"})," directly after the first"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:"\n"})}),"\n",(0,a.jsx)(n.h3,{id:"4-replace-property-group-1-with-location-data",children:"4. Replace Property Group 1 with Location data"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:"\n \n Location\n \n \n\n"})}),"\n",(0,a.jsx)(n.h3,{id:"4-replace-property-group-2-with-record-data",children:"4. Replace Property Group 2 with Record data"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:"\n \n Record\n \n \n\n"})})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>l,x:()=>s});var a=t(6540);const i={},o=a.createContext(i);function l(e){const n=a.useContext(o);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),a.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/3de759d6.ad538ba8.js b/docs/assets/js/3de759d6.ad538ba8.js deleted file mode 100644 index cf8e2445..00000000 --- a/docs/assets/js/3de759d6.ad538ba8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkstrudel_docs=self.webpackChunkstrudel_docs||[]).push([[754],{8260:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>o,default:()=>h,frontMatter:()=>l,metadata:()=>s,toc:()=>d});var a=t(4848),i=t(8453);const l={toc_min_heading_level:2,toc_max_heading_level:2},o="US-RSE Tutorial",s={id:"guides/tutorials/usrse",title:"US-RSE Tutorial",description:"October 9, 2024",source:"@site/docs/guides/tutorials/usrse.mdx",sourceDirName:"guides/tutorials",slug:"/guides/tutorials/usrse",permalink:"/strudel-kit/docs/guides/tutorials/usrse",draft:!1,unlisted:!1,editUrl:"https://github.com/strudel-science/strudel-kit/tree/main/docs/docs/guides/tutorials/usrse.mdx",tags:[],version:"current",frontMatter:{toc_min_heading_level:2,toc_max_heading_level:2},sidebar:"mainSidebar",previous:{title:"Continue Learning",permalink:"/strudel-kit/docs/guides/tutorials/basic-app-with-strudel/continue-learning"},next:{title:"Overview",permalink:"/strudel-kit/docs/task-flows/overview"}},r={},d=[{value:"Helpful Links",id:"helpful-links",level:2},{value:"Configuring a STRUDEL Task Flow",id:"configuring-a-strudel-task-flow",level:2},{value:"1. Update the data.list object",id:"1-update-the-datalist-object",level:3},{value:"2. Update the data.detail object",id:"2-update-the-datadetail-object",level:3},{value:"3. Update page titles in the pages.index object",id:"3-update-page-titles-in-the-pagesindex-object",level:3},{value:"4. Update the column definitions in pages.index.tableColumns",id:"4-update-the-column-definitions-in-pagesindextablecolumns",level:3},{value:"5. Update the filter definitions in pages.index.tableFilters",id:"5-update-the-filter-definitions-in-pagesindextablefilters",level:3},{value:"Customizing the Theme",id:"customizing-the-theme",level:2},{value:"1. Change palette.mode to dark",id:"1-change-palettemode-to-dark",level:3},{value:"2. Change the palette.background colors",id:"2-change-the-palettebackground-colors",level:3},{value:"3. Change the palette.primary colors",id:"3-change-the-paletteprimary-colors",level:3},{value:"4. Change the shape.borderRadius",id:"4-change-the-shapeborderradius",level:3},{value:"5. Change the primary font in typography.fontFamily",id:"5-change-the-primary-font-in-typographyfontfamily",level:3},{value:"React Basics",id:"react-basics",level:2},{value:"1. Make a new folder and file",id:"1-make-a-new-folder-and-file",level:3},{value:"2. Create a HelloWorldPage component",id:"2-create-a-helloworldpage-component",level:3},{value:"3. Make a new _components folder and component file",id:"3-make-a-new-_components-folder-and-component-file",level:3},{value:"4. Create a TagList component",id:"4-create-a-taglist-component",level:3},{value:"5. Import and use the TagList component in HelloWorldPage",id:"5-import-and-use-the-taglist-component-in-helloworldpage",level:3},{value:"6. Add a tags prop to the TagList component",id:"6-add-a-tags-prop-to-the-taglist-component",level:3},{value:"7. Loop through tags to render each item",id:"7-loop-through-tags-to-render-each-item",level:3},{value:"8. Pass values to the tags prop on HelloWorldPage",id:"8-pass-values-to-the-tags-prop-on-helloworldpage",level:3},{value:"Material UI Basics",id:"material-ui-basics",level:2},{value:"1. Import the Chip component to TagList.tsx",id:"1-import-the-chip-component-to-taglisttsx",level:3},{value:"2. Replace the li elements with Chip components",id:"2-replace-the-li-elements-with-chip-components",level:3},{value:"3. Import the Stack component to TagList.tsx",id:"3-import-the-stack-component-to-taglisttsx",level:3},{value:"4. Replace the ul element with the Stack component",id:"4-replace-the-ul-element-with-the-stack-component",level:3},{value:"5. Import the Typography component to index.tsx",id:"5-import-the-typography-component-to-indextsx",level:3},{value:"6. Wrap the title text with the Typography component",id:"6-wrap-the-title-text-with-the-typography-component",level:3},{value:"7. Import the Container component to index.tsx",id:"7-import-the-container-component-to-indextsx",level:3},{value:"6. Replace the div element with the Container component",id:"6-replace-the-div-element-with-the-container-component",level:3},{value:"7. Use the sx prop to style Typography",id:"7-use-the-sx-prop-to-style-typography",level:3},{value:"Customizing the Task Flow",id:"customizing-the-task-flow",level:2},{value:"1. Import the TagList component to PreviewPanel.tsx",id:"1-import-the-taglist-component-to-previewpaneltsx",level:3},{value:"2. Replace the row description with a TagList",id:"2-replace-the-row-description-with-a-taglist",level:3},{value:"3. Add another TagList directly after the first",id:"3-add-another-taglist-directly-after-the-first",level:3},{value:"4. Replace Property Group 1 with Location data",id:"4-replace-property-group-1-with-location-data",level:3},{value:"4. Replace Property Group 2 with Record data",id:"4-replace-property-group-2-with-record-data",level:3}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{id:"us-rse-tutorial",children:"US-RSE Tutorial"}),"\n",(0,a.jsx)(n.p,{children:"October 9, 2024"}),"\n",(0,a.jsx)(n.p,{children:"This is a follow along guide to the US-RSE tutorial conducted over Zoom. Use this guide to follow along with all of the code edits made live during the tutorial demonstration."}),"\n",(0,a.jsx)(n.h2,{id:"helpful-links",children:"Helpful Links"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://stackblitz.com/edit/vitejs-vite-jjdxuj?file=README.md&terminal=dev",children:"StackBlitz Code Starter"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://stackblitz.com/edit/vitejs-vite-vlabnt?file=README.md&terminal=dev",children:"StackBlitz Code Live In Progress"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://docs.google.com/presentation/d/1CmflcN_H_xCFPRV9qp4IjluHUkOvpW7Il5U5naN_emI/edit#slide=id.g25e5f40b217_0_317",children:"Slides"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://techdocs.gbif.org/en/openapi/v1/occurrence",children:"GBIF API Documentation"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://api.gbif.org/v1/occurrence/search",children:"GBIF Occurrence Endpoint Example"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://mui.com/material-ui/all-components/",children:"Material UI Documentation"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://zerotomastery.io/cheatsheets/react-cheat-sheet/",children:"React Cheatsheet"})}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"configuring-a-strudel-task-flow",children:"Configuring a STRUDEL Task Flow"}),"\n",(0,a.jsxs)(n.p,{children:["Each Task Flow is configured inside of its own ",(0,a.jsx)(n.code,{children:"taskflow.config.ts"})," file. We will be configuring the Explore Data Task Flow which has already been included in this project."]}),"\n",(0,a.jsxs)(n.p,{children:["You can find the configuration file at ",(0,a.jsx)(n.code,{children:"src/pages/explore-data/_config/taskflow.config.ts"})]}),"\n",(0,a.jsxs)(n.h3,{id:"1-update-the-datalist-object",children:["1. Update the ",(0,a.jsx)(n.code,{children:"data.list"})," object"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'list: {\n source: "https://api.gbif.org/v1/occurrence/search",\n staticParams: null,\n idField: "key",\n queryMode: "server",\n}\n'})}),"\n",(0,a.jsxs)(n.h3,{id:"2-update-the-datadetail-object",children:["2. Update the ",(0,a.jsx)(n.code,{children:"data.detail"})," object"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'detail: {\n source: "https://api.gbif.org/v1/occurrence",\n staticParams: null,\n idField: "key",\n queryMode: "server",\n}\n'})}),"\n",(0,a.jsxs)(n.h3,{id:"3-update-page-titles-in-the-pagesindex-object",children:["3. Update page titles in the ",(0,a.jsx)(n.code,{children:"pages.index"})," object"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{children:'{\n pages: {\n index: {\n title: "Biodiversity Explorer",\n description: "Explore species observations around the world.",\n ...\n }\n }\n}\n'})}),"\n",(0,a.jsxs)(n.h3,{id:"4-update-the-column-definitions-in-pagesindextablecolumns",children:["4. Update the column definitions in ",(0,a.jsx)(n.code,{children:"pages.index.tableColumns"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'tableColumns: [\n {\n field: "scientificName",\n headerName: "Name",\n width: 200\n },\n {\n field: "year",\n headerName: "Year",\n width: 150\n },\n {\n field: "basisOfRecord",\n headerName: "Basis of Record",\n width: 150\n },\n {\n field: "elevation",\n headerName: "Elevation",\n width: 150,\n type: \'number\'\n }\n],\n'})}),"\n",(0,a.jsxs)(n.h3,{id:"5-update-the-filter-definitions-in-pagesindextablefilters",children:["5. Update the filter definitions in ",(0,a.jsx)(n.code,{children:"pages.index.tableFilters"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'tableFilters: [\n {\n field: "elevation",\n label: "Elevation",\n paramType: "array-string",\n filterComponent: "RangeSlider",\n filterProps: {\n min: 0,\n max: 100\n }\n },\n {\n field: "basisOfRecord",\n label: "Basis of Record",\n paramType: \'repeated\',\n filterComponent: "CheckboxList",\n filterProps: {\n options: [\n {\n label: "Preserved Specimen",\n value: "PRESERVED_SPECIMEN"\n },\n {\n label: "Fossil Specimen",\n value: "FOSSIL_SPECIMEN"\n },\n {\n label: "Living Specimen",\n value: "LIVING_SPECIMEN"\n },\n {\n label: "Observation",\n value: "OBSERVATION"\n },\n {\n label: "Human Observation",\n value: "HUMAN_OBSERVATION"\n },\n {\n label: "Machine Observation",\n value: "MACHINE_OBSERVATION"\n }\n ]\n }\n },\n]\n'})}),"\n",(0,a.jsx)(n.h2,{id:"customizing-the-theme",children:"Customizing the Theme"}),"\n",(0,a.jsxs)(n.p,{children:["Theming is handled by Material UI's ",(0,a.jsx)(n.a,{href:"https://mui.com/material-ui/customization/theming/",children:"theme object"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["You can modify global theme variables in ",(0,a.jsx)(n.code,{children:"src/theme.tsx"}),"."]}),"\n",(0,a.jsxs)(n.h3,{id:"1-change-palettemode-to-dark",children:["1. Change ",(0,a.jsx)(n.code,{children:"palette.mode"})," to dark"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"mode: 'dark',\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"2-change-the-palettebackground-colors",children:["2. Change the ",(0,a.jsx)(n.code,{children:"palette.background"})," colors"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"background: {\n default: '#222',\n paper: '#333',\n},\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"3-change-the-paletteprimary-colors",children:["3. Change the ",(0,a.jsx)(n.code,{children:"palette.primary"})," colors"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"primary: {\n main: '#5dffe2',\n // Exclude light, dark, or contrastText to have them\n // calculated automatically based on the main color.\n light: '#99ffec',\n dark: '#00e0b7',\n // contrastText: '#fff',\n},\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"4-change-the-shapeborderradius",children:["4. Change the ",(0,a.jsx)(n.code,{children:"shape.borderRadius"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"borderRadius: 0,\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"5-change-the-primary-font-in-typographyfontfamily",children:["5. Change the primary font in ",(0,a.jsx)(n.code,{children:"typography.fontFamily"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'fontFamily: `"Avenir", "Verdana", "Arial", sans-serif`,\n'})}),"\n",(0,a.jsx)(n.h2,{id:"react-basics",children:"React Basics"}),"\n",(0,a.jsx)(n.p,{children:"Before we start customizing the Explore Data template, we will cover some basics of React and Material UI components."}),"\n",(0,a.jsxs)(n.p,{children:["You may find it helpful to reference the ",(0,a.jsx)(n.a,{href:"https://zerotomastery.io/cheatsheets/react-cheat-sheet/",children:"React syntax cheatsheet"})," during this section."]}),"\n",(0,a.jsx)(n.h3,{id:"1-make-a-new-folder-and-file",children:"1. Make a new folder and file"}),"\n",(0,a.jsxs)(n.p,{children:["Create a new folder inside of ",(0,a.jsx)(n.code,{children:"src/pages"})," called ",(0,a.jsx)(n.code,{children:"hello-world"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["Then, create a file inside ",(0,a.jsx)(n.code,{children:"hello-world"})," called ",(0,a.jsx)(n.code,{children:"index.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{children:"src\n\u251c\u2500\u2500 pages\n\u2502 \u251c\u2500\u2500 hello-world\n\u2502 \u2502 \u251c\u2500\u2500 index.tsx\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"2-create-a-helloworldpage-component",children:["2. Create a ",(0,a.jsx)(n.code,{children:"HelloWorldPage"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"const HelloWorldPage: React.FC = () => {\n return (\n
\n Hello World!\n
\n );\n};\n\nexport default HelloWorldPage;\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"3-make-a-new-_components-folder-and-component-file",children:["3. Make a new ",(0,a.jsx)(n.code,{children:"_components"})," folder and component file"]}),"\n",(0,a.jsxs)(n.p,{children:["Create a new folder inside of ",(0,a.jsx)(n.code,{children:"hello-world"})," called ",(0,a.jsx)(n.code,{children:"_components"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["Then, create a file inside ",(0,a.jsx)(n.code,{children:"_components"})," called ",(0,a.jsx)(n.code,{children:"TagList.tsx"}),"."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{children:"src\n\u251c\u2500\u2500 pages\n\u2502 \u251c\u2500\u2500 hello-world\n\u2502 \u2502 \u251c\u2500\u2500 _components\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 TagList.tsx\n\u2502 \u2502 \u251c\u2500\u2500 index.tsx\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"4-create-a-taglist-component",children:["4. Create a ",(0,a.jsx)(n.code,{children:"TagList"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"export const TagList: React.FC = () => {\n return (\n
    \n
  • Animalia
    • \n
  • Chordata
    • \n
  • Mammalia
    • \n
\n )\n}\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"5-import-and-use-the-taglist-component-in-helloworldpage",children:["5. Import and use the ",(0,a.jsx)(n.code,{children:"TagList"})," component in ",(0,a.jsx)(n.code,{children:"HelloWorldPage"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"import { TagList } from './_components/TagList';\n\nconst HelloWorldPage: React.FC = () => {\n return (\n
\n Hello World!\n \n
\n );\n};\n\nexport default HelloWorldPage;\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"6-add-a-tags-prop-to-the-taglist-component",children:["6. Add a ",(0,a.jsx)(n.code,{children:"tags"})," prop to the ",(0,a.jsx)(n.code,{children:"TagList"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"interface TagListProps {\n tags: string[];\n}\n\nexport const TagList: React.FC = ({ tags }) => {\n return (\n
    \n
  • Animalia
    • \n
  • Chordata
    • \n
  • Mammalia
    • \n
\n )\n}\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"7-loop-through-tags-to-render-each-item",children:["7. Loop through ",(0,a.jsx)(n.code,{children:"tags"})," to render each item"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"export const TagList: React.FC = ({ tags }) => {\n return (\n
    \n {tags.map((tag) => (\n
  • {tag}
    • \n ))}\n
\n )\n}\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"8-pass-values-to-the-tags-prop-on-helloworldpage",children:["8. Pass values to the ",(0,a.jsx)(n.code,{children:"tags"})," prop on ",(0,a.jsx)(n.code,{children:"HelloWorldPage"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"const HelloWorldPage: React.FC = () => {\n return (\n
\n Hello World!\n \n
\n );\n};\n"})}),"\n",(0,a.jsx)(n.h2,{id:"material-ui-basics",children:"Material UI Basics"}),"\n",(0,a.jsx)(n.p,{children:"Material UI is included in the STRUDEL application by default. It contains many useful components for reusable elements and patterns throughout a web user interface."}),"\n",(0,a.jsxs)(n.p,{children:["See more in the ",(0,a.jsx)(n.a,{href:"https://mui.com/material-ui/all-components/",children:"Materials UI Docs"}),"."]}),"\n",(0,a.jsxs)(n.h3,{id:"1-import-the-chip-component-to-taglisttsx",children:["1. Import the ",(0,a.jsx)(n.code,{children:"Chip"})," component to ",(0,a.jsx)(n.code,{children:"TagList.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"import { Chip } from '@mui/material';\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"2-replace-the-li-elements-with-chip-components",children:["2. Replace the ",(0,a.jsx)(n.code,{children:"li"})," elements with ",(0,a.jsx)(n.code,{children:"Chip"})," components"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"export const TagList: React.FC = ({ tags }) => {\n return (\n
    \n {tags.map((tag) => (\n \n ))}\n
\n )\n}\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"3-import-the-stack-component-to-taglisttsx",children:["3. Import the ",(0,a.jsx)(n.code,{children:"Stack"})," component to ",(0,a.jsx)(n.code,{children:"TagList.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:"import { Chip, Stack } from '@mui/material';\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"4-replace-the-ul-element-with-the-stack-component",children:["4. Replace the ",(0,a.jsx)(n.code,{children:"ul"})," element with the ",(0,a.jsx)(n.code,{children:"Stack"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/_components/TagList.tsx"',children:'export const TagList: React.FC = ({ tags }) => {\n return (\n \n {tags.map((tag) => (\n \n ))}\n \n )\n}\n'})}),"\n",(0,a.jsxs)(n.h3,{id:"5-import-the-typography-component-to-indextsx",children:["5. Import the ",(0,a.jsx)(n.code,{children:"Typography"})," component to ",(0,a.jsx)(n.code,{children:"index.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"import { Typography } from '@mui/material';\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"6-wrap-the-title-text-with-the-typography-component",children:["6. Wrap the title text with the ",(0,a.jsx)(n.code,{children:"Typography"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"const HelloWorldPage: React.FC = () => {\n return (\n
\n \n Hello World!\n \n \n
\n );\n};\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"7-import-the-container-component-to-indextsx",children:["7. Import the ",(0,a.jsx)(n.code,{children:"Container"})," component to ",(0,a.jsx)(n.code,{children:"index.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"import { Container, Typography } from '@mui/material';\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"6-replace-the-div-element-with-the-container-component",children:["6. Replace the ",(0,a.jsx)(n.code,{children:"div"})," element with the ",(0,a.jsx)(n.code,{children:"Container"})," component"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"const HelloWorldPage: React.FC = () => {\n return (\n \n \n Hello World!\n \n \n \n );\n};\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"7-use-the-sx-prop-to-style-typography",children:["7. Use the ",(0,a.jsx)(n.code,{children:"sx"})," prop to style ",(0,a.jsx)(n.code,{children:"Typography"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/hello-world/index.tsx"',children:"\n Hello World!\n\n"})}),"\n",(0,a.jsx)(n.h2,{id:"customizing-the-task-flow",children:"Customizing the Task Flow"}),"\n",(0,a.jsx)(n.p,{children:"Now we will utilize the component we made in the preview panel and add some more custom data to the panel."}),"\n",(0,a.jsxs)(n.p,{children:["For this exercise we will be working inside of ",(0,a.jsx)(n.code,{children:"src/pages/explore-data/_components_/PreviewPanel.tsx"})]}),"\n",(0,a.jsxs)(n.h3,{id:"1-import-the-taglist-component-to-previewpaneltsx",children:["1. Import the ",(0,a.jsx)(n.code,{children:"TagList"})," component to ",(0,a.jsx)(n.code,{children:"PreviewPanel.tsx"})]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:"import { TagList } from '../../hello-world/_components/TagList';\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"2-replace-the-row-description-with-a-taglist",children:["2. Replace the row description with a ",(0,a.jsx)(n.code,{children:"TagList"})]}),"\n",(0,a.jsx)(n.p,{children:"Replace:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:'Row description, subtitle, or helper text.\n'})}),"\n",(0,a.jsx)(n.p,{children:"With:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:"\n"})}),"\n",(0,a.jsxs)(n.h3,{id:"3-add-another-taglist-directly-after-the-first",children:["3. Add another ",(0,a.jsx)(n.code,{children:"TagList"})," directly after the first"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:"\n"})}),"\n",(0,a.jsx)(n.h3,{id:"4-replace-property-group-1-with-location-data",children:"4. Replace Property Group 1 with Location data"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:"\n \n Location\n \n \n\n"})}),"\n",(0,a.jsx)(n.h3,{id:"4-replace-property-group-2-with-record-data",children:"4. Replace Property Group 2 with Record data"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:'title="src/pages/explore-data/_components/PreviewPanel.tsx"',children:"\n \n Record\n \n \n\n"})})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>s});var a=t(6540);const i={},l=a.createContext(i);function o(e){const n=a.useContext(l);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),a.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/docs/assets/js/runtime~main.3bddd033.js b/docs/assets/js/runtime~main.c79c5c1d.js similarity index 98% rename from docs/assets/js/runtime~main.3bddd033.js rename to docs/assets/js/runtime~main.c79c5c1d.js index 0231126f..ffee4e4c 100644 --- a/docs/assets/js/runtime~main.3bddd033.js +++ b/docs/assets/js/runtime~main.c79c5c1d.js @@ -1 +1 @@ -(()=>{"use strict";var e,t,r,a,f,d={},o={};function c(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={id:e,loaded:!1,exports:{}};return d[e].call(r.exports,r,r.exports,c),r.loaded=!0,r.exports}c.m=d,c.c=o,e=[],c.O=(t,r,a,f)=>{if(!r){var d=1/0;for(i=0;i=f)&&Object.keys(c.O).every((e=>c.O[e](r[b])))?r.splice(b--,1):(o=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[r,a,f]},c.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return c.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,c.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var f=Object.create(null);c.r(f);var d={};t=t||[null,r({}),r([]),r(r)];for(var o=2&a&&e;"object"==typeof o&&!~t.indexOf(o);o=r(o))Object.getOwnPropertyNames(o).forEach((t=>d[t]=()=>e[t]));return d.default=()=>e,c.d(f,d),f},c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce(((t,r)=>(c.f[r](e,t),t)),[])),c.u=e=>"assets/js/"+({2:"d9c7f1b3",23:"66744bbe",48:"a94703ab",61:"1f391b9e",66:"972d9d57",98:"a7bd4aaa",110:"35155c61",134:"393be207",142:"b66f5046",146:"4c67d67d",173:"82bb2330",289:"3e53be1f",292:"2c1aff2f",401:"17896441",486:"eeba8224",510:"a55ab142",528:"06098dbb",536:"db20b254",560:"0582a12d",581:"935f2afb",604:"239cff9e",611:"92de3d7d",647:"5e95c892",749:"a0b9909f",754:"3de759d6",767:"bb8c1d39",822:"8f0e46bf",850:"756689ce",878:"e130a852",883:"897891c7",896:"64543f01",919:"afa9174c",924:"54f44165",933:"59d1f9e5",960:"34e16e5d",993:"fbf2c685"}[e]||e)+"."+{2:"9c860d12",23:"aebeb126",48:"6edc7472",61:"36aade1d",66:"02c82dcb",98:"b7541e25",110:"a5e975e2",127:"37a43ec7",134:"e29210a5",142:"a2452b5d",146:"c5120da1",173:"c6746758",237:"4d72bdf1",289:"438cbff1",292:"d68e0a18",320:"98db145e",373:"cb72e0d8",401:"c87e9bf9",486:"786a6697",510:"1d6729ce",528:"2f88392b",536:"ec8a6509",560:"84ec7631",581:"ec9e2d8c",604:"68688792",611:"1809b580",630:"54ff3f6a",647:"d9e3d714",749:"0911acb2",754:"ad538ba8",767:"8383ff5a",822:"5ec061c2",850:"2a570ce5",878:"24d952c5",883:"eedfaab6",896:"ed40599d",910:"fa864105",919:"a7c1580d",924:"6b7d1cf2",933:"89fe3a84",960:"bb7c1853",993:"fbc88f47"}[e]+".js",c.miniCssF=e=>{},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},f="strudel-docs:",c.l=(e,t,r,d)=>{if(a[e])a[e].push(t);else{var o,b;if(void 0!==r)for(var n=document.getElementsByTagName("script"),i=0;i{o.onerror=o.onload=null,clearTimeout(s);var f=a[e];if(delete a[e],o.parentNode&&o.parentNode.removeChild(o),f&&f.forEach((e=>e(r))),t)return t(r)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=l.bind(null,o.onerror),o.onload=l.bind(null,o.onload),b&&document.head.appendChild(o)}},c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/strudel-kit/docs/",c.gca=function(e){return e={17896441:"401",d9c7f1b3:"2","66744bbe":"23",a94703ab:"48","1f391b9e":"61","972d9d57":"66",a7bd4aaa:"98","35155c61":"110","393be207":"134",b66f5046:"142","4c67d67d":"146","82bb2330":"173","3e53be1f":"289","2c1aff2f":"292",eeba8224:"486",a55ab142:"510","06098dbb":"528",db20b254:"536","0582a12d":"560","935f2afb":"581","239cff9e":"604","92de3d7d":"611","5e95c892":"647",a0b9909f:"749","3de759d6":"754",bb8c1d39:"767","8f0e46bf":"822","756689ce":"850",e130a852:"878","897891c7":"883","64543f01":"896",afa9174c:"919","54f44165":"924","59d1f9e5":"933","34e16e5d":"960",fbf2c685:"993"}[e]||e,c.p+c.u(e)},(()=>{var e={354:0,869:0};c.f.j=(t,r)=>{var a=c.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(354|869)$/.test(t))e[t]=0;else{var f=new Promise(((r,f)=>a=e[t]=[r,f]));r.push(a[2]=f);var d=c.p+c.u(t),o=new Error;c.l(d,(r=>{if(c.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var f=r&&("load"===r.type?"missing":r.type),d=r&&r.target&&r.target.src;o.message="Loading chunk "+t+" failed.\n("+f+": "+d+")",o.name="ChunkLoadError",o.type=f,o.request=d,a[1](o)}}),"chunk-"+t,t)}},c.O.j=t=>0===e[t];var t=(t,r)=>{var a,f,d=r[0],o=r[1],b=r[2],n=0;if(d.some((t=>0!==e[t]))){for(a in o)c.o(o,a)&&(c.m[a]=o[a]);if(b)var i=b(c)}for(t&&t(r);n{"use strict";var e,t,r,a,f,d={},o={};function c(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={id:e,loaded:!1,exports:{}};return d[e].call(r.exports,r,r.exports,c),r.loaded=!0,r.exports}c.m=d,c.c=o,e=[],c.O=(t,r,a,f)=>{if(!r){var d=1/0;for(i=0;i=f)&&Object.keys(c.O).every((e=>c.O[e](r[b])))?r.splice(b--,1):(o=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[r,a,f]},c.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return c.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,c.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var f=Object.create(null);c.r(f);var d={};t=t||[null,r({}),r([]),r(r)];for(var o=2&a&&e;"object"==typeof o&&!~t.indexOf(o);o=r(o))Object.getOwnPropertyNames(o).forEach((t=>d[t]=()=>e[t]));return d.default=()=>e,c.d(f,d),f},c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce(((t,r)=>(c.f[r](e,t),t)),[])),c.u=e=>"assets/js/"+({2:"d9c7f1b3",23:"66744bbe",48:"a94703ab",61:"1f391b9e",66:"972d9d57",98:"a7bd4aaa",110:"35155c61",134:"393be207",142:"b66f5046",146:"4c67d67d",173:"82bb2330",289:"3e53be1f",292:"2c1aff2f",401:"17896441",486:"eeba8224",510:"a55ab142",528:"06098dbb",536:"db20b254",560:"0582a12d",581:"935f2afb",604:"239cff9e",611:"92de3d7d",647:"5e95c892",749:"a0b9909f",754:"3de759d6",767:"bb8c1d39",822:"8f0e46bf",850:"756689ce",878:"e130a852",883:"897891c7",896:"64543f01",919:"afa9174c",924:"54f44165",933:"59d1f9e5",960:"34e16e5d",993:"fbf2c685"}[e]||e)+"."+{2:"9c860d12",23:"aebeb126",48:"6edc7472",61:"36aade1d",66:"02c82dcb",98:"b7541e25",110:"a5e975e2",127:"37a43ec7",134:"e29210a5",142:"a2452b5d",146:"c5120da1",173:"c6746758",237:"4d72bdf1",289:"438cbff1",292:"d68e0a18",320:"98db145e",373:"cb72e0d8",401:"c87e9bf9",486:"786a6697",510:"1d6729ce",528:"2f88392b",536:"ec8a6509",560:"84ec7631",581:"ec9e2d8c",604:"68688792",611:"1809b580",630:"54ff3f6a",647:"d9e3d714",749:"0911acb2",754:"14561e4b",767:"8383ff5a",822:"5ec061c2",850:"2a570ce5",878:"24d952c5",883:"eedfaab6",896:"ed40599d",910:"fa864105",919:"a7c1580d",924:"6b7d1cf2",933:"89fe3a84",960:"bb7c1853",993:"fbc88f47"}[e]+".js",c.miniCssF=e=>{},c.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},f="strudel-docs:",c.l=(e,t,r,d)=>{if(a[e])a[e].push(t);else{var o,b;if(void 0!==r)for(var n=document.getElementsByTagName("script"),i=0;i{o.onerror=o.onload=null,clearTimeout(s);var f=a[e];if(delete a[e],o.parentNode&&o.parentNode.removeChild(o),f&&f.forEach((e=>e(r))),t)return t(r)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=l.bind(null,o.onerror),o.onload=l.bind(null,o.onload),b&&document.head.appendChild(o)}},c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},c.p="/strudel-kit/docs/",c.gca=function(e){return e={17896441:"401",d9c7f1b3:"2","66744bbe":"23",a94703ab:"48","1f391b9e":"61","972d9d57":"66",a7bd4aaa:"98","35155c61":"110","393be207":"134",b66f5046:"142","4c67d67d":"146","82bb2330":"173","3e53be1f":"289","2c1aff2f":"292",eeba8224:"486",a55ab142:"510","06098dbb":"528",db20b254:"536","0582a12d":"560","935f2afb":"581","239cff9e":"604","92de3d7d":"611","5e95c892":"647",a0b9909f:"749","3de759d6":"754",bb8c1d39:"767","8f0e46bf":"822","756689ce":"850",e130a852:"878","897891c7":"883","64543f01":"896",afa9174c:"919","54f44165":"924","59d1f9e5":"933","34e16e5d":"960",fbf2c685:"993"}[e]||e,c.p+c.u(e)},(()=>{var e={354:0,869:0};c.f.j=(t,r)=>{var a=c.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(354|869)$/.test(t))e[t]=0;else{var f=new Promise(((r,f)=>a=e[t]=[r,f]));r.push(a[2]=f);var d=c.p+c.u(t),o=new Error;c.l(d,(r=>{if(c.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var f=r&&("load"===r.type?"missing":r.type),d=r&&r.target&&r.target.src;o.message="Loading chunk "+t+" failed.\n("+f+": "+d+")",o.name="ChunkLoadError",o.type=f,o.request=d,a[1](o)}}),"chunk-"+t,t)}},c.O.j=t=>0===e[t];var t=(t,r)=>{var a,f,d=r[0],o=r[1],b=r[2],n=0;if(d.some((t=>0!==e[t]))){for(a in o)c.o(o,a)&&(c.m[a]=o[a]);if(b)var i=b(c)}for(t&&t(r);n Command-Line Interface - Overview | STRUDEL Kit - + diff --git a/docs/cli/reference/index.html b/docs/cli/reference/index.html index b9e99cb2..7e5bbd48 100644 --- a/docs/cli/reference/index.html +++ b/docs/cli/reference/index.html @@ -4,7 +4,7 @@ strudel | STRUDEL Kit - + diff --git a/docs/components/LabelValueTable/index.html b/docs/components/LabelValueTable/index.html index 6fe593f1..5fa3628a 100644 --- a/docs/components/LabelValueTable/index.html +++ b/docs/components/LabelValueTable/index.html @@ -4,7 +4,7 @@ LabelValueTable | STRUDEL Kit - + diff --git a/docs/components/LinearMeter/index.html b/docs/components/LinearMeter/index.html index 4721eb21..fc9f648e 100644 --- a/docs/components/LinearMeter/index.html +++ b/docs/components/LinearMeter/index.html @@ -4,7 +4,7 @@ LinearMeter | STRUDEL Kit - + diff --git a/docs/components/overview/index.html b/docs/components/overview/index.html index 8ed91334..3552ac6e 100644 --- a/docs/components/overview/index.html +++ b/docs/components/overview/index.html @@ -4,7 +4,7 @@ Overview | STRUDEL Kit - + diff --git a/docs/getting-started/first-steps/index.html b/docs/getting-started/first-steps/index.html index 9b72ef1e..0ae7c9ff 100644 --- a/docs/getting-started/first-steps/index.html +++ b/docs/getting-started/first-steps/index.html @@ -4,7 +4,7 @@ First Steps | STRUDEL Kit - + diff --git a/docs/getting-started/installation/index.html b/docs/getting-started/installation/index.html index 4cfa5094..5da38d2f 100644 --- a/docs/getting-started/installation/index.html +++ b/docs/getting-started/installation/index.html @@ -4,7 +4,7 @@ Installation | STRUDEL Kit - + diff --git a/docs/getting-started/quickstart/index.html b/docs/getting-started/quickstart/index.html index 58242416..f5f40e26 100644 --- a/docs/getting-started/quickstart/index.html +++ b/docs/getting-started/quickstart/index.html @@ -4,7 +4,7 @@ Quickstart | STRUDEL Kit - + diff --git a/docs/guides/combine-sections/index.html b/docs/guides/combine-sections/index.html index 05169318..e1ccbba6 100644 --- a/docs/guides/combine-sections/index.html +++ b/docs/guides/combine-sections/index.html @@ -4,7 +4,7 @@ Combining Sections | STRUDEL Kit - + diff --git a/docs/guides/connect-task-flows-together/index.html b/docs/guides/connect-task-flows-together/index.html index bc29f3f3..f619e112 100644 --- a/docs/guides/connect-task-flows-together/index.html +++ b/docs/guides/connect-task-flows-together/index.html @@ -4,7 +4,7 @@ Connecting Task Flows | STRUDEL Kit - + diff --git a/docs/guides/tutorials/basic-app-with-strudel/add-taskflow/index.html b/docs/guides/tutorials/basic-app-with-strudel/add-taskflow/index.html index 24818c78..10fcd0f5 100644 --- a/docs/guides/tutorials/basic-app-with-strudel/add-taskflow/index.html +++ b/docs/guides/tutorials/basic-app-with-strudel/add-taskflow/index.html @@ -4,7 +4,7 @@ Add a Task Flow to Your App | STRUDEL Kit - + diff --git a/docs/guides/tutorials/basic-app-with-strudel/continue-learning/index.html b/docs/guides/tutorials/basic-app-with-strudel/continue-learning/index.html index 34680a7d..9f4d6207 100644 --- a/docs/guides/tutorials/basic-app-with-strudel/continue-learning/index.html +++ b/docs/guides/tutorials/basic-app-with-strudel/continue-learning/index.html @@ -4,7 +4,7 @@ Continue Learning | STRUDEL Kit - + diff --git a/docs/guides/tutorials/basic-app-with-strudel/create-app/index.html b/docs/guides/tutorials/basic-app-with-strudel/create-app/index.html index 4d61110f..42cbdb20 100644 --- a/docs/guides/tutorials/basic-app-with-strudel/create-app/index.html +++ b/docs/guides/tutorials/basic-app-with-strudel/create-app/index.html @@ -4,7 +4,7 @@ Create a Base App | STRUDEL Kit - + diff --git a/docs/guides/tutorials/basic-app-with-strudel/customize-app/index.html b/docs/guides/tutorials/basic-app-with-strudel/customize-app/index.html index fe96426b..b43e0036 100644 --- a/docs/guides/tutorials/basic-app-with-strudel/customize-app/index.html +++ b/docs/guides/tutorials/basic-app-with-strudel/customize-app/index.html @@ -4,7 +4,7 @@ Customize Your App | STRUDEL Kit - + diff --git a/docs/guides/tutorials/basic-app-with-strudel/customize-home-page/index.html b/docs/guides/tutorials/basic-app-with-strudel/customize-home-page/index.html index 6f67f866..b08b59ca 100644 --- a/docs/guides/tutorials/basic-app-with-strudel/customize-home-page/index.html +++ b/docs/guides/tutorials/basic-app-with-strudel/customize-home-page/index.html @@ -4,7 +4,7 @@ Customize the Home Page | STRUDEL Kit - + diff --git a/docs/guides/tutorials/basic-app-with-strudel/customize-taskflow/index.html b/docs/guides/tutorials/basic-app-with-strudel/customize-taskflow/index.html index b7848a4f..7328bb3d 100644 --- a/docs/guides/tutorials/basic-app-with-strudel/customize-taskflow/index.html +++ b/docs/guides/tutorials/basic-app-with-strudel/customize-taskflow/index.html @@ -4,7 +4,7 @@ Customize Your Task Flow | STRUDEL Kit - + diff --git a/docs/guides/tutorials/basic-app-with-strudel/introduction/index.html b/docs/guides/tutorials/basic-app-with-strudel/introduction/index.html index ae19c421..c58b1ffc 100644 --- a/docs/guides/tutorials/basic-app-with-strudel/introduction/index.html +++ b/docs/guides/tutorials/basic-app-with-strudel/introduction/index.html @@ -4,7 +4,7 @@ Tutorial Introduction | STRUDEL Kit - + diff --git a/docs/guides/tutorials/basic-app-with-strudel/setup/index.html b/docs/guides/tutorials/basic-app-with-strudel/setup/index.html index 4d211498..44e489bd 100644 --- a/docs/guides/tutorials/basic-app-with-strudel/setup/index.html +++ b/docs/guides/tutorials/basic-app-with-strudel/setup/index.html @@ -4,7 +4,7 @@ Setup | STRUDEL Kit - + diff --git a/docs/guides/tutorials/usrse/index.html b/docs/guides/tutorials/usrse/index.html index e27051bf..404e538e 100644 --- a/docs/guides/tutorials/usrse/index.html +++ b/docs/guides/tutorials/usrse/index.html @@ -4,7 +4,7 @@ US-RSE Tutorial | STRUDEL Kit - + @@ -14,7 +14,7 @@
  • StackBlitz Code Starter
    • -
  • StackBlitz Code Live In Progress
    • +
  • StackBlitz Code Live In Progress
  • Slides
  • GBIF API Documentation
  • GBIF Occurrence Endpoint Example
    • diff --git a/docs/index.html b/docs/index.html index 4f30e7a7..b26c0b37 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,7 +4,7 @@ Introduction | STRUDEL Kit - + diff --git a/docs/markdown-page/index.html b/docs/markdown-page/index.html index 98611a8e..50fc7109 100644 --- a/docs/markdown-page/index.html +++ b/docs/markdown-page/index.html @@ -4,7 +4,7 @@ Markdown page example | STRUDEL Kit - + diff --git a/docs/task-flows/compare-data/index.html b/docs/task-flows/compare-data/index.html index ca5f1373..1b62d834 100644 --- a/docs/task-flows/compare-data/index.html +++ b/docs/task-flows/compare-data/index.html @@ -4,7 +4,7 @@ Compare Data | STRUDEL Kit - + diff --git a/docs/task-flows/contribute-data/index.html b/docs/task-flows/contribute-data/index.html index fd2c0a3a..a2166171 100644 --- a/docs/task-flows/contribute-data/index.html +++ b/docs/task-flows/contribute-data/index.html @@ -4,7 +4,7 @@ Contribute Data | STRUDEL Kit - + diff --git a/docs/task-flows/explore-data/index.html b/docs/task-flows/explore-data/index.html index b6d0cabf..9447b733 100644 --- a/docs/task-flows/explore-data/index.html +++ b/docs/task-flows/explore-data/index.html @@ -4,7 +4,7 @@ Explore Data | STRUDEL Kit - + diff --git a/docs/task-flows/monitor-activities/index.html b/docs/task-flows/monitor-activities/index.html index d59a93c9..6152d69c 100644 --- a/docs/task-flows/monitor-activities/index.html +++ b/docs/task-flows/monitor-activities/index.html @@ -4,7 +4,7 @@ Monitor Activities | STRUDEL Kit - + diff --git a/docs/task-flows/overview/index.html b/docs/task-flows/overview/index.html index d3e1675f..d0a1601d 100644 --- a/docs/task-flows/overview/index.html +++ b/docs/task-flows/overview/index.html @@ -4,7 +4,7 @@ Overview | STRUDEL Kit - + diff --git a/docs/task-flows/run-computation/index.html b/docs/task-flows/run-computation/index.html index 82fdfa0e..f6662554 100644 --- a/docs/task-flows/run-computation/index.html +++ b/docs/task-flows/run-computation/index.html @@ -4,7 +4,7 @@ Run Computation | STRUDEL Kit - + diff --git a/docs/task-flows/search-data-repositories/index.html b/docs/task-flows/search-data-repositories/index.html index 94aa3df8..bedf0a91 100644 --- a/docs/task-flows/search-data-repositories/index.html +++ b/docs/task-flows/search-data-repositories/index.html @@ -4,7 +4,7 @@ Search Data Repositories | STRUDEL Kit - +