Skip to content

Commit

Permalink
fix: use alternative teleport path for correct SSR
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlejandroAkbal
AlejandroAkbal committed Nov 25, 2023
1 parent 9f9ef1f commit f5d5d00
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 143 deletions.
3 changes: 3 additions & 0 deletions app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,9 @@
:throttle="250"
/>

<!-- https://vuejs.org/guide/scaling-up/ssr.html#teleports -->
<TeleportTarget id="teleport-target" />

<NuxtLayout>
<NuxtPage />
</NuxtLayout>
Expand Down
125 changes: 62 additions & 63 deletions components/layout/navigation/Navbar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,78 @@
<script setup>
import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
const route = useRoute()
const route = useRoute()
const { value: isMenuActive, toggle: toggleMenu } = useMenu()
const { value: isMenuActive, toggle: toggleMenu } = useMenu()
const isPageWithLogoDisabled = computed(() => {
switch (route.path) {
case '/':
return true
const isPageWithLogoDisabled = computed(() => {
switch (route.path) {
case '/':
return true
default:
return false
}
})
default:
return false
}
})
</script>

<template>
<nav>
<!-- -->
<nav>
<!-- -->

<!-- Container -->
<div class='container mx-auto max-w-3xl sm:px-6 lg:px-8'>
<!-- -->
<!-- Container -->
<div class="container mx-auto max-w-3xl sm:px-6 lg:px-8">
<!-- -->

<!-- Navbar -->
<div class='relative flex h-14 items-center justify-between'>
<!-- -->
<!-- Navbar -->
<div class="relative flex h-14 items-center justify-between">
<!-- -->

<!-- Right side: Menu button -->
<div class='absolute inset-y-0 left-0 flex items-center pl-2'>
<button
class='hover:hover-text-util focus-visible:focus-outline-util hover:hover-bg-util inline-flex items-center justify-center rounded-md p-2 text-base-content-highlight focus-visible:ring-inset'
type='button'
@click='toggleMenu()'
>
<span class='sr-only'>Open main menu</span>
<!-- Right side: Menu button -->
<div class="absolute inset-y-0 left-0 flex items-center pl-2">
<button
class="hover:hover-text-util focus-visible:focus-outline-util hover:hover-bg-util inline-flex items-center justify-center rounded-md p-2 text-base-content-highlight focus-visible:ring-inset"
type="button"
@click="toggleMenu()"
>
<span class="sr-only">Open main menu</span>

<Bars3Icon
v-if='!isMenuActive'
class='block h-6 w-6'
/>
<Bars3Icon
v-if="!isMenuActive"
class="block h-6 w-6"
/>

<XMarkIcon
v-else
class='block h-6 w-6'
/>
</button>
</div>
<XMarkIcon
v-else
class="block h-6 w-6"
/>
</button>
</div>

<!-- Center: Logo -->
<div class='flex flex-1 items-center justify-center'>
<NuxtLink
v-if='!isPageWithLogoDisabled'
class='focus-visible:focus-outline-util flex-shrink-0'
to='/'
>
<img
alt='Icon'
class='flip-vertical-fwd h-6 w-6 text-base-content-highlight'
height='16'
loading='eager'
src='/icon.svg'
width='16'
/>
</NuxtLink>
</div>
<!-- Center: Logo -->
<div class="flex flex-1 items-center justify-center">
<NuxtLink
v-if="!isPageWithLogoDisabled"
class="focus-visible:focus-outline-util flex-shrink-0"
to="/"
>
<img
alt="Icon"
class="flip-vertical-fwd h-6 w-6 text-base-content-highlight"
height="16"
loading="eager"
src="/icon.svg"
width="16"
/>
</NuxtLink>
</div>

