Louisa add blocks

src/pages/blocks/accordion/index.md

@@ -5,20 +5,34 @@ description: Learn how to use the Accordion block to create collapsible content
 
 # Accordion Block
 
-The Accordion Block allows you to create collapsible content sections, making it easier to organize and present large amounts of information without overwhelming users. Accordion items can be expanded or collapsed individually, providing a clean and organized way to display content.
+Create collapsible content sections to organize information. Each accordion item can be expanded or collapsed individually.
 
-## Available Slots
+## Syntax
 
-Each `<AccordionItem>` can use the following slots:
+```markdown
+<AccordionItem header="Section heading">
 
-- `heading` (required) - The title/header of the accordion item
-- `text` (optional) - Body text content
-- `table` (optional) - Table data
-- `code` (optional) - Code blocks
+Content goes here.
+
+</AccordionItem>
+```
+
+## Parameters
+
+- **header**: Title/header of the accordion item (required)
+- **slots**: Content structure
+  - `"heading, text"`: Basic text content
+  - `"heading, text, table"`: Include tables
+  - `"heading, text, code"`: Include code blocks
 
 ## Variants
 
-There are 2 different variants based on complexity:
+- [Basic Accordion](accordion-basic.md) - Simple collapsible text sections
+- [Accordion with Table and Code](accordion-with-table-and-code.md) - Complex content with tables and code
+
+## Best Practices
 
-- The [basic accordion](accordion-basic.md) variant for simple collapsible text sections, ideal for FAQs or simple content.
-- The [accordion with table and code](accordion-with-table-and-code.md) variant for complex content including tables and code blocks, ideal for API documentation or detailed technical content.
+- Use clear, descriptive headings
+- Keep individual sections focused
+- Group related information together
+- Place most important content in first item

src/pages/blocks/announcement/index.md

@@ -5,27 +5,38 @@ description: Display important announcements and notices to your users with the
 
 # Announcement Block
 
+Display important notices, updates, or calls-to-action at the top of your pages.
+
 <InlineAlert variant="info" slots="text" />
 
 Note: The Announcement block replaces the Teaser block that was previously used in Gatsby.
 
-The Announcement Block allows you to display important notices, updates, or calls-to-action to your users. It can be customized with different variants, background colors, and positioning options.
+## Syntax
+
+```markdown
+<Announcement slots="heading, text, button" />
+```
 
-## Available Slots
+## Parameters
 
-- `heading` (optional) - The title of the announcement
-- `text` (optional) - The descriptive content
-- `button` (optional) - Call-to-action link
+- **slots**: Content structure
+  - `"heading, text, button"`: Full announcement with all elements
+  - `"button"`: Button-only announcement
 
-## Available Options
+- **variant**: Style variant
+  - `"primary"`: Bold, prominent (default)
+  - `"secondary"`: Subtle
 
-- **Variants:** `primary` (bold, prominent) or `secondary` (subtle)
-- **Background Colors:** `background-color-gray`, `background-color-white`
-- **Position:** `center` (for button-only announcements)
+- **position**: `"center"` for centered button-only announcements
 
 ## Variants
 
-There are 2 main usage patterns:
+- [Announcement with Heading](announcement-with-heading.md) - Full announcement with title and description
+- [Button-only Announcement](announcement-button-only.md) - Simple call-to-action button
+
+## Best Practices
 
-- The [announcement with heading](announcement-with-heading.md) variant for full announcements with title, description, and action button.
-- The [button-only announcement](announcement-button-only.md) variant for simple, centered call-to-action buttons.
+- Use for important site-wide notices
+- Keep text concise and actionable
+- Limit to one announcement per page
+- Use primary variant for critical updates

src/pages/blocks/code/code-basic.md

@@ -0,0 +1,52 @@
+---
+title: Basic Code Block
+description: Simple examples of basic code blocks without special features.
+---
+
+# Basic Code Block
+
+Simple code blocks for displaying code snippets without advanced features like line highlighting or offsets.
+
+## Syntax
+
+Use triple backticks with a language identifier:
+
+````
+```javascript
+const message = "Hello World";
+```
+````
+
+## Examples
+
+### API Request Example
+
+```bash
+curl -i -X POST 'https://api.example.com/graphql' \
+    -H 'Content-Type: application/json' \
+    -H 'Authorization: Bearer [access_token]' \
+    -d '{"query": "{ users { id name } }"}'
+```
+
+### Command Examples
+
+```bash
+npm install
+npm start
+```
+
+### JavaScript Example
+
+```javascript
+function greet(name) {
+    return `Hello, ${name}!`;
+}
+
+console.log(greet("World"));
+```
+
+## Best Practices
+
+- Always specify a language for syntax highlighting
+- Use for straightforward code examples
+- Keep code blocks concise and focused

src/pages/blocks/codeblock/code-highlighted-line.md → src/pages/blocks/code/code-highlighted-line.md

@@ -11,10 +11,10 @@ Highlight specific lines in code blocks to draw attention to important code sect
 
 Use `data-line` and `data-line-offset` attributes after the language identifier:
 
-```markdown
+````
 ```console data-line="1-2, 5, 9-20" data-line-offset="3"
 ```
-```
+````
 
 ## Parameters
 
@@ -23,25 +23,21 @@ Use `data-line` and `data-line-offset` attributes after the language identifier:
 
 ## Example
 
