feat: upgrade to v3 api

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: Deploy tweaks to GitHub Pages
+name: Deploy App to GitHub Pages
 
 on:
   push:
@@ -31,10 +31,6 @@ jobs:
           bun-version: latest
 
       - run: bun ci
-
-      - name: Validate Tweaks
-        run: bun test
-
       - run: bun run build
 
       - name: Setup Pages

.gitignore

@@ -1,8 +1,3 @@
 node_modules/
-tweaks/schema.json
-tweaks/tweaks.json
-tweaks/*.md
-# Ignore any sub directories under tweaks
-tweaks/*/
 dist/
 *.py

src/index.tsx

@@ -13,11 +13,11 @@ const router = createHashRouter([
     children: [
       {
         path: '/',
-        lazy: () => import('./pages/Dashboard'),
+        lazy: () => import('./pages/DashboardPage'),
       },
       {
-        path: '/tweaks/:id',
-        lazy: () => import('./pages/Tweak'),
+        path: '/apps/:id',
+        lazy: () => import('./pages/AppPage'),
       },
     ],
   },

src/pages/Tweak.tsx → src/pages/AppPage.tsx

@@ -1,40 +1,41 @@
-import type { Tweak } from '@/types';
 import { type FC } from 'react';
 import type { LoaderFunctionArgs } from 'react-router-dom';
-import { fetch } from '../utils/fetch';
 import { useLoaderData } from '@rain-cafe/react-utils/react-router';
 import { AppImage } from '../components/AppImage';
 import { Label } from '../components/Label';
 import { Pill } from '../components/Pill';
 import { Card } from '../components/Card';
 import { Code } from '../components/Code';
+import { getApp } from '@/service/protontweaks';
 
 const ALIASES: Record<string, string> = {
   esync: 'PROTON_NO_ESYNC',
   fsync: 'PROTON_NO_FSYNC',
 };
 
 export async function loader({ params }: LoaderFunctionArgs) {
-  return await fetch<Tweak>(`https://api.protontweaks.com/v2/${params.id}.json`);
+  if (!params.id) throw new Error('No app id available.');
+
+  return await getApp(params.id);
 }
 
 export const Component: FC = () => {
-  const tweak = useLoaderData<typeof loader>();
-  const environmentVariables = Object.entries(tweak.tweaks.env);
-  const settings = Object.entries(tweak.tweaks.settings);
+  const app = useLoaderData<typeof loader>();
+  const environmentVariables = Object.entries(app.tweaks.env);
+  const settings = Object.entries(app.tweaks.settings);
 
   return (
     <>
       <div className="flex flex-col gap-2 items-center">
-        <AppImage id={tweak.id} />
+        <AppImage id={app.id} />
         <div className="text-md">
-          {tweak.name} ({tweak.id})
+          {app.name} ({app.id})
         </div>
       </div>
       <Card>
         <Label label="Protontricks Command" />
         <Code shell>
-          protontricks {tweak.id} {tweak.tweaks.tricks.join(' ')}
+          protontricks {app.id} {app.tweaks.tricks.join(' ')}
         </Code>
         <Label label="Launch Options" />
         <Code>
@@ -50,7 +51,7 @@ export const Component: FC = () => {
       </Card>
       <Card>
         <Label label="Tricks">
-          {tweak.tweaks.tricks.map((trick, index) => (
+          {app.tweaks.tricks.map((trick, index) => (
             <Pill key={index}>{trick}</Pill>
           ))}
         </Label>

src/pages/Dashboard.tsx → src/pages/DashboardPage.tsx

@@ -1,22 +1,19 @@
 import { type FC, useMemo, useEffect } from 'react';
-import { fetch } from '../utils/fetch';
-import type { Tweaks } from '@/types';
 import { useLoaderData } from '@rain-cafe/react-utils/react-router';
 import { useSearch } from '../context/search';
 import { AppImage } from '../components/AppImage';
+import { getApps } from '@/service/protontweaks';
 
 export async function loader() {
-  return {
-    tweaks: await fetch<Tweaks>('https://api.protontweaks.com/v2/tweaks.json'),
-  };
+  return await getApps();
 }
 
 export const Component: FC = () => {
-  const { tweaks } = useLoaderData<typeof loader>();
+  const apps = useLoaderData<typeof loader>();
   const search = useSearch();
-  const filteredTweaks = useMemo(() => {
-    return tweaks.tweaks.filter((tweak) => tweak.name.toLowerCase().includes(search.toLowerCase()));
-  }, [tweaks, search]);
+  const filteredApps = useMemo(() => {
+    return apps.filter((app) => app.name.toLowerCase().includes(search.toLowerCase()));
+  }, [apps, search]);
 
   useEffect(() => {
     const listener = () => {};
@@ -31,8 +28,8 @@ export const Component: FC = () => {
 
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-3 gap-5 mx-auto">
-      {filteredTweaks?.map((tweak) => (
-        <AppImage key={tweak.id} id={tweak.id} to={`/tweaks/${tweak.id}`} />
+      {filteredApps?.map((app) => (
+        <AppImage key={app.id} id={app.id} to={`/apps/${app.id}`} />
       ))}
     </div>
   );

src/service/protontweaks.ts

@@ -0,0 +1,16 @@
+import type { App, AppsList } from '@/types';
+import { fetch } from '@/utils/fetch';
+
+export async function getAppsList() {
+  return await fetch<AppsList>('https://api.protontweaks.com/v3/apps.json');
+}
+
+export async function getApps() {
+  const appsList = await getAppsList();
+
+  return appsList.apps;
+}
+
+export async function getApp(id: string) {
+  return await fetch<App>(`https://api.protontweaks.com/v3/${id}.json`);
+}

src/types/tweaks.ts → src/types/apps.ts

@@ -1,10 +1,10 @@
-export type Tweaks = {
+export type AppsList = {
   sha: string;
   short_sha: string;
-  tweaks: Pick<Tweak, 'id' | 'name'>[];
+  apps: Pick<App, 'id' | 'name'>[];
 };
 
-export type Tweak = {
+export type App = {
   id: string;
   name: string;
   tweaks: {

src/types/index.ts

@@ -1 +1 @@
-export * from './tweaks';
+export * from './apps';