<!-- Right side: Actions -->
<TeleportTarget
id='navbar-actions'
class='absolute inset-y-0 right-0 flex flex-row-reverse items-center pr-2'
>
</TeleportTarget>
</div>
</div>
</nav>
<!-- Right side: Actions -->
<TeleportTarget
id="navbar-actions"
class="absolute inset-y-0 right-0 flex flex-row-reverse items-center pr-2"
/>
</div>
</div>
</nav>
</template>
147 changes: 73 additions & 74 deletions components/pages/posts/navigation/DomainSelector.vue
View file
Original file line number Diff line number Diff line change
@@ -1,146 +1,145 @@
<script lang='ts' setup>
import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
import { PlusIcon } from '@heroicons/vue/24/solid'
import type { Domain } from '~/assets/js/domain'
import { Float } from '@headlessui-float/vue'
interface DomainSelectorProps {
boorus: Domain[]
modelValue: Domain
<script lang="ts" setup>
import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
import { PlusIcon } from '@heroicons/vue/24/solid'
import type { Domain } from '~/assets/js/domain'
import { Float } from '@headlessui-float/vue'
interface DomainSelectorProps {
boorus: Domain[]
modelValue: Domain
compact?: boolean
}
compact?: boolean
}
const props = defineProps<DomainSelectorProps>()
const props = defineProps<DomainSelectorProps>()
const emit = defineEmits(['update:modelValue'])
const emit = defineEmits(['update:modelValue'])
const { isPremium } = useUserData()
const { isPremium } = useUserData()
function shouldBooruBeDisabled(booru: Domain) {
if (booru.isPremium && !isPremium.value) {
return true
}
function shouldBooruBeDisabled(booru: Domain) {
if (booru.isPremium && !isPremium.value) {
return true
return false
}
return false
}
</script>

<template>
<Listbox
:modelValue='props.modelValue'
as='template'
:modelValue="props.modelValue"
as="template"
@update:modelValue="emit('update:modelValue', $event)"
>
<!-- TODO: Fix width -->
<Float
:offset='16'
as='div'
class='relative'
data-testid='domain-selector'
leave='transition ease-in duration-100'
leave-from='opacity-100'
leave-to='opacity-0'
placement='bottom-start'
portal
:offset="16"
as="div"
class="relative"
data-testid="domain-selector"
leave="transition ease-in duration-100"
leave-from="opacity-100"
leave-to="opacity-0"
placement="bottom-start"
tailwindcss-origin-class
>
<!-- Select -->
<ListboxButton
:class="[props.compact ? 'w-auto !rounded-full !p-2.5' : 'w-56']"
class='hover:hover-text-util focus-visible:focus-outline-util hover:hover-bg-util relative cursor-default rounded-md py-1.5 pl-3 pr-10 text-left ring-1 ring-inset ring-base-0/20 sm:text-sm sm:leading-6'
class="hover:hover-text-util focus-visible:focus-outline-util hover:hover-bg-util relative cursor-default rounded-md py-1.5 pl-3 pr-10 text-left ring-1 ring-inset ring-base-0/20 sm:text-sm sm:leading-6"
>
<span class='flex items-center'>
<span class="flex items-center">
<img
:src='`https://www.google.com/s2/favicons?domain=${props.modelValue.domain}&sz=128`'
alt='Favicon'
class='h-5 w-5 flex-shrink-0 rounded'
height='128'
loading='eager'
width='128'
:src="`https://www.google.com/s2/favicons?domain=${props.modelValue.domain}&sz=128`"
alt="Favicon"
class="h-5 w-5 flex-shrink-0 rounded"
height="128"
loading="eager"
width="128"
/>

<span class='sr-only'> Website to browse: </span>
<span class="sr-only"> Website to browse: </span>

<span
v-if='!props.compact'
class='ml-3 block truncate'
>{{ props.modelValue.domain }}</span
v-if="!props.compact"
class="ml-3 block truncate"
>{{ props.modelValue.domain }}</span
>
</span>

<!-- Chevron -->
<span
v-if='!props.compact'
class='pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2'
v-if="!props.compact"
class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2"
>
<ChevronUpDownIcon class='h-5 w-5' />
<ChevronUpDownIcon class="h-5 w-5" />
</span>
</ListboxButton>

<!-- Menu -->
<ListboxOptions
class='max-h-[23rem] w-full max-w-sm overflow-auto rounded-md bg-base-1000 py-1 ring-1 ring-base-0/20 focus:outline-none sm:text-sm'
class="max-h-[23rem] w-full max-w-sm overflow-auto rounded-md bg-base-1000 py-1 ring-1 ring-base-0/20 focus:outline-none sm:text-sm"
>
<!-- Options -->
<ListboxOption
v-for='booru in props.boorus'
:key='booru.domain'
v-slot='{ active, selected }'
:disabled='shouldBooruBeDisabled(booru)'
:value='booru'
as='template'
v-for="booru in props.boorus"
:key="booru.domain"
v-slot="{ active, selected }"
:disabled="shouldBooruBeDisabled(booru)"
:value="booru"
as="template"
>
<li
:class="[
active ? 'bg-base-0/20 text-base-content-highlight' : 'text-base-content',
shouldBooruBeDisabled(booru) ? 'cursor-not-allowed opacity-50' : ''
]"
class='relative cursor-default select-none py-2 pl-3 pr-14'
class="relative cursor-default select-none py-2 pl-3 pr-14"
>
<div class='flex items-center'>
<div class="flex items-center">
<img
:src='`https://www.google.com/s2/favicons?domain=${booru.domain}&sz=128`'
alt='Favicon'
class='h-5 w-5 flex-shrink-0 rounded'
height='128'
loading='lazy'
width='128'
:src="`https://www.google.com/s2/favicons?domain=${booru.domain}&sz=128`"
alt="Favicon"
class="h-5 w-5 flex-shrink-0 rounded"
height="128"
loading="lazy"
width="128"
/>

