Docs Writer edit (#20)

* Improve file metadescriptions

* Overview doc: Start copyedit

* Sentence case headings for more modern feel

* More capitalization changes, minor copyedits

* Simplify Overview page structure

* Install: Copyedit and formatting improvements

* Copyedit "your first pipeline"

* Core concepts: Dramatically simplify structure

* Copyedit app studio doc

* Simplify and copyedit components, pipelines persistence

* Copyedit Hugging Face doc

* Fix typo

Co-authored-by: Camiel vs <[email protected]>

---------

Co-authored-by: Camiel vs <[email protected]>

Author: austin-schaefer

docs/component-development/adding-components.mdx

@@ -1,7 +1,7 @@
 ---
 id: adding-components
 title: Adding Components to Pipelines
-description: How to add components to your pipeline workspace
+description: Discover methods to add components to TangleML pipelines including file upload, URL import, drag-and-drop, and the standard library.
 ---
 
 import { ImageAnnotation } from "@site/src/components/ImageAnnotation";
@@ -11,15 +11,10 @@ import { ImageAnnotation } from "@site/src/components/ImageAnnotation";
 Components are the building blocks of your ML pipelines in TangleML. This guide covers the different methods to add components to your pipeline workspace.
 
 
-### 1. Upload Component File
+### Upload component file
 
 Upload a YAML component file directly from your computer to add it to your user components library.
 
-:::tip
-Uploaded components are immediately available in your User Components library and can be reused across different pipelines.
-:::
-
-
 <ImageAnnotation src={require("./assets/AddingComponents_File.png").default} alt="Import from URL screenshot">
 
 1. Click on the **File** option in the component panel
@@ -29,81 +24,71 @@ Uploaded components are immediately available in your User Components library an
 </ImageAnnotation>
 
 
-### 2. Import from URL
+### Import from URL
 
-Import components from publicly accessible URLs, particularly useful for GitHub-hosted components.
-
-:::tip
-This method works great with raw GitHub URLs, allowing you to import components directly from repositories.
-:::
+Import components from publicly accessible URLs.
 
 <ImageAnnotation src={require("./assets/AddingComponents_URL.png").default} alt="Import from URL screenshot">
 
 
-1. Select the **URL** option
-2. Enter the publicly accessible URL to the YAML file
-3. The browser will automatically download and validate the component
-4. If valid, it will be added to your User Components library
+1. Select the **URL** option.
+2. Enter the publicly accessible URL to the YAML file.
+3. The browser will automatically download and validate the component.
+4. If valid, it will be added to your user components library.
 
 </ImageAnnotation>
 
+:::tip
+This method works great with raw GitHub URLs, allowing you to import components directly from repositories.
+:::
 
+### In-app component editor
 
-### 3. In-App Component Editor
-
-Create and edit components directly in your browser using the built-in editor.
-
-:::info
-Learn more about the [In-App Component Editor](/docs/component-development/in-app-editor).
-:::
+Create and edit Components directly in your browser using the [In-App Component Editor](/docs/component-development/in-app-editor):
 
 <ImageAnnotation src={require("./assets/AddingComponents_New.png").default} alt="In-App Component Editor screenshot">
 
-1. Click on the **New** button in the "Add component" dialog
+1. Click on the **New** button in the **Add component** dialog
 2. Select the component template you want to use
 3. The editor will open and you can start editing the component
-4. Once you're done, click the **Save** button to save the component. The component will be added to your User Components library.
+4. Once you're done, click the **Save** button to save the component. The component will be added to your user components library.
 
 </ImageAnnotation>
 
 
 
-### 4. Drag and Drop YAML Files
+### Drag and drop YAML files
 
 Simply drag a YAML component file from your file system and drop it directly onto the canvas.
 
 <video src={require("./assets/AddingComponents_Drop.mov").default} autoPlay loop muted playsInline style={{ width: "100%" }}>
   Your browser does not support the video tag.
 </video>
 
-### 5. Import from Other Pipelines
+### Import from other pipelines
 
-Reuse components from your existing pipelines by importing them into your User Components library.
+Reuse components from your existing pipelines by importing them into your user components library.
 
 <video src={require("./assets/AddingComponents_AddFromPipeline.mov").default} autoPlay loop muted playsInline style={{ width: "100%" }}>
   Your browser does not support the video tag.
 </video>
 
-### 6. Using Standard Library Components
+### Using standard library components
 
-Access components from the Standard Library for tasks shared within the TangleML instance.
-
-:::tip
-All components in the Standard Library are well documented with implementation details you can inspect by clicking the component info dialog and checking the **Implementation** tab.
-:::
+Access components from the standard library for tasks shared within the TangleML instance:
 
-<ImageAnnotation src={require("./assets/AddingComponents_StandardLibrary.png").default} alt="Import from Standard Library screenshot">
+<ImageAnnotation src={require("./assets/AddingComponents_StandardLibrary.png").default} alt="Import from standard library screenshot">
 
-1. Expand the **Standard Library** folder in the left panel, Components section.
+1. Expand the **Standard Library** folder in the left panel, **Components** section.
 2. Select the component you want to add.
 3. Drag the component onto the canvas.
 
-</ImageAnnotation>
+:::tip
+Components in the standard library are documented with implementation details you can inspect by clicking the component info dialog and checking the **Implementation** tab.
+:::
 
-### 7. Shared Components Library
+</ImageAnnotation>
 
-Access components from the Shared Components Library for tasks shared within the TangleML instance.
+### Shared components library
 
-:::info
-Learn more about the [Shared Components Library](/docs/component-development/published-components-library).
-:::
+Access components from the [shared components library](/docs/component-development/published-components-library) for tasks shared within the TangleML instance.

docs/component-development/assets/AddingComponents_StandardLibrary.png

@@ -1,6 +1,6 @@
 ---
 title: Creating Components
-description: A comprehensive guide to building pipeline components using different programming languages
+description: Complete guide to create TangleML components using Python, JavaScript, or any containerized language with YAML specifications.
 ---
 
 import Tabs from "@theme/Tabs";
@@ -24,7 +24,7 @@ A component consists of two essential parts:
 Components can be written in any language that runs in a container. The key is proper containerization and defining clear input/output interfaces.
 :::
 
-## Step 1. Designing a Component
+## Step 1. Designing a component
 
 When TangleML executes a component, it starts a container image in a Kubernetes Pod. 
 Your component’s inputs are passed in as command-line arguments.
@@ -53,9 +53,9 @@ It is recommended that you use this pattern only when the data must be put into
 If your component is built with Python, libraries such as [argparse](https://docs.python.org/3/library/argparse.html) and [absl.flags](https://abseil.io/docs/python/guides/flags) make it easier to read your component's inputs.
 - Your component's code can be implemented in any language, as long as it can run in a container image.
 
-### Component Design Principles
+### Component design principles
 
-So as a summary, when designing components, remember these core principles:
+So as a summary, when designing Components, remember these core principles:
 
 1. **Composability** - Design your components with composability in mind:
    - Think about upstream and downstream components
@@ -79,7 +79,7 @@ So as a summary, when designing components, remember these core principles:
    - Your code must accept arguments from the command line.
    - Use standard argument parsing libraries for your language.
 
-### Example Component Design
+### Example component design
 
 TangleML supports any language that can run in a container. This example demonstrates how to create a component in multiple languages.
 This program reads from an input file and writes lines which pass a threshold to an output file.
@@ -348,9 +348,9 @@ You can skip building the container image eveyr time you make a code change by u
     necessary, revise your application and Dockerfile until your application
     works as expected in the container.
 
-### Local Testing
+### Local testing
 
-Test your component locally before deploying:
+Test your Component locally before deploying:
 
 ```bash
 docker run -v $(pwd)/test-data:/data \
@@ -360,9 +360,9 @@ docker run -v $(pwd)/test-data:/data \
   --threshold 0.5
 ```
 
-## Step 3: Define Component Specification
+## Step 3: Define Component specification
 
-### Define Component Metadata
+### Define Component metadata
 
 Start your component specification by defining basic metadata. This helps users understand what your component does.
 
@@ -382,13 +382,13 @@ Use clear, descriptive names that indicate the component's purpose. Include vers
 
 ### Define Component Inputs
 
-Inputs are the data and parameters your component needs to function. Each input must specify its name and can include type, description, and default values.
+Inputs are the data and parameters your Component needs to function. Each input must specify its name and can include type, description, and default values.
 
 :::info
 [Read more about the Full InputSpec schema](/docs/reference/schema#inputspec).
 :::
 
-#### Basic Input Definition
+#### Basic Input definition
 
 ```yaml
 inputs:
@@ -397,7 +397,7 @@ inputs:
     type: Data
 ```
 
-#### Input with Default Value
+#### Input with default value
 
 ```yaml
 inputs:
@@ -424,9 +424,9 @@ Large datasets should always be passed as [file paths](/docs/reference/schema#in
 
 ### Define Component Outputs
 
-Outputs define what your component produces. Unlike inputs, outputs don't have default values, but they must specify where the component will write its results.
+Outputs define what your Component produces. Unlike inputs, outputs don't have default values, but they must specify where the component will write its results.
 
-#### Basic Output Definition
+#### Basic Output definition
 
 ```yaml
 outputs:
@@ -435,7 +435,7 @@ outputs:
     type: Data
 ```
 
-#### Multiple Outputs Example
+#### Multiple Outputs example
 
 ```yaml
 outputs:
@@ -456,15 +456,15 @@ outputs:
     type: Data
 ```
 
-### Define Container Implementation
+### Define Container implementation
 
-The implementation section specifies how to execute your component. It includes the container image and the command to run.
+The implementation section specifies how to execute your Component. It includes the container image and the command to run.
 
 :::info
 [Read more about the Full ContainerImplementation schema](/docs/reference/schema#containerspec).
 :::
 
-#### Basic Container Implementation
+#### Basic Container implementation
 
 ```yaml
 implementation:
@@ -473,7 +473,7 @@ implementation:
     command: ["python", "/app/process.py"]
 ```
 
-#### Container with Input/Output Placeholders
+#### Container with Input/Output placeholders
 
 The command section uses placeholders that are replaced at runtime with actual values:
 
@@ -500,7 +500,7 @@ implementation:
       ]
 ```
 
-#### Understanding Placeholders
+#### Understanding placeholders
 
 There are three types of placeholders you can use in the command:
 
@@ -540,7 +540,7 @@ There are three types of placeholders you can use in the command:
 The placeholder names must exactly match the input/output names defined in your component's interface.
 :::
 
-#### Container with Arguments
+#### Container with arguments
 
 Sometimes you need to separate the command from its arguments:
 
@@ -560,9 +560,9 @@ implementation:
       ]
 ```
 
-#### Container with Environment Variables
+#### Container with environment variables
 
-You can also pass inputs through environment variables:
+You can also pass Inputs through environment variables:
 
 ```yaml
 implementation:
@@ -581,9 +581,9 @@ implementation:
 ```
 
 
-## Component Specification
+## Component specification
 
-Regardless of the implementation language, all components share the same YAML specification format.
+Regardless of the implementation language, all Components share the same YAML specification format.
 
 :::info
 [Read more about the Full ComponentSpec schema](/docs/reference/schema).

docs/component-development/creating-components-generic.mdx

@@ -1,6 +1,7 @@
 ---
 id: creating-components
 title: Lightweight Python Components
+description: Create TangleML Python components without building Docker images using the Oasis CLI tool and inline code generation.
 ---
 
 import { ImageAnnotation } from "@site/src/components/ImageAnnotation";
@@ -11,12 +12,12 @@ For Python developers, TangleML offers a special feature - **lightweight compone
 Learn more about the Oasis CLI tool in the [Oasis CLI Manual](/docs/component-development/oasis-cli-manual) section.
 :::
 
-## Lightweight Python Components
+## Lightweight Python components
 
 Instead of [the conventional approach](/docs/component-development/creating-components-generic) where you write code, containerize it, publish to a registry, and manually create YAML configuration files, Oasis CLI tool automates this entire process. 
 You simply write your Python code and run a single command - the system automatically generates the YAML specification running code as a command, eliminating the need to manage Docker images or registries. 
 
-This approach called "Lightweight Python Components" and it dramatically reduces the time from code to component, allowing you to iterate faster and focus on the code logic rather than infrastructure.
+This approach called "Lightweight Python components" and it dramatically reduces the time from code to component, allowing you to iterate faster and focus on the code logic rather than infrastructure.
 
 
 ```yaml
@@ -32,15 +33,15 @@ implementation:
         # Generated wrapper code handles I/O
 ```
 
-## Tutorial: Creating a Lightweight Python Component
+## Tutorial: Creating a lightweight Python component
 
 This guide walks you through creating a TangleML component that performs regex-based text replacement. The component reads an input text file, replaces all substrings matching a given regex pattern, and writes the result to an output file.
 
 :::info
-To learn more about Components in TangleML, check the [Component Architecture](/docs/core-concepts/what-are-components) page.
+To learn more about components in TangleML, check the [component architecture](/docs/core-concepts/what-are-components) page.
 :::
 
-### Step 1: Create the Component Function
+### Step 1: Create the component function
 
 :::info
 You may use a [quick start](/docs/component-development/oasis-cli-manual#quick-start) from the Oasis CLI Manual.
@@ -144,7 +145,7 @@ This notation is used by the Oasis CLI tool to generate the proper component spe
 
 <img src={require("./assets/CreatingComponent_Details.png").default} alt="Metadata" style={{width: "50%", borderRadius: "6px"}} />
 
-### Step 2: Generate the Component Specification
+### Step 2: Generate the component specification
 
 Run the command:
 
@@ -382,7 +383,7 @@ Notice, that Oasis CLI tool generated additional code to handle component inputs
 ```
 
 
-### Step 3: Running the Component
+### Step 3: Running the component
 
 To use the component, drop it into your pipeline and configure the inputs. Click "Submit Run" to execute the pipeline.
 
@@ -518,7 +519,7 @@ def some_func(
     ...
 ```
 
-### Input and Output Types
+### Input and Output types
 
 While low-level TangleML does not enforce any types, the Oasis CLI generator (`components.create_component_from_func`) provides support for six basic Python types: