You've already forked AstralRinth
forked from didirus/AstralRinth
Add TailwindCSS (#1252)
* Setup TailwindCSS * Fully setup configuration * Refactor some tailwind variables
This commit is contained in:
@@ -1,20 +1,20 @@
|
||||
import type { CookieOptions } from '#app'
|
||||
import type { CookieOptions } from "#app";
|
||||
|
||||
export type ProjectDisplayMode = 'list' | 'grid' | 'gallery'
|
||||
export type DarkColorTheme = 'dark' | 'oled' | 'retro'
|
||||
export type ProjectDisplayMode = "list" | "grid" | "gallery";
|
||||
export type DarkColorTheme = "dark" | "oled" | "retro";
|
||||
|
||||
export interface NumberFlag {
|
||||
min: number
|
||||
max: number
|
||||
min: number;
|
||||
max: number;
|
||||
}
|
||||
|
||||
export type BooleanFlag = boolean
|
||||
export type BooleanFlag = boolean;
|
||||
|
||||
export type RadioFlag = ProjectDisplayMode | DarkColorTheme
|
||||
export type RadioFlag = ProjectDisplayMode | DarkColorTheme;
|
||||
|
||||
export type FlagValue = BooleanFlag /* | NumberFlag | RadioFlag */
|
||||
export type FlagValue = BooleanFlag; /* | NumberFlag | RadioFlag */
|
||||
|
||||
const validateValues = <K extends PropertyKey>(flags: Record<K, FlagValue>) => flags
|
||||
const validateValues = <K extends PropertyKey>(flags: Record<K, FlagValue>) => flags;
|
||||
|
||||
export const DEFAULT_FEATURE_FLAGS = validateValues({
|
||||
// Developer flags
|
||||
@@ -48,58 +48,58 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
|
||||
// dataPackSearchDisplayMode: 'list',
|
||||
// userProjectDisplayMode: 'list',
|
||||
// collectionProjectDisplayMode: 'list',
|
||||
} as const)
|
||||
} as const);
|
||||
|
||||
export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
|
||||
export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS;
|
||||
|
||||
export type AllFeatureFlags = {
|
||||
[key in FeatureFlag]: (typeof DEFAULT_FEATURE_FLAGS)[key]
|
||||
}
|
||||
[key in FeatureFlag]: (typeof DEFAULT_FEATURE_FLAGS)[key];
|
||||
};
|
||||
|
||||
export type PartialFeatureFlags = Partial<AllFeatureFlags>
|
||||
export type PartialFeatureFlags = Partial<AllFeatureFlags>;
|
||||
|
||||
const COOKIE_OPTIONS = {
|
||||
maxAge: 60 * 60 * 24 * 365 * 10,
|
||||
sameSite: 'lax',
|
||||
sameSite: "lax",
|
||||
secure: true,
|
||||
httpOnly: false,
|
||||
path: '/',
|
||||
} satisfies CookieOptions<PartialFeatureFlags>
|
||||
path: "/",
|
||||
} satisfies CookieOptions<PartialFeatureFlags>;
|
||||
|
||||
export const useFeatureFlags = () =>
|
||||
useState<AllFeatureFlags>('featureFlags', () => {
|
||||
const config = useRuntimeConfig()
|
||||
useState<AllFeatureFlags>("featureFlags", () => {
|
||||
const config = useRuntimeConfig();
|
||||
|
||||
const savedFlags = useCookie<PartialFeatureFlags>('featureFlags', COOKIE_OPTIONS)
|
||||
const savedFlags = useCookie<PartialFeatureFlags>("featureFlags", COOKIE_OPTIONS);
|
||||
|
||||
if (!savedFlags.value) {
|
||||
savedFlags.value = {}
|
||||
savedFlags.value = {};
|
||||
}
|
||||
|
||||
const flags: AllFeatureFlags = JSON.parse(JSON.stringify(DEFAULT_FEATURE_FLAGS))
|
||||
const flags: AllFeatureFlags = JSON.parse(JSON.stringify(DEFAULT_FEATURE_FLAGS));
|
||||
|
||||
const overrides = config.public.featureFlagOverrides as PartialFeatureFlags
|
||||
const overrides = config.public.featureFlagOverrides as PartialFeatureFlags;
|
||||
for (const key in overrides) {
|
||||
if (key in flags) {
|
||||
const flag = key as FeatureFlag
|
||||
const value = overrides[flag] as (typeof flags)[FeatureFlag]
|
||||
flags[flag] = value
|
||||
const flag = key as FeatureFlag;
|
||||
const value = overrides[flag] as (typeof flags)[FeatureFlag];
|
||||
flags[flag] = value;
|
||||
}
|
||||
}
|
||||
|
||||
for (const key in savedFlags.value) {
|
||||
if (key in flags) {
|
||||
const flag = key as FeatureFlag
|
||||
const value = savedFlags.value[flag] as (typeof flags)[FeatureFlag]
|
||||
flags[flag] = value
|
||||
const flag = key as FeatureFlag;
|
||||
const value = savedFlags.value[flag] as (typeof flags)[FeatureFlag];
|
||||
flags[flag] = value;
|
||||
}
|
||||
}
|
||||
|
||||
return flags
|
||||
})
|
||||
return flags;
|
||||
});
|
||||
|
||||
export const saveFeatureFlags = () => {
|
||||
const flags = useFeatureFlags()
|
||||
const cookie = useCookie<PartialFeatureFlags>('featureFlags', COOKIE_OPTIONS)
|
||||
cookie.value = flags.value
|
||||
}
|
||||
const flags = useFeatureFlags();
|
||||
const cookie = useCookie<PartialFeatureFlags>("featureFlags", COOKIE_OPTIONS);
|
||||
cookie.value = flags.value;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user