Accessible Astro Dashboard

Overview:

The Accessible Astro Dashboard is a theme built upon the Astro Static Site Builder. It includes various components and features designed to make the dashboard accessible and user-friendly. The theme provides example pages, admin pages, utility classes, and components from the Accessible Astro Components npm package. It also incorporates the Accessible Astro Icon package for different use cases.

Features:

• Login page: Includes a login.astro page with an example login using local storage and a separate LoginLayout.astro layout. It also has an example login data and a warning notification for incorrect credentials.
• Dashboard example: Contains a dashboard example in the index.astro page using the DefaultLayout.astro layout.
• Admin pages: Provides examples of admin pages such as media.astro, messages.astro, products.astro, settings.astro, and users.astro.
• Media component: Includes a Media.astro component for images, used on the media.astro page.
• Pagination component: Contains a Pagination.astro component for paginating results, used on the media.astro page.
• Dashboard Widget component: Serves as an example for the dashboard on index.astro.
• Empty State component: Displays an EmptyState.astro component on pages that don’t have any data yet.
• Login Form component: Offers a LoginForm.astro component with a basic accessible login form and form controls.
• Skip Links component: Provides a SkipLinks.astro component to skip to either the main menu or the main content.
• Navigation component: Includes a Navigation.astro component with keyboard accessible navigation (arrow keys, escape key). It has a comprehensive sidebar navigation on desktop with the option to expand or collapse. The users menu width preference is stored in local storage for preservation during page reloads. The navigation automatically switches to an accessible mobile navigation for viewport widths below the medium breakpoint.
• Responsive Toggle component: Contains a ResponsiveToggle.astro component with an accessible responsive toggle button for the mobile navigation.
• Dark Mode component: Provides a DarkMode.astro component toggle with an accessible button that saves the user’s preference in local storage.
• Custom 404 page: Includes a 404.astro page that provides a custom 404 error page that can be adjusted as needed.
• Utilities: The theme incorporates the sr-only utility class for screen reader-only text content and supports the prefers-reduced-motion feature to disable animations for users with this preference.
• Accessible Astro Components package: Comes preinstalled with extra components such as Accordions, Modals, and Notifications.
• Accessible Astro Icon package: Preinstalled package that offers various icons for different use cases.

Installation:

To get started with the Accessible Astro Dashboard theme, follow these steps:

1. Open your project folder.
2. Run the following commands:

// command to install the theme
npm install accessible-astro-dashboard-theme

// command to start the project
npm run start

Summary:

The Accessible Astro Dashboard theme is a powerful tool for building accessible and user-friendly dashboards using the Astro Static Site Builder. With various components, example pages, and utility classes, the theme offers an easy way to create accessible dashboards with features such as login authentication, navigation, media handling, and more. It also includes the Accessible Astro Components package and Accessible Astro Icon package to enhance the functionality and visual appeal of the dashboard.