kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-12 23:45:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

website: migrate to astro and add plugin docs

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2025-08-15 21:06:33 +06:00
parent dffd494d4a
commit 92c05a51e1
102 changed files with 6816 additions and 4725 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
website/.eslintignore
View File

@ -1,13 +0,0 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

31
website/.eslintrc.cjs
View File

@ -1,31 +0,0 @@
/** @type { import("eslint").Linter.Config } */
module.exports = {
root: true,
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:svelte/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
extraFileExtensions: ['.svelte']
},
env: {
browser: true,
es2017: true,
node: true
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
]
};

33
website/.gitignore vendored
View File

@ -1,11 +1,24 @@
.DS_Store # build output
node_modules dist/
/build
/.svelte-kit # generated types
/package .astro/
# dependencies
node_modules/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# environment variables
.env .env
.env.* .env.production
!.env.example
vite.config.js.timestamp-* # macOS-specific files
vite.config.ts.timestamp-* .DS_Store
.netlify
# jetbrains setting folder
.idea/

2
website/.node-version
View File

@ -1 +1 @@
20.11.0 22.17.0

1
website/.npmrc
View File

@ -1 +0,0 @@
engine-strict=true

4
website/.prettierignore
View File

@ -1,4 +0,0 @@
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

8
website/.prettierrc
View File

@ -1,8 +0,0 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

4
website/.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,4 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
website/.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

120
website/.vscode/settings.json vendored
View File

@ -1,120 +0,0 @@
{
"prettier.documentSelectors": [
"**/*.svelte"
],
"tailwindCSS.classAttributes": [
"class",
"accent",
"active",
"animIndeterminate",
"aspectRatio",
"background",
"badge",
"bgBackdrop",
"bgDark",
"bgDrawer",
"bgLight",
"blur",
"border",
"button",
"buttonAction",
"buttonBack",
"buttonClasses",
"buttonComplete",
"buttonDismiss",
"buttonNeutral",
"buttonNext",
"buttonPositive",
"buttonTextCancel",
"buttonTextConfirm",
"buttonTextFirst",
"buttonTextLast",
"buttonTextNext",
"buttonTextPrevious",
"buttonTextSubmit",
"caretClosed",
"caretOpen",
"chips",
"color",
"controlSeparator",
"controlVariant",
"cursor",
"display",
"element",
"fill",
"fillDark",
"fillLight",
"flex",
"flexDirection",
"gap",
"gridColumns",
"height",
"hover",
"inactive",
"indent",
"justify",
"meter",
"padding",
"position",
"regionAnchor",
"regionBackdrop",
"regionBody",
"regionCaption",
"regionCaret",
"regionCell",
"regionChildren",
"regionChipList",
"regionChipWrapper",
"regionCone",
"regionContent",
"regionControl",
"regionDefault",
"regionDrawer",
"regionFoot",
"regionFootCell",
"regionFooter",
"regionHead",
"regionHeadCell",
"regionHeader",
"regionIcon",
"regionInput",
"regionInterface",
"regionInterfaceText",
"regionLabel",
"regionLead",
"regionLegend",
"regionList",
"regionListItem",
"regionNavigation",
"regionPage",
"regionPanel",
"regionRowHeadline",
"regionRowMain",
"regionSummary",
"regionSymbol",
"regionTab",
"regionTrail",
"ring",
"rounded",
"select",
"shadow",
"slotDefault",
"slotFooter",
"slotHeader",
"slotLead",
"slotMessage",
"slotMeta",
"slotPageContent",
"slotPageFooter",
"slotPageHeader",
"slotSidebarLeft",
"slotSidebarRight",
"slotTrail",
"spacing",
"text",
"track",
"transition",
"width",
"zIndex"
]
}

60
website/README.md
View File

