Infrastructure/zipline
1
Fork 0
Code Issues Pull requests Activity

fix: clean up Anchors

Browse source
This commit is contained in:
diced 2023-03-21 17:09:50 -07:00
parent 8b540bff62
commit 25606a80ec
No known key found for this signature in database
GPG key ID: 370BD1BA142842D1
17 changed files with 121 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/AnchorNext.tsx Normal file
View file

@ -0,0 +1,6 @@
import { Anchor } from '@mantine/core';
import Link from 'next/link';
export default function AnchorNext({ href, ...others }) {
return <Anchor component={Link} href={href} {...others} />;
}

54
src/components/Layout.tsx
View file

@ -264,42 +264,42 @@ export default function Layout({ children, props }) {
{children {children
.filter((x) => (x.if ? x.if(user, props) : true)) .filter((x) => (x.if ? x.if(user, props) : true))
.map(({ icon, text, link }) => ( .map(({ icon, text, link }) => (
<Link href={link} key={text} passHref legacyBehavior> <NavLink
<NavLink key={text}
component='a' label={text}
label={text} icon={icon}
icon={icon} active={router.pathname === link}
active={router.pathname === link} variant='light'
variant='light' component={Link}
/> href={link}
</Link> />
))} ))}
</NavLink> </NavLink>
) : ( ) : (
<Link href={link} key={text} passHref legacyBehavior> <NavLink
<NavLink key={text}
component='a' label={text}
label={text} icon={icon}
icon={icon} active={router.pathname === link}
active={router.pathname === link} variant='light'
variant='light' component={Link}
/> href={link}
</Link> />
) )
)} )}
</Navbar.Section> </Navbar.Section>
<Navbar.Section> <Navbar.Section>
{external_links.length {external_links.length
? external_links.map(({ label, link }, i) => ( ? external_links.map(({ label, link }, i) => (
<Link href={link} passHref key={i} legacyBehavior> <NavLink
<NavLink key={label}
label={label} label={label}
component='a' target='_blank'
target='_blank' variant='light'
variant='light' icon={<IconExternalLink size={18} />}
icon={<IconExternalLink size={18} />} component={Link}
/> href={link}
</Link> />
)) ))
: null} : null}
</Navbar.Section> </Navbar.Section>

6
src/components/Link.tsx
View file

@ -1,6 +0,0 @@
import { Anchor } from '@mantine/core';
import * as NextLink from 'next/link';
export default function Link(props) {
return <Anchor component={NextLink} legacyBehavior {...props} />;
}

8
src/components/pages/Files/index.tsx
View file

