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
.filter((x) => (x.if ? x.if(user, props) : true))
.map(({ icon, text, link }) => (
<Link href={link} key={text} passHref legacyBehavior>
<NavLink
component='a'
label={text}
icon={icon}
active={router.pathname === link}
variant='light'
/>
</Link>
<NavLink
key={text}
label={text}
icon={icon}
active={router.pathname === link}
variant='light'
component={Link}
href={link}
/>
))}
</NavLink>
) : (
<Link href={link} key={text} passHref legacyBehavior>
<NavLink
component='a'
label={text}
icon={icon}
active={router.pathname === link}
variant='light'
/>
</Link>
<NavLink
key={text}
label={text}
icon={icon}
active={router.pathname === link}
variant='light'
component={Link}
href={link}
/>
)
)}
</Navbar.Section>
<Navbar.Section>
{external_links.length
? external_links.map(({ label, link }, i) => (
<Link href={link} passHref key={i} legacyBehavior>
<NavLink
label={label}
component='a'
target='_blank'
variant='light'
icon={<IconExternalLink size={18} />}
/>
</Link>
<NavLink
key={label}
label={label}
target='_blank'
variant='light'
icon={<IconExternalLink size={18} />}
component={Link}
href={link}
/>
))
: null}
</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'>
<Title>Files</Title>
<Link href='/dashboard/upload/file' passHref legacyBehavior>
<ActionIcon component='a' variant='filled' color='primary'>
<IconFileUpload size='1rem' />
</ActionIcon>
</Link>
<ActionIcon component={Link} href='/dashboard/upload/file' variant='filled' color='primary'>
<IconFileUpload size='1rem' />
</ActionIcon>
</Group>
{favoritePages.isSuccess && favoritePages.data.length ? (
<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 { useModals } from '@mantine/modals';
import { showNotification } from '@mantine/notifications';
@ -16,13 +27,14 @@ import {
IconLockAccessOff,
IconLockOpen,
} from '@tabler/icons-react';
import Link from 'components/Link';
import AnchorNext from 'components/AnchorNext';
import MutedText from 'components/MutedText';
import useFetch from 'hooks/useFetch';
import { useFolders } from 'lib/queries/folders';
import { listViewFoldersSelector } from 'lib/recoil/settings';
import { relativeTime } from 'lib/utils/client';
import { DataTable, DataTableSortStatus } from 'mantine-datatable';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { useRecoilState } from 'recoil';
@ -366,7 +378,8 @@ export default function Folders({ disableMediaPreview, exifEnabled, compress })
title: 'Copied folder link',
message: (
<>
Copied <Link href={`/folder/${folder.id}`}>folder link</Link> to
Copied{' '}
<AnchorNext href={`/folder/${folder.id}`}>folder link</AnchorNext> to
clipboard
</>
),

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

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

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

@ -1,4 +1,5 @@
import {
Anchor,
Box,
Button,
Checkbox,
@ -15,8 +16,9 @@ import {
} from '@mantine/core';
import { useForm } from '@mantine/form';
import { IconFileDownload, IconWorld } from '@tabler/icons-react';
import Link from 'components/Link';
import AnchorNext from 'components/AnchorNext';
import MutedText from 'components/MutedText';
import Link from 'next/link';
import { useReducer, useState } from 'react';
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>
<MutedText size='sm'>
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>
</Link>{' '}
</AnchorNext>{' '}
for the <Code>wl-copy</Code> command.
</MutedText>
</Box>
@ -197,8 +199,8 @@ export function GeneratorModal({ opened, onClose, title, onSubmit, ...other }) {
description={
<>
If using a compositor such as{' '}
<Link href='https://github.com/hyprwm/hyprland'>Hyprland</Link>, this option will set the{' '}
<Code>XDG_CURRENT_DESKTOP=sway</Code> to workaround Flameshot&apos;s errors
<AnchorNext href='https://github.com/hyprwm/hyprland'>Hyprland</AnchorNext>, this option
will set the <Code>XDG_CURRENT_DESKTOP=sway</Code> to workaround Flameshot&apos;s errors
</>
}
disabled={!isUploadFile}

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

@ -35,14 +35,15 @@ import {
IconUserMinus,
IconUserX,
} from '@tabler/icons-react';
import AnchorNext from 'components/AnchorNext';
import { DiscordIcon, FlameshotIcon, GitHubIcon, GoogleIcon, ShareXIcon } from 'components/icons';
import Link from 'components/Link';
import MutedText from 'components/MutedText';
import { SmallTable } from 'components/SmallTable';
import useFetch from 'hooks/useFetch';
import { userSelector } from 'lib/recoil/user';
import { bytesToHuman } from 'lib/utils/bytes';
import { capitalize } from 'lib/utils/client';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { useRecoilState } from 'recoil';
import ClearStorage from './ClearStorage';
@ -355,7 +356,8 @@ export default function Manage({ oauth_registration, oauth_providers: raw_oauth_
<Title>Manage User</Title>
<MutedText size='md'>
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>
<form onSubmit={form.onSubmit((v) => onSubmit(v))}>
<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())
)
.map(({ link_url, name, Icon }, i) => (
<Link key={i} href={link_url} passHref legacyBehavior>
<Button size='lg' leftIcon={<Icon colorScheme='manage' />} component='a' my='sm'>
Link account with {name}
</Button>
</Link>
<Button
key={i}
size='lg'
leftIcon={<Icon colorScheme='manage' />}
component={Link}
href={link_url}
my='sm'
>
Link account with {name}
</Button>
))}
{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 { showNotification } from '@mantine/notifications';
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[]) {
const open = (idx: number) => window.open(files[idx], '_blank');
@ -16,7 +16,7 @@ export default function showFilesModal(clipboard, modals, files: string[]) {
else
showNotification({
title: 'Copied to clipboard',
message: <Link href={files[idx]}>{files[idx]}</Link>,
message: <AnchorNext href={files[idx]}>{files[idx]}</AnchorNext>,
icon: <IconClipboardCopy size='1rem' />,
});
};
@ -30,7 +30,7 @@ export default function showFilesModal(clipboard, modals, files: string[]) {
{files.map((file, idx) => (
<Group key={idx} position='apart'>
<Group position='left'>
<Link href={file}>{file}</Link>
<AnchorNext href={file}>{file}</AnchorNext>
</Group>
<Group position='right'>
<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 { useClipboard } from '@mantine/hooks';
import { showNotification } from '@mantine/notifications';
import { IconClipboardCopy, IconExternalLink, IconLink, IconLinkOff, IconTrash } from '@tabler/icons-react';
import Link from 'components/Link';
import { ActionIcon, Anchor, Card, Group, Stack, Title, Tooltip } from '@mantine/core';
import { IconClipboardCopy, IconExternalLink, IconTrash } from '@tabler/icons-react';
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 Link from 'next/link';
export default function URLCard({
url,
@ -37,7 +35,7 @@ export default function URLCard({
)}
<MutedText size='sm'>Views: {url.views}</MutedText>
<MutedText size='sm'>
URL: <Link href={url.destination}>{url.destination}</Link>
URL: <AnchorNext href={url.destination}>{url.destination}</AnchorNext>
</MutedText>
</Stack>
</Group>

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

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

2
src/pages/404.tsx
View file

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

2
src/pages/500.tsx
View file

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

2
src/pages/_error.tsx
View file

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

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

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

2
src/pages/oauth_error.tsx
View file

@ -1,8 +1,8 @@
import { Button, Stack, Title } from '@mantine/core';
import Link from 'components/Link';
import MutedText from 'components/MutedText';
import { GetServerSideProps } from 'next';
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';
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 type { File } from '@prisma/client';
import AnchorNext from 'components/AnchorNext';
import config from 'lib/config';
import Link from 'components/Link';
import exts from 'lib/exts';
import prisma from 'lib/prisma';
import { parseString } from 'lib/utils/parser';
import type { UserExtended } from 'middleware/withZipline';
import { GetServerSideProps } from 'next';
import Head from 'next/head';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
@ -190,7 +191,9 @@ export default function EmbeddedFile({
{!file.mimetype.startsWith('video') &&
!file.mimetype.startsWith('image') &&
!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>
</>