@ -1,38 +1,46 @@
# create-svelte # Astro Starter Kit: Basics
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte). ```sh
pnpm create astro@latest -- --template basics
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
pnpm create svelte@latest
# create a new project in my-app
pnpm create svelte@latest my-app
``` ```
## Developing > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
Once you've created a project and installed dependencies with `pnpm install` (or `pnpm install` or `yarn`), start a development server: ## 🚀 Project Structure
```bash Inside of your Astro project, you'll see the following folders and files:
pnpm run dev
# or start the server and open the app in a new browser tab ```text
pnpm run dev -- --open /
├── public/
│ └── favicon.svg
├── src
│   ├── assets
│   │   └── astro.svg
│   ├── components
│   │   └── Welcome.astro
│   ├── layouts
│   │   └── Layout.astro
│   └── pages
│   └── index.astro
└── package.json
``` ```
## Building To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
To create a production version of your app: ## 🧞 Commands
```bash All commands are run from the root of the project, from a terminal:
pnpm run build
```
You can preview the production build with `pnpm run preview`. | Command | Action |
| :------------------------ | :----------------------------------------------- |
| `pnpm install` | Installs dependencies |
| `pnpm dev` | Starts local dev server at `localhost:4321` |
| `pnpm build` | Build your production site to `./dist/` |
| `pnpm preview` | Preview your build locally, before deploying |
| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` |
| `pnpm astro -- --help` | Get help using the Astro CLI |
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. ## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

52
website/astro.config.mjs Normal file
View File

@ -0,0 +1,52 @@
// @ts-check
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
import react from "@astrojs/react";
import mdx from "@astrojs/mdx";
import rehypeSlug from "rehype-slug";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import pagefind from "astro-pagefind";
// https://astro.build/config
export default defineConfig({
vite: {
plugins: [tailwindcss()],
},
markdown: {
syntaxHighlight: "shiki",
shikiConfig: {
langAlias: {
hetu_script: "javascript",
},
},
gfm: true,
rehypePlugins: [
[rehypeSlug, {}],
[
rehypeAutolinkHeadings,
{
behavior: "wrap", // Adds the link at the end of the heading
properties: {
className: ["heading-link"], // Add a class for styling
"aria-hidden": "true",
},
content: {
// Optional: Use an SVG icon or text for the link
type: "element",
tagName: "span",
properties: { className: ["icon", "icon-link"] },
children: [{ type: "text", value: " #" }],
},
},
],
],
},
integrations: [react(), mdx(), pagefind()],
redirects: {
"/docs": "/docs/get-started/introduction",
"/docs/get-started": "/docs/get-started/introduction",
"/docs/developing-plugins": "/docs/developing-plugins/introduction",
"/docs/plugin-apis": "/docs/plugin-apis/webview",
"/docs/reference": "/docs/reference/models",
},
});

93
website/package.json
View File

@ -1,74 +1,39 @@
{ {
"name": "website", "name": "website",
"version": "1.0.0",
"private": true,
"type": "module", "type": "module",
"version": "0.0.1",
"scripts": { "scripts": {
"dev": "vite dev", "dev": "astro dev",
"build": "vite build", "build": "astro build",
"preview": "vite preview", "preview": "astro preview",
"test": "playwright test", "astro": "astro"
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"devDependencies": {
"@playwright/test": "^1.41.2",
"@skeletonlabs/skeleton": "2.8.0",
"@skeletonlabs/tw-plugin": "0.3.1",
"@sveltejs/adapter-cloudflare": "^4.1.0",
"@sveltejs/kit": "^2.5.0",
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@tailwindcss/typography": "0.5.10",
"@types/eslint": "8.56.0",
"@types/node": "^20.11.16",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"autoprefixer": "10.4.17",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"mdsvex": "^0.11.0",
"postcss": "8.4.35",
"prettier": "^3.2.5",
"prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.10",
"svelte-check": "^3.6.3",
"tailwindcss": "3.4.1",
"tslib": "^2.6.2",
"typescript": "^5.3.3",
"vite": "^5.1.0",
"vite-plugin-tailwind-purgecss": "0.2.0"
}, },
"dependencies": { "dependencies": {
"@floating-ui/dom": "1.6.1", "@astrojs/mdx": "^4.3.3",
"@fortawesome/free-brands-svg-icons": "^6.5.1", "@astrojs/react": "^4.3.0",
"@octokit/openapi-types": "^22.2.0", "@octokit/rest": "^22.0.0",
"@octokit/rest": "^21.0.2", "@skeletonlabs/skeleton-react": "^1.2.4",
"date-fns": "^3.3.1", "@tailwindcss/vite": "^4.1.11",
"highlight.js": "11.9.0", "@types/react": "^19.1.9",
"lucide-svelte": "^0.323.0", "@types/react-dom": "^19.1.7",
"mdsvex-relative-images": "^1.0.3", "astro": "^5.12.8",
"rehype-auto-ads": "^1.2.0", "astro-pagefind": "^1.8.3",
"date-fns": "^4.1.0",
"markdown-it": "^14.1.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-icons": "^5.5.0",
"rehype-autolink-headings": "^7.1.0", "rehype-autolink-headings": "^7.1.0",
"rehype-slug": "^6.0.0", "rehype-slug": "^6.0.0",
"remark-container": "^0.1.2", "sanitize-html": "^2.17.0",
"remark-external-links": "^9.0.1", "shiki": "^3.9.2",
"remark-gfm": "^4.0.0", "tailwindcss": "^4.1.11",
"remark-github": "^12.0.0", "usehooks-ts": "^3.1.1"
"remark-reading-time": "^1.0.1",
"svelte-fa": "^4.0.2",
"svelte-markdown": "^0.4.1"
}, },
"packageManager": "pnpm@10.4.0+sha512.6b849d0787d97f8f4e1f03a9b8ff8f038e79e153d6f11ae539ae7c435ff9e796df6a862c991502695c7f9e8fac8aeafc1ac5a8dab47e36148d183832d886dd52", "devDependencies": {
"pnpm": { "@skeletonlabs/skeleton": "^3.1.7",
"onlyBuiltDependencies": [ "@tailwindcss/typography": "^0.5.16",
"@fortawesome/fontawesome-common-types", "@types/markdown-it": "^14.1.2",
"@fortawesome/free-brands-svg-icons", "@types/sanitize-html": "^2.16.0"
"@sveltejs/kit",
"esbuild",
"svelte-preprocess"
]
} }
} }

12
website/playwright.config.ts
View File

@ -1,12 +0,0 @@
import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
webServer: {
command: 'npm run build && npm run preview',
port: 4173
},
testDir: 'tests',
testMatch: /(.+\.)?(test|spec)\.[jt]s/
};
export default config;

6899
website/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

4
website/pnpm-workspace.yaml Normal file
View File

@ -0,0 +1,4 @@
onlyBuiltDependencies:
- '@tailwindcss/oxide'
- esbuild
- sharp

6
website/postcss.config.cjs
View File

@ -1,6 +0,0 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

36
website/posts/from-idea-to-impact.md
View File

@ -1,36 +0,0 @@
---
title: From Idea to Impact
author: Prottoy Roy
date: 2024-12-22
published: true
cover_img: /images/from-idea-to-impact/cover.jpg
---
> An school magazine article by the beloved brother of the founder of the Spotube app
In the vibrant city of Narayanganj, Dhaka, Bangladesh, a young man named Kingkor Roy Tirtho was carving out his path in the world of technology. Currently a second-year Computer Science and Engineering (CSE) student at East West University, Kingkor had always been captivated by the magic of coding. From a young age, he spent countless hours tinkering with computers, teaching himself programming languages and exploring the digital realm.
Kingkor's passion wasn't just about writing code; it was about solving problems and creating innovative solutions. Inspired by the way technology could enhance everyday life, he dreamed of building apps that would bring joy and convenience to users. His dedication was evident; he often participated in hackathons and coding competitions, where he showcased his talent and creativity.
The turning point in his journey came when he envisioned an app that would revolutionize music streaming. With millions of people seeking accessible music, he wanted to create a platform that could bridge gaps and provide a seamless experience. Thus, Spotube was born.
Initially, Kingkor faced numerous challenges. Balancing his academic responsibilities with app development was no easy feat. There were nights filled with coding, debugging, and sleepless hours fueled by caffeine and determination. Despite setbacks and moments of self-doubt, Kingkor remained resilient. He sought feedback, learned from criticisms, and continually iterated on his project.
As Spotube gained traction, it garnered attention for its user-friendly interface and innovative features. Kingkor’s ability to blend technical skills with an understanding of user needs made the app a hit among music lovers. He received positive reviews, not just for the functionality, but for the passion evident in his work.
Kingkor’s story is one of perseverance and innovation. He embodies the spirit of a new generation of tech enthusiasts who believe that with dedication, anything is possible. His journey serves as an inspiration to his peers at East West University and beyond, reminding them that the intersection of creativity and technology can lead to remarkable achievements.
Today, Kingkor continues to evolve as a developer, always looking for ways to improve Spotube and explore new ideas. His story illustrates that genius isn't just about raw talent; it's about hard work, resilience, and the willingness to dream big. Kingkor Roy Tirtho is a shining example of what can be achieved when passion meets perseverance, and he is just getting international attentions.
Here is some key features of Spotube:
1. **Seamless Music Streaming**: Spotube offers a smooth streaming experience with a vast library of tracks, allowing users to easily find and play their favorite songs.
1. **Offline Listening**: Users can download their favorite tracks for offline playback, making it convenient to enjoy music anytime, anywhere, without relying on an internet connection.
1. **User-Friendly Interface**: The app is designed with an intuitive interface, making navigation easy for users of all ages. Its clean layout ensures a pleasant user experience.
1. **Cross-Platform Compatibility**: Spotube is accessible on multiple devices, enabling users to enjoy their music on smartphones, tablets, and desktops seamlessly.
1. **Personalized Playlists**: Users can create and manage their playlists, helping them curate their listening experience based on their mood and preferences.
1. **Social Sharing Features**: The app allows users to share their favorite tracks and playlists with friends and family, fostering a community of music lovers.
1. **Regular Updates**: Spotube is continually updated with new features and improvements based on user feedback, reflecting Kingkor's commitment to enhancing the app's performance and user satisfaction.
1. **Global Reach**: With its growing popularity, Spotube is gaining attention worldwide, attracting users from various countries and cultures, showcasing Kingkor’s vision of accessible music for everyone. He's recently got mentioned in a Spanish well known magazine for his invention.
As Spotube continues to evolve, Kingkor Roy Tirtho's innovative approach is positioning him and his app as significant players in the music streaming landscape, capturing the attention of users and industry experts alike.

0
website/static/android-chrome-192x192.png → website/public/android-chrome-192x192.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
website/static/android-chrome-512x512.png → website/public/android-chrome-512x512.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

0
website/static/apple-touch-icon.png → website/public/apple-touch-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
website/public/docs/getting-started/installing-plugins/navigate.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

0
website/static/favicon-16x16.png → website/public/favicon-16x16.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 390 B

After

Width:  |  Height:  |  Size: 390 B

0
website/static/favicon-32x32.png → website/public/favicon-32x32.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 777 B

After

Width:  |  Height:  |  Size: 777 B

0
website/static/favicon.ico → website/public/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

0
website/static/fonts/AbrilFatface.ttf → website/public/fonts/AbrilFatface.ttf
View File

0
website/static/images/spotube-logo.png → website/public/images/spotube-logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 89 KiB

0
website/static/images/spotube-logo.svg → website/public/images/spotube-logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
website/static/manifest.json → website/public/manifest.json
View File

0
website/static/robots.txt → website/public/robots.txt
View File

26
website/src/app.d.ts vendored
View File

@ -1,26 +0,0 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
// and what to do when importing types
declare namespace App {
// interface Locals {}
// interface PageData {}
// interface Error {}
// interface Platform {}
interface Platform {
env: {
COUNTER: DurableObjectNamespace;
};
context: {
waitUntil(promise: Promise<any>): void;
};
caches: CacheStorage & { default: Cache };
}
}
declare namespace globalThis {
declare var adsbygoogle: any[];
}
declare module "@fortawesome/pro-solid-svg-icons/index.es" {
export * from "@fortawesome/pro-solid-svg-icons";
}

26
website/src/app.html
View File

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<!-- favicon 32x32 -->
<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
<!-- favicon 16x16 -->
<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
<meta name="viewport" content="width=device-width" />
<!-- Apple icons -->
<link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" />
<!-- Android Chrome -->
<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6419300932495863"
data-overlays="bottom" crossorigin="anonymous"></script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" data-theme="wintry">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

23
website/src/app.postcss
View File

@ -1,23 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;
/* vintage theme */
@font-face {
font-family: 'Abril Fatface';
src: url('/fonts/AbrilFatface.ttf');
font-display: swap;
}
.text-stroke {
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000,
-1px 0 0 #000,
1px 0 0 #000,
0 -1px 0 #000,
0 1px 0 #000;
}

75
website/src/lib/index.ts → website/src/collections/app.ts
View File

@ -1,66 +1,67 @@
import type { IconType } from "react-icons";
import { import {
faAndroid, FaAndroid,
faApple, FaApple,
faDebian, FaDebian,
faFedora, FaFedora,
faOpensuse, FaOpensuse,
faUbuntu, FaUbuntu,
faWindows, FaWindows,
faRedhat, FaRedhat,
} from "@fortawesome/free-brands-svg-icons"; } from "react-icons/fa6";
import type { IconDefinition } from "@fortawesome/free-brands-svg-icons/index"; import { LuHouse, LuNewspaper, LuDownload, LuBook } from "react-icons/lu";
import { Home, Newspaper, Download } from "lucide-svelte";
export const routes: Record<string, [string, any]> = { export const routes: Record<string, [string, IconType|null]> = {
"/": ["Home", Home], "/": ["Home", LuHouse],
"/blog": ["Blog", Newspaper], "/blog": ["Blog", LuNewspaper],
"/downloads": ["Downloads", Download], "/docs": ["Docs", LuBook],
"/downloads": ["Downloads", LuDownload],
"/about": ["About", null], "/about": ["About", null],
}; };
const releasesUrl = const releasesUrl =
"https://github.com/KRTirtho/Spotube/releases/latest/download"; "https://github.com/KRTirtho/Spotube/releases/latest/download";
export const downloadLinks: Record<string, [string, IconDefinition[]]> = { export const downloadLinks: Record<string, [string, IconType[]]> = {
"Android Apk": [`${releasesUrl}/Spotube-android-all-arch.apk`, [faAndroid]], "Android Apk": [`${releasesUrl}/Spotube-android-all-arch.apk`, [FaAndroid]],
"Windows Executable": [ "Windows Executable": [
`${releasesUrl}/Spotube-windows-x86_64-setup.exe`, `${releasesUrl}/Spotube-windows-x86_64-setup.exe`,
[faWindows], [FaWindows],
], ],
"macOS Dmg": [`${releasesUrl}/Spotube-macos-universal.dmg`, [faApple]], "macOS Dmg": [`${releasesUrl}/Spotube-macos-universal.dmg`, [FaApple]],
"Ubuntu, Debian": [ "Ubuntu, Debian": [
`${releasesUrl}/Spotube-linux-x86_64.deb`, `${releasesUrl}/Spotube-linux-x86_64.deb`,
[faUbuntu, faDebian], [FaUbuntu, FaDebian],
], ],
"Fedora, Redhat, Opensuse": [ "Fedora, Redhat, Opensuse": [
`${releasesUrl}/Spotube-linux-x86_64.rpm`, `${releasesUrl}/Spotube-linux-x86_64.rpm`,
[faFedora, faRedhat, faOpensuse], [FaFedora, FaRedhat, FaOpensuse],
], ],
"iPhone Ipa": [`${releasesUrl}/Spotube-iOS.ipa`, [faApple]], "iPhone Ipa": [`${releasesUrl}/Spotube-iOS.ipa`, [FaApple]],
}; };
export const extendedDownloadLinks: Record< export const extendedDownloadLinks: Record<
string, string,
[string, IconDefinition[], string] [string, IconType[], string]
> = { > = {
Android: [`${releasesUrl}/Spotube-android-all-arch.apk`, [faAndroid], "apk"], Android: [`${releasesUrl}/Spotube-android-all-arch.apk`, [FaAndroid], "apk"],
Windows: [ Windows: [
`${releasesUrl}/Spotube-windows-x86_64-setup.exe`, `${releasesUrl}/Spotube-windows-x86_64-setup.exe`,
[faWindows], [FaWindows],
"exe", "exe",
], ],
macOS: [`${releasesUrl}/Spotube-macos-universal.dmg`, [faApple], "dmg"], macOS: [`${releasesUrl}/Spotube-macos-universal.dmg`, [FaApple], "dmg"],
"Ubuntu, Debian": [ "Ubuntu, Debian": [
`${releasesUrl}/Spotube-linux-x86_64.deb`, `${releasesUrl}/Spotube-linux-x86_64.deb`,
[faUbuntu, faDebian], [FaUbuntu, FaDebian],
"deb", "deb",
], ],
"Fedora, Redhat, Opensuse": [ "Fedora, Redhat, Opensuse": [
`${releasesUrl}/Spotube-linux-x86_64.rpm`, `${releasesUrl}/Spotube-linux-x86_64.rpm`,
[faFedora, faRedhat, faOpensuse], [FaFedora, FaRedhat, FaOpensuse],
"rpm", "rpm",
], ],
iPhone: [`${releasesUrl}/Spotube-iOS.ipa`, [faApple], "ipa"], iPhone: [`${releasesUrl}/Spotube-iOS.ipa`, [FaApple], "ipa"],
}; };
const nightlyReleaseUrl = const nightlyReleaseUrl =
@ -68,30 +69,30 @@ const nightlyReleaseUrl =
export const extendedNightlyDownloadLinks: Record< export const extendedNightlyDownloadLinks: Record<
string, string,
[string, IconDefinition[], string] [string, IconType[], string]
> = { > = {
Android: [ Android: [
`${nightlyReleaseUrl}/Spotube-android-all-arch.apk`, `${nightlyReleaseUrl}/Spotube-android-all-arch.apk`,
[faAndroid], [FaAndroid],
"apk", "apk",
], ],
Windows: [ Windows: [
`${nightlyReleaseUrl}/Spotube-windows-x86_64-setup.exe`, `${nightlyReleaseUrl}/Spotube-windows-x86_64-setup.exe`,
[faWindows], [FaWindows],
"exe", "exe",
], ],
macOS: [`${nightlyReleaseUrl}/Spotube-macos-universal.dmg`, [faApple], "dmg"], macOS: [`${nightlyReleaseUrl}/Spotube-macos-universal.dmg`, [FaApple], "dmg"],
"Ubuntu, Debian": [ "Ubuntu, Debian": [
`${nightlyReleaseUrl}/Spotube-linux-x86_64.deb`, `${nightlyReleaseUrl}/Spotube-linux-x86_64.deb`,
[faUbuntu, faDebian], [FaUbuntu, FaDebian],
"deb", "deb",
], ],
"Fedora, Redhat, Opensuse": [ "Fedora, Redhat, Opensuse": [
`${nightlyReleaseUrl}/Spotube-linux-x86_64.rpm`, `${nightlyReleaseUrl}/Spotube-linux-x86_64.rpm`,
[faFedora, faRedhat, faOpensuse], [FaFedora, FaRedhat, FaOpensuse],
"rpm", "rpm",
], ],
iPhone: [`${nightlyReleaseUrl}/Spotube-iOS.ipa`, [faApple], "ipa"], iPhone: [`${nightlyReleaseUrl}/Spotube-iOS.ipa`, [FaApple], "ipa"],
}; };
export const ADS_SLOTS = Object.freeze({ export const ADS_SLOTS = Object.freeze({
@ -101,4 +102,4 @@ export const ADS_SLOTS = Object.freeze({
packagePageArticle: 9119323068, packagePageArticle: 9119323068,
// This is being used for rehype-auto-ads in svelte.config.js // This is being used for rehype-auto-ads in svelte.config.js
blogArticlePageArticle: 6788673194, blogArticlePageArticle: 6788673194,
}); });

38
website/src/components/ads/Ads.astro Normal file
View File

@ -0,0 +1,38 @@
---
interface Props {
adSlot: number;
adFormat: "auto" | "fluid";
fullWidthResponsive?: boolean;
style?: string;
adLayout?: "in-article" | "in-feed" | "in-page";
adLayoutKey?: string;
}
const {
adSlot,
adFormat,
fullWidthResponsive = true,
style,
adLayout,
adLayoutKey,
} = Astro.props;
const AD_CLIENT = "ca-pub-6419300932495863";
---
<ins
class="adsbygoogle"
{style}
data-ad-layout={adLayout}
data-ad-client={AD_CLIENT}
data-ad-slot={adSlot}
data-ad-format={adFormat}
data-full-width-responsive={fullWidthResponsive}
data-ad-layout-key={adLayoutKey}></ins>
<script is:inline type="text/javascript">
// When the DOM is ready, push the ad request to the adsbygoogle array
document.addEventListener("DOMContentLoaded", function () {
(window.adsbygoogle = window.adsbygoogle || []).push({});
});
</script>

43
website/src/components/drawer/Drawer.astro Normal file
View File

@ -0,0 +1,43 @@
---
import { LuMenu } from "react-icons/lu";
---
<button
id="button-toggle"
class="btn btn-icon"
class:list={[Astro.props.class]}
>
{(<LuMenu />)}
</button>
<div
id="drawer"
class="fixed bg-white dark:bg-surface-800 shadow-lg transition-all duration-300 left-0 top-0 h-screen w-64 -translate-x-[100vw] z-[100]"
>
<button
id="button-close"
class="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
aria-label="Close"
>
&times;
</button>
<div class="p-4">
<slot />
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const buttonToggle = document.getElementById("button-toggle");
const drawer = document.getElementById("drawer");
const buttonClose = document.getElementById("button-close");
buttonToggle?.addEventListener("click", () => {
drawer?.classList.toggle("-translate-x-[100vw]");
});
buttonClose?.addEventListener("click", () => {
drawer?.classList.add("-translate-x-[100vw]");
});
});
</script>

53
website/src/components/navigation/DocSideBar.astro Normal file
View File

@ -0,0 +1,53 @@
---
import { getNavigationCollection } from "~/utils/get-collection";
interface Props {
classList?: string[];
}
const { classList } = Astro.props;
const navigation = await getNavigationCollection();
const pathname = Astro.url.pathname.endsWith("/")
? Astro.url.pathname.slice(0, -1)
: Astro.url.pathname;
---
<aside class="text-sm grid gap-10" class:list={[classList]}>
{
navigation.map((group) => (
<nav class="flex flex-col gap-2">
<span class="text-sm font-bold ml-2">{group.title}</span>
<ul class="flex flex-col gap-1">
{group.items.map((item) => (
<li>
<a
href={item.href}
title={item.title}
class="flex justify-between items-center"
>
<span
class="grow px-2 py-1 rounded-base"
class:list={[
{
"preset-tonal": pathname === item.href,
anchor: pathname !== item.href,
},
]}
>
{item.title}
</span>
{item.tag && (
<span class="no-underline preset-tonal-primary text-xs px-1 capitalize rounded">
{item.tag}
</span>
)}
</a>
</li>
))}
</ul>
</nav>
))
}
</aside>

72
website/src/components/navigation/TopBar.astro Normal file
View File

@ -0,0 +1,72 @@
---
import { routes } from "~/collections/app";
import { FaGithub } from "react-icons/fa6";
import SidebarButton from "./sidebar-button";
import Search from "astro-pagefind/components/Search";
const pathname = Astro.url.pathname;
---
<header
class="flex justify-between items-center py-2 md:p-4 top-0 fixed w-full z-10 backdrop-blur-md"
>
<div class="flex items-center justify-between w-full">
<div class="flex items-center gap-2">
{
pathname.startsWith("/docs") ? (
<div class="h-10 w-10 md:hidden" />
) : (
<SidebarButton client:only />
)
}
<h2 class="text-xl md:text-3xl">
<a href="/" class="flex gap-2 items-center">
<img src="/images/spotube-logo.png" width="40px" alt="Spotube Logo" />
Spotube
</a>
</h2>
</div>
<Search
id="search"
className="pagefind-ui"
uiOptions={{
showImages: false,
showSubResults: true,
}}
/>
<a
class="mw-2 me-4"
href="https://github.com/KRTirtho/spotube?referrer=spotube.krtirtho.dev"
target="_blank"
>
<button class="btn preset-filled flex items-center gap-2">
<FaGithub />
Star us
</button>
</a>
</div>
<nav class="hidden md:flex gap-3 items-center pr-2">
{
Object.entries(routes).map((route) => {
const Icon = route[1][1];
const isActive =
route[0] === "/" ? pathname === "/" : pathname.startsWith(route[0]);
return (
<a href={route[0]}>
<button
type="button"
class={`btn flex gap-2 ${route[0] === "/downloads" ? "preset-filled-primary-300-700" : "preset-filled-secondary-100-900"} ${isActive ? "underline" : ""}`}
>
{Icon && <Icon />}
{route[1][0]}
</button>
</a>
);
})
}
</nav>
</header>

45
website/src/components/navigation/sidebar-button.tsx Normal file
View File

@ -0,0 +1,45 @@
import { useRef, useState } from "react";
import { LuMenu } from "react-icons/lu";
import { useOnClickOutside } from "usehooks-ts";
import { routes } from "~/collections/app.ts";
export default function SidebarButton() {
const ref = useRef<HTMLDivElement>(null)
const [isOpen, setIsOpen] = useState(false);
useOnClickOutside(ref as React.RefObject<HTMLDivElement>, () => {
setIsOpen(false);
})
return <>
<div className={
`fixed h-screen w-72 bg-primary-50-950 top-0 left-0 bg-surface z-50 transition-all duration-300 ${isOpen ? "" : "-translate-x-full opacity-0"}`
}
ref={ref}
>
{
Object.entries(routes).map((route) => {
const Icon = route[1][1];
return (
<a
key={route[0]}
href={route[0]}
className="flex items-center gap-2 p-4 hover:bg-surface/80 transition-colors duration-200"
>
{Icon && <Icon />}
<span className="text-lg">{route[1][0]}</span>
</a>
)
})
}
</div>
<button
className="p-2 md:hidden"
onClick={() => {
setIsOpen(!isOpen);
}}
>
<LuMenu />
</button>
</>;
}

18
website/src/content.config.ts Normal file
View File

@ -0,0 +1,18 @@
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';
const docs = defineCollection({
schema: z.object({
title: z.string().optional().default('(Title)'),
description: z.string().optional().default('(Description)'),
pubDate: z.date().optional(),
tags: z.array(z.string()).optional(),
order: z.number().optional().default(0)
}),
loader: glob({
base: './src/content/docs',
pattern: ['**/*.mdx', '!**/_*.mdx']
}),
});
export const collections = { docs };

83
website/src/content/docs/developing-plugins/create-your-first-plugin.mdx Normal file
View File

@ -0,0 +1,83 @@
---
layout: "layouts/DocLayout.astro"
title: Create your first plugin
description: ""
order: 1
---
If you are comfortable with Dart, Flutter and Hetu Script, you can start developing your first plugin.
This guide will help you initialize a plugin project and write your first plugin.
## Initializing a plugin project
[spotube-plugin-template][spotube-plugin-template] is a template repository for Spotube plugins. It's a starting point
with everything you need to get started with plugin development. You should use it to create your own plugin.
Simply clone or click "Use this template" button on the GitHub repository page to create a new repository.
```bash
$ git clone https://github.com/KRTirtho/spotube-plugin-template.git
$ cd spotube-plugin-template
```
## Understanding plugins.json
After cloning the repository, you will find a file named `plugins.json` in the root directory.
This file is crucial for Spotube to recognize your plugin. It looks like this:
```json
{
"type": "metadata",
"version": "1.0.0",
"name": "Alphanumeric plugin name with hyphens or underscore",
"author": "Your Name",
"description": "A brief description of the plugin's functionality.",
"entryPoint": "plugin class name",
"apis": ["webview", "localstorage", "timezone"],
"abilities": ["authentication", "scrobbling"],
"repository": "https://github.com/KRTirtho/spotube-plugin-template",
"pluginApiVersion": "1.0.0"
}
```
| Property | Description |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type` | The type of the plugin, which is always `metadata` for Spotube plugins. |
| `version` | The version of the plugin, following [semantic versioning][semantic-version] (e.g., `1.0.0`). |
| `name` | The name of the plugin |
| `author` | The name of the plugin author. |
| `description` | A brief description of the plugin's functionality. |
| `entryPoint` | The name of the class that serves as the entry point for the plugin. |
| `apis` | An array of APIs that the plugin uses. This is used to determine which APIs are available to the plugin. Following APIs are available "webview", "localstorage", "timezone" |
| `abilities` | An array of abilities that the plugin has. This is used to determine which abilities the plugin has. Following abilities can be listed: "authentication", "scrobbling" |
| `repository` | The URL of the plugin's repository. This is used to display the plugin's repository in the plugin manager. |
| `pluginApiVersion` | The version of the plugin API that the plugin uses. This is used to determine if the plugin is compatible with the current version of Spotube. |
Change the values in the `plugins.json` file to match your plugin's information.
## Running the `example` app
There's an `example` folder that contains a simple Flutter app that utilizes all the methods
Spotube would call on your plugin. You can run this app to test your plugin's functionality.
But first you need too compile the plugin to bytecode. You can simply do this using:
```shell
$ make
```
Make sure you've `make` command installed on your system and also must have the [hetu_script_dev_tools][hetu_script_dev_tools] package globally installed.
After compiling the plugin, you can run the example app like any other Flutter app.
```shell
$ cd example
$ flutter run
```
> Most of the buttons, will not work as they not yet implemented. You've to implement the methods in your plugin source code.
> We will cover how to implement the methods in the next section.
{/* Links */}
[spotube-plugin-template]: https://github.com/KRTirtho/spotube-plugin-template
[semantic-version]: https://semver.org/
[hetu_script_dev_tools]: https://pub.dev/packages/hetu_script_dev_tools

493
website/src/content/docs/developing-plugins/implementing-endpoints.mdx Normal file
View File

