Tweak www titles heads

This commit is contained in:
Steve Ruiz 2021-09-06 14:37:48 +01:00
parent 61fb767b5a
commit ac8b54abe5
8 changed files with 167 additions and 82 deletions

View file

@ -1,11 +1,19 @@
import dynamic from 'next/dynamic' import dynamic from 'next/dynamic'
import { GetServerSideProps } from 'next' import { GetServerSideProps } from 'next'
import { getSession } from 'next-auth/client' import { getSession } from 'next-auth/client'
import Head from 'next/head'
const Editor = dynamic(() => import('components/editor'), { ssr: false }) const Editor = dynamic(() => import('components/editor'), { ssr: false })
export default function Shhh(): JSX.Element { export default function Shhh(): JSX.Element {
return <Editor id="home" /> return (
<>
<Head>
<title>tldraw</title>
</Head>
<Editor id="home" />
</>
)
} }
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {

View file

@ -1,5 +1,6 @@
import * as React from 'react' import * as React from 'react'
import type { GetServerSideProps } from 'next' import type { GetServerSideProps } from 'next'
import Head from 'next/head'
import { getSession } from 'next-auth/client' import { getSession } from 'next-auth/client'
import dynamic from 'next/dynamic' import dynamic from 'next/dynamic'
const Editor = dynamic(() => import('components/editor'), { ssr: false }) const Editor = dynamic(() => import('components/editor'), { ssr: false })
@ -9,7 +10,14 @@ interface RoomProps {
} }
export default function Room({ id }: RoomProps): JSX.Element { export default function Room({ id }: RoomProps): JSX.Element {
return <Editor id={id} /> return (
<>
<Head>
<title>tldraw</title>
</Head>
<Editor id={id} />
</>
)
} }
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {

View file

@ -1,12 +1,20 @@
import * as React from 'react' import * as React from 'react'
import type { GetServerSideProps } from 'next' import type { GetServerSideProps } from 'next'
import Head from 'next/head'
interface RoomProps { interface RoomProps {
id?: string id?: string
} }
export default function RandomRoomPage({ id }: RoomProps): JSX.Element { export default function RandomRoomPage({ id }: RoomProps): JSX.Element {
return <div>Should have routed to room: {id}</div> return (
<>
<Head>
<title>tldraw</title>
</Head>
<div>Should have routed to room: {id}</div>
</>
)
} }
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {

View file

@ -1,6 +1,14 @@
import dynamic from 'next/dynamic' import dynamic from 'next/dynamic'
const Editor = dynamic(() => import('components/editor'), { ssr: false }) const Editor = dynamic(() => import('components/editor'), { ssr: false })
import Head from 'next/head'
export default function Shhh(): JSX.Element { export default function Shhh(): JSX.Element {
return <Editor id="home" /> return (
<>
<Head>
<title>tldraw</title>
</Head>
<Editor id="home" />
</>
)
} }

View file

@ -3,80 +3,86 @@ import { getSession, signin, signout, useSession } from 'next-auth/client'
import { GetServerSideProps } from 'next' import { GetServerSideProps } from 'next'
import Link from 'next/link' import Link from 'next/link'
import React from 'react' import React from 'react'
import Head from 'next/head'
export default function Sponsorware(): JSX.Element { export default function Sponsorware(): JSX.Element {
const [session, loading] = useSession() const [session, loading] = useSession()
return ( return (
<OuterContent> <>
<Content <Head>
size={{ <title>tldraw</title>
'@sm': 'small', </Head>
}} <OuterContent>
> <Content
<h1>tldraw (is sponsorware)</h1> size={{
<p> '@sm': 'small',
Hey, thanks for visiting <Link href="/">tldraw</Link>, a tiny little drawing app by{' '} }}
<a >
target="_blank" <h1>tldraw (is sponsorware)</h1>
rel="noreferrer nofollow noopener" <p>
href="https://twitter.com/steveruizok" Hey, thanks for visiting <Link href="/">tldraw</Link>, a tiny little drawing app by{' '}
> <a
steveruizok target="_blank"
</a>{' '} rel="noreferrer nofollow noopener"
and friends . href="https://twitter.com/steveruizok"
</p> >
<video autoPlay muted playsInline onClick={(e) => e.currentTarget.play()}> steveruizok
<source src="images/hello.mp4" type="video/mp4" /> </a>{' '}
</video> and friends .
<p>This project is currently: </p> </p>
<ul> <video autoPlay muted playsInline onClick={(e) => e.currentTarget.play()}>
<li>in development</li> <source src="images/hello.mp4" type="video/mp4" />
<li>only available for my sponsors</li> </video>
</ul> <p>This project is currently: </p>
<p> <ul>
If you&apos;d like to try it out,{' '} <li>in development</li>
<a <li>only available for my sponsors</li>
href="https://github.com/sponsors/steveruizok" </ul>
target="_blank" <p>
rel="noopener noreferrer" If you&apos;d like to try it out,{' '}
> <a
sponsor me on Github href="https://github.com/sponsors/steveruizok"
</a>{' '} target="_blank"
(at any level) and sign in below. rel="noopener noreferrer"
</p> >
<ButtonGroup> sponsor me on Github
{session ? ( </a>{' '}
<> (at any level) and sign in below.
<Button onClick={() => signout()} variant={'secondary'}> </p>
Sign Out <ButtonGroup>
</Button> {session ? (
<Detail> <>
Signed in as {session?.user?.name} ({session?.user?.email}), but it looks like <Button onClick={() => signout()} variant={'secondary'}>
you&apos;re not yet a sponsor. Sign Out
<br /> </Button>
Something wrong? Try <Link href="/">reloading the page</Link> or DM me on{' '} <Detail>
<a Signed in as {session?.user?.name} ({session?.user?.email}), but it looks like
target="_blank" you&apos;re not yet a sponsor.
rel="noreferrer nofollow noopener" <br />
href="https://twitter.com/steveruizok" Something wrong? Try <Link href="/">reloading the page</Link> or DM me on{' '}
> <a
Twitter target="_blank"
</a> rel="noreferrer nofollow noopener"
. href="https://twitter.com/steveruizok"
</Detail> >
</> Twitter
) : ( </a>
<> .
<Button onClick={() => signin('github')} variant={'primary'}> </Detail>
{loading ? 'Loading...' : 'Sign in With Github'} </>
</Button> ) : (
<Detail>Already a sponsor? Just sign in to visit the app.</Detail> <>
</> <Button onClick={() => signin('github')} variant={'primary'}>
)} {loading ? 'Loading...' : 'Sign in With Github'}
</ButtonGroup> </Button>
</Content> <Detail>Already a sponsor? Just sign in to visit the app.</Detail>
</OuterContent> </>
)}
</ButtonGroup>
</Content>
</OuterContent>
</>
) )
} }

View file

@ -1,13 +1,21 @@
import * as React from 'react' import * as React from 'react'
import type { GetServerSideProps } from 'next' import type { GetServerSideProps } from 'next'
import { getSession } from 'next-auth/client' import { getSession } from 'next-auth/client'
import Head from 'next/head'
interface RoomProps { interface RoomProps {
id?: string id?: string
} }
export default function OtherUserPage({ id }: RoomProps): JSX.Element { export default function OtherUserPage({ id }: RoomProps): JSX.Element {
return <div>Todo, other user: {id}</div> return (
<>
<Head>
<title>tldraw</title>
</Head>
<div>Todo, other user: {id}</div>
</>
)
} }
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {

View file

@ -3,6 +3,7 @@ import type { GetServerSideProps } from 'next'
import { getSession } from 'next-auth/client' import { getSession } from 'next-auth/client'
import type { Session } from 'next-auth' import type { Session } from 'next-auth'
import { signOut } from 'next-auth/client' import { signOut } from 'next-auth/client'
import Head from 'next/head'
interface UserPageProps { interface UserPageProps {
session: Session session: Session
@ -10,12 +11,17 @@ interface UserPageProps {
export default function UserPage({ session }: UserPageProps): JSX.Element { export default function UserPage({ session }: UserPageProps): JSX.Element {
return ( return (
<div> <>
<pre> <Head>
<code>{JSON.stringify(session.user, null, 2)}</code> <title>tldraw</title>
</pre> </Head>
<button onClick={() => signOut}>Sign Out</button> <div>
</div> <pre>
<code>{JSON.stringify(session.user, null, 2)}</code>
</pre>
<button onClick={() => signOut}>Sign Out</button>
</div>
</>
) )
} }

View file

@ -1,9 +1,42 @@
@font-face {
font-family: 'Recursive';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Recursive';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Recursive Mono';
font-style: normal;
font-weight: 420;
font-display: swap;
src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImqvTxvU-MXGX2fSqasNfUlTGZnI14ZeY.woff2)
format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, html,
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
} }
a { a {