Feat: Integrate API communication with frontend, add methods to fetch…

pages/index.js → src/pages/index.js

@@ -24,7 +24,6 @@ export default function Index({ posts, globalData }) {
               className="md:first:rounded-t-lg md:last:rounded-b-lg backdrop-blur-lg bg-white dark:bg-black dark:bg-opacity-30 bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-50 transition border border-gray-800 dark:border-white border-opacity-10 dark:border-opacity-10 border-b-0 last:border-b hover:border-b hovered-sibling:border-t-0"
             >
               <Link
-                as={`/posts/${post.id}`}
                 href={`/posts/${post.id}`}
               >
                 <a className="py-6 lg:py-10 px-6 lg:px-16 block focus:outline-none focus:ring-4">
@@ -63,6 +62,5 @@ export async function getServerSideProps() {
   const posts = await getPosts();
   const globalData = getGlobalData()
 
-
   return { props: { posts, globalData } };
 }

pages/posts/[id].js → src/pages/posts/[id].js

@@ -41,7 +41,7 @@ export default function PostPage({
         </header>
         <main>
           <article className="prose dark:prose-dark">
-            {posts.body}
+            {posts?.body}
           </article>
         </main>
       </article>

src/services/api.js

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+export const api  = axios.create({
+    baseURL: 'https://yyhfavepdalzhbxblymv.supabase.co/rest/v1',
+    headers: {
+        apikey: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl5aGZhdmVwZGFsemhieGJseW12Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjE3MzIyNTEsImV4cCI6MjAzNzMwODI1MX0.GJQ9Tzc4NJUMAfaYKvXvpehLZovVWepuyjk7Js8u6Jc", 
+        Authorization: " Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl5aGZhdmVwZGFsemhieGJseW12Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjE3MzIyNTEsImV4cCI6MjAzNzMwODI1MX0.GJQ9Tzc4NJUMAfaYKvXvpehLZovVWepuyjk7Js8u6Jc"
+    }
+})

src/utils/mdx-utils.js

@@ -0,0 +1,31 @@
+import { api } from '../services/api'
+
+export const getPosts = async () => {
+    const {data} = await api.get('/posts');
+
+    if (data) {
+        return data;
+    }
+
+    return []
+}
+
+export const getPostBySlug = async (id) => {
+    try {
+        const { data, error } = await api.get(`/posts?id=eq.${id}`);
+
+        if (error) {
+            console.error("Erro ao buscar post:", error);
+            return {};
+        }
+
+        if (data && data.length > 0) {
+            return data[0];
+        }
+
+        return {};
+    } catch (error) {
+        console.error("Erro na requisição:", error);
+        return {};
+    }
+};

utils/tailwind-preset.js → src/utils/tailwind-preset.js

@@ -1,6 +1,6 @@
 const plugin = require('tailwindcss/plugin');
 const pluginTypography = require('@tailwindcss/typography');
-const { COLOR_THEMES, FONT_THEMES } = require('../themes');
+const { COLOR_THEMES, FONT_THEMES } = require('../../themes');
 
 const THEME = process.env.BLOG_THEME || 'default';
 const FONT_PRIMARY = process.env.BLOG_FONT_HEADINGS || 'sans-serif';

tailwind.config.js

@@ -1,9 +1,9 @@
 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')],
+  presets: [require('./src/utils/tailwind-preset')],
 };