<span :class="[selected ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">{{
booru.domain
}}</span>
booru.domain
}}</span>

<!-- Premium badge-->
<span
v-if='shouldBooruBeDisabled(booru)'
class='ml-2 inline-flex items-center rounded-full bg-primary-800 px-2.5 py-0.5 text-xs font-medium text-primary-500'
v-if="shouldBooruBeDisabled(booru)"
class="ml-2 inline-flex items-center rounded-full bg-primary-800 px-2.5 py-0.5 text-xs font-medium text-primary-500"
>
Premium
</span>
</div>

<div class='absolute inset-y-0 right-0 flex items-center gap-2 pr-4'>
<div class="absolute inset-y-0 right-0 flex items-center gap-2 pr-4">
<!-- Checked -->
<span
v-if='selected'
class='text-base-content-highlight'
v-if="selected"
class="text-base-content-highlight"
>
<CheckIcon class='h-5 w-5' />
<CheckIcon class="h-5 w-5" />
</span>
</div>
</li>
</ListboxOption>

<!-- Add more button -->
<div class='hover:hover-text-util hover:hover-bg-util group flex items-center px-3 py-2'>
<PlusIcon class='group-hover:hover-text-util h-5 w-5 rounded' />
<div class="hover:hover-text-util hover:hover-bg-util group flex items-center px-3 py-2">
<PlusIcon class="group-hover:hover-text-util h-5 w-5 rounded" />

<NuxtLink
class='focus-visible:focus-outline-util ml-3'
href='/premium/additional-boorus'
class="focus-visible:focus-outline-util ml-3"
href="/premium/additional-boorus"
>
Add more Boorus
</NuxtLink>
Expand Down
4 changes: 2 additions & 2 deletions components/shared/ScrollTopButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</script>

<template>
<Teleport to="body">
<SafeTeleport to="#teleport-target">
<transition
enter-active-class="transition ease-out duration-150"
enter-from-class="transform opacity-0 scale-95"
Expand All @@ -38,5 +38,5 @@
<ArrowUpIcon class="h-6 w-6" />
</button>
</transition>
</Teleport>
</SafeTeleport>
</template>
5 changes: 1 addition & 4 deletions pages/posts/[domain].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -477,10 +477,7 @@
/>
</SearchMenuWrapper>

<Teleport to="body">
<!-- Scroll to top -->
<ScrollTopButton />
</Teleport>
<ScrollTopButton />

<!-- Container -->
<main class="container mx-auto max-w-3xl flex-1 px-4 py-4 sm:px-6 lg:px-8">
Expand Down

0 comments on commit f5d5d00

Please sign in to comment.