Skip to content

Commit

Permalink
Merge pull request #2 from hrdtbs/v2
Browse files Browse the repository at this point in the history
v2
  • Loading branch information
hrdtbs authored Feb 29, 2020
2 parents 7904db8 + 67e3a2c commit bec9194
Show file tree
Hide file tree
Showing 67 changed files with 1,372 additions and 536 deletions.
60 changes: 56 additions & 4 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,56 @@
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
target: "serverless"
})
const withCSS = require("@zeit/next-css")
const withOffline = require("next-offline")
const compose = require("next-compose")

module.exports = compose([
[
withCSS,
{
target: "serverless"
}
],
[
withOffline,
{
target: "serverless",
transformManifest: manifest => ["/"].concat(manifest), // add the homepage to the cache
// Trying to set NODE_ENV=production when running yarn dev causes a build-time error so we
// turn on the SW in dev mode so that we can actually test it
generateInDevMode: true,
workboxOpts: {
swDest: process.env.NEXT_EXPORT ? "service-worker.js" : "static/service-worker.js",
runtimeCaching: [
{
urlPattern: /^https?.*/,
handler: "NetworkFirst",
options: {
cacheName: "https-calls",
networkTimeoutSeconds: 15,
expiration: {
maxEntries: 150,
maxAgeSeconds: 30 * 24 * 60 * 60 // 1 month
},
cacheableResponse: {
statuses: [0, 200]
}
}
},
{
urlPattern: /.(?:png|webp|svg|mp4)$/,
handler: "CacheFirst"
}
]
},
experimental: {
async rewrites() {
return [
{
source: "/service-worker.js",
destination: "/_next/static/service-worker.js"
}
]
}
}
}
]
])
15 changes: 12 additions & 3 deletions now.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
{
"name": "noavoice",
"version": 2,
"builds": [{ "src": "package.json", "use": "@now/next" }],
"routes": [
{
"src": "/sw.js",
"dest": "/static/sw.js"
"src": "^/service-worker.js$",
"dest": "/_next/static/service-worker.js",
"headers": {
"cache-control": "public, max-age=43200, immutable",
"Service-Worker-Allowed": "/"
}
}
],
"builds": [
{
"src": "next.config.js",
"use": "@now/next"
}
]
}
Expand Down
9 changes: 6 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,20 @@
"author": "hrdtbs <[email protected]>",
"license": "MIT",
"devDependencies": {
"next": "^9.2.1",
"next": "canary",
"next-compose": "^0.0.2",
"next-offline": "4.0.6",
"node": "^13.7.0",
"now": "^16.7.3",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
"dependencies": {
"@zeit/next-css": "^1.0.1",
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
"@typescript-eslint/eslint-plugin": "^2.19.0",
"@typescript-eslint/parser": "^2.19.0",
"@zeit/next-css": "^1.0.1",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-prettier": "^3.1.2",
Expand All @@ -40,8 +42,9 @@
"typescript": "3.7.5"
},
"scripts": {
"dev": "node server.js",
"dev": "next",
"now-build": "./node_modules/.bin/next build",
"start": "next start",
"lint:ts": "eslint --cache",
"lint:js": "eslint ./pages/**/*.js --cache --ignore-pattern .eslintrc.js",
"lint:json": "prettier '*.json'",
Expand Down
56 changes: 56 additions & 0 deletions pages/_document.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import Document, { Head, Html, Main, NextScript } from "next/document"

class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}

render() {
return (
<Html>
<Head>
<title>noavoice - presented by 望月のあ</title>
<meta
name="description"
content="望月のあの声がいつでも聞けるサービス。疲れが取れない、辛いことがあった、そんなあなたに癒しを。"
></meta>
<link rel="shortcut icon" href="/static/images/icons/favicon.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@_noach" />
<meta name="twitter:title" content="のあぼいす" />
<meta name="twitter:image" content="https://noavoice.now.sh/static/twitter-ogp.png" />
<meta name="twitter:description" content="望月のあの声がいつでも聞けるサービス" />
{/*
<link rel="preconnect" href="https://fonts.gstatic.com/" crossOrigin></link>
<link
href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap&subset=japanese"
rel="stylesheet"
></link>
<link rel="preconnect" href="https://www.google-analytics.com" crossOrigin="true" />
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90236823-7"></script>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-90236823-7');
`
}}
></script>
*/}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}

export default MyDocument
170 changes: 65 additions & 105 deletions pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import "./keyframes.css"
import "./style.css"
import { useCallback, useState } from "react"
import { voices } from "../constants/voices"
import Head from "next/head"
import SWRegister from "../sw-register"

const sx = {
title: {
Expand Down Expand Up @@ -94,111 +92,73 @@ const Voice = ({ name }) => {

function IndexPage() {
return (
<>
<Head>
<title>noavoice - presented by 望月のあ</title>
<meta
name="description"
content="望月のあの声がいつでも聞けるサービス。疲れが取れない、辛いことがあった、そんなあなたに癒しを。"
></meta>
<link rel="shortcut icon" href="/static/images/icons/favicon.png" />
<link rel="manifest" href="/static/manifest.json" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@_noach" />
<meta name="twitter:title" content="のあぼいす" />
<meta name="twitter:image" content="https://noavoice.now.sh/static/twitter-ogp.png" />
<meta name="twitter:description" content="望月のあの声がいつでも聞けるサービス" />
{/*
<link rel="preconnect" href="https://fonts.gstatic.com/" crossOrigin></link>
<link
href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap&subset=japanese"
rel="stylesheet"
></link>
*/}
<link rel="preconnect" href="https://www.google-analytics.com" crossOrigin />
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90236823-7"></script>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-90236823-7');
`
}}
></script>
</Head>
<main>
<style jsx>{`
main {
max-width: 900px;
margin: auto;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
background-color: #fff;
padding-bottom: 24px;
}
`}</style>
<picture>
<source srcSet="/static/header-min.webp" type="image/webp" />
<img
src="/static/header-min.png"
alt="header"
height="150px"
width="100%"
style={sx.header}
loading="lazy"
/>
</picture>
<main>
<style jsx>{`
main {
max-width: 900px;
margin: auto;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
background-color: #fff;
padding-bottom: 24px;
}
`}</style>
<picture>
<source srcSet="/static/header-min.webp" type="image/webp" />
<img
src="/static/header-min.png"
alt="header"
height="150px"
width="100%"
style={sx.header}
loading="lazy"
/>
</picture>

<nav style={{ display: "flex", justifyContent: "space-between", margin: "6px 32px", flexWrap: "wrap" }}>
<div>
<small>
<a href="https://github.com/hrdtbs/noavoice/blob/master/CHANGELOG.md">noavoice: v1.5.0</a>
<br />
<a href="https://twitter.com/_noach" style={sx.descriptionButton}>
声:望月のあ @_noach
</a>
<br />
<a
rel="noreferrer noopener"
target="_blank"
href="https://github.com/hrdtbs/noavoice#%E9%9F%B3%E5%A3%B0%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AElicence%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6"
>
音声ファイルのライセンスについて
</a>
</small>
</div>
<a
href={encodeURI(
`https://twitter.com/intent/tweet?url=https://noavoice.now.sh&text=Vtuber望月のあボイスボタン&hashtags=のあぼいす`
)}
data-show-count="false"
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "1em 0.5em",
margin: "0.5em 0px",
border: "4px dotted #FAA65F"
}}
target="_blank"
rel="noopener noreferrer"
>
<img src="/static/twitter-blue.svg" width="32px" height="32px" alt="twitter" />
Twitterでシェアして応援!
</a>
</nav>
<div style={sx.voiceGroup}>
{voices.map((voice, i) => {
return <Voice name={voice} key={`voice-${i}`} />
})}
<nav style={{ display: "flex", justifyContent: "space-between", margin: "6px 32px", flexWrap: "wrap" }}>
<div>
<small>
<a href="https://github.com/hrdtbs/noavoice/blob/master/CHANGELOG.md">noavoice: v1.5.0</a>
<br />
<a href="https://twitter.com/_noach" style={sx.descriptionButton}>
声:望月のあ @_noach
</a>
<br />
<a
rel="noreferrer noopener"
target="_blank"
href="https://github.com/hrdtbs/noavoice#%E9%9F%B3%E5%A3%B0%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AElicence%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6"
>
音声ファイルのライセンスについて
</a>
</small>
</div>
</main>

<SWRegister />
</>
<a
href={encodeURI(
`https://twitter.com/intent/tweet?url=https://noavoice.now.sh&text=Vtuber望月のあボイスボタン&hashtags=のあぼいす`
)}
data-show-count="false"
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "1em 0.5em",
margin: "0.5em 0px",
border: "4px dotted #FAA65F"
}}
target="_blank"
rel="noopener noreferrer"
>
<img src="/static/twitter-blue.svg" width="32px" height="32px" alt="twitter" />
Twitterでシェアして応援!
</a>
</nav>
<div style={sx.voiceGroup}>
{voices.map((voice, i) => {
return <Voice name={voice} key={`voice-${i}`} />
})}
</div>
</main>
)
}

Expand Down
Loading

1 comment on commit bec9194

@vercel
Copy link

@vercel vercel bot commented on bec9194 Feb 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.