BigLung Comments - Answer Overflow

import { type Config } from "tailwindcss";

const colors = require("tailwindcss/colors");

export const SECONDARY = "#E7FD32";
export const SUCCESS = "#47AA56";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    colors: {
      ...colors,
      primary: "#27465B",
      secondary: "#3CB9EA",
      tertiary: "#93C5D3",
      accent: "#C3E2E2",
      success: "#47AA56",
      backgroundInvert: "#F5F5EB",
      backgroundInvertAccent: "#d9ded7",
      "light-gray": "#E4E4E4",
      "dark-gray": "#B7BFCA",
      destructive: "#710a0b",
    },
    extend: {
      fontFamily: {
        "noto-serif": ["var(--font-noto-serif)"],
        "space-mono": ["var(--font-space-mono)"],
        "ibm-plex-mono": ["var(--font-ibm-mono)"],
        faktum: ["var(--font-faktum)"],
      },
      boxShadow: {
        outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
      },
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
      },
    },
  },
  variants: {
    extend: {
      boxShadow: ["focus"],
    },
  },
  plugins: [],
} satisfies Config;

import { type Config } from "tailwindcss";

const colors = require("tailwindcss/colors");

export const SECONDARY = "#E7FD32";
export const SUCCESS = "#47AA56";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    colors: {
      ...colors,
      primary: "#27465B",
      secondary: "#3CB9EA",
      tertiary: "#93C5D3",
      accent: "#C3E2E2",
      success: "#47AA56",
      backgroundInvert: "#F5F5EB",
      backgroundInvertAccent: "#d9ded7",
      "light-gray": "#E4E4E4",
      "dark-gray": "#B7BFCA",
      destructive: "#710a0b",
    },
    extend: {
      fontFamily: {
        "noto-serif": ["var(--font-noto-serif)"],
        "space-mono": ["var(--font-space-mono)"],
        "ibm-plex-mono": ["var(--font-ibm-mono)"],
        faktum: ["var(--font-faktum)"],
      },
      boxShadow: {
        outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
      },
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
      },
    },
  },
  variants: {
    extend: {
      boxShadow: ["focus"],
    },
  },
  plugins: [],
} satisfies Config;

3 replies

TTCTheo's Typesafe Cult

•Created by vibbin on 1/23/2023 in #questions

Best provider for single sign on with Microsoft & Next Auth?

@vibbin did you ever figure this out? I am struggling with the same issue right now

2 replies

TTCTheo's Typesafe Cult

•Created by BigLung on 8/25/2023 in #questions

Twitter link previews with t3?

import Head from "next/head";

type MetaTagsProps = {
  title: string;
  description: string;
  route: string;
  image?: string;
};

const MetaTags = (props: MetaTagsProps) => {
  const host =
    process.env.NODE_ENV === "production"
      ? "https://app.getriver.io"
      : "http://localhost:3000";
  const logo = `${host}/Icon_Neon%20Green.png`;
  const image = props.image ?? logo;
  const url = `${host}${props.route}`;

  return (
    <Head>
      {/* Twitter */}
      <meta name="twitter:card" content="summary_large_image" />{" "}
      <meta name="twitter:site" content="https://twitter.com/getriver_io" />
      <meta name="twitter:title" content={props.title} />
      <meta name="twitter:description" content={props.description} />
      <meta name="twitter:image" content={image} />

      {/* Open Graph */}
      <meta property="og:title" content={props.title} />
      <meta property="og:description" content={props.description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />
    </Head>
  );
};

export default MetaTags;

import Head from "next/head";

type MetaTagsProps = {
  title: string;
  description: string;
  route: string;
  image?: string;
};

const MetaTags = (props: MetaTagsProps) => {
  const host =
    process.env.NODE_ENV === "production"
      ? "https://app.getriver.io"
      : "http://localhost:3000";
  const logo = `${host}/Icon_Neon%20Green.png`;
  const image = props.image ?? logo;
  const url = `${host}${props.route}`;

  return (
    <Head>
      {/* Twitter */}
      <meta name="twitter:card" content="summary_large_image" />{" "}
      <meta name="twitter:site" content="https://twitter.com/getriver_io" />
      <meta name="twitter:title" content={props.title} />
      <meta name="twitter:description" content={props.description} />
      <meta name="twitter:image" content={image} />

      {/* Open Graph */}
      <meta property="og:title" content={props.title} />
      <meta property="og:description" content={props.description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
      <meta property="og:type" content="website" />
    </Head>
  );
};

export default MetaTags;