challenge solved

package.json

@@ -23,8 +23,9 @@
   "dependencies": {
     "@mapbox/rehype-prism": "^0.8.0",
     "@netlify/plugin-nextjs": "4.14",
+    "@supabase/supabase-js": "^2.45.2",
     "@tailwindcss/typography": "^0.5.0",
-    "axios": "^0.27.2",
+    "axios": "^1.7.5",
     "classnames": "^2.3.1",
     "cypress": "^10.1.0",
     "gray-matter": "^4.0.2",

posts/[id].js

@@ -0,0 +1,73 @@
+import { getGlobalData } from '../utils/global-data';
+import {
+  getPostBySlug,
+} from '../utils/mdx-utils';
+
+import { MDXRemote } from 'next-mdx-remote';
+import Head from 'next/head';
+import Link from 'next/link';
+import ArrowIcon from '../components/ArrowIcon';
+import CustomLink from '../components/CustomLink';
+import Footer from '../components/Footer';
+import Header from '../components/Header';
+import Layout, { GradientBackground } from '../components/Layout';
+import SEO from '../components/SEO';
+
+
+const components = {
+  a: CustomLink,
+  Head,
+};
+
+export default function PostPage({
+  posts,
+  globalData,
+}) {
+  return (
+    <Layout>
+      <SEO
+        title={`${posts.title} - ${globalData.name}`}
+        description={posts.description}
+      />
+      <Header name={globalData.name} />
+      <article className="px-6 md:px-0">
+        <header>
+          <h1 className="text-3xl md:text-5xl dark:text-white text-center mb-12">
+            {posts?.title}
+          </h1>
+          {posts?.description && (
+            <p className="text-xl mb-4">{posts?.description}</p>
+          )}
+        </header>
+        <main>
+          <article className="prose dark:prose-dark">
+            {posts.body}
+          </article>
+        </main>
+      </article>
+      <Footer copyrightText={globalData.footerText} />
+      <GradientBackground
+        variant="large"
+        className="absolute -top-32 opacity-30 dark:opacity-50"
+      />
+      <GradientBackground
+        variant="small"
+        className="absolute bottom-0 opacity-20 dark:opacity-10"
+      />
+    </Layout>
+  );
+}
+
+export const getServerSideProps = async ({ params }) => {
+  const globalData = getGlobalData();
+  const posts = await getPostBySlug(params.id);
+
+
+  return {
+    props: {
+      globalData,
+      posts,
+    },
+  };
+};
+

services/api.js

@@ -1,9 +1,9 @@
 import axios from 'axios';
 
 export const api  = axios.create({
-    baseURL: 'https://nuareafrukmnjnaakplk.supabase.co/rest/v1',
+    baseURL: 'https://ejhicwomoulkriutmhwi.supabase.co/rest/v1',
     headers: {
-        apikey: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im51YXJlYWZydWttbmpuYWFrcGxrIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NjAyMjc0MjEsImV4cCI6MTk3NTgwMzQyMX0.3qUEldVsmcr_yrpf8N1-qBGdHLB1QCy9nB6-nApVQIA",
-        authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im51YXJlYWZydWttbmpuYWFrcGxrIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NjAyMjc0MjEsImV4cCI6MTk3NTgwMzQyMX0.3qUEldVsmcr_yrpf8N1-qBGdHLB1QCy9nB6-nApVQIA"
+        apikey: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVqaGljd29tb3Vsa3JpdXRtaHdpIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQ4Njg3MjEsImV4cCI6MjA0MDQ0NDcyMX0.8YbNKmYMj_obqE9m6yBaoPw6mJ0nHqWfG5M3PT0mX0U",
+        authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVqaGljd29tb3Vsa3JpdXRtaHdpIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQ4Njg3MjEsImV4cCI6MjA0MDQ0NDcyMX0.8YbNKmYMj_obqE9m6yBaoPw6mJ0nHqWfG5M3PT0mX0U"
     }
 })

tailwind.config.js

@@ -1,8 +1,8 @@
 module.exports = {
   mode: 'jit',
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+    './src/pages/**/*.{js,ts,jsx,tsx}',
+    './src/components/**/*.{js,ts,jsx,tsx}',
   ],
   darkMode: 'class', // or 'media' or 'class'
   presets: [require('./utils/tailwind-preset')],

utils/mdx-utils.js

@@ -1,19 +1,29 @@
-import { api } from '../services/api'
+import supabase from '../utils/supabase'; // Ajuste o caminho conforme necessário
 
 export const getPosts = async () => {
-    const {data} = await api.get('/posts'); 
+    const { data, error } = await supabase
+        .from('posts')
+        .select('*');
 
-    if(data){
-        return data;
+    if (error) {
+        console.error('Error fetching posts:', error);
+        return [];
     }
 
-    return []
+    return data;
 }
 
 export const getPostBySlug = async (id) => {
+    const { data, error } = await supabase
+        .from('posts')
+        .select('*')
+        .eq('id', id)
+        .single();
 
-    //TODO: BUSCAR UM POST EM ESPECIFICO.
-    //const {data} = await api.get(`/post?id=eq.${id}`)
+    if (error) {
+        console.error('Error fetching post:', error);
+        return {};
+    }
 
-    return {}
-}
+    return data;
+}

utils/supabase.js

@@ -0,0 +1,8 @@
+// utils/supabase.js
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = 'https://ejhicwomoulkriutmhwi.supabase.co'; // Substitua pelo URL do seu Supabase
+const supabaseKey = 'your-supabase-key'; // Substitua pela sua chave API
+const supabase = createClient(supabaseUrl, supabaseKey);
+
+export default supabase;