client: favicon and touch icons, use logo on homepage

4 years ago · 55a2b19f9a
parent 68309c0bd4
commit 55a2b19f9a
28 changed files with 137 additions and 28 deletions
--- a/client/components/auth/index.tsx
+++ b/client/components/auth/index.tsx
@ -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('/')
            }
        }

--- a/client/components/document/index.tsx
+++ b/client/components/document/index.tsx
@ -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])

--- a/client/pages/_app.tsx
+++ b/client/pages/_app.tsx
@ -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 (
+    <>
+      <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>
+    </>
  )
 }

--- a/client/pages/index.tsx
+++ b/client/pages/index.tsx
@ -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}
--- a/client/pages/mine.tsx
+++ b/client/pages/mine.tsx
@ -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} />
--- a/client/pages/new.tsx
+++ b/client/pages/new.tsx
@ -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>
--- a/client/pages/signin.tsx
+++ b/client/pages/signin.tsx
@ -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>
--- a/client/pages/signup.tsx
+++ b/client/pages/signup.tsx
@ -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>
--- a/client/public/android-chrome-192x192.png
+++ b/client/public/android-chrome-192x192.png
--- a/client/public/android-chrome-512x512.png
+++ b/client/public/android-chrome-512x512.png
--- a/client/public/apple-touch-icon.png
+++ b/client/public/apple-touch-icon.png
--- a/client/public/assets/logo-optimized.svg
+++ b/client/public/assets/logo-optimized.svg
--- a/client/public/assets/logo.png
+++ b/client/public/assets/logo.png
--- a/client/public/assets/logo.svg
+++ b/client/public/assets/logo.svg
--- a/client/public/browserconfig.xml
+++ b/client/public/browserconfig.xml
@ -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>
--- a/client/public/favicon-16x16.png
+++ b/client/public/favicon-16x16.png
--- a/client/public/favicon-32x32.png
+++ b/client/public/favicon-32x32.png
--- a/client/public/favicon.ico
+++ b/client/public/favicon.ico
--- a/client/public/favicon.png
+++ b/client/public/favicon.png
--- a/client/public/favicon.svg
+++ b/client/public/favicon.svg
@ -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>
--- a/client/public/mstile-144x144.png
+++ b/client/public/mstile-144x144.png
--- a/client/public/mstile-150x150.png
+++ b/client/public/mstile-150x150.png
--- a/client/public/mstile-310x150.png
+++ b/client/public/mstile-310x150.png
--- a/client/public/mstile-310x310.png
+++ b/client/public/mstile-310x310.png
--- a/client/public/mstile-70x70.png
+++ b/client/public/mstile-70x70.png
--- a/client/public/safari-pinned-tab.svg
+++ b/client/public/safari-pinned-tab.svg
@ -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>
--- a/client/public/site.webmanifest
+++ b/client/public/site.webmanifest
@ -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"
+}
--- a/client/public/vercel.svg
+++ b/client/public/vercel.svg
@ -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>