ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-09-20 15:08:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4197 from tylershuster/hark-title

Browse Source 
interface: document title
This commit is contained in:
matildepark 2021-01-06 16:10:37 -05:00 committed by GitHub
commit 1b96410b94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 171 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pkg/arvo/app/landscape/index.html
View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>OS1</title>
<title>Landscape</title>
<meta charset="utf-8" />
<meta name="viewport"
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="manifest"
href='data:application/manifest+json,{
"name": "OS1",
"short_name": "OS1",
"name": "Landscape",
"short_name": "Landscape",
"description": "An%20interface%20to%20your%20Urbit.",
"display": "standalone",
"background_color": "%23FFFFFF",

2
pkg/interface/public/index.html
View File

@ -10,7 +10,7 @@
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
<title>OS1</title>
<title>Landscape</title>
</head>
<body>

6
pkg/interface/src/views/apps/launch/app.js
View File

@ -1,5 +1,4 @@
import React, { useState } from 'react';
import Helmet from 'react-helmet';
import styled from 'styled-components';
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 { NewGroup } from "~/views/landscape/components/NewGroup";
import { JoinGroup } from "~/views/landscape/components/JoinGroup";
import { Helmet } from 'react-helmet';
const ScrollbarLessBox = styled(Box)`
scrollbar-width: none !important;
@ -28,8 +28,8 @@ export default function LaunchApp(props) {
return (
<>
<Helmet>
<title>OS1 - Home</title>
<Helmet defer={false}>
<title>{ props.notificationsCount ? `(${String(props.notificationsCount) }) `: '' }Landscape</title>
</Helmet>
<ScrollbarLessBox height='100%' overflowY='scroll'>
<Welcome firstTime={props.launch.firstTime} api={props.api} />

1
pkg/interface/src/views/apps/launch/components/tiles/weather.js
View File

@ -6,6 +6,7 @@ import ErrorBoundary from '~/views/components/ErrorBoundary';
import Tile from './tile';
export const weatherStyleMap = {
Clear: 'rgba(67, 169, 255, 0.4)',
Sunny: 'rgba(67, 169, 255, 0.4)',
PartlyCloudy: 'rgba(178, 211, 255, 0.33)',
Cloudy: 'rgba(136, 153, 176, 0.43)',

2
pkg/interface/src/views/apps/profile/profile.tsx
View File

@ -47,7 +47,7 @@ export default function ProfileScreen(props: any) {
return (
<>
<Helmet defer={false}>
<title>OS1 - Profile</title>
<title>{ props.notificationsCount ? `(${String(props.notificationsCount) }) `: '' }Landscape - Profile</title>
</Helmet>
<Switch>
<Route

4
pkg/interface/src/views/apps/term/app.js
View File

@ -46,8 +46,8 @@ export default class TermApp extends Component {
render() {
return (
<>
<Helmet>
<title>OS1 - Terminal</title>
<Helmet defer={false}>
<title>{ props.notificationsCount ? `(${String(this.props.notificationsCount) }) `: '' }Landscape</title>
</Helmet>
<Box
height='100%'

73
pkg/interface/src/views/landscape/components/GroupsPane.tsx
View File

@ -7,6 +7,7 @@ import {
} from "react-router-dom";
import { Col, Box, Text } from "@tlon/indigo-react";
import _ from "lodash";
import Helmet from 'react-helmet';
import { Resource } from "./Resource";
import { PopoverRoutes } from "./PopoverRoutes";
@ -131,28 +132,36 @@ export function GroupsPane(props: GroupsPaneProps) {
const appPath = `/ship/${host}/${name}`;
const association = associations.graph[appPath];
const resourceUrl = `${baseUrl}/join/${app}${appPath}`;
let title = groupAssociation?.metadata?.title ?? 'Landscape';
if (!association) {
return <Loading />;
}
title += ` - ${association.metadata.title}`;
return (
<Skeleton
recentGroups={recentGroups}
mobileHide
selected={appPath}
{...props}
baseUrl={baseUrl}
>
<UnjoinedResource
graphKeys={props.graphKeys}
notebooks={props.notebooks}
inbox={props.inbox}
<>
<Helmet defer={false}>
<title>{props.notificationsCount ? `(${String(props.notificationsCount)}) ` : ''}{ title }</title>
</Helmet>
<Skeleton
recentGroups={recentGroups}
mobileHide
selected={appPath}
{...props}
baseUrl={baseUrl}
api={api}
association={association}
/>
{popovers(routeProps, resourceUrl)}
</Skeleton>
>
<UnjoinedResource
graphKeys={props.graphKeys}
notebooks={props.notebooks}
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 description = (hasDescription && hasDescription !== "")
? hasDescription : "Create or select a channel to get started"
const title = groupAssociation?.metadata?.title ?? 'Landscape';
return (
<Skeleton recentGroups={recentGroups} {...props} baseUrl={baseUrl}>
<Col
alignItems="center"
justifyContent="center"
display={["none", "flex"]}
p='4'
>
<Box p="4"><Text fontSize="0" color='gray'>
{description}
</Text></Box>
</Col>
{popovers(routeProps, baseUrl)}
</Skeleton>
<>
<Helmet defer={false}>
<title>{props.notificationsCount ? `(${String(props.notificationsCount)}) ` : ''}{ title }</title>
</Helmet>
<Skeleton recentGroups={recentGroups} {...props} baseUrl={baseUrl}>
<Col
alignItems="center"
justifyContent="center"
display={["none", "flex"]}
p='4'
>
<Box p="4"><Text fontSize="0" color='gray'>
{description}
</Text></Box>
</Col>
{popovers(routeProps, baseUrl)}
</Skeleton>
</>
);
}}
/>

85
pkg/interface/src/views/landscape/components/Resource.tsx
View File

@ -1,7 +1,7 @@
import React, { useCallback } from "react";
import { Row, Box, Col } from "@tlon/indigo-react";
import styled from "styled-components";
import { Link } from "react-router-dom";
import Helmet from 'react-helmet';
import { ChatResource } from "~/views/apps/chat/ChatResource";
import { PublishResource } from "~/views/apps/publish/PublishResource";
@ -34,47 +34,58 @@ export function Resource(props: ResourceProps) {
const relativePath = (p: string) =>
`${props.baseUrl}/resource/${app}${appPath}${p}`;
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 (
<Switch>
<Route
path={relativePath("/settings")}
render={(routeProps) => {
return (
<>
<Helmet defer={false}>
<title>{props.notificationsCount ? `(${String(props.notificationsCount)}) ` : ''}{ title }</title>
</Helmet>
<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
notificationsGraphConfig={props.notificationsGraphConfig}
notificationsChatConfig={props.notificationsChatConfig}
baseUrl={props.baseUrl}
{...skelProps}
atRoot
>
<ChannelSettings
groups={props.groups}
contacts={props.contacts}
associations={props.associations}
api={api}
association={association}
/>
{app === "chat" ? (
<ChatResource {...props} />
) : app === "publish" ? (
<PublishResource {...props} />
) : (
<LinkResource {...props} />
)}
</ResourceSkeleton>
);
}}
/>
<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>
)}
/>
</Switch>
</>
);
}

132
pkg/interface/src/views/landscape/index.tsx
View File

@ -1,5 +1,6 @@
import React, { Component, useEffect, useCallback } from 'react';
import { Route, Switch, RouteComponentProps } from 'react-router-dom';
import Helmet from 'react-helmet';
import './css/custom.css';
@ -67,8 +68,6 @@ export function DMRedirect(props: LandscapeProps & RouteComponentProps & { ship:
export default class Landscape extends Component<LandscapeProps, {}> {
componentDidMount() {
document.title = 'OS1 - Landscape';
this.props.subscription.startApp('groups');
this.props.subscription.startApp('graph');
}
@ -78,71 +77,76 @@ export default class Landscape extends Component<LandscapeProps, {}> {
const { api } = props;
return (
<Switch>
<Route path="/~landscape/ship/:host/:name"
render={routeProps => {
const {
host,
name
} = routeProps.match.params as Record<string, string>;
const groupPath = `/ship/${host}/${name}`;
const baseUrl = `/~landscape${groupPath}`;
const ws: Workspace = { type: 'group', group: groupPath };
<>
<Helmet defer={false}>
<title>{ props.notificationsCount ? `(${String(props.notificationsCount) }) `: '' }Landscape</title>
</Helmet>
<Switch>
<Route path="/~landscape/ship/:host/:name"
render={routeProps => {
const {
host,
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 (
<GroupsPane workspace={ws} baseUrl={baseUrl} {...props} />
)
}}/>
<Route path="/~landscape/home"
return (
<GroupsPane workspace={ws} baseUrl={baseUrl} {...props} />
)
}}/>
<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 => {
const ws: Workspace = { type: 'home' };
return (
<GroupsPane workspace={ws} baseUrl="/~landscape/home" {...props} />
);
const { ship } = routeProps.match.params;
return <DMRedirect {...routeProps} {...props} ship={ship} />
}}
/>
<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 => {
const { ship } = routeProps.match.params;
return <DMRedirect {...routeProps} {...props} ship={ship} />
}}
/>
<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>
/>
<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>
</>
);
}
}