kopia lustrzana https://github.com/fediversespace/fediverse.space
update frontend
Tao Bojlén
rodzic
4d4193ff49
commit
9cae5e58b2
|
|
@ -6,6 +6,8 @@ data/
|
|||
|
||||
backend/.sobelow
|
||||
node_modules/
|
||||
/frontend/build/
|
||||
/frontend/dist/
|
||||
|
||||
# Environments
|
||||
.env
|
||||
|
|
|
|||
|
|
@ -5,20 +5,29 @@ module.exports = {
|
|||
tsconfigRootDir: __dirname,
|
||||
project: ["./tsconfig.json"],
|
||||
},
|
||||
plugins: ["@typescript-eslint", "prettier"],
|
||||
plugins: ["@typescript-eslint"],
|
||||
extends: [
|
||||
"plugin:@typescript-eslint/recommended-requiring-type-checking",
|
||||
"plugin:@typescript-eslint/eslint-recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:react/recommended",
|
||||
"plugin:react-hooks/recommended",
|
||||
"prettier/@typescript-eslint",
|
||||
"prettier",
|
||||
],
|
||||
rules: {
|
||||
"@typescript-eslint/no-explicit-any": 0,
|
||||
"@typescript-eslint/explicit-function-return-type": 0,
|
||||
"react/prop-types": 0,
|
||||
"@typescript-eslint/no-non-null-assertion": 0
|
||||
"@typescript-eslint/no-non-null-assertion": 0,
|
||||
"@typescript-eslint/no-unsafe-assignment": ["off"],
|
||||
"@typescript-eslint/no-unsafe-argument": ["off"],
|
||||
"@typescript-eslint/no-unsafe-call": ["off"],
|
||||
"@typescript-eslint/no-unsafe-member-access": ["off"],
|
||||
"@typescript-eslint/no-unsafe-return": ["off"],
|
||||
"@typescript-eslint/restrict-template-expressions": ["off"],
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
version: "detect",
|
||||
},
|
||||
},
|
||||
};
|
||||
Plik diff jest za duży
Load Diff
|
|
@ -11,7 +11,7 @@
|
|||
<!-- Open Graph -->
|
||||
<meta property="og:site_name" content="fediverse.space" />
|
||||
<meta property="og:description" content="" />
|
||||
<meta property="og:image" content="%PUBLIC_URL%/preview.png" />
|
||||
<meta property="og:image" content="/preview.png" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="914" />
|
||||
<meta property="og:image:height" content="679" />
|
||||
|
|
@ -20,24 +20,10 @@
|
|||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="fediverse.space">
|
||||
<meta name="twitter:description" content="A tool to visualize decentralized social networks.">
|
||||
<meta name="twitter:image" content="%PUBLIC_URL%/preview.png">
|
||||
<meta name="twitter:image" content="/preview.png">
|
||||
<meta name="twitter:image:alt" content="A screenshot of fediverse.space. Shows a graph of fediverse instances." />
|
||||
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<title>fediverse.space</title>
|
||||
</head>
|
||||
|
||||
|
|
@ -46,6 +32,7 @@
|
|||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Plik diff jest za duży
Load Diff
|
|
@ -3,16 +3,13 @@
|
|||
"version": "2.8.2",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "NODE_ENV=development react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"start": "vite",
|
||||
"build": "npm run typecheck && vite build",
|
||||
"serve": "vite preview",
|
||||
"typecheck": "tsc --noemit",
|
||||
"lint": "yarn typecheck && yarn eslint src/ --ext .js,.jsx,.ts,.tsx",
|
||||
"lint:fix": "yarn lint --fix",
|
||||
"pretty": "prettier --write \"src/**/*.{ts,tsx}\"",
|
||||
"test": "yarn lint && react-scripts test --ci",
|
||||
"eject": "react-scripts eject",
|
||||
"snyk-protect": "snyk protect",
|
||||
"prepare": "yarn run snyk-protect"
|
||||
"lint": "eslint src/ --ext .js,.jsx,.ts,.tsx",
|
||||
"lint:fix": "npm run lint --fix",
|
||||
"pretty": "prettier --write \"src/**/*.{ts,tsx}\""
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
|
|
@ -21,17 +18,17 @@
|
|||
},
|
||||
"lint-staged": {
|
||||
"src/**/*.{ts,tsx}": [
|
||||
"yarn pretty",
|
||||
"yarn lint:fix"
|
||||
"npm run pretty",
|
||||
"npm run lint:fix"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 120
|
||||
},
|
||||
"dependencies": {
|
||||
"@blueprintjs/core": "^3.33.0",
|
||||
"@blueprintjs/icons": "^3.22.0",
|
||||
"@blueprintjs/select": "^3.14.2",
|
||||
"@blueprintjs/core": "^4.20.1",
|
||||
"@blueprintjs/icons": "^4.16.0",
|
||||
"@blueprintjs/select": "^4.9.22",
|
||||
"classnames": "^2.2.6",
|
||||
"connected-react-router": "^6.5.2",
|
||||
"cross-fetch": "^3.0.6",
|
||||
|
|
@ -46,12 +43,10 @@
|
|||
"react-dom": "^16.10.2",
|
||||
"react-redux": "^7.2.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-sigma": "^1.2.35",
|
||||
"react-virtualized": "^9.22.2",
|
||||
"redux": "^4.0.4",
|
||||
"redux-thunk": "^2.3.0",
|
||||
"sanitize-html": "^2.0.0",
|
||||
"snyk": "^1.410.1",
|
||||
"styled-components": "^5.2.0",
|
||||
"tippy.js": "^4.3.5"
|
||||
},
|
||||
|
|
@ -70,26 +65,26 @@
|
|||
"@types/react-router-dom": "^5.1.6",
|
||||
"@types/sanitize-html": "^1.27.0",
|
||||
"@types/styled-components": "5.1.3",
|
||||
"@typescript-eslint/eslint-plugin": "^2.24.0",
|
||||
"@typescript-eslint/parser": "^2.34.0",
|
||||
"eslint-config-airbnb-typescript": "^7.2.1",
|
||||
"eslint-config-prettier": "^6.12.0",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.3.1",
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
"eslint-plugin-react": "^7.21.3",
|
||||
"eslint-plugin-react-hooks": "^4.1.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.9",
|
||||
"@typescript-eslint/parser": "^5.59.9",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
"eslint": "^8.42.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-jsx-a11y": "^6.7.1",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"husky": "^4.3.0",
|
||||
"lint-staged": "^10.4.0",
|
||||
"prettier": "^2.1.2",
|
||||
"react-scripts": "3.4.3",
|
||||
"typescript": "^3.9.2"
|
||||
"typescript": "^5.1.3",
|
||||
"vite": "^4.3.9",
|
||||
"vite-plugin-svgr": "^3.2.0"
|
||||
},
|
||||
"browserslist": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not ie <= 11",
|
||||
"not op_mini all"
|
||||
],
|
||||
"snyk": true
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ interface NavState {
|
|||
const graphIsActive = (currMatch: match<InstanceDomainPath>, location: Location) =>
|
||||
location.pathname === "/" || location.pathname.startsWith("/instance/");
|
||||
|
||||
class Nav extends React.Component<{}, NavState> {
|
||||
class Nav extends React.Component<Record<string, never>, NavState> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = { aboutIsOpen: false };
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { Classes, Code, H1, H2, H3 } from "@blueprintjs/core";
|
||||
import * as React from "react";
|
||||
import styled from "styled-components";
|
||||
import * as appsignalLogo from "../../assets/appsignal.png";
|
||||
import * as gitlabLogo from "../../assets/gitlab.png";
|
||||
import * as nlnetLogo from "../../assets/nlnet.png";
|
||||
import appsignalLogo from "../../assets/appsignal.png";
|
||||
import gitlabLogo from "../../assets/gitlab.png";
|
||||
import nlnetLogo from "../../assets/nlnet.png";
|
||||
import { Page } from "../atoms";
|
||||
|
||||
const SponsorContainer = styled.div`
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import {
|
|||
H2,
|
||||
HTMLTable,
|
||||
Icon,
|
||||
IconSize,
|
||||
NonIdealState,
|
||||
Position,
|
||||
Spinner,
|
||||
|
|
@ -296,7 +297,7 @@ class InstanceScreenImpl extends React.PureComponent<InstanceScreenProps, Instan
|
|||
statusesPerUserPerDay,
|
||||
} = this.props.instanceDetails;
|
||||
return (
|
||||
<StyledHTMLTable small striped>
|
||||
<StyledHTMLTable condensed striped>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Version</td>
|
||||
|
|
@ -329,7 +330,7 @@ class InstanceScreenImpl extends React.PureComponent<InstanceScreenProps, Instan
|
|||
position={Position.TOP}
|
||||
className={Classes.DARK}
|
||||
>
|
||||
<Icon icon={IconNames.HELP} iconSize={Icon.SIZE_STANDARD} />
|
||||
<Icon icon={IconNames.HELP} iconSize={IconSize.STANDARD} />
|
||||
</Tooltip>
|
||||
</td>
|
||||
<td>{(insularity && numeral.default(insularity).format("0.0%")) || "Unknown"}</td>
|
||||
|
|
@ -349,7 +350,7 @@ class InstanceScreenImpl extends React.PureComponent<InstanceScreenProps, Instan
|
|||
position={Position.TOP}
|
||||
className={Classes.DARK}
|
||||
>
|
||||
<Icon icon={IconNames.HELP} iconSize={Icon.SIZE_STANDARD} />
|
||||
<Icon icon={IconNames.HELP} iconSize={IconSize.STANDARD} />
|
||||
</Tooltip>
|
||||
</td>
|
||||
<td>{(statusesPerDay && numeral.default(statusesPerDay).format("0.0")) || "Unknown"}</td>
|
||||
|
|
@ -369,7 +370,7 @@ class InstanceScreenImpl extends React.PureComponent<InstanceScreenProps, Instan
|
|||
position={Position.TOP}
|
||||
className={Classes.DARK}
|
||||
>
|
||||
<Icon icon={IconNames.HELP} iconSize={Icon.SIZE_STANDARD} />
|
||||
<Icon icon={IconNames.HELP} iconSize={IconSize.STANDARD} />
|
||||
</Tooltip>
|
||||
</td>
|
||||
<td>{(statusesPerUserPerDay && numeral.default(statusesPerUserPerDay).format("0.000")) || "Unknown"}</td>
|
||||
|
|
@ -420,7 +421,7 @@ class InstanceScreenImpl extends React.PureComponent<InstanceScreenProps, Instan
|
|||
would mean that every single status on {this.props.instanceName} contained a mention of someone on the other
|
||||
instance, and vice versa.
|
||||
</p>
|
||||
<StyledHTMLTable small striped interactive={false}>
|
||||
<StyledHTMLTable condensed striped interactive={false}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Instance</th>
|
||||
|
|
@ -456,7 +457,7 @@ class InstanceScreenImpl extends React.PureComponent<InstanceScreenProps, Instan
|
|||
<p className={Classes.TEXT_MUTED}>
|
||||
All the instances, past and present, that {this.props.instanceName} knows about.
|
||||
</p>
|
||||
<StyledHTMLTable small striped interactive={false} className="fediverse-sidebar-table">
|
||||
<StyledHTMLTable condensed striped interactive={false} className="fediverse-sidebar-table">
|
||||
<tbody>{peerRows}</tbody>
|
||||
</StyledHTMLTable>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ interface LoginScreenState {
|
|||
selectedLoginType?: "email" | "fediverseAccount";
|
||||
error: boolean;
|
||||
}
|
||||
class LoginScreen extends React.PureComponent<{}, LoginScreenState> {
|
||||
class LoginScreen extends React.PureComponent<Record<string, never>, LoginScreenState> {
|
||||
public constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Button, Callout, H1, InputGroup, Intent, NonIdealState, Spinner } from "@blueprintjs/core";
|
||||
import { Button, Callout, H1, InputGroup, Intent, NonIdealState, Spinner, SpinnerSize } from "@blueprintjs/core";
|
||||
import { IconNames } from "@blueprintjs/icons";
|
||||
import { push } from "connected-react-router";
|
||||
import { get, isEqual } from "lodash";
|
||||
|
|
@ -90,7 +90,7 @@ class SearchScreen extends React.PureComponent<SearchScreenProps, SearchScreenSt
|
|||
onMouseLeave={this.onMouseLeave}
|
||||
/>
|
||||
))}
|
||||
{isLoadingResults && <StyledSpinner size={Spinner.SIZE_SMALL} />}
|
||||
{isLoadingResults && <StyledSpinner size={SpinnerSize.SMALL} />}
|
||||
{!isLoadingResults && hasMoreResults && (
|
||||
<Button onClick={this.search} minimal>
|
||||
Load more results
|
||||
|
|
@ -102,7 +102,7 @@ class SearchScreen extends React.PureComponent<SearchScreenProps, SearchScreenSt
|
|||
|
||||
let rightSearchBarElement;
|
||||
if (isLoadingResults) {
|
||||
rightSearchBarElement = <Spinner size={Spinner.SIZE_SMALL} />;
|
||||
rightSearchBarElement = <Spinner size={SpinnerSize.SMALL} />;
|
||||
} else if (query || error) {
|
||||
rightSearchBarElement = <Button minimal icon={IconNames.CROSS} onClick={this.clearQuery} aria-label="Search" />;
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
// / <reference types="react-scripts" />
|
||||
|
|
@ -13,7 +13,6 @@ export interface SearchFilter {
|
|||
type SearchFilterField = "type" | "user_count";
|
||||
const searchFilterFieldTranslations = {
|
||||
type: "Instance type",
|
||||
// eslint-disable-next-line @typescript-eslint/camelcase
|
||||
user_count: "User count",
|
||||
};
|
||||
const searchFilterRelationTranslations = {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
declare module "cytoscape-popper" {
|
||||
const prototype: {};
|
||||
const prototype: unknown;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ import { DESKTOP_WIDTH_THRESHOLD, InstanceDomainPath, INSTANCE_DOMAIN_PATH } fro
|
|||
import { AppState } from "./redux/types";
|
||||
|
||||
let API_ROOT = "http://localhost:4000/api/";
|
||||
if (["true", true, 1, "1"].includes(process.env.REACT_APP_STAGING || "")) {
|
||||
if (["true", true, 1, "1"].includes(import.meta.env.VITE_STAGING || "")) {
|
||||
API_ROOT = "https://phoenix.api-develop.fediverse.space/api/";
|
||||
} else if (process.env.NODE_ENV === "production") {
|
||||
} else if (import.meta.env.PROD) {
|
||||
API_ROOT = "https://phoenix.api.fediverse.space/api/";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-plugin-svgr/client" />
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"target": "esnext",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"types": ["vite/client"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import svgr from "vite-plugin-svgr";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), svgr()],
|
||||
});
|
||||
13659
frontend/yarn.lock
13659
frontend/yarn.lock
Plik diff jest za duży
Load Diff
Ładowanie…
Reference in New Issue