arthur/website-documentation
1
0
Fork 0
mirror of https://github.com/DiscordFactory/website-documentation.git synced 2026-01-14 09:24:23 +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="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">
<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>

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="flex flex-col w-96">
<!-- 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 ">
<nav class="mt-5 flex-1 px-2 space-y-5">
<template v-for="item in documentation">
@@ -119,7 +119,7 @@
<router-link
:key="item.name"
: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 }}
</router-link>
</div>
@@ -138,9 +138,6 @@
</div>
<main class="flex-1 relative z-0 focus:outline-none">
<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">
<slot />
</div>
@@ -180,25 +177,26 @@ import { Dialog, DialogOverlay, TransitionChild, TransitionRoot } from '@headles
import { documentation } from '../utils/Navigation'
import { CalendarIcon, ChartBarIcon, FolderIcon, HomeIcon, InboxIcon, MenuIcon, UsersIcon, XIcon, MenuAlt2Icon } from '@heroicons/vue/outline'
defineProps<{ title: string }>()
const sidebarOpen = ref(false)
let toc = ref(null)
let toc = ref([])
onMounted(() => {
const elements = document.querySelectorAll('h2, h3, h4, h5, h6')
elements.forEach((element: HTMLElement) => element.id = `anchor-${element.innerText}`)
toc.value = Array.from(elements).map((element: HTMLElement) => ({
label: element.innerText,
id: `anchor-${element.innerText}`
}))
setTimeout(() => {
const elements = document.querySelectorAll('h2, h3')
toc.value = Array.from(elements).map((element: HTMLElement) => ({
label: element.innerText,
id: element.innerText
.toLowerCase()
.replace(/ /g, '-')
}))
}, 200)
})
function scrollMeTo (refName) {
function scrollMeTo (refName: string) {
const element = document.getElementById(refName)
const top = element.offsetTop;
window.scroll(0, top - 64);
window.scroll(0, top + 20);
}
</script>
@@ -212,7 +210,7 @@ h2 {
color: #204977;
}
h3 {
@apply text-2xl leading-10 pt-10;
@apply text-2xl leading-0 pt-16;
color: #204977;
}
h4 {
@@ -223,10 +221,6 @@ h5 {
@apply text-xl leading-10 pt-10;
color: #204977;
}
h6 {
@apply text-lg leading-10 pt-2;
color: #204977;
}
ul {
li {
@apply leading-8