updated layout and added extra information for users

docs/getting-started/_category_.json

@@ -4,6 +4,6 @@
     "description": "Getting Started Guides",
     "type": "generated-index"
   },
-  "position": 2
+  "position": 3
 }
 

docs/getting-started/components/index.ts

@@ -0,0 +1 @@
+export {InstallXyoOptions} from './installation'

docs/getting-started/components/installation/cli-tabs.tsx

@@ -0,0 +1,171 @@
+import { Paper, alpha, styled, useTheme } from '@mui/material'
+import Box, { BoxProps } from '@mui/material/Box'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+import Typography from '@mui/material/Typography'
+import * as React from 'react'
+
+
+interface SingleCliTabProps {
+  tabTitle: string
+  tabContent: string
+}
+
+interface CliTabsProps extends BoxProps {
+  tabs: SingleCliTabProps[]
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode
+  index: number
+  value: number
+}
+
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  )
+}
+
+
+const AntTabs = styled(Tabs)({
+  borderBottom: '1px solid #e8e8e8',
+  '& .MuiTabs-indicator': {
+    backgroundColor: '#1890ff',
+  },
+});
+
+const AntTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
+  ({ theme }) => ({
+    textTransform: 'none',
+    minWidth: 0,
+    [theme.breakpoints.up('sm')]: {
+      minWidth: 0,
+    },
+    fontWeight: theme.typography.fontWeightRegular,
+    marginRight: theme.spacing(1),
+    color: 'rgba(0, 0, 0, 0.85)',
+    fontFamily: [
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
+    '&:hover': {
+      color: '#40a9ff',
+      opacity: 1,
+    },
+    '&.Mui-selected': {
+      color: '#1890ff',
+      fontWeight: theme.typography.fontWeightMedium,
+    },
+    '&.Mui-focusVisible': {
+      backgroundColor: '#d1eaff',
+    },
+  }),
+);
+
+interface StyledTabsProps {
+  children?: React.ReactNode;
+  value: number;
+  onChange: (event: React.SyntheticEvent, newValue: number) => void;
+}
+
+const StyledTabs = styled((props: StyledTabsProps) => (
+  <Tabs
+    {...props}
+    TabIndicatorProps={{ children: <span className="MuiTabs-indicatorSpan" /> }}
+  />
+))({
+  '& .MuiTabs-indicator': {
+    display: 'flex',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+  },
+  '& .MuiTabs-indicatorSpan': {
+    maxWidth: 40,
+    width: '100%',
+    backgroundColor: '#635ee7',
+  },
+});
+
+interface StyledTabProps {
+  label: string;
+}
+
+const StyledTab = styled((props: StyledTabProps) => (
+  <Tab disableRipple {...props} />
+))(({ theme }) => ({
+  textTransform: 'none',
+  fontWeight: theme.typography.fontWeightBold,
+  fontSize: theme.typography.pxToRem(15),
+  marginRight: theme.spacing(1),
+  color: 'rgba(255, 255, 255, 0.7)',
+  '&.Mui-selected': {
+    color: '#fff',
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: 'rgba(100, 95, 228, 0.32)',
+  },
+}));
+
+
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  }
+}
+export const CliTabs: React.FC<CliTabsProps> = ({tabs, ...props}) => {
+  const [value, setValue] = React.useState(0)
+const theme = useTheme()
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Box sx={{ width: '100%' }} {...props}>
+      <Paper sx={{ bgcolor: '#252529', color: '#ffffff', borderRadius: '10px'}}>
+        <Box style={{borderBottom: 2, borderColor: 'lightgray', backgroundColor: alpha('#ffffff', 0.1), borderRadius: '10px 10px 0px 0px'}} >
+          <StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
+            {tabs.map((item, index) => {
+              return (
+                <StyledTab key={`${index}-tab`} label={item.tabTitle} {...a11yProps(index)}/>
+              )
+              })}
+          </StyledTabs>
+        </Box>
+        {tabs.map((item, index) => {
+          return (
+          <TabPanel key={`${index}-tab-panel`} value={value} index={index}>
+            <Typography variant="body1">
+            {item.tabContent}
+            </Typography>
+          </TabPanel>)
+              })}
+      </Paper>
+    </Box>
+  )
+}

docs/getting-started/components/installation/index.ts

@@ -0,0 +1 @@
+export * from './install-xyo'

