feature-request: dedicated toggle block component

[EiffelFly]

Context

Please raise your implementation overview here before implementing

Right now we are using the regular markdown toggle syntax and then cover custom style on it to implement toggle block. Here is the implementation

<details>
  <summary></summary>
</details>

https://github.com/instill-ai/instill.tech/blob/00830b1be8c2655c01b1c39de509e8a0b502e667/src/styles/docs.css#L158

But this becomes not flexible. We want to build a dedicated toggle block (with component name ToggleBlock) with MDX and refactor all the toggle block in docs to adapt this new MDX component.

You could reference how we build InfoBlock

https://github.com/instill-ai/instill.tech/blob/00830b1be8c2655c01b1c39de509e8a0b502e667/src/components/ui/MdxInfoBlock.tsx#L9

• The toggle interaction may use some react state.
• You don't need to worry about how mdx deal with children. Just treat it like InfoBlock did and mdx will handle the rest.
• The design will align with current design

Current Design

 

[iamnamananand996]

Hi @EiffelFly , the current implementation will look like this

<ToggleBlock>
  <details>
      <summary>**Why do you build VDP?**</summary>

        Modern data stack misses unstructured data processing.

        It is non-trivial to process unstructured data though.
        We used to suffer enough in devising our own deep learning models, putting the models in production, running the day-to-day operation, and endlessly building the peripheral MLOps tools to keep the production AI performance consistent.
        All these happened in-house and were non-scalable.

        There must be a better way, and Versatile Data Pipeline (VDP) is the answer.

        To prevail AI and to make it accessible to everyone, the point is not merely the algorithms (i.e., the AI models) but the infrastructure tooling to connect the value of the algorithms end-to-end with the modern data stack.

        You can find more detailed narrative in our blog article [Why Instill AI exists](/blog/why-instill-ai-exists/?utm_source=documentation&utm_medium=link) and [Missing piece in modern data stack: unstructured data ETL](/blog/unstructured-data-etl/?utm_source=documentation&utm_medium=link).

    </details>

</ToggleBlock>

  import { ReactElement } from "react";

  export type MdxToggleBlockProps = {
    children: ReactElement;
  };

  export const MdxToggleBlock = ({ children }: MdxToggleBlockProps) => {
    return children;
  };

please let me know, if we want to add more features into it.

[iamnamananand996]

@EiffelFly , is the above implementation looks good, shall I create a pull request for the above.

[EiffelFly]

@iamnamananand996 Correct me if I am wrong. I imagine your implementation will be

<InfoBlock className="instill-scoped-info-block">
  <details>
      <summary>**Why do you build VDP?**</summary>
        Modern data stack misses unstructured data processing.
    </details>
</InfoBlock>

Then we can do something with CSS to apply custom style?

article > .instill-scoped-info-block > details {
  padding: 20px 25px;
  background-color: #FAFAFA;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  border-left: 5px solid #5c5c5c;
}

[iamnamananand996]

@EiffelFly, you are correct, I have added params to add styles also now.

[EiffelFly]

close with instill-ai/instill.tech#532