uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 04:30:31 +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="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>

2
web/public/manifest.json
View File

@ -1,6 +1,6 @@
{
"short_name": "namae",
"name": "namae.dev",
"name": "namae",
"icons": [
{
"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 { 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;
}
`

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

@ -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} {

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

@ -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;

4
web/src/index.js
View File

@ -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
View File

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