git.iko.soy/sphinx
on master help sign in
posts: adding capabilities to mass add posts, cleaning up mobile
f9ed835Hunter Miller
ui/package-lock.json+93
compare with master
unifiedsplit
@@ -17,12 +17,14 @@
17 "big-integer": "^1.6.51",
17 "big-integer": "^1.6.51",
18 "classnames": "^2.3.1",
18 "classnames": "^2.3.1",
19 "lodash.debounce": "^4.0.8",
19 "lodash.debounce": "^4.0.8",
20+ "query-string": "^7.1.1",
20 "react": "^17.0.2",
21 "react": "^17.0.2",
21 "react-dom": "^17.0.2",
22 "react-dom": "^17.0.2",
22 "react-hook-form": "^7.33.1",
23 "react-hook-form": "^7.33.1",
23 "react-query": "^3.39.1",
24 "react-query": "^3.39.1",
24 "react-router-dom": "^6.3.0",
25 "react-router-dom": "^6.3.0",
25 "react-select": "^5.4.0",
26 "react-select": "^5.4.0",
27+ "remove-markdown-and-html": "^0.1.0",
26 "zustand": "^4.0.0-rc.1"
28 "zustand": "^4.0.0-rc.1"
27 },
29 },
28 "devDependencies": {
30 "devDependencies": {
@@ -33,6 +35,7 @@
33 "@vitejs/plugin-react-refresh": "^1.3.1",
35 "@vitejs/plugin-react-refresh": "^1.3.1",
34 "autoprefixer": "^10.4.7",
36 "autoprefixer": "^10.4.7",
35 "postcss": "^8.4.14",
37 "postcss": "^8.4.14",
38+ "postcss-import": "^14.1.0",
36 "tailwindcss": "^3.1.4",
39 "tailwindcss": "^3.1.4",
37 "tailwindcss-labeled-groups": "^0.0.2",
40 "tailwindcss-labeled-groups": "^0.0.2",
38 "typescript": "^4.3.2",
41 "typescript": "^4.3.2",
@@ -1565,6 +1568,14 @@
1565 }
1568 }
1566 }
1569 }
1567 },
1570 },
1571+ "node_modules/decode-uri-component": {
1572+ "version": "0.2.0",
1573+ "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
1574+ "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
1575+ "engines": {
1576+ "node": ">=0.10"
1577+ }
1578+ },
1568 "node_modules/defined": {
1579 "node_modules/defined": {
1569 "version": "1.0.0",
1580 "version": "1.0.0",
1570 "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
1581 "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
@@ -2058,6 +2069,14 @@
2058 "node": ">=8"
2069 "node": ">=8"
2059 }
2070 }
2060 },
2071 },
2072+ "node_modules/filter-obj": {
2073+ "version": "1.1.0",
2074+ "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
2075+ "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
2076+ "engines": {
2077+ "node": ">=0.10.0"
2078+ }
2079+ },
2061 "node_modules/find-root": {
2080 "node_modules/find-root": {
2062 "version": "1.1.0",
2081 "version": "1.1.0",
2063 "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
2082 "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
@@ -2719,6 +2738,23 @@
2719 "react-is": "^16.13.1"
2738 "react-is": "^16.13.1"
2720 }
2739 }
2721 },
2740 },
2741+ "node_modules/query-string": {
2742+ "version": "7.1.1",
2743+ "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.1.tgz",
2744+ "integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
2745+ "dependencies": {
2746+ "decode-uri-component": "^0.2.0",
2747+ "filter-obj": "^1.1.0",
2748+ "split-on-first": "^1.0.0",
2749+ "strict-uri-encode": "^2.0.0"
2750+ },
2751+ "engines": {
2752+ "node": ">=6"
2753+ },
2754+ "funding": {
2755+ "url": "https://github.com/sponsors/sindresorhus"
2756+ }
2757+ },
2722 "node_modules/queue-microtask": {
2758 "node_modules/queue-microtask": {
2723 "version": "1.2.3",
2759 "version": "1.2.3",
2724 "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
2760 "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3000,6 +3036,11 @@
3000 "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
3036 "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
3001 "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
3037 "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
3002 },
3038 },
3039+ "node_modules/remove-markdown-and-html": {
3040+ "version": "0.1.0",
3041+ "resolved": "https://registry.npmjs.org/remove-markdown-and-html/-/remove-markdown-and-html-0.1.0.tgz",
3042+ "integrity": "sha512-Sy03RJ/R/FBbK6wutBKKIyEVMQS+TzSpGc8pBxwrh0LiqyVIaD/LkitUABIJJ59iryhvrPTmS8dzd3DoLdopHg=="
3043+ },
3003 "node_modules/resolve": {
3044 "node_modules/resolve": {
3004 "version": "1.22.1",
3045 "version": "1.22.1",
3005 "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
3046 "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -3125,6 +3166,22 @@
3125 "node": ">=0.10.0"
3166 "node": ">=0.10.0"
3126 }
3167 }
3127 },
3168 },
3169+ "node_modules/split-on-first": {
3170+ "version": "1.1.0",
3171+ "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
3172+ "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
3173+ "engines": {
3174+ "node": ">=6"
3175+ }
3176+ },
3177+ "node_modules/strict-uri-encode": {
3178+ "version": "2.0.0",
3179+ "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
3180+ "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
3181+ "engines": {
3182+ "node": ">=4"
3183+ }
3184+ },
3128 "node_modules/stylis": {
3185 "node_modules/stylis": {
3129 "version": "4.0.13",
3186 "version": "4.0.13",
3130 "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
3187 "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
@@ -4635,6 +4692,11 @@
4635 "ms": "2.1.2"
4692 "ms": "2.1.2"
4636 }
4693 }
4637 },
4694 },
4695+ "decode-uri-component": {
4696+ "version": "0.2.0",
4697+ "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
4698+ "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og=="
4699+ },
4638 "defined": {
4700 "defined": {
4639 "version": "1.0.0",
4701 "version": "1.0.0",
4640 "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
4702 "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
@@ -4922,6 +4984,11 @@
4922 "to-regex-range": "^5.0.1"
4984 "to-regex-range": "^5.0.1"
4923 }
4985 }
4924 },
4986 },
4987+ "filter-obj": {
4988+ "version": "1.1.0",
4989+ "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
4990+ "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ=="
4991+ },
4925 "find-root": {
4992 "find-root": {
4926 "version": "1.1.0",
4993 "version": "1.1.0",
4927 "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
4994 "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
@@ -5390,6 +5457,17 @@
5390 "react-is": "^16.13.1"
5457 "react-is": "^16.13.1"
5391 }
5458 }
5392 },
5459 },
5460+ "query-string": {
5461+ "version": "7.1.1",
5462+ "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.1.tgz",
5463+ "integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==",
5464+ "requires": {
5465+ "decode-uri-component": "^0.2.0",
5466+ "filter-obj": "^1.1.0",
5467+ "split-on-first": "^1.0.0",
5468+ "strict-uri-encode": "^2.0.0"
5469+ }
5470+ },
5393 "queue-microtask": {
5471 "queue-microtask": {
5394 "version": "1.2.3",
5472 "version": "1.2.3",
5395 "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
5473 "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5570,6 +5648,11 @@
5570 "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
5648 "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
5571 "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
5649 "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
5572 },
5650 },
5651+ "remove-markdown-and-html": {
5652+ "version": "0.1.0",
5653+ "resolved": "https://registry.npmjs.org/remove-markdown-and-html/-/remove-markdown-and-html-0.1.0.tgz",
5654+ "integrity": "sha512-Sy03RJ/R/FBbK6wutBKKIyEVMQS+TzSpGc8pBxwrh0LiqyVIaD/LkitUABIJJ59iryhvrPTmS8dzd3DoLdopHg=="
5655+ },
5573 "resolve": {
5656 "resolve": {
5574 "version": "1.22.1",
5657 "version": "1.22.1",
5575 "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
5658 "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -5647,6 +5730,16 @@
5647 "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
5730 "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
5648 "dev": true
5731 "dev": true
5649 },
5732 },
5733+ "split-on-first": {
5734+ "version": "1.1.0",
5735+ "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
5736+ "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
5737+ },
5738+ "strict-uri-encode": {
5739+ "version": "2.0.0",
5740+ "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
5741+ "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
5742+ },
5650 "stylis": {
5743 "stylis": {
5651 "version": "4.0.13",
5744 "version": "4.0.13",
5652 "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
5745 "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
ui/package.json+3
@@ -19,12 +19,14 @@
19 "big-integer": "^1.6.51",
19 "big-integer": "^1.6.51",
20 "classnames": "^2.3.1",
20 "classnames": "^2.3.1",
21 "lodash.debounce": "^4.0.8",
21 "lodash.debounce": "^4.0.8",
22+ "query-string": "^7.1.1",
22 "react": "^17.0.2",
23 "react": "^17.0.2",
23 "react-dom": "^17.0.2",
24 "react-dom": "^17.0.2",
24 "react-hook-form": "^7.33.1",
25 "react-hook-form": "^7.33.1",
25 "react-query": "^3.39.1",
26 "react-query": "^3.39.1",
26 "react-router-dom": "^6.3.0",
27 "react-router-dom": "^6.3.0",
27 "react-select": "^5.4.0",
28 "react-select": "^5.4.0",
29+ "remove-markdown-and-html": "^0.1.0",
28 "zustand": "^4.0.0-rc.1"
30 "zustand": "^4.0.0-rc.1"
29 },
31 },
30 "devDependencies": {
32 "devDependencies": {
@@ -35,6 +37,7 @@
35 "@vitejs/plugin-react-refresh": "^1.3.1",
37 "@vitejs/plugin-react-refresh": "^1.3.1",
36 "autoprefixer": "^10.4.7",
38 "autoprefixer": "^10.4.7",
37 "postcss": "^8.4.14",
39 "postcss": "^8.4.14",
40+ "postcss-import": "^14.1.0",
38 "tailwindcss": "^3.1.4",
41 "tailwindcss": "^3.1.4",
39 "tailwindcss-labeled-groups": "^0.0.2",
42 "tailwindcss-labeled-groups": "^0.0.2",
40 "typescript": "^4.3.2",
43 "typescript": "^4.3.2",
ui/postcss.config.js+2
@@ -1,5 +1,7 @@
1module.exports = {
1module.exports = {
2 plugins: [
2 plugins: [
3+ require('postcss-import'),
4+ require('tailwindcss/nesting'),
3 require('tailwindcss'),
5 require('tailwindcss'),
4 require('autoprefixer'),
6 require('autoprefixer'),
5 ]
7 ]
ui/src/app.tsx+22−13
@@ -1,12 +1,15 @@
1import React from 'react';
1import React from 'react';
2import { QueryClient, QueryClientProvider } from 'react-query';
2import { QueryClient, QueryClientProvider } from 'react-query';
3import { BrowserRouter, Route, Routes } from 'react-router-dom';
3import { BrowserRouter, Route, Routes } from 'react-router-dom';
4+import { CenterColumn } from './components/CenterColumn';
4import { Layout } from './components/Layout';
5import { Layout } from './components/Layout';
5import { AllListings } from './manage-listings/AllListings';
6import { AllListings } from './manage-listings/AllListings';
6import { Apps } from './manage-listings/Apps';
7import { Apps } from './manage-listings/Apps';
7import { Groups } from './manage-listings/Groups';
8import { Groups } from './manage-listings/Groups';
8import { MyListings } from './manage-listings/MyListings';
9import { MyListings } from './manage-listings/MyListings';
10+import { Notebooks } from './manage-listings/Notebooks';
9import { Post } from './manage-listings/Post';
11import { Post } from './manage-listings/Post';
12+import { Posts } from './manage-listings/Posts';
10import { Search } from './pages/Search';
13import { Search } from './pages/Search';
11import { Tag } from './pages/Tag';
14import { Tag } from './pages/Tag';
12
15
@@ -16,20 +19,26 @@ function Main() {
16 return (
19 return (
17 <Routes>
20 <Routes>
18 <Route element={<Layout />}>
21 <Route element={<Layout />}>
22+ <Route element={<CenterColumn />}>
19− <Route path="/" element={<Search />} />
23+ <Route path="/" element={<Search />} />
20− <Route path="/search" element={<Search />} />
24+ <Route path="/search" element={<Search />} />
21− <Route path="/search/:lookup" element={<Search />} />
25+ <Route path="/search/:lookup" element={<Search />} />
22− <Route path="/search/:lookup/:limit/:page" element={<Search />} />
26+ <Route path="/search/:lookup/:limit/:page" element={<Search />} />
23− <Route path="/tags" element={<Tag />} />
27+ <Route path="/tags" element={<Tag />} />
24− <Route path="/tags/:tag" element={<Tag />} />
28+ <Route path="/tags/:tag" element={<Tag />} />
25− <Route path="/tags/:tag/:limit/:page" element={<Tag />} />
29+ <Route path="/tags/:tag/:limit/:page" element={<Tag />} />
30+ </Route>
26 <Route path="/manage-listings">
31 <Route path="/manage-listings">
32+ <Route element={<CenterColumn />}>
27− <Route index element={<MyListings />} />
33+ <Route index element={<MyListings />} />
28− <Route path="all" element={<AllListings />} />
34+ <Route path="all" element={<AllListings />} />
29− <Route path="all/:limit/:page" element={<AllListings />} />
35+ <Route path="all/:limit/:page" element={<AllListings />} />
30− <Route path="post" element={<Post />} />
36+ <Route path="post" element={<Post />} />
31− <Route path="apps" element={<Apps />} />
37+ <Route path="apps" element={<Apps />} />
32− <Route path="groups" element={<Groups />} />
38+ <Route path="groups" element={<Groups />} />
39+ </Route>
40+ <Route path="posts" element={<Notebooks />} />
41+ <Route path="posts/:ship/:name" element={<Notebooks />} />
33 </Route>
42 </Route>
34 </Route>
43 </Route>
35 </Routes>
44 </Routes>
ui/src/components/CenterColumn.tsxnew file+6
@@ -0,0 +1,6 @@
1+import React from 'react';
2+import { Outlet } from 'react-router-dom';
3+
4+export const CenterColumn = () => (
5+ <div className="flex-1 flex flex-col max-w-2xl h-full w-full p-4 sm:py-12 sm:px-8 space-y-6">{<Outlet />}</div>
6+)
ui/src/components/Layout.tsx+62−29
@@ -1,40 +1,73 @@
1+import { MenuIcon } from '@heroicons/react/solid';
2+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
1import cn from 'classnames';
3import cn from 'classnames';
2import React from 'react';
4import React from 'react';
3−import { NavLink, Outlet } from 'react-router-dom';
5+import { NavLink, NavLinkProps, Outlet } from 'react-router-dom';
6+import useMedia from '../logic/useMedia';
7+import { BrowsingRoutes, PostingRoutes } from '../routes';
4import { Meta } from './Meta';
8import { Meta } from './Meta';
5
9
10+const DesktopNavLink = ({ to, children }: NavLinkProps) => (
11+ <li>
12+ <NavLink to={to} className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>
13+ { children }
14+ </NavLink>
15+ </li>
16+)
17+
18+interface WrappedNavLinkProps extends NavLinkProps {
19+ navClassName: (props: { isActive: boolean }) => string;
20+}
21+
22+const WrappedNavLink = React.forwardRef<HTMLAnchorElement, WrappedNavLinkProps>(({ className, navClassName, ...props }, forwardedRef) => {
23+ return (
24+ <NavLink
25+ {...props}
26+ className={(props) => `${className} ${navClassName(props)}`}
27+ ref={forwardedRef}
28+ />
29+ );
30+});
31+
32+const MobileNavLink = ({ to, children }: NavLinkProps) => (
33+ <DropdownMenu.Item asChild>
34+ <WrappedNavLink to={to} navClassName={({ isActive }) => cn('block hover:text-rosy transition-colors', isActive && 'underline')}>
35+ { children }
36+ </WrappedNavLink>
37+ </DropdownMenu.Item>
38+)
39+
6export const Layout = () => {
40export const Layout = () => {
41+ const isMobile = useMedia('(max-width: 639px)');
42+
7 return (
43 return (
8 <main className={cn("flex flex-col items-center h-full min-h-screen")}>
44 <main className={cn("flex flex-col items-center h-full min-h-screen")}>
9− <div className="flex-1 flex flex-col max-w-2xl h-full w-full p-4 sm:py-12 sm:px-8 space-y-6">
10− <Outlet />
45+ <Outlet />
11− </div>
12 <aside className='self-start mx-4 mb-6 mt-auto sm:m-0 sm:fixed left-4 bottom-4'>
46 <aside className='self-start mx-4 mb-6 mt-auto sm:m-0 sm:fixed left-4 bottom-4'>
47+ {isMobile ? (
48+ <DropdownMenu.Root>
49+ <DropdownMenu.Trigger className='button fixed bottom-6 right-4 p-2 rounded-full' aria-label='Open Menu'>
50+ <MenuIcon className='w-6 h-6' />
51+ </DropdownMenu.Trigger>
52+ <DropdownMenu.Content sideOffset={16} className='min-w-[200px] bg-linen shadow-lg rounded-xl'>
53+ <div className='p-4 space-y-3 text-right bg-fawn/30 rounded-xl'>
54+ {Object.entries(BrowsingRoutes).map(([k,v]) => <MobileNavLink key={v} to={v}>{k}</MobileNavLink>)}
55+ <DropdownMenu.Separator className='border-t-2 border-mauve'/>
56+ {Object.entries(PostingRoutes).map(([k,v]) => <MobileNavLink key={v} to={v}>{k}</MobileNavLink>)}
57+ </div>
58+ </DropdownMenu.Content>
59+ </DropdownMenu.Root>
60+ ) : (
13− <nav className='mb-10'>
61+ <nav className='w-24 mb-10'>
14− <ul className='font-semibold text-sm space-y-4'>
62+ <ul className='font-semibold text-sm space-y-2'>
15− <li>
63+ {Object.entries(BrowsingRoutes).map(([k,v]) => <DesktopNavLink key={v} to={v}>{k}</DesktopNavLink>)}
16− <NavLink to="/search" className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>search</NavLink>
64+ </ul>
17− </li>
65+ <hr className='block my-4 border-mauve/60'/>
18− <li>
66+ <ul className='font-semibold text-sm space-y-2'>
19− <NavLink to="/tags" className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>tags</NavLink>
67+ {Object.entries(PostingRoutes).map(([k,v]) => <DesktopNavLink key={v} to={v}>{k}</DesktopNavLink>)}
20− </li>
68+ </ul>
21− <li>
69+ </nav>
22− <NavLink to="/manage-listings" end className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>my listings</NavLink>
70+ )}
23− </li>
24− <li>
25− <NavLink to="/manage-listings/all" end className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>all listings</NavLink>
26− </li>
27− <li>
28− <NavLink to="/manage-listings/post" className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>post listing</NavLink>
29− </li>
30− <li>
31− <NavLink to="/manage-listings/apps" className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>add apps</NavLink>
32− </li>
33− <li>
34− <NavLink to="/manage-listings/groups" className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>add groups</NavLink>
35− </li>
36− </ul>
37− </nav>
38 <Meta className='text-sm'/>
71 <Meta className='text-sm'/>
39 </aside>
72 </aside>
40 </main>
73 </main>
ui/src/components/Meta.tsx−2
@@ -1,7 +1,5 @@
1−import { PlusIcon } from '@heroicons/react/solid';
2import { ChargeUpdateInitial, scryCharges } from '@urbit/api';
1import { ChargeUpdateInitial, scryCharges } from '@urbit/api';
3import React, { useEffect, useState } from 'react';
2import React, { useEffect, useState } from 'react';
4−import { Link } from 'react-router-dom';
5import api from '../api';
3import api from '../api';
6import { Logo } from './Logo';
4import { Logo } from './Logo';
7
5
ui/src/components/PostOptions.tsx+21−15
@@ -7,41 +7,47 @@ import { PostOption, PostOptionsForm } from '../types/sphinx';
7
7
8interface PostOptionsProps {
8interface PostOptionsProps {
9 options: PostOption[];
9 options: PostOption[];
10+ showTags?: boolean;
10 className?: string;
11 className?: string;
11}
12}
12
13
13−export const PostOptions = ({ options, className }: PostOptionsProps) => {
14+export const PostOptions = ({ options, showTags = false, className }: PostOptionsProps) => {
14 const { register } = useFormContext<PostOptionsForm>();
15 const { register } = useFormContext<PostOptionsForm>();
15
16
16 return (
17 return (
17 <ul className={cn('space-y-3', className)}>
18 <ul className={cn('space-y-3', className)}>
18− {options && options.map(o => (
19+ {options && options.map((o, index) => (
19 <li key={o.key}>
20 <li key={o.key}>
20 <input {...register('options')} id={o.key} value={o.key} type="checkbox" className='sr-only' />
21 <input {...register('options')} id={o.key} value={o.key} type="checkbox" className='sr-only' />
21− <label htmlFor={o.key} className='checked-bg-fawn group-1 flex w-full p-2 hover:bg-fawn cursor-pointer rounded-xl'>
22+ <label htmlFor={o.key} className='checked-bg-fawn group-1 relative grid grid-rows-[auto,auto] sm:grid-rows-1 grid-cols-[64px,1fr] sm:grid-cols-[64px,1fr,24px] w-full p-2 hover:bg-fawn cursor-pointer rounded-xl'>
23+ <div className='absolute z-10 top-7 left-7 flex items-center justify-center h-6 w-6 border-2 border-solid border-mauve rounded bg-linen/80'>
24+ <CheckIcon className='show-when-checked h-4 w-4 opacity-0' />
25+ </div>
22 {o.post.image ? (
26 {o.post.image ? (
23 <img
27 <img
24 src={o.post.image}
28 src={o.post.image}
25− className="w-16 h-16 object-cover rounded-lg"
29+ className="show-when-checked w-16 h-16 col-span-1 object-cover rounded-lg opacity-60"
30+ loading={index > 15 ? 'lazy' : 'eager'}
26 style={{ backgroundColor: o.post.color ? `#${uxToHex(o.post.color)}` : undefined }}
31 style={{ backgroundColor: o.post.color ? `#${uxToHex(o.post.color)}` : undefined }}
27 />
32 />
28 ) : (
33 ) : (
29 <div
34 <div
30− className='w-16 h-16 bg-rosy/20 rounded-lg'
35+ className='w-16 h-16 col-span-1 bg-rosy/20 rounded-lg'
31 style={{ backgroundColor: o.post.color ? `#${uxToHex(o.post.color)}` : undefined }}
36 style={{ backgroundColor: o.post.color ? `#${uxToHex(o.post.color)}` : undefined }}
32 />
37 />
33 )}
38 )}
34− <div className='flex-1 ml-4'>
39+ <div className='ml-4 min-w-0 sm:space-y-2'>
35− <span className='block font-semibold text-lg leading-none mb-1'>{o.post.title}</span>
40+ <span className='block font-semibold text-lg leading-none mb-2 sm:mb-0'>{o.post.title}</span>
36− <div className='font-mono text-xs space-x-3'>
41+ <div className='flex flex-col sm:flex-row sm:items-center w-full text-xs space-y-2 sm:space-y-0 sm:space-x-3 truncate'>
37− <strong>%{o.post.type}</strong>
42+ <strong className='font-mono'>%{o.post.type}</strong>
43+ {showTags && <p><strong>tags: </strong><em>{o.post.tags.join()}</em></p>}
44+ </div>
38− <span>{o.post.link.replace('web+urbitgraph://', '')}</span>
45+ <p className='hidden sm:block font-mono text-xs truncate'>{o.post.link.replace('web+urbitgraph://', '')}</p>
39− </div>
40− <p className='text-sm'>{o.post.description}</p>
41− </div>
42− <div className='flex items-center justify-center m-5 h-6 w-6 border-2 border-solid border-mauve rounded'>
43− <CheckIcon className='show-when-checked h-4 w-4 opacity-0' />
44 </div>
46 </div>
47+ <div className='col-span-2 row-start-2 mt-2'>
48+ <p className='font-mono text-xs truncate sm:hidden'>{o.post.link.replace('web+urbitgraph://', '')}</p>
49+ <p className='text-sm'>{o.post.description}</p>
50+ </div>
45 </label>
51 </label>
46 </li>
52 </li>
47 ))}
53 ))}
ui/src/components/SearchInput.tsx+4−1
@@ -1,14 +1,16 @@
1import { SearchIcon } from '@heroicons/react/solid';
1import { SearchIcon } from '@heroicons/react/solid';
2import cn from 'classnames';
2import cn from 'classnames';
3import React, { ChangeEvent, useCallback } from 'react';
3import React, { ChangeEvent, useCallback } from 'react';
4+import { Spinner } from './Spinner';
4
5
5interface SearchInputProps {
6interface SearchInputProps {
6 lookup: string;
7 lookup: string;
8+ loading: boolean;
7 className?: string;
9 className?: string;
8 onChange: (value: string) => void;
10 onChange: (value: string) => void;
9}
11}
10
12
11−export const SearchInput = ({ lookup, className, onChange }: SearchInputProps) => {
13+export const SearchInput = ({ lookup, loading, className, onChange }: SearchInputProps) => {
12 const onInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {
14 const onInput = useCallback((event: ChangeEvent<HTMLInputElement>) => {
13 const { value } = event.target;
15 const { value } = event.target;
14 onChange(value);
16 onChange(value);
@@ -24,6 +26,7 @@ export const SearchInput = ({ lookup, className, onChange }: SearchInputProps) =
24 placeholder="Search"
26 placeholder="Search"
25 className={cn('w-full py-1 pl-9 pr-2 bg-fawn/30 focus:outline-none focus:ring-2 ring-lavender rounded-lg border border-fawn/30')}
27 className={cn('w-full py-1 pl-9 pr-2 bg-fawn/30 focus:outline-none focus:ring-2 ring-lavender rounded-lg border border-fawn/30')}
26 />
28 />
29+ {loading && <Spinner className='absolute right-2 h-5 w-5' />}
27 </div>
30 </div>
28 )
31 )
29}
32}
ui/src/components/Spinner.tsx+1−1
@@ -4,7 +4,7 @@ import React from 'react';
4export const Spinner = ({ className }: { className: string }) => {
4export const Spinner = ({ className }: { className: string }) => {
5 return (
5 return (
6 <svg className={cn('spinner', className)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
6 <svg className={cn('spinner', className)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
7− <circle cx="12" cy="12" r="10" className="stroke-current" strokeOpacity="0.4" stroke-width="4"></circle>
7+ <circle cx="12" cy="12" r="10" className="stroke-current" strokeOpacity="0.4" strokeWidth="4"></circle>
8 <path className="fill-current" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
8 <path className="fill-current" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
9 </svg>
9 </svg>
10 )
10 )
ui/src/env.d.ts+4
@@ -5,3 +5,7 @@ interface ImportMetaEnv extends Readonly<Record<string, string | boolean | undef
5interface ImportMeta {
5interface ImportMeta {
6 readonly env: ImportMetaEnv;
6 readonly env: ImportMetaEnv;
7}
7}
8+
9+declare module 'remove-markdown-and-html' {
10+ export default function removeMd(input: string): string;
11+}
ui/src/index.cssdeleted−20
@@ -1,20 +0,0 @@
1−@tailwind base;
2−@tailwind components;
3−@tailwind utilities;
4−
5−.flip {
6− transform: rotateY(180deg);
7−}
8−
9−input:checked + label .show-when-checked {
10− @apply opacity-100;
11−}
12−
13−input:checked + .checked-bg-fawn,
14−input:checked + label .checked-bg-fawn {
15− @apply bg-fawn;
16−}
17−
18−.spinner {
19− @apply inline-flex items-center w-6 h-6 animate-spin;
20−}
ui/src/logic/useMedia.tsnew file+25
@@ -0,0 +1,25 @@
1+import { useCallback, useEffect, useState } from 'react';
2+
3+export default function useMedia(mediaQuery: string) {
4+ const [match, setMatch] = useState(false);
5+
6+ const update = useCallback((e: MediaQueryListEvent) => {
7+ setMatch(e.matches);
8+ }, []);
9+
10+ useEffect(() => {
11+ const query = window.matchMedia(mediaQuery);
12+
13+ query.addEventListener('change', update);
14+ update({ matches: query.matches } as MediaQueryListEvent);
15+ return () => {
16+ query.removeEventListener('change', update);
17+ };
18+ }, [update, mediaQuery]);
19+
20+ return match;
21+}
22+
23+export function useIsMobile() {
24+ return useMedia('(max-width: 639px)');
25+}
ui/src/main.tsx+1−1
@@ -1,7 +1,7 @@
1import React from 'react';
1import React from 'react';
2import ReactDOM from 'react-dom';
2import ReactDOM from 'react-dom';
3import { App } from './app';
3import { App } from './app';
4−import './index.css';
4+import './styles/index.css';
5
5
6ReactDOM.render(
6ReactDOM.render(
7 <React.StrictMode>
7 <React.StrictMode>
ui/src/manage-listings/Notebooks.tsxnew file+68
@@ -0,0 +1,68 @@
1+import { uxToHex } from '@urbit/api';
2+import cn from 'classnames';
3+import React from 'react';
4+import { Link, NavLink, useParams } from 'react-router-dom';
5+import { Spinner } from '../components/Spinner';
6+import useMedia, { useIsMobile } from '../logic/useMedia';
7+import { useNotebooks } from '../state/posts';
8+import { Posts } from './Posts';
9+
10+export const Notebooks = () => {
11+ const { ship, name } = useParams<{ ship: string, name: string }>();
12+ const limited = useMedia('(max-width: 899px)');
13+ const { groups, notebooks, loading } = useNotebooks();
14+ const sortedNotebooks = Object.entries(notebooks)
15+ .sort(([,a], [,b]) => a.metadata.title.localeCompare(b.metadata.title));
16+
17+ return (
18+ <div className="flex-none flex flex-col max-w-5xl w-full p-4 sm:py-12 sm:px-8 space-y-6 sm:pl-32 xl:pl-8">
19+ <div className='flex items-start'>
20+ {((limited && !ship) || !limited) &&
21+ <aside className='sticky top-4 sm:top-12 flex-none flex flex-col sm:w-72 sm:h-[80vh] pt-14 sm:pt-0 mr-6 self-start'>
22+ <header className='flex-none fixed sm:static top-0 w-full p-4 pl-0 sm:p-0 bg-linen'>
23+ <h1 className='text-2xl font-semibold ml-2 sm:mb-6'>Add Posts</h1>
24+ </header>
25+ <ul className='flex-1 sm:overflow-y-auto'>
26+ {loading && <div className='flex items-center space-x-2 text-lavender mt-6'>
27+ <Spinner className='w-6 h-6' />
28+ <span>Loading notebooks...</span>
29+ </div>}
30+ {sortedNotebooks.map(([id, n], index) => {
31+ const [,group] = groups.find(([,v]) => v.group === n.group) || [];
32+
33+ return (
34+ <li key={id}>
35+ <NavLink to={`/manage-listings/posts/${id}`} className={({ isActive }) => cn('flex items-center p-2 space-x-2 leading-tight rounded-md hover:bg-fawn', isActive && 'bg-fawn')}>
36+ {group && group.metadata.picture ? (
37+ <img
38+ src={group.metadata.picture}
39+ className="flex-none w-10 h-10 object-cover rounded-md"
40+ loading={index > 15 ? 'lazy' : 'eager'}
41+ style={{ backgroundColor: group.metadata.color ? `#${uxToHex(group.metadata.color)}` : undefined }}
42+ />
43+ ) : group ? (
44+ <div
45+ className='flex-none w-10 h-10 bg-rosy/20 rounded-md'
46+ style={{ backgroundColor: group.metadata.color ? `#${uxToHex(group.metadata.color)}` : undefined }}
47+ />
48+ ) : null}
49+ <div className='flex flex-col min-w-0'>
50+ <strong className='w-full truncate'>{n.metadata.title}</strong>
51+ {group && <span className='text-sm'>{group.metadata.title}</span>}
52+ </div>
53+ </NavLink>
54+ </li>
55+ )}
56+ )}
57+ </ul>
58+ </aside>
59+ }
60+ {((limited && ship) || !limited) &&
61+ <section className='flex-1 min-w-0 space-y-6'>
62+ {!loading && notebooks && ship && name && <Posts ship={ship} name={name} />}
63+ </section>
64+ }
65+ </div>
66+ </div>
67+ )
68+}
ui/src/manage-listings/Post.tsx+12−8
@@ -1,13 +1,13 @@
1import debounce from 'lodash.debounce';
1import debounce from 'lodash.debounce';
2import React, { useCallback, useEffect, useRef, useState } from 'react';
2import React, { useCallback, useEffect, useRef, useState } from 'react';
3import { FormProvider, useForm } from 'react-hook-form';
3import { FormProvider, useForm } from 'react-hook-form';
4−import { Link, useNavigate } from 'react-router-dom';
4+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
5import { MultiValue } from 'react-select';
5import { MultiValue } from 'react-select';
6import api from '../api';
6import api from '../api';
7import { ErrorMessage } from '../components/ErrorMessage';
7import { ErrorMessage } from '../components/ErrorMessage';
8import { Filter } from '../components/Filter';
8import { Filter } from '../components/Filter';
9import { Option, TagField } from '../components/TagField';
9import { Option, TagField } from '../components/TagField';
10−import { Declare, Post as PostForm } from '../types/sphinx';
10+import { Declare, Post as PostForm, PostType } from '../types/sphinx';
11
11
12function errorMessages(length: number) {
12function errorMessages(length: number) {
13 return {
13 return {
@@ -17,15 +17,18 @@ function errorMessages(length: number) {
17}
17}
18
18
19export const Post = () => {
19export const Post = () => {
20+ const [params] = useSearchParams();
21+ const defaultTags = params.getAll('tags').map(t => ({ label: t, value: t})) || [];
20− const [tags, setTags] = useState<MultiValue<Option>>([]);
22+ const [tags, setTags] = useState<MultiValue<Option>>(defaultTags);
21 const [image, setImage] = useState<string>('');
23 const [image, setImage] = useState<string>('');
22 const form = useForm<PostForm>({
24 const form = useForm<PostForm>({
23 defaultValues: {
25 defaultValues: {
24− title: '',
26+ title: params.get('title') || '',
25− type: 'other',
27+ type: params.get('type') as PostType || 'other',
26− link: '',
28+ link: params.get('link') || '',
27− image: '',
29+ image: params.get('image') || '',
28− description: ''
30+ description: params.get('description') || '',
31+ color: params.get('color') || ''
29 }
32 }
30 });
33 });
31
34
@@ -36,6 +39,7 @@ export const Post = () => {
36 const type = watch('type');
39 const type = watch('type');
37
40
38 const onSubmit = useCallback((values: Omit<PostForm, 'tags'>) => {
41 const onSubmit = useCallback((values: Omit<PostForm, 'tags'>) => {
42+ debugger;
39 api.poke<Declare>({
43 api.poke<Declare>({
40 app: 'sphinx',
44 app: 'sphinx',
41 mark: 'declare',
45 mark: 'declare',
ui/src/manage-listings/Posts.tsxnew file+121
@@ -0,0 +1,121 @@
1+import { ChevronLeftIcon } from '@heroicons/react/solid';
2+import React, { useCallback, useEffect, useState } from 'react';
3+import { FormProvider, useForm } from 'react-hook-form';
4+import { useMutation, useQueryClient } from 'react-query';
5+import { Link, useParams } from 'react-router-dom';
6+import { MultiValue } from 'react-select';
7+import api from '../api';
8+import { Filter } from '../components/Filter';
9+import { PostOptions } from '../components/PostOptions';
10+import { Spinner } from '../components/Spinner';
11+import { TagField, Option } from '../components/TagField';
12+import useMedia from '../logic/useMedia';
13+import { usePosts } from '../state/posts';
14+import { Declare, PostOptionsForm, PostType } from '../types/sphinx';
15+
16+interface PostsProps {
17+ ship: string;
18+ name: string;
19+}
20+
21+export const Posts = ({ ship, name }: PostsProps) => {
22+ const limited = useMedia('(max-width: 899px)');
23+ const [postType, setPostType] = useState<PostType>('content')
24+ const [tags, setTags] = useState<MultiValue<Option>>([{ label: 'post', value: 'post' }])
25+ const { loading, posts, notebook } = usePosts(ship, name, postType, tags.map(t => t.value));
26+ const [firstLoad, setFirstLoad] = useState(true);
27+ const form = useForm<PostOptionsForm>({
28+ defaultValues: {
29+ options: []
30+ }
31+ });
32+ const { handleSubmit, reset, watch, setValue } = form;
33+ const options = watch('options');
34+
35+ useEffect(() => {
36+ if (posts.length > 0 && firstLoad) {
37+ reset({
38+ options: []
39+ })
40+
41+ setFirstLoad(false);
42+ }
43+ }, [posts, firstLoad]);
44+
45+ const toggleAll = useCallback(() => {
46+ if (options.length !== posts.length) {
47+ setValue('options', posts.map(p => p.key));
48+ } else {
49+ setValue('options', []);
50+ }
51+ }, [posts, options, setValue]);
52+
53+ const queryClient = useQueryClient();
54+ const { mutate } = useMutation(async (values: PostOptionsForm) => {
55+ return api.poke<Declare[]>({
56+ app: 'sphinx',
57+ mark: 'declarations',
58+ json: posts.filter(a => values.options.includes(a.key)).map(a => ({
59+ post: a.post,
60+ reach: 'friends'
61+ }))
62+ });
63+ }, {
64+ onSuccess: () => {
65+ queryClient.invalidateQueries('post-listings')
66+ }
67+ })
68+
69+ const onSubmit = useCallback((values: PostOptionsForm) => {
70+ mutate(values);
71+ reset();
72+ }, [reset, mutate]);
73+
74+ return (
75+ <>
76+ <header className='flex items-center'>
77+ {limited && (
78+ <Link to="/manage-listings/posts" className='flex items-center'>
79+ <ChevronLeftIcon className='h-6 w-6 text-mauve/60' />
80+ <h1 className='text-2xl font-semibold'>{notebook?.metadata?.title}</h1>
81+ </Link>
82+ )}
83+ {!limited && <h1 className='text-2xl font-semibold'>{notebook?.metadata?.title}</h1>}
84+ {posts.length > 0 && (
85+ <button className='p-1.5 ml-auto text-sm underline font-semibold' onClick={toggleAll}>
86+ {options.length !== posts.length && 'select all'}
87+ {options.length === posts.length && 'deselect all'}
88+ </button>
89+ )}
90+ </header>
91+ <div className='flex flex-col items-end sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-2'>
92+ <TagField tags={tags} onTags={setTags} className="flex-1 w-full"/>
93+ <Filter className='flex-none' selected={postType} onSelect={(value) => setPostType(value)} />
94+ </div>
95+ <FormProvider {...form}>
96+ <form onSubmit={handleSubmit(onSubmit)}>
97+ {posts.length === 0 && loading ? (
98+ <div className='flex items-center space-x-2 text-lavender'>
99+ <Spinner className='w-6 h-6' />
100+ <span>Checking posts...</span>
101+ </div>
102+ ) : posts.length === 0 && !loading ? (
103+ <h2 className='text-lavender'>All posts already indexed</h2>
104+ ) : (
105+ <PostOptions options={posts} showTags />
106+ )}
107+ <div className='flex justify-between border-t border-zinc-300 py-3 mt-6'>
108+ <Link to="/search" className='flex items-center rounded-lg text-base font-semibold text-rosy bg-rosy/30 border-2 border-transparent hover:border-rosy leading-none py-2 px-3 transition-colors'>
109+ Back to Search
110+ </Link>
111+ {posts.length > 0 && (
112+ <button type="submit" className='flex items-center rounded-lg text-base font-semibold text-linen bg-rosy disabled:bg-zinc-200 disabled:text-zinc-400 disabled:border-transparent border-2 border-transparent hover:border-linen/60 leading-none py-2 px-3 transition-colors' disabled={options.length === 0}>
113+ Publish
114+ </button>
115+ )}
116+ </div>
117+ </form>
118+ </FormProvider>
119+ </>
120+ );
121+}
ui/src/pages/Search.tsx+2−1
@@ -39,6 +39,7 @@ export const Search = () => {
39 pageInt,
39 pageInt,
40 pages,
40 pages,
41 results,
41 results,
42+ isLoading,
42 linkBuild
43 linkBuild
43 } = useSearch({
44 } = useSearch({
44 key: (start, size) => `lookup-${selected}-${size}-${start}-${lookup}`,
45 key: (start, size) => `lookup-${selected}-${size}-${start}-${lookup}`,
@@ -81,7 +82,7 @@ export const Search = () => {
81 return (
82 return (
82 <div className={cn('w-full space-y-6', !lookup && 'm-auto')}>
83 <div className={cn('w-full space-y-6', !lookup && 'm-auto')}>
83 <header className='flex items-center space-x-2'>
84 <header className='flex items-center space-x-2'>
84− <SearchInput className='flex-1' lookup={rawSearch} onChange={onChange} />
85+ <SearchInput className='flex-1' lookup={rawSearch} loading={isLoading} onChange={onChange} />
85 <Filter selected={selected} onSelect={setSelected} className="min-w-0 sm:w-20" />
86 <Filter selected={selected} onSelect={setSelected} className="min-w-0 sm:w-20" />
86 </header>
87 </header>
87 {!palsInstalled && (
88 {!palsInstalled && (
ui/src/pages/Tag.tsx+10−1
@@ -1,4 +1,6 @@
1+import { PlusIcon, PlusSmIcon } from '@heroicons/react/solid';
1import cn from 'classnames';
2import cn from 'classnames';
3+import qs from 'query-string';
2import React from 'react';
4import React from 'react';
3import { useQueryClient, useMutation } from 'react-query';
5import { useQueryClient, useMutation } from 'react-query';
4import { Link, useParams } from 'react-router-dom';
6import { Link, useParams } from 'react-router-dom';
@@ -59,8 +61,15 @@ export const Tag = () => {
59 <div className={cn('h-[136px] overflow-y-auto', tag && 'mb-12')}>
61 <div className={cn('h-[136px] overflow-y-auto', tag && 'mb-12')}>
60 <TagCloud tags={tags} />
62 <TagCloud tags={tags} />
61 </div>
63 </div>
62− <header className='flex items-center'>
64+ <header className='flex items-center justify-between'>
63 <h1 className='text-2xl font-semibold leading-none'>{tag}</h1>
65 <h1 className='text-2xl font-semibold leading-none'>{tag}</h1>
66+ <Link
67+ to={{ pathname: '/manage-listings/post', search: qs.stringify({ tags: [tag] }) }}
68+ className="inline-flex items-center px-2 pr-3 py-1 font-semibold text-linen bg-lavender hover:bg-rosy transition-colors rounded-lg"
69+ >
70+ <PlusSmIcon className='w-5 h-5' />
71+ <span>Add</span>
72+ </Link>
64 </header>
73 </header>
65 {tag && results && <div className='flex justify-end border-t border-zinc-300'>
74 {tag && results && <div className='flex justify-end border-t border-zinc-300'>
66 <Paginator pages={pages} currentPage={pageInt} linkBuilder={linkBuild} />
75 <Paginator pages={pages} currentPage={pageInt} linkBuilder={linkBuild} />
ui/src/pages/Tags.tsxdeleted−16
@@ -1,16 +0,0 @@
1−import React from 'react';
2−import { TagCloud } from '../components/TagCloud';
3−import { useTags } from '../state/tags';
4−
5−export const Tags = () => {
6− const tags = useTags();
7−
8− return (
9− <>
10− <header className='flex items-center'>
11− <h1 className='text-2xl font-semibold'>Tags</h1>
12− </header>
13− <TagCloud tags={tags} />
14− </>
15− )
16−}
ui/src/routes.tsnew file+16
@@ -0,0 +1,16 @@
1+export const BrowsingRoutes = {
2+ search: "/search",
3+ tags: "/tags",
4+ apps: "/tags/app",
5+ groups: "/tags/group",
6+ jobs: "/tags/job",
7+ 'my listings': "/manage-listings",
8+ 'all listings': "/manage-listings/all"
9+}
10+
11+export const PostingRoutes = {
12+ 'post listing': "/manage-listings/post",
13+ 'add apps': "/manage-listings/apps",
14+ 'add groups': "/manage-listings/groups",
15+ 'add posts': "/manage-listings/posts"
16+}
ui/src/state/groups.ts+18−8
@@ -1,23 +1,33 @@
1−import { GroupUpdateInitial, MetadataUpdateInitial } from "@urbit/api";
1+import { Associations, GroupUpdateInitial, MetadataUpdateInitial } from "@urbit/api";
2import { useQuery } from "react-query"
2import { useQuery } from "react-query"
3import api from "../api"
3import api from "../api"
4import { PostOption, PostType, Search } from "../types/sphinx";
4import { PostOption, PostType, Search } from "../types/sphinx";
5
5
6+export type MetaDataUpdate = { 'metadata-update': MetadataUpdateInitial };
6
7
8+export const usePublicGroups = (metadata?: { 'metadata-update': MetadataUpdateInitial }) => {
9+ const { data, isLoading } = useQuery('metadata', () => api.subscribeOnce<MetaDataUpdate>('metadata-store', '/all'), {
10+ enabled: !metadata
11+ });
12+ const { data: groupData, isLoading: groupDataLoading } = useQuery('groups', () => api.subscribeOnce<{ groupUpdate: GroupUpdateInitial }>('group-store', '/groups'));
13+
14+ return {
15+ loading: isLoading || groupDataLoading,
16+ groups: !data || !groupData ? [] : Object.entries(data['metadata-update'].associations)
17+ .filter(([k,v]) => v['app-name'] === 'groups' && 'open' in (groupData.groupUpdate.initial[v.resource]?.policy || {}))
18+ }
19+}
7
20
8export const useGroups = () => {
21export const useGroups = () => {
9− const { data, isLoading: metadataLoading } = useQuery('metadata', () => api.subscribeOnce<{ 'metadata-update': MetadataUpdateInitial }>('metadata-store', '/all'));
22+ const { groups, loading } = usePublicGroups();
10− const { data: groupData, isLoading: groupDataLoading } = useQuery('groups', () => api.subscribeOnce<{ groupUpdate: GroupUpdateInitial }>('group-store', '/groups'));
11 const { data: d, isLoading } = useQuery('group-listings', () => api.scry<Search>({
23 const { data: d, isLoading } = useQuery('group-listings', () => api.scry<Search>({
12 app: 'sphinx',
24 app: 'sphinx',
13 path: '/lookup/group/0/999'
25 path: '/lookup/group/0/999'
14 }));
26 }));
15
27
16 return {
28 return {
17− loading: metadataLoading || groupDataLoading || isLoading,
29+ loading: loading || isLoading,
18− groups: !data || !groupData || !d ? [] : Object.entries(data['metadata-update'].associations)
19− .filter(([k,v]) => v['app-name'] === 'groups' && 'open' in (groupData.groupUpdate.initial[v.resource]?.policy || {}))
20− .map(([k,v]) => ({ key: k, post: {
30+ groups: groups.map(([k,v]) => ({ key: k, post: {
21 type: 'group' as PostType,
31 type: 'group' as PostType,
22 title: v.metadata.title,
32 title: v.metadata.title,
23 link: v.group.replace('/ship/', 'web+urbitgraph://group/'),
33 link: v.group.replace('/ship/', 'web+urbitgraph://group/'),
@@ -26,6 +36,6 @@ export const useGroups = () => {
26 description: v.metadata.description,
36 description: v.metadata.description,
27 tags: ['group']
37 tags: ['group']
28 }}))
38 }}))
29− .filter(({ post }) => !d.listings.some(l => l.post.link === post.link || l.post.title === post.title))
39+ .filter(({ post }) => !d || d.listings.length === 0 || !d.listings.some(l => l.post.link === post.link || l.post.title === post.title))
30 }
40 }
31}
41}
ui/src/state/posts.tsnew file+195
@@ -0,0 +1,195 @@
1+import { Association, BigIntOrderedMap, buntPost, Content, getGraph, getKeys, Graph, GraphNode, MetadataConfig, Post, resourceFromPath, TextContent, UrlContent } from "@urbit/api";
2+import bigInt, { BigInteger } from "big-integer";
3+import removeMd from 'remove-markdown-and-html';
4+import _ from "lodash";
5+import { useQuery } from "react-query"
6+import api from "../api"
7+import { PostType, Search } from "../types/sphinx";
8+import { MetaDataUpdate, usePublicGroups } from "./groups";
9+
10+interface Resource {
11+ ship: string;
12+ name: string;
13+}
14+
15+interface GraphKeyUpdate {
16+ 'graph-update': {
17+ keys: Resource[]
18+ }
19+}
20+
21+export const useNotebooks = () => {
22+ const { data: keys, isLoading: keysLoading } = useQuery('graph-keys', async () => {
23+ const json = await api.scry<GraphKeyUpdate>(getKeys())
24+ const update = _.get(json, 'graph-update', false);
25+ const data: Resource[] = _.get(update, 'keys', false) || [];
26+
27+ return new Set(data.map((res) => {
28+ const resource = res.ship + '/' + res.name;
29+ return resource;
30+ }));
31+ });
32+ const { data, isLoading: metadataLoading } = useQuery('metadata', () => api.subscribeOnce<MetaDataUpdate>('metadata-store', '/all'));
33+ const { groups, loading } = usePublicGroups(data || {} as MetaDataUpdate);
34+
35+ console.log(keys);
36+ const notebooks: Record<string, Association<MetadataConfig>> = _.fromPairs(!data || loading ? [] : Object.entries(data['metadata-update'].associations)
37+ .filter(([,v]) => v['app-name'] === 'graph'
38+ && 'graph' in v.metadata.config
39+ && v.metadata.config.graph === 'publish'
40+ && keys?.has(v.resource.replace('/ship/~', ''))
41+ && groups.find(([, gv]) => gv.group === v.group)
42+ ).map(([,v]) => [v.resource.replace('/ship/', ''), v]));
43+
44+ console.log(data)
45+
46+ return {
47+ loading: metadataLoading || loading,
48+ notebooks,
49+ groups
50+ }
51+}
52+
53+export const usePosts = (ship: string, name: string, type: PostType, tags: string[]) => {
54+ const { notebooks, loading } = useNotebooks();
55+ const association = notebooks[`${ship}/${name}`] || {};
56+ const { data, isLoading } = useQuery(`graph-${association?.resource}`, () => api.scry<Graph>(getGraph(ship, name)), {
57+ enabled: !!association?.resource
58+ });
59+ const { data: d, isLoading: postsLoading } = useQuery('post-listings', () => api.scry<Search>({
60+ app: 'sphinx',
61+ path: '/lookup/tag/0/999/~~post'
62+ }));
63+ const graph = addGraph(data);
64+ const items = data && graph ? Array.from(graph)
65+ .filter(([, node]) => node && typeof node?.post !== 'string')
66+ .map(([date, node]) => {
67+ const index = node.post.index.split('/');
68+ const noteId = bigInt(index[1]);
69+ const { title, body } = getLatestRevision(node);
70+ const snippet = getSnippet(body);
71+ const permalink = getPermalinkForGraph(
72+ association.group,
73+ association.resource,
74+ `/${noteId.toString()}`
75+ );
76+
77+ return { key: date.toString(), post: {
78+ type,
79+ title,
80+ link: permalink,
81+ image: snippet.image,
82+ color: '',
83+ description: snippet.content,
84+ tags
85+ }}
86+ }) : [];
87+
88+ const posts = items.filter(p => !d || d.listings.length === 0 || d.listings.find(l => l.post.link === p.post.link));
89+
90+ return {
91+ notebook: association,
92+ loading: loading || isLoading || postsLoading,
93+ posts
94+ }
95+}
96+
97+function getImage(snippet: string) {
98+ const pattern = /!\[.*\]\((.*)\)/
99+ const match = snippet.match(pattern);
100+
101+ if (!match) {
102+ return '';
103+ }
104+
105+ return match[1];
106+}
107+
108+function getLatestRevision(node: GraphNode): { id: number, title: string, body: Content[], post: Post } {
109+ const empty = { id: 1, title: '', body: [], post: buntPost() };
110+ const revs = node.children?.get(bigInt(1));
111+ if (!revs || revs.children === null) {
112+ return empty;
113+ }
114+
115+ const [revNum, rev] = [...revs.children][0];
116+ const title = rev.post.contents[0] as TextContent;
117+ const body = rev.post.contents.slice(1);
118+ return {
119+ id: revNum.toJSNumber(),
120+ title: title.text,
121+ body,
122+ post: rev.post
123+ };
124+}
125+
126+export function getSnippet(body: Content[]): { image: string, content: string } {
127+ const IMAGE_REGEX = new RegExp(
128+ /(\.jpg|\.img|\.png|\.gif|\.tiff|\.jpeg|\.webp|\.webm|\.svg)$/i
129+ );
130+
131+ let sum = 0;
132+ const firstContent = body.reduce((text, c) => {
133+ debugger;
134+ if ('text' in c && sum < 255) {
135+ sum += removeMd(c.text).length;
136+ return text + c.text + ' ';
137+ }
138+
139+ return text;
140+ }, '');
141+ const image = body.filter((c: Content): c is UrlContent => 'url' in c && IMAGE_REGEX.test(c.url)).map(c => c.url)[0] || '';
142+ const content = removeMd(firstContent.replace(/!\[.*\]\((.*)\)\s*/g, ''));
143+ const end = content.length > 256 ? 255 : content.length;
144+ const start = content.substring(0, end);
145+
146+ if (firstContent.match(/jiddu/i)) {
147+ debugger;
148+ }
149+ return {
150+ content: start === firstContent ? start : `${start}...`,
151+ image: getImage(firstContent) || image
152+ }
153+}
154+
155+export function getPermalinkForGraph(
156+ group: string,
157+ graph: string,
158+ index = ''
159+) {
160+ const groupLink = getPermalinkForAssociatedGroup(group);
161+ const { ship, name } = resourceFromPath(graph);
162+ return `${groupLink}/graph/${ship}/${name}${index}`;
163+}
164+
165+function getPermalinkForAssociatedGroup(group: string) {
166+ const { ship, name } = resourceFromPath(group);
167+ return `web+urbitgraph://group/${ship}/${name}`;
168+}
169+
170+const addGraph = (json: any): Graph => {
171+ const update = _.get(json, 'graph-update', false);
172+ const data = _.get(update, 'add-graph', false);
173+ let graph = new BigIntOrderedMap<GraphNode>();
174+ const items: [BigInteger, GraphNode][] = data.graph ? Object.entries(data.graph as any).map(([idx, value]) => [bigInt(idx), processNode(value as GraphNode)]) : [];
175+
176+ if (data) {
177+ graph = graph.gas(items);
178+ }
179+
180+ return graph;
181+};
182+
183+const processNode = (node: GraphNode): GraphNode => {
184+ const empty = new BigIntOrderedMap<GraphNode>();
185+ const items = _.map<GraphNode, [BigInteger, GraphNode]>((node.children || {}) as any, (item: GraphNode, idx: number) => {
186+ return [bigInt(idx), processNode(item)]
187+ })
188+
189+ const newNode = {
190+ ...node,
191+ children: !node.children ? empty : empty.gas(items)
192+ };
193+
194+ return newNode;
195+};
ui/src/state/search.ts+2−1
@@ -16,7 +16,7 @@ export const useSearch = ({ key, fetcher, enabled, limit, page, linkPrefix }: Us
16 const pageInt = parseInt(page || '1', 10) - 1;
16 const pageInt = parseInt(page || '1', 10) - 1;
17 const start = pageInt * size;
17 const start = pageInt * size;
18
18
19− const { data } = useQuery<unknown, unknown, Search>(key(start, size), () => fetcher(start, size), {
19+ const { data, ...query } = useQuery<unknown, unknown, Search>(key(start, size), () => fetcher(start, size), {
20 enabled,
20 enabled,
21 keepPreviousData: true
21 keepPreviousData: true
22 });
22 });
@@ -39,6 +39,7 @@ export const useSearch = ({ key, fetcher, enabled, limit, page, linkPrefix }: Us
39 results: data || {
39 results: data || {
40 listings: []
40 listings: []
41 },
41 },
42+ ...query,
42 size,
43 size,
43 pageInt,
44 pageInt,
44 start,
45 start,
ui/src/styles/base.cssnew file

No changes to the content.

ui/src/styles/components.cssnew file+16
@@ -0,0 +1,16 @@
1+.button {
2+ @apply flex items-center rounded-lg text-base font-semibold text-linen bg-rosy disabled:bg-zinc-200 disabled:text-zinc-400 disabled:border-transparent border-2 border-transparent hover:border-linen/60 leading-none py-2 px-3 transition-colors;
3+}
4+
5+input:checked + label .show-when-checked {
6+ @apply opacity-100;
7+}
8+
9+input:checked + .checked-bg-fawn,
10+input:checked + label .checked-bg-fawn {
11+ @apply bg-fawn;
12+}
13+
14+.spinner {
15+ @apply inline-flex items-center w-6 h-6 animate-spin;
16+}
ui/src/styles/index.cssnew file+8
@@ -0,0 +1,8 @@
1+@import 'tailwindcss/base';
2+@import './base';
3+
4+@import 'tailwindcss/components';
5+@import './components';
6+
7+@import 'tailwindcss/utilities';
8+@import './utilities';
ui/src/styles/utilities.cssnew file+3
@@ -0,0 +1,3 @@
1+.flip {
2+ transform: rotateY(180deg);
3+}
ui/vite.config.ts+1−1
@@ -9,6 +9,6 @@ export default ({ mode }) => {
9 console.log(SHIP_URL);
9 console.log(SHIP_URL);
10
10
11 return defineConfig({
11 return defineConfig({
12− plugins: [urbitPlugin({ base: 'sphinx', target: SHIP_URL, secure: false }), reactRefresh()]
12+ plugins: [urbitPlugin({ base: 'sphinx', target: SHIP_URL, changeOrigin: true, secure: false }), reactRefresh()]
13 });
13 });
14};
14};