feat: Third-Party Resources

[ethan-davies]

This Pull Request introduces the addition of Third-Party resources. This tab will contain the following resources:

• Third-Party Plugins
• JavaScript Snippets
• CSS Snippets

It includes filters allowing you to sort by Desktop/Web or search by name, author, and description.

To add plugins, you would create a .json file in src/content/third-party, structured as follows:

{
    "name": "Album as Spotify Controls Background",
    "description": "Use album cover as SpotifyControls background",
    "tags": ["utility"],
    "authors": [{ "name": "Vee", "id": "343383572805058560" }],
    "dependencies": ["dependency1", "dependency2"],
    "hasPatches": false,
    "hasCommands": false,
    "required": false,
    "enabledByDefault": false,
    "target": "discordDesktop",
    "github": "", // Only required for plugins
    "code": "#vc-spotify-player {\n    --blur-amount: 2px; /* higher px = stronger blur, 0 = no blur */\n    --darken-percent: 0.8; /* 0 = album cover is not darkened, 1 = album cover is darkened fully (black) */\n}\n\n#vc-spotify-player {\n    background: transparent !important;\n    position: relative;\n}\n\n#vc-spotify-player > * {\n    position: relative;\n    z-index: 1;\n}\n\n#vc-spotify-player::after {\n    content: '';\n    position: absolute;\n    display: block;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    left: 0;\n    background: linear-gradient(rgba(0, 0, 0, var(--darken-percent)),\n            rgba(0, 0, 0, var(--darken-percent))), var(--vc-spotify-track-image);\n    background-size: cover;\n    filter: blur(var(--blur-amount));\n    clip-path: inset(0);\n}", // Only required for snippets
    "slug": "spotify",
    "type": "css-snippet"
}

Important Details:

• Use \n to flatten the code within the JSON file. Various online tools can help with this process, ensuring proper formatting.¹
• The "type" field specifies the category of the resource, which can be either a plugin, js-snippet, or css-snippet.

Screenshots

Footnotes

1. I am considering swapping this to .md so you can just use codeblocks and also add your own custom information (as nessacary) ↩

[Vendicated]

yes markdown would be way better. you can use frontmatter to specify values:

---
name: foo
description: awesome stuff
---

```js
console.log("hi");
```

[ethan-davies]

I just changed it to use markdown, now you would do something like so:

---
title: "Example Snippet"
description: "Example CSS snippet that does something"
author: "User1, User2 and User3"
target: "web"
type: "CSS Snippet"
---

<!-- Your markdown -->

[lewisakura]

should this be part of the structured content, or should we have a separate system for handling this so it's easier for users to submit, and we just SSR it into existence?