1
0
Files
AstralRinth/apps/frontend/src/plugins/cosmetics.ts
Sasha Sorokin 1e0d7c7e28 Rewrite cosmetics and theme preferences (#1328)
- Cosmetics and theme preferences are now only stored in cookies instead
  of a combination of both cookies and state.

- The theme plugin now supports client hints. This allows the server
  to render a page using the client-preferred theme provided it supplies
  this information (any browser other than Firefox), helping to avoid an
  annoying flash while the page is hydrating.

- For the future, the theme plugin now supports additional light themes.
  Light theme preferences are currently not stored, but this can easily
  be fixed if the need arises.

- The previous workaround using the Nitro plugin has been removed. Its
  functionality is now handled by the Nuxt theme plugin with cleaner
  code.

- All pages and components now use the new plugins.

- Compared to the previous attempt, this commit has been improved to be
  more robust in cases where the theme cookie contains invalid values.

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
2024-07-31 19:42:55 +00:00

61 lines
1.4 KiB
TypeScript

import type { DarkTheme } from "./theme/index.ts";
export type DisplayMode = "list" | "gallery" | "grid";
export type DisplayLocation =
| "mod"
| "plugin"
| "resourcepack"
| "modpack"
| "shader"
| "datapack"
| "user"
| "collection";
export interface Cosmetics {
searchLayout: boolean;
projectLayout: boolean;
advancedRendering: boolean;
externalLinksNewTab: boolean;
notUsingBlockers: boolean;
hideModrinthAppPromos: boolean;
preferredDarkTheme: DarkTheme;
searchDisplayMode: Record<DisplayLocation, DisplayMode>;
hideStagingBanner: boolean;
}
export default defineNuxtPlugin({
name: "cosmetics",
setup() {
const cosmetics = useCookie<Cosmetics>("cosmetics", {
maxAge: 60 * 60 * 24 * 365 * 10,
sameSite: "lax",
secure: true,
httpOnly: false,
path: "/",
default: () => ({
searchLayout: false,
projectLayout: false,
advancedRendering: true,
externalLinksNewTab: true,
notUsingBlockers: false,
hideModrinthAppPromos: false,
preferredDarkTheme: "dark",
searchDisplayMode: {
mod: "list",
plugin: "list",
resourcepack: "gallery",
modpack: "list",
shader: "gallery",
datapack: "list",
user: "list",
collection: "list",
},
hideStagingBanner: false,
}),
});
return { provide: { cosmetics } };
},
});