docs/components/Features.vue

77 lines
2.8 KiB
Vue
Raw Normal View History

<template>
<div class="mt-12">
<div class="max-w-3xl">
<h1>Made by developers</h1>
<p>
Lysand is designed and maintained by the developers of the Lysand Server, which uses Lysand for
federation. This community could include you! Check out our <a
href="https://github.com/lysand-org/lysand">Git repository</a> to see how you can contribute.
</p>
</div>
<div
class="!mt-8 grid items-start gap-x-6 gap-y-6 sm:mt-16 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 lg:gap-x-8">
<div v-for="feature in features" :key="feature.name"
class="flex flex-row h-32 p-5 items-center gap-x-4 bg-[var(--vp-c-bg-soft)] shadow rounded duration-200 hover:ring-2 hover:scale-[101%] ring-[var(--vp-color-primary)]">
<div class="aspect-square flex items-center justify-center overflow-hidden rounded shrink-0 h-full">
<iconify-icon :icon="feature.icon" class="text-[var(--vp-color-primary)] text-5xl" />
</div>
<div class="text-pretty">
<h3 class="!text-base font-medium !mt-0">{{ feature.name }}</h3>
<p class="!mt-1 !mb-0 !text-sm">{{ feature.description }}</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
const features = [
{
name: "JSON-based APIs",
description: "Simple JSON objects are used to represent all data.",
icon: "bx:bx-code-alt",
},
{
name: "MIT Licensed",
description:
"Lysand is licensed under the MIT License, which allows you to use it for any purpose.",
icon: "bx:bx-shield",
},
{
name: "Built-in namespaced extensions",
description:
"Extensions for common use cases are built-in, such as custom emojis and reactions",
icon: "bx:bx-extension",
},
{
name: "Easy to implement",
description:
"Lysand is designed to be easy to implement in any language.",
icon: "bx:bx-code-block",
},
{
name: "Secure by default",
description:
"All requests are signed using advanced cryptographic algorithms.",
icon: "bx:bx-shield-alt",
},
{
name: "No Mastodon Situation",
description:
"Standardization is heavy and designed to break vendor lock-in.",
icon: "bx:bx-code-curly",
},
{
name: "In-Depth Security Docs",
description:
"Docs provide lots of information on how to program a secure server.",
icon: "bx:bx-shield-x",
},
{
name: "TypeScript Types",
description: "TypeScript types are provided for all objects.",
icon: "bx:bx-code",
},
];
</script>