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

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

preview/pages/flags.astro

@@ -0,0 +1,35 @@
+---
+// Port of preview/pages/flags.html (layout: default)
+import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
+import flags from '@data/flags.json';
+
+// Liquid: {% for icon in (0..20) %}<div></div>{% endfor %} — 21 filler divs
+const fillers = Array.from({ length: 21 });
+---
+
+<DefaultLayout title="Flags" pageHeader="Flags" pageMenu="addons.flags">
+	<div class="card">
+		<div class="card-header">
+			<div class="card-title">List of all flags</div>
+		</div>
+		<div class="card-body p-0">
+			<div class="demo-icons-list-wrap">
+				<div class="demo-icons-list">
+					{
+						flags.map((country) => (
+							<span
+								class="demo-icons-list-item"
+								title={country.name}
+								data-bs-toggle="tooltip"
+								data-bs-placement="top"
+							>
+								<span class={`flag flag-country-${country.flag.toLowerCase()}`} />
+							</span>
+						))
+					}
+					{fillers.map(() => <div></div>)}
+				</div>
+			</div>
+		</div>
+	</div>
+</DefaultLayout>