Theo's Typesafe Cult

TTC

Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join

Fetching Data for Search Bar Homepage

So I'm trying to make a website with a homepage that has a search bar along with pre-computed data shown. The data is fetched through an API I would write in next.js. I want the search bar to begin showing suggestions as the user types. Assuming this is a clothes website, the search bar is used to find clothes. My question is how should I approach implementing the search bar? How do I maintain SEO? One way I'm thinking is using SSG and have all the possible clothes pre-loaded to the client? Any help is appreciated thanks!...

Good npm package for displaying weighted hypergraph? (T3 App)

Hello! Im using T3 App and looking for a good library to display weighted hypergraphs. Preferably something that has TS support and even better if it also has React 18 support. I checked out Cytoscape and Vis but they feel ancient and not very up-to-date. Are these the only viable choices? ...

Global CSS cannot be import, src directory issue

Probably a noob question, just trying the T3 stack with turbo. No changes to the code other than adding, turbo and setting environment variables. However, I am getting an issue with the global css import due to the src directory usage....

Conditional Wrap Component

This is not too much of a deep question, I just want to know if is there a more intelligent and non-complicated way of doing this, because I keep confusing myself with this alternative.. and I don't want to use a hook to do this

og image meta tag with Next.js is not working

Hey guys I am trying to generate a link preview for my hosted url, but it is not working, can someone please help me Hosted vercel deployement: https://context-gamma.vercel.app/ ...

What are different approaches to persisting the state of a page(dynamic pages included)?

On social media sites like instagram, let's say we scroll down a big list of comments and open the profile page for one of the commentors. Now if we navigate back to the comments page again(using back button presumably) the whole page's state is reset, the comments are loaded again(maybe cached), the position on the page we scrolled to(the comment whose commentor's profile we opened) is lost. It would be a hassle to scroll back to that comment again. So, how do apps mitigate this behaviour? I'd...

chrome rendering fuzzy bold fonts

yo, i've been having this weird issue where chrome renders out any imported font all fuzzy & makes it look like it has a slight text-shadow super strange because it looks completely fine in firefox top is chrome, bottom is firefox...

PNMP and NPM

I've read up on this a bit but could someone drill it down for me? pnmp doesn't install anything unless specificed in package.json, does this mean you have to manually write the package to package.json so it installs it? I also read something about pruning being different with pnpm. Can someone give a quick run down on why pnpm and why not. Cheers

Next API Route design

For something like CRUD operations is it best practice to have a route (separate file) for each operation or have it all in one route (single file)?

T3 Authentication (middleware vs client-side)

Multiple questions: 1. Is there a reason why T3 is set up with Database session authentication, which doesn't allow for middleware usage? 2. What are the benefits of using database sessions instead of JWT sessions?...

Assigning Default Custom Components to HTML Elements in Astro

I'm using tailwind in Astro with mdx content so I want to setup default tailwind classes for the HTML rendered from markdown. I've switched from file based routing to dynamic routes like this: https://docs.astro.build/en/guides/markdown-content/#example-dynamic-page-routing So I can then set my custom components in one place like this: https://docs.astro.build/en/guides/markdown-content/#custom-components-with-imported-mdx Ideally I would like to be able to pass props into the components when I set them up so I can use a generic Heading component that takes a size prop to render as H1, H2, H3, etc......

When does _count exist in prisma?

What's the difference between post and category that the category has a _count field available? here's the relevant parts in the schema ```prisma...

reduce initial response time

Im building app with T3 stack but initial response time if I enable SSR in trpc is pretty slow. What usually causes it? Im using the whole stack. What are the ways to improve it? https://cryptosito.vercel.app/ This is live website...

How do i find my previous question if i don't remember how it is worded.

Random, but someone posted a useful link to a question i asked. I can't find it tho 😦

How to check if type is array?

I have the following interface ```ts interface IFilterOptions { price: { min: number,...

How to make a trpc request wait on another hook

I basically have a state that is populated from a query param then an API call (i used context before and now jotai) but it is critical to populate that state first before issuing a following trpc call that will fetch something. ``` // store.ts export const currentGuildAtom = atom<DiscordGuildProfile | null>(null);...

UI Primitives for svlete

I'm bootstrapping a new svelte project and I was curious if there was a library that is similar to radix primitives? I want to still own my design system, but I don't want to design so many components.

Typescript doesn't show which prop should be provided

My component looks like this: ``` const ToggleGroup = React.forwardRef< HTMLDivElement, React.ComponentPropsWithRef<typeof RadixToggleGroup.Root> & {...

Pagination for multiple items

Let's say I have 100 000 rows of data in my database and I have a REST API to query these. Obviously I can't query the 100 000 rows at once so ideally I want to have around 25 rows in my UI present and 25 on the next page and so on. Question is, how to do this in an efficient way? How to request the right amount from the server and so on Thanks...

nextauth deployed in gcp no_secret

Hi im currently deploying my app into gcp and somehow it keep saying NO_SECRET in the logs i tried setting up variables in .env with 1. NEXTAUTH_SECRET (and nextauth will automatically get the secret) 2. set custom variables like MY_SECRET then define it in [...nextauth].ts secret: process.env.MY_SECRET...