@ -0,0 +1,493 @@
---
layout: "layouts/DocLayout.astro"
title: Implementing Endpoints
description: ""
order: 2
---
## AuthEndpoint
> If your plugin doesn't need authentication support, you can skip this section.
In the `src/segments/auth.ht` file you can find all the required method definition. These are the necessary
methods Spotube calls in it's lifecycle.
```hetu_script
class AuthEndpoint {
var client: HttpClient
final controller: StreamController
get authStateStream -> Stream => controller.stream
construct (this.client){
controller = StreamController.broadcast()
}
fun isAuthenticated() -> bool {
// TODO: Implement method
return false
}
fun authenticate() -> Future {
// TODO: Implement method
}
fun logout() -> Future {
// TODO: Implement method
}
}
```
For this specific endpoint, you may need `WebView` or `Forms` to get user inputs. The [`hetu_spotube_plugin`][hetu_spotube_plugin] provides
such APIs.
> Learn more about it in the [Spotube Plugin API][spotube_plugin_api] section
### The `.authStateStream` property
The `AuthEndpoint.authStateStream` property is also necessary to notify Spotube about the authentication status. [`hetu_std`][hetu_std] is a built-in
module and it exports `StreamController` which basically 1:1 copy of the Dart's [StreamController][dart_stream_controller].
If the status of authentication changes you need to add a new event using the `controller.add`
Following events are respected by Spotube:
| Name | Description |
| ----------- | ------------------------------------------------------------ |
| `login` | When user successfully completes login |
| `logout` | When user logs out of the service |
| `recovered` | When user's cached/saved credentials are recovered from disk |
| `refreshed` | When user's session is refreshed |
Example of adding a new authentication event:
```hetu_script
controller.add({ type: "login" }.toJson())
```
By the way, the event type is a `Map<String, dynamic>` in the Dart side, so make sure to always convert hetu_script's [structs into Maps][hetu_struct_into_map]
## UserEndpoint
The UserEndpoint is used to fetch user information and manage user-related actions.
In the `src/segments/user.ht` file you can find all the required method definitions. These are the necessary
methods Spotube calls in its lifecycle.
> Most of these methods should be just a mapping to an API call with minimum latency. Avoid calling plugin APIs like WebView or Forms
> in these methods. User interactions should be avoided here generally.
```hetu_script
class UserEndpoint {
var client: HttpClient
construct (this.client)
fun me() {
// TODO: Implement method
}
fun savedTracks({ offset: int, limit: int }) {
// TODO: Implement method
}
fun savedPlaylists({ offset: int, limit: int }) {
// TODO: Implement method
}
fun savedAlbums({ offset: int, limit: int }) {
// TODO: Implement method
}
fun savedArtists({ offset: int, limit: int }) {
// TODO: Implement method
}
fun isSavedPlaylist(playlistId: string) { // Future<bool>
// TODO: Implement method
}
fun isSavedTracks(trackIds: List) { // Future<List<bool>>
// TODO: Implement method
}
fun isSavedAlbums(albumIds: List) { // Future<List<bool>>
// TODO: Implement method
}
fun isSavedArtists(artistIds: List) { // Future<List<bool>>
// TODO: Implement method
}
}
```
These methods are pretty self-explanatory. You need to implement them to fetch user information from your service.
| Method | Description | Returns |
| ------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| `me()` | Fetches the current user's information. | [`SpotubeUserObject`][SpotubeUserObject] |
| `savedTracks()` | Fetches the user's saved tracks with pagination support. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullTrackObject`][SpotubeFullTrackObject] |
| `savedPlaylists()` | Fetches the user's saved playlists with pagination support. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullPlaylistObject`][SpotubeFullPlaylistObject] |
| `savedAlbums()` | Fetches the user's saved albums with pagination support. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullAlbumObject`][SpotubeFullAlbumObject] |
| `savedArtists()` | Fetches the user's saved artists with pagination support. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullArtistObject`][SpotubeFullArtistObject] |
| `isSavedPlaylist()` | Checks if a playlist is saved by the user. Returns a `Future<bool>`. | `bool` |
| `isSavedTracks()` | Checks if tracks are saved by the user. Returns a `Future<List<bool>>`. | `List<bool>` (each boolean corresponds to a track ID) |
| `isSavedAlbums()` | Checks if albums are saved by the user. Returns a `Future<List<bool>>`. | `List<bool>` (each boolean corresponds to an album ID) |
| `isSavedArtists()` | Checks if artists are saved by the user. Returns a `Future<List<bool>>`. | `List<bool>` (each boolean corresponds to an artist ID) |
> Note: The `isSavedTracks`, `isSavedAlbums`, and `isSavedArtists` methods accept a list of IDs and return a list of booleans
> indicating whether each item is saved by the user. The order of the booleans in the list corresponds to the order of the IDs
> in the input list.
## TrackEndpoint
The TrackEndpoint is used to fetch track information and do track-related actions. In the `src/segments/track.ht` file you can find all the
required method definitions.
```hetu_script
class TrackEndpoint {
var client: HttpClient
construct (this.client)
fun getTrack(id: string) {
// TODO: Implement method
}
fun save(trackIds: List) { // List<String>
// TODO: Implement method
}
fun unsave(trackIds: List) { // List<String>
// TODO: Implement method
}
fun radio(id: string) {
// TODO: Implement method
}
}
```
| Method | Description | Returns |
| ------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------- |
| `getTrack()` | Fetches track information by ID. | [SpotubeFullTrackObject][SpotubeFullTrackObject] |
| `save()` | Saves the specified tracks. Accepts a list of track IDs. | void |
| `unsave()` | Removes the specified tracks from saved tracks. Accepts a list of track IDs. | void |
| `radio()` | Fetches related tracks based on specified tracks. Try to return a List of 50 tracks. | [List\<SpotubeFullTrackObject\>][SpotubeFullTrackObject] |
{/* Urls */}
## AlbumEndpoint
The AlbumEndpoint is used to fetch album information and do album-related actions. In the `src/segments/album.ht` file you can find all the
required method definitions.
```hetu_script
class AlbumEndpoint {
construct (this.client)
fun getAlbum(id: string) {
// TODO: Implement method
}
fun tracks(id: string, {offset: int, limit: int}) {
// TODO: Implement method
}
fun releases({offset: int, limit: int}) {
// TODO: Implement method
}
fun save(albumIds: List) { // List<String>
// TODO: Implement method
}
fun unsave(albumIds: List) { // List<String>
// TODO: Implement method
}
}
```
| Method | Description | Returns |
| ------------ | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `getAlbum()` | Fetches album information by ID. | [`SpotubeFullAlbumObject`][SpotubeFullAlbumObject] |
| `tracks()` | Fetches tracks of the specified album. Accepts an ID and optional pagination parameters. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullTrackObject`][SpotubeFullTrackObject] |
| `releases()` | Fetches new album releases user followed artists or globally | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullAlbumObject`][SpotubeFullAlbumObject] |
| `save()` | Saves the specified albums. Accepts a list of album IDs. | `void` |
| `unsave()` | Removes the specified albums from saved albums. Accepts a list of album IDs. | `void` |
## ArtistEndpoint
The ArtistEndpoint is used to fetch artist information and do artist-related actions. In the `src/segments/artist.ht` file you can find all the
required method definitions.
```hetu_script
class ArtistEndpoint {
var client: HttpClient
construct (this.client)
fun getArtist(id: string) {
// TODO: Implement method
}
fun related(id: string, {offset: int, limit: int}) {
// TODO: Implement method
}
fun topTracks(id: string, {limit: int, offset: int}) {
// TODO: Implement method
}
fun albums(id: string, {offset: int, limit: int}) {
// TODO: Implement method
}
fun save(artistIds: List) {
// TODO: Implement method
}
fun unsave(artistIds: List) {
// TODO: Implement method
}
}
```
| Method | Description | Returns |
| ------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `getArtist()` | Fetches artist information by ID. | [`SpotubeFullArtistObject`][SpotubeFullArtistObject] |
| `related()` | Fetches related artists based on the specified artist ID. Accepts optional pagination. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullArtistObject`][SpotubeFullArtistObject] |
| `topTracks()` | Fetches top tracks of the specified artist. Accepts optional pagination. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullTrackObject`][SpotubeFullTrackObject] |
| `albums()` | Fetches albums of the specified artist. Accepts optional pagination. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullAlbumObject`][SpotubeFullAlbumObject] |
| `save()` | Saves the specified artists. Accepts a list of artist IDs. | `void` |
| `unsave()` | Removes the specified artists from saved artists. Accepts a list of artist IDs. | `void` |
## PlaylistEndpoint
The PlaylistEndpoint is used to fetch playlist information and do track-related actions. In the `src/segments/playlist.ht` file you can find all the
required method definitions.
```hetu_script
class PlaylistEndpoint {
var client: HttpClient
construct (this.client)
fun getPlaylist(id: string) {
// TODO: Implement method
}
fun tracks(id: string, { offset: int, limit: int }) {
// TODO: Implement method
}
fun create(userId: string, {
name: string,
description: string,
public: bool,
collaborative: bool
}) {
// TODO: Implement method
}
fun update(playlistId: string, {
name: string,
description: string,
public: bool,
collaborative: bool
}) {
// TODO: Implement method
}
fun deletePlaylist(playlistId: string) {
// TODO: Implement method
}
fun addTracks(playlistId: string, { trackIds: List, position: int }) {
// TODO: Implement method
}
fun removeTracks(playlistId: string, { trackIds: List }) {
// TODO: Implement method
}
fun save(playlistId: string) {
// TODO: Implement method
}
fun unsave(playlistId: string) {
// TODO: Implement method
}
}
```
| Method | Description | Returns |
| ---------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `getPlaylist` | Fetches a playlist by its ID. | [`SpotubeFullPlaylistObject`][SpotubeFullPlaylistObject] |
| `tracks` | Fetches tracks in a playlist. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullTrackObject`][SpotubeFullTrackObject] |
| `create` | Creates a new playlist and returns | [`SpotubeFullPlaylistObject`][SpotubeFullPlaylistObject] |
| `update` | Updates an existing playlist. | `void` |
| `deletePlaylist` | Deletes a playlist. | `void` |
| `addTracks` | Adds tracks to a playlist. | `void` |
| `removeTracks` | Removes tracks from a playlist. | `void` |
| `save` | Saves a playlist to the user's library. | `void` |
| `unsave` | Removes a playlist from the user's library. | `void` |
## SearchEndpoint
The SearchEndpoint is used to fetch search playlist, tracks, album and artists. In the `src/segments/search.ht` file you can find all the
required method definitions.
```hetu_script
class SearchEndpoint {
var client: HttpClient
construct (this.client)
get chips -> List { // Set<string>
// can be tracks, playlists, artists, albums and all
return ["all", "tracks", "albums", "artists", "playlists"]
}
fun all(query: string) {
// TODO: Implement method
}
fun albums(query: string, {offset: int, limit: int}) {
// TODO: Implement method
}
fun artists(query: string, {offset: int, limit: int}) {
// TODO: Implement method
}
fun tracks(query: string, {offset: int, limit: int}) {
// TODO: Implement method
}
fun playlists(query: string, {offset: int, limit: int}) {
// TODO: Implement method
}
}
```
| Method | Description | Returns |
| ------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `chips` | Returns the available search chips. | `List<string>` |
| `all()` | Searches for all types of content. | [`SpotubeSearchResponseObject`][SpotubeSearchResponseObject] |
| `albums()` | Searches only for albums. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullAlbumObject`][SpotubeFullAlbumObject] |
| `artists()` | Searches only for artists. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullArtistObject`][SpotubeFullArtistObject] |
| `tracks()` | Searches only for tracks. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullTrackObject`][SpotubeFullTrackObject] |
| `playlists()` | Searches only for playlists. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeFullPlaylistObject`][SpotubeFullPlaylistObject] |
## BrowseEndpoint
The BrowseEndpoint is used to fetch recommendations and catalogs of playlists, albums and artists. In the `src/segments/browse.ht` file you can find all the
required method definitions.
```hetu_script
class BrowseEndpoint {
var client: HttpClient
construct (this.client)
fun sections({offset: int, limit: int}) {
// TODO: Implement method
}
fun sectionItems(id: string, {offset: int, limit: int}) {
// TODO: Implement method
}
}
```
| Method | Description | Returns |
| ---------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `sections()` | Returns the sections of the home page. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of [`SpotubeBrowseSectionObject`][SpotubeBrowseSectionObject] of `Object` |
| `sectionItems()` | Returns the items of a specific section. | [`SpotubePaginationResponseObject`][SpotubePaginationResponseObject] of `Object` |
> In `sectionItems()` The `id` it takes comes from `sections()`. It is basically used in an expanded screen to show the browse section items with pagination.
>
> For sections returned by `sections()` if `browseMore` is `true` that's when `sectionItems()` is used to fetch the items of that section.
By the way, the `Object` can be any of the following types:
- [`SpotubeFullPlaylistObject`][SpotubeFullPlaylistObject]
- [`SpotubeFullArtistObject`][SpotubeFullArtistObject]
- [`SpotubeFullAlbumObject`][SpotubeFullAlbumObject]
## CoreEndpoint
The CoreEndpoint is a special subclass which is used to check update and scrobbling and to get support text. In the `src/segments/core.ht` file you can find all the
required method definitions.
```hetu_script
class CorePlugin {
var client: HttpClient
construct (this.client)
/// Checks for updates to the plugin.
/// [currentConfig] is just plugin.json's file content.
///
/// If there's an update available, it will return a map of:
/// - [downloadUrl] -> direct download url to the new plugin.smplug file.
/// - [version] of the new plugin.
/// - [changelog] Optionally, a changelog for the update (markdown supported).
///
/// If no update is available, it will return null.
fun checkUpdate(currentConfig: Map) -> Future {
// TODO: Check for updates
}
/// Returns the support information for the plugin in Markdown or plain text.
/// Supports images and links.
get support -> string {
// TODO: Return support information
return ""
}
/// Scrobble the provided details to the scrobbling service supported by the plugin.
/// "scrobbling" must be set as an ability in the plugin.json
/// [details] is a map containing the scrobble information, such as:
/// - [id] -> The unique identifier of the track.
/// - [title] -> The title of the track.
/// - [artists] -> List of artists
/// - [id] -> The unique identifier of the artist.
/// - [name] -> The name of the artist.
/// - [album] -> The album of the track
/// - [id] -> The unique identifier of the album.
/// - [name] -> The name of the album.
/// - [timestamp] -> The timestamp of the scrobble (optional).
/// - [duration_ms] -> The duration of the track in milliseconds (optional).
/// - [isrc] -> The ISRC code of the track (optional).
fun scrobble(details: Map) {
// TODO: Implement scrobbling
}
}
```
| Method | Description | Returns |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `checkUpdate()` | Checks for updates to the plugin. | `Future` with a map containing `downloadUrl`, `version`, and optionally `changelog`. If no update is available, returns `null`. |
| `support` | Returns support information. | `string` containing the support information in Markdown or plain text. |
| `scrobble()` | [Scrobbles][scrobbling_wiki] the provided track details. This is only called if your plugin.json has scrobbling in the `abilities` field | `void` |
> In the `checkUpdate()` method the `plugin.json`'s content will be passed as map. You can use that to check updates using the `version` field.
>
> Also, the `downloadUrl` it provides should be a direct binary download link (redirect is supported) for the `.smplug` file
{/* Urls */}
[scrobbling_wiki]: https://en.wikipedia.org/wiki/Last.fm
[hetu_script_import_export_docs]: https://hetu-script.github.io/docs/en-US/grammar/import/
[hetu_spotube_plugin]: https://github.com/KRTirtho/hetu_spotube_plugin
[hetu_std]: https://github.com/hetu-community/hetu_std
[dart_stream_controller]: https://api.flutter.dev/flutter/dart-async/StreamController-class.html
[hetu_struct_into_map]: https://hetu-script.github.io/docs/en-US/api_reference/hetu/#struct
[spotube_plugin_api]: /docs/plugin-apis
[SpotubeUserObject]: /docs/reference/models#user
[SpotubePaginationResponseObject]: /docs/reference/models#pagination-response
[SpotubeFullAlbumObject]: /docs/reference/models#spotubefullalbumobject
[SpotubeFullArtistObject]: /docs/reference/models#spotubefullartistobject
[SpotubeFullTrackObject]: /docs/reference/models#track
[SpotubeFullPlaylistObject]: /docs/reference/models#spotubefullplaylistobject
[SpotubeSearchResponseObject]: /docs/reference/models#search-response
[SpotubeBrowseSectionObject]: /docs/reference/models#browse-section

95
website/src/content/docs/developing-plugins/implmenting-plugin-methods.mdx Normal file
View File

@ -0,0 +1,95 @@
---
layout: "layouts/DocLayout.astro"
title: Implementing plugin methods
description: Tutorial on how to implement methods in your Spotube plugin.
order: 2
---
In the previous section, you learned how to create a plugin project and run the example app.
In this section, you will learn how to implement methods in your Spotube plugin.
## The `entryPoint` class
The `entryPoint` (from the plugin.json) class is the main class of your plugin. You can find it in `src/plugin.ht`. It's the class
that Spotube will instantiate when it loads your plugin. You can pretty much keep this class same as the template, unless you
there's something specific you want to change.
```hetu_script
// The name of the class should match the `entryPoint` in plugin.json
class TemplateMetadataProviderPlugin {
// These are required properties that Spotube will use to call the methods.
// ==== Start of required properties ====
var auth: AuthEndpoint
var album: AlbumEndpoint
var artist: ArtistEndpoint
var browse: BrowseEndpoint
var playlist: PlaylistEndpoint
var search: SearchEndpoint
var track: TrackEndpoint
var user: UserEndpoint
var core: CorePlugin
// ==== End of required properties ====
var api: HttpClient
construct (){
api = HttpClient(
HttpBaseOptions(
baseUrl: "https://example.com"
)
)
auth = AuthEndpoint(api)
album = AlbumEndpoint(api)
artist = ArtistEndpoint(api)
browse = BrowseEndpoint(api)
playlist = PlaylistEndpoint(api)
search = SearchEndpoint(api)
track = TrackEndpoint(api)
user = UserEndpoint(api)
core = CorePlugin(api)
auth.authStateStream.listen((event) {
// get authentication events
})
}
}
```
If you read how the import/export works for [hetu_script][hetu_script_import_export_docs], you should realize it's pretty similar to ECMA Script modules or ES6+ Modules
from the JavaScript world.
```hetu_script
import { AuthEndpoint } from './segments/auth.ht'
import { AlbumEndpoint } from "./segments/album.ht"
import { ArtistEndpoint } from "./segments/artist.ht"
import { BrowseEndpoint } from "./segments/browse.ht"
import { PlaylistEndpoint } from './segments/playlist.ht'
import { SearchEndpoint } from './segments/search.ht'
import { TrackEndpoint } from './segments/track.ht'
import { UserEndpoint } from './segments/user.ht'
import { CorePlugin } from './segments/core.ht'
```
## Implementing subclasses
Now that we've seen `entryPoint` class, we can look into the properties of that classes which are the actual
classes that contains methods that Spotube calls. All of them are in `src/segments` folder
> **IMPORTANT!:** hetu\*script claims it supports async/await. But unfortunately it still doesn't work yet.
> So for now, we have to bear with .then()
>
> Also, if you've read the hetu_script docs, you should know hetu_script doesn't support <ins>Error Handling</ins>.
> This is a design decision of the language and the errors should only be handled in the Dart code.
> So there's no try/catch/finally or .catch() method
In the next section, we will cover how to implement the methods in these classes.
{/* Urls */}
[hetu_script_import_export_docs]: https://hetu-script.github.io/docs/en-US/grammar/import/
[hetu_spotube_plugin]: https://github.com/KRTirtho/hetu_spotube_plugin
[spotube_plugin_api]: /
[hetu_std]: https://github.com/hetu-community/hetu_std
[dart_stream_controller]: https://api.flutter.dev/flutter/dart-async/StreamController-class.html
[hetu_struct_into_map]: https://hetu-script.github.io/docs/en-US/api_reference/hetu/#struct