@ -23,11 +23,9 @@ export default function Files({ disableMediaPreview, exifEnabled, queryPage, com
<> <>
<Group mb='md'> <Group mb='md'>
<Title>Files</Title> <Title>Files</Title>
<Link href='/dashboard/upload/file' passHref legacyBehavior> <ActionIcon component={Link} href='/dashboard/upload/file' variant='filled' color='primary'>
<ActionIcon component='a' variant='filled' color='primary'> <IconFileUpload size='1rem' />
<IconFileUpload size='1rem' /> </ActionIcon>
</ActionIcon>
</Link>
</Group> </Group>
{favoritePages.isSuccess && favoritePages.data.length ? ( {favoritePages.isSuccess && favoritePages.data.length ? (
<Accordion <Accordion

19
src/components/pages/Folders/index.tsx
View file

@ -1,4 +1,15 @@
import { ActionIcon, Avatar, Card, Group, SimpleGrid, Skeleton, Stack, Title, Tooltip } from '@mantine/core'; import {
ActionIcon,
Anchor,
Avatar,
Card,
Group,
SimpleGrid,
Skeleton,
Stack,
Title,
Tooltip,
} from '@mantine/core';
import { useClipboard } from '@mantine/hooks'; import { useClipboard } from '@mantine/hooks';
import { useModals } from '@mantine/modals'; import { useModals } from '@mantine/modals';
import { showNotification } from '@mantine/notifications'; import { showNotification } from '@mantine/notifications';
@ -16,13 +27,14 @@ import {
IconLockAccessOff, IconLockAccessOff,
IconLockOpen, IconLockOpen,
} from '@tabler/icons-react'; } from '@tabler/icons-react';
import Link from 'components/Link'; import AnchorNext from 'components/AnchorNext';
import MutedText from 'components/MutedText'; import MutedText from 'components/MutedText';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import { useFolders } from 'lib/queries/folders'; import { useFolders } from 'lib/queries/folders';
import { listViewFoldersSelector } from 'lib/recoil/settings'; import { listViewFoldersSelector } from 'lib/recoil/settings';
import { relativeTime } from 'lib/utils/client'; import { relativeTime } from 'lib/utils/client';
import { DataTable, DataTableSortStatus } from 'mantine-datatable'; import { DataTable, DataTableSortStatus } from 'mantine-datatable';
import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useRecoilState } from 'recoil'; import { useRecoilState } from 'recoil';
@ -366,7 +378,8 @@ export default function Folders({ disableMediaPreview, exifEnabled, compress })
title: 'Copied folder link', title: 'Copied folder link',
message: ( message: (
<> <>
Copied <Link href={`/folder/${folder.id}`}>folder link</Link> to Copied{' '}
<AnchorNext href={`/folder/${folder.id}`}>folder link</AnchorNext> to
clipboard clipboard
</> </>
), ),

19
src/components/pages/Manage/Flameshot.tsx
View file

@ -1,5 +1,6 @@
import { Code } from '@mantine/core'; import { Anchor, Code } from '@mantine/core';
import Link from 'components/Link'; import AnchorNext from 'components/AnchorNext';
import Link from 'next/link';
import { GeneratorModal } from './GeneratorModal'; import { GeneratorModal } from './GeneratorModal';
export default function Flameshot({ user, open, setOpen }) { export default function Flameshot({ user, open, setOpen }) {
@ -105,18 +106,18 @@ ${curl.join(' ')} -d "{\\"url\\": \\"$arg\\"}"${values.noJSON ? '' : " | jq -r '
title='Flameshot' title='Flameshot'
desc={ desc={
<> <>
To use this script, you need <Link href='https://flameshot.org'>Flameshot</Link>,{' '} To use this script, you need <AnchorNext href='https://flameshot.org'>Flameshot</AnchorNext>,{' '}
<Link href='https://curl.se/'> <AnchorNext href='https://curl.se/'>
<Code>curl</Code> <Code>curl</Code>
</Link> </AnchorNext>
,{' '} ,{' '}
<Link href='https://github.com/stedolan/jq'> <AnchorNext href='https://github.com/stedolan/jq'>
<Code>jq</Code> <Code>jq</Code>
</Link> </AnchorNext>
, and{' '} , and{' '}
<Link href='https://github.com/kfish/xsel'> <AnchorNext href='https://github.com/kfish/xsel'>
<Code>xsel</Code> <Code>xsel</Code>
</Link>{' '} </AnchorNext>{' '}
installed. This script is intended for use on Linux only. installed. This script is intended for use on Linux only.
</> </>
} }

12
src/components/pages/Manage/GeneratorModal.tsx
View file

@ -1,4 +1,5 @@
import { import {
Anchor,
Box, Box,
Button, Button,
Checkbox, Checkbox,
@ -15,8 +16,9 @@ import {
} from '@mantine/core'; } from '@mantine/core';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { IconFileDownload, IconWorld } from '@tabler/icons-react'; import { IconFileDownload, IconWorld } from '@tabler/icons-react';
import Link from 'components/Link'; import AnchorNext from 'components/AnchorNext';
import MutedText from 'components/MutedText'; import MutedText from 'components/MutedText';
import Link from 'next/link';
import { useReducer, useState } from 'react'; import { useReducer, useState } from 'react';
const DEFAULT_OD_DESC = 'Override the default domain(s). Type in a URL, e.g https://example.com'; const DEFAULT_OD_DESC = 'Override the default domain(s). Type in a URL, e.g https://example.com';
@ -169,9 +171,9 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
<Text>Wayland</Text> <Text>Wayland</Text>
<MutedText size='sm'> <MutedText size='sm'>
If using wayland, you can check the boxes below to your liking. This will require{' '} If using wayland, you can check the boxes below to your liking. This will require{' '}
<Link href='https://github.com/bugaevc/wl-clipboard'> <AnchorNext href='https://github.com/bugaevc/wl-clipboard'>
<Code>wl-clipboard</Code> <Code>wl-clipboard</Code>
</Link>{' '} </AnchorNext>{' '}
for the <Code>wl-copy</Code> command. for the <Code>wl-copy</Code> command.
</MutedText> </MutedText>
</Box> </Box>
@ -197,8 +199,8 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
description={ description={
<> <>
If using a compositor such as{' '} If using a compositor such as{' '}
<Link href='https://github.com/hyprwm/hyprland'>Hyprland</Link>, this option will set the{' '} <AnchorNext href='https://github.com/hyprwm/hyprland'>Hyprland</AnchorNext>, this option
<Code>XDG_CURRENT_DESKTOP=sway</Code> to workaround Flameshot&apos;s errors will set the <Code>XDG_CURRENT_DESKTOP=sway</Code> to workaround Flameshot&apos;s errors
</> </>
} }
disabled={!isUploadFile} disabled={!isUploadFile}

21
src/components/pages/Manage/index.tsx
View file

@ -35,14 +35,15 @@ import {
IconUserMinus, IconUserMinus,
IconUserX, IconUserX,
} from '@tabler/icons-react'; } from '@tabler/icons-react';
import AnchorNext from 'components/AnchorNext';
import { DiscordIcon, FlameshotIcon, GitHubIcon, GoogleIcon, ShareXIcon } from 'components/icons'; import { DiscordIcon, FlameshotIcon, GitHubIcon, GoogleIcon, ShareXIcon } from 'components/icons';
import Link from 'components/Link';
import MutedText from 'components/MutedText'; import MutedText from 'components/MutedText';
import { SmallTable } from 'components/SmallTable'; import { SmallTable } from 'components/SmallTable';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import { userSelector } from 'lib/recoil/user'; import { userSelector } from 'lib/recoil/user';
import { bytesToHuman } from 'lib/utils/bytes'; import { bytesToHuman } from 'lib/utils/bytes';
import { capitalize } from 'lib/utils/client'; import { capitalize } from 'lib/utils/client';
import Link from 'next/link';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useRecoilState } from 'recoil'; import { useRecoilState } from 'recoil';
import ClearStorage from './ClearStorage'; import ClearStorage from './ClearStorage';
@ -355,7 +356,8 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
<Title>Manage User</Title> <Title>Manage User</Title>
<MutedText size='md'> <MutedText size='md'>
Want to use variables in embed text? Visit{' '} Want to use variables in embed text? Visit{' '}
<Link href='https://zipline.diced.tech/docs/guides/variables'>the docs</Link> for variables <AnchorNext href='https://zipline.diced.tech/docs/guides/variables'>the docs</AnchorNext> for
variables
</MutedText> </MutedText>
<form onSubmit={form.onSubmit((v) => onSubmit(v))}> <form onSubmit={form.onSubmit((v) => onSubmit(v))}>
<TextInput id='username' label='Username' my='sm' {...form.getInputProps('username')} /> <TextInput id='username' label='Username' my='sm' {...form.getInputProps('username')} />
@ -459,11 +461,16 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
!user.oauth?.map(({ provider }) => provider.toLowerCase()).includes(x.name.toLowerCase()) !user.oauth?.map(({ provider }) => provider.toLowerCase()).includes(x.name.toLowerCase())
) )
.map(({ link_url, name, Icon }, i) => ( .map(({ link_url, name, Icon }, i) => (
<Link key={i} href={link_url} passHref legacyBehavior> <Button
<Button size='lg' leftIcon={<Icon colorScheme='manage' />} component='a' my='sm'> key={i}
Link account with {name} size='lg'
</Button> leftIcon={<Icon colorScheme='manage' />}
</Link> component={Link}
href={link_url}
my='sm'
>
Link account with {name}
</Button>
))} ))}
{user?.oauth?.map(({ provider }, i) => ( {user?.oauth?.map(({ provider }, i) => (

6
src/components/pages/Upload/showFilesModal.tsx
View file

@ -1,7 +1,7 @@
import { ActionIcon, Group, Stack, Table, Title, Tooltip } from '@mantine/core'; import { ActionIcon, Group, Stack, Table, Title, Tooltip } from '@mantine/core';
import { showNotification } from '@mantine/notifications'; import { showNotification } from '@mantine/notifications';
import { IconClipboardCopy, IconExternalLink } from '@tabler/icons-react'; import { IconClipboardCopy, IconExternalLink } from '@tabler/icons-react';
import Link from 'components/Link'; import AnchorNext from 'components/AnchorNext';
export default function showFilesModal(clipboard, modals, files: string[]) { export default function showFilesModal(clipboard, modals, files: string[]) {
const open = (idx: number) => window.open(files[idx], '_blank'); const open = (idx: number) => window.open(files[idx], '_blank');
@ -16,7 +16,7 @@ export default function showFilesModal(clipboard, modals, files: string[]) {
else else
showNotification({ showNotification({
title: 'Copied to clipboard', title: 'Copied to clipboard',
message: <Link href={files[idx]}>{files[idx]}</Link>, message: <AnchorNext href={files[idx]}>{files[idx]}</AnchorNext>,
icon: <IconClipboardCopy size='1rem' />, icon: <IconClipboardCopy size='1rem' />,
}); });
}; };
@ -30,7 +30,7 @@ export default function showFilesModal(clipboard, modals, files: string[]) {
{files.map((file, idx) => ( {files.map((file, idx) => (
<Group key={idx} position='apart'> <Group key={idx} position='apart'>
<Group position='left'> <Group position='left'>
<Link href={file}>{file}</Link> <AnchorNext href={file}>{file}</AnchorNext>
</Group> </Group>
<Group position='right'> <Group position='right'>
<Tooltip label='Open link in a new tab'> <Tooltip label='Open link in a new tab'>

12
src/components/pages/Urls/URLCard.tsx
View file

@ -1,11 +1,9 @@
import { ActionIcon, Card, Group, LoadingOverlay, Stack, Title, Tooltip } from '@mantine/core'; import { ActionIcon, Anchor, Card, Group, Stack, Title, Tooltip } from '@mantine/core';
import { useClipboard } from '@mantine/hooks'; import { IconClipboardCopy, IconExternalLink, IconTrash } from '@tabler/icons-react';
import { showNotification } from '@mantine/notifications';
import { IconClipboardCopy, IconExternalLink, IconLink, IconLinkOff, IconTrash } from '@tabler/icons-react';
import Link from 'components/Link';
import MutedText from 'components/MutedText'; import MutedText from 'components/MutedText';
import { URLResponse, useURLDelete } from 'lib/queries/url'; import { URLResponse } from 'lib/queries/url';
import { relativeTime } from 'lib/utils/client'; import { relativeTime } from 'lib/utils/client';
import Link from 'next/link';
export default function URLCard({ export default function URLCard({
url, url,
@ -37,7 +35,7 @@ export default function URLCard({
)} )}
<MutedText size='sm'>Views: {url.views}</MutedText> <MutedText size='sm'>Views: {url.views}</MutedText>
<MutedText size='sm'> <MutedText size='sm'>
URL: <Link href={url.destination}>{url.destination}</Link> URL: <AnchorNext href={url.destination}>{url.destination}</AnchorNext>
</MutedText> </MutedText>
</Stack> </Stack>
</Group> </Group>

13
src/components/pages/Urls/index.tsx
View file

@ -9,10 +9,10 @@ import {
NumberInput, NumberInput,
SimpleGrid, SimpleGrid,
Skeleton, Skeleton,
Text,
TextInput, TextInput,
Title, Title,
Tooltip, Tooltip,
Text,
} from '@mantine/core'; } from '@mantine/core';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { useClipboard } from '@mantine/hooks'; import { useClipboard } from '@mantine/hooks';
@ -26,12 +26,13 @@ import {
IconLinkOff, IconLinkOff,
IconList, IconList,
} from '@tabler/icons-react'; } from '@tabler/icons-react';
import Link from 'components/Link'; import AnchorNext from 'components/AnchorNext';
import MutedText from 'components/MutedText'; import MutedText from 'components/MutedText';
import { useURLDelete, useURLs } from 'lib/queries/url'; import { useURLDelete, useURLs } from 'lib/queries/url';
import { listViewUrlsSelector } from 'lib/recoil/settings'; import { listViewUrlsSelector } from 'lib/recoil/settings';
import { userSelector } from 'lib/recoil/user'; import { userSelector } from 'lib/recoil/user';
import { DataTable, DataTableSortStatus } from 'mantine-datatable'; import { DataTable, DataTableSortStatus } from 'mantine-datatable';
import Link from 'next/link';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil'; import { useRecoilState, useRecoilValue } from 'recoil';
import URLCard from './URLCard'; import URLCard from './URLCard';
@ -85,7 +86,7 @@ export default function Urls() {
clipboard.copy(url); clipboard.copy(url);
showNotification({ showNotification({
title: 'Copied to clipboard', title: 'Copied to clipboard',
message: <Link href={url}>{url}</Link>, message: <AnchorNext href={url}>{url}</AnchorNext>,
color: 'green', color: 'green',
icon: <IconClipboardCopy size='1rem' />, icon: <IconClipboardCopy size='1rem' />,
}); });
@ -141,7 +142,7 @@ export default function Urls() {
children: ( children: (
<Group position='apart'> <Group position='apart'>
<Group position='left'> <Group position='left'>
<Link href={json.url}>{data.vanity ?? json.url}</Link> <AnchorNext href={json.url}>{data.vanity ?? json.url}</AnchorNext>
</Group> </Group>
<Group position='right'> <Group position='right'>
<Tooltip label='Open link in a new tab'> <Tooltip label='Open link in a new tab'>
@ -268,9 +269,9 @@ export default function Urls() {
title: 'URL', title: 'URL',
sortable: true, sortable: true,
render: (url) => ( render: (url) => (
<Anchor component={Link} href={url.url} target='_blank'> <AnchorNext href={url.url} target='_blank'>
{url.destination} {url.destination}
</Anchor> </AnchorNext>
), ),
}, },
{ {

2
src/pages/404.tsx
View file

@ -1,7 +1,7 @@
import { Button, Stack, Title } from '@mantine/core'; import { Button, Stack, Title } from '@mantine/core';
import Link from 'components/Link';
import MutedText from 'components/MutedText'; import MutedText from 'components/MutedText';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link';
export default function FourOhFour() { export default function FourOhFour() {
return ( return (

2
src/pages/500.tsx
View file

@ -1,7 +1,7 @@
import { Button, Stack, Title, Tooltip } from '@mantine/core'; import { Button, Stack, Title, Tooltip } from '@mantine/core';
import Link from 'components/Link';
import MutedText from 'components/MutedText'; import MutedText from 'components/MutedText';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link';
export default function FiveHundred() { export default function FiveHundred() {
return ( return (

2
src/pages/_error.tsx
View file

@ -1,7 +1,7 @@
import { Button, Stack, Title } from '@mantine/core'; import { Button, Stack, Title } from '@mantine/core';
import Link from 'components/Link';
import MutedText from 'components/MutedText'; import MutedText from 'components/MutedText';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link';
export default function Error({ statusCode, oauthError }) { export default function Error({ statusCode, oauthError }) {
return ( return (

27
src/pages/auth/login.tsx
View file

@ -21,6 +21,7 @@ import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
export { getServerSideProps } from 'middleware/getServerSideProps'; export { getServerSideProps } from 'middleware/getServerSideProps';
import AnchorNext from 'components/AnchorNext';
export default function Login({ title, user_registration, oauth_registration, oauth_providers: unparsed }) { export default function Login({ title, user_registration, oauth_registration, oauth_providers: unparsed }) {
const router = useRouter(); const router = useRouter();
@ -159,19 +160,19 @@ export default function Login({ title, user_registration, oauth_registration, oa
<> <>
<Group grow> <Group grow>
{oauth_providers.map(({ url, name, Icon }, i) => ( {oauth_providers.map(({ url, name, Icon }, i) => (
<Link key={i} href={url} passHref legacyBehavior> <Button
<Button key={i}
size='sm' size='sm'
variant='outline' variant='outline'
radius='md' radius='md'
fullWidth fullWidth
leftIcon={<Icon height={'15'} width={'15'} colorScheme='dark' />} leftIcon={<Icon height={'15'} width={'15'} colorScheme='dark' />}
component='a' my='xs'
my='xs' component={Link}
> href={url}
{name} >
</Button> {name}
</Link> </Button>
))} ))}
</Group> </Group>

2
src/pages/oauth_error.tsx
View file

@ -1,8 +1,8 @@
import { Button, Stack, Title } from '@mantine/core'; import { Button, Stack, Title } from '@mantine/core';
import Link from 'components/Link';
import MutedText from 'components/MutedText'; import MutedText from 'components/MutedText';
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';

7
src/pages/view/[id].tsx
View file

@ -1,13 +1,14 @@
import { Box, Button, Modal, PasswordInput } from '@mantine/core'; import { Box, Button, Modal, PasswordInput } from '@mantine/core';
import type { File } from '@prisma/client'; import type { File } from '@prisma/client';
import AnchorNext from 'components/AnchorNext';
import config from 'lib/config'; import config from 'lib/config';
import Link from 'components/Link';
import exts from 'lib/exts'; import exts from 'lib/exts';
import prisma from 'lib/prisma'; import prisma from 'lib/prisma';
import { parseString } from 'lib/utils/parser'; import { parseString } from 'lib/utils/parser';
import type { UserExtended } from 'middleware/withZipline'; import type { UserExtended } from 'middleware/withZipline';
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -190,7 +191,9 @@ export default function EmbeddedFile({
{!file.mimetype.startsWith('video') && {!file.mimetype.startsWith('video') &&
!file.mimetype.startsWith('image') && !file.mimetype.startsWith('image') &&
!file.mimetype.startsWith('audio') && ( !file.mimetype.startsWith('audio') && (
<Link href={dataURL('/r')}>Can&#39;t preview this file. Click here to download it.</Link> <AnchorNext component={Link} href={dataURL('/r')}>
Can&#39;t preview this file. Click here to download it.
</AnchorNext>
)} )}
</Box> </Box>
</> </>