feat: add pivot component and selector with directive support (#5)

* feat: add pivot component and selector with directive support

- Implemented Pivot component to serve as a container for pivot blocks.
- Created PivotSelector component to manage pivot options and their display.
- Added styling for the pivot components to enhance UI/UX.
- Developed pivot-directive to transform pivot directives in markdown into corresponding HTML elements.
- Integrated local storage and URL query parameters for persistent state management of selected pivot options.

* refactor: remove unused Vite configuration for optimizeDeps

* feat: add MaxAge option to HSTS configuration for enhanced security

* fix: update pivot title and button colors for better visibility

* feat: add chevron icons for navigation and update theme image handling

* fix: improve pivot selector styles and update error handling

* feat: add disabled state to pivot options and improve button styles for better accessibility

* fix: update wording for clarity in first-app documentation

* fix: enhance pivot selector logic to ensure valid option selection and improve error handling

* fix: improve clarity and detail in first-app documentation

* fix: update documentation to use Aside component for notes and improve heading levels for clarity

* fix: enhance pivot selector layout for better responsiveness on smaller screens

Author: IEvangelist

src/frontend/astro.config.mjs

@@ -1,6 +1,7 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 import { sidebarTopics } from './sidebar.topics';
+import { pivotDirective } from './src/directives/pivot-directive.mjs'
 import catppuccin from "@catppuccin/starlight";
 import lunaria from '@lunariajs/starlight';
 import mermaid from 'astro-mermaid';
@@ -14,6 +15,9 @@ import starlightLlmsTxt from 'starlight-llms-txt';
 import starlightScrollToTop from 'starlight-scroll-to-top';
 import starlightSidebarTopics from 'starlight-sidebar-topics';
 
+import mdx from "@astrojs/mdx";
+import remarkDirective from "remark-directive";
+
 // Localization: https://lunaria.dev/
 export const locales = {
 	root: { label: 'English', lang: 'en' },
@@ -232,5 +236,9 @@ export default defineConfig({
 				})
 			],
 		}),
+		mdx({
+			extendMarkdownConfig: true,
+			remarkPlugins: [remarkDirective, pivotDirective],
+		})
 	]
 });

src/frontend/package-lock.json

@@ -48,6 +48,7 @@
     "astro-mermaid": "^1.1.0",
     "astro-tooltips": "^0.6.2",
     "mermaid": "^11.12.1",
+    "remark-directive": "^4.0.0",
     "sharp": "^0.34.4",
     "starlight-contributor-list": "^0.3.0",
     "starlight-giscus": "^0.8.1",