77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="page">
|
||
|
|
<section class="card hero glass">
|
||
|
|
<div>
|
||
|
|
<p class="eyebrow">Atlas</p>
|
||
|
|
<h1>Apps</h1>
|
||
|
|
<p class="lede">Quick links to the lab services. Some apps open in a new tab for security reasons.</p>
|
||
|
|
</div>
|
||
|
|
<div class="hero-actions">
|
||
|
|
<a class="pill mono" href="https://cloud.bstein.dev" target="_blank" rel="noreferrer">Open Nextcloud</a>
|
||
|
|
<a class="pill mono" href="https://sso.bstein.dev" target="_blank" rel="noreferrer">Open Keycloak</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="card">
|
||
|
|
<div class="section-head">
|
||
|
|
<h2>Service Grid</h2>
|
||
|
|
<span class="pill mono">apps + pipelines + observability</span>
|
||
|
|
</div>
|
||
|
|
<ServiceGrid :services="displayServices" />
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed } from "vue";
|
||
|
|
import ServiceGrid from "../components/ServiceGrid.vue";
|
||
|
|
import { fallbackServices } from "../data/sample.js";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
serviceData: Object,
|
||
|
|
});
|
||
|
|
|
||
|
|
const displayServices = computed(() => props.serviceData?.services || fallbackServices().services);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.page {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 32px 22px 72px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 18px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.eyebrow {
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: var(--text-muted);
|
||
|
|
margin: 0 0 6px;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: 0 0 6px;
|
||
|
|
font-size: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lede {
|
||
|
|
margin: 0;
|
||
|
|
color: var(--text-muted);
|
||
|
|
max-width: 640px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
</style>
|