Supaplate

https://supaplate.com/docs
Admin
Supaplate is a boilerplate code template for web projects, providing essential core features like...
Tokens:7,036
Snippets:41
Trust Score:4.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### MDX Frontmatter Structure Example

Source: https://supaplate.com/docs/blog

This is an example of the frontmatter structure used for MDX blog posts. It includes essential metadata for each blog post, such as title, description, date, category, author, and slug. The content follows the frontmatter.

```markdown
---
title: <title>
description: <description>
date: <date>
category: <category>
author: <author>
slug: <slug>
---

<content>
```

--------------------------------

### Using useTranslation Hook (React/TypeScript)

Source: https://supaplate.com/docs/settings

This example shows how to use the `useTranslation` hook from `react-i18next` to access translated strings within a React component. It also demonstrates how to fetch translated meta tags in the `loader` function using `i18next.getFixedT`.

```typescript
import { useTranslation } from 'react-i18next'

import i18next from '~/core/lib/i18next.server'

export const meta: Route.MetaFunction = ({ data }) => {
  return [
    { title: data?.title },
    { name: 'description', content: data?.subtitle },
  ]
}

export async function loader({ request }: Route.LoaderArgs) {
  const t = await i18next.getFixedT(request)
  return {
    title: t('home.title'),
    subtitle: t('home.subtitle'),
  }
}

export default function Home() {
  const { t } = useTranslation()

  return <div>{t('home.title')}</div>
}
```

--------------------------------

### Applying Dark Mode with Tailwind CSS (HTML/CSS)

Source: https://supaplate.com/docs/settings

Demonstrates how to apply dark mode styling using Tailwind CSS. By prefixing styles with `dark:`, they will only be applied when the dark mode is active. For example, `dark:bg-black` sets the background to black in dark mode.

```html
<div className="dark:bg-black"> ... </div>
```

--------------------------------

### Pre-rendering Blog Posts with React Router Config

Source: https://supaplate.com/docs/blog

This code snippet demonstrates how to configure pre-rendering for blog posts using the `prerender` function in `react-router.config.js`. It dynamically generates a list of blog post URLs to be pre-rendered at build time, alongside other essential site pages.

```javascript
// How to get a list of blog posts to prerender.
const urls = (
  await readdir(path.join(process.cwd(), 'app', 'features', 'blog', 'docs'))
)
  .filter((file) => file.endsWith('.mdx'))
  .map((file) => `/blog/${file.replace('.mdx', '')}`)

export default {
  ssr: true,
  async prerender() {
    return [
      '/blog', // The blog page
      ...urls, // The blog posts
      '/sitemap.xml', // The sitemap
      '/robots.txt', // The robots.txt file
      '/legal/terms-of-service', // The legal pages
      '/legal/privacy-policy', // The legal pages
    ]
  },
}
```

--------------------------------

### SQL: Trigger and Function for Welcome Email Queue

Source: https://supaplate.com/docs/cron

This SQL script defines a PostgreSQL function 'welcome_email' that is triggered after a new user is inserted into the 'auth.users' table. The function sends a JSON message to the 'mailer' queue using the 'pgmq.send' function, containing email template information and user data. This enables asynchronous email sending for a better user experience.

```sql
CREATE OR REPLACE FUNCTION welcome_email()
RETURNS TRIGGER
LANGUAGE PLPGSQL
SECURITY DEFINER
SET SEARCH_PATH = ''
AS $$
BEGIN
    PERFORM pgmq.send(
            queue_name => 'mailer'::text,
            msg => (json_build_object(
                'template', 'welcome'::text,
                'to', new.raw_user_meta_data ->> 'email',
                'data', row_to_json(new.*)
            ))::jsonb
        );
    RETURN NEW;
END;
$$;

CREATE TRIGGER welcome_email
AFTER INSERT ON auth.users
FOR EACH ROW
EXECUTE FUNCTION welcome_email();

```

--------------------------------

### Create PostgreSQL Trigger and Function for User Profiles

Source: https://supaplate.com/docs/authentication

This PostgreSQL code defines a function `handle_sign_up` and a trigger that executes it after a new row is inserted into the `auth.users` table. The function creates a corresponding entry in the `public.profiles` table, extracting user metadata like name and avatar URL, and setting marketing consent preferences. It handles different metadata structures based on the authentication provider.

```sql
CREATE OR REPLACE FUNCTION handle_sign_up()
RETURNS TRIGGER
LANGUAGE PLPGSQL
SECURITY DEFINER
SET SEARCH_PATH = ''
AS $$
BEGIN
    IF new.raw_app_meta_data IS NOT NULL AND new.raw_app_meta_data ? 'provider' THEN
        IF new.raw_app_meta_data ->> 'provider' = 'email' OR new.raw_app_meta_data ->> 'provider' = 'phone' THEN
            IF new.raw_user_meta_data ? 'name' THEN
                INSERT INTO public.profiles (profile_id, name, marketing_consent)
                VALUES (new.id, new.raw_user_meta_data ->> 'name', (new.raw_user_meta_data ->> 'marketing_consent')::boolean);
            ELSE
                INSERT INTO public.profiles (profile_id, name, marketing_consent)
                VALUES (new.id, 'Anonymous', TRUE);
            END IF;
        ELSE
            INSERT INTO public.profiles (profile_id, name, avatar_url, marketing_consent)
            VALUES (new.id, new.raw_user_meta_data ->> 'full_name', new.raw_user_meta_data ->> 'avatar_url', TRUE);
        END IF;
    END IF;
    RETURN NEW;
END;
$$
;

CREATE TRIGGER handle_sign_up
AFTER INSERT ON auth.users
FOR EACH ROW
EXECUTE FUNCTION handle_sign_up();

```

