Merge pull request #4197 from tylershuster/hark-title

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

View File

@ -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",

View File

@ -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>

View File

@ -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} />

View File

@ -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)',

View File

@ -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

View File

@ -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%'

View File

@ -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,11 +132,18 @@ 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 (
<>
<Helmet defer={false}>
<title>{props.notificationsCount ? `(${String(props.notificationsCount)}) ` : ''}{ title }</title>
</Helmet>
<Skeleton <Skeleton
recentGroups={recentGroups} recentGroups={recentGroups}
mobileHide mobileHide
@ -153,6 +161,7 @@ export function GroupsPane(props: GroupsPaneProps) {
/> />
{popovers(routeProps, resourceUrl)} {popovers(routeProps, resourceUrl)}
</Skeleton> </Skeleton>
</>
); );
}} }}
/> />
@ -184,7 +193,12 @@ 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 (
<>
<Helmet defer={false}>
<title>{props.notificationsCount ? `(${String(props.notificationsCount)}) ` : ''}{ title }</title>
</Helmet>
<Skeleton recentGroups={recentGroups} {...props} baseUrl={baseUrl}> <Skeleton recentGroups={recentGroups} {...props} baseUrl={baseUrl}>
<Col <Col
alignItems="center" alignItems="center"
@ -198,6 +212,7 @@ export function GroupsPane(props: GroupsPaneProps) {
</Col> </Col>
{popovers(routeProps, baseUrl)} {popovers(routeProps, baseUrl)}
</Skeleton> </Skeleton>
</>
); );
}} }}
/> />

View File

@ -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,7 +34,17 @@ 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 (
<>
<Helmet defer={false}>
<title>{props.notificationsCount ? `(${String(props.notificationsCount)}) ` : ''}{ title }</title>
</Helmet>
<Switch> <Switch>
<Route <Route
path={relativePath("/settings")} path={relativePath("/settings")}
@ -76,5 +86,6 @@ export function Resource(props: ResourceProps) {
)} )}
/> />
</Switch> </Switch>
</>
); );
} }

View File

@ -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,6 +77,10 @@ export default class Landscape extends Component<LandscapeProps, {}> {
const { api } = props; const { api } = props;
return ( return (
<>
<Helmet defer={false}>
<title>{ props.notificationsCount ? `(${String(props.notificationsCount) }) `: '' }Landscape</title>
</Helmet>
<Switch> <Switch>
<Route path="/~landscape/ship/:host/:name" <Route path="/~landscape/ship/:host/:name"
render={routeProps => { render={routeProps => {
@ -143,6 +146,7 @@ export default class Landscape extends Component<LandscapeProps, {}> {
}} }}
/> />
</Switch> </Switch>
</>
); );
} }
} }