60
website/src/content/docs/developing-plugins/introduction.mdx Normal file
View File

@ -0,0 +1,60 @@
---
layout: "layouts/DocLayout.astro"
title: Introduction
description: Learn how to develop plugins for Spotube
order: 0
---
Plugins in Spotube are used for fetching metadata (Playlist, Album, Artist, Track Info, Search etc) and scrobbling. It gives developers
access to Spotube's internal APIs to create custom metadata providers and audio [scrobblers][scrobbler_wiki].
Plugins needs to be written in [hetu_script][hetu_script_link], which is a Dart-based scripting language.
You probably never heard of it before.
## Requirements
To develop plugins for Spotube, you need to have the following requirements:
- Basic programming knowledge
- [Dart][dart] and [Flutter][flutter] knowledge
- [Visual Studio Code][vscode] or any other code editor
Spotube uses [hetu_script][hetu_script_link]. It's kind of similar to Typescript.
Learning it shouldn't take much time if you already know Dart or Javascript.
Go to Hetu Script's [official website and documentation][hetu_script_link] to learn more about it.
## Resources
The [`hetu_script`][hetu_script_link] programming/scripting language is relatively new. So there's no ecosystem around it yet.
However, we created some helpful libraries to aid with Spotube plugin development. The [hetu-community][hetu_community] is a
community driven effort to create libraries and tools for Hetu Script. Below are available libraries:
#### Core Libraries
- [**hetu-community/hetu_std**][hetu_std]: A standard library for Hetu Script. Provides basic functionality like Http client, DateTime, Cryptography API,
encoding/decoding (JSON, Utf8, Base32) etc.
- [**KRTirtho/hetu_spotube_plugin**][hetu_spotube_plugin]: A library for Spotube plugin development. It provides access to Spotube's internal APIs
(Webview, Forms, LocalStorage etc.) and utilities for fetching metadata and scrobbling.
> You can find more libraries in the [hetu-community GitHub organization][hetu_community].
#### Programming aid
- [Hetu Script Plugin for VSCode][hetu_script_vscode]: A VSCode extension for Hetu Script. It provides basic syntax highlighting
support. But it doesn't support [LSP (Language Server Protocol)][lsp] yet so no autocompletion or linting is available.
- [hetu_script_dev_tools][hetu_script_dev_tools]: A CLI tool for compiling hetu script files to bytecode or directly running them and a REPL
{/* Link Variables */}
[hetu_script_link]: https://hetu-script.github.io/
[scrobbler_wiki]: https://en.wikipedia.org/wiki/Scrobbling
[dart]: https://dart.dev/
[flutter]: https://flutter.dev/
[vscode]: https://code.visualstudio.com/
[lsp]: https://en.wikipedia.org/wiki/Language_Server_Protocol
[hetu_script_vscode]: https://marketplace.visualstudio.com/items?itemName=hetu-script.hetuscript
[hetu_community]: https://github.com/hetu-community
[hetu_std]: https://github.com/hetu-community/hetu_std
[hetu_otp_util]: https://github.com/hetu-community/hetu_otp_util
[hetu_spotube_plugin]: https://github.com/KRTirtho/hetu_spotube_plugin
[hetu_script_dev_tools]: https://pub.dev/packages/hetu_script_dev_tools

30
website/src/content/docs/get-started/installing-plugins.mdx Normal file
View File

@ -0,0 +1,30 @@
---
layout: "layouts/DocLayout.astro"
title: Installing plugins
description: Learn how to install and manage plugins in Spotube
order: 1
---
Let's first learn how to install plugins in Spotube. It's pretty simple.
1. Open Spotube (duh!)
1. Go to Settings
1. Then go to the top option, "Metadata provider plugins"
1. You can see a list of all the plugins that are available to install
![Navigate to plugins page](/docs/getting-started/installing-plugins/navigate.webp)
## More ways to install new plugins
Usually, Spotube will list public repositories of plugins from github and codeberg in the _Available plugins_ section.
This is a non curated list, so be careful when installing plugins. Always check the source before installing.
A malicious plugin given full access can easily steal your credentials. So be careful!
Try to use the `Official` tagged plugins all the time if you don't want to deal with potential security risks.
- **Upload plugin from local file**: You can also install plugins from local file (plugin.smplug) using the _Orange Upload button_ on the top right beside the text field.
- **Install plugin from URL**: If you have a direct link to a plugin file, you can just paste the URL in the text field and use the gray download button beside it
> If you're a developer, you can create your own plugins and share them with the community. Check out the [Plugin Development Guide][developing_plugins] for more information.
[developing_plugins]: /docs/developing-plugins/introduction

20
website/src/content/docs/get-started/introduction.mdx Normal file
View File

@ -0,0 +1,20 @@
---
layout: 'layouts/DocLayout.astro'
title: Introduction
description: ""
order: 0
---
Spotube is an extensible music player designed to give users full control over their listening experience. With a flexible configuration system, Spotube can be tailored to fit individual preferences and workflows.
## Key Features
- **Extensible Architecture:** Spotube supports a powerful plugin system, allowing users to integrate with any music metadata service or extend functionality as needed.
- **Multiple Integrations:** Out of the box, Spotube connects with various music services, making it easy to access and manage your library.
- **Customizable Experience:** Users can configure Spotube to match their unique requirements, from interface themes to playback options.
## Why Spotube?
Spotube is built for music enthusiasts who want more than a standard player. Whether you need advanced metadata management, custom integrations, or a personalized interface, Spotube provides the tools to create your ideal music environment.
Explore the documentation to learn how to set up Spotube, install plugins, and make the most of its features.

72
website/src/content/docs/plugin-apis/forms.mdx Normal file
View File

@ -0,0 +1,72 @@
---
layout: "layouts/DocLayout.astro"
title: Forms
description: Documentation for the Forms API for spotube plugins
order: 1
---
Spotube provides a Forms API that allows plugin developers to create and manage forms within the Spotube application.
## Usage
Following will show a form with 2 text fields and text in between them:
```hetu_script
import "module:spotube_plugin" as spotube
spotube.SpotubeForm.show(
"The form page title",
[
{
objectType: "input",
id: "name",
variant: "text",
placeholder: "Enter your name",
required: true,
}.toJson(),
{
objectType: "input",
id: "password",
variant: "password", // This will obfuscate the input
placeholder: "Enter your password",
required: true,
}.toJson(),
{
objectType: "text",
text: "This is some text after the two fields.",
}.toJson(),
]
).then((result) {
// Handle the result
print(result)
})
```
The method `spotube.SpotubeForm.show` takes a title and a list of form field declaration map. The map should be, well obviously a `Map`.
Following are field map properties:
| Property | Type | Description |
| -------------- | ----------------- | ---------------------------------------------------------------------------------- |
| `objectType` | `text` or `input` | Type of the object, should be `text` for text fields and `input` for input fields. |
| `id` | `String` | Unique identifier for the field. (`input` type only) |
| `variant` | `String` | Variant of the field, can be `text`, `password` or `number`. (`input` type only) |
| `placeholder` | `String` | Optional placeholder text for the field. (`input` type only) |
| `required` | `Boolean` | Whether the field is required or not. (`input` type only) |
| `defaultValue` | `String` | Optional default value for the field. (`input` type only) |
| `regex` | `String` | Optional regex pattern to validate the input. (`input` type only) |
| `text` | `String` | Optional text for `text` object type. (Only applicable for `text` type) |
The method `spotube.SpotubeForm.show` returns a following format:
```json
[
{
"id": "name",
"value": "John Doe"
},
{
"id": "password",
"value": "12345678"
}
]
```

103
website/src/content/docs/plugin-apis/localstorage.mdx Normal file
View File

