58 |
84 | );
85 | };
86 |
--------------------------------------------------------------------------------
/packages/manager/src/frontend/Repository/Edit.tsx:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { jsx, Styled, Button } from "theme-ui";
3 | import { useEffect } from "react";
4 | import { octokit } from "./List";
5 | import { usePromise } from "frontend/common/usePromise";
6 | import { useParams, Link } from "react-router-dom";
7 | import { useSelector, useDispatch } from "react-redux";
8 | import { Base64 } from "js-base64";
9 | import { persistor } from "index";
10 |
11 | // @ts-ignore
12 | import { load, Viewer } from "very-nested-viewer";
13 | import { FileWithName } from "very-nested-viewer/dist/Viewer/ToolbarUploadButton";
14 |
15 | const veryNestedDataFile = "very-nested-data.json";
16 | const filesFolder = "files/";
17 |
18 | export const Edit = () => {
19 | const { owner = "", repo = "" } = useParams();
20 |
21 | const repoRequest = usePromise
59 |
60 | {"< Home"}
61 |
62 |
63 |
83 |
152 | {repo}
158 |
249 | );
250 | };
251 |
--------------------------------------------------------------------------------
/packages/manager/src/frontend/Repository/List.tsx:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import { jsx, Styled } from "theme-ui";
3 | import { useEffect, useState } from "react";
4 | import { Octokit } from "@octokit/rest";
5 | import { Switch, Route, Link, useLocation } from "react-router-dom";
6 | import queryString from "query-string";
7 | import { usePromise } from "frontend/common/usePromise";
8 | // @ts-ignore
9 | import { generateAuthorizeUrl } from "very-nested-login";
10 | import { Add } from "./Add";
11 | import { Edit } from "./Edit";
12 |
13 | export let octokit: Octokit;
14 |
15 | const scope = "public_repo";
16 |
17 | export const List = () => {
18 | const [accessToken, setAccessToken] = useState(
19 | localStorage.getItem("accessToken")
20 | );
21 |
22 | const { search } = useLocation();
23 | useEffect(() => {
24 | const { accessToken: accessTokenFromUrl } = queryString.parse(search);
25 | if (accessTokenFromUrl && accessTokenFromUrl != accessToken) {
26 | // @ts-ignore
27 | localStorage.setItem("accessToken", accessTokenFromUrl);
28 | window.location.href = "/";
29 | }
30 | }, [search]);
31 |
32 | const setupOktokit = (accessToken: string) => {
33 | octokit = octokit = new Octokit({
34 | auth: accessToken,
35 | });
36 | octokit.hook.error("request", async (error, options) => {
37 | if (error.status === 401) {
38 | setAccessToken("");
39 | localStorage.setItem("accessToken", "");
40 | }
41 | throw error;
42 | });
43 | };
44 |
45 | const repos = usePromise
153 |
154 | {"< Home"}
155 |
156 |
157 |
159 |
199 | {saveRequest.fulfilled && (
200 |
160 | Public Link:{" "}
161 | {repoRequest.pending
162 | ? "loading..."
163 | : repoRequest.rejected
164 | ? "error loading url"
165 | : repoRequest.value &&
166 | (!repoRequest.value.data.has_pages
167 | ? "no pages url found"
168 | : getPagesRequest.pending
169 | ? "loading..."
170 | : getPagesRequest.rejected
171 | ? "error loading url"
172 | : getPagesRequest.value && (
173 |
178 | {getPagesRequest.value.data.html_url}
179 |
180 | ))}
181 |
182 |
183 | GitHub Repo:{" "}
184 | {repoRequest.pending
185 | ? "loading..."
186 | : repoRequest.rejected
187 | ? "error loading url"
188 | : repoRequest.value && (
189 |
194 | {repoRequest.value.data.html_url}
195 |
196 | )}
197 |
198 |
201 | Saved! It might take up to 10 minutes before your changes are
202 | displayed.
203 |
204 | )}
205 |
217 |
225 | {/* */}
234 |
235 |
236 | {saveRequest.rejected &&
248 | There was an issue saving your repo :(
} 237 | {getRequest.pending &&Loading...
} 238 | {getRequest.rejected && ( 239 |240 | We couldn't read this repository, are you sure it's a very nested 241 | repo? 242 |
243 | )} 244 | {getRequest.fulfilled && ( 245 |
64 | {!accessToken && (
65 |
66 | Login with GitHub
67 |
68 | )}
69 | {accessToken && octokit && (
70 |
71 |
72 |
74 |
75 |
77 |
78 | Very Nested Manager
79 |
126 |
127 | )}
128 |
129 | );
130 | };
131 |
--------------------------------------------------------------------------------
/packages/manager/src/frontend/common/usePromise.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | export enum PromiseStatus {
4 | NotStarted = "not_started",
5 | Pending = "pending",
6 | Fulfilled = "fulfilled",
7 | Rejected = "rejected",
8 | }
9 |
10 | export interface PromiseState
80 |
84 | Back to Homepage
85 |
86 |
87 |
88 |
125 |
89 |
90 | Add
91 |
92 |
93 |
94 | {repos.pending && Very Nested Repos
99 | )}
100 | {repos.value?.data
101 | ?.filter((repo: any) => repo.name.startsWith("very-nested"))
102 | .map((repo: any) => (
103 | Other Repos
113 | )}
114 | {repos.value?.data
115 | ?.filter((repo: any) => !repo.name.startsWith("very-nested"))
116 | .map((repo: any) => (
117 |
124 | pending
} 95 | {repos.value?.data?.some((repo: any) => 96 | repo.name.startsWith("very-nested") 97 | ) && ( 98 |
104 |
105 | {repo.name}
106 |
107 |
108 | ))}
109 | {repos.value?.data?.some(
110 | (repo: any) => !repo.name.startsWith("very-nested")
111 | ) && (
112 |
118 |
119 | {repo.name}
120 |
121 |
122 | ))}
123 |
55 | {children}
56 |
57 |
89 |
107 |
153 | )}
154 | {expanded && isImageSrc(content) && (
155 |
114 |
120 | {isHref(content) ? (
121 |
126 | {decodeURI(content)}
127 |
128 | ) : (
129 | content
130 | )}
131 |
132 |
133 |
134 | {selected && (
135 |
150 | )}
151 |
152 |
156 | 
165 |
166 | )}
167 | {children && expanded && (
168 | -
169 | {children.map(child =>
170 | child === "timeline" ? (
171 |
110 |
115 | );
116 | };
117 |
--------------------------------------------------------------------------------
/packages/viewer/src/Viewer/Viewer.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { render, fireEvent, cleanup } from "@testing-library/react";
3 | import "@testing-library/jest-dom";
4 | import { Viewer } from "../Viewer";
5 |
6 | afterEach(cleanup);
7 |
8 | test("displays text and can be clicked", () => {
9 | const onClick = jest.fn();
10 |
11 | const { getByText } = render(Counter: {counter}
111 | 112 |clicking increment should make the selected item's input lose focus
113 |
99 |
112 |
113 |
132 |
203 | )}
204 |
205 |
206 |
207 | );
208 | };
209 |
--------------------------------------------------------------------------------
/packages/viewer/src/Viewer/isHref.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Checks if a string can be used as a href for an anchor.
3 | *
4 | * Internally, it just checks if there are two strings seprated by a dot. Bit naive but oh well.
5 | *
6 | * @param input input string to check
7 | */
8 | export function isHref(input: string): boolean {
9 | if (!input) {
10 | return false;
11 | }
12 | return /[a-zA-Z]+\.[a-zA-Z]/.test(input) || input.startsWith("./");
13 | }
14 |
15 | export function isImageSrc(input: string): boolean {
16 | return (
17 | isHref(input) &&
18 | (input.endsWith(".jpg") ||
19 | input.endsWith(".jpeg") ||
20 | input.endsWith(".png") ||
21 | input.endsWith(".gif"))
22 | );
23 | }
24 |
25 | export function possiblyPrependBaseUrl(
26 | input: string,
27 | baseUrl?: string
28 | ): string {
29 | if (baseUrl && input.startsWith("./")) {
30 | return baseUrl + input.substr(1);
31 | }
32 | return input;
33 | }
34 |
--------------------------------------------------------------------------------
/packages/viewer/src/WebViewer/WebViewer.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { WebViewer } from "WebViewer";
3 |
4 | export default {
5 | title: "WebViewer",
6 | component: WebViewer,
7 | };
8 |
9 | export const WebViewerBlank = () => {
10 | return
120 |
130 | {selectedItem && (
131 | -
127 |
141 | {
143 | preparedHandlers.undent();
144 | }}
145 | title="undent (shift + tab)"
146 | >
147 |
149 | {
151 | preparedHandlers.indent();
152 | }}
153 | title="indent (tab)"
154 | >
155 |
157 | {
159 | preparedHandlers.moveUp();
160 | }}
161 | title="move up (alt + up)"
162 | >
163 |
165 | {
167 | preparedHandlers.moveDown();
168 | }}
169 | title="move down (alt + down)"
170 | >
171 |
173 | {
175 | preparedHandlers.up();
176 | }}
177 | title="previous item (up)"
178 | >
179 |
181 | {
183 | preparedHandlers.down();
184 | }}
185 | title="next item (down)"
186 | >
187 |
189 |
190 |
192 | {onUpload && (
193 |
198 |
200 | )}
201 |
202 |
55 | {showBanner && (
56 |
75 | );
76 | };
77 |
78 | export const WebViewer = ({
79 | url = "./very-nested-data.json",
80 | showBanner = true,
81 | }: WebViewerProps) => {
82 | return (
83 |
57 | Made with{" "}
58 |
63 | Very Nested
64 |
65 |
66 | )}
67 | {request.pending ? (
68 | "Loading..."
69 | ) : request.rejected ? (
70 | "There was an error loading this page. Please refresh to try again."
71 | ) : (
72 |
23 | Youtube Example
24 | Update a nested item
25 |
26 | Expand the 'Recent' and Matt Corby - Miracle Love items,
27 | click to the right of the YouTube link, hit enter, then add a
28 | description and see it show up in the 'Music' and 'All' lists.
29 |
30 | Nest an existing item in a new list
31 |
32 | Click on Babish's Huevos Rancheros inside 'Cooking', copy the
33 | id next to the edit box. Expand 'Recent', click on{" "}
34 | Spicy garlic fried chicken, hit enter then paste the id in
35 | the empty edit box.
36 |
37 |
38 | Check out the{" "}
39 |
44 | published page
45 | {" "}
46 | if you like this list.
47 |
48 |
50 |
21 | Get Started!
22 | 1. GitHub Account
23 |
24 |
25 | Sign in
26 | {" "}
27 | to GitHub or{" "}
28 |
29 | Signup
30 | {" "}
31 | if you don't already have an account.
32 |
33 | 2. Allow access
34 |
35 | Allow the Very Nested app to access your GitHub account so we can save
36 | your lists.
37 |
38 | 3. Setup a new repo
39 |
40 | Very Nested will setup a new GitHub repository for your list.
41 |
42 | 4. Create
43 |
44 | Create a list and click save.
45 |
46 | 5. Publish
47 |
48 | Share your list with a Github.com address. You also have the option to
49 | setup a custom domain.
50 |
51 |
52 |
21 |
22 | Create lists on the internet.
23 |
24 |
25 | Very Nested is a free and{" "}
26 |
31 | open source
32 | {" "}
33 | app to create unique lists on the internet using your GitHub account.
34 |
35 |
49 | Get Started
50 |
51 |
52 |
152 |
53 | Example - YouTube videos I like
54 |
55 | Click on the plus icon to expand an item and see more details about
56 | it. Each item can be in multiple lists, which means adding a
57 | description to Matt Corby's Miracle Love in the 'Recent'
58 | list will add it in the 'Music' and 'All' lists.
59 |
60 |
61 |
62 | Edit this example
63 | {" "}
64 | to see more. You can also check out the{" "}
65 |
70 | published page
71 | {" "}
72 | if you like this list.
73 |
74 |
76 |
77 |
78 | Features
79 | Nesting
80 |
81 | Each item can be in multiple lists, so updating an item in one list
82 | will update it across all lists. Items can also be expanded and
83 | collapsed so you can organise your content in fun and creative ways.
84 |
85 | Photos and Files
86 |
87 | Add photos and files to your lists, even from your mobile.
88 |
89 | No Lock-In
90 |
91 | Very Nested is free,{" "}
92 |
97 | open source
98 | {" "}
99 | and we don't store any of your data. That means your content is safe
100 | and under your control, now and into the future. Even if I stopped
101 | working on Very Nested. You can even host your list on your own
102 | domain like I've done for{" "}
103 |
108 | cooking.cadell.dev
109 |
110 | .
111 |
112 | Published on GitHub
113 |
114 | We use{" "}
115 |
120 | GitHub
121 | {" "}
122 | to store your lists so you have more control over your data. We also
123 | use their{" "}
124 |
129 | hosting features
130 | {" "}
131 | to create websites for your lists and their{" "}
132 |
137 | version control
138 | {" "}
139 | features to keep a history of changes to your content. GitHub is{" "}
140 |
145 | free
146 | {" "}
147 | and the largest version control provider in the world with over 40
148 | million users.
149 |
150 |
151 |