mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-09-20 15:08:34 +03:00
Merge pull request #4197 from tylershuster/hark-title
interface: document title
This commit is contained in:
commit
1b96410b94
@ -1,7 +1,7 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>OS1</title>
|
<title>Landscape</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
content="width=device-width, initial-scale=1, shrink-to-fit=no,maximum-scale=1"/>
|
content="width=device-width, initial-scale=1, shrink-to-fit=no,maximum-scale=1"/>
|
||||||
@ -12,8 +12,8 @@
|
|||||||
<link rel="icon" type="image/png" href="/~landscape/img/Favicon.png">
|
<link rel="icon" type="image/png" href="/~landscape/img/Favicon.png">
|
||||||
<link rel="manifest"
|
<link rel="manifest"
|
||||||
href='data:application/manifest+json,{
|
href='data:application/manifest+json,{
|
||||||
"name": "OS1",
|
"name": "Landscape",
|
||||||
"short_name": "OS1",
|
"short_name": "Landscape",
|
||||||
"description": "An%20interface%20to%20your%20Urbit.",
|
"description": "An%20interface%20to%20your%20Urbit.",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"background_color": "%23FFFFFF",
|
"background_color": "%23FFFFFF",
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
|
|
||||||
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
|
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
|
||||||
|
|
||||||
<title>OS1</title>
|
<title>Landscape</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import Helmet from 'react-helmet';
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
import { Box, Row, Icon, Text } from '@tlon/indigo-react';
|
import { Box, Row, Icon, Text } from '@tlon/indigo-react';
|
||||||
@ -14,6 +13,7 @@ import ModalButton from './components/ModalButton';
|
|||||||
import { writeText } from '~/logic/lib/util';
|
import { writeText } from '~/logic/lib/util';
|
||||||
import { NewGroup } from "~/views/landscape/components/NewGroup";
|
import { NewGroup } from "~/views/landscape/components/NewGroup";
|
||||||
import { JoinGroup } from "~/views/landscape/components/JoinGroup";
|
import { JoinGroup } from "~/views/landscape/components/JoinGroup";
|
||||||
|
import { Helmet } from 'react-helmet';
|
||||||
|
|
||||||
const ScrollbarLessBox = styled(Box)`
|
const ScrollbarLessBox = styled(Box)`
|
||||||
scrollbar-width: none !important;
|
scrollbar-width: none !important;
|
||||||
@ -28,8 +28,8 @@ export default function LaunchApp(props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Helmet>
|
<Helmet defer={false}>
|
||||||
<title>OS1 - Home</title>
|
<title>{ props.notificationsCount ? `(${String(props.notificationsCount) }) `: '' }Landscape</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<ScrollbarLessBox height='100%' overflowY='scroll'>
|
<ScrollbarLessBox height='100%' overflowY='scroll'>
|
||||||
<Welcome firstTime={props.launch.firstTime} api={props.api} />
|
<Welcome firstTime={props.launch.firstTime} api={props.api} />
|
||||||
|
@ -6,6 +6,7 @@ import ErrorBoundary from '~/views/components/ErrorBoundary';
|
|||||||
import Tile from './tile';
|
import Tile from './tile';
|
||||||
|
|
||||||
export const weatherStyleMap = {
|
export const weatherStyleMap = {
|
||||||
|
Clear: 'rgba(67, 169, 255, 0.4)',
|
||||||
Sunny: 'rgba(67, 169, 255, 0.4)',
|
Sunny: 'rgba(67, 169, 255, 0.4)',
|
||||||
PartlyCloudy: 'rgba(178, 211, 255, 0.33)',
|
PartlyCloudy: 'rgba(178, 211, 255, 0.33)',
|
||||||
Cloudy: 'rgba(136, 153, 176, 0.43)',
|
Cloudy: 'rgba(136, 153, 176, 0.43)',
|
||||||
|
@ -47,7 +47,7 @@ export default function ProfileScreen(props: any) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Helmet defer={false}>
|
<Helmet defer={false}>
|
||||||
<title>OS1 - Profile</title>
|
<title>{ props.notificationsCount ? `(${String(props.notificationsCount) }) `: '' }Landscape - Profile</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route
|
<Route
|
||||||
|
@ -46,8 +46,8 @@ export default class TermApp extends Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Helmet>
|
<Helmet defer={false}>
|
||||||
<title>OS1 - Terminal</title>
|
<title>{ props.notificationsCount ? `(${String(this.props.notificationsCount) }) `: '' }Landscape</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<Box
|
<Box
|
||||||
height='100%'
|
height='100%'
|
||||||
|
@ -7,6 +7,7 @@ import {
|
|||||||
} from "react-router-dom";
|
} from "react-router-dom";
|
||||||
import { Col, Box, Text } from "@tlon/indigo-react";
|
import { Col, Box, Text } from "@tlon/indigo-react";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
|
import Helmet from 'react-helmet';
|
||||||
|
|
||||||
import { Resource } from "./Resource";
|
import { Resource } from "./Resource";
|
||||||
import { PopoverRoutes } from "./PopoverRoutes";
|
import { PopoverRoutes } from "./PopoverRoutes";
|
||||||
@ -131,28 +132,36 @@ export function GroupsPane(props: GroupsPaneProps) {
|
|||||||
const appPath = `/ship/${host}/${name}`;
|
const appPath = `/ship/${host}/${name}`;
|
||||||
const association = associations.graph[appPath];
|
const association = associations.graph[appPath];
|
||||||
const resourceUrl = `${baseUrl}/join/${app}${appPath}`;
|
const resourceUrl = `${baseUrl}/join/${app}${appPath}`;
|
||||||
|
let title = groupAssociation?.metadata?.title ?? 'Landscape';
|
||||||
|
|
||||||
if (!association) {
|
if (!association) {
|
||||||
return <Loading />;
|
return <Loading />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
title += ` - ${association.metadata.title}`;
|
||||||
return (
|
return (
|
||||||
<Skeleton
|
<>
|
||||||
recentGroups={recentGroups}
|
<Helmet defer={false}>
|
||||||
mobileHide
|
<title>{props.notificationsCount ? `(${String(props.notificationsCount)}) ` : ''}{ title }</title>
|
||||||
selected={appPath}
|
</Helmet>
|
||||||
{...props}
|
<Skeleton
|
||||||
baseUrl={baseUrl}
|
recentGroups={recentGroups}
|
||||||
>
|
mobileHide
|
||||||
<UnjoinedResource
|
selected={appPath}
|
||||||
graphKeys={props.graphKeys}
|
{...props}
|
||||||
notebooks={props.notebooks}
|
|
||||||
inbox={props.inbox}
|
|
||||||
baseUrl={baseUrl}
|
baseUrl={baseUrl}
|
||||||
api={api}
|
>
|
||||||
association={association}
|
<UnjoinedResource
|
||||||
/>
|
graphKeys={props.graphKeys}
|
||||||
{popovers(routeProps, resourceUrl)}
|
notebooks={props.notebooks}
|
||||||
</Skeleton>
|
inbox={props.inbox}
|
||||||
|
baseUrl={baseUrl}
|
||||||
|
api={api}
|
||||||
|
association={association}
|
||||||
|
/>
|
||||||
|
{popovers(routeProps, resourceUrl)}
|
||||||
|
</Skeleton>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
@ -184,20 +193,26 @@ export function GroupsPane(props: GroupsPaneProps) {
|
|||||||
const hasDescription = groupAssociation?.metadata?.description;
|
const hasDescription = groupAssociation?.metadata?.description;
|
||||||
const description = (hasDescription && hasDescription !== "")
|
const description = (hasDescription && hasDescription !== "")
|
||||||
? hasDescription : "Create or select a channel to get started"
|
? hasDescription : "Create or select a channel to get started"
|
||||||
|
const title = groupAssociation?.metadata?.title ?? 'Landscape';
|
||||||
return (
|
return (
|
||||||
<Skeleton recentGroups={recentGroups} {...props} baseUrl={baseUrl}>
|
<>
|
||||||
<Col
|
<Helmet defer={false}>
|
||||||
alignItems="center"
|
<title>{props.notificationsCount ? `(${String(props.notificationsCount)}) ` : ''}{ title }</title>
|
||||||
justifyContent="center"
|
</Helmet>
|
||||||
display={["none", "flex"]}
|
<Skeleton recentGroups={recentGroups} {...props} baseUrl={baseUrl}>
|
||||||
p='4'
|
<Col
|
||||||
>
|
alignItems="center"
|
||||||
<Box p="4"><Text fontSize="0" color='gray'>
|
justifyContent="center"
|
||||||
{description}
|
display={["none", "flex"]}
|
||||||
</Text></Box>
|
p='4'
|
||||||
</Col>
|
>
|
||||||
{popovers(routeProps, baseUrl)}
|
<Box p="4"><Text fontSize="0" color='gray'>
|
||||||
</Skeleton>
|
{description}
|
||||||
|
</Text></Box>
|
||||||
|
</Col>
|
||||||
|
{popovers(routeProps, baseUrl)}
|
||||||
|
</Skeleton>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React, { useCallback } from "react";
|
import React, { useCallback } from "react";
|
||||||
import { Row, Box, Col } from "@tlon/indigo-react";
|
import { Row, Box, Col } from "@tlon/indigo-react";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import { Link } from "react-router-dom";
|
import Helmet from 'react-helmet';
|
||||||
|
|
||||||
import { ChatResource } from "~/views/apps/chat/ChatResource";
|
import { ChatResource } from "~/views/apps/chat/ChatResource";
|
||||||
import { PublishResource } from "~/views/apps/publish/PublishResource";
|
import { PublishResource } from "~/views/apps/publish/PublishResource";
|
||||||
@ -34,47 +34,58 @@ export function Resource(props: ResourceProps) {
|
|||||||
const relativePath = (p: string) =>
|
const relativePath = (p: string) =>
|
||||||
`${props.baseUrl}/resource/${app}${appPath}${p}`;
|
`${props.baseUrl}/resource/${app}${appPath}${p}`;
|
||||||
const skelProps = { api, association };
|
const skelProps = { api, association };
|
||||||
|
let title = props.association.metadata.title;
|
||||||
|
if ('workspace' in props) {
|
||||||
|
if ('group' in props.workspace && props.workspace.group in props.associations.contacts) {
|
||||||
|
title = `${props.associations.contacts[props.workspace.group].metadata.title} - ${props.association.metadata.title}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Switch>
|
<>
|
||||||
<Route
|
<Helmet defer={false}>
|
||||||
path={relativePath("/settings")}
|
<title>{props.notificationsCount ? `(${String(props.notificationsCount)}) ` : ''}{ title }</title>
|
||||||
render={(routeProps) => {
|
</Helmet>
|
||||||
return (
|
<Switch>
|
||||||
|
<Route
|
||||||
|
path={relativePath("/settings")}
|
||||||
|
render={(routeProps) => {
|
||||||
|
return (
|
||||||
|
<ResourceSkeleton
|
||||||
|
baseUrl={props.baseUrl}
|
||||||
|
{...skelProps}
|
||||||
|
>
|
||||||
|
<ChannelSettings
|
||||||
|
groups={props.groups}
|
||||||
|
contacts={props.contacts}
|
||||||
|
associations={props.associations}
|
||||||
|
api={api}
|
||||||
|
association={association}
|
||||||
|
/>
|
||||||
|
</ResourceSkeleton>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path={relativePath("")}
|
||||||
|
render={(routeProps) => (
|
||||||
<ResourceSkeleton
|
<ResourceSkeleton
|
||||||
|
notificationsGraphConfig={props.notificationsGraphConfig}
|
||||||
|
notificationsChatConfig={props.notificationsChatConfig}
|
||||||
baseUrl={props.baseUrl}
|
baseUrl={props.baseUrl}
|
||||||
{...skelProps}
|
{...skelProps}
|
||||||
|
atRoot
|
||||||
>
|
>
|
||||||
<ChannelSettings
|
{app === "chat" ? (
|
||||||
groups={props.groups}
|
<ChatResource {...props} />
|
||||||
contacts={props.contacts}
|
) : app === "publish" ? (
|
||||||
associations={props.associations}
|
<PublishResource {...props} />
|
||||||
api={api}
|
) : (
|
||||||
association={association}
|
<LinkResource {...props} />
|
||||||
/>
|
)}
|
||||||
</ResourceSkeleton>
|
</ResourceSkeleton>
|
||||||
);
|
)}
|
||||||
}}
|
/>
|
||||||
/>
|
</Switch>
|
||||||
<Route
|
</>
|
||||||
path={relativePath("")}
|
|
||||||
render={(routeProps) => (
|
|
||||||
<ResourceSkeleton
|
|
||||||
notificationsGraphConfig={props.notificationsGraphConfig}
|
|
||||||
notificationsChatConfig={props.notificationsChatConfig}
|
|
||||||
baseUrl={props.baseUrl}
|
|
||||||
{...skelProps}
|
|
||||||
atRoot
|
|
||||||
>
|
|
||||||
{app === "chat" ? (
|
|
||||||
<ChatResource {...props} />
|
|
||||||
) : app === "publish" ? (
|
|
||||||
<PublishResource {...props} />
|
|
||||||
) : (
|
|
||||||
<LinkResource {...props} />
|
|
||||||
)}
|
|
||||||
</ResourceSkeleton>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Switch>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import React, { Component, useEffect, useCallback } from 'react';
|
import React, { Component, useEffect, useCallback } from 'react';
|
||||||
import { Route, Switch, RouteComponentProps } from 'react-router-dom';
|
import { Route, Switch, RouteComponentProps } from 'react-router-dom';
|
||||||
|
import Helmet from 'react-helmet';
|
||||||
|
|
||||||
import './css/custom.css';
|
import './css/custom.css';
|
||||||
|
|
||||||
@ -67,8 +68,6 @@ export function DMRedirect(props: LandscapeProps & RouteComponentProps & { ship:
|
|||||||
|
|
||||||
export default class Landscape extends Component<LandscapeProps, {}> {
|
export default class Landscape extends Component<LandscapeProps, {}> {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
document.title = 'OS1 - Landscape';
|
|
||||||
|
|
||||||
this.props.subscription.startApp('groups');
|
this.props.subscription.startApp('groups');
|
||||||
this.props.subscription.startApp('graph');
|
this.props.subscription.startApp('graph');
|
||||||
}
|
}
|
||||||
@ -78,71 +77,76 @@ export default class Landscape extends Component<LandscapeProps, {}> {
|
|||||||
const { api } = props;
|
const { api } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Switch>
|
<>
|
||||||
<Route path="/~landscape/ship/:host/:name"
|
<Helmet defer={false}>
|
||||||
render={routeProps => {
|
<title>{ props.notificationsCount ? `(${String(props.notificationsCount) }) `: '' }Landscape</title>
|
||||||
const {
|
</Helmet>
|
||||||
host,
|
<Switch>
|
||||||
name
|
<Route path="/~landscape/ship/:host/:name"
|
||||||
} = routeProps.match.params as Record<string, string>;
|
render={routeProps => {
|
||||||
const groupPath = `/ship/${host}/${name}`;
|
const {
|
||||||
const baseUrl = `/~landscape${groupPath}`;
|
host,
|
||||||
const ws: Workspace = { type: 'group', group: groupPath };
|
name
|
||||||
|
} = routeProps.match.params as Record<string, string>;
|
||||||
|
const groupPath = `/ship/${host}/${name}`;
|
||||||
|
const baseUrl = `/~landscape${groupPath}`;
|
||||||
|
const ws: Workspace = { type: 'group', group: groupPath };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GroupsPane workspace={ws} baseUrl={baseUrl} {...props} />
|
<GroupsPane workspace={ws} baseUrl={baseUrl} {...props} />
|
||||||
)
|
)
|
||||||
}}/>
|
}}/>
|
||||||
<Route path="/~landscape/home"
|
<Route path="/~landscape/home"
|
||||||
|
render={routeProps => {
|
||||||
|
const ws: Workspace = { type: 'home' };
|
||||||
|
return (
|
||||||
|
<GroupsPane workspace={ws} baseUrl="/~landscape/home" {...props} />
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Route path="/~landscape/new"
|
||||||
|
render={routeProps=> {
|
||||||
|
return (
|
||||||
|
<Body>
|
||||||
|
<Box maxWidth="300px">
|
||||||
|
<NewGroup
|
||||||
|
groups={props.groups}
|
||||||
|
contacts={props.contacts}
|
||||||
|
api={props.api}
|
||||||
|
{...routeProps}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Body>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Route path='/~landscape/dm/:ship?'
|
||||||
render={routeProps => {
|
render={routeProps => {
|
||||||
const ws: Workspace = { type: 'home' };
|
const { ship } = routeProps.match.params;
|
||||||
return (
|
return <DMRedirect {...routeProps} {...props} ship={ship} />
|
||||||
<GroupsPane workspace={ws} baseUrl="/~landscape/home" {...props} />
|
|
||||||
);
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Route path="/~landscape/new"
|
<Route path="/~landscape/join/:ship?/:name?"
|
||||||
render={routeProps=> {
|
render={routeProps=> {
|
||||||
return (
|
const { ship, name } = routeProps.match.params;
|
||||||
<Body>
|
const autojoin = ship && name ? `${ship}/${name}` : null;
|
||||||
<Box maxWidth="300px">
|
return (
|
||||||
<NewGroup
|
<Body>
|
||||||
groups={props.groups}
|
<Box maxWidth="300px">
|
||||||
contacts={props.contacts}
|
<JoinGroup
|
||||||
api={props.api}
|
groups={props.groups}
|
||||||
{...routeProps}
|
contacts={props.contacts}
|
||||||
/>
|
api={props.api}
|
||||||
</Box>
|
autojoin={autojoin}
|
||||||
</Body>
|
{...routeProps}
|
||||||
);
|
/>
|
||||||
}}
|
</Box>
|
||||||
/>
|
</Body>
|
||||||
<Route path='/~landscape/dm/:ship?'
|
);
|
||||||
render={routeProps => {
|
}}
|
||||||
const { ship } = routeProps.match.params;
|
/>
|
||||||
return <DMRedirect {...routeProps} {...props} ship={ship} />
|
</Switch>
|
||||||
}}
|
</>
|
||||||
/>
|
|
||||||
<Route path="/~landscape/join/:ship?/:name?"
|
|
||||||
render={routeProps=> {
|
|
||||||
const { ship, name } = routeProps.match.params;
|
|
||||||
const autojoin = ship && name ? `${ship}/${name}` : null;
|
|
||||||
return (
|
|
||||||
<Body>
|
|
||||||
<Box maxWidth="300px">
|
|
||||||
<JoinGroup
|
|
||||||
groups={props.groups}
|
|
||||||
contacts={props.contacts}
|
|
||||||
api={props.api}
|
|
||||||
autojoin={autojoin}
|
|
||||||
{...routeProps}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Body>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Switch>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user