https://github.com/ushie/discord-user-popout-svelte

A Discord user pop-out component for SvelteKit
https://github.com/ushie/discord-user-popout-svelte

discord discord-component discord-svelte discord-svelte-component discord-user discord-user-popout svelte svelte-component sveltekit

Last synced: 26 days ago
JSON representation

A Discord user pop-out component for SvelteKit

• Host: GitHub
• URL: https://github.com/ushie/discord-user-popout-svelte
• Owner: Ushie
• License: lgpl-3.0
• Created: 2023-10-18T08:49:39.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-02T23:31:51.000Z (3 months ago)
• Last Synced: 2024-12-02T08:24:15.353Z (about 1 month ago)
• Topics: discord, discord-component, discord-svelte, discord-svelte-component, discord-user, discord-user-popout, svelte, svelte-component, sveltekit
• Language: TypeScript
• Homepage: https://discord-user-popout-svelte.vercel.app
• Size: 1.07 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Discord User Popout Svelte

[![npm](https://img.shields.io/npm/v/discord-user-popout-svelte)](https://www.npmjs.com/package/discord-user-popout-svelte)

![npm](https://img.shields.io/npm/l/discord-user-popout-svelte)

A Discord user pop-out component for SvelteKit

## Installation

```sh

pnpm add discord-user-popout-svelte

```

## Usage

```svelte

    import { getUser, Profile } from "discord-user-popout-svelte";

    import { onMount } from "svelte";

    let user = null;

    onMount(async () => {

        user = await getUser(399862294143696897n);

    });

{#if user}

    

{/if}

```

> [!Note]

> You need to be in the [Lanyard Discord server](https://discord.com/invite/WScAm7vNGF) for this to work

## Developing

1. Clone the repository

    ```sh

    git clone https://github.com/Ushie/discord-user-popout-svelte.git && cd discord-user-popout-svelte

    ```

2. Install dependencies

    ```sh

    pnpm install

    ```

3. Start development

    ```sh

    pnpm run dev

    # or start the server and open the app in a new browser tab

    pnpm run dev -- --open

    ```

    Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```sh

pnpm run package

```

## Credits

-   Dustin @ https://dstn.to/ - [Discord User/CDN/Assets API](https://gist.github.com/dustinrouillard/04be36180ed80db144a4857408478854)

-   Panley @ https://pa.nley.contact/ - Inspiration & Base CSS