forked from nuxt-modules/i18n
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: redesign header * feat: improve search input and modal * feat: redesign aside category list item * fix: dark mode aside category item color * feat: redesign TOC * feat: redesign landing page * fix: TOC title and icon * feat: copy button in code blocks; closes nuxt-modules#117 * fix: dark mode TOC colors * feat: refactor logo component; add option for logo+text customization; closes nuxt-modules#110 * fix: redesign external resources * feat: redesign mobile navbar * feat: move mobile menu button to header * chore: cleanup * fix: coding session * feat: update typography * chore: fixes * fix: left align hamburger icon * fix: make body lock work on iOS * fix: try mobile safari aside fix * fix: missing Tailwind config * fix: try native CSS solution for mobile Safari aside issue * fix: try -webkit-fill-available for mobile Safari bug * fix: ... * chore: cleanup * feat: use warm gray pallete for dark mode * fix: add missing dependency * chore: update default color Co-authored-by: Sébastien Chopin <[email protected]>
- Loading branch information
Showing
28 changed files
with
1,208 additions
and
835 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| <template> | ||
| <div | ||
| ref="copyInstall" | ||
| :data-clipboard-text="snippet" | ||
| class="relative flex flex-col w-full h-64 overflow-hidden text-gray-600 bg-gray-800 rounded-lg cursor-pointer" | ||
| > | ||
| <div | ||
| v-if="copied" | ||
| class="absolute top-0 left-0 z-10 flex items-center justify-center w-full h-full" | ||
| > | ||
| <div | ||
| class="absolute top-0 left-0 w-full h-full bg-gray-900 opacity-75" | ||
| ></div> | ||
| <div class="z-10 text-lg font-medium text-gray-100"> | ||
| Copied! | ||
| </div> | ||
| </div> | ||
| <div | ||
| class="relative flex items-center w-full h-12 border-b border-gray-700" | ||
| > | ||
| <div class="flex ml-4"> | ||
| <div class="w-3 h-3 bg-red-400 rounded-full"></div> | ||
| <div class="w-3 h-3 ml-2 bg-yellow-400 rounded-full"></div> | ||
| <div class="w-3 h-3 ml-2 bg-green-400 rounded-full"></div> | ||
| </div> | ||
| <div | ||
| class="absolute top-0 left-0 flex items-center justify-center w-full h-full" | ||
| > | ||
| Bash | ||
| </div> | ||
| </div> | ||
| <div class="flex p-4 font-mono"> | ||
| <span class="inline-block mr-2 font-bold select-none">$</span> | ||
| <span class="inline-block text-gray-200">{{ snippet }}</span> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import Clipboard from "clipboard"; | ||
| export default { | ||
| props: { | ||
| snippet: { | ||
| type: String, | ||
| required: true | ||
| } | ||
| }, | ||
| data() { | ||
| return { | ||
| copied: false | ||
| }; | ||
| }, | ||
| mounted() { | ||
| this.setupCopyInstall(); | ||
| }, | ||
| methods: { | ||
| setupCopyInstall() { | ||
| if (!this.$refs.copyInstall) { | ||
| return this.$nextTick(this.setupCopyInstall); | ||
| } | ||
| const copyInstall = new Clipboard(this.$refs.copyInstall); | ||
| copyInstall.on("success", () => { | ||
| this.copied = true; | ||
| setTimeout(() => { | ||
| this.copied = false; | ||
| }, 1000); | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,117 +1,112 @@ | ||
| <template> | ||
| <Container> | ||
| <Page> | ||
| <h1 class="mt-10 mb-8 text-4xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-gray-100 sm:text-6xl lg:text-7xl sm:mt-14 sm:mb-10"> | ||
| Documentation generator<br>based on Nuxt and Tailwind. | ||
| <Container aside fluid> | ||
| <template #header> | ||
| <Header> | ||
| <template #desktop-right> | ||
| <ButtonLink href="/get-started/installation">Get started</ButtonLink> | ||
| </template> | ||
| </Header> | ||
| </template> | ||
| <template #aside> | ||
| <Aside class="block lg:hidden" /> | ||
| </template> | ||
| <section class="px-4 mx-auto my-24 max-w-8xl"> | ||
| <h1 | ||
| class="my-8 text-4xl font-semibold leading-none tracking-tight text-center text-gray-900 md:text-left dark:text-gray-100 sm:text-6xl lg:text-8xl sm:my-14" | ||
| > | ||
| Documentation generator<br />based on Nuxt and Tailwind. | ||
| </h1> | ||
| <h3 class="mb-10 text-lg font-medium text-gray-800 sm:text-2xl sm:leading-10 sm:mb-11 dark:text-gray-200"> | ||
| Write in markdown, use Vue components, add style with TailwindCSS | ||
| and enjoy the power of Nuxt. | ||
| </h3> | ||
| <div class="flex flex-wrap space-y-4 text-center sm:space-y-0 sm:space-x-4"> | ||
| <ButtonLink size="large" href="/get-started/installation">Get started</ButtonLink> | ||
| <button | ||
| ref="copyInstall" | ||
| data-clipboard-text="npx degit nuxtlabs/docus-starter#main my-docs" | ||
| type="button" | ||
| class="flex items-center justify-center flex-none w-full py-3 space-x-2 font-mono leading-6 text-gray-400 transition-colors duration-200 border border-gray-200 dark:border-gray-700 sm:w-auto bg-gray-50 dark:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 sm:px-6 rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-600 focus:ring-gray-300 dark:focus:ring-gray-700 focus:outline-none" | ||
| > | ||
| <span class="text-gray-900 dark:text-gray-100"> | ||
| <span class="hidden text-gray-500 sm:inline" aria-hidden="true">$ </span> | ||
| npx degit nuxtlabs/docus-starter | ||
| </span> | ||
| <span class="sr-only">(click to copy to clipboard)</span> | ||
| <IconClipboardCheck v-if="copied" class="w-6 h-6 text-green-400" stroke-width="1.5" /> | ||
| <IconClipboardCopy v-else class="w-6 h-6" stroke-width="1.5" /> | ||
| </button> | ||
| <div class="flex flex-col md:flex-row"> | ||
| <div class="flex flex-col items-start pr-0 mb-8 md:pr-2 lg:pr-8 md:w-1/2"> | ||
| <h3 | ||
| class="mb-4 text-lg text-center text-gray-700 md:text-left sm:text-xl md:text-2xl sm:leading-tight sm:mb-8 dark:text-gray-200" | ||
| > | ||
| Write in markdown, use Vue components, add style with TailwindCSS | ||
| and enjoy the power of Nuxt. | ||
| </h3> | ||
| <ButtonLink | ||
| class="mx-auto md:mx-0" | ||
| size="large" | ||
| href="/get-started/installation" | ||
| > | ||
| Get started | ||
| </ButtonLink> | ||
| <!-- TODO: GitHub stars Button --> | ||
| </div> | ||
| <div class="w-full m-auto md:w-1/2 sm:w-580px "> | ||
| <div class="md:pl-2"> | ||
| <Terminal snippet="npx degit nuxtlabs/docus-starter" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <section> | ||
| <h2 class="mt-16 mb-8 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-100">What’s included?</h2> | ||
| <ul class="grid grid-cols-2 gap-4 font-semibold text-center text-gray-900 dark:text-gray-100 sm:grid-cols-3 xl:grid-cols-4 sm:gap-6 xl:gap-8"> | ||
| </section> | ||
| <section class="py-24 bg-gray-50 dark:bg-gray-800"> | ||
| <div class="px-4 mx-auto max-w-8xl"> | ||
| <h2 | ||
| class="mb-8 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100" | ||
| > | ||
| What’s included? | ||
| </h2> | ||
| <ul | ||
| class="grid gap-4 font-semibold text-left text-gray-900 dark:text-gray-100 sm:grid-cols-2 xl:grid-cols-3 2xl:gap-8" | ||
| > | ||
| <li v-for="feature of features" :key="feature.title" class="flex"> | ||
| <NuxtLink class="relative w-full px-6 pt-8 pb-6 border-2 border-gray-100 rounded-xl dark:border-gray-800" :to="feature.url"> | ||
| <component :is="feature.icon" v-if="feature.icon" class="h-16 max-w-full mx-auto mb-3" /> | ||
| <h2>{{ feature.title }}</h2> | ||
| </NuxtLink> | ||
| <div class="relative w-full px-6 py-8 bg-white rounded shadow dark:bg-gray-900 hover:shadow-lg"> | ||
| <component | ||
| :is="feature.icon" | ||
| v-if="feature.icon" | ||
| class="h-16 max-w-full mb-3" | ||
| /> | ||
| <h2 class="mb-2 text-xl">{{ feature.title }}</h2> | ||
| <p class="font-normal">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum voluptatibus veritatis maxime est qui blanditiis aut libero quod. Doloremque obcaecati voluptate tenetur quia fuga veniam incidunt rerum voluptatibus iusto earum.</p> | ||
| <!-- TODO: feature.description --> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| </Page> | ||
| </div> | ||
| </section> | ||
| </Container> | ||
| </template> | ||
|
|
||
| <script> | ||
| import Clipboard from 'clipboard' | ||
| export default { | ||
| data () { | ||
| return { | ||
| copied: false, | ||
| features: [ | ||
| { | ||
| icon: 'IconMarkdown', | ||
| title: 'Write Markdown', | ||
| url: '/usage/template' | ||
| title: 'Write Markdown' | ||
| }, | ||
| { | ||
| icon: 'IconVue', | ||
| title: 'Vue Components', | ||
| url: '/usage/components' | ||
| title: 'Vue Components' | ||
| }, | ||
| { | ||
| icon: 'IconNuxt', | ||
| title: 'Nuxt Architecture', | ||
| url: '/get-started/configuration#nuxt' | ||
| title: 'Nuxt Architecture' | ||
| }, | ||
| { | ||
| icon: 'IconTailwind', | ||
| title: 'Tailwind CSS', | ||
| url: '/get-started/configuration#tailwindcss' | ||
| title: 'Tailwind CSS' | ||
| }, | ||
| { | ||
| icon: 'IconSSG', | ||
| title: 'Static Generation', | ||
| url: '/more/deployment' | ||
| title: 'Static Generation' | ||
| }, | ||
| { | ||
| icon: 'IconLighthouse', | ||
| title: 'Lighthouse Optimised', | ||
| url: '/more/performances' | ||
| title: 'Lighthouse Optimised' | ||
| }, | ||
| { | ||
| icon: 'IconZap', | ||
| title: 'Smart Generation', | ||
| url: '/more/performances#smart-generation' | ||
| title: 'Smart Generation' | ||
| }, | ||
| { | ||
| icon: 'IconPuzzle', | ||
| title: 'Extensible', | ||
| url: '/usage/template' | ||
| title: 'Extensible' | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| head () { | ||
| return { | ||
| title: 'Docus - Documentation generator based on Nuxt and Tailwind.' | ||
| } | ||
| }, | ||
| mounted () { | ||
| this.setupCopyInstall() | ||
| }, | ||
| methods: { | ||
| setupCopyInstall () { | ||
| if (!this.$refs.copyInstall) { | ||
| return this.$nextTick(this.setupCopyInstall) | ||
| } | ||
| const copyInstall = new Clipboard(this.$refs.copyInstall) | ||
| copyInstall.on('success', () => { | ||
| this.copied = true | ||
| setTimeout(() => { | ||
| this.copied = false | ||
| }, 1000) | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.