--------------------------------

### Theme Switcher POST Request (JavaScript)

Source: https://supaplate.com/docs/settings

This describes the functionality of the `theme-switcher.tsx` component. It sends a POST request to the `/api/settings/theme` endpoint with the selected theme as a query parameter to change the application's theme.

```javascript
// POST to /api/settings/theme?theme=... (example description, not actual code)
```

--------------------------------

### English Translation File Structure (TypeScript)

Source: https://supaplate.com/docs/settings

Defines the English translations for the application. This structure is used by `i18next` to serve localized content. The `en` object contains keys for different parts of the application, such as `home` with `title` and `subtitle`.

```typescript
// en.ts
const en = {
  home: {
    title: 'Supaplate',
    subtitle: "It's time to build!",
  },
  ...
}
```

--------------------------------

### Korean Translation File Structure (TypeScript)

Source: https://supaplate.com/docs/settings

Defines the Korean translations for the application. Similar to other language files, this structure uses `i18next` for localization. The `ko` object contains translated strings for elements like the home page title and subtitle.

```typescript
const ko: Translation = {
  home: {
    title: "슈파플레이트",
    subtitle: "빌드하는 시간이야!",
  },
  ...
};
```

--------------------------------

### Spanish Translation File Structure (TypeScript)

Source: https://supaplate.com/docs/settings

Defines the Spanish translations for the application. This structure mirrors the English translation file, providing localized strings for `i18next`. The `es` object includes translations for `home.title` and `home.subtitle`.

```typescript
// es.ts
const es: Translation = {
  home: {
    title: 'Supaplate',
    subtitle: 'Es hora de construir!',
  },
  ...
}
```

--------------------------------

### Read Locale and Theme from Cookies (TypeScript)

Source: https://supaplate.com/docs/settings

This loader function in `app/root.tsx` reads the user's preferred language (locale) and theme settings from cookies. It uses `themeSessionResolver` and `i18next.getLocale` to fetch these values. The output is an object containing the current theme and locale.

```typescript
export async function loader({ request }: Route.LoaderArgs) {
  // ...
  const [{ getTheme }, locale] = await Promise.all([
    themeSessionResolver(request),
    i18next.getLocale(request),
  ])
  return {
    theme: getTheme(),
    locale,
  }
}
```

--------------------------------

### Language Switcher POST Request (JavaScript)

Source: https://supaplate.com/docs/settings

This describes the functionality of the `lang-switcher.tsx` component. It sends a POST request to the `/api/settings/locale` endpoint with the selected language as a query parameter to change the application's locale.

```javascript
// POST to /api/settings/locale?locale=... (example description, not actual code)
```

--------------------------------

### Set Google Tag Manager Environment Variable

Source: https://supaplate.com/docs/google-analytics

To enable Google Tag Manager integration, you need to set the `VITE_GOOGLE_TAG_ID` environment variable. Obtain your Google Tag ID after creating a Google Analytics account and project.

```bash
VITE_GOOGLE_TAG_ID=""
```

--------------------------------

### Set HTML Lang and Class Attributes (TypeScript)

Source: https://supaplate.com/docs/settings

This code snippet demonstrates how to dynamically set the `lang` and `className` attributes of the `<html>` tag based on the `locale` and `theme` data obtained from the loader. It ensures the application's language and theme are reflected in the HTML structure.

```typescript
<html
  lang={data?.locale ?? 'en'}
  className={cn(theme ?? '', 'h-full')}
  dir={i18n.dir()}
>
  // ...
</html>
```

--------------------------------

### Track Events with Google Analytics

Source: https://supaplate.com/docs/google-analytics

The `trackEvent` function in `./app/core/lib/analytics.client.ts` allows you to send user actions as events to Google Analytics. This is useful for tracking button clicks, form submissions, and other user interactions. It requires the event name and optionally accepts properties for more detailed tracking.

```typescript
export default function trackEvent<T extends string>(
  eventName: T,
  properties?: Record<string, unknown>,
) {
  return window.gtag && window.gtag('event', eventName, properties)
}
```

```typescript
import { trackEvent } from '@/core/lib/analytics.client'

export function Button() {
  return (
    <button
      onClick={() => trackEvent('button_clicked', { button_name: 'Login' })}
    >
      Login
    </button>
  )
}
```

--------------------------------

### Supabase Storage Policy Definition for Avatar Bucket

Source: https://supaplate.com/docs/users

This SQL policy restricts file access within the 'avatars' Supabase Storage bucket. It ensures that only authenticated users can upload, select, update, or delete files, and crucially, that each user can only manage files named after their own user ID, preventing storage waste and unauthorized access. The policy relies on the user's authentication ID and the file's name within the specified bucket.

```sql
(
    (bucket_id = 'avatars'::text)
AND
    storage.filename(name) = (auth.uid())::text
)
```

--------------------------------

### Translation Type Definition (TypeScript)

Source: https://supaplate.com/docs/settings

Defines the TypeScript type for translations to ensure type safety. The `Translation` type specifies the structure of translation objects, including nested properties like `home` with `title` and `subtitle`. This helps catch errors when adding new translations.

```typescript
export type Translation = {
  home: {
    title: string
    subtitle: string
  }
}
```
Tokens:
Raw