Add TailwindCSS (#1252)

* Setup TailwindCSS

* Fully setup configuration

* Refactor some tailwind variables
This commit is contained in:
Evan Song
2024-07-06 20:57:32 -07:00
committed by GitHub
parent 0f2ddb452c
commit abec2e48d4
176 changed files with 7905 additions and 7433 deletions

View File

@@ -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;
};