Announcements button row

packages/client/src/components/form/link.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="ffcbddfc" :class="{ inline }">
+	<div class="ffcbddfc" :class="{ inline, naked }">
 		<a v-if="external" class="main _button" :href="to" target="_blank">
 			<span class="icon"><slot name="icon"></slot></span>
 			<span class="text"><slot></slot></span>
@@ -34,6 +34,7 @@ const props = defineProps<{
 	external?: boolean;
 	behavior?: null | "window" | "browser" | "modalWindow";
 	inline?: boolean;
+	naked?: boolean;
 }>();
 </script>
 
@@ -54,6 +55,7 @@ const props = defineProps<{
 		background: var(--buttonBg);
 		border-radius: 6px;
 		font-size: 0.9em;
+		transition: background .2s;
 
 		&:hover {
 			text-decoration: none;
@@ -97,5 +99,16 @@ const props = defineProps<{
 			}
 		}
 	}
+
+	&.naked .main {
+		&:not(:hover) {
+			background: none;
+		}
+		color: var(--accent);
+		font-weight: 600;
+		.icon {
+			color: inherit;
+		}
+	}
 }
 </style>

packages/client/src/style.scss

@@ -666,6 +666,11 @@ hr {
 	}
 }
 
+._flip {
+	display: inline-block;
+	transform: scaleX(-1);
+}
+
 ._anime_bounce {
 	will-change: transform;
   animation: bounce ease 0.7s;

packages/client/src/ui/visitor/kanban.vue

@@ -83,6 +83,18 @@
 					<p class="_caption">
 						{{ i18n.ts.poweredBy }}
 					</p>
+
+					<FormSection v-if="announcement">
+						<FormLink :to="'/announcements'"
+							naked
+							><template #icon
+								><i
+									class="ph-megaphone-simple ph-bold ph-lg _flip"
+								></i></template
+							>{{ announcement.title }}:
+							<span style="opacity: 0.8; font-weight: 400;">{{ announcement.text }}</span>
+						</FormLink>
+					</FormSection>
 	
 					<FormSection>
 						<div class="_formLinksGrid">
@@ -123,7 +135,7 @@
 						</div>
 					</FormSection>
 				</footer>
-				<FormSection class="announcements">
+				<!-- <FormSection class="announcements">
 					<h4>{{ i18n.ts.announcements }}</h4>
 					<MkPagination
 						v-slot="{ items }"
@@ -148,7 +160,7 @@
 							</div>
 						</article>
 					</MkPagination>
-				</FormSection>
+				</FormSection> -->
 			</div>
 		</header>
 	</div>
@@ -183,10 +195,6 @@ defineProps<{
 	poweredBy?: boolean,
 }>()
 
-const announcements = {
-	endpoint: "announcements",
-	limit: 10,
-}
 let meta = $ref<DetailedInstanceMetadata>();
 
 let isLong = $ref(false);
@@ -197,6 +205,14 @@ os.api("meta", { detail: true }).then((res) => {
 	isLong = meta.description && (meta.description.length > 500);
 });
 
+let announcement = $ref();
+os.api("announcements", {
+	limit: 1
+}).then((res) => {
+	announcement = res[0];
+});
+
+
 function signin() {
 	os.popup(
 		XSigninDialog,