(#1233)(#1234)(#1237) Bump astro and docs to 2.1.0

[st3phhays]

Description Of Changes

• Adds validation to DynamicCodeBlocks
• Fixes an issue where characters are not escaped before being replaced in DynamicCodeBlocks
• Adds the ability to hide/disable tabs in the Tab component

Motivation and Context

These are fixes and features that can be used on the docs, but also other Astro websites. These are things that have found as we started using the components more and more.

Testing

• I have previewed these changes using the Docker Container or another method before submitting this pull request.

DynamicCodeBlock Testing

1. Pull down this PR.
2. Open the src/content/docs/en-us/why.mdx file.
3. Add the following code to the page, right under the last import statement at the top of the page:

   import DynamicCodeBlockInput from '@choco-astro/components/dynamicCodeBlock/DynamicCodeBlockInput.astro';
   import DynamicCodeBlock from '@choco-astro/components/dynamicCodeBlock/DynamicCodeBlock.astro';
   import DynamicCodeBlockValidation from '@choco-astro/components/dynamicCodeBlock/DynamicCodeBlockValidation.astro';
   
   <DynamicCodeBlockValidation title="New" message="This is a validation message." inputNames={['codeBlockReplace2', 'codeBlockReplace3']} />
   
   <DynamicCodeBlockInput name="codeBlockReplace2" defaultValue="DEFAULT VALUE 2" label="Your download string 2" />
   <DynamicCodeBlockInput name="codeBlockReplace3" defaultValue="DEFAULT VALUE 3" label="Your download string 3" />
   
   <DynamicCodeBlock language="powershell">
   {`
     Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('codeBlockReplace2'))
     Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('codeBlockReplace3'))
   `}
   </DynamicCodeBlock>
   

4. Stop and restart the project. (after stopping the site, run yarn dev to start it again). This will ensure the right css classes get pulled in to show validation.
5. Navigate to the why page you modified in the browser. Notice that the inputs are red, and there is a validation error.
6. Play with the inputs. Notice how both need to be filled in before the validation errors are removed. If removing content from one of them, the validation error gets added back.
7. Test entering in a value with a < character. Reload the page after entering the < character in an input, and notice it still has quotes around it like it should (previously this would remove the last quote).
8. On the <DynamicCodeBlockValidation> component, experiment with updating the message and the message data fields that are passed in and see how the content updates.
9. On the <DynamicCodeBlockValidation> component, remove the title and message attributes completely, and notice how it defaults to a generic validation error message.

Tab Testing

1. Pull down this PR.
2. Open the src/content/docs/en-us/faq.mdx file.
3. Add the following code to the page, right under the

   import TabsPane from '@choco-astro/components/tabs/TabsPane.astro';
   import TabsPaneContainer from '@choco-astro/components/tabs/TabsPaneContainer.astro';
   import TabsTabContainer from '@choco-astro/components/tabs/TabsTabContainer.astro';
   
   export const tabs1 = [
       { id: 'scenario-one', title: 'Scenario 1', isActive: true },
       { id: 'scenario-two', title: 'Scenario 2' },
       { id: 'scenario-three', title: 'Scenario 3' },
       { id: 'scenario-four', title: 'Scenario 4 Disabled', isDisabled: true },
       { id: 'scenario-five', title: 'Scenario 5 Hidden', isHidden: true }
   ];
   
   <TabsTabContainer content={tabs1} />
   <TabsPaneContainer>
       <TabsPane content={tabs1[0]}>
           Scenario 1 Content
       </TabsPane>
       <TabsPane content={tabs1[1]}>
           Scenario 2 Content
       </TabsPane>
      <TabsPane content={tabs1[2]}>
           Scenario 3 Content
       </TabsPane>
       <TabsPane content={tabs1[3]}>
           Scenario 4 Disabled Content
       </TabsPane>
       <TabsPane content={tabs1[4]}>
           Scenario 5 Hidden Content
       </TabsPane>
   </TabsPaneContainer>
   

4. Stop and restart the project. (after stopping the site, run yarn dev to start it again). This will ensure the right css classes get pulled in to show validation.
5. Navigate to the faq page you modified in the browser. There is a new tab component at the top of the page. One tab should look disabled, and it is unable to be clicked on. There should be a total of only 4 tabs shown, as we passed in the isHidden attribute to the 5th tab, even though the source code is in the file, it is not shown in the browser at all.

Change Types Made

• Minor documentation fix (typos etc.).
• Major documentation change (refactoring, reformatting or adding documentation to existing page).
• New documentation page added.
• The change I have made should have a video added, and I have raised an issue for this.
  • Issue #

Change Checklist

• Requires a change to menu structure (top or left-hand side)/
• Menu structure has been updated
• Images added to the img repository?
  • PR -

Related Issue

• Add ability to hide tabs from a tabbed interface #1233
• Dynamic Code Block Component feature requests #1234
• The less than character (<) breaks DynamicCodeBlockInput when used as a special character if navigating away from a page where it is used #1237
• ENGTASKS-5110

[st3phhays]

This is in draft because it requires new choco-theme packages to be released. The changes here can still be tested however.