refactor: make auto import more explicit

This commit is contained in:
Anthony Fu 2023-01-30 11:58:18 +01:00
parent fbdaf8bbef
commit 8d792d003d
13 changed files with 19 additions and 21 deletions

View file

@ -30,7 +30,7 @@ const emit = defineEmits<{
</p> </p>
{{ $t('help.desc_para3') }} {{ $t('help.desc_para3') }}
<p flex="~ gap-2 wrap" mxa> <p flex="~ gap-2 wrap" mxa>
<template v-for="team of teams" :key="team.github"> <template v-for="team of elkTeamMembers" :key="team.github">
<NuxtLink :href="`https://github.com/sponsors/${team.github}`" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary"> <NuxtLink :href="`https://github.com/sponsors/${team.github}`" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
<img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60"> <img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
</NuxtLink> </NuxtLink>

View file

@ -34,7 +34,7 @@ const toggleApply = () => {
text-white px2 py2 rounded-full cursor-pointer text-white px2 py2 rounded-full cursor-pointer
@click="$emit('remove')" @click="$emit('remove')"
> >
<div i-ri:close-line text-3 :class="[isHydrated && isSmallScreen ? 'text-6' : 'text-3']" /> <div i-ri:close-line text-3 text-6 md:text-3 />
</div> </div>
</div> </div>
<div absolute right-2 bottom-2> <div absolute right-2 bottom-2>

View file

@ -147,7 +147,7 @@ defineExpose({
> >
<ContentMentionGroup v-if="draft.mentions?.length && shouldExpanded" replying> <ContentMentionGroup v-if="draft.mentions?.length && shouldExpanded" replying>
<button v-for="m, i of draft.mentions" :key="m" text-primary hover:color-red @click="draft.mentions?.splice(i, 1)"> <button v-for="m, i of draft.mentions" :key="m" text-primary hover:color-red @click="draft.mentions?.splice(i, 1)">
{{ acctToShortHandle(m) }} {{ accountToShortHandle(m) }}
</button> </button>
</ContentMentionGroup> </ContentMentionGroup>

View file

@ -51,7 +51,7 @@ const clickUser = (user: UserLogin) => {
:text="$t('user.sign_out_account', [getFullHandle(currentUser.account)])" :text="$t('user.sign_out_account', [getFullHandle(currentUser.account)])"
icon="i-ri:logout-box-line rtl-flip" icon="i-ri:logout-box-line rtl-flip"
w-full w-full
@click="signout" @click="signOut"
/> />
</div> </div>
</div> </div>

View file

@ -7,7 +7,7 @@ export interface Team {
mastodon: string mastodon: string
} }
export const teams: Team[] = [ export const elkTeamMembers: Team[] = [
{ {
github: 'antfu', github: 'antfu',
display: 'Anthony Fu', display: 'Anthony Fu',

View file

@ -349,7 +349,7 @@ export const provideGlobalCommands = () => {
icon: 'i-ri:logout-box-line', icon: 'i-ri:logout-box-line',
onActivate() { onActivate() {
signout() signOut()
}, },
}) })
} }

View file

@ -21,7 +21,7 @@ export function contentToVNode(
return h(Fragment, (tree.children as Node[] || []).map(n => treeToVNode(n))) return h(Fragment, (tree.children as Node[] || []).map(n => treeToVNode(n)))
} }
export function nodeToVNode(node: Node): VNode | string | null { function nodeToVNode(node: Node): VNode | string | null {
if (node.type === TEXT_NODE) if (node.type === TEXT_NODE)
return node.value return node.value

View file

@ -7,14 +7,14 @@ export function getDisplayName(account: mastodon.v1.Account, options?: { rich?:
return displayName.replace(/:([\w-]+?):/g, '') return displayName.replace(/:([\w-]+?):/g, '')
} }
export function acctToShortHandle(acct: string) { export function accountToShortHandle(acct: string) {
return `@${acct.includes('@') ? acct.split('@')[0] : acct}` return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
} }
export function getShortHandle({ acct }: mastodon.v1.Account) { export function getShortHandle({ acct }: mastodon.v1.Account) {
if (!acct) if (!acct)
return '' return ''
return acctToShortHandle(acct) return accountToShortHandle(acct)
} }
export function getServerName(account: mastodon.v1.Account) { export function getServerName(account: mastodon.v1.Account) {

View file

@ -47,7 +47,7 @@ export function mastoLogin(masto: ElkMasto, user: Pick<UserLogin, 'server' | 'to
setParams({ setParams({
streamingApiUrl: newInstance.urls.streamingApi, streamingApiUrl: newInstance.urls.streamingApi,
}) })
instances.value[server] = newInstance instanceStorage.value[server] = newInstance
}) })
return instance return instance

View file

@ -2,6 +2,4 @@ import { breakpointsTailwind } from '@vueuse/core'
export const breakpoints = useBreakpoints(breakpointsTailwind) export const breakpoints = useBreakpoints(breakpointsTailwind)
export const isSmallScreen = breakpoints.smallerOrEqual('md')
export const isMediumScreen = breakpoints.smallerOrEqual('lg')
export const isMediumOrLargeScreen = breakpoints.between('sm', 'xl') export const isMediumOrLargeScreen = breakpoints.between('sm', 'xl')

View file

@ -43,16 +43,16 @@ const initializeUsers = async (): Promise<Ref<UserLogin[]> | RemovableRef<UserLo
} }
const users = await initializeUsers() const users = await initializeUsers()
export const instances = useLocalStorage<Record<string, mastodon.v1.Instance>>(STORAGE_KEY_SERVERS, mock ? mock.server : {}, { deep: true }) const nodes = useLocalStorage<Record<string, any>>(STORAGE_KEY_NODES, {}, { deep: true })
export const nodes = useLocalStorage<Record<string, any>>(STORAGE_KEY_NODES, {}, { deep: true })
const currentUserHandle = useLocalStorage<string>(STORAGE_KEY_CURRENT_USER_HANDLE, mock ? mock.user.account.id : '') const currentUserHandle = useLocalStorage<string>(STORAGE_KEY_CURRENT_USER_HANDLE, mock ? mock.user.account.id : '')
export const instanceStorage = useLocalStorage<Record<string, mastodon.v1.Instance>>(STORAGE_KEY_SERVERS, mock ? mock.server : {}, { deep: true })
export type ElkInstance = Partial<mastodon.v1.Instance> & { export type ElkInstance = Partial<mastodon.v1.Instance> & {
uri: string uri: string
/** support GoToSocial */ /** support GoToSocial */
accountDomain?: string | null accountDomain?: string | null
} }
export const getInstanceCache = (server: string): mastodon.v1.Instance | undefined => instances.value[server] export const getInstanceCache = (server: string): mastodon.v1.Instance | undefined => instanceStorage.value[server]
export const currentUser = computed<UserLogin | undefined>(() => { export const currentUser = computed<UserLogin | undefined>(() => {
if (currentUserHandle.value) { if (currentUserHandle.value) {
@ -65,7 +65,7 @@ export const currentUser = computed<UserLogin | undefined>(() => {
}) })
const publicInstance = ref<ElkInstance | null>(null) const publicInstance = ref<ElkInstance | null>(null)
export const currentInstance = computed<null | ElkInstance>(() => currentUser.value ? instances.value[currentUser.value.server] ?? null : publicInstance.value) export const currentInstance = computed<null | ElkInstance>(() => currentUser.value ? instanceStorage.value[currentUser.value.server] ?? null : publicInstance.value)
export function getInstanceDomain(instance: ElkInstance) { export function getInstanceDomain(instance: ElkInstance) {
return instance.accountDomain || withoutProtocol(instance.uri) return instance.accountDomain || withoutProtocol(instance.uri)
@ -231,7 +231,7 @@ export async function switchUser(user: UserLogin) {
} }
} }
export async function signout() { export async function signOut() {
// TODO: confirm // TODO: confirm
if (!currentUser.value) if (!currentUser.value)
return return
@ -246,7 +246,7 @@ export async function signout() {
// Clear stale data // Clear stale data
clearUserLocalStorage() clearUserLocalStorage()
if (!users.value.some((u, i) => u.server === currentUser.value!.server && i !== index)) if (!users.value.some((u, i) => u.server === currentUser.value!.server && i !== index))
delete instances.value[currentUser.value.server] delete instanceStorage.value[currentUser.value.server]
await removePushNotifications(currentUser.value) await removePushNotifications(currentUser.value)

View file

@ -115,7 +115,7 @@ const handleShowCommit = () => {
</p> </p>
<SettingsItem <SettingsItem
v-for="team in teams" :key="team.github" v-for="team in elkTeamMembers" :key="team.github"
:text="team.display" :text="team.display"
:to="`https://github.com/sponsors/${team.github}`" :to="`https://github.com/sponsors/${team.github}`"
external target="_blank" external target="_blank"

View file

@ -1,7 +1,7 @@
import { join, resolve } from 'pathe' import { join, resolve } from 'pathe'
import fs from 'fs-extra' import fs from 'fs-extra'
import { $fetch } from 'ohmyfetch' import { $fetch } from 'ohmyfetch'
import { teams } from '../composables/about' import { elkTeamMembers } from '../composables/about'
const avatarsDir = resolve('./public/avatars/') const avatarsDir = resolve('./public/avatars/')
@ -24,7 +24,7 @@ async function download(url: string, fileName: string) {
async function fetchAvatars() { async function fetchAvatars() {
await fs.ensureDir(avatarsDir) await fs.ensureDir(avatarsDir)
await Promise.all(teams.reduce((acc, { github }) => { await Promise.all(elkTeamMembers.reduce((acc, { github }) => {
acc.push(...sizes.map(s => download(`https://github.com/${github}.png?size=${s}`, join(avatarsDir, `${github}-${s}x${s}.png`)))) acc.push(...sizes.map(s => download(`https://github.com/${github}.png?size=${s}`, join(avatarsDir, `${github}-${s}x${s}.png`))))
return acc return acc
}, [] as Promise<void>[])) }, [] as Promise<void>[]))