generated from Tahul/vue-composable-starter
-
-
Notifications
You must be signed in to change notification settings - Fork 49
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #161 from vu3th/new-website
New website
- Loading branch information
Showing
29 changed files
with
18,259 additions
and
24,222 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,5 @@ | ||
| <template> | ||
| <div class="p-2 border bg-white dark:bg-black dark:border-gray-700 rounded"> | ||
| <slot /> | ||
| </div> | ||
| </template> |
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,20 @@ | ||
| import { breakpointsTailwind, useBreakpoints } from '@vueuse/core' | ||
|
|
||
| export default function useRWD() { | ||
| const breakpoints = useBreakpoints(breakpointsTailwind) | ||
|
|
||
| const isMobileScreen = breakpoints.smallerOrEqual('sm') | ||
|
|
||
| const isLargerThanMd = breakpoints.greater('md') | ||
|
|
||
| const isSmallerThanMd = breakpoints.smaller('md') | ||
|
|
||
| const isBelowMdBreakpoint = breakpoints.smallerOrEqual('md') | ||
|
|
||
| return { | ||
| isMobileScreen, | ||
| isLargerThanMd, | ||
| isSmallerThanMd, | ||
| isBelowMdBreakpoint, | ||
| } | ||
| } |
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,21 @@ | ||
| # Overview | ||
|
|
||
| ## header 2 | ||
|
|
||
| ### header 3 | ||
|
|
||
| code block | ||
|
|
||
| ``` | ||
| code block | ||
| ``` | ||
|
|
||
| Hello world | ||
|
|
||
| ::card | ||
| The content of the card | ||
| :: | ||
|
|
||
| image | ||
|
|
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,7 +1,157 @@ | ||
| <script lang="ts" setup> | ||
| import { NuxtLink } from '#components' | ||
| import packageJsonCore from '../../packages/core/package.json' | ||
| const headerLeftMenu = [ | ||
| { | ||
| label: () => | ||
| h( | ||
| NuxtLink, | ||
| { | ||
| to: '/', | ||
| }, | ||
| { default: () => 'Vue Dapp' }, | ||
| ), | ||
| key: 'vue-dapp', | ||
| icon: () => h('img', { src: '/sheaf-of-rice/favicon-32x32.png' }), | ||
| }, | ||
| ] | ||
| const headerRightMenu = [ | ||
| { | ||
| label: () => | ||
| h( | ||
| NuxtLink, | ||
| { | ||
| to: packageJsonCore.repository, | ||
| external: true, | ||
| target: '_blank', | ||
| }, | ||
| { default: () => 'Github' }, | ||
| ), | ||
| key: 'github', | ||
| }, | ||
| { | ||
| label: () => | ||
| h( | ||
| NuxtLink, | ||
| { | ||
| to: 'https://github.com/vu3th/vue-dapp/releases', | ||
| external: true, | ||
| target: '_blank', | ||
| }, | ||
| { default: () => 'v' + packageJsonCore.version }, | ||
| ), | ||
| key: 'version', | ||
| }, | ||
| ] | ||
| const sidebarMenu = [ | ||
| { | ||
| label: () => | ||
| h( | ||
| NuxtLink, | ||
| { | ||
| to: '/overview', | ||
| }, | ||
| { default: () => 'Overview' }, | ||
| ), | ||
| key: 'Overview', | ||
| }, | ||
| { | ||
| label: () => | ||
| h( | ||
| NuxtLink, | ||
| { | ||
| to: '/wallet', | ||
| }, | ||
| { default: () => 'Wallet' }, | ||
| ), | ||
| key: 'Wallet', | ||
| }, | ||
| { | ||
| label: () => | ||
| h( | ||
| NuxtLink, | ||
| { | ||
| to: '/vue-dapp-provider', | ||
| }, | ||
| { default: () => 'VueDappProvider' }, | ||
| ), | ||
| key: 'VueDappProvider', | ||
| }, | ||
| { | ||
| label: 'Examples', | ||
| key: 'Examples', | ||
| children: [ | ||
| { | ||
| label: 'Contract', | ||
| key: 'Contract', | ||
| }, | ||
| { | ||
| label: 'Multicall', | ||
| key: 'Multicall', | ||
| }, | ||
| { | ||
| label: 'Switch chain', | ||
| key: 'Switch chain', | ||
| }, | ||
| ], | ||
| }, | ||
| ] | ||
| const showDrawer = ref(false) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <TheHeader /> | ||
| <slot /> | ||
| <TheFooter /> | ||
| </div> | ||
| <n-layout content-class="flex flex-col" position="absolute"> | ||
| <n-layout-header bordered class="grid grid-cols-2"> | ||
| <div class="flex items-center"> | ||
| <!-- drawer button --> | ||
| <div class="pl-5 md:hidden flex justify-center items-center" @click="() => (showDrawer = true)"> | ||
| <Icon size="20" name="ic:baseline-sort" class="hover:cursor-pointer hover:text-primary-dark" /> | ||
| </div> | ||
| <!-- logo --> | ||
| <n-menu mode="horizontal" :options="headerLeftMenu" /> | ||
| </div> | ||
| <!-- right side menu --> | ||
| <div class="place-self-end"> | ||
| <n-menu mode="horizontal" :options="headerRightMenu" /> | ||
| </div> | ||
| </n-layout-header> | ||
|
|
||
| <n-layout has-sider class="flex-1"> | ||
| <!-- sidebar --> | ||
| <n-layout-sider | ||
| class="hidden md:block" | ||
| bordered | ||
| collapse-mode="width" | ||
| :collapsed-width="0" | ||
| :width="240" | ||
| :native-scrollbar="false" | ||
| > | ||
| <n-menu :collapsed-width="64" :collapsed-icon-size="20" :options="sidebarMenu" default-expand-all /> | ||
| </n-layout-sider> | ||
|
|
||
| <!-- pages --> | ||
| <n-layout> | ||
| <slot /> | ||
| </n-layout> | ||
|
|
||
| <!-- top-down drawer --> | ||
| <n-drawer v-model:show="showDrawer" height="100vh" placement="top" :trap-focus="false"> | ||
| <n-drawer-content closable> | ||
| <template #header> | ||
| <NuxtLink to="/" class="h-5 flex justify-center items-center gap-1" @click="showDrawer = false"> | ||
| <img class="w-5" src="/sheaf-of-rice/favicon-32x32.png" alt="" /> | ||
| <p class="text-gray-500 text-sm">Vue Dapp</p> | ||
| </NuxtLink> | ||
| </template> | ||
| <n-menu :options="sidebarMenu" default-expand-all /> | ||
| </n-drawer-content> | ||
| </n-drawer> | ||
| </n-layout> | ||
|
|
||
| <n-layout-footer bordered> </n-layout-footer> | ||
| </n-layout> | ||
| </template> |
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,15 @@ | ||
| <script setup lang="ts"> | ||
| /** | ||
| - https://github.com/tailwindlabs/tailwindcss-typography | ||
| */ | ||
| </script> | ||
|
|
||
| <template> | ||
| <main class="py-5 px-10"> | ||
| <ContentDoc class="prose prose-zinc"> | ||
| <template #not-found> | ||
| <p>Stay tuned; it will be added later 😉</p> | ||
| </template> | ||
| </ContentDoc> | ||
| </main> | ||
| </template> |
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.