Restructure shared Astro sources and import aliases (#2737)

shared/ui/Ribbon.astro

@@ -0,0 +1,28 @@
+---
+import Icon from './Icon.astro';
+
+interface Props {
+	text?: string;
+	top?: boolean;
+	left?: boolean;
+	bottom?: boolean;
+	bookmark?: boolean;
+	color?: string;
+	filled?: boolean;
+}
+
+const { text, top, left, bottom, bookmark, color, filled } = Astro.props;
+
+const classes = [
+	'ribbon',
+	top && 'ribbon-top',
+	left && 'ribbon-start',
+	bottom && 'ribbon-bottom',
+	bookmark && 'ribbon-bookmark',
+	color && `bg-${color}`,
+]
+---
+
+<div class:list={classes}>
+	{text ? text : <Icon name="star" type={filled ? 'filled' : 'outline'} />}
+</div>