mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-21 13:23:07 +01:00
Code Issues Projects Releases Wiki Activity

Creates header

Browse Source
This commit is contained in:
Amir Raminfar
2023-03-06 09:45:32 -08:00
parent ec5196ea6e
commit 0cf4e6d2b6
6 changed files with 49 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components.d.ts vendored
View File

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
export interface GlobalComponents {
BrowserWindow: typeof import('./src/components/BrowserWindow.vue')['default']
CodeBlock: typeof import('./src/components/CodeBlock.vue')['default']
copy: typeof import('./src/components/TheFooter copy.vue')['default']
Features: typeof import('./src/components/Features.vue')['default']
Hero: typeof import('./src/components/Hero.vue')['default']
Installation: typeof import('./src/components/Installation.vue')['default']
@@ -19,5 +20,6 @@ declare module '@vue/runtime-core' {
RouterView: typeof import('vue-router')['RouterView']
SubSection: typeof import('./src/components/SubSection.vue')['default']
TheFooter: typeof import('./src/components/TheFooter.vue')['default']
TheHeader: typeof import('./src/components/TheHeader.vue')['default']
}
}

33
docs/src/components/TheHeader.vue Normal file
View File

@@ -0,0 +1,33 @@
<script setup lang="ts">
const emit = defineEmits(['menu-click'])
</script>
<template>
<header py-2 lg:px-4 main-bg mx-auto>
<nav flex my-3 gap-x-4 justify-end items-center>
<a v-if="isMobile" cursor-pointer text-2xl i-mdi-menu @click="emit('menu-click')" />
<h1 font-playfair mr-auto text-4xl dark:text-brand>
<a href="/">Dozzle</a>
</h1>
<slot />
<a
icon-btn
i-mdi-docker
text-xl
target="_blank"
rel="noreferrer"
href="https://hub.docker.com/r/amir20/dozzle/"
/>
<a
icon-btn
i-mdi-github
text-xl
rel="noreferrer"
href="https://github.com/amir20/dozzle"
target="_blank"
title="Dozzle GitHub"
/>
</nav>
</header>
</template>

23
docs/src/layouts/default.vue
View File

@@ -6,29 +6,10 @@ useHead({
</script>
<template>
<header py-2 px-4 bg-light dark:bg-dark z-10>
<nav flex my-3 gap-x-4 justify-end class="text-[0.9em]">
<the-header>
<router-link to="/guide/what-is-dozzle">
Guide
</router-link>
<a
icon-btn
i-mdi-docker
text-xl
target="_blank"
rel="noreferrer"
href="https://hub.docker.com/r/amir20/dozzle/"
/>
<a
icon-btn
i-mdi-github
text-xl
rel="noreferrer"
href="https://github.com/amir20/dozzle"
target="_blank"
title="Dozzle GitHub"
/>
</nav>
</header>
</the-header>
<RouterView />
</template>

28
docs/src/layouts/docs.vue
View File

@@ -1,8 +1,6 @@
<script setup lang="ts">
import { useHead } from '@vueuse/head'
import { isMobile } from '~/composables'
const menu = [
{
name: 'Introduction',
@@ -26,31 +24,7 @@ const showMenu = ref(false)
</script>
<template>
<header py-2 lg:px-4 bg-light dark:bg-dark container mx-auto sticky top-0>
<nav flex my-3 gap-x-4 justify-end items-center>
<a v-if="isMobile" cursor-pointer text-2xl i-mdi-menu @click="showMenu = !showMenu" />
<h1 font-playfair mr-auto text-4xl dark:text-brand>
<a href="/">Dozzle</a>
</h1>
<a
icon-btn
i-mdi-docker
text-xl
target="_blank"
rel="noreferrer"
href="https://hub.docker.com/r/amir20/dozzle/"
/>
<a
icon-btn
i-mdi-github
text-xl
rel="noreferrer"
href="https://github.com/amir20/dozzle"
target="_blank"
title="Dozzle GitHub"
/>
</nav>
</header>
<the-header container sticky top-0 @menu-click="showMenu = true" />
<div flex container mx-auto px-4 gap-4>
<Teleport to="body" :disabled="!isMobile">
<div v-if="showMenu" backdrop-blur-sm inset-0 fixed @click="showMenu = false" />

8
docs/src/styles/main.css
View File

@@ -7,10 +7,10 @@ html:not(.dark) .shiki-dark {
}
a:not(header a):not(nav a) {
@apply decoration-underline hover:text-teal-600;
a:not(header *):not(nav *) {
@apply underline hover:text-teal-600;
}
header a {
@apply hover:text-teal-600;
header > nav > a {
@apply hover:text-teal-600 transition duration-200 ease-in-out ;
}

7
docs/unocss.config.ts
View File

@@ -14,7 +14,8 @@ export default defineConfig({
shortcuts: [
['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600 !outline-none'],
['main-bg', 'bg-light dark:bg-dark'],
['main-bg', 'bg-main-light dark:bg-main-dark'],
[/^circle-(\w+)$/, ([, c]) => `rounded-full bg-${c}500 w-3 h-3`],
],
transformers: [
transformerDirectives(),
@@ -42,8 +43,8 @@ export default defineConfig({
theme: {
colors: {
brand: 'hsl(44, 100%, 77%)',
light: '#eff0eb',
dark: '#1e1e20',
mainLight: '#eff0eb',
mainDark: '#1e1e20',
},
},
})