Merge pull request #76

* feat: Create Notion API and fetch data

* feat: Add load more behavior

* feat: WIP - Add query url support for cursor, pagesize and status

* feat: WIP - Add "reading" page

* feat: WIP - Add filters

* fix: Fix card image issue

* feat: Add readings sort

* chore(deps): Update deps

.env.example

@@ -1,8 +1,12 @@
 # APIS
 NUXT_PUBLIC_LASTFM_API_KEY=
+NUXT_NOTION_API_PRIVATE_KEY=
 
 # Used by NuxtSimpeSitemap
 NUXT_PUBLIC_SITE_URL=
 
+# Notion db id
+NUXT_NOTION_DATABASE_ID=
+
 # Define IDE.
 LAUNCH_EDITOR=webstorm

app.vue

@@ -3,7 +3,7 @@ import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
 gsap.registerPlugin(ScrollTrigger);
-ScrollTrigger.defaults({ markers: process.env.NODE_ENV === 'development' });
+// ScrollTrigger.defaults({ markers: process.env.NODE_ENV === 'development' });
 
 const { t } = useI18n();
 

assets/scss/abstracts/_variables.scss

@@ -89,14 +89,14 @@ $colors: (
 $color-primary: color.scale($color-blue, $lightness: -7%);
 $color-secondary: $nord-8;
 $color-accent: $color-green;
-$color-neutral: $color-gray-600;
+$color-neutral: $nord-3;
 
 
 // Theme colors dark
 $color-primary-dark: $nord-8;
 $color-secondary-dark: $nord-11;
 $color-accent-dark: $color-green;
-$color-neutral-dark: $color-gray-600;
+$color-neutral-dark: $nord-6;
 
 // Darken and lighten amount
 $darken-amount: -60%;

assets/scss/base/_base.scss

@@ -60,3 +60,14 @@ button {
 .fouc-hidden {
   visibility: hidden;
 }
+
+// Vue transition
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

assets/scss/base/_forms.scss

@@ -0,0 +1,10 @@
+// Select
+select {
+  @apply block w-full rounded-md border-0 py-1.5 text-body-txt shadow-sm ring-1 ring-inset ring-polarnight-nord-3
+  focus:ring-2 focus:ring-inset focus:ring-accent sm:max-w-xs sm:text-sm sm:leading-6;
+}
+
+input[type="text"] {
+  @apply block w-full rounded-md border-0 py-1.5 text-body-txt shadow-sm ring-1 ring-inset ring-polarnight-nord-3
+  focus:ring-2 focus:ring-inset focus:ring-accent sm:max-w-xs sm:text-sm sm:leading-6;
+}

assets/scss/base/_index.scss

@@ -11,3 +11,4 @@
 @forward "base";
 @forward "typography";
 @forward "nuxt-content";
+@forward "forms";

assets/scss/base/_typography.scss

@@ -79,3 +79,10 @@ h6,
 /*strong {
   @apply font-rubik-bold;
 }*/
+
+// Flow
+// -------------------------
+
+.flow > *:where(:not(:first-child)) {
+    margin-top: 1em;
+}

assets/scss/components/_badge.scss

@@ -0,0 +1,45 @@
+
+
+.badge {
+  @apply inline-flex items-center max-w-full px-[0.6em] py-[0.1em] rounded text-sm font-medium bg-[#E2EFFE] text-[#1D5695];
+
+  > span {
+    @apply block truncate;
+  }
+
+  &, &--is-default {
+    @apply bg-snowstorm-nord-4;
+  }
+
+  &--is-info {
+    @apply bg-info text-info-content;
+  }
+
+  &--is-danger {
+    @apply bg-danger text-danger-content;
+  }
+
+  &--is-warning {
+    @apply bg-warning text-warning-content;
+  }
+
+  &--is-success {
+    @apply bg-success text-success-content;
+  }
+
+  &--is-neutral {
+    @apply bg-neutral text-neutral-content;
+  }
+
+  &--is-small {
+    @apply text-xs;
+  }
+
+  &--is-medium {
+    @apply text-sm;
+  }
+
+  &--is-large {
+    @apply text-base;
+  }
+}

assets/scss/components/_index.scss

@@ -8,3 +8,4 @@
 
 @import "btn";
 @import "wrapper-outline";
+@import "badge";

components/layout/TheHeader.vue

@@ -31,6 +31,13 @@ const localePath = useLocalePath();
       >
         <Icon name="material-symbols:home" /><span class="sr-only">{{ t("navigation.home") }}</span>
       </NuxtLink>
+      <NuxtLink
+        class="the-header__nav-item the-header__nav-link"
+        :to="localePath({ name: 'readings' })"
+        :title="t('navigation.reading')"
+      >
+        <Icon name="fluent:reading-mode-mobile-20-filled" /><span class="sr-only">{{ t("navigation.reading") }}</span>
+      </NuxtLink>
       <NuxtLink
         class="the-header__nav-item the-header__nav-link"
         :to="localePath({ name: 'lab' })"

components/shared/AppCard.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+// Typescript Props with default values
+interface Props {
+  as?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'article',
+});
+</script>
+
+<template>
+  <Component :is="props.as" class="card">
+    <figure v-if="$slots.image" class="card__img-wrapper">
+      <slot name="image" />
+    </figure>
+
+    <div class="card__body">
+      <slot />
+    </div>
+    <footer v-if="$slots.footer" class="card__footer">
+      <slot name="footer" />
+    </footer>
+  </Component>
+</template>
+
+<style scoped lang="scss">
+.card {
+  @apply relative p-0 overflow-hidden flex flex-col bg-white dark:bg-polarnight-nord-0 rounded-lg
+  border-[1px]  border-snowstorm-nord-4 dark:border-polarnight-nord-2;
+
+  &__img-wrapper {
+    @apply relative aspect-video bg-snowstorm-nord-4 dark:bg-polarnight-nord-3;
+
+    :slotted(img) {
+      @apply absolute inset-0 size-full object-cover;
+    }
+  }
+
+  &__body {
+    @apply flex-grow  px-4 py-2.5;
+  }
+
+  &__title {
+    @apply font-body text-base font-bold capitalize leading-tight;
+  }
+
+  &__footer {
+    @apply  px-4 py-2.5 text-sm text-muted-text;
+  }
+}
+</style>

composables/useBubblesEffect.ts

@@ -28,7 +28,7 @@ export function useBubblesEffect(options: BubblesOptions = {}) {
       const vwPercent = vw * 0.4;
 
       const {
-        bubbleCount = 10,
+        bubbleCount = 2,
         bubbleSizeMin = vwPercent * 0.35,
         bubbleSizeMax = vwPercent,
         bubbleColors = [
@@ -38,8 +38,8 @@ export function useBubblesEffect(options: BubblesOptions = {}) {
         ],
       } = options;
 
-      const spawnBubbleX = (buubleWidth: number) => {
-        return gsap.utils.random(-buubleWidth, (bubblesContainer.value?.clientWidth || 0) - buubleWidth / 2);
+      const spawnBubbleX = (bubbleWidth: number) => {
+        return gsap.utils.random(-bubbleWidth, (bubblesContainer.value?.clientWidth || 0) - bubbleWidth / 2);
       };
 
       const createBubble = () => {

content/en/readings.md

@@ -0,0 +1,8 @@
+---
+coverTitle: Reading
+coverSubtitle: List of articles to read
+coverDescription: Like a to-do list, but for articles to be read.
+description: Pascal Achard, senior frontend developer. Reading. List of articles to read.
+---
+
+

content/en/test.md

@@ -0,0 +1,8 @@
+---
+coverTitle: À lire
+coverSubtitle: Liste d'articles à lire
+coverDescription: ???
+description: Pascal Achard, développeur frontend senior. Test. Liste d'articles à lire.
+---
+
+

content/fr/readings.md

@@ -0,0 +1,9 @@
+---
+coverTitle: Lectures
+coverSubtitle: Frontend, développement, design, etc.
+coverDescription: Base de données d’articles collectés au fil du temps.
+description: Pascal Achard, développeur frontend senior. Lecture. Liste d'articles à lire.
+---
+
+
+## Articles

content/fr/test.md

@@ -0,0 +1,8 @@
+---
+coverTitle: À lire
+coverSubtitle: Liste d'articles à lire
+coverDescription: ???
+description: Pascal Achard, développeur frontend senior. Test. Liste d'articles à lire.
+---
+
+

locales/en.json

@@ -3,6 +3,7 @@
     "go": "Go",
     "goToPage": "Go to page",
     "languages": "Language",
+    "loadMore": "Load more",
     "no": "No",
     "yes": "Yes"
   },
@@ -18,6 +19,7 @@
     "home": "Home page",
     "lab": "Lab page",
     "languageSelector": "Language selector",
+    "reading": "Reading page",
     "themeSelector": "Theme selector"
   },
   "pages": {
@@ -29,6 +31,28 @@
       "scrobbles": "Scrobbles",
       "scrobblesHistory": "Listening history",
       "tracksPerPage": "{n} tracks per page"
+    },
+    "readings": {
+      "articleList": "Article list",
+      "bdd": "Data base",
+      "filters": {
+        "pageSizes": "Articles by page",
+        "status": {
+          "all": "All",
+          "canceled": "Canceled",
+          "inProgress": "In Progress",
+          "read": "Read",
+          "toRead": "To read"
+        },
+        "statusLabel": "Status"
+      },
+      "sort": {
+        "createdTime": "Created Time",
+        "lastEditedTime": "Last edited time",
+        "name": "Name",
+        "score": "⭐️⭐️⭐️⭐️⭐️",
+        "sortLabel": "Sort by"
+      }
     }
   },
   "theme": {

locales/fr.json

@@ -3,6 +3,7 @@
     "go": "Allez",
     "goToPage": "Aller à la page",
     "languages": "Langue",
+    "loadMore": "Charger la suite",
     "no": "Non",
     "yes": "Oui"
   },
@@ -18,6 +19,7 @@
     "home": "Page d'accueil",
     "lab": "Page lab",
     "languageSelector": "Sélecteur de langue",
+    "reading": "Page lecture",
     "themeSelector": "Sélecteur de thème"
   },
   "pages": {
@@ -29,6 +31,28 @@
       "scrobbles": "Scrobbles",
       "scrobblesHistory": "Historique d'écoute",
       "tracksPerPage": "{n} pistes par pages"
+    },
+    "readings": {
+      "articleList": "Liste des articles",
+      "bdd": "Base de données",
+      "filters": {
+        "pageSizes": "Articles par page",
+        "status": {
+          "all": "Tous",
+          "canceled": "Annulés",
+          "inProgress": "En cours",
+          "read": "Lus",
+          "toRead": "À lire"
+        },
+        "statusLabel": "Statut"
+      },
+      "sort": {
+        "createdTime": "Date de création",
+        "lastEditedTime": "Date de dernière édition",
+        "name": "Nom",
+        "score": "⭐️⭐️⭐️⭐️⭐️",
+        "sortLabel": "Trier par"
+      }
     }
   },
   "theme": {

nuxt.config.ts

@@ -136,10 +136,12 @@ export default defineNuxtConfig({
   },
 
   runtimeConfig: {
+    notionApiKey: process.env.NUXT_NOTION_API_PRIVATE_KEY,
     public: {
       pkg: JSON.stringify(pkg),
       siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'http://localhost:3000',
       lastFmApiKey: process.env.NUXT_PUBLIC_LASTFM_API_KEY,
+      notionDatabaseId: process.env.NUXT_NOTION_DATABASE_ID,
     },
   },
 

package.json

@@ -18,8 +18,10 @@
   "dependencies": {
     "@fontsource/inter": "^5.0.16",
     "@fontsource/rubik": "^5.0.18",
+    "@notionhq/client": "^2.2.14",
     "@studio-freight/lenis": "^1.0.34",
     "@vueuse/nuxt": "^10.7.2",
+    "@vueuse/router": "^10.7.2",
     "gsap": "^3.12.5",
     "splitting": "^1.0.6"
   },
@@ -34,6 +36,7 @@
     "@nuxtjs/i18n": "^8.0.1",
     "@nuxtjs/sitemap": "^5.1.0",
     "@nuxtjs/tailwindcss": "^6.11.2",
+    "@tailwindcss/forms": "^0.5.7",
     "@types/node": "^20.11.16",
     "@types/splitting": "^1.0.5",
     "@types/uuid": "^9.0.8",

pages/index.vue

@@ -70,7 +70,7 @@ onUnmounted(() => {
     <div class="page-index__cover">
       <AppLoader class="!absolute inset-0 z-0 m-auto text-[58px]" />
       <CoverComponent
-        :title="data?.coverTitle"
+        :title="data?.coverTitle ?? ''"
         :subtitle="data?.coverSubtitle ?? ''"
         :uptitle="data?.coverUpTitle ?? ''"
         :info="data?.coverInfo"