Update files

pages/feature-overview/block-editor.md → pages/feature-overview/block-editor.mdx

@@ -1,5 +1,7 @@
 # Block editor
 
+## Overview
+
 At the heart of Kobra is its block editor (built on [Blockly](https://developers.google.com/blockly)). The block editor is used to build programs without needing to know about complicated programming language syntax. 
 
 On the left side, there is a toolbox, which holds all of the available blocks:
@@ -12,4 +14,14 @@ To build a program, connect blocks to the "on run" block. Blocks will snap toget
 
 ![Screenshot of a block connected to the on run block](/connecting-blocks.png)
 
-To get rid of a block, you can drag it onto the trash can, drag it onto the toolbox, or right click on it and select "delete block." To restore a deleted block, click on the trash can. A panel will open with its contents.
+To get rid of a block, you can drag it onto the trash can, drag it onto the toolbox, or right click on it and select "delete block." To restore a deleted block, click on the trash can. A panel will open with its contents.
+
+## Shadow blocks
+
+Some blocks in the toolbox may have "shadow blocks" attached to them:
+
+![Screenshot of print block with text shadow block connected to it](/shadow-block.png)
+
+Shadow blocks are designated by being a lighter color than their non-shadow equivalent. These blocks are like placeholders; you can interact with them (in this case, edit the text in the text field), and you can run them like a normal block, but you can also put another block in that position:
+
+<video src="/shadow-blocks-demo.mp4" controls>Video demo of using a block with a connected shadow block</video>

pages/feature-overview/profile-page.md

@@ -1 +1,7 @@
-# Profile page
+# Profile page
+
+Your profile page shows some information about you (a bio and URL that you can customize) and all of your public projects. Right now, it doesn't do much, but as we implement more features we'll make it more useful.
+
+You can access a users profile page at https://studio.kobra.dev/user/ [insert username here], or by clicking on the user chip on a project page:
+
+![Screenshot of user chip](/user-chip.png)

pages/index.mdx

@@ -1,81 +1,11 @@
-import Image from 'next/image'
-import Bleed from 'nextra-theme-docs/bleed'
+import Callout from 'nextra-theme-docs/callout'
 
-# Kobra Onboarding
+# Welcome
 
-Hey! Welcome to Kobra! We're so happy that you're trying it out, and we'd love your feedback! Here are some basic instructions for how to get started with Kobra – we realy hope you won't have to use these instructions, but when you do, please take a note of it so we'll know which parts of the experience aren't intuitive
+Welcome to the Kobra docs!
 
-Do not open the specific steps unless you're stuck
-
-Here are the basic steps to creating a Kobra program (we're going to be creating a Simple Linear Regression):
-
-1. Upload dataset
-
-    Download dataset [here](https://raw.githubusercontent.com/kobra-dev/datasets/main/Salary_Data.csv)
-
-    - Upload the file
-
-        In the top right, go to the file upload tab and upload your dataset. If this isn't intuitive, please make a note of it
-
-    - Load in the dataset
-
-        Go to the variables tab and create a variable for data
-
-        ![/Screen_Shot_2021-05-11_at_2.06.46_PM.png](/Screen_Shot_2021-05-11_at_2.06.46_PM.png)
-
-        Set the data variable to a new dataframe – make the filename the same as the dataset you uploaded (the String block is in the text tab)
-
-        ![/Screen_Shot_2021-05-11_at_2.07.30_PM.png](/Screen_Shot_2021-05-11_at_2.07.30_PM.png)
-
-2. Create X and y variables
-    - Create variables for X and y
-
-        Go to the variables tab and create a variable for X and y
-
-    - Set each variable to one column of the dataframe
-
-        Drag out the "Get column" block from the dataframes tab
-
-        ![/Screen_Shot_2021-05-11_at_2.11.07_PM.png](/Screen_Shot_2021-05-11_at_2.11.07_PM.png)
-
-3. Create scatterplot
-    - Add a scatterplot to the plot
-
-        Get this blocks from the plots tab, and add it to your program
-
-        ![/Screen_Shot_2021-05-11_at_2.12.02_PM.png](/Screen_Shot_2021-05-11_at_2.12.02_PM.png)
-
-4. Click the run button to view your scatterplot (in data visualization tab)
-5. Create & Train Linear Regression Model
-    - Create a variable for your linear regression model
-
-        Go to the variables tab, and create a variable for a model
-
-    - Set it to a linear regression model
-
-        Drag out the linear regression model from the Linear Regression tab and set model to it
-
-        ![/Screen_Shot_2021-05-11_at_2.18.47_PM.png](/Screen_Shot_2021-05-11_at_2.18.47_PM.png)
-
-    - Fit the linear regression model
-
-        Drag out the `fit linear regression model` block and fit the model variable
-
-        ![/Screen_Shot_2021-05-11_at_2.25.11_PM.png](/Screen_Shot_2021-05-11_at_2.25.11_PM.png)
-
-6. Make prediction with linear regression
-    - Make a prediction and print it out
-
-        Drag out the print block from the text category, and then use the create text block to combine a string saying "Prediction (5 yrs experience)" and your predction
-
-        ![/Screen_Shot_2021-05-11_at_2.30.25_PM.png](/Screen_Shot_2021-05-11_at_2.30.25_PM.png)
-
-        Add in a prediction block, where you're making a prediction with your linear regression model (in linear regression tab)
-
-        ![/Screen_Shot_2021-05-11_at_2.31.22_PM.png](/Screen_Shot_2021-05-11_at_2.31.22_PM.png)
-
- Full program
-
-- Full program
-
-    ![/Screen_Shot_2021-05-11_at_2.32.15_PM.png](/Screen_Shot_2021-05-11_at_2.32.15_PM.png)
+<Callout emoji="❗">
+  These docs are still a work-in-progress. Submit feedback on our [GitHub
+  repo](https://github.com/kobra-dev/docs) or reach out to us directly
+  ([[email protected]](mailto:[email protected])) if you have any questions.
+</Callout>

pages/meta.json

@@ -1,5 +1,5 @@
 {
   "index": "Introduction",
-  "dataframes": "DataFrames",
+  "onboarding": "Onboarding",
   "feature-overview": "Feature overview"
 }

pages/onboarding.mdx

@@ -0,0 +1,79 @@
+import Image from 'next/image'
+import Bleed from 'nextra-theme-docs/bleed'
+
+# Kobra Onboarding
+
+Hey! Welcome to Kobra! We're so happy that you're trying it out, and we'd love your feedback! Here are some basic instructions for how to get started with Kobra – our goal is for you to not have to use these instructions, so when you do, please take a note of it so we'll know which parts of the experience aren't intuitive.
+
+Here are the basic steps to creating a Kobra program (we're going to be creating a Simple Linear Regression):
+
+1. Upload dataset
+
+    Download dataset [here](https://raw.githubusercontent.com/kobra-dev/datasets/main/Salary_Data.csv)
+
+    Then, follow the instructions [here](/feature-overview/dataset-uploads#import-into-kobra) to import the dataset.
+
+    - Use the dataset
+
+        The DataFrames tab should have opened when you uploaded the file. Drag out the block with the name of the uploaded file (it's at the very top of the flyout).
+
+        Then, go to the variables tab and create a variable for data
+
+        ![Screenshot of variables tab](/Screen_Shot_2021-05-11_at_2.06.46_PM.png)
+
+        Set the data variable to the uploaded file block you got previously
+
+        ![Screenshot of connected blocks](/Screenshot%20from%202021-06-14%2017-59-22.png)
+
+2. Create X and y variables
+    - Create variables for X and y
+
+        Go to the variables tab and create a variable for X and y
+
+    - Set each variable to one column of the dataframe
+
+        Drag out the "Get column" block from the dataframes tab
+
+        ![/Screen_Shot_2021-05-11_at_2.11.07_PM.png](/Screen_Shot_2021-05-11_at_2.11.07_PM.png)
+
+3. Create scatterplot
+    - Add a scatterplot to the plot
+
+        Get this blocks from the plots tab, and add it to your program
+
+        ![/Screen_Shot_2021-05-11_at_2.12.02_PM.png](/Screen_Shot_2021-05-11_at_2.12.02_PM.png)
+
+4. Click the run button to view your scatterplot (in data visualization tab)
+5. Create & Train Linear Regression Model
+    - Create a variable for your linear regression model
+
+        Go to the variables tab, and create a variable for a model
+
+    - Set it to a linear regression model
+
+        Drag out the linear regression model from the Linear Regression tab and set model to it
+
+        ![/Screen_Shot_2021-05-11_at_2.18.47_PM.png](/Screen_Shot_2021-05-11_at_2.18.47_PM.png)
+
+    - Fit the linear regression model
+
+        Drag out the `fit linear regression model` block and fit the model variable
+
+        ![/Screen_Shot_2021-05-11_at_2.25.11_PM.png](/Screen_Shot_2021-05-11_at_2.25.11_PM.png)
+
+6. Make prediction with linear regression
+    - Make a prediction and print it out
+
+        Drag out the print block from the text category, and then use the create text block to combine a string saying "Prediction (5 yrs experience)" and your predction
+
+        ![/Screen_Shot_2021-05-11_at_2.30.25_PM.png](/Screen_Shot_2021-05-11_at_2.30.25_PM.png)
+
+        Add in a prediction block, where you're making a prediction with your linear regression model (in linear regression tab)
+
+        ![/Screen_Shot_2021-05-11_at_2.31.22_PM.png](/Screen_Shot_2021-05-11_at_2.31.22_PM.png)
+
+ Full program
+
+- Full program
+
+    ![/Screen_Shot_2021-05-11_at_2.32.15_PM.png](/Screen_Shot_2021-05-11_at_2.32.15_PM.png)

theme.config.js

@@ -6,7 +6,17 @@ export default {
   path: '/',
   logo: (
     <>
-      <span className="mr-2 font-extrabold hidden md:inline">Kobra</span>
+      <img
+        src="https://images.ctfassets.net/toxox86i0ilk/2vq3YtIZopT8UPfaEvzp9g/1bba1b1929fca469aaf554b6a3216310/GreenIconBlackText.svg"
+        alt="Kobra logo"
+        style={{
+          maxHeight: '2rem',
+          marginRight: '1rem',
+          backgroundColor: 'white',
+          padding: '4px',
+          borderRadius: '3px',
+        }}
+      />
       <span className="text-gray-600 font-normal hidden md:inline">
         Documentation
       </span>