Skip to content

Commit

Permalink
feat: icon update
Browse files Browse the repository at this point in the history
  • Loading branch information
@SuhJae
SuhJae committed Sep 3, 2024
1 parent f0088d5 commit 8ecbb54
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 98 deletions.
178 changes: 100 additions & 78 deletions app.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,116 @@
export default defineAppConfig({
ui: {
primary: "blueScriptBlue",
gray: "zinc",
ui: {
primary: "blueScriptBlue",
gray: "zinc",

button: {
rounded: "rounded-full",
default: {
size: "md",
color: "black",
},
},
button: {
rounded: "rounded-full",
default: {
size: "md",
color: "black",
},
},

kbd: {
background: 'bg-slate-100 dark:bg-slate-800',
ring: 'ring-1 ring-slate-200 dark:ring-slate-800 ring-inset',
},
kbd: {
background: "bg-slate-100 dark:bg-slate-800",
ring: "ring-1 ring-slate-200 dark:ring-slate-800 ring-inset",
},

buttonGroup: {
rounded: "rounded-full",
},
buttonGroup: {
rounded: "rounded-full",
},

table: {
tr: {
base: "",
selected: "bg-gray-50 dark:bg-gray-800/50",
active: "hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer",
},
th: {
base: "text-left rtl:text-right",
padding: "px-4 py-2",
color: "text-gray-900 dark:text-white",
font: "font-normal",
size: "text-sm",
},
td: {
base: "whitespace-nowrap",
padding: "px-4 py-2",
color: "text-gray-600 dark:text-gray-300",
font: "font-normal",
size: "text-sm",
},
},
table: {
tr: {
base: "",
selected: "bg-gray-50 dark:bg-gray-800/50",
active: "hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer",
},
th: {
base: "text-left rtl:text-right",
padding: "px-4 py-2",
color: "text-gray-900 dark:text-white",
font: "font-normal",
size: "text-sm",
},
td: {
base: "whitespace-nowrap",
padding: "px-4 py-2",
color: "text-gray-600 dark:text-gray-300",
font: "font-normal",
size: "text-sm",
},
},

input: {
rounded: "rounded-full",
default: {
size: "md",
},
},
input: {
rounded: "rounded-full",
default: {
size: "md",
},
},

select: {
rounded: "rounded-full",
default: {
size: "md",
},
},
select: {
rounded: "rounded-full",
default: {
size: "md",
},
},

textarea: {
color: {
gray: {
outline: "ring-1 ring-gray-200 dark:ring-gray-800",
},
},
textarea: {
color: {
gray: {
outline: "ring-1 ring-gray-200 dark:ring-gray-800",
},
},
},

header: {
wrapper: "border-none backdrop-blur-lg",
header: {
wrapper: "border-none backdrop-blur-lg",

links: {
wrapper:
"ring-1 ring-gray-300 dark:ring-gray-700 px-3 gap-x-0 rounded-full",
base: "py-2 px-4 font-medium transition-colors relative after:absolute after:-bottom-px after:inset-x-2 after:h-px after:rounded-full after:opacity-0 after:bg-gray-900 dark:after:bg-white after:transition-opacity",
active: "text-gray-900 dark:text-white after:opacity-100",
inactive:
"text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100",
},
links: {
wrapper:
"ring-1 ring-gray-300 dark:ring-gray-700 px-3 gap-x-0 rounded-full",
base: "py-2 px-4 font-medium transition-colors relative after:absolute after:-bottom-px after:inset-x-2 after:h-px after:rounded-full after:opacity-0 after:bg-gray-900 dark:after:bg-white after:transition-opacity",
active: "text-gray-900 dark:text-white after:opacity-100",
inactive:
"text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100",
},

left: "sm:flex-1",
right: "sm:flex-1",
panel: {
wrapper: "sm:hidden",
},
left: "sm:flex-1",
right: "sm:flex-1",
panel: {
wrapper: "sm:hidden",
},

button: {
base: "sm:hidden",
icon: {
open: "i-ph-list",
close: "i-ph-x",
},
},
button: {
base: "sm:hidden",
icon: {
open: "i-ph-list",
close: "i-ph-x",
},
},
},
commandPalette: {
default: {
icon: "i-ph-magnifying-glass",
loadingIcon: "i-svg-spinners-90-ring",
selectedIcon: "i-ph-check",
emptyState: {
icon: "i-ph-magnifying-glass",
},
},
},
icons: {
dark: "i-ph-moon",
light: "i-ph-sun",
system: "i-heroicons-computer-desktop-20-solid",
search: "i-ph-magnifying-glass",
external: "i-heroicons-arrow-up-right-20-solid",
chevron: "i-ph-caret-down",
hash: "i-heroicons-hashtag-20-solid",
menu: "i-heroicons-bars-3-20-solid",
close: "i-ph-x",
check: "i-heroicons-check-circle-20-solid",
},
},
});
48 changes: 28 additions & 20 deletions layouts/default.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
<script setup lang="ts">
const {t} = useI18n();
const { t } = useI18n();
const {data: navigation} = await useAsyncData('navigation', () => fetchContentNavigation())
const {data: files} = useLazyFetch<ParsedContent[]>('/api/search.json', {default: () => [], server: false})
const { data: navigation } = await useAsyncData("navigation", () =>
fetchContentNavigation()
);
const { data: files } = useLazyFetch<ParsedContent[]>("/api/search.json", {
default: () => [],
server: false,
});
const links = computed(() => [
{
Expand All @@ -20,8 +25,8 @@ const links = computed(() => [
},
]);
provide('navigation', navigation)
provide('files', files)
provide("navigation", navigation);
provide("files", files);
const colorMode = useColorMode();
const isDark = computed({
Expand All @@ -39,41 +44,44 @@ const isDark = computed({
<template #logo>
<ClientOnly>
<img
src="~/assets/logo-dark.svg"
alt="BlueScript darkmode logo"
class="h-8 hover:opacity-90"
v-if="isDark"
src="~/assets/logo-dark.svg"
alt="BlueScript darkmode logo"
class="h-8 hover:opacity-90"
v-if="isDark"
/>
<img
src="~/assets/logo.svg"
alt="BlueScript logo"
class="h-8 hover:opacity-90"
v-else
src="~/assets/logo.svg"
alt="BlueScript logo"
class="h-8 hover:opacity-90"
v-else
/>
</ClientOnly>
</template>

<template #center>
<UHeaderLinks :links="links" class="hidden sm:flex"/>
<UHeaderLinks :links="links" class="hidden sm:flex" />
</template>

<template #right>
<LangSwitcher/>
<LangSwitcher />

<UColorModeButton :icon="isDark ? 'i-ph-moon' : 'i-ph-sun'"/>
<UColorModeButton />
</template>

<template #panel>
<UAsideLinks :links="links" class="px-2"/>
<UAsideLinks :links="links" class="px-2" />
</template>
</UHeader>

<UMain>
<slot/>
<slot />
</UMain>


<ClientOnly>
<LazyUContentSearch :files="files" :navigation="navigation" :links="links"/>
<LazyUContentSearch
:files="files"
:navigation="navigation"
:links="links"
/>
</ClientOnly>
</template>

0 comments on commit 8ecbb54

Please sign in to comment.