2 |
3 | # Are.na Multiplexer
4 |
5 | Are.na Multiplexer is a tiling window manager for [Are.na](https://are.na)
6 |
7 | Hosted at https://arena-mux.michaelguidetti.info
8 |
9 | 
10 |
11 | ## Development
12 |
13 | ### Setup
14 | - Fork and clone this repo
15 | - Register an application with Are.na at https://dev.are.na/oauth/applications
16 | - Add `https://localhost:3001/api/auth/callback/arena` as a callback URL in your registered application's settings
17 | - Set the following variables in `.env.local`
18 | | KEY | VALUE |
19 | | --- | --- |
20 | | `ARENA_APP_ID` | `UID` from your registered app at dev.are.na |
21 | | `ARENA_APP_SECRET` | `Secret` from your registered app at dev.are.na |
22 | | `NEXT_AUTH_SECRET` | Generate local secret by running `openssl rand -base64 32` |
23 | | `NEXT_AUTH_URL` | `https://localhost:3001` |
24 | - Run `yarn install`
25 | - Run `yarn dev`
26 | - Visit https://localhost:3001 (bypass unsigned certificate warning)
27 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 |
3 | const nextConfig = {
4 | reactStrictMode: true,
5 | env: {
6 | npm_package_version: process.env.npm_package_version
7 | },
8 | webpack: config => {
9 | config.module.rules.push({
10 | test: /\.svg$/i,
11 | issuer: /\.[jt]sx?$/,
12 | use: ['@svgr/webpack']
13 | })
14 |
15 | return config
16 | }
17 | }
18 |
19 | module.exports = nextConfig
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "arena-multiplexer",
3 | "version": "0.2.0",
4 | "private": true,
5 | "license": "MIT",
6 | "repository": "https://github.com/mguidetti/arena-multiplexer",
7 | "author": "Michael Guidetti
13 |
16 | )
17 | } else {
18 | return (
19 | Loading
15 |
20 |
27 |
28 | )
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/BlockActions.tsx:
--------------------------------------------------------------------------------
1 | import { useBlockContext } from '@/context/BlockContext'
2 | import { useWindowContext } from '@/context/WindowContext'
3 | import { EyeIcon, LinkIcon, TrashIcon } from '@heroicons/react/20/solid'
4 |
5 | function BlockActions () {
6 | const { data, handleView, handleDelete } = useBlockContext()
7 | const windowCtx = useWindowContext()
8 |
9 | return (
10 | <>
11 | {data.class === 'Link' && (
12 |
19 | -
35 | {connections.map(channel => (
36 |
- 37 | 48 | 49 | ))} 50 |
94 | {children}
95 |
96 | )
97 | }
98 |
99 | export default BlockContainer
100 |
--------------------------------------------------------------------------------
/src/components/BlockDndWrapper.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | CollisionDetection,
3 | DndContext,
4 | DragOverlay,
5 | DragStartEvent,
6 | PointerSensor,
7 | pointerWithin,
8 | rectIntersection,
9 | useSensor,
10 | useSensors
11 | } from '@dnd-kit/core'
12 | import { ArenaChannelContents } from 'arena-ts'
13 | import { ReactNode, useState } from 'react'
14 | import BlockDragOverlay from './BlockDragOverlay'
15 | import { ChannelWindowState } from './Desktop'
16 |
17 | interface DraggingBlockState {
18 | block: ArenaChannelContents,
19 | window: ChannelWindowState
20 | }
21 |
22 | function BlockDndWrapper ({ children }: { children: ReactNode }) {
23 | const [draggingBlock, setDraggingBlock] = useState
19 | {renderItem()}
20 |
21 |
22 | )
23 | }
24 |
25 | export default BlockDragOverlay
26 |
--------------------------------------------------------------------------------
/src/components/BlockInfo.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowTopRightOnSquareIcon, ChevronRightIcon } from '@heroicons/react/24/solid'
2 | import { ArenaBlock, ConnectionData } from 'arena-ts'
3 | import dayjs from 'dayjs'
4 | import relativeTime from 'dayjs/plugin/relativeTime'
5 | import { Dispatch, SetStateAction } from 'react'
6 | import BlockConnections from './BlockConnnections'
7 |
8 | dayjs.extend(relativeTime)
9 |
10 | interface BlockInfoProps {
11 | blockData: ArenaBlock & ConnectionData,
12 | setInfoVisible: Dispatch
18 |
21 |
22 |
51 | )
52 | }
53 |
54 | export default BlockInfo
55 |
--------------------------------------------------------------------------------
/src/components/BlockViewer.tsx:
--------------------------------------------------------------------------------
1 | import { useBlockViewerActionsContext, useBlockViewerContext } from '@/context/BlockViewerContext'
2 | import ArenaMarkIcon from '@/icons/arena-mark.svg'
3 | import { InformationCircleIcon, XMarkIcon } from '@heroicons/react/24/solid'
4 | import * as Dialog from '@radix-ui/react-dialog'
5 | import { ArenaBlock } from 'arena-ts'
6 | import { useState } from 'react'
7 | import { useHotkeys } from 'react-hotkeys-hook'
8 | import BlockInfo from './BlockInfo'
9 | import Spinner from './Spinner'
10 |
11 | function AttachmentBlock ({ data }: { data: ArenaBlock }) {
12 | const renderBody = () => {
13 | if (data.image) {
14 | return
23 |
42 |
43 |
44 |
45 | {blockData.generated_title}
24 |
25 | {blockData.description &&
41 | {blockData.description}
} 26 |
27 | Created {dayjs(blockData.created_at).fromNow()} by{' '}
28 |
29 | {blockData.user.username}
Connections
46 | 47 |
48 |
49 |
50 |
38 |
40 | )}
41 |
42 | {data.source?.url}
63 |
119 | {renderBlock()}
120 |
121 |
122 |
123 |
125 |
126 |
13 |
14 |
15 | )
16 | })
17 |
18 | function BlocksGrid ({ blocks }: { blocks: ArenaChannelContents[] }) {
19 | const { loadMore } = useWindowContext()
20 |
21 | return (
22 |
29 | {renderBlock()}
30 |
31 | {(isHovering || isDragging) && (
32 |
47 | )
48 | }
49 |
50 | function AttachmentBlock ({ data }: {data: ArenaBlock}) {
51 | if (data.image) {
52 | return
33 | {isHovering && (
34 |
39 | )}
40 |
41 | {isPending && (
42 |
35 |
37 | )}
38 |
43 |
45 | )}
46 |
56 |
58 | )
59 | }
60 | }
61 |
62 | function ChannelBlock ({ data }: {data: ArenaChannelWithDetails}) {
63 | return (
64 | {data.generated_title}
57 |
71 |
72 | {data.title}
73 |
74 |
75 | by {data.user?.username}
76 |
77 | {data.length} blocks 78 | 79 |
80 | )
81 | }
82 |
83 | function ImageBlock ({ data }: {data: ArenaBlock}) {
84 | return (
85 | 77 | {data.length} blocks 78 | 79 |
94 |
98 |
99 | )
100 | }
101 |
102 | export default BlocksGridItem
103 |
--------------------------------------------------------------------------------
/src/components/BlocksList.tsx:
--------------------------------------------------------------------------------
1 | import { useWindowContext } from '@/context/WindowContext'
2 | import { ArenaChannelContents } from 'arena-ts'
3 | import React from 'react'
4 | import { Components, Virtuoso } from 'react-virtuoso'
5 | import BlockContainer from './BlockContainer'
6 | import BlocksListItem from './BlocksListItem'
7 | import WindowFooter from './WindowFooter'
8 | import WindowScroller from './WindowScroller'
9 |
10 | const ListContainer: Components['List'] = React.forwardRef(function ListContainer (props, ref) {
11 | return
12 | })
13 |
14 | function BlocksList ({ blocks }: {blocks: ArenaChannelContents[]}) {
15 | const windowCtx = useWindowContext()
16 |
17 | return (
18 |
17 |
22 | )
23 | }
24 |
25 | function BlockBody ({ data }: {data:ArenaBlock}) {
26 | return (
27 | <>
28 |
18 |
20 | {`${data.user?.username} / ${data.title}`}
21 |
29 | {data.image && 
}
30 |
31 | }
30 | {data.title || data.generated_title}
32 |
33 | )
34 | }
35 |
36 | function BlocksListItem ({ data }: {data: ArenaChannelContents}) {
37 | const { isPending, isHovering } = useBlockContext()
38 |
39 | return (
40 |
43 | {data.class === 'Channel' ?
57 | )
58 | }
59 |
60 | export default BlocksListItem
61 |
--------------------------------------------------------------------------------
/src/components/ChannelCreator.tsx:
--------------------------------------------------------------------------------
1 | import { useArena } from '@/hooks/useArena'
2 | import getErrorMessage from '@/lib/getErrorMessage'
3 | import { PlusIcon } from '@heroicons/react/24/solid'
4 | import * as Popover from '@radix-ui/react-popover'
5 | import { ArenaChannelWithDetails, ChannelStatus } from 'arena-ts'
6 | import classNames from 'classnames'
7 | import { ChangeEvent, FormEvent, useState } from 'react'
8 | import { useDesktopActionsContext } from '../context/DesktopContext'
9 | import Spinner from './Spinner'
10 |
11 | interface FormDataType {
12 | name: '',
13 | privacy: ChannelStatus | ''
14 | }
15 |
16 | function ChannelCreator () {
17 | const { addChannelWindow } = useDesktopActionsContext()
18 | const arena = useArena()
19 |
20 | const [open, setOpen] = useState(false)
21 | const [isCreating, setIsCreating] = useState(false)
22 | const [formData, setFormData] = useState
47 |
49 | )}
50 |
51 | {isHovering && (
52 |
53 |
55 | )}
56 |
73 |
75 | )}
76 |
77 | {error && {error}
} 78 | 79 | 115 |