mirror of
https://github.com/uetchy/namae.git
synced 2025-03-18 04:50:32 +09:00
feat: PWA
This commit is contained in:
parent
226d909fdb
commit
d856caadde
@ -10,12 +10,8 @@
|
||||
/>
|
||||
<meta name="keywords" content="name" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta
|
||||
name="apple-mobile-web-app-status-bar-style"
|
||||
content="black-translucent"
|
||||
/>
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||||
<meta name="apple-mobile-web-app-title" content="namae" />
|
||||
<meta name="msapplication-TileColor" content="#5180fc" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
@ -42,6 +38,7 @@
|
||||
href="%PUBLIC_URL%/safari-pinned-tab.svg"
|
||||
color="#5180fc"
|
||||
/>
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<title>namae — name new project</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"short_name": "namae",
|
||||
"name": "namae.dev",
|
||||
"name": "namae",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
|
||||
@ -3,11 +3,10 @@ import styled, { createGlobalStyle } from 'styled-components'
|
||||
|
||||
import { useDeferredState } from './hooks/state'
|
||||
import { mobile } from './util/css'
|
||||
|
||||
import { isStandalone } from './util/pwa'
|
||||
import Welcome from './components/Welcome'
|
||||
import Footer from './components/Footer'
|
||||
import { Cards, CardContainer } from './components/Cards'
|
||||
|
||||
import GithubCard from './components/cards/GithubCard'
|
||||
import DomainCard from './components/cards/DomainCard'
|
||||
import HomebrewCard from './components/cards/HomebrewCard'
|
||||
@ -32,14 +31,13 @@ export default function App() {
|
||||
return (
|
||||
<>
|
||||
<GlobalStyle />
|
||||
<Header>
|
||||
<InputContainer>
|
||||
<Logo>namæ</Logo>
|
||||
<Input onChange={onChange} />
|
||||
</InputContainer>
|
||||
</Header>
|
||||
<Content>
|
||||
<Header>
|
||||
<InputContainer>
|
||||
<Logo>namæ</Logo>
|
||||
<Input onChange={onChange} />
|
||||
</InputContainer>
|
||||
</Header>
|
||||
|
||||
{queryGiven ? (
|
||||
<Cards>
|
||||
<CardContainer>
|
||||
@ -56,10 +54,10 @@ export default function App() {
|
||||
</CardContainer>
|
||||
<EventReporter query={query} />
|
||||
</Cards>
|
||||
) : (
|
||||
) : !isStandalone() ? (
|
||||
<Welcome />
|
||||
)}
|
||||
<Footer />
|
||||
) : null}
|
||||
{!isStandalone() ? <Footer /> : null}
|
||||
</Content>
|
||||
</>
|
||||
)
|
||||
@ -77,29 +75,31 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
background: #ffffff;
|
||||
|
||||
${mobile} {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: #ffffff;
|
||||
${mobile} {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const Content = styled.div``
|
||||
const Content = styled.div`
|
||||
padding-top: 80px;
|
||||
|
||||
${mobile} {
|
||||
padding-top: 60px;
|
||||
}
|
||||
`
|
||||
|
||||
const Header = styled.header`
|
||||
margin-bottom: 100px;
|
||||
padding: 0 40px;
|
||||
background-image: linear-gradient(180deg, #a2d4ff 0%, #ac57ff 99%);
|
||||
|
||||
${mobile} {
|
||||
margin-bottom: 60px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
`
|
||||
|
||||
@ -32,9 +32,7 @@ export function Card({ title, nameList, alternativeList = [], children }) {
|
||||
)
|
||||
}
|
||||
|
||||
export const Cards = styled.div`
|
||||
margin-top: 40px;
|
||||
`
|
||||
export const Cards = styled.div``
|
||||
|
||||
export const CardContainer = styled.div`
|
||||
display: flex;
|
||||
@ -58,7 +56,7 @@ const CardWrapper = styled.div`
|
||||
|
||||
const CardTitle = styled.div`
|
||||
margin-bottom: 15px;
|
||||
font-size: 0.8rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
|
||||
${mobile} {
|
||||
|
||||
@ -87,13 +87,7 @@ const Text = styled.p`
|
||||
color: #3c3c3c;
|
||||
`
|
||||
|
||||
const Hero = styled.div`
|
||||
padding-top: 40px;
|
||||
|
||||
${mobile} {
|
||||
padding-top: 20px;
|
||||
}
|
||||
`
|
||||
const Hero = styled.div``
|
||||
|
||||
const List = styled.div`
|
||||
margin-top: 50px;
|
||||
|
||||
@ -2,11 +2,11 @@ import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import ReactGA from 'react-ga'
|
||||
import App from './App'
|
||||
// import * as serviceWorker from './serviceWorker'
|
||||
import * as serviceWorker from './serviceWorker'
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'))
|
||||
|
||||
ReactGA.initialize('UA-28919359-15')
|
||||
ReactGA.pageview(window.location.pathname + window.location.search)
|
||||
|
||||
// serviceWorker.unregister()
|
||||
serviceWorker.register()
|
||||
|
||||
3
web/src/util/pwa.js
Normal file
3
web/src/util/pwa.js
Normal file
@ -0,0 +1,3 @@
|
||||
export function isStandalone() {
|
||||
return 'standalone' in window.navigator && window.navigator.standalone
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user