blog endpoint - styling - misc. fixes

apps/marketing/astro.config.ts

@@ -9,7 +9,7 @@ import sitemap from '@astrojs/sitemap'
 import tailwind from '@astrojs/tailwind'
 import vercel from '@astrojs/vercel/serverless'
 import sentry from '@sentry/astro'
-import { defineConfig } from 'astro/config'
+import { defineConfig, envField } from 'astro/config'
 import dotenv from 'dotenv'
 
 import postcss from './postcss.config.js'
@@ -50,12 +50,31 @@ export default defineConfig({
       },
     },
     ssr: {
-      noExternal: ['swiper'],
-      external: ['image-size', 'tiny-glob'],
+      noExternal: [],
+      external: [
+        'image-size',
+        'tiny-glob',
+        'react',
+        'react-dom',
+        '@dnd-kit',
+        '@codesandbox/sandpack-react',
+      ],
     },
   },
   output: 'server',
   adapter: vercel({
     imageService: true,
   }),
+  experimental: {
+    env: {
+      schema: {
+        SUPABASE_DEV_MODE: envField.string({
+          context: 'server',
+          access: 'public',
+          default: 'false',
+        }),
+      },
+    },
+    serverIslands: true,
+  },
 })

apps/marketing/src/database.types.ts

@@ -537,10 +537,12 @@ export type Database = {
           frontmatter: string | null
           html: string | null
           id: string
+          isStory: boolean | null
           named_export: string | null
           slug: string | null
           sort: number | null
           status: string
+          storybook_id: string | null
           syntax: string | null
           title: string | null
           user_created: string | null
@@ -554,10 +556,12 @@ export type Database = {
           frontmatter?: string | null
           html?: string | null
           id: string
+          isStory?: boolean | null
           named_export?: string | null
           slug?: string | null
           sort?: number | null
           status?: string
+          storybook_id?: string | null
           syntax?: string | null
           title?: string | null
           user_created?: string | null
@@ -571,10 +575,12 @@ export type Database = {
           frontmatter?: string | null
           html?: string | null
           id?: string
+          isStory?: boolean | null
           named_export?: string | null
           slug?: string | null
           sort?: number | null
           status?: string
+          storybook_id?: string | null
           syntax?: string | null
           title?: string | null
           user_created?: string | null

apps/marketing/src/pages/blog/[slug]/index.astro

@@ -52,7 +52,7 @@ const blogCreated = data.blogData[0]?.date_created as string
 const blogAlt = data.blogData[0]?.title as string
 const blogContent = data.blogData[0]?.content_block
 
-const contentBlock = data.blogData[0]?.content_block
+const contentBlock = data.blogData[0]?.content_block ?? ''
 
 // Load the content block into cheerio
 // @ts-ignore

apps/marketing/src/pages/blog/[slug]/index.json.ts

@@ -2,29 +2,31 @@ import type { Database } from '@/database.types'
 import type { SupabaseClient } from '@supabase/supabase-js'
 import type { APIContext } from 'astro'
 
+import { getSecret } from 'astro:env/server'
+
 import { supabase } from '@/supabase'
 
-const supabaseClient: SupabaseClient = supabase
-type Articles = Database['public']['Tables']['articles']['Row']
-type Authors = Database['public']['Tables']['authors']['Row']
-type Files = Database['public']['Tables']['directus_files']['Row']
+const supabaseClient: SupabaseClient<Database> = supabase
+// type Articles = Database['public']['Tables']['articles']['Row']
+// type Authors = Database['public']['Tables']['authors']['Row']
+// type Files = Database['public']['Tables']['directus_files']['Row']
 
-interface ArticlesWithRelations {
-  id: Articles['id']
-  status: Articles['status']
-  sort: Articles['sort']
-  date_created: Articles['date_created']
-  date_updated: Articles['date_updated']
-  title: Articles['title']
-  excerpt: Articles['excerpt']
-  slug: Articles['slug']
-  author?:
-    | (Pick<Authors, 'title' | 'last_name' | 'first_name'> & {
-        avatar: Pick<Files, 'filename_disk'> | null
-      })
-    | null
-  image: Pick<Files, 'filename_disk'> | null
-}
+// interface ArticlesWithRelations {
+//   id: Articles['id']
+//   status: Articles['status']
+//   sort: Articles['sort']
+//   date_created: Articles['date_created']
+//   date_updated: Articles['date_updated']
+//   title: Articles['title']
+//   excerpt: Articles['excerpt']
+//   slug: Articles['slug']
+//   author?:
+//     | (Pick<Authors, 'title' | 'last_name' | 'first_name'> & {
+//         avatar: Pick<Files, 'filename_disk'> | null
+//       })
+//     | null
+//   image: Pick<Files, 'filename_disk'> | null
+// }
 /**
  *
  * @param root0 The API context.
@@ -91,21 +93,32 @@ export async function GET({ params }: APIContext) {
 async function fetchBlogData(
   supabase: SupabaseClient,
   slug: string,
-): Promise<ArticlesWithRelations[] | null> {
-  const response = await supabase
+): Promise<unknown[] | null> {
+  const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+  const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+  // Start building the query
+  let query = supabase
     .from('articles')
     .select(
       `
-	  *,slug,author(title,last_name,first_name,avatar(filename_disk)),image(filename_disk)
-	  )
-	`,
+      *,slug,author(title,last_name,first_name,avatar(filename_disk)),image(filename_disk)
+      `,
     )
-    .neq('status', 'draft')
     .eq('slug', slug)
 
-  if (response.error === null && response.data !== null) {
-    return response.data as unknown as ArticlesWithRelations[]
+  // Conditionally apply the filter based on isDevMode
+  if (!isDevMode) {
+    console.log('Excluding drafts from query.')
+    query = query.neq('status', 'draft')
   }
+
+  const response = await query
+
+  if (response.error === null) {
+    return response.data
+  }
+
   console.error(response.error)
   return null
 }

apps/marketing/src/pages/blog/index.json.ts

@@ -1,28 +1,30 @@
 import type { Database } from '@/database.types'
-import type { PostgrestResponse, SupabaseClient } from '@supabase/supabase-js'
+import type { SupabaseClient } from '@supabase/supabase-js'
+
+import { getSecret } from 'astro:env/server'
 
 import { supabase } from '@/supabase'
 
-type Articles = Database['public']['Tables']['articles']['Row']
-type Authors = Database['public']['Tables']['authors']['Row']
-type Files = Database['public']['Tables']['directus_files']['Row']
+// type Articles = Database['public']['Tables']['articles']['Row']
+// type Authors = Database['public']['Tables']['authors']['Row']
+// type Files = Database['public']['Tables']['directus_files']['Row']
 
-interface ArticlesWithRelations {
-  id: Articles['id']
-  status: Articles['status']
-  sort: Articles['sort']
-  date_created: Articles['date_created']
-  date_updated: Articles['date_updated']
-  title: Articles['title']
-  excerpt: Articles['excerpt']
-  slug: Articles['slug']
-  author?:
-    | (Pick<Authors, 'title' | 'last_name' | 'first_name'> & {
-        avatar: Pick<Files, 'filename_disk'> | null
-      })
-    | null
-  image: Pick<Files, 'filename_disk'> | null
-}
+// interface ArticlesWithRelations {
+//   post_id: Articles['id']
+//   status: Articles['status']
+//   sort: Articles['sort']
+//   date_created: Articles['date_created']
+//   date_updated: Articles['date_updated']
+//   title: Articles['title']
+//   excerpt: Articles['excerpt']
+//   slug: Articles['slug']
+//   author?:
+//     | (Pick<Authors, 'first_name' | 'title' | 'last_name'> & {
+//         avatar: Pick<Files, 'filename_disk'> | null
+//       })
+//     | null,
+//   image: Pick<Files, 'filename_disk'> | null,
+// }
 const supabaseClient: SupabaseClient<Database> = supabase
 
 /**
@@ -32,20 +34,35 @@ const supabaseClient: SupabaseClient<Database> = supabase
  */
 async function fetchBlogData(
   supabase: SupabaseClient<Database>,
-): Promise<ArticlesWithRelations[] | null> {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  const response: PostgrestResponse<ArticlesWithRelations> = await supabase
+): Promise<unknown[] | null> {
+  const SUPABASE_DEV_MODE = getSecret('SUPABASE_DEV_MODE')
+  const isDevMode = SUPABASE_DEV_MODE === 'true'
+
+  console.log('isDevMode:', isDevMode)
+
+  // Start building the query
+  let query = supabase
     .from('articles')
     .select(
-      'id,status,sort,date_created,date_updated,author(title,last_name,first_name,avatar(filename_disk)),title,excerpt,slug,image(filename_disk)',
+      'id, status, sort, date_created, date_updated, title, excerpt, slug, image!inner(id,filename_disk), author!inner(id,title, first_name, last_name, avatar!inner(id,filename_disk))',
     )
-    .neq('status', 'draft')
+
     .order('date_created', { ascending: false })
 
-  // Type guard to check if response.error exists
+  // Conditionally apply the filter based on isDevMode
+  if (!isDevMode) {
+    // console.log('Excluding drafts from query.')
+    query = query.neq('status', 'draft')
+  }
+
+  const response = await query
+
+  // Log the response to see what is returned
+  // console.log('Response received:', response)
+
+  // Check for errors
   if (response.error) {
-    console.error(response.error)
+    console.error('Error fetching articles:', response.error)
     return null
   }
 
@@ -59,7 +76,7 @@ async function fetchBlogData(
 export async function GET() {
   try {
     const blogData = await fetchBlogData(supabaseClient)
-    if (!blogData || blogData.length === 0) {
+    if (!blogData) {
       console.error('Data is empty or undefined')
       return new Response(JSON.stringify({ error: 'No data found.' }), {
         status: 404,