docs/getting-started/components/installation/install-xyo.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import { CliTabs } from './cli-tabs'
+import { Link } from '@mui/material'
+
+interface TabPanelProps {
+  children?: React.ReactNode
+  index: number
+  value: number
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box paddingTop={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  )
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  }
+}
+export const InstallXyoOptions: React.FC = (props) => {
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
+          <Tab label="Javascript" {...a11yProps(0)} />
+          <Tab label="React" {...a11yProps(1)} />
+          <Tab label="Android/Kotlin/Java" {...a11yProps(2)} />
+          <Tab label="Swift/iOS/OSX" {...a11yProps(3)} />
+        </Tabs>
+      </Box>
+      <TabPanel value={value} index={0}>
+        <CliTabs tabs={[{tabTitle: 'npm', tabContent:'npm i --save @xyo-network/sdk-xyo-client-js'},
+        {tabTitle: 'yarn', tabContent:'yarn add @xyo-network/sdk-xyo-client-js'}]}/>
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        <CliTabs tabs={[{tabTitle: 'npm', tabContent:'npm i --save @xyo-network/sdk-xyo-react'},
+        {tabTitle: 'yarn', tabContent:'yarn add @xyo-network/sdk-xyo-react'}]}/>
+      </TabPanel>
+      <TabPanel value={value} index={2}>
+      <Typography variant='body1'>You can find the instructions for the XYO Android SDK{' '}
+        <Link href="https://jitpack.io/#xyoraclenetwork/sdk-xyo-client-android" target="_blank">
+        here
+        </Link>.
+        </Typography>
+      </TabPanel>
+      <TabPanel value={value} index={3}>
+      <Typography variant='body1'>You can find the instructions for the XYO Android SDK{' '}
+        <Link href="/sdks/swift">
+        here
+        </Link>.
+        </Typography>
+      </TabPanel>
+    </Box>
+  )
+}

docs/getting-started/exercises.md → docs/getting-started/exercises-ext.md

@@ -1,8 +1,8 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 ---
 
-# Exercises
+# Exercises (Extended)
 Now that you've learned a little more about the components of the XYO Network and how it fits together in the XYO Platform, it's time for some demos!
 
 These demos will expand your understanding of the XYO Platform, and introduce you to some new concepts.

docs/getting-started/intro.md → docs/getting-started/get-to-know.md

@@ -1,9 +1,9 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
-# Intro
-Taking your first steps with XYO? Try out the following demo and read more about what XYO can do.
+# Get to Know XYO
+The following examples offer a preview at just how easy XYO can be. Explore a Node, learn some of the basic XYO vocabulary, and review some resources that can take you where you need to be.
 
 ## Your first node
 
@@ -22,19 +22,24 @@ className="code-sandbox-div"
    
 Next, try uncommenting the following lines of code:
 
+**Line 14:** `// ,MemoryArchivist: "StorageForSystemInfoWitnessData",`
+
+**Line 17:** `// SystemInfoWitness: "WitnessCurrentSystemInformation",`
+
+**Line 20:** `// Bridge: "BridgeToPublicXyoNode",`
+
  _Tip: All Modules in "yourModules" need a comma between them. Keep the leading comma in the Archivist Module line, otherwise you'll receive a bug!_
 
-1. `Archivist` — An Archivist is where Bound Witness and Payload data is stored. A shared, hosted, or self-hosted archivist can be used. It is even possible to run an archivist on the same device as the Sentinel and Bridge.
-2. `Witness` — A Witness captures real-world data.
-3. `Bridge` — A Bridge transfers Bound Witness and payload data form Sentinels to an Archivist. In many cases, the same device that is running the Sentinel also acts as the Bridge.
+1. `Archivist` — An Archivist stores Bound Witness and Payload data. Learn more [here](/glossary#archivist).
+2. `Witness` — A Witness captures real-world data. Learn more [here](/glossary#witness).
+3. `Bridge` — A Bridge serves as a connection between different nodes. Learn more [here](/glossary#bridge).
 
 A few other useful words to learn:
 
 [TODO - Glossary Definition Variables]
 
 1. `Sentinel` — [TODO]
-2. `Witness` — [TODO]
-3. `Bridge` — [TODO]
+2. `Diviner` — [TODO]
 
 Need a quick reminder on what's what? The [Glossary](/glossary) can help you out!