CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

client: favicon and touch icons, use logo on homepage

Browse source
This commit is contained in:
Max Leiter 2022-03-09 17:47:54 -08:00
parent 68309c0bd4
commit 55a2b19f9a
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
28 changed files with 137 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/auth/index.tsx
View file

@ -20,7 +20,7 @@ const Auth = ({ page }: { page: "signup" | "signin" }) => {
} else {
localStorage.setItem('drift-token', json.token)
localStorage.setItem('drift-userid', json.userId)
router.push('/new')
router.push('/')
}
}

1
client/components/document/index.tsx
View file

@ -32,7 +32,6 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
if (!title) return
const pathParts = title.split(".")
const language = pathParts.length > 1 ? pathParts[pathParts.length - 1] : ""
console.log(language)
return language
}, [title])

43
client/pages/_app.tsx
View file

@ -1,10 +1,12 @@
import '../styles/globals.css'
import { GeistProvider, CssBaseline } from '@geist-ui/core'
import { useEffect, useState } from 'react'
import { GeistProvider, CssBaseline, useTheme } from '@geist-ui/core'
import { useEffect, useMemo, useState } from 'react'
import type { AppProps as NextAppProps } from "next/app";
import useSharedState from '../lib/hooks/use-shared-state';
import 'react-loading-skeleton/dist/skeleton.css'
import { SkeletonTheme } from 'react-loading-skeleton';
import Head from 'next/head';
export type ThemeProps = {
theme: "light" | "dark" | string,
@ -19,7 +21,7 @@ export type DriftProps = ThemeProps
function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
const [themeType, setThemeType] = useSharedState<string>('theme', 'light')
const theme = useTheme();
useEffect(() => {
if (typeof window === 'undefined' || !window.localStorage) return
const storedTheme = window.localStorage.getItem('drift-theme')
@ -33,11 +35,38 @@ function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
setThemeType(last => (last === 'dark' ? 'light' : 'dark'))
}
const skeletonBaseColor = useMemo(() => {
if (themeType === 'dark') return '#333'
return '#eee'
}, [themeType])
const skeletonHighlightColor = useMemo(() => {
if (themeType === 'dark') return '#555'
return '#ddd'
}, [themeType])
return (
<GeistProvider themeType={themeType} >
<CssBaseline />
<Component {...pageProps} theme={themeType || 'light'} changeTheme={changeTheme} />
</GeistProvider>
<>
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="apple-mobile-web-app-title" content="Drift" />
<meta name="application-name" content="Drift" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
</Head>
<GeistProvider themeType={themeType} >
<SkeletonTheme baseColor={skeletonBaseColor} highlightColor={skeletonHighlightColor}>
<CssBaseline />
<Component {...pageProps} theme={themeType || 'light'} changeTheme={changeTheme} />
</SkeletonTheme>
</GeistProvider>
</>
)
}

13
client/pages/index.tsx
View file

@ -1,14 +1,15 @@
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Page, Spacer } from '@geist-ui/core'
import { Page, Spacer, Text } from '@geist-ui/core'
import Header from '../components/header'
import { ThemeProps } from './_app'
import Document from '../components/document'
import Image from 'next/image'
import ShiftBy from '../components/shift-by'
export function getStaticProps() {
const introDoc = `# Welcome to Drift
### Drift is a self-hostable clone of GitHub Gist.
const introDoc = `### Drift is a self-hostable clone of GitHub Gist.
#### It is a simple way to share code and text snippets with your friends, with support for the following:
- Render GitHub Extended Markdown (including images)
@ -58,12 +59,16 @@ const Home = ({ theme, changeTheme, introContent, todoContent }: Props) => {
<Head>
<title>Drift</title>
<meta name="description" content="A self-hostable clone of GitHub Gist" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Page.Header>
<Header theme={theme} changeTheme={changeTheme} />
</Page.Header>
<Page.Content width={"var(--main-content-width)"} margin="auto" paddingTop={"var(--gap)"}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
<ShiftBy y={-2}><Image src={'/assets/logo-optimized.svg'} width={'48px'} height={'48px'} alt="" /></ShiftBy>
<Spacer />
<Text style={{ display: 'inline' }} h1> Welcome to Drift</Text>
</div>
<Document
editable={false}
content={introContent}

1
client/pages/mine.tsx
View file

@ -11,7 +11,6 @@ const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: ()
<Head>
<title>Drift</title>
<meta name="description" content="A self-hostable clone of GitHub Gist" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Page.Header>
<Header theme={theme} changeTheme={changeTheme} />

2
client/pages/new.tsx
View file

@ -17,8 +17,6 @@ const Home = ({ theme, changeTheme }: ThemeProps) => {
<Page className={styles.container} width="100%">
<Head>
<title>Drift</title>
<meta name="description" content="A self-hostable clone of GitHub Gist" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Page.Header>

5
client/pages/signin.tsx
View file

@ -1,10 +1,15 @@
import { Page } from "@geist-ui/core";
import Head from 'next/head'
import Auth from "../components/auth";
import Header from "../components/header";
import { ThemeProps } from "./_app";
const SignIn = ({ theme, changeTheme }: ThemeProps) => (
<Page width={"100%"}>
<Head>
<title>Drift - Sign In</title>
<meta name="description" content="A self-hostable clone of GitHub Gist" />
</Head>
<Page.Header>
<Header theme={theme} changeTheme={changeTheme} />
</Page.Header>

7
client/pages/signup.tsx
View file

@ -1,10 +1,15 @@
import { Page } from "@geist-ui/core";
import Head from "next/head";
import Auth from "../components/auth";
import Header from "../components/header";
import { ThemeProps } from "./_app";
const SignUp = ({ theme, changeTheme }: ThemeProps) => (
<Page width="100%">
<Head>
<title>Drift - Sign Up</title>
<meta name="description" content="A self-hostable clone of GitHub Gist" />
</Head>
<Page.Header>
<Header theme={theme} changeTheme={changeTheme} />
</Page.Header>
@ -14,4 +19,4 @@ const SignUp = ({ theme, changeTheme }: ThemeProps) => (
</Page>
)
export default SignUp
export default SignUp

BIN
client/public/android-chrome-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
client/public/android-chrome-512x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
client/public/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

14
assets/logo-optimized.svg → client/public/assets/logo-optimized.svg
View file

@ -2,18 +2,18 @@
<svg width="72" height="72" version="1.1" viewBox="0 0 19.05 19.05" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clipPath7860">
<circle cx="115.27" cy="135.33" r="9.1406"/>
<circle cx="115.27" cy="135.33" r="9.1406" />
</clipPath>
<clipPath id="clipPath7864">
<circle cx="115.27" cy="135.33" r="9.1406"/>
<circle cx="115.27" cy="135.33" r="9.1406" />
</clipPath>
</defs>
<g transform="translate(-106.13 -126.19)">
<rect transform="matrix(1.0421 0 0 1.0421 -4.4639 -5.3074)" x="106.13" y="126.19" width="18.281" height="18.281" clip-path="url(#clipPath7864)" fill="#1b1b1b"/>
<rect transform="matrix(1.0421 0 0 1.0421 -4.4639 -5.3074)" x="106.13" y="126.19" width="18.281" height="18.281" clip-path="url(#clipPath7864)" fill="#1b1b1b" />
<g transform="matrix(1.0421 0 0 1.0421 -4.4639 -5.3074)" clip-path="url(#clipPath7860)" stroke-width=".95964">
<path d="m132.15 142c-10.707-9.0354-17.374-8.908-17.374-8.908s2.3881 3.4829 0.94799 7.4545c-1.4401 3.9716-7.6664 7.7467-7.6664 7.7467z" fill="#fff"/>
<path d="m108.89 148.35s6.2294-3.8135 7.6695-7.7851c1.4401-3.9716-1.7851-7.4745-1.7851-7.4745s1.2204 3.091-1.0184 6.7752c-2.239 3.6841-8.9226 4.9787-8.9226 4.9787z" fill="#e7e7e7"/>
<path d="m105.93 146.03s6.6058-2.1876 8.8448-5.8717c2.2387-3.6841-5e-3 -7.0674-5e-3 -7.0674s-1.3628 3.2487-4.9368 5.2561-10.125 2.2728-10.125 2.2728z" fill="#c6c6c6"/>
<path d="m132.15 142c-10.707-9.0354-17.374-8.908-17.374-8.908s2.3881 3.4829 0.94799 7.4545c-1.4401 3.9716-7.6664 7.7467-7.6664 7.7467z" fill="#fff" />
<path d="m108.89 148.35s6.2294-3.8135 7.6695-7.7851c1.4401-3.9716-1.7851-7.4745-1.7851-7.4745s1.2204 3.091-1.0184 6.7752c-2.239 3.6841-8.9226 4.9787-8.9226 4.9787z" fill="#e7e7e7" />
<path d="m105.93 146.03s6.6058-2.1876 8.8448-5.8717c2.2387-3.6841-5e-3 -7.0674-5e-3 -7.0674s-1.3628 3.2487-4.9368 5.2561-10.125 2.2728-10.125 2.2728z" fill="#c6c6c6" />
</g>
</g>
</svg>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

0
assets/logo.png → client/public/assets/logo.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

0
assets/logo.svg → client/public/assets/logo.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

9
client/public/browserconfig.xml Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
client/public/favicon-16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 653 B

BIN
client/public/favicon-32x32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
client/public/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
client/public/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 930 B

19
client/public/favicon.svg Normal file
View file

@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="72" height="72"><svg width="72" height="72" version="1.1" viewBox="0 0 19.05 19.05" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="SvgjsClipPath1001">
<circle cx="115.27" cy="135.33" r="9.1406"></circle>
</clipPath>
<clipPath id="SvgjsClipPath1000">
<circle cx="115.27" cy="135.33" r="9.1406"></circle>
</clipPath>
</defs>
<g transform="translate(-106.13 -126.19)">
<rect transform="matrix(1.0421 0 0 1.0421 -4.4639 -5.3074)" x="106.13" y="126.19" width="18.281" height="18.281" clip-path="url(#clipPath7864)" fill="#1b1b1b"></rect>
<g transform="matrix(1.0421 0 0 1.0421 -4.4639 -5.3074)" clip-path="url(#clipPath7860)" stroke-width=".95964">
<path d="m132.15 142c-10.707-9.0354-17.374-8.908-17.374-8.908s2.3881 3.4829 0.94799 7.4545c-1.4401 3.9716-7.6664 7.7467-7.6664 7.7467z" fill="#fff"></path>
<path d="m108.89 148.35s6.2294-3.8135 7.6695-7.7851c1.4401-3.9716-1.7851-7.4745-1.7851-7.4745s1.2204 3.091-1.0184 6.7752c-2.239 3.6841-8.9226 4.9787-8.9226 4.9787z" fill="#e7e7e7"></path>
<path d="m105.93 146.03s6.6058-2.1876 8.8448-5.8717c2.2387-3.6841-5e-3 -7.0674-5e-3 -7.0674s-1.3628 3.2487-4.9368 5.2561-10.125 2.2728-10.125 2.2728z" fill="#c6c6c6"></path>
</g>
</g>
</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
</style></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
client/public/mstile-144x144.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
client/public/mstile-150x150.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
client/public/mstile-310x150.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
client/public/mstile-310x310.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
client/public/mstile-70x70.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.5 KiB

26
client/public/safari-pinned-tab.svg Normal file
View file

@ -0,0 +1,26 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M3327 6994 c-1 -1 -47 -4 -103 -8 -55 -4 -110 -8 -122 -11 -11 -2
-45 -6 -74 -9 -29 -4 -65 -8 -80 -11 -16 -3 -39 -7 -53 -9 -337 -59 -654 -165
-970 -326 -365 -185 -635 -383 -918 -670 -436 -443 -735 -969 -893 -1570 -14
-52 -27 -106 -30 -120 -2 -14 -7 -36 -10 -50 -10 -41 -12 -53 -29 -166 -24
-164 -24 -162 -32 -264 -9 -119 -9 -456 0 -574 7 -80 20 -189 32 -257 3 -14 7
-41 9 -60 3 -19 14 -77 26 -129 63 -285 145 -523 272 -790 269 -564 718 -1071
1248 -1412 411 -264 845 -433 1323 -513 200 -33 355 -45 584 -45 177 0 267 6
453 26 93 10 308 53 450 90 728 191 1398 640 1872 1254 78 101 216 311 282
430 182 325 342 781 391 1112 21 148 23 167 32 263 10 115 10 547 0 645 -39
380 -126 724 -270 1065 -45 107 -180 361 -253 476 -196 310 -443 594 -709 814
-33 28 -62 53 -65 56 -12 14 -202 150 -280 201 -248 161 -564 313 -805 388
-22 7 -51 17 -64 22 -36 13 -320 85 -366 92 -36 6 -70 12 -129 22 -44 8 -176
24 -251 30 -71 6 -462 13 -468 8z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

19
client/public/site.webmanifest Normal file
View file

@ -0,0 +1,19 @@
{
"name": "Drift",
"short_name": "Drift",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

4
client/public/vercel.svg
View file

@ -1,4 +0,0 @@
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB