Update README

README.md

@@ -6,8 +6,11 @@ Front page of [yude.jp](https://yude.jp).\
 Built with [Next.js](https://nextjs.org/) and [Tailwind CSS](https://tailwindcss.com/) and deployed on [Vercel](https://vercel.com).
 
 ## Development
-* To setup your repository, please run `yarn`.
+### Setup
-* To preview, please run `yarn dev`.
+1. Run `yarn`.
+1. Rename `.env.local.sample` as `.env.local` and set value. 
+### Preview
+* Run `yarn dev`.
 
 ## License
 This repository is licensed under the MIT License.

pages/components/DiscordPlaying.js

@@ -7,27 +7,25 @@ function App (){
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("common")
-  const [data, setData] = useState({ hits: [] });
+  const [dataPlaying, setDataPlaying] = useState({ hits: [] });
   useEffect(async () => {
     const result = await axios(
       'https://discord.com/api/guilds/723409709306216498/widget.json',
     );
 
-    setData(result.data);
+    setDataPlaying(result.dataPlaying);
     }, []);
-  if (data === undefined){
+  if (dataPlaying === undefined){
     console.log("[Discord API] データの取得に失敗しました。 / Failed to retrieve data.")
     return <p></p>
   }else{
-  const str = JSON.stringify(data)
+  const str = JSON.stringify(dataPlaying)
   
   if (str.indexOf("game") !== -1){
-  const yes_playing = t('yes_playing', {playing: data.members[0].game.name})
+  const yes_playing = t('yes_playing', {playing: dataPlaying.members[0].game.name})
   return <p>{yes_playing}</p>
-  console.log("[Discord API] Playing: " + data.members[0].game.name)
   }else{
   return <p></p>
-  console.log("[Discord API] Nothing playing")
   }
 }
 };

pages/components/DiscordStatus.js

@@ -8,10 +8,7 @@ const App = () => {
       .then((r) => r.json())
       .then((j) => setStatus(j.members[0].status))
   }, []);
-  if (status === undefined){
+
-  console.log("[Discord API] オンライン状態を取得できませんでした。 / Failed to retrieve online status.")
-  return <div></div>
-  }else{
   if (status === "online") {
     return <div className="font-bold text-gray-700 rounded-full bg-green-500 flex w-5 h-5 items-center justify-center"></div>
   }else{
@@ -26,6 +23,5 @@ const App = () => {
     }
   }
 };
-}
 
 export default App;

pages/components/Spotify.js

@@ -7,21 +7,21 @@ function App () {
   const router = useRouter()
   const { locale, locales, defaultLocale, pathname } = router
   const { t, lang } = useTranslation("common")  
-  const [data, setData] = useState({ hits: [] });
+  const [dataSpotify, setDataSpotify] = useState({ hits: [] });
   useEffect(async () => {
     const result = await axios(
       '/api/Spotify',
     );
 
-    setData(result.data);
+    setDataSpotify(result.dataSpotify);
     }, []);
 
-  if (data === undefined){
+  if (dataSpotify === undefined){
     console.log("[Spotify Web API] データの取得に失敗しました。 / Failed to retrieve data.")
     return <p></p>
   }else{
-  if (data.isPlaying){
+  if (dataSpotify.isPlaying){
-   const status = data.artist + ' / ' + data.title
+   const status = dataSpotify.artist + ' / ' + dataSpotify.title
    const listening = t('listening', {listening: status})
    return <p>{listening}</p>
   }else{

pages/profile.js

@@ -55,10 +55,12 @@ export default function About(props) {
         />
         
           <p className="text-4xl subpixel-antialiased">yude</p>
+          <div>
           <DiscordPlaying />
           <Spotify />
           </div>
           </div>
+        </div>
         
         {
          // Description