uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 12:30:32 +09:00
Code Issues Releases Activity

feat: PWA

Browse Source
This commit is contained in:
uetchy 2019-08-02 04:23:21 +09:00
parent 226d909fdb
commit d856caadde
7 changed files with 32 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/public/index.html
View File

@ -10,12 +10,8 @@
/> />
<meta name="keywords" content="name" /> <meta name="keywords" content="name" />
<meta name="robots" content="index, follow" /> <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-capable" content="yes" />
<meta <meta name="apple-mobile-web-app-status-bar-style" content="default" />
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="apple-mobile-web-app-title" content="namae" /> <meta name="apple-mobile-web-app-title" content="namae" />
<meta name="msapplication-TileColor" content="#5180fc" /> <meta name="msapplication-TileColor" content="#5180fc" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
@ -42,6 +38,7 @@
href="%PUBLIC_URL%/safari-pinned-tab.svg" href="%PUBLIC_URL%/safari-pinned-tab.svg"
color="#5180fc" color="#5180fc"
/> />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>namae — name new project</title> <title>namae — name new project</title>
</head> </head>
<body> <body>

2
web/public/manifest.json
View File

@ -1,6 +1,6 @@
{ {
"short_name": "namae", "short_name": "namae",
"name": "namae.dev", "name": "namae",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",

42
web/src/App.js
View File

@ -3,11 +3,10 @@ import styled, { createGlobalStyle } from 'styled-components'
import { useDeferredState } from './hooks/state' import { useDeferredState } from './hooks/state'
import { mobile } from './util/css' import { mobile } from './util/css'
import { isStandalone } from './util/pwa'
import Welcome from './components/Welcome' import Welcome from './components/Welcome'
import Footer from './components/Footer' import Footer from './components/Footer'
import { Cards, CardContainer } from './components/Cards' import { Cards, CardContainer } from './components/Cards'
import GithubCard from './components/cards/GithubCard' import GithubCard from './components/cards/GithubCard'
import DomainCard from './components/cards/DomainCard' import DomainCard from './components/cards/DomainCard'
import HomebrewCard from './components/cards/HomebrewCard' import HomebrewCard from './components/cards/HomebrewCard'
@ -32,14 +31,13 @@ export default function App() {
return ( return (
<> <>
<GlobalStyle /> <GlobalStyle />
<Header>
<InputContainer>
<Logo>namæ</Logo>
<Input onChange={onChange} />
</InputContainer>
</Header>
<Content> <Content>
<Header>
<InputContainer>
<Logo>namæ</Logo>
<Input onChange={onChange} />
</InputContainer>
</Header>
{queryGiven ? ( {queryGiven ? (
<Cards> <Cards>
<CardContainer> <CardContainer>
@ -56,10 +54,10 @@ export default function App() {
</CardContainer> </CardContainer>
<EventReporter query={query} /> <EventReporter query={query} />
</Cards> </Cards>
) : ( ) : !isStandalone() ? (
<Welcome /> <Welcome />
)} ) : null}
<Footer /> {!isStandalone() ? <Footer /> : null}
</Content> </Content>
</> </>
) )
@ -77,29 +75,31 @@ html {
} }
body { body {
background: #ffffff;
${mobile} {
background: #f5f5f5;
}
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -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` const Header = styled.header`
margin-bottom: 100px;
padding: 0 40px; padding: 0 40px;
background-image: linear-gradient(180deg, #a2d4ff 0%, #ac57ff 99%); background-image: linear-gradient(180deg, #a2d4ff 0%, #ac57ff 99%);
${mobile} { ${mobile} {
margin-bottom: 60px;
padding: 0 20px; padding: 0 20px;
} }
` `

6
web/src/components/Cards.js
View File

@ -32,9 +32,7 @@ export function Card({ title, nameList, alternativeList = [], children }) {
) )
} }
export const Cards = styled.div` export const Cards = styled.div``
margin-top: 40px;
`
export const CardContainer = styled.div` export const CardContainer = styled.div`
display: flex; display: flex;
@ -58,7 +56,7 @@ const CardWrapper = styled.div`
const CardTitle = styled.div` const CardTitle = styled.div`
margin-bottom: 15px; margin-bottom: 15px;
font-size: 0.8rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
${mobile} { ${mobile} {

8
web/src/components/Welcome.js
View File

@ -87,13 +87,7 @@ const Text = styled.p`
color: #3c3c3c; color: #3c3c3c;
` `
const Hero = styled.div` const Hero = styled.div``
padding-top: 40px;
${mobile} {
padding-top: 20px;
}
`
const List = styled.div` const List = styled.div`
margin-top: 50px; margin-top: 50px;

4
web/src/index.js
View File

@ -2,11 +2,11 @@ import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import ReactGA from 'react-ga' import ReactGA from 'react-ga'
import App from './App' import App from './App'
// import * as serviceWorker from './serviceWorker' import * as serviceWorker from './serviceWorker'
ReactDOM.render(<App />, document.getElementById('root')) ReactDOM.render(<App />, document.getElementById('root'))
ReactGA.initialize('UA-28919359-15') ReactGA.initialize('UA-28919359-15')
ReactGA.pageview(window.location.pathname + window.location.search) ReactGA.pageview(window.location.pathname + window.location.search)
// serviceWorker.unregister() serviceWorker.register()

3
web/src/util/pwa.js Normal file
View File

@ -0,0 +1,3 @@
export function isStandalone() {
return 'standalone' in window.navigator && window.navigator.standalone
}