-```console data-line="1-2, 5, 9-20" data-line-offset="3"
-curl -i -X POST 'https://graffias.adobe.io/graffias/graphql' 
-    -H 'Accept-Encoding: gzip, deflate, br' 
-    -H 'Content-Type: application/json' 
-    -H 'Accept: application/json' 
-    -H 'Connection: keep-alive' 
-    -H 'x-gw-ims-org-id: [OrgId]@AdobeOrg' 
-    -H 'x-gw-ims-user-id: [UserId]@techacct.adobe.com' -H 'x-api-key: [clientId]' 
-    -H 'Authorization: Bearer [access token]' 
-    -d @introspection.json --compressed
+```javascript data-line="2-3, 6" data-line-offset="1"
+function processData(input) {
+    const cleaned = input.trim();        // Highlighted
+    const parsed = JSON.parse(cleaned);  // Highlighted
+
+    if (parsed.valid) {
+        return parsed.data;  // Highlighted
+    }
+
+    return null;
+}
 ```
 
 ## Best Practices
 
 - Highlight only the most important lines to avoid overwhelming the reader
 - Use line ranges (e.g., `1-5`) for consecutive lines
 - Set `data-line-offset` when showing excerpts from larger files
-
-## Related
-
-- [Code Block](/blocks/codeblock/code-block.md) - Basic code block component
-- [Code Examples](/blocks/codeblock/code.md) - More code block features

src/pages/blocks/code/code-in-list.md

@@ -0,0 +1,68 @@
+---
+title: Code in Lists
+description: Examples of code blocks embedded within list items and ordered/unordered lists.
+---
+
+# Code in Lists
+
+Embed code blocks within ordered or unordered lists to create step-by-step tutorials, guides, or instructions with code examples.
+
+## Syntax
+
+Indent code blocks with 4 spaces (or 1 tab) to nest them within list items:
+
+````
+1. First step description
+
+    ```bash
+    command here
+    ```
+
+2. Second step description
+````
+
+## Example
+
+## Installation Steps
+
+Follow these steps to set up your development environment:
+
+1. Install Node.js and npm on your system
+
+    ```bash
+    node --version
+    npm --version
+    ```
+
+1. Clone the repository to your local machine
+
+    ```bash
+    git clone https://github.com/example/project.git
+    cd project
+    ```
+
+1. Install project dependencies
+
+    ```bash
+    npm install
+    ```
+
+1. Configure environment variables by creating a `.env` file
+
+    ```bash
+    cp .env.example .env
+    ```
+
+1. Start the development server
+
+    ```bash
+    npm run dev
+    ```
+
+1. Open your browser and navigate to `http://localhost:3000`
+
+## Best Practices
+
+- Indent code blocks with 4 spaces or 1 tab to nest within list items
+- Use for step-by-step tutorials and installation guides
+- Add explanatory text before and after code blocks for context

src/pages/blocks/code/code-in-table.md

@@ -0,0 +1,38 @@
+---
+title: Code in Tables
+description: Examples of inline code and code formatting within table cells.
+---
+
+# Code in Tables
+
+Use inline code formatting within tables to document API parameters, properties, methods, and types in a structured format.
+
+## Syntax
+
+Use backticks for inline code in table cells:
+
+````
+| Name | Type | Description |
+| --- | --- | --- |
+| `propertyName` | `string` | Description text |
+````
+
+## Example
+
+#### UserOptions : `object`
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `id` | `string` | Unique identifier for the user |
+| `username` | `string` | User's display name |
+| `email` | `string` | User's email address |
+| `createdAt` | `Date` | Timestamp when the user was created |
+| `isActive` | `boolean` | Whether the user account is active |
+
+## Best Practices
+
+- Use inline code for property names, types, and values
+- Keep table formatting clean and aligned
+- Ideal for API reference documentation

src/pages/blocks/code/code-overload.md

@@ -0,0 +1,64 @@
+---
+title: Code Overload Example
+description: Complex code examples demonstrating multiple features like line highlighting, offsets, and disabling line numbers.
+---
+
+# Code Overload Example
+
+Advanced examples showcasing the combination of multiple code block features for complex documentation scenarios.
+
+## Combined Features
+
+You can combine multiple attributes with hyphens:
+
+````
+```javascript-disableLineNumbers-data-line="2-4"-data-line-offset="1"
+code here
+```
+````
+
+Features you can combine:
+- Line highlighting (`data-line`)
+- Line offset (`data-line-offset`)
+- Disable line numbers (`disableLineNumbers`)
+
+## Examples
+
+### Example 1: Highlighting with No Line Numbers
+
+```javascript-disableLineNumbers-data-line="2-3"
+function calculateTotal(items) {
+  const total = items.reduce((sum, item) => sum + item.price, 0);  // Highlighted
+  const tax = total * 0.08;  // Highlighted
+  return total + tax;
+}
+```
+
+### Example 2: Line Offset with Highlighting
+
+```python-data-line="2-3"-data-line-offset="10"
+def process_data(data):
+    cleaned = data.strip()      # Line 11 - Highlighted
+    parsed = json.loads(cleaned)  # Line 12 - Highlighted
+    return parsed
+```
+
+### Example 3: Multiple Features Combined
+
+```bash-disableLineNumbers-data-line="3,5"
+# Install dependencies
+npm install
+
+# Run tests
+npm test
+
+# Build for production
+npm run build
+```
+
+## Best Practices
+
+- Use combined features sparingly - only when necessary
+- Keep attribute combinations logical and purposeful
+- Test complex code blocks to ensure they render correctly
+- Consider if simpler alternatives would be more readable