Simvolick Posts - Answer Overflow

Simvolick

•Created by Simvolick on 7/7/2023 in #questions

headless cms to use with t3 stack?

I am writing an e-commerce project and not sure what is the best way to go about it and what to use as a cms that would be intuitive and easy to use for the content people who don’t code. I am thinking of being my own cms, but that seems like too much work for no reason.

21 replies

TTCTheo's Typesafe Cult

•Created by Simvolick on 5/5/2023 in #questions

TailwindCss typescript error in config

I have a question regarding the implementation of the tailwind.config.js that uses the custom default props and has theme as a prop in the typography specification. How do you make it work in typescript environment?

typography: (theme) => ({ 

      DEFAULT: {
        css: {
          '--tw-prose-body': theme('colors.zinc.600'),
          '--tw-prose-headings': theme('colors.zinc.900'),
          '--tw-prose-links': theme('colors.teal.500'),
          '--tw-prose-links-hover': theme('colors.teal.600'),
          '--tw-prose-underline': theme('colors.teal.500 / 0.2'),
          '--tw-prose-underline-hover': theme('colors.teal.500'),
          '--tw-prose-bold': theme('colors.zinc.900'),
          '--tw-prose-counters': theme('colors.zinc.900'),
          '--tw-prose-bullets': theme('colors.zinc.900'),
          '--tw-prose-hr': theme('colors.zinc.100'),

typography: (theme) => ({ 

      DEFAULT: {
        css: {
          '--tw-prose-body': theme('colors.zinc.600'),
          '--tw-prose-headings': theme('colors.zinc.900'),
          '--tw-prose-links': theme('colors.teal.500'),
          '--tw-prose-links-hover': theme('colors.teal.600'),
          '--tw-prose-underline': theme('colors.teal.500 / 0.2'),
          '--tw-prose-underline-hover': theme('colors.teal.500'),
          '--tw-prose-bold': theme('colors.zinc.900'),
          '--tw-prose-counters': theme('colors.zinc.900'),
          '--tw-prose-bullets': theme('colors.zinc.900'),
          '--tw-prose-hr': theme('colors.zinc.100'),

The theme gives me error. Also if I do : any I get a different error that it is not a ts file.

Parameter 'theme' implicitly has an 'any' type.ts(7006)

Type annotations can only be used in TypeScript files.ts(8010)

Parameter 'theme' implicitly has an 'any' type.ts(7006)

Type annotations can only be used in TypeScript files.ts(8010)

2 replies

TTCTheo's Typesafe Cult

•Created by Simvolick on 5/3/2023 in #questions

Error with mdx file webpack parser

I am trying to integrate an MDX files that I want blog articles in. I have a component <ArticleLayout meta={meta} {...props} /> I am using a TailwindUI template as a backbone for the some of the implementation and there it works fine. https://tailwindui.com/templates/spotlight

export default (props) => <ArticleLayout meta={meta} {...props} />

export default (props) => <ArticleLayout meta={meta} {...props} />

I have this export in order to render the page like this. But in the end I get the following error:

error - ./src/pages/blog/crafting-a-design-system-for-a-multiplanetary-future/index.mdx
Module parse failed: Unexpected token (13:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| 
> export default (props) => <ArticleLayout meta={meta} {...props} />
| 
| Most companies try to stay ahead of the curve when it comes to visual design, but for Planetaria we needed to create a brand that would still inspire us 100 years from now when humanity has spread across our entire solar system.

Import trace for requested module:
./src/pages/blog/crafting-a-design-system-for-a-multiplanetary-future/index.mdx
./src/pages/blog/ lazy ^\.\/.*$ namespace object
./src/utils/blog/getAllArticles.ts

error - ./src/pages/blog/crafting-a-design-system-for-a-multiplanetary-future/index.mdx
Module parse failed: Unexpected token (13:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| 
> export default (props) => <ArticleLayout meta={meta} {...props} />
| 
| Most companies try to stay ahead of the curve when it comes to visual design, but for Planetaria we needed to create a brand that would still inspire us 100 years from now when humanity has spread across our entire solar system.

Import trace for requested module:
./src/pages/blog/crafting-a-design-system-for-a-multiplanetary-future/index.mdx
./src/pages/blog/ lazy ^\.\/.*$ namespace object
./src/utils/blog/getAllArticles.ts

I am not using webpack and don't even have a webpack config

3 replies

TTCTheo's Typesafe Cult

•Created by Simvolick on 5/1/2023 in #questions

lib folder and best practives

What do you think about lib folder? I am moving from old project and want to move

formatDate.js
generateRssFeed.js
getAllArticles.js

formatDate.js
generateRssFeed.js
getAllArticles.js

in to typescript and into ct3 structure. Any tips on best practices?

10 replies

TTCTheo's Typesafe Cult

•Created by Simvolick on 3/25/2023 in #questions

Is it just me or the search in the questions in discord is broken?

Is it just me or the search in the questions in discord is broken? It doesn't give me a single question for search and no matter what I do I get nothing

2 replies

TTCTheo's Typesafe Cult

•Created by Simvolick on 3/25/2023 in #questions

Creating multi language application

I would like to create an app that has english as the main language, but I want the user if he speaks Spanish to be able to switch through some button to a Spanish language version and go instead of / to /es and that to carry over to ever page. The question that I have is whenever I need to create a new directory in both components and in the /pages folder with /es route or what is the best way to go about it? Maybe there is already some tutorials and use cases on github of nextjs with multi language support? That would greatly help to understand how to deal with it.

8 replies

TTCTheo's Typesafe Cult

•Created by Simvolick on 3/20/2023 in #questions

devDependencies difference with dependencies in package.json

I have found the following stack overflow question, but I want more context if possible: https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies I wanna know how and for what reason tailwindcss is in devDependencies and if I want to add additional packages do I always add them to normal dependencies and in which case (not basic, for development) you add there? I see that even typescript is listed as devDep.

8 replies

TTCTheo's Typesafe Cult

•Created by Simvolick on 3/7/2023 in #questions

Any resources to learn the tRPC better? Hopefully with guides and examples?

Really struggling to learn otherwise in context of ct3 stack

18 replies

TTCTheo's Typesafe Cult

•Created by Simvolick on 3/4/2023 in #questions

tRPC and querying data from external api

I am trying to set up the following this. User writes a text in the form. He presses the button, the button puts input into tRPC and does a query(or maybe a mutation?) to send a completion request to OpenAI API and returns a result from there. I take this result and display it in the new text format bellow the button. Right now I know I have realised it incorrectly as it is not working, but I have no idea how to solve this or what is the best practice. Maybe I shouldn't be using tRPC at all.

import { z } from "zod";
import { env } from "../../../env.mjs";
import { useState } from "react";

import { createTRPCRouter, publicProcedure, protectedProcedure } from "../trpc";

import type { NextApiRequest, NextApiResponse } from 'next';
import { Configuration, OpenAIApi } from 'openai';


const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);


// router to use gpt3 openai api
export const gptRouter = createTRPCRouter({
  gptUse: publicProcedure
    .input(z.object({
      text: z.string().nullish(),
    }))
    .query(async ({ input }) => {
      const completion = await openai.createCompletion({
        model: 'gpt-3.5-turbo',
        prompt: input?.text ?? "write 'no text'",
        temperature: 0.7,
        top_p: 1,
        max_tokens: 1000,
      })
      const result = completion.data
      return result
    }),

    gtpUseMutate: publicProcedure
    .input(z.object({
      text: z.string().nullish(),
    }))
    .mutation(async req => {
      const completion = await openai.createCompletion({
        model: 'gpt-3.5-turbo',
        prompt: req.input?.text ?? "write 'no text'",
        temperature: 0.7,
        top_p: 1,
        max_tokens: 1000,
      })
      const result = completion.data
      return result
    }
    )

import { z } from "zod";
import { env } from "../../../env.mjs";
import { useState } from "react";

import { createTRPCRouter, publicProcedure, protectedProcedure } from "../trpc";

import type { NextApiRequest, NextApiResponse } from 'next';
import { Configuration, OpenAIApi } from 'openai';


const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);


// router to use gpt3 openai api
export const gptRouter = createTRPCRouter({
  gptUse: publicProcedure
    .input(z.object({
      text: z.string().nullish(),
    }))
    .query(async ({ input }) => {
      const completion = await openai.createCompletion({
        model: 'gpt-3.5-turbo',
        prompt: input?.text ?? "write 'no text'",
        temperature: 0.7,
        top_p: 1,
        max_tokens: 1000,
      })
      const result = completion.data
      return result
    }),

    gtpUseMutate: publicProcedure
    .input(z.object({
      text: z.string().nullish(),
    }))
    .mutation(async req => {
      const completion = await openai.createCompletion({
        model: 'gpt-3.5-turbo',
        prompt: req.input?.text ?? "write 'no text'",
        temperature: 0.7,
        top_p: 1,
        max_tokens: 1000,
      })
      const result = completion.data
      return result
    }
    )

45 replies

TTCTheo's Typesafe Cult

•Created by Simvolick on 11/23/2022 in #questions

No Overload matches this call with nextAuth mapping

3 replies

Gaming

Programming