Aditya Kirad Posts - Answer Overflow

Aditya Kirad

Explore posts from servers

RReactiflux DIAdiscord.js - Imagine an app KPCKevin Powell - Community SIASapphire - Imagine a framework TTCTheo's Typesafe Cult

Posts Comments

KPCKevin Powell - Community

•Created by Aditya Kirad on 6/12/2024 in #front-end

background individual property not working similar to background shorthand

  background: 
    radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#ffa516);

  background: 
    radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#ffa516);

background-image: 
  radial-gradient(farthest-side,#ffa516 94%,#0000),
  conic-gradient(#0000 30%,#ffa516);
background-position: top center;
background-size: 8px 8px;
background-repeat: no-repeat;

background-image: 
  radial-gradient(farthest-side,#ffa516 94%,#0000),
  conic-gradient(#0000 30%,#ffa516);
background-position: top center;
background-size: 8px 8px;
background-repeat: no-repeat;

I don't why they are not giving the same results here are the jsfiddles where these properties are being used https://jsfiddle.net/nmf1t3v8/ https://jsfiddle.net/q6kvw290/

2 replies

TTCTheo's Typesafe Cult

•Created by Aditya Kirad on 3/22/2024 in #questions

redirecting to custom error page if auth is canceled

hey folks I'm using discord for auth in my t3 app I want user to redirected to a custom error page if oauth is cancelled so I added

pages: {
  error: "/oauth/error
}

pages: {
  error: "/oauth/error
}

to authOption but when I cancel the oauth the user is get redirected to /api/auth/signin?error=Callback instead

2 replies

TTCTheo's Typesafe Cult

•Created by Aditya Kirad on 1/11/2024 in #questions

setuping prettier and eslint with new next app

3 replies

TTCTheo's Typesafe Cult

•Created by Aditya Kirad on 12/23/2023 in #questions

Loading UI not showing

hey folks I'm using the T3 stack with app router I'm fetching some data and on the basis of data I'm generating the component I have wrapped that in a Suspense and I provided a fallback also but until the components aren't ready the loading UI doesn't shows up the page loads with full content here is my code

import { redirect } from "next/navigation";
import { Suspense } from "react";
import { getServerAuthSession } from "@/server/auth";
import { api } from "@/trpc/server";
import { Container, Grid, Heading } from "@radix-ui/themes";
import GuildCard, { LoadingGuildCard } from "@/app/_components/GuildCard";

export default async function Page() {
  const session = await getServerAuthSession();
  if (!session || !session.user) {
    redirect("/");
  }
  const discord = await api.discord.getGuilds.query({
    userId: session.user.id,
  });

  return (
    <Container size="3" mx="4">
      <Heading className="mt-rx-8 text-center">Select a server</Heading>
      <Grid className="mt-rx-8 gap-rx-4 md:grid-cols-2 lg:grid-cols-3">
        <Suspense fallback={<LoadingGuildCard />}>
          {discord?.guilds?.map((guild) => (
            <GuildCard key={guild.id} guild={guild} />
          ))}
        </Suspense>
      </Grid>
    </Container>
  );
}

import { redirect } from "next/navigation";
import { Suspense } from "react";
import { getServerAuthSession } from "@/server/auth";
import { api } from "@/trpc/server";
import { Container, Grid, Heading } from "@radix-ui/themes";
import GuildCard, { LoadingGuildCard } from "@/app/_components/GuildCard";

export default async function Page() {
  const session = await getServerAuthSession();
  if (!session || !session.user) {
    redirect("/");
  }
  const discord = await api.discord.getGuilds.query({
    userId: session.user.id,
  });

  return (
    <Container size="3" mx="4">
      <Heading className="mt-rx-8 text-center">Select a server</Heading>
      <Grid className="mt-rx-8 gap-rx-4 md:grid-cols-2 lg:grid-cols-3">
        <Suspense fallback={<LoadingGuildCard />}>
          {discord?.guilds?.map((guild) => (
            <GuildCard key={guild.id} guild={guild} />
          ))}
        </Suspense>
      </Grid>
    </Container>
  );
}

14 replies

TTCTheo's Typesafe Cult

•Created by Aditya Kirad on 12/21/2023 in #questions

need help with customizing error page if auth is failed

hey folks I'm using next-auth NextJs 14 with app router can anyone tell me how can I customize the default error page if the auth is failed

12 replies

DIAdiscord.js - Imagine an app

•Created by Aditya Kirad on 12/21/2023 in #djs-questions

need help with building dashboard for discord bot

hey, folks I'm building web dashboard for my discord bot using this code I'm gettings all the guilds in which either user can invite or control the bot

const userGuilds = await axios.get(`${env.BASE_DISCORD_API}/users/@me/guilds`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

const userGuildParsed = guildSchema.safeParse(userGuilds.data);

const guildsWithPermissions = userGuildParsed.data.filter(
        ({ permissions }) =>
          (parseInt(permissions) & 0x20) === 0x20 ||
          (parseInt(permissions) & 0x8) === 0x8,
      );

const userGuilds = await axios.get(`${env.BASE_DISCORD_API}/users/@me/guilds`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

const userGuildParsed = guildSchema.safeParse(userGuilds.data);

const guildsWithPermissions = userGuildParsed.data.filter(
        ({ permissions }) =>
          (parseInt(permissions) & 0x20) === 0x20 ||
          (parseInt(permissions) & 0x8) === 0x8,
      );

but now I have problem how can I know the guild in which bot is there and not there do I have also get the botGuilds and compare it with guildWithPermissions

2 replies

SIASapphire - Imagine a framework

•Created by Aditya Kirad on 12/21/2023 in #discordjs-support

need help with building dashboard for discord bot

hey, folks I'm building web dashboard for my discord bot using this code I'm gettings all the guilds in which either user can invite or control the bot

const userGuilds = await axios.get(`${env.BASE_DISCORD_API}/users/@me/guilds`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

const userGuildParsed = guildSchema.safeParse(userGuilds.data);

const guildsWithPermissions = userGuildParsed.data.filter(
        ({ permissions }) =>
          (parseInt(permissions) & 0x20) === 0x20 ||
          (parseInt(permissions) & 0x8) === 0x8,
      );

const userGuilds = await axios.get(`${env.BASE_DISCORD_API}/users/@me/guilds`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

const userGuildParsed = guildSchema.safeParse(userGuilds.data);

const guildsWithPermissions = userGuildParsed.data.filter(
        ({ permissions }) =>
          (parseInt(permissions) & 0x20) === 0x20 ||
          (parseInt(permissions) & 0x8) === 0x8,
      );

but now I have problem how can I know the guild in which bot is there and not there do I have also get the botGuilds and compare it with guildWithPermissions

2 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 12/13/2023 in #front-end

px and accessibility

Hey folks I came across this component library by radix called @radix-ui/themes they use px for most of the css property like font-size isn't px bad for accessibility or am I missing something

3 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 12/11/2023 in #front-end

browser not understanding css correctly

31 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 10/16/2023 in #front-end

problem when using javascript to get the actual viewport height

hey folks this is my css

main>div {
  height: 100vh;
  height: calc(var('--vh', 1vh) * 100);
}

main>div {
  height: 100vh;
  height: calc(var('--vh', 1vh) * 100);
}

and this is my javascript

  window.addEventListener('resize', () => {
    const vh = window.innerHeight * 0.01;

    document.documentElement.style.setProperty('--vh', `${vh}px`);
})

  window.addEventListener('resize', () => {
    const vh = window.innerHeight * 0.01;

    document.documentElement.style.setProperty('--vh', `${vh}px`);
})

to get the actual viewport height but when I do scrolling I get a janky behaviour

29 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 8/21/2023 in #front-end

carousel not taking height automatically.

hey folks here is my pen. https://codepen.io/adityakirad/pen/zYyxNMN in this I have to explicitly set the carousel container height which I don't want I want it to take space automatically

9 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 8/1/2023 in #front-end

need help in switching `px` based media query to `em` based media query

Hey, folks after finding out that em is better unit to use with media-query instead of px I have decided to switch from px to em based mediq query. So, lets say I have this media query in px

@media (max-width: 868px) {
  .......
}

@media (max-width: 868px) {
  .......
}

so, can I write it like this in em assuming user root font-size is 16px

@media (max-width: 54.25em) {
  .......
}

@media (max-width: 54.25em) {
  .......
}

44 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 7/30/2023 in #front-end

how to visually hide a text for people which are not screen reader

So in this video of kevin https://www.youtube.com/watch?v=HbBMp6yUXO0&t=86s&pp=ygUiY3JlYXRpbmcgYSByZXNwb25zaXZlIG5hdmJhciBrZXZpbg%3D%3D he created a button and added the text menu and a background-image to it and after doing this he added the sr-only class due to which for normal people the text was hidden but we can still the background-image and text was still there for screen readers but in this video he didn't show the code he used in the sr-only class

8 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 7/26/2023 in #front-end

em and rem units with media queries

Hey folks in one of kevin video i saw him using em and rem units with media queries for setting max-width, min-width etc. in them why is that don't we require px unit to set the breakpoints

8 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 7/25/2023 in #front-end

click event listener automatically triggering

hey folks can anyone check this pen out the click event listener attached to slider in this code is automatically triggering which is supposed to only trigger when I click the slider. https://codepen.io/adityakirad/pen/oNQPEGW

5 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 7/8/2023 in #front-end

need help in converting the single line typewriter effect to multiline typewriter effect

hey folks this is my code currently this is single line typewriter effect but i want multiline typewriter effect i mean one line is typed then if the content is not fitting in the single line then it jumps to next line and typewriter effect continues https://play.tailwindcss.com/oNwPJousIY

1 replies

KPCKevin Powell - Community

•Created by Aditya Kirad on 6/9/2023 in #front-end

SVG still showing when the container height is 0

4 replies

Gaming

Programming