@ -0,0 +1,103 @@
---
layout: "layouts/DocLayout.astro"
title: LocalStorage
description: Documentation for the LocalStorage API for spotube plugins
order: 2
---
The `LocalStorage` API is a plain text key/value holding persistent storage for spotube plugins. It's similar to the `localStorage` API in web browsers.
The API is a 1:1 port of [shared_preferences][shared_preferences] package from [pub.dev](https://pub.dev) (Flutter package registry)
The only difference is that the `LocalStorage` API is 100% asynchronous. So every method returns a `Future`
## Usage
#### Get values
Retrieve stored information by key:
```hetu_script
import "module:spotube_plugin" as spotube
var LocalStorage = spotube.LocalStorage
// Get a string value by key
LocalStorage.getString("key").then((value) {
print("Value for 'key': $value")
})
// Get an integer value by key
LocalStorage.getInt("key").then((value) {
print("Value for 'key': $value")
})
// Get a double value by key
LocalStorage.getDouble("key").then((value) {
print("Value for 'key': $value")
})
// Get a boolean value by key
LocalStorage.getBool("key").then((value) {
print("Value for 'key': $value")
})
// Get a list of strings by key
LocalStorage.getStringList("key").then((value) {
for (var item in value) {
print("Item in list: $item")
}
})
```
#### Set values
To set or store data in the local storage, you can use the following methods:
```hetu_script
// Set a string value by key
LocalStorage.setString("key", "value")
// Set an integer value by key
LocalStorage.setInt("key", 42)
// Set a double value by key
LocalStorage.setDouble("key", 3.14)
// Set a boolean value by key
LocalStorage.setBool("key", true)
// Set a list of strings by key
LocalStorage.setStringList("key", ["item1", "item2", "item3"])
```
#### Key operations
To remove a value from the local storage, you can use the `remove` method:
```hetu_script
// Remove a value by key
LocalStorage.remove("key")
```
To clear all values from the local storage, you can use the `clear` method:
```hetu_script
// Clear all values from local storage
LocalStorage.clear()
```
To check if a key exists in the local storage, you can use the `containsKey` method:
```hetu_script
// Check if a key exists
LocalStorage.containsKey("key").then((exists) {
if (exists) {
print("Key 'key' exists in local storage")
} else {
print("Key 'key' does not exist in local storage")
}
})
```
{/* Links */}
[shared_preferences]: https://pub.dev/packages/shared_preferences

37
website/src/content/docs/plugin-apis/timezone.mdx Normal file
View File

@ -0,0 +1,37 @@
---
layout: "layouts/DocLayout.astro"
title: TimeZone
description: Documentation for the TimeZone API for spotube plugins
order: 3
---
The `TimeZone` API provides access to the current time zone of the device running Spotube. This can be useful for plugins that need to display
or handle time-related information based on the user's local time zone.
## Usage
To use the `TimeZone` API, you can import the `spotube_plugin` module and access the `TimeZone` class.
```hetu_script
import "module:spotube_plugin" as spotube
var TimeZone = spotube.TimeZone
```
To get current local time zone for the device, you can use the `getLocalTimeZone` method:
```hetu_script
TimeZone.getLocalTimeZone().then((timeZone) {
print("Current local time zone: $timeZone") // e.g., "America/New_York"
})
```
To get all available time zones, you can use the `getAvailableTimeZones` method:
```hetu_script
TimeZone.getAvailableTimeZones().then((timeZones) {
for (var tz in timeZones) {
print("Available time zone: $tz") // e.g., "America/New_York", "Europe/London", etc.
}
})
```

75
website/src/content/docs/plugin-apis/webview.mdx Normal file
View File

@ -0,0 +1,75 @@
---
layout: "layouts/DocLayout.astro"
title: WebView
description: Documentation for the WebView API for spotube plugins
order: 0
---
The [hetu_spotube_plugin][hetu_spotube_plugin] is a built-in module that plugin developers can use in their plugins.
```hetu_script
import "module:spotube_plugin" as spotube
```
## WebView API
The WebView API allows plugins to create and manage web views within the Spotube application.
### Usage
First, an WebView instance needs to be created with `uri`.
```hetu_script
import "module:spotube_plugin" as spotube
let webview = spotube.Webview(uri: "https://example.com")
```
To open the webview, you can use the `open` method:
```hetu_script
webview.open() // returns Future<void>
```
To close the webview, you can use the `close` method:
```hetu_script
webview.close() // returns Future<void>
```
### Listening to URL changes
You can listen to url change events by using the `onUrlRequestStream` method. It's emitted when the URL of the webview changes,
such as when the user navigates to a different page or clicks a link.
```hetu_script
// Make sure to import the hetu_std and Stream
import "module:hetu_std" as std
var Stream = std.Stream
// ... created webview instance and other stuff
var subscription = webview.onUrlRequestStream().listen((url) {
// Handle the URL change
print("URL changed to: $url")
})
// Don't forget to cancel the subscription when it's no longer needed
subscription.cancel()
```
### Retrieving cookies
To get cookies from the webview, you can use the `getCookies` method:
```hetu_script
webview.getCookies("https://example.com") // returns Future<List<Cookie>>
```
You can find the [`Cookie` class][spotube_plugin_cookie] and all it's methods and properties in the
`hetu_spotube_plugin` module source code
{/* Links */}
[hetu_spotube_plugin]: https://github.com/KRTirtho/hetu_spotube_plugin
[spotube_plugin_cookie]: https://github.com/KRTirtho/hetu_spotube_plugin/blob/main/lib/assets/hetu/webview.ht

15
website/src/content/docs/reference/libraries.mdx Normal file
View File

@ -0,0 +1,15 @@
---
layout: "layouts/DocLayout.astro"
title: Libraries
description: List of libraries for Spotube Plugins.
order: 1
---
- [`hetu_std`][hetu_std] (built-in) - A standard library for hetu_script that provides standard set of functions and utilities.
- [`hetu_spotube_plugin`][hetu_spotube_plugin] (built-in) - Access to Spotube Plugin API, which provides functions to interact with Spotube.
- [`hetu_otp_util`][hetu_otp_util] - A pure hetu_script library for OTP utilities, such as generating and verifying OTPs.
{/* Links */}
[hetu_std]: https://github.com/hetu-community/hetu_std
[hetu_spotube_plugin]: https://github.com/KRTirtho/hetu_spotube_plugin
[hetu_otp_util]: https://github.com/hetu-community/hetu_otp_util

190
website/src/content/docs/reference/models.mdx Normal file
View File

@ -0,0 +1,190 @@
---
layout: "layouts/DocLayout.astro"
title: Plugin Models
description: "Different types of objects used in Spotube."
order: 0
---
## Image
Following is the structure of the `SpotubeImageObject`:
| Property | Type |
| -------- | --------------- |
| width | `int` or `null` |
| height | `int` or `null` |
| url | `string` |
## User
Structure of the `SpotubeUserObject`, which is used to represent a user in Spotube returned by Spotube Plugins.
| Property | Type |
| ----------- | -------------------------------------------------- |
| id | `string` |
| name | `string` |
| externalUri | `string` |
| images | List of [`SpotubeImageObject`][SpotubeImageObject] |
> `externalUri` is a URL that points to the user's profile on the external service (e.g. Listenbrainz)
## Artist
### SpotubeSimpleArtistObject
Following is the structure of the `SpotubeArtistObject`:
| Property | Type |
| ----------- | ------------------------------------------------------------ |
| id | `string` |
| name | `string` |
| externalUri | `string` |
| images | List of [`SpotubeImageObject`][SpotubeImageObject] or `null` |
### SpotubeFullArtistObject
Following is the structure of the `SpotubeFullArtistObject`:
| Property | Type |
| ----------- | ----------------------------------------------------- |
| id | `string` |
| name | `string` |
| externalUri | `string` |
| images | List of [`SpotubeImageObject`][SpotubeImageObject] or |
| followers | `number` |
| genres | List of `string` or `null` |
## Album
### SpotubeSimpleAlbumObject
Following is the structure of the `SpotubeAlbumObject`:
| Property | Type |
| ----------- | ---------------------------------------------------------------- |
| id | `string` |
| name | `string` |
| externalUri | `string` |
| images | List of [`SpotubeImageObject`][SpotubeImageObject] |
| albumType | `album`, `single` or `compilation` |
| artists | List of [`SpotubeSimpleArtistObject`][SpotubeSimpleArtistObject] |
| releaseDate | `string` (YYYY-MM-DD format) or `null` |
### SpotubeFullAlbumObject
Following is the structure of the `SpotubeFullAlbumObject`:
| Property | Type |
| ----------- | ---------------------------------------------------------------- |
| id | `string` |
| name | `string` |
| externalUri | `string` |
| images | List of [`SpotubeImageObject`][SpotubeImageObject] |
| albumType | `album`, `single` or `compilation` |
| artists | List of [`SpotubeSimpleArtistObject`][SpotubeSimpleArtistObject] |
| releaseDate | `string` (YYYY-MM-DD format) |
| totalTracks | `number` |
| recordLabel | `string` or `null` |
## Track
Following is the structure of the `SpotubeFullTrackObject`:
| Property | Type |
| ---------------------------- | ---------------------------------------------------------------- |
| id | `string` |
| name | `string` |
| externalUri | `string` |
| artists | List of [`SpotubeSimpleArtistObject`][SpotubeSimpleArtistObject] |
| album | [`SpotubeSimpleAlbumObject`][SpotubeSimpleAlbumObject] |
| durationMs (in milliseconds) | `number` |
| explicit | `boolean` |
| [isrc][isrc_wiki] | `string` |
> `isrc` stands for International Standard Recording Code, which is a unique identifier for tracks.
> It is used to identify recordings and is often used in music distribution and royalty collection. The format is typically a 12-character alphanumeric code.
## Playlist
### SpotubeSimplePlaylistObject
Following is the structure of the `SpotubeSimplePlaylistObject`:
| Property | Type |
| ----------- | ------------------------------------------------------------ |
| id | `string` |
| name | `string` |
| description | `string` |
| externalUri | `string` |
| images | List of [`SpotubeImageObject`][SpotubeImageObject] or `null` |
| owner | [`SpotubeUserObject`][SpotubeUserObject] |
### SpotubeFullPlaylistObject
Following is the structure of the `SpotubeFullPlaylistObject`:
| Property | Type |
| ------------- | ------------------------------------------------------------ |
| id | `string` |
| name | `string` |
| description | `string` |
| externalUri | `string` |
| images | List of [`SpotubeImageObject`][SpotubeImageObject] or `null` |
| owner | [`SpotubeUserObject`][SpotubeUserObject] |
| collaborators | List of [`SpotubeUserObject`][SpotubeUserObject] or `null` |
| collaborative | `boolean` |
| public | `boolean` |
## Search Response
Following is the structure of the `SpotubeSearchResponseObject`:
| Property | Type |
| --------- | -------------------------------------------------------------------- |
| albums | List of [`SpotubeSimpleAlbumObject`][SpotubeSimpleAlbumObject] |
| artists | List of [`SpotubeFullArtistObject`][SpotubeFullArtistObject] |
| playlists | List of [`SpotubeSimplePlaylistObject`][SpotubeSimplePlaylistObject] |
| tracks | List of [`SpotubeFullTrackObject`][SpotubeFullTrackObject] |
## Browse Section
Following is the structure of `SpotubeBrowseSectionObject`:
| Property | Type |
| ----------- | ---------------- |
| id | `string` |
| title | `string` |
| externalUri | `string` |
| browseMore | `boolean` |
| items | List of `Object` |
The `items` property array can contain multiple type of `Object` in it but it will always be
- [`SpotubeFullPlaylistObject`][SpotubeFullPlaylistObject]
- [`SpotubeFullAlbumObject`][SpotubeFullAlbumObject]
- [`SpotubeFullArtistObject`][SpotubeFullArtistObject]
## Pagination Response
`SpotubePaginationResponseObject` is generic model. The `items` property can contain any type of `Object` in it.
This is the structure of `SpotubePaginationResponseObject`:
| Property | Type |
| ---------- | ----------------------------------------------- |
| limit | `number` |
| nextOffset | `number` or `null` |
| total | `number` |
| hasMore | `boolean` |
| items | List of generic type `T` which extends `Object` |
[isrc_wiki]: https://en.wikipedia.org/wiki/International_Standard_Recording_Code
[SpotubeImageObject]: /docs/reference/models#image
[SpotubeSimpleArtistObject]: /docs/reference/models#spotubesimpleartistobject
[SpotubeSimpleAlbumObject]: /docs/reference/models#spotubesimplealbumobject
[SpotubeUserObject]: /docs/reference/models#user
[SpotubeFullArtistObject]: /docs/reference/models#spotubefullartistobject
[SpotubeSimplePlaylistObject]: /docs/reference/models#spotubesimpleplaylistobject
[SpotubeFullTrackObject]: /docs/reference/models#track
[SpotubeFullPlaylistObject]: /docs/reference/models#spotubefullplaylistobject
[SpotubeFullAlbumObject]: /docs/reference/models#spotubefullalbumobject

78
website/src/layouts/DocLayout.astro Normal file
View File

@ -0,0 +1,78 @@
---
import DocSideBar from "~/components/navigation/DocSideBar.astro";
import Breadcrumbs from "~/modules/docs/Breadcrumbs.astro";
import TableOfContents from "~/modules/docs/TableOfContents.astro";
interface PageHeadings {
depth: number;
slug: string;
text: string;
}
// interface Chip {
// label: string;
// href: string;
// icon?: string;
// preset?: string;
// }
interface Props {
frontmatter: {
// Required ---
title: string;
description: string;
};
headings: PageHeadings[];
}
const { frontmatter, headings } = Astro.props;
// GitHub Settings
// const branch = "website";
// URLs
// const urls = {
// githubDocsUrl: `https://github.com/KRTirtho/spotube/tree/${branch}/website/src/content`,
// githubSpotubeUrl: `https://github.com/KRTirtho/spotube`,
// };
---
<div
class="container mx-auto grid grid-cols-1 xl:grid-cols-[240px_minmax(0px,_1fr)_280px] px-4 xl:px-10"
>
<!-- Navigation -->
<aside
class="hidden xl:block self-start sticky top-[70px] h-[calc(100vh-70px)] py-4 xl:py-10 overflow-y-auto pr-10"
data-navigation
>
<DocSideBar />
</aside>
<!-- Main -->
<main
class="px-4 xl:px-10 py-10 space-y-8 [&_.scroll-header]:scroll-mt-[calc(70px+40px)]"
>
<!-- Header -->
<header class="scroll-header space-y-4" data-pagefind-body id="_top">
<!-- Breadcrumbs -->
<Breadcrumbs />
<h1 class="h1">{frontmatter.title ?? "(title)"}</h1>
<p class="text-lg opacity-60">
{frontmatter.description ?? "(description)"}
</p>
</header>
<!-- Content -->
<article
class="space-y-8 prose lg:prose-xl dark:prose-invert"
data-pagefind-body
>
<slot />
</article>
<!-- Footer -->
<!-- <Footer classList="py-4 px-4 xl:px-0" /> -->
</main>
<!-- Sidebar -->
<aside
class="hidden xl:block self-start sticky top-[70px] h-[calc(100vh-70px)] py-4 xl:py-10 space-y-8 overflow-y-auto"
>
<TableOfContents {headings} />
</aside>
</div>

3
website/src/layouts/MarkdownLayout.astro Normal file
View File

@ -0,0 +1,3 @@
<div class="prose lg:prose-lg dark:prose-invert max-w-5xl mx-auto">
<slot />
</div>

106
website/src/layouts/RootLayout.astro Normal file
View File

@ -0,0 +1,106 @@
---
import { FaGithub } from "react-icons/fa6";
import "../styles/global.css";
import TopBar from "~/components/navigation/TopBar.astro";
interface Props {
metadata?: {
title?: string;
description?: string;
keywords?: string;
author?: string;
};
}
const { metadata } = Astro.props as Props;
---
<!doctype html>
<html lang="en" data-theme="wintry">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta name="generator" content={Astro.generator} />
<title>{metadata?.title || "Spotube"}</title>
<meta
name="description"
content={metadata?.description ||
"A cross-platform extensible open-source music streaming platform"}
/>
<meta
name="keywords"
content={metadata?.keywords ||
"music, client, open source, music, streaming"}
/>
<meta name="author" content={metadata?.author || "KRTirtho"} />
<meta property="og:image" content="/images/spotube-logo.png" />
<meta property="og:image:alt" content="Spotube Logo" />
<meta property="og:image:type" content="image/png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={metadata?.title || "Spotube"} />
<meta
name="twitter:description"
content={metadata?.description ||
"A cross-platform extensible open-source music streaming platform"}
/>
<meta name="twitter:image" content="/images/spotube-logo.png" />
<meta name="twitter:creator" content={metadata?.author || "KRTirtho"} />
<meta name="twitter:site" content="@KRTirtho" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#1DB954" />
<script
is:inline
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6419300932495863"
data-overlays="bottom"
crossorigin="anonymous"></script>
</head>
<body>
<main class="p-2 md:p-4 min-h-[90vh]">
<TopBar />
<slot />
</main>
<footer class="w-full bg-tertiary-100-900 p-4 flex justify-between">
<div>
<h3 class="h3">Spotube</h3>
<p>
Copyright © {new Date().getFullYear()} Spotube
</p>
</div>
<ul>
<li>
<a href="https://github.com/KRTirtho/spotube">
<FaGithub className="inline mr-1" />
Github
</a>
</li>
<li>
<a href="https://opencollective.org/spotube">
<img
src="https://avatars0.githubusercontent.com/u/13403593?v=4"
alt="OpenCollective"
height="20"
width="20"
class="inline mr-1"
/>
OpenCollective
</a>
</li>
</ul>
</footer>
</body>
</html>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
</style>

32
website/src/lib/components/ads/ads.svelte
View File

@ -1,32 +0,0 @@
<script lang="ts">
import { onMount } from 'svelte';
export let adSlot: number;
export let adFormat: 'auto' | 'fluid';
// biome-ignore lint/style/useConst: This is just props
export let fullWidthResponsive = true;
// biome-ignore lint/style/useConst: This is just props
export let style = 'display:block';
// biome-ignore lint/style/useConst: This is just props
export let adLayout: 'in-article' | 'in-feed' | 'in-page' | undefined = undefined;
// biome-ignore lint/style/useConst: This is just props
export let adLayoutKey: string | undefined = undefined;
const AD_CLIENT = 'ca-pub-6419300932495863';
onMount(() => {
// biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
(window.adsbygoogle = window.adsbygoogle || []).push({});
});
</script>
<ins
class="adsbygoogle"
{style}
data-ad-layout={adLayout}
data-ad-client={AD_CLIENT}
data-ad-slot={adSlot}
data-ad-format={adFormat}
data-full-width-responsive={fullWidthResponsive}
data-ad-layout-key={adLayoutKey}
></ins>

25
website/src/lib/components/downloads/download-items.svelte
View File

@ -1,25 +0,0 @@
<script lang="ts">
import type { IconDefinition } from '@fortawesome/free-brands-svg-icons';
import Fa from 'svelte-fa';
export let links: Record<string, [string, IconDefinition[], string]>;
</script>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{#each Object.entries(links) as link}
<a
href={link[1][0]}
class="flex flex-col btn variant-ghost-primary rounded-xl p-0 overflow-hidden"
>
<div class="relative bg-primary-500 p-4 flex gap-4 justify-center rounded-t-xl w-full">
{#each link[1][1] as icon}
<Fa {icon} />
{/each}
<p class="chip variant-ghost-warning text-warning-400 absolute right-2 uppercase">
{link[1][2]}
</p>
</div>
<p class="p-4">{link[0]}</p>
</a>
{/each}
</div>

3
website/src/lib/components/markdown/layout.svelte
View File

@ -1,3 +0,0 @@
<article class="prose lg:prose-lg dark:prose-invert max-w-5xl mx-auto">
<slot />
</article>

47
website/src/lib/components/misc/legal.svelte
View File

@ -1,47 +0,0 @@
<script lang="ts">
import SvelteMarkdown from 'svelte-markdown';
import Layout from '$lib/components/markdown/layout.svelte';
import { X } from 'lucide-svelte';
import { getModalStore } from '@skeletonlabs/skeleton';
const modalStore = getModalStore();
const mdContent = `
## Spotube reborn 🦄
After facing a legal threat(s) from Spotify™, Spotube has moved from using Spotify™ API for music metadata purposes.
Now we're aiming to make Spotube an extensible music streaming platform and will continue to use free to use and open source music APIs.
So users can bring their own metadata APIs (already finished) and playback APIs (WIP). And can plug things together using community plugins.
To reduce friction, by default, from Spotube v5, it will contain MusicBrainz and ListenBrainz plugin (including support for custom instances). But you can always
bring your own metadata and playback APIs using plugins (there will be documentation on how to do that soon!).
Currently, the v5 is still under beta. So only nightly builds are downloadable. Please continue to use Nightly versions (it can contains bugs or not work at all) until stable Spotube v5 is released.
Btw, please support the [MetaBrainz Foundation](https://metabrainz.org/) for their amazing work on MusicBrainz and ListenBrainz.
They're open source and non-profit, so they need your support to keep the lights on and continue their work.
`;
</script>
<div class="bg-primary-100 p-5 rounded-lg overflow-scroll max-h-[95vh] relative">
<button
type="button"
class="btn variant-soft absolute top-2 right-2"
on:click={() => modalStore.close()}
>
<X />
</button>
<Layout>
<SvelteMarkdown source={mdContent} />
</Layout>
<p class="text-surface-500 mt-5">
Spotube has no affiliation with Spotify™ or any of its subsidiaries.
</p>
<div class="flex justify-end mt-4">
<button type="button" class="btn variant-filled-primary" on:click={() => modalStore.close()}>
Understood
</button>
</div>
</div>

30
website/src/lib/components/navbar/darkmode-toggle.svelte
View File

@ -1,30 +0,0 @@
<script lang="ts">
import { SlideToggle } from '@skeletonlabs/skeleton';
import { persisted } from '$lib/persisted-store';
import { browser } from '$app/environment';
export const isDark = persisted('dark-mode', false);
$: {
if (browser) {
$isDark
? document.documentElement.classList.add('dark')
: document.documentElement.classList.remove('dark');
}
}
export let label: string | undefined;
</script>
<div class="inline-flex gap-2">
<SlideToggle
label={label}
active="bg-primary-backdrop-token"
size="sm"
name="dark-mode"
checked={$isDark}
on:change={() => {
isDark.update((prev) => !prev);
}}
/>
</div>

57
website/src/lib/components/navbar/navbar.svelte
View File

@ -1,57 +0,0 @@
<script lang="ts">
import { page } from '$app/stores';
import { routes } from '$lib';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { SlideToggle, getDrawerStore } from '@skeletonlabs/skeleton';
import { Menu } from 'lucide-svelte';
import Fa from 'svelte-fa';
import DarkmodeToggle from './darkmode-toggle.svelte';
const drawerStore = getDrawerStore();
</script>
<header class="flex justify-between">
<div class="flex items-center justify-between w-full">
<div class="flex items-center gap-2">
<button
class="btn btn-icon md:hidden"
on:click={() => {
drawerStore.set({ id: 'navdrawer', width: '400px', open: !$drawerStore.open });
}}
>
<Menu />
</button>
<h2 class="text-3xl">
<a href="/" class="flex gap-2 items-center">
<img src="/images/spotube-logo.png" width="40px" alt="Spotube Logo" />
Spotube
</a>
</h2>
</div>
<a
class="mw-2 md:me-4"
href="https://github.com/KRTirtho/spotube?referrer=spotube.krtirtho.dev"
target="_blank"
>
<button class="btn variant-filled flex items-center gap-2">
<Fa icon={faGithub} />
Star us
</button>
</a>
</div>
<nav class="hidden md:flex gap-3 items-center">
{#each Object.entries(routes) as route}
<a href={route[0]}>
<button
class={`btn rounded-full flex gap-2 ${route[0] === '/downloads' ? 'variant-glass-primary' : 'variant-glass-surface'} ${$page.url.pathname.endsWith(route[0]) ? 'underline' : ''}`}
>
{#if route[1][1] !== null}
<svelte:component this={route[1][1]} size={16} />
{/if}
{route[1][0]}
</button>
</a>
{/each}
<DarkmodeToggle />
</nav>
</header>

37
website/src/lib/components/navdrawer/navdrawer.svelte
View File

@ -1,37 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import { routes } from '$lib';
import { ListBox, ListBoxItem, getDrawerStore } from '@skeletonlabs/skeleton';
import { X } from 'lucide-svelte';
import DarkmodeToggle from '../navbar/darkmode-toggle.svelte';
let currentRoute: string = $page.url.pathname;
const drawerStore = getDrawerStore();
</script>
<nav class="px-2">
<div class="flex justify-end">
<button class="btn btn-icon" on:click={drawerStore.close}>
<X />
</button>
</div>
<ListBox>
{#each Object.entries(routes) as route}
<ListBoxItem
bind:group={currentRoute}
name="item"
value={route[0]}
on:click={() => {
goto(route[0]);
}}
>
<div class="flex gap-2 items-center">
<svelte:component this={route[1][1]} size={16} />
{route[1][0]}
</div>
</ListBoxItem>
{/each}
<DarkmodeToggle label="Theme" />
</ListBox>
</nav>

106
website/src/lib/persisted-store.ts
View File

@ -1,106 +0,0 @@
import { writable as internal, type Writable } from 'svelte/store';
declare type Updater<T> = (value: T) => T;
declare type StoreDict<T> = { [key: string]: Writable<T> };
/* eslint-disable @typescript-eslint/no-explicit-any */
interface Stores {
local: StoreDict<any>;
session: StoreDict<any>;
}
const stores: Stores = {
local: {},
session: {}
};
export interface Serializer<T> {
parse(text: string): T;
stringify(object: T): string;
}
export type StorageType = 'local' | 'session';
export interface Options<T> {
serializer?: Serializer<T>;
storage?: StorageType;
syncTabs?: boolean;
onError?: (e: unknown) => void;
}
function getStorage(type: StorageType) {
return type === 'local' ? localStorage : sessionStorage;
}
/** @deprecated `writable()` has been renamed to `persisted()` */
export function writable<T>(key: string, initialValue: T, options?: Options<T>): Writable<T> {
console.warn(
"writable() has been deprecated. Please use persisted() instead.\n\nchange:\n\nimport { writable } from 'svelte-persisted-store'\n\nto:\n\nimport { persisted } from 'svelte-persisted-store'"
);
return persisted<T>(key, initialValue, options);
}
export function persisted<T>(key: string, initialValue: T, options?: Options<T>): Writable<T> {
const serializer = options?.serializer ?? JSON;
const storageType = options?.storage ?? 'local';
const syncTabs = options?.syncTabs ?? true;
const onError =
options?.onError ??
((e) =>
console.error(`Error when writing value from persisted store "${key}" to ${storageType}`, e));
const browser = typeof window !== 'undefined' && typeof document !== 'undefined';
const storage = browser ? getStorage(storageType) : null;
function updateStorage(key: string, value: T) {
try {
storage?.setItem(key, serializer.stringify(value));
} catch (e) {
onError(e);
}
}
function maybeLoadInitial(): T {
const json = storage?.getItem(key);
if (json) {
return <T>serializer.parse(json);
}
return initialValue;
}
if (!stores[storageType][key]) {
const initial = maybeLoadInitial();
const store = internal(initial, (set) => {
if (browser && storageType == 'local' && syncTabs) {
const handleStorage = (event: StorageEvent) => {
if (event.key === key) set(event.newValue ? serializer.parse(event.newValue) : null);
};
window.addEventListener('storage', handleStorage);
return () => window.removeEventListener('storage', handleStorage);
}
});
const { subscribe, set } = store;
stores[storageType][key] = {
set(value: T) {
set(value);
updateStorage(key, value);
},
update(callback: Updater<T>) {
return store.update((last) => {
const value = callback(last);
updateStorage(key, value);
return value;
});
},
subscribe
};
}
return stores[storageType][key];
}

44
website/src/lib/posts.ts
View File

@ -1,44 +0,0 @@
export interface Post {
date: string;
title: string;
tags: string[];
published: boolean;
author: string;
cover_img: string | null;
readingTime: {
text: string;
minutes: number;
time: number;
words: number;
};
reading_time_text: string;
preview_html: string;
preview: string;
previewHtml: string;
slug: string | null;
path: string;
}
export const getPosts = async () => {
// Fetch posts from local Markdown files
const posts: Post[] = await Promise.all(
Object.entries(import.meta.glob("../../posts/**/*.md")).map(
async ([path, resolver]) => {
const resolved = (await resolver()) as { metadata: Post };
const { metadata } = resolved;
const slug = path.split("/").pop()?.slice(0, -3) ?? "";
return { ...metadata, slug };
},
),
).then((posts) => posts.filter((post) => post.published));
let sortedPosts = posts.sort((a, b) => +new Date(b.date) - +new Date(a.date));
sortedPosts = sortedPosts.map((post) => ({
...post,
}));
return {
posts: sortedPosts,
};
};

32
website/src/modules/docs/Breadcrumbs.astro Normal file
View File

@ -0,0 +1,32 @@
---
const breadcrumbs = Astro.url.pathname
.split("/")
.filter((crumb) => Boolean(crumb) && crumb !== "docs");
---
<ol class="text-xs flex gap-2">
{
breadcrumbs.map((crumb, i) => (
<>
<li
class="capitalize"
class:list={{ "opacity-60": i !== breadcrumbs.length - 1 }}
>
{i > 0 &&
i !== breadcrumbs.length - 1 &&
breadcrumbs[0] !== "components" ? (
<a
href={`/docs/${breadcrumbs[0]}/${crumb}`}
class="hover:underline"
>
{crumb.replace("-", " ")}
</a>
) : (
crumb.replace("-", " ")
)}
</li>
{i !== breadcrumbs.length - 1 && <li class="opacity-60">&rsaquo;</li>}
</>
))
}
</ol>

47
website/src/modules/docs/TableOfContents.astro Normal file
View File

@ -0,0 +1,47 @@
---
interface PageHeadings {
depth: number;
slug: string;
text: string;
}
interface Props {
headings: PageHeadings[];
}
const { headings } = Astro.props;
function setDepthClass(depth: number) {
if (depth === 3) return "ml-4";
if (depth === 4) return "ml-6";
if (depth === 5) return "ml-8";
if (depth === 6) return "ml-10";
return;
}
---
{
headings.length > 0 && (
<nav class="text-sm space-y-2">
<div class="font-bold">On This Page</div>
<ul class="space-y-2">
<li>
<a href={`#_top`} class="anchor block">
Overview
</a>
</li>
{headings.map((heading: PageHeadings) => (
<li>
<a
href={`#${heading.slug}`}
class="anchor block"
class:list={`${setDepthClass(heading.depth)}`}
>
{heading.text}
</a>
</li>
))}
</ul>
</nav>
)
}

33
website/src/modules/downloads/download-item.astro Normal file
View File

@ -0,0 +1,33 @@
---
import type { IconType } from "react-icons";
interface Props {
links: Record<string, [string, IconType[], string]>;
}
const { links } = Astro.props;
---
<div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{
Object.entries(links).map((link) => {
return (
<a
href={link[1][0]}
class="flex flex-col btn preset-filled-primary-100-900 rounded-xl p-0 overflow-hidden border border-primary-500"
>
<div class="relative bg-primary-500 p-4 flex gap-4 justify-center rounded-t-xl w-full">
{link[1][1].map((icon) => {
const Icon = icon;
return <Icon />;
})}
<p class="chip preset-tonal-warning text-warning-400 absolute right-2 uppercase">
{link[1][2]}
</p>
</div>
<p class="p-4">{link[0]}</p>
</a>
);
})
}
</div>

39
website/src/modules/downloads/older/release-body.tsx Normal file
View File

@ -0,0 +1,39 @@
import type { RestEndpointMethodTypes } from "@octokit/rest";
import { LuBook, LuChevronDown, LuChevronUp } from "react-icons/lu";
import markdownIt from "markdown-it";
import sanitizeHtml from "sanitize-html";
interface Props {
release: RestEndpointMethodTypes["repos"]["getReleaseByTag"]["response"]["data"];
}
export default function ReleaseBody({ release }: Props) {
const summary = "Release Notes & Changelogs";
const body = release.body ?? "No release notes available.";
const md = markdownIt({
html: true,
linkify: true,
typographer: true,
});
const sanitizedBody = sanitizeHtml(md.render(body));
return (<details className="rounded-md p-4 my-4 preset-tonal-primary group">
<summary className="flex items-center cursor-pointer font-semibold text-lg gap-2">
<LuBook className="inline" />
{summary}
<span className="ml-auto flex items-center">
<span className="block group-open:hidden">
<LuChevronDown />
</span>
<span className="hidden group-open:block">
<LuChevronUp />
</span>
</span>
</summary>
<article
className="prose lg:prose-xl dark:prose-invert"
dangerouslySetInnerHTML={{ __html: sanitizedBody }}
/>
</details>)
}

183
website/src/modules/downloads/older/releases.tsx Normal file
View File

@ -0,0 +1,183 @@
import { formatDistanceToNow, formatRelative } from "date-fns";
import ReleaseBody from "~/modules/downloads/older/release-body";
import RootLayout from "~/layouts/RootLayout.astro";
import { Octokit, type RestEndpointMethodTypes } from "@octokit/rest";
import {
FaAndroid,
FaApple,
FaGit,
FaGooglePlay,
FaLinux,
FaWindows,
} from "react-icons/fa6";
import type { IconType } from "react-icons";
import { useEffect, useState } from "react";
function getIcon(assetUrl: string) {
assetUrl = assetUrl.toLowerCase();
if (assetUrl.includes("linux")) return FaLinux;
if (assetUrl.includes("windows")) return FaWindows;
if (assetUrl.includes("mac")) return FaApple;
if (assetUrl.includes("android")) return FaAndroid;
if (assetUrl.includes("playstore")) return FaGooglePlay;
if (assetUrl.includes("ios")) return FaApple;
return FaGit;
}
function formatName(assetName: string) {
// format the assetName to be
// {OS} ({package extension})
const lowerCasedAssetName = assetName.toLowerCase();
const extension = assetName.split(".").at(-1);
if (lowerCasedAssetName.includes("linux")) {
if (lowerCasedAssetName.includes("aarch64")) {
return [`Linux`, extension, `ARM64`]
}
return [`Linux`, extension, `x64`]
};
if (lowerCasedAssetName.includes("windows")) return [`Windows`, extension];
if (lowerCasedAssetName.includes("mac")) return [`macOS`, extension];
if (
lowerCasedAssetName.includes("android") ||
lowerCasedAssetName.includes("playstore")
)
return [`Android`, extension];
if (lowerCasedAssetName.includes("ios")) return [`iOS`, extension];
return [assetName.replace(`.${extension}`, ""), extension];
}
type OctokitAsset =
RestEndpointMethodTypes["repos"]["listReleases"]["response"]["data"][0]["assets"][0];
function groupByOS(downloads: OctokitAsset[]) {
return downloads.reduce(
(acc, val) => {
const lowName = val.name.toLowerCase();
if (lowName.includes("android") || lowName.includes("playstore"))
acc["android"] = [...(acc.android ?? []), val];
if (lowName.includes("linux"))
acc["linux"] = [...(acc["linux"] ?? []), val];
if (lowName.includes("windows"))
acc["windows"] = [...(acc["windows"] ?? []), val];
if (lowName.includes("ios")) acc["ios"] = [...(acc["ios"] ?? []), val];
if (lowName.includes("mac")) acc["mac"] = [...(acc["mac"] ?? []), val];
return acc;
},
{} as Record<
"android" | "ios" | "mac" | "linux" | "windows",
OctokitAsset[]
>
);
}
const icons: Record<string, [IconType, string]> = {
android: [FaAndroid, "#3DDC84"],
mac: [FaApple, ""],
ios: [FaApple, ""],
linux: [FaLinux, "#000000"],
windows: [FaWindows, "#0078D7"],
};
export default function ReleasesSection() {
const github = new Octokit();
const [releases, setReleases] = useState<RestEndpointMethodTypes["repos"]["listReleases"]["response"]["data"]>([]);
useEffect(() => {
github.repos.listReleases({
owner: "KRTirtho",
repo: "spotube",
}).then((res) => {
setReleases(
res.data.filter((release) => {
// Ignore all releases that were published before March 18 2025
return new Date(release.published_at ?? new Date()) >= new Date("2025-03-18T00:00:00Z");
})
);
})
}, [])
return <>
{
releases.map((release) => {
return (
<div>
<h4
className="h4"
title={formatRelative(
release.published_at ?? new Date(),
new Date()
)}
>
{release.tag_name}
<span className="text-sm font-normal">
(
{formatDistanceToNow(release.published_at ?? new Date(), {
addSuffix: true,
})}
)
</span>
</h4>
<div className="flex flex-col gap-5">
{Object.entries(groupByOS(release.assets)).map(
([osName, assets]) => {
const Icon = icons[osName][0];
return (
<div className="flex flex-col gap-4">
<h5 className="h5 capitalize">
<Icon className="inline" color={icons[osName][1]} />
{osName}
</h5>
<div className="flex flex-wrap gap-4">
{assets.map((asset) => {
const Icon = getIcon(asset.browser_download_url);
const formattedName = formatName(asset.name);
return (
<a href={asset.browser_download_url}>
<button className="btn preset-tonal-primary rounded p-0 flex flex-col">
<span className="bg-primary-500 rounded-t p-3 w-full">
<Icon className="inline" />
</span>
<span className="p-4 space-x-1">
<span>
{formattedName[0]}
</span>
<span className="chip preset-tonal-error">
{formattedName[1]}
</span>
{
formattedName[2] ?
<span className="chip preset-tonal-error">
{formattedName[2]}
</span> : <></>
}
</span>
</button>
</a>
);
})}
</div>
</div>
);
}
)}
</div>
<ReleaseBody release={release} />
<hr />
</div>
);
})
}
</>
}

80
website/src/modules/root/supporters.tsx Normal file
View File

@ -0,0 +1,80 @@
import { useEffect, useState } from "react";
import { Avatar } from "@skeletonlabs/skeleton-react";
interface Member {
MemberId: number;
createdAt: string;
type: string;
role: string;
isActive: boolean;
totalAmountDonated: number;
currency?: string;
lastTransactionAt: string;
lastTransactionAmount: number;
profile: string;
name: string;
company?: string;
description?: string;
image?: string;
email?: string;
twitter?: string;
github?: string;
website?: string;
tier?: string;
}
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
compactDisplay: 'short',
maximumFractionDigits: 0
});
export function Supporters() {
const [members, setMembers] = useState<Member[]>([]);
useEffect(() => {
// Fetch members data from an API or other source
async function fetchMembers() {
const res = await fetch('https://opencollective.com/spotube/members/all.json');
const members = (await res.json()) as Member[];
setMembers(
members
.filter((m) => m.totalAmountDonated > 0)
.sort((a, b) => b.totalAmountDonated - a.totalAmountDonated)
);
};
fetchMembers();
}, []);
return <div
className="gap-4 grid"
style={{
gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
gridAutoRows: 'minmax(50px, auto)',
}}
>
{
members.map((member) => {
return <a
key={member.MemberId}
href={member.profile}
target="_blank"
className="flex items-center gap-2 px-2 py-1 overflow-ellipsis preset-tonal-secondary rounded-lg"
>
<Avatar src={member.image} name={member.name} classes="w-10 h-10" />
<div className="flex flex-col overflow-hidden">
<p className="truncate">{member.name}</p>
<p className="capitalize text-sm underline decoration-dotted">
{formatter.format(member.totalAmountDonated)}
({member.role.toLowerCase()})
</p>
</div>
</a>;
})
}
</div>;
}

28
website/src/pages/about/index.astro Normal file
View File

@ -0,0 +1,28 @@
---
import RootLayout from "~/layouts/RootLayout.astro";
---
<RootLayout>
<section class="p-4 md:p-16">
<h2 class="h2">About</h2>
<br /><br />
<h4 class="h4">Author & Developer</h4>
<br />
<a
href="https://github.com/KRTirtho"
target="_blank"
class="btn preset-tonal-primary max-w-44 flex flex-col items-center p-4 rounded-2xl"
>
<img
alt="Author of Spotube"
src="https://github.com/KRTirtho.png"
class="h-auto w-40 rounded-full"
/>
<br />
<h5>Kingkor Roy Tirtho</h5>
<p>Flutter developer</p>
</a>
</section>
</RootLayout>

5
website/src/pages/blog/index.astro Normal file
View File

@ -0,0 +1,5 @@
---
import RootLayout from "~/layouts/RootLayout.astro";
---
<RootLayout />

43
website/src/pages/docs/[...slug]/index.astro Normal file
View File

@ -0,0 +1,43 @@
---
import RootLayout from "layouts/RootLayout.astro";
import type { GetStaticPaths } from "astro";
import { render } from "astro:content";
import { getCollection, getEntry } from "astro:content";
import DocSideBar from "~/components/navigation/DocSideBar.astro";
import Drawer from "~/components/drawer/Drawer.astro";
export const getStaticPaths = (async () => {
const pages = await getCollection("docs");
return pages.map((page) => ({
params: {
slug: page.id,
},
props: {
page: page,
},
}));
}) satisfies GetStaticPaths;
const { page } = Astro.props;
const { Content, remarkPluginFrontmatter } = await render(page);
let meta: Awaited<ReturnType<typeof getEntry>>;
if (page.id.startsWith("components/") || page.id.startsWith("integrations/")) {
meta = await getEntry("docs", page.id.replace(/\/[^/]*$/, "/meta"));
if (meta !== undefined) {
Object.assign(remarkPluginFrontmatter, meta.data);
}
}
---
<RootLayout
metadata={{
title: `Docs | ${page.data.title}`,
description: page.data.description,
}}
>
<Drawer class="fixed top-3 left-2 z-50 md:hidden">
<DocSideBar />
</Drawer>
<Content />
</RootLayout>

78
website/src/pages/downloads/index.astro Normal file
View File

@ -0,0 +1,78 @@
---
import type { IconType } from "react-icons";
import { LuDownload, LuHistory, LuPackage, LuSparkles } from "react-icons/lu";
import { ADS_SLOTS, extendedDownloadLinks } from "~/collections/app";
import Ads from "~/components/ads/Ads.astro";
import RootLayout from "~/layouts/RootLayout.astro";
import DownloadItems from "~/modules/downloads/download-item.astro";
const otherDownloads: [string, string, IconType][] = [
["/downloads/packages", "CLI Packages Managers", LuPackage],
["/downloads/older", "Older Versions", LuHistory],
["/downloads/nightly", "Nightly Builds", LuSparkles],
];
---
<RootLayout>
<section class="p-4 md:p-16 md:pb-4">
<h2 class="h2 flex items-center gap-4">
Download
<LuDownload className="inline" size={30} />
</h2>
<br /><br />
<h5 class="h5">Spotube is available for every platform</h5>
<br />
<!-- WARNING! -->
<h3 class="h3 text-red-500" data-svelte-h="svelte-1l4b696">
Versions of Spotube (&lt;=v4.0.2) are ceased to work with Spotify™ API.
<br />
So users can no longer use/download those versions.
<br />
Please wait for the next version that will remedy this issue by not using such
APIs.
</h3>
<p class="text-surface-500 mt-5" data-svelte-h="svelte-1nkw9cu">
Spotube has no affiliation with Spotify™ or any of its subsidiaries.
</p>
<br />
<br />
<!-- <DownloadItems links={extendedDownloadLinks} /> -->
<h6 class="h6 mb-5" data-svelte-h="svelte-1ws2638">
The new Spotube v5 is still under beta. Please use the Nightly version
until stable release.
</h6>
<!-- WARNING! -->
<div class="flex">
<a href="/downloads/nightly" class="flex gap-2 btn btn-lg preset-filled">
<LuDownload />
Download Nightly
</a>
</div>
<br />
<br />
<Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
<br />
<h2 class="h2">Other Downloads</h2>
<br /><br />
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 max-w-3xl">
{
otherDownloads.map((download) => {
const Icon = download[2];
return (
<a href={download[0]}>
<div class="btn preset-filled-primary-100-900 flex flex-col items-center p-4 gap-4">
<Icon />
<h5 class="h5">{download[1]}</h5>
</div>
</a>
);
})
}
</div>
<br />
<Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
</section>
</RootLayout>

48
website/src/pages/downloads/nightly/index.astro Normal file
View File

@ -0,0 +1,48 @@
---
import { LuBug, LuSparkles, LuTriangleAlert } from "react-icons/lu";
import { ADS_SLOTS, extendedNightlyDownloadLinks } from "~/collections/app";
import Ads from "~/components/ads/Ads.astro";
import RootLayout from "~/layouts/RootLayout.astro";
import DownloadItems from "~/modules/downloads/download-item.astro";
---
<RootLayout>
<section class="p-4 md:p-16">
<h2 class="h2 flex items-center gap-4">
Nightly Downloads
<LuSparkles className="inline" size={30} />
</h2>
<br /><br />
<aside class="preset-tonal-warning rounded-xl">
<div class="h3 pl-4 pt-4">
<LuTriangleAlert className="text-warning-500" />
</div>
<div class="p-4">
<h3 class="h3">
Nightly versions may contain bugs <LuBug className="inline" />
</h3>
<p>
Although Nightly versions are packed with newest and greatest
features, it's often unstable and not tested by the maintainers and
publisher(s).
<br />
<span class="text-error-500 underline decoration-dotted">
So use it at your own risk.
</span>
<span>
Go to <a href="/downloads" class="anchor">Downloads</a> for more stable
releases.
</span>
</p>
</div>
</aside>
<br />
<p class="mb-4">Following are the new v5 Nightly versions:</p>
<DownloadItems links={extendedNightlyDownloadLinks} />
<br />
<Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
<br />
</section>
</RootLayout>

12
website/src/pages/downloads/older/index.astro Normal file
View File

@ -0,0 +1,12 @@
---
import RootLayout from "~/layouts/RootLayout.astro";
import ReleasesSection from "~/modules/downloads/older/releases";
---
<RootLayout>
<div class="p-4 md:p-24">
<div class="flex flex-col gap-5">
<ReleasesSection client:only />
</div>
</div>
</RootLayout>

70
website/src/pages/downloads/packages/index.mdx Normal file
View File

@ -0,0 +1,70 @@
import { FaLinux, FaWindows, FaApple } from 'react-icons/fa6';
import RootLayout from 'layouts/RootLayout.astro';
import MarkdownLayout from 'layouts/MarkdownLayout.astro';
import Ads from 'components/ads/Ads.astro';
import { ADS_SLOTS } from 'collections/app';
<RootLayout>
<MarkdownLayout>
<div class="p-4 md:ps-24">
<h2 class="h2">Package Managers</h2>
Spotube is available in various Package Managers supported by Platform
## <FaLinux className="inline" /> Linux
### Flatpak📦
Make sure [Flatpak](https://flatpak.org) is installed in your Linux device & Run the following command in the terminal:
```bash
$ flatpak install com.github.KRTirtho.Spotube
```
### Arch User Repository (AUR)♾️
If you're an Arch Linux user, you can also install Spotube from AUR.
Make sure you have `yay`/`pamac`/`paru` installed in your system. And Run the Following command in the Terminal:
```bash
$ yay -Sy spotube-bin
```
```bash
$ pamac install spotube-bin
```
```bash
$ paru -Sy spotube-bin
```
<Ads
style="display:block; text-align:center;"
adSlot={ADS_SLOTS.packagePageArticle}
adLayout="in-article"
adFormat="fluid"
fullWidthResponsive={false}
/>
## <FaApple className="inline" /> MacOS
### Homebrew🍻
Spotube can be installed through Homebrew. We host our own cask definition thus you'll need to add our tap first:
```bash
$ brew tap krtirtho/apps
$ brew install --cask spotube
```
<Ads
style="display:block; text-align:center;"
adSlot={ADS_SLOTS.packagePageArticle}
adLayout="in-article"
adFormat="fluid"
fullWidthResponsive={false}
/>
## <FaWindows className="inline" color="#00A2F0" /> Windows
### Chocolatey🍫
Spotube is available in [community.chocolatey.org](https://community.chocolatey.org) repo. If you have chocolatey install in your system just run following command in an Elevated Command Prompt or PowerShell:
```powershell
$ choco install spotube
```
### WinGet💫
Spotube is also available in the Official Windows PackageManager WinGet. Make sure you have WinGet installed in your Windows machine and run following in a Terminal:
```powershell
$ winget install --id KRTirtho.Spotube
```
### Scoop🥄
Spotube is also available in [Scoop](https://scoop.sh) bucket. Make sure you have Scoop installed in your Windows machine and run following in a Terminal:
```powershell
$ scoop bucket add extras
$ scoop install spotube
```
</div>
</MarkdownLayout>
</RootLayout>

92
website/src/pages/index.astro Normal file
View File

@ -0,0 +1,92 @@
---
import { FaAndroid, FaApple, FaLinux, FaWindows } from "react-icons/fa6";
import RootLayout from "../layouts/RootLayout.astro";
import { LuDownload, LuHeart } from "react-icons/lu";
import { Supporters } from "~/modules/root/supporters";
import Ads from "~/components/ads/Ads.astro";
import { ADS_SLOTS } from "~/collections/app";
---
<RootLayout>
<section class="ps-4 pt-16 md:ps-24 md:pt-24">
<div class="flex flex-col gap-4">
<div>
<h1 class="h1">Spotube</h1>
<br />
<h3 class="h3">
A cross-platform extensible open-source music streaming platform
<div class="inline-flex gap-3 items-center">
<FaAndroid className="inline text-[#3DDC84]" />
<FaWindows className="inline text-[#00A2F0]" />
<FaLinux className="inline" />
<FaApple className="inline" />
</div>
</h3>
<p class="text-surface-500">
And it's <span class="text-error-500 underline decoration-dashed"
>not</span
>
built with Electron (web technologies)
</p>
<br />
<div class="flex items-center gap-3">
<a
href="https://news.ycombinator.com/item?id=39066136"
target="_blank"
>
<img
src="https://hackerbadge.vercel.app/api?id=39066136"
alt="HackerNews"
/>
</a>
<a
href="https://flathub.org/apps/com.github.KRTirtho.Spotube"
target="_blank"
>
<img
width="160"
alt="Download on Flathub"
src="https://flathub.org/api/badge?locale=en"
/>
</a>
</div>
</div>
<div class="flex justify-center">
<a
href="/downloads/nightly"
class="flex gap-2 btn btn-lg preset-filled"
>
<LuDownload />
Download Nightly
</a>
</div>
</div>
<br />
<Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" />
<br />
<div class="flex flex-col gap-4">
<h2 class="h2">
Supporters
<LuHeart className="inline-block" color="red" />
</h2>
<p class="text-surface-500">
We are grateful for the support of individuals and organizations who
have made Spotube possible.
</p>
<div class="flex justify-center">
<a href="https://opencollective.com/spotube/donate" target="_blank">
<img
src="https://opencollective.com/webpack/donate/button@2x.png?color=blue"
width="300"
alt="Open Collective"
/>
</a>
</div>
<Supporters client:only />
</div>
<br />
<Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" />
</section>
</RootLayout>

87
website/src/routes/+layout.svelte
View File

@ -1,87 +0,0 @@
<script lang="ts">
import '../app.postcss';
import Navbar from '$lib/components/navbar/navbar.svelte';
// Highlight JS
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/github-dark.css';
import { Drawer, getDrawerStore, getModalStore, Modal, storeHighlightJs, type ModalComponent } from '@skeletonlabs/skeleton';
import xml from 'highlight.js/lib/languages/xml'; // for HTML
import css from 'highlight.js/lib/languages/css';
import javascript from 'highlight.js/lib/languages/javascript';
import typescript from 'highlight.js/lib/languages/typescript';
hljs.registerLanguage('xml', xml); // for HTML
hljs.registerLanguage('css', css);
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('typescript', typescript);
storeHighlightJs.set(hljs);
// Floating UI for Popups
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
import { storePopup } from '@skeletonlabs/skeleton';
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
import { initializeStores } from '@skeletonlabs/skeleton';
import NavDrawer from '../lib/components/navdrawer/navdrawer.svelte';
import Fa from 'svelte-fa';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import Legal from '$lib/components/misc/legal.svelte';
import { onMount } from 'svelte';
initializeStores();
const drawerStore = getDrawerStore();
const modalStore = getModalStore();
const modalRegistry: Record<string, ModalComponent> = {
legal: { ref: Legal }
}
onMount(() => {
// Set the default modal to be open
modalStore.trigger({
type: "component",
component: "legal",
})
});
</script>
<main class="p-2 md:p-4 min-h-[90vh]">
<Modal components={modalRegistry} />
<Drawer>
{#if $drawerStore.id === 'navdrawer'}
<NavDrawer />
{/if}
</Drawer>
<Navbar />
<slot />
<br /><br />
</main>
<footer class="w-full bg-tertiary-backdrop-token p-4 flex justify-between">
<div>
<h3 class="h3">Spotube</h3>
<p>
Copyright © {new Date().getFullYear()} Spotube
</p>
</div>
<ul>
<li>
<a href="https://github.com/KRTirtho/spotube">
<Fa class="inline mr-1" icon={faGithub} size="lg" />
Github
</a>
</li>
<li>
<a href="https://opencollective.org/spotube">
<img
src="https://avatars0.githubusercontent.com/u/13403593?v=4"
alt="OpenCollective"
height="20"
width="20"
class="inline mr-1"
/>
OpenCollective
</a>
</li>
</ul>
</footer>

111
website/src/routes/+page.svelte
View File

@ -1,111 +0,0 @@
<script lang="ts">
import { faAndroid, faWindows, faApple, faLinux } from '@fortawesome/free-brands-svg-icons/index';
import Fa from 'svelte-fa';
import { Download, Heart } from 'lucide-svelte';
import type { PageData } from './$types';
import { Avatar } from '@skeletonlabs/skeleton';
import Ads from '$lib/components/ads/ads.svelte';
import { ADS_SLOTS } from '$lib';
export let data: PageData;
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
compactDisplay: 'short',
maximumFractionDigits: 0
});
</script>
<svelte:head>
<title>Spotube</title>
<meta name="description" content="An Open Source Music Client for every platform" />
<meta name="keywords" content="music, client, open source, music, streaming" />
<meta name="author" content="KRTirtho" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#1DB954" />
</svelte:head>
<section class="ps-4 pt-16 md:ps-24 md:pt-24">
<div class="flex flex-col gap-4">
<div>
<h1 class="h1">Spotube</h1>
<br />
<h3 class="h3">
A cross-platform Extensible open-source Music Streaming platform
<div class="inline-flex gap-3 items-center">
<Fa class="inline text-[#3DDC84]" icon={faAndroid} />
<Fa class="inline text-[#00A2F0]" icon={faWindows} />
<Fa class="inline" icon={faLinux} />
<Fa class="inline" icon={faApple} />
</div>
</h3>
<p class="text-surface-500">
And it's <span class="text-error-500 underline decoration-dashed">not</span>
built with Electron (web technologies)
</p>
<br />
<div class="flex items-center gap-3">
<a href="https://news.ycombinator.com/item?id=39066136" target="_blank">
<img src="https://hackerbadge.vercel.app/api?id=39066136" alt="HackerNews" />
</a>
<!-- <a href="https://flathub.org/apps/com.github.KRTirtho.Spotube" target="_blank">
<img
width="160"
alt="Download on Flathub"
src="https://flathub.org/api/badge?locale=en"
/>
</a> -->
</div>
</div>
<div class="flex justify-center">
<a href="/downloads" class="flex gap-2 btn variant-filled">
Download Nightly
<Download />
</a>
</div>
</div>
<br />
<Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" />
<br />
<div class="flex flex-col gap-4">
<h2 class="h2">
Supporters
<Heart class="inline-block" color="red" />
</h2>
<p class="text-surface-500">
We are grateful for the support of individuals and organizations who have made Spotube
possible.
</p>
<div class="flex justify-center">
<a href="https://opencollective.com/spotube/donate" target="_blank">
<img
src="https://opencollective.com/webpack/donate/button@2x.png?color=blue"
width="300"
alt="Open Collective"
/>
</a>
</div>
<div class="flex flex-wrap gap-4">
{#each data.props.members as member}
<a href={member.profile} target="_blank">
<div
class="flex flex-col items-center gap-2 overflow-ellipsis w-40 btn variant-ghost-secondary rounded-lg"
>
<Avatar src={member.image} initials={member.name} class="w-12 h-12" />
<p>{member.name}</p>
<p class="capitalize text-sm underline decoration-dotted">
{formatter.format(member.totalAmountDonated)}
({member.role.toLowerCase()})
</p>
</div>
</a>
{/each}
</div>
</div>
<br />
<Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" />
</section>

34
website/src/routes/+page.ts
View File

@ -1,34 +0,0 @@
interface Member {
MemberId: number;
createdAt: string;
type: string;
role: string;
isActive: boolean;
totalAmountDonated: number;
currency?: string;
lastTransactionAt: string;
lastTransactionAmount: number;
profile: string;
name: string;
company?: string;
description?: string;
image?: string;
email?: string;
twitter?: string;
github?: string;
website?: string;
tier?: string;
}
export const load = async () => {
const res = await fetch('https://opencollective.com/spotube/members/all.json');
const members = (await res.json()) as Member[];
return {
props: {
members: members
.filter((m) => m.totalAmountDonated > 0)
.sort((a, b) => b.totalAmountDonated - a.totalAmountDonated)
}
};
};

22
website/src/routes/about/+page.svelte
View File

@ -1,22 +0,0 @@
<section class="p-4 md:p-16">
<h2 class="h2">About</h2>
<br /><br />
<h4 class="h4">Author & Developer</h4>
<br />
<a
href="https://github.com/KRTirtho"
target="_blank"
class="btn variant-ghost-tertiary max-w-44 flex flex-col items-center p-4 rounded-2xl"
>
<img
alt="Author of Spotube"
src="https://github.com/KRTirtho.png"
class="h-auto w-40 rounded-full"
/>
<br />
<h5>Kingkor Roy Tirtho</h5>
<p>Flutter developer</p>
</a>
</section>

9
website/src/routes/api/posts/+server.ts
View File

@ -1,9 +0,0 @@
import { getPosts } from '$lib/posts';
import type { RequestHandler } from '@sveltejs/kit';
import { json } from '@sveltejs/kit';
export const GET: RequestHandler = async () => {
const { posts } = await getPosts();
return json(posts);
};

76
website/src/routes/blog/+page.svelte
View File

@ -1,76 +0,0 @@
<script lang="ts">
import { ADS_SLOTS } from '$lib';
import Ads from '$lib/components/ads/ads.svelte';
import type { Post } from '$lib/posts';
import type { PageData } from './$types';
export let data: PageData;
const formatter = Intl.DateTimeFormat('en-US', {
dateStyle: 'medium'
});
// insert a special Post as ad type in the posts array
const adAddedPosts: Post[] = [];
for (const post of data.posts) {
adAddedPosts.push(post);
const index = adAddedPosts.indexOf(post);
if (index % 3 === 0) {
adAddedPosts.push({
title: 'Ad',
author: 'Ad',
cover_img: 'ad.jpg',
date: new Date().toISOString(),
path: '/ad',
preview: 'Ad',
preview_html: 'Ad',
previewHtml: 'Ad',
published: true,
reading_time_text: 'Ad',
readingTime: { minutes: 1, words: 1, text: 'Ad', time: 1 },
slug: 'ad',
tags: ['Ad']
});
}
}
</script>
<section class="p-4 md:p-16 flex flex-col gap-4">
<h2 class="h2">Blog Posts</h2>
<br />
<article class="grid sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4">
{#each adAddedPosts as post}
{#if post.slug === 'ad'}
<p></p>
<Ads
adSlot={ADS_SLOTS.blogPageInFeed}
adFormat="fluid"
adLayoutKey="-6l+eh+17-40+59"
fullWidthResponsive={false}
/>
{:else}
<a
href={`/blog/${post.slug}`}
class="card hover:brightness-95 active:bg-secondary-hover-token active:scale-95 transition-all variant-ghost-secondary p-4"
>
<img
src={`/posts/${post.cover_img}`}
alt={post.title}
class="rounded h-56 w-full object-cover"
/>
<h4 class="h4">{post.title}</h4>
<p>By {post.author}</p>
<br />
<p class="text-end">
Published on
<span class="font-medium underline decoration-dotted">
{formatter.format(new Date(post.date))}
</span>
</p>
</a>
{/if}
{/each}
</article>
</section>

10
website/src/routes/blog/+page.ts
View File

@ -1,10 +0,0 @@
import type { Post } from "$lib/posts.js";
export const load = async ({ fetch }) => {
const res = await fetch("api/posts");
if (res.ok) {
const posts: Post[] = await res.json();
return { posts };
}
return { posts: [] };
};

33
website/src/routes/blog/[slug]/+page.svelte
View File

@ -1,33 +0,0 @@
<script lang="ts">
import Layout from '$lib/components/markdown/layout.svelte';
import type { PageData } from './$types';
export let data: PageData;
const {
Content,
meta: { date, title, readingTime, cover_img, author }
} = data as Required<PageData>;
</script>
<svelte:head>
<title>Blog | {title}</title>
</svelte:head>
<article class="p-4 md:p-16">
<section
class={cover_img
? 'bg-black/30 h-56 md:h-80 xl:h-96 bg-cover bg-center flex flex-col justify-end p-4 pb-0 md:p-8 md:pb-0 rounded-lg'
: null}
style={cover_img ? `background-image: url(/posts/${cover_img});` : ''}
>
<h1 class={`h1 text-stroke ${cover_img ? 'text-white' : ''}`}>{title}</h1>
<h4 class={`h4 text-stroke text-gray-400`}>By {author}</h4>
<br />
<p class={cover_img ? 'text-gray-400' : ''}>{new Date(date).toDateString()}</p>
<p class={`mb-16 ${cover_img ? 'text-gray-400' : ''}`}>{readingTime?.text ?? ''}</p>
</section>
<br />
<Layout>
<svelte:component this={Content} />
</Layout>
</article>

23
website/src/routes/blog/[slug]/+page.ts
View File

@ -1,23 +0,0 @@
import type { Post } from '$lib/posts.js';
export const load = async ({ params }) => {
const { slug } = params;
try {
const post = await import(`../../../../posts/${slug}.md`);
return {
Content: post.default as ConstructorOfATypedSvelteComponent,
meta: {
...post.metadata,
slug,
path: `/blog/${slug}`
} as Post
};
} catch (err) {
console.error('Error loading the post:', err);
return {
status: 500,
error: `Could not load the post: ${(err as Error).message || err}`
};
}
};

63
website/src/routes/downloads/+page.svelte
View File

@ -1,63 +0,0 @@
<script lang="ts">
import { ADS_SLOTS, extendedDownloadLinks } from '$lib';
import { Download } from 'lucide-svelte';
import { History, Sparkles, Package } from 'lucide-svelte';
// import DownloadItems from '$lib/components/downloads/download-items.svelte';
import Ads from '$lib/components/ads/ads.svelte';
const otherDownloads: [string, string, any][] = [
// ['/downloads/packages', 'CLI Packages Managers', Package],
// ['/downloads/older', 'Older Versions', History],
['/downloads/nightly', 'Nightly Builds', Sparkles]
];
</script>
<section class="p-4 md:p-16 md:pb-4">
<h2 class="h2 flex items-center gap-4">
Download
<Download class="inline" size={30} />
</h2>
<br /><br />
<h5 class="h5">Spotube is available for every platform</h5>
<br />
<!-- <DownloadItems links={extendedDownloadLinks} /> -->
<h3 class="h3 text-red-500">
Versions of Spotube (&lt;=v4.0.2) are ceased to work with Spotify™ API.
<br />
So users can no longer use/download those versions.
<br />
Please wait for the next version that will remedy this issue by not using such APIs.
</h3>
<p class="text-surface-500 mt-5">
Spotube has no affiliation with Spotify™ or any of its subsidiaries.
</p>
<br />
<br />
<h6 class="h6 mb-5">
The new Spotube v5 is still under beta. Please use the Nightly version until stable release.
</h6>
<a href="/downloads/nightly">
<button type="button" class="btn variant-filled"> Download Nightly </button>
</a>
<br />
<Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
<br />
<h2 class="h2">Other Downloads</h2>
<br /><br />
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 max-w-3xl">
{#each otherDownloads as download}
<a href={download[0]}>
<div class="btn rounded variant-soft-secondary flex flex-col items-center p-4 gap-4">
<svelte:component this={download[2]} />
<h5 class="h5">{download[1]}</h5>
</div>
</a>
{/each}
</div>
<br />
<Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
</section>

39
website/src/routes/downloads/nightly/+page.svelte
View File

@ -1,39 +0,0 @@
<script>
import { AlertTriangle, Bug, Sparkles } from 'lucide-svelte';
import DownloadItems from '$lib/components/downloads/download-items.svelte';
import { ADS_SLOTS, extendedNightlyDownloadLinks } from '$lib';
import Ads from '$lib/components/ads/ads.svelte';
</script>
<section class="p-4 md:p-16">
<h2 class="h2 flex items-center gap-4">
Nightly Downloads
<Sparkles class="inline" size={30} />
</h2>
<br /><br />
<aside class="alert variant-ghost-warning">
<div><AlertTriangle class="text-warning-500" /></div>
<div class="alert-message">
<h3 class="h3">Nightly versions may contain bugs <Bug class="inline" /></h3>
<p>
Although Nightly versions are packed with newest and greatest features, it's often unstable
and not tested by the maintainers and publisher(s).
<br />
<span class="text-error-500 underline decoration-dotted">
So use it at your own risk.
</span>
<span>
Go to <a href="/downloads" class="anchor">Downloads</a> for more stable releases.
</span>
</p>
</div>
</aside>
<br />
<p class="mb-4">Following are the new v5 Nightly versions:</p>
<DownloadItems links={extendedNightlyDownloadLinks} />
<br />
<Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
<br />
</section>

149
website/src/routes/downloads/older/+page.svelte
View File

@ -1,149 +0,0 @@
<script lang="ts">
import SvelteMarkdown from 'svelte-markdown';
import type { PageData } from './$types';
import { formatDistanceToNow, formatRelative } from 'date-fns';
import Layout from '$lib/components/markdown/layout.svelte';
import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
import { Book, History } from 'lucide-svelte';
import {
faAndroid,
faApple,
faGit,
faGooglePlay,
faLinux,
faWindows,
type IconDefinition
} from '@fortawesome/free-brands-svg-icons';
import Fa from 'svelte-fa';
import type { RestEndpointMethodTypes } from '@octokit/rest';
export let data: PageData;
function getIcon(assetUrl: string) {
assetUrl = assetUrl.toLowerCase();
if (assetUrl.includes('linux')) return faLinux;
if (assetUrl.includes('windows')) return faWindows;
if (assetUrl.includes('mac')) return faApple;
if (assetUrl.includes('android')) return faAndroid;
if (assetUrl.includes('playstore')) return faGooglePlay;
if (assetUrl.includes('ios')) return faApple;
return faGit;
}
function formatName(assetName: string) {
// format the assetName to be
// {OS} ({package extension})
const lowerCasedAssetName = assetName.toLowerCase();
const extension = assetName.split('.').at(-1);
if (lowerCasedAssetName.includes('linux')) return [`Linux`, extension];
if (lowerCasedAssetName.includes('windows')) return [`Windows`, extension];
if (lowerCasedAssetName.includes('mac')) return [`macOS`, extension];
if (lowerCasedAssetName.includes('android') || lowerCasedAssetName.includes('playstore'))
return [`Android`, extension];
if (lowerCasedAssetName.includes('ios')) return [`iOS`, extension];
return [assetName.replace(`.${extension}`, ''), extension];
}
type OctokitAsset =
RestEndpointMethodTypes['repos']['listReleases']['response']['data'][0]['assets'][0];
function groupByOS(downloads: OctokitAsset[]) {
return downloads.reduce(
(acc, val) => {
const lowName = val.name.toLowerCase();
if (lowName.includes('android') || lowName.includes('playstore'))
acc['android'] = [...(acc.android ?? []), val];
if (lowName.includes('linux')) acc['linux'] = [...(acc['linux'] ?? []), val];
if (lowName.includes('windows')) acc['windows'] = [...(acc['windows'] ?? []), val];
if (lowName.includes('ios')) acc['ios'] = [...(acc['ios'] ?? []), val];
if (lowName.includes('mac')) acc['mac'] = [...(acc['mac'] ?? []), val];
return acc;
},
{} as Record<'android' | 'ios' | 'mac' | 'linux' | 'windows', OctokitAsset[]>
);
}
const icons: Record<string, [IconDefinition, string]> = {
android: [faAndroid, '#3DDC84'],
mac: [faApple, ''],
ios: [faApple, ''],
linux: [faLinux, '#000000'],
windows: [faWindows, '#0078D7']
};
</script>
<div class="p-4 md:p-24">
<div class="flex gap-2 items-center">
<h2 class="h2">Older versions</h2>
<History />
</div>
<br /><br />
<h3 class="h3 text-red-500">
Versions of Spotube (&lt;=v4.0.2) are ceased to work with Spotify™ API.
<br />
So users can no longer use/download those versions.
<br />
Please wait for the next version that will remedy this issue by not using such APIs.
</h3>
<p class="text-surface-500 mt-20">
Spotube has no affiliation with Spotify™ or any of its subsidiaries.
</p>
<Accordion>
<div class="flex flex-col gap-5">
{#each data.releases as release}
<h4 class="h4" title={formatRelative(release.published_at ?? new Date(), new Date())}>
{release.tag_name}
<span class="text-sm font-normal">
({formatDistanceToNow(release.published_at ?? new Date(), { addSuffix: true })})
</span>
</h4>
<div class="flex flex-col gap-5">
{#each Object.entries(groupByOS(release.assets)) as [osName, assets]}
<div class="flex flex-col gap-4">
<h5 class="h5 capitalize">
<Fa class="inline" icon={icons[osName][0]} color={icons[osName][1]} />
{osName}
</h5>
<div class="flex flex-wrap gap-4">
{#each assets as asset}
<a href={asset.browser_download_url}>
<button class="btn variant-glass-primary rounded p-0 flex flex-col gap-2">
<span class="bg-primary-500 rounded-t p-3 w-full">
<Fa class="inline" icon={getIcon(asset.browser_download_url)} />
</span>
<span class="p-4">
{formatName(asset.name)[0]}
<span class="chip variant-ghost-error">
{formatName(asset.name)[1]}
</span>
</span>
</button>
</a>
{/each}
</div>
</div>
{/each}
</div>
<AccordionItem>
<svelte:fragment slot="lead">
<Book />
</svelte:fragment>
<svelte:fragment slot="summary">Release Notes & Changelogs</svelte:fragment>
<svelte:fragment slot="content">
<Layout>
<SvelteMarkdown source={release.body} />
</Layout>
</svelte:fragment>
</AccordionItem>
<hr />
{/each}
</div>
</Accordion>
</div>

14
website/src/routes/downloads/older/+page.ts
View File

@ -1,14 +0,0 @@
import type { PageLoad } from "./$types";
// import { Octokit } from "@octokit/rest";
// const github = new Octokit();
export const load: PageLoad = async () => {
// const { data: releases } = await github.repos.listReleases({
// owner: "KRTirtho",
// repo: "spotube",
// });
return {
releases: [],
};
};

112
website/src/routes/downloads/packages/+page.svx
View File

@ -1,112 +0,0 @@
---
title: CLI Packages Managers
author: Kingkor Roy Tirtho
---
<script lang="ts">
import { faLinux, faWindows, faApple } from '@fortawesome/free-brands-svg-icons';
import Fa from 'svelte-fa';
// import Ads from '$lib/components/ads/ads.svelte';
// import { ADS_SLOTS } from '$lib';
</script>
<div class="p-4 md:ps-24">
<h2 class="h2">Package Managers</h2>
Spotube is available in various Package Managers supported by Platform
<h3 class="h3 text-red-500">
Versions of Spotube (&lt;=v4.0.2) are ceased to work with Spotify™ API.
<br />
So users can no longer use/download those versions.
<br />
Please wait for the next version that will remedy this issue by not using such APIs.
</h3>
<p class="text-surface-500 mt-20">
Spotube has no affiliation with Spotify™ or any of its subsidiaries.
</p>
<!--
## <Fa class="inline" icon={faLinux} /> Linux
### Flatpak📦
Make sure [Flatpak](https://flatpak.org) is installed in your Linux device & Run the following command in the terminal:
```bash
$ flatpak install com.github.KRTirtho.Spotube
```
### Arch User Repository (AUR)♾️
If you're an Arch Linux user, you can also install Spotube from AUR.
Make sure you have `yay`/`pamac`/`paru` installed in your system. And Run the Following command in the Terminal:
```bash
$ yay -Sy spotube-bin
```
```bash
$ pamac install spotube-bin
```
```bash
$ paru -Sy spotube-bin
```
<Ads
style="display:block; text-align:center;"
adSlot={ADS_SLOTS.packagePageArticle}
adLayout="in-article"
adFormat="fluid"
fullWidthResponsive={false}
/>
## <Fa class="inline" icon={faApple} /> MacOS
### Homebrew🍻
Spotube can be installed through Homebrew. We host our own cask definition thus you'll need to add our tap first:
```bash
$ brew tap krtirtho/apps
$ brew install --cask spotube
```
<Ads
style="display:block; text-align:center;"
adSlot={ADS_SLOTS.packagePageArticle}
adLayout="in-article"
adFormat="fluid"
fullWidthResponsive={false}
/>
## <Fa class="inline" icon={faWindows} color="#00A2F0" /> Windows
### Chocolatey🍫
Spotube is available in [community.chocolatey.org](https://community.chocolatey.org) repo. If you have chocolatey install in your system just run following command in an Elevated Command Prompt or PowerShell:
```powershell
$ choco install spotube
```
### WinGet💫
Spotube is also available in the Official Windows PackageManager WinGet. Make sure you have WinGet installed in your Windows machine and run following in a Terminal:
```powershell
$ winget install --id KRTirtho.Spotube
```
### Scoop🥄
Spotube is also available in [Scoop](https://scoop.sh) bucket. Make sure you have Scoop installed in your Windows machine and run following in a Terminal:
```powershell
$ scoop bucket add extras
$ scoop install spotube
```
-->
</div>

5
website/src/routes/other-downloads/stable-downloads/+page.ts
View File

@ -1,5 +0,0 @@
import { redirect } from "@sveltejs/kit";
export function load(){
redirect(301, "/downloads");
}

92
website/src/styles/global.css Normal file
View File

@ -0,0 +1,92 @@
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@source '../../node_modules/@skeletonlabs/skeleton-react/dist';
@import "@skeletonlabs/skeleton";
@import "@skeletonlabs/skeleton/optional/presets";
@import "@skeletonlabs/skeleton/themes/wintry";
body {
background-image: radial-gradient(
at 50% 0%,
var(--color-secondary-100-900) 0px,
transparent 75%
),
radial-gradient(
at 100% 0%,
var(--color-tertiary-300-700) 0px,
transparent 50%
);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
h1,
h2,
h3,
h4,
h5,
h6 {
scroll-margin-top: 80px;
}
.prose code::before,
.prose code::after {
content: none !important;
}
.prose code:not(pre code) {
@apply bg-primary-100-900 px-1 py-0.5 rounded-sm text-primary-900-100;
}
.prose a code {
@apply text-primary-500! underline decoration-primary-500;
}
/* Astro PageFind */
.pagefind-ui {
--pagefind-ui-scale: 0.75;
--pagefind-ui-primary: var(--color-primary-500);
--pagefind-ui-text: var(--color-surface-900-100);
--pagefind-ui-border: var(--color-surface-300-700);
--pagefind-ui-border-width: 1px;
--pagefind-ui-border-radius: 0.5rem;
width: 50%;
@apply hidden md:block;
}
.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
position: absolute;
left: 0;
right: 0;
margin-top: 0px;
z-index: 9999;
padding: 0 2em 1em;
overflow-y: auto;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.1);
border-bottom-right-radius: var(--pagefind-ui-border-radius);
border-bottom-left-radius: var(--pagefind-ui-border-radius);
@apply bg-white dark:bg-surface-900;
}
.pagefind-ui .pagefind-ui__result-link {
color: var(--pagefind-ui-primary);
}
.pagefind-ui .pagefind-ui__result-excerpt {
@apply font-normal text-surface-900-100;
}
.pagefind-ui .pagefind-ui__search-input {
@apply bg-white/50! dark:bg-surface-900/50!;
}
.pagefind-ui .pagefind-ui__search-clear {
@apply bg-inherit!;
}

57
website/src/utils/get-collection.ts Normal file
View File

@ -0,0 +1,57 @@
import type { HTMLAttributes } from "astro/types";
import { getCollection, type CollectionEntry } from "astro:content";
interface NavigationItem extends HTMLAttributes<"a"> {
title: string;
tag?: string;
}
export interface NavigationGroup {
title: string;
items: NavigationItem[];
}
function sortByOrder(a: CollectionEntry<"docs">, b: CollectionEntry<"docs">) {
return a.data.order - b.data.order;
}
async function queryCollection(startsWith: string) {
return (
await getCollection("docs", (entry) => {
if (!entry.id.startsWith(startsWith)) return false;
if (entry.id.split("/").length > 2) return false;
if (entry.id.endsWith("meta")) return false;
return true;
})
).toSorted(sortByOrder);
}
function toNavItems(entries: CollectionEntry<"docs">[]) {
return entries.map((page) => ({
title: page.data.title,
href: `/docs/${page.id}`,
}));
}
export async function getNavigationCollection() {
// Define navigation sections
const sections: [
string,
string,
(prefix: string) => Promise<CollectionEntry<"docs">[]>
][] = [
["Get Started", "get-started/", queryCollection],
["Developing Plugins", "developing-plugins/", queryCollection],
["Plugin APIs", "plugin-apis/", queryCollection],
["Reference", "reference/", queryCollection],
];
// Build navigation dynamically
const navigation: NavigationGroup[] = await Promise.all(
sections.map(async ([title, prefix, queryFn]) => ({
title,
items: toNavItems(await queryFn(prefix)),
}))
);
return navigation;
}

BIN
website/static/posts/images/from-idea-to-impact/cover.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 168 KiB

BIN
website/static/posts/images/spotube-basics/cover.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 204 KiB

77
website/svelte.config.js
View File

@ -1,77 +0,0 @@
import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsvex } from 'mdsvex';
import readingTime from 'remark-reading-time';
import remarkExternalLinks from 'remark-external-links';
import slugPlugin from 'rehype-slug';
import autolinkHeadings from 'rehype-autolink-headings';
import relativeImages from 'mdsvex-relative-images';
import remarkGfm from 'remark-gfm';
import rehypeAutoAds from 'rehype-auto-ads';
/** @type {import('@sveltejs/kit').Config} */
const config = {
extensions: ['.svelte', '.svx', '.md'],
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: [
vitePreprocess(),
mdsvex({
extensions: ['.svx', '.md'],
highlight: {},
layout: './src/lib/components/markdown/layout.svelte',
smartypants: {
dashes: 'oldschool'
},
remarkPlugins: [
remarkGfm,
// adds a `readingTime` frontmatter attribute
readingTime(),
relativeImages,
// external links open in a new tab
[remarkExternalLinks, { target: '_blank', rel: 'noopener' }]
],
rehypePlugins: [
slugPlugin,
[
autolinkHeadings,
{
behavior: 'wrap'
}
],
[
rehypeAutoAds,
{
adCode: `
<br/>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-6419300932495863"
data-ad-slot="6788673194"
></ins>
<br/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
`,
paragraphInterval: 2,
maxAds: 5,
}
]
]
})
],
vitePlugin: {
inspector: true
},
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;

28
website/tailwind.config.ts
View File

@ -1,28 +0,0 @@
import { join } from 'path';
import type { Config } from 'tailwindcss';
import typography from '@tailwindcss/typography';
import { skeleton } from '@skeletonlabs/tw-plugin';
export default {
darkMode: 'class',
content: [
'./src/**/*.{html,js,svelte,ts}',
join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
],
theme: {
extend: {}
},
plugins: [
typography,
skeleton({
themes: {
preset: [
{
name: 'wintry',
enhancements: true
}
]
}
})
]
} satisfies Config;

6
website/tests/test.ts
View File

@ -1,6 +0,0 @@
import { expect, test } from '@playwright/test';
test('index page has expected h1', async ({ page }) => {
await page.goto('/');
await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
});

Some files were not shown because too many files have changed in this diff Show More