Skip to content

Commit

Permalink
feat: port main.css (#656)
Browse files Browse the repository at this point in the history 
Co-authored-by: Yaël Guilloux <[email protected]>
  • Loading branch information
@bdrtsky @Tahul
bdrtsky and Tahul authored Nov 15, 2022
1 parent f4da9b1 commit 38ed225
Show file tree
Hide file tree
Showing 15 changed files with 1,105 additions and 386 deletions.
21 changes: 0 additions & 21 deletions app/module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,12 @@ export default defineNuxtModule({
configKey: 'docus'
},
setup (_, nuxt) {
// Pre-render 404 page
/*
nuxt.hook('nitro:config', (nitroConfig) => {
nitroConfig.prerender = nitroConfig.prerender || {}
nitroConfig.prerender.routes = nitroConfig.prerender.routes || []
nitroConfig.prerender.routes.push('/404')
nitroConfig.prerender.routes.push('/')
})
*/

// TODO: Remove this workaround
// Origin: https://github.com/nuxt/framework/pull/5709
// Issue: https://github.com/nuxt/framework/issues/5827
nuxt.hook('nitro:config', (nitroConfig) => {
nuxt.options.nitro.prerender = nuxt.options.nitro.prerender || {}
nuxt.options.nitro.prerender.routes = nuxt.options.nitro.prerender.routes || []
nuxt.options.nitro.prerender.routes.push(...nitroConfig.prerender.routes)
})

// @ts-expect-error - GitHub module might not be installed
if (nuxt.options?.github) {
addPlugin({
src: resolveThemeDir('integrations/github.ts')
})
}

// @ts-expect-error - Algolia module might not be installed
if (nuxt.options?.runtimeConfig?.public?.algolia?.docSearch) {
addPlugin({
src: resolveThemeDir('integrations/docsearch.ts')
Expand Down
184 changes: 4 additions & 180 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,180 +16,13 @@
}
}

@layer utilities {
.u-bg-white { @apply bg-white dark:bg-black; }
.u-bg-gray-50 { @apply bg-gray-50 dark:bg-gray-900; }
.u-bg-gray-100 { @apply bg-gray-100 dark:bg-gray-800; }
.u-bg-gray-200 { @apply bg-gray-200 dark:bg-gray-700; }
.u-bg-gray-300 { @apply bg-gray-300 dark:bg-gray-600; }
.u-bg-gray-400 { @apply bg-gray-400 dark:bg-gray-500; }
.u-bg-gray-500 { @apply bg-gray-500 dark:bg-gray-400; }
.u-bg-gray-600 { @apply bg-gray-600 dark:bg-gray-300; }
.u-bg-gray-700 { @apply bg-gray-700 dark:bg-gray-200; }
.u-bg-gray-800 { @apply bg-gray-800 dark:bg-gray-100; }
.u-bg-gray-900 { @apply bg-gray-900 dark:bg-gray-50; }
.u-bg-black { @apply bg-black dark:bg-white; }
.u-text-white { @apply text-white dark:text-black; }
.u-text-gray-50 { @apply text-gray-50 dark:text-gray-900; }
.u-text-gray-100 { @apply text-gray-100 dark:text-gray-800; }
.u-text-gray-200 { @apply text-gray-200 dark:text-gray-700; }
.u-text-gray-300 { @apply text-gray-300 dark:text-gray-600; }
.u-text-gray-400 { @apply text-gray-400 dark:text-gray-500; }
.u-text-gray-500 { @apply text-gray-500 dark:text-gray-400; }
.u-text-gray-600 { @apply text-gray-600 dark:text-gray-300; }
.u-text-gray-700 { @apply text-gray-700 dark:text-gray-200; }
.u-text-gray-800 { @apply text-gray-800 dark:text-gray-100; }
.u-text-gray-900 { @apply text-gray-900 dark:text-gray-50; }
.u-text-black { @apply text-black dark:text-white; }
.u-border-white { @apply border-white dark:border-black; }
.u-border-gray-100 { @apply border-gray-100 dark:border-gray-900; }
.u-border-gray-200 { @apply border-gray-200 dark:border-gray-800; }
.u-border-gray-300 { @apply border-gray-300 dark:border-gray-700; }
.u-border-gray-400 { @apply border-gray-400 dark:border-gray-600; }
.u-border-gray-500 { @apply border-gray-500 dark:border-gray-500; }
.u-border-gray-600 { @apply border-gray-600 dark:border-gray-400; }
.u-border-gray-700 { @apply border-gray-700 dark:border-gray-300; }
.u-border-gray-800 { @apply border-gray-800 dark:border-gray-200; }
.u-border-gray-900 { @apply border-gray-900 dark:border-gray-100; }
.u-border-black { @apply border-black dark:border-white; }
.u-divide-white { @apply divide-white dark:divide-black; }
.u-divide-gray-100 { @apply divide-gray-100 dark:divide-gray-900; }
.u-divide-gray-200 { @apply divide-gray-200 dark:divide-gray-800; }
.u-divide-gray-300 { @apply divide-gray-300 dark:divide-gray-700; }
.u-divide-gray-400 { @apply divide-gray-400 dark:divide-gray-600; }
.u-divide-gray-500 { @apply divide-gray-500 dark:divide-gray-500; }
.u-divide-gray-600 { @apply divide-gray-600 dark:divide-gray-400; }
.u-divide-gray-700 { @apply divide-gray-700 dark:divide-gray-300; }
.u-divide-gray-800 { @apply divide-gray-800 dark:divide-gray-200; }
.u-divide-gray-900 { @apply divide-gray-900 dark:divide-gray-100; }
.u-divide-black { @apply divide-black dark:divide-white; }
.u-ring-white { @apply ring-white dark:ring-black; }
.u-ring-gray-100 { @apply ring-gray-100 dark:ring-gray-900; }
.u-ring-gray-200 { @apply ring-gray-200 dark:ring-gray-800; }
.u-ring-gray-300 { @apply ring-gray-300 dark:ring-gray-700; }
.u-ring-gray-400 { @apply ring-gray-400 dark:ring-gray-600; }
.u-ring-gray-500 { @apply ring-gray-500 dark:ring-gray-500; }
.u-ring-gray-600 { @apply ring-gray-600 dark:ring-gray-400; }
.u-ring-gray-700 { @apply ring-gray-700 dark:ring-gray-300; }
.u-ring-gray-800 { @apply ring-gray-800 dark:ring-gray-200; }
.u-ring-gray-900 { @apply ring-gray-900 dark:ring-gray-100; }
.u-ring-black { @apply ring-black dark:ring-white; }
}

.alert,
.badge,
.callout {
/*
Color Schemes
TODO: Improve the usage of these styles across components.
*/
&.base {
@apply border border-gray-200 bg-gray-50 dark:border-gray-900 dark:bg-gray-800 dark:bg-opacity-25 dark:text-gray-50;

code {
@apply text-current bg-gray-100 border-gray-200 shadow-none dark:border-gray-800 dark:bg-gray-900 dark:bg-opacity-50;
}
a:hover {
code {
@apply border-gray-400 dark:border-gray-700;
}
}
}

&.primary {
@apply border border-primary-100 bg-primary-50 text-primary-600 dark:border-primary-900 dark:bg-primary-800 dark:bg-opacity-25 dark:text-primary-200;

code {
@apply text-current shadow-none border-primary-200 bg-primary-100 dark:border-primary-800 dark:bg-primary-900 dark:bg-opacity-50;
}
a:hover {
code {
@apply border-primary-400 dark:border-primary-700;
}
}
}

&.success {
@apply text-green-600 border border-green-100 bg-green-50 dark:border-green-900 dark:bg-green-800 dark:bg-opacity-25 dark:text-green-200;

code {
@apply text-current bg-green-100 border-green-200 shadow-none dark:border-green-800 dark:bg-green-900 dark:bg-opacity-50;
}
a:hover {
code {
@apply border-green-400 dark:border-green-700;
}
}

}

&.info {
@apply text-blue-600 border border-blue-100 bg-blue-50 dark:border-blue-900 dark:bg-blue-800 dark:bg-opacity-25 dark:text-blue-200;

code {
@apply text-current bg-blue-100 border-blue-200 shadow-none dark:border-blue-800 dark:bg-blue-900 dark:bg-opacity-50;
}
a:hover {
code {
@apply border-blue-400 dark:border-blue-700;
}
}
}

&.warning {
@apply text-yellow-600 border border-yellow-100 bg-yellow-50 dark:border-yellow-900 dark:bg-yellow-800 dark:bg-opacity-25 dark:text-yellow-100;

code {
@apply text-current bg-yellow-100 border-yellow-200 shadow-none dark:border-yellow-800 dark:bg-yellow-900 dark:bg-opacity-50;
}
a:hover {
code {
@apply border-yellow-400 dark:border-yellow-700;
}
}

}

&.danger {
@apply text-red-600 border border-red-100 bg-red-50 dark:border-red-900 dark:bg-red-800 dark:bg-opacity-25 dark:text-red-100;

code {
@apply text-current bg-red-100 border-red-200 shadow-none dark:border-red-800 dark:bg-red-900 dark:bg-opacity-50;
}
a:hover {
code {
@apply border-red-400 dark:border-red-700;
}
}
}

&.blurry {
@apply !backdrop-blur-lg !bg-opacity-20;
}

a {
@apply !text-current !border-none !font-semibold !underline;
}

strong {
@apply !font-bold !text-current;
}

li::before {
@apply !text-current !bg-current;
}

.prose-code {
@apply my-4;
/* Base */

code {
@apply !bg-transparent;
}
}
:root {
/* DocSearch */
--docsearch-primary-color: theme('colors.primary.500') !important;
}

/* Base */

.dark:root {
color-scheme: dark;
/* DocSearch */
Expand Down Expand Up @@ -242,12 +75,3 @@ body {
}
}

:root {
/* DocSearch */
--docsearch-primary-color: theme('colors.primary.500') !important;
}

code, kbd, pre, samp {
font-family: var(--fonts-code);
font-size: 1em;
}
19 changes: 18 additions & 1 deletion components/content/Alert.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
defineProps({
const props = defineProps({
/**
* @values info, success, warning, danger
*/
Expand Down Expand Up @@ -30,6 +30,23 @@ css({
py: '{space.3}',
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
border: '1px solid',
'&.primary': {
stateColors: 'primary'
},
'&.info': {
stateColors: 'info'
},
'&.success': {
stateColors: 'success'
},
'&.warning': {
stateColors: 'warning'
},
'&.danger': {
stateColors: 'danger'
}
}
})
</style>
21 changes: 19 additions & 2 deletions components/content/Badge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ defineProps({
type: String,
default: 'info',
validator (value: string) {
return ['info', 'success', 'warning', 'danger', 'primary', 'gray'].includes(value)
return ['info', 'success', 'warning', 'danger', 'primary'].includes(value)
}
}
})
Expand All @@ -29,7 +29,24 @@ css({
fontSize: '{text.base.fontSize}',
lineHeight: '{text.base.lineHeight}',
letterSpacing: '{letterSpacings.tight}',
borderRadius: '{radii.full}'
borderRadius: '{radii.full}',
border: '1px solid',
'&.primary': {
stateColors: 'primary'
},
'&.info': {
stateColors: 'info'
},
'&.success': {
stateColors: 'success'
},
'&.warning': {
stateColors: 'warning'
},
'&.danger': {
stateColors: 'danger'
}
}
})
</style>
41 changes: 38 additions & 3 deletions components/content/Callout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ const toggle = () => {
<template>
<div class="callout" :class="[type]">
<span class="preview" @click="toggle">
<ContentSlot :use="$slots.summary" />
<span class="summary">
<ContentSlot :use="$slots.summary" />
</span>
<Icon
name="heroicons-outline:chevron-right"
class="w-5 h-5 transition-transform transform"
Expand All @@ -50,17 +52,50 @@ css({
'.callout': {
position: 'relative',
px: '{space.4}',
py: '{space.3}',
my: '{space.4}',
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
borderRadius: '{radii.xl}',
border: '1px solid',
'&.primary': {
stateColors: 'primary'
},
'&.info': {
stateColors: 'info'
},
'&.success': {
stateColors: 'success'
},
'&.warning': {
stateColors: 'warning'
},
'&.danger': {
stateColors: 'danger'
},
'.preview': {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
justifyContent: 'space-between',
cursor: 'pointer',
'.summary': {
':deep(p)': {
margin: 0,
'& + p': {
marginTop: '{space.2}'
}
}
}
},
'.content': {
marginTop: 'calc(0px - {space.4})'
paddingTop: '{space.3}',
':deep(p)': {
margin: 0,
'& + p': {
marginTop: '{space.2}'
}
}
}
}
})
Expand Down
6 changes: 3 additions & 3 deletions components/content/CodeGroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default defineComponent({
}
},
render () {
const slots = this.$slots.default()
const slots = this.$slots?.default?.() || []
const tabs = slots
.filter(slot => isTag(slot, 'code-block') || isTag(slot, 'code'))
.map((slot, index) => {
Expand Down Expand Up @@ -72,7 +72,7 @@ export default defineComponent({
'preview-canvas': true
}
},
[slot.children?.default?.() || h('div')]
[(slot.children as any)?.default?.() || h('div')]
)
]
)
Expand Down Expand Up @@ -125,7 +125,7 @@ html.dark {
@apply rounded-b-lg;
.preview-canvas {
@apply u-bg-gray-50 z-0 my-0 overflow-x-auto rounded-bl-lg rounded-br-lg p-4 leading-normal text-gray-800 dark:text-gray-200;
@apply z-0 my-0 overflow-x-auto rounded-bl-lg rounded-br-lg p-4 leading-normal text-gray-800 dark:text-gray-200;
& > * {
@apply my-0;
Expand Down
Loading

1 comment on commit 38ed225

@vercel
Copy link

@vercel vercel bot commented on 38ed225 Nov 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docus – ./

docus-nuxtlabs.vercel.app
docus.dev
docus-git-dev-nuxtlabs.vercel.app
docus-theme.vercel.app
www.docus.dev

Please sign in to comment.