Migrate preview and docs packages from Eleventy to Astro (#2694)

Co-authored-by: Bartek <xbartoszdobija@gmail.com>

preview/pages/offcanvas.astro

@@ -0,0 +1,59 @@
+---
+// Port of preview/pages/offcanvas.html (layout: default)
+import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
+
+const directions = ['start', 'end', 'top', 'bottom'];
+
+// Liquid `capitalize` filter.
+const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+---
+
+<DefaultLayout title="Offcanvas" pageHeader="Offcanvas" pageMenu="base.offcanvas">
+	<div class="card">
+		<div class="card-body">
+			{
+				directions.map((direction) => (
+					<a
+						class="btn"
+						data-bs-toggle="offcanvas"
+						href={`#offcanvas${capitalize(direction)}`}
+						role="button"
+						aria-controls={`offcanvas${capitalize(direction)}`}
+					>
+						Toggle {direction} offcanvas
+					</a>
+				))
+			}
+		</div>
+	</div>
+
+	{
+		directions.map((direction) => (
+			<div
+				class={`offcanvas offcanvas-${direction}`}
+				tabindex="-1"
+				id={`offcanvas${capitalize(direction)}`}
+				aria-labelledby={`offcanvas${capitalize(direction)}Label`}
+			>
+				<div class="offcanvas-header">
+					<h2 class="offcanvas-title" id={`offcanvas${capitalize(direction)}Label`}>
+						{capitalize(direction)} offcanvas
+					</h2>
+					<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" />
+				</div>
+				<div class="offcanvas-body">
+					<div>
+						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat
+						illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde.
+						Aut!
+					</div>
+					<div class="mt-3">
+						<button class="btn btn-primary" type="button" data-bs-dismiss="offcanvas">
+							Close offcanvas
+						</button>
+					</div>
+				</div>
+			</div>
+		))
+	}
+</DefaultLayout>