Merge pull request #150 from tjheffner/duolingo-stats

add duolingo stats, update homepage

src/lib/components/Currently.svelte

@@ -2,6 +2,19 @@
   export let recentlyListened
   export let recentlyWatched
   export let recentlyPlayed
+  export let duolingo
+
+  const formattedDate = new Date(duolingo.streakData.currentStreak.startDate)
+    .toLocaleDateString('en-us', { year: 'numeric', month: 'short', day: 'numeric'})
+
+  // https://dev.to/jorik/country-code-to-flag-emoji-a21
+  function getFlagEmoji(countryCode) {
+    const codePoints = countryCode
+      .toUpperCase()
+      .split('')
+      .map(char =>  127397 + char.charCodeAt());
+    return String.fromCodePoint(...codePoints);
+  }
 </script>
 
 <ul class="divide-y divide-dashed divide-sky-600 dark:divide-blue-300 pl-0">
@@ -26,6 +39,18 @@
     </div>
   </li>
 
+  {#if Object.hasOwn(duolingo, 'courses')}
+    <li class="grid grid-cols-currently">
+      <p class="my-4 text-3xl">🦉</p>
+      <div class="my-4">
+        {#each duolingo.courses as course}
+          <p class="m-0"><strong>{course.title} {getFlagEmoji(course.learningLanguage)}</strong> <span class="text-sm text-accent">[{course.xp} xp]</span></p>
+        {/each}
+        <p class="m-0">Current streak: <span class="font-bold text-secondary">{duolingo.streak}</span> days! <span class="text-sm block md:inline-block">Streak began: <span class="text-accent">{formattedDate}</span></span></p>
+      </div>
+    </li>
+  {/if}
+
   <li class="grid grid-cols-currently">
     <p class="my-4 text-3xl">📚</p>
     <div class="my-4">

src/lib/siteConfig.js

@@ -1,24 +1,24 @@
-// export const SITE_URL = 'https://heffner.netlify.app';
-export const SITE_URL = 'https://heffner.dev'
-export const GH_USER = 'tjheffner'
-export const GH_USER_REPO = 'tjheffner/heffdotdev' // used for pulling github issues and offering comments
+/* general site settings */
+export const SITE_URL = 'https://heffner.dev' // 'https://heffner.netlify.app'
 export const SITE_TITLE = 'heffner.dev'
 export const SITE_DESCRIPTION = 'personal site of tanner heffner'
 export const DEFAULT_OG_IMAGE = 'https://heffner.dev/og?message=heffner.dev'
+export const GH_USER = 'tjheffner'
+export const GH_USER_REPO = 'tjheffner/heffdotdev' // used for pulling github issues and offering comments
+export const REPO_URL = 'https://github.com/' + GH_USER_REPO
+export const REPO_OWNER = GH_USER_REPO.split('/')[0]
+
+/* for posting */
+export const APPROVED_POSTERS_GH_USERNAME = [GH_USER]
+export const GH_PUBLISHED_TAGS = ['Published']
+export const POST_CATEGORIES = ['Note', 'Recipe', 'Technical', 'DIY']
 
+/* for gathering various stats */
 export const TWITTER_ID = 'foodpyramids'
 export const LETTERBOXD_ID = 'tjheffner'
 export const LASTFM_ID = 'lob_' // need process.env.LASTFM_API_KEY
 export const STEAM_ID = '76561197965804852' // need process.env.STEAM_API_KEY
-
-export const APPROVED_POSTERS_GH_USERNAME = ['tjheffner']
-export const GH_PUBLISHED_TAGS = ['Published']
-
-export const POST_CATEGORIES = ['Note', 'Recipe', 'Technical', 'DIY']
-
-// auto generated variables
-export const REPO_URL = 'https://github.com/' + GH_USER_REPO
-export const REPO_OWNER = GH_USER_REPO.split('/')[0]
+export const DUOLINGO_ID = 'tanner623291'
 
 // dont forget process.env.GH_TOKEN
 // if supplied, raises rate limit from 60 to 5000

src/routes/(main)/+page.server.js

@@ -1,5 +1,10 @@
 import { LASTFM_API_KEY, STEAM_API_KEY } from '$env/static/private'
-import { LASTFM_ID, LETTERBOXD_ID, STEAM_ID } from '$lib/siteConfig'
+import {
+  LASTFM_ID,
+  LETTERBOXD_ID,
+  STEAM_ID,
+  DUOLINGO_ID,
+} from '$lib/siteConfig'
 import letterboxd from 'letterboxd'
 
 /** @type {import('./$types').PageServerLoad} */
@@ -28,9 +33,16 @@ export async function load({ fetch, params }) {
   const steam_json = await steam_res.json()
   const recentlyPlayed = steam_json.response
 
+  // Fetch stats from Duolingo. This is an unofficial endpoint, may break!!
+  const duolingo_res = await fetch(
+    `https://www.duolingo.com/2017-06-30/users?username=${DUOLINGO_ID}`
+  )
+  const duolingo_json = await duolingo_res.json()
+
   return {
     recentlyListened,
     recentlyWatched,
     recentlyPlayed,
+    duolingo: duolingo_json.users[0],
   }
 }

src/routes/(main)/+page.svelte

@@ -3,6 +3,7 @@
   import Card from '$lib/components/Card.svelte'
   import EmojiWall from '$lib/components/EmojiWall.svelte'
   import Currently from '$lib/components/Currently.svelte'
+  import GetInTouch from '$lib/components/GetInTouch.svelte'
   import {
     SITE_URL,
     SITE_TITLE,
@@ -13,7 +14,7 @@
 
   // data from +page.server.js, keeps api keys private
   export let data;
-  const { recentlyListened, recentlyWatched, recentlyPlayed } = data;
+  const { recentlyListened, recentlyWatched, recentlyPlayed, duolingo } = data;
 </script>
 
 <svelte:head>
@@ -63,13 +64,6 @@
     <p>Thanks for stopping by, check out the <a href="/blogroll">links that work</a>. ✌️</p>
   </Slice>
 
-  <Slice title="Currently...">
-    <Currently recentlyListened={recentlyListened}
-               recentlyWatched={recentlyWatched}
-               recentlyPlayed={recentlyPlayed}
-    />
-  </Slice>
-
   <Slice title="Fav Recipes">
     <p>In no particular order, these are recipes I get a lot of mileage out of...</p>
     <div class="grid w-full grid-cols-1 gap-4 align-middle md:grid-cols-3">
@@ -81,4 +75,15 @@
       <Card title="Shrimp and Rice" href={'/shrimp-and-rice'} />
     </div>
   </Slice>
+
+  <Slice title="Currently...">
+    <Currently recentlyListened={recentlyListened}
+               recentlyWatched={recentlyWatched}
+               recentlyPlayed={recentlyPlayed}
+               duolingo={duolingo}
+    />
+  </Slice>
+
+  <GetInTouch />
+
 </section>

src/routes/(main)/blog/fuzzySearch.js

@@ -52,13 +52,7 @@ function _fuzzySearch(items, selectedCategories, search) {
   })
   if (search) {
     const haystack = filteredItems.map((v) =>
-      [
-        v.title,
-        v.subtitle,
-        v.tags,
-        v.content,
-        v.description,
-      ].join(' ')
+      [v.title, v.subtitle, v.tags, v.content, v.description].join(' ')
     )
     const idxs = u.filter(haystack, search)
     const info = u.info(idxs, haystack, search)