arthur/website-documentation
1
0
Fork 0
mirror of https://github.com/DiscordFactory/website-documentation.git synced 2026-01-14 17:34:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

🚧 Work in progress

Browse Source
This commit is contained in:
Freeze455
2021-10-06 18:05:52 +02:00
parent 2f022b6238
commit 879641a3c8
2 changed files with 16 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CtaSplitImage.vue
View File

@@ -6,7 +6,7 @@
<div class="relative z-10 lg:col-start-1 lg:row-start-1 lg:col-span-4 lg:py-16 lg:bg-transparent"> <div class="relative z-10 lg:col-start-1 lg:row-start-1 lg:col-span-4 lg:py-16 lg:bg-transparent">
<div class="max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0"> <div class="max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
<div class="bg-blue-900 rounded-xl aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1.5"> <div class="bg-blue-900 rounded-xl aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1.5">
<img class="m-auto w-1/2 sm:h-1/2" src="../assets/discord-logo-white.svg" alt="Workflow" /> <img class="rounded-md" src="../assets/discord-banner.jpg" alt="Workflow" />
</div> </div>
</div> </div>
</div> </div>

36
src/components/Documentation.vue
View File

@@ -101,7 +101,7 @@
<div class="hidden sm:fixed pt-[64px] top-0 left-0 h-full md:flex md:flex-shrink-0"> <div class="hidden sm:fixed pt-[64px] top-0 left-0 h-full md:flex md:flex-shrink-0">
<div class="flex flex-col w-96"> <div class="flex flex-col w-96">
<!-- Sidebar component, swap this element with another sidebar if you like --> <!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex-1 flex flex-col min-h-0 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 transition duration-300"> <div class="flex-1 flex flex-col min-h-0 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 transition duration-300 overflow-y-auto">
<div class="flex-1 flex flex-col pt-5 pb-4 "> <div class="flex-1 flex flex-col pt-5 pb-4 ">
<nav class="mt-5 flex-1 px-2 space-y-5"> <nav class="mt-5 flex-1 px-2 space-y-5">
<template v-for="item in documentation"> <template v-for="item in documentation">
@@ -119,7 +119,7 @@
<router-link <router-link
:key="item.name" :key="item.name"
:to="item.href" :to="item.href"
:class="[item.current ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900', 'group flex items-center py-2 text-base font-medium rounded-md']"> :class="[item.current ? 'bg-gray-100 text-gray-900' : 'text-gray-600 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100', 'group flex items-center p-2 w-full text-base font-medium rounded-md']">
{{ item.label }} {{ item.label }}
</router-link> </router-link>
</div> </div>
@@ -138,9 +138,6 @@
</div> </div>
<main class="flex-1 relative z-0 focus:outline-none"> <main class="flex-1 relative z-0 focus:outline-none">
<div class="py-6 space-y-5"> <div class="py-6 space-y-5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 class="text-4xl font-semibold text-[#204977] dark:text-white">{{ title }}</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 dark:text-gray-400 space-y-6"> <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 dark:text-gray-400 space-y-6">
<slot /> <slot />
</div> </div>
@@ -180,25 +177,26 @@ import { Dialog, DialogOverlay, TransitionChild, TransitionRoot } from '@headles
import { documentation } from '../utils/Navigation' import { documentation } from '../utils/Navigation'
import { CalendarIcon, ChartBarIcon, FolderIcon, HomeIcon, InboxIcon, MenuIcon, UsersIcon, XIcon, MenuAlt2Icon } from '@heroicons/vue/outline' import { CalendarIcon, ChartBarIcon, FolderIcon, HomeIcon, InboxIcon, MenuIcon, UsersIcon, XIcon, MenuAlt2Icon } from '@heroicons/vue/outline'
defineProps<{ title: string }>()
const sidebarOpen = ref(false) const sidebarOpen = ref(false)
let toc = ref(null) let toc = ref([])
onMounted(() => { onMounted(() => {
const elements = document.querySelectorAll('h2, h3, h4, h5, h6') setTimeout(() => {
elements.forEach((element: HTMLElement) => element.id = `anchor-${element.innerText}`) const elements = document.querySelectorAll('h2, h3')
toc.value = Array.from(elements).map((element: HTMLElement) => ({ toc.value = Array.from(elements).map((element: HTMLElement) => ({
label: element.innerText, label: element.innerText,
id: `anchor-${element.innerText}` id: element.innerText
})) .toLowerCase()
.replace(/ /g, '-')
}))
}, 200)
}) })
function scrollMeTo (refName) { function scrollMeTo (refName: string) {
const element = document.getElementById(refName) const element = document.getElementById(refName)
const top = element.offsetTop; const top = element.offsetTop;
window.scroll(0, top - 64); window.scroll(0, top + 20);
} }
</script> </script>
@@ -212,7 +210,7 @@ h2 {
color: #204977; color: #204977;
} }
h3 { h3 {
@apply text-2xl leading-10 pt-10; @apply text-2xl leading-0 pt-16;
color: #204977; color: #204977;
} }
h4 { h4 {
@@ -223,10 +221,6 @@ h5 {
@apply text-xl leading-10 pt-10; @apply text-xl leading-10 pt-10;
color: #204977; color: #204977;
} }
h6 {
@apply text-lg leading-10 pt-2;
color: #204977;
}
ul { ul {
li { li {
@apply leading-8 @apply leading-8