add wordle

components/Layout/index.js

@@ -128,9 +128,9 @@ function Demo({ children, pageTitle, description, ogImage, ...props }) {
             <meta charSet="utf-8" />
             <meta name="Description" content={description}></meta>
             <meta name="viewport" content="width=device-width, user-scalable=no"></meta>
-            <meta itemprop="name" content={pageTitle}></meta>
-            <meta itemprop="description" content={description}></meta>
-            <meta itemprop="image" content={`https://ryanparag.com${ogImage}`}></meta>
+            <meta itemProp="name" content={pageTitle}></meta>
+            <meta itemProp="description" content={description}></meta>
+            <meta itemProp="image" content={`https://ryanparag.com${ogImage}`}></meta>
             <meta property="og:url" content="https://ryanparag.com"></meta>
             <meta property="og:type" content="website"></meta>
             <meta property="og:title" content={pageTitle}></meta>

components/Logo/index.js

@@ -112,6 +112,18 @@ export const ListensIcon = () => {
   )
 }
 
+export const WordleIcon = () => {
+  return(
+    <LogoIcon>
+      <svg viewBox="0 0 245 258" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect y="12.5" width="245" height="245" rx="37" fill="#416835"/>
+        <rect width="245" height="245" rx="37" fill="#618B55"/>
+        <path d="M78.8486 174.468L54.8636 86.3083L43.0852 85.2376V70.5325H89.9845V85.2376L78.4203 86.8794L89.7704 133.35L91.4122 140.061H91.8405L93.5537 133.279L113.898 70.5325H131.173L152.588 136.206L154.087 140.703H154.516L155.729 136.206L167.864 86.8794L155.943 85.2376V70.5325H201.915V85.2376L190.85 86.3083L165.794 174.468H143.451L125.534 120.715L123.321 113.291H122.893L120.109 121.144L101.906 174.468H78.8486Z" fill="white"/>
+      </svg>
+    </LogoIcon>
+  )
+}
+
 export const WorksheetsIcon = () => {
   return(
     <LogoIcon>

components/Profile/index.js

@@ -0,0 +1,68 @@
+import { useUser } from '@auth0/nextjs-auth0'
+import styled from 'styled-components'
+import { designTokens } from '@components/Theme/designTokens'
+import Card from '@components/Card'
+import { LoadingSmall } from '@components/LoadingBox'
+import Link from 'next/link'
+
+const ProfileInfo = styled.div`
+  display: flex;
+  align-items: center;
+  @media screen and (max-width: ${designTokens.breakpoints[4]}) {
+    margin-bottom: ${designTokens.space[3]};
+  }
+`
+
+const ProfileContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  @media screen and (max-width: ${designTokens.breakpoints[4]}) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`
+
+const ProfileAvatar = styled.div`
+  width: ${designTokens.space[6]};
+  height: ${designTokens.space[6]};
+  border-radius: 999px;
+  margin-right: ${designTokens.space[3]};
+  background: url(${props => props.bg});
+  background-repeat: no-repeat;
+  background-size: cover;
+`
+
+const Profile = () => {
+  const { user, isLoading } = useUser()
+  return(
+    <Card>
+      {
+        isLoading && (<LoadingSmall/>)
+      }
+      {
+        user && (
+          <ProfileContainer>
+            <ProfileInfo>
+              <ProfileAvatar bg={user.picture}/>
+              <div>
+                <h5 style={{ marginTop: '0', marginBottom: designTokens.space[1] }}>{user.name}</h5>
+                <small>{user.email}</small>
+              </div>
+            </ProfileInfo>
+            <Link href="/api/auth/logout">
+              <a className="link">Logout</a>
+            </Link>
+          </ProfileContainer>
+        )
+      }
+      {
+        !user && (
+          <span>No profile</span>
+        )
+      }
+    </Card>
+  )
+}
+
+export default Profile

components/Projects/index.js

@@ -279,6 +279,12 @@ export default function Projects(){
 
   const projects = [
     {
+      name: 'Wordle Results',
+      description: 'Take a look at a history of my Wordle attmepts',
+      image: '/static/projects/icon-wordle.png',
+      link:'/wordle',
+      outbound: false
+    },{
       name: 'Slack Themes',
       description: 'Having trouble keeping track of all of your Slack workspaces?',
       image: '/static/projects/icon-slack-themes.png',

components/Wordle/index.js

@@ -0,0 +1,175 @@
+import React, { useEffect } from 'react'
+import styled from 'styled-components'
+import { designTokens } from '@components/Theme/designTokens'
+import { Label, ItemTitle, Body } from '@components/Typography'
+import Chip from '@components/Chip'
+
+const WordleContainer = styled.div`
+  border: 1px solid var(--grey200);
+  padding: ${designTokens.space[3]};
+  display: grid;
+  grid-template-columns: auto ${designTokens.space[8]};
+  grid-column-gap: ${designTokens.space[4]};
+  margin-bottom: ${designTokens.space[4]};
+`
+
+const ResultContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-row-gap: ${designTokens.space[1]};
+`
+
+const Row = styled.div`
+  display: grid;
+  grid-column-gap: ${designTokens.space[1]};
+  grid-template-columns: repeat(5, ${designTokens.space[3]});
+`
+
+const Block = styled.span`
+  width: ${designTokens.space[3]};
+  height: ${designTokens.space[3]};
+  background: ${props => props.type === 'correct' ? '#0BB409' : props.type === 'present' ? '#FBCC1B' : 'var(--grey300)'};
+  display: inline-block;
+`
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+`
+
+const Emoji = styled.label`
+  font-size: ${designTokens.fontSizes[2]};
+`
+
+const AnaylticsContainer = styled.div`
+  display: grid;
+  border: 1px solid var(--grey200);
+  padding: ${designTokens.space[3]};
+  grid-template-columns: 1fr;
+  grid-row-gap: ${designTokens.space[1]};
+  margin-bottom: ${designTokens.space[4]};
+`
+
+const WordleResult = ({result}) => {
+
+  return(
+    <ResultContainer>
+      {
+        result.map((item, i) => (
+          <Row key={i}>
+            {
+              item.map((letter, i) => (
+                <Block type={letter} key={i} title={letter}/>
+              ))
+            }
+          </Row>
+        ))
+      }
+    </ResultContainer>
+  )
+}
+
+const Evaluation = ({ value }) => {
+
+  const getProgress = () => {
+    switch (value) {
+      case 'X':
+        return '🤬'
+      case '6':
+        return '🥵'
+      case '5':
+        return '😑'
+      case '4':
+        return '😐'
+      case '3':
+        return '😃'
+      case '2':
+        return '🤠'
+      case '1':
+        return '🤯'
+      default:
+        return ''
+    }
+  }
+
+  if(value === 'X') {
+    return(
+      <div>
+        <Emoji>{getProgress()}</Emoji>
+        <Label subtle>Unsuccessful</Label>
+      </div>
+    )
+  } else {
+    return (
+      <div>
+        <Emoji>{getProgress()}</Emoji>
+        <Label subtle>{value} attempts</Label>
+      </div>
+    )
+  }
+}
+
+const Wordle = ({wordle}) => {
+
+  const formatDate = (input) => {
+    const date = new Date(input).toLocaleDateString('en-us', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })
+
+    return date
+  }
+
+  return(
+    <WordleContainer>
+      <Header>
+        <div>
+          <ItemTitle>Wordle {wordle.matchNumber}</ItemTitle>
+          <Label subtle>{formatDate(wordle.date)}</Label>
+        </div>
+        <Evaluation value={wordle.eval}/>
+      </Header>
+      <WordleResult result={wordle.result} />
+    </WordleContainer>
+  )
+}
+
+export const WordleAnalytics = ({data}) => {
+
+  const getSum = () => {
+    const attempts = []
+
+    data.map(item => {
+      if(item.eval === 'X') {
+        attempts.push(0)
+      } else {
+        attempts.push(parseInt(item.eval))
+      }
+    })
+
+    console.log(attempts)
+
+    const arraySum = (ar) => {
+      var sum = 0;
+      for (var i = 0; i < ar.length; i++) {
+        sum += ar[i];
+      }
+      return sum;
+    }
+
+    const average = arraySum(attempts)/data.length
+
+    return average
+  }
+
+  return(
+    <AnaylticsContainer>
+      <Label subtle>Average # of Attempts</Label>
+      <h4>{getSum()} Attempts</h4>
+    </AnaylticsContainer>
+  )
+}
+
+export default Wordle

next.config.js

@@ -18,7 +18,8 @@ module.exports = {
     NEW_SENDGRID_API_KEY: process.env.NEW_SENDGRID_API_KEY,
     GITHUB_API_KEY: process.env.GITHUB_API_KEY,
     AUTH_STRING: process.env.AUTH_STRING,
-    LINKPREVIEW_API_KEY: process.env.LINKPREVIEW_API_KEY
+    LINKPREVIEW_API_KEY: process.env.LINKPREVIEW_API_KEY,
+    NOTION_WORDLE: process.env.NOTION_WORDLE
   },
   images: {
     domains: ['i.scdn.co', 'mosaic.scdn.co'],

package.json

@@ -33,7 +33,7 @@
     "gray-matter": "^4.0.2",
     "js-cookie": "^3.0.0",
     "markdown": "^0.5.0",
-    "next": "^11.1.1",
+    "next": "^12.1.0",
     "node-fetch": "^2.6.1",
     "path": "^0.12.7",
     "plaiceholder": "^2.0.1",

pages/api/auth/[...auth0].js

@@ -0,0 +1,3 @@
+import { handleAuth } from '@auth0/nextjs-auth0'
+
+export default handleAuth()

pages/api/wordle/index.js

@@ -0,0 +1,64 @@
+const { Client } = require('@notionhq/client');
+
+const notion = new Client({ auth: process.env.NOTION_API_KEY });
+
+export default async (req,res) => {
+
+  const response = await notion.databases.query({ 
+    database_id: process.env.NOTION_WORDLE,
+    sorts: [
+      {
+        property: 'Date',
+        direction: 'descending',
+      },
+    ],
+  });
+
+  const wordles = []
+
+  response.results.map(item => {
+    const firstLine = item.properties.Result.title[0].plain_text.split('\n')[0];
+    const match = firstLine.split(' ')[1];
+    const result = firstLine.split(' ')[2];
+    const evaulation = item.properties.Result.title[0].plain_text.replace(/(?:\r\n|\r|\n)/g, '<br>');
+
+    const evaulations = []
+    const results = item.properties.Result.title[0].plain_text.split('\n').slice(1)
+
+    const parsed = () => {
+      const answers = []
+      results.map(item => {
+
+        const replaced = item.replace(/⬛/g, '0').replace(/🟨/g, '1').replace(/🟩/g, '2')
+
+        const guess = replaced.split('')
+
+        const parsedGuess = []
+
+        guess.map(a => {
+          if(a === '0') {
+            parsedGuess.push('absent')
+          } else if(a === '1') {
+            parsedGuess.push('present')
+          } else if(a === '2') {
+            parsedGuess.push('correct')
+          }
+        })
+
+        answers.push(parsedGuess)
+      })
+
+      return answers
+    }
+
+    wordles.push({
+      id: item.id,
+      result: parsed(),
+      date: item.properties.Date.date.start,
+      matchNumber: match,
+      eval: result.split('')[0]
+    })
+  })
+
+  res.status(200).json({ wordles });
+}