Use bun
This commit is contained in:
343
pages/index.vue
343
pages/index.vue
@@ -4,206 +4,213 @@ useHead({ title: "Ghostwriter" });
|
||||
const { user } = useUserSession();
|
||||
|
||||
const stravaLink = computed(() => {
|
||||
return `https://www.strava.com/athletes/${toValue(user).id}`;
|
||||
return `https://www.strava.com/athletes/${toValue(user).id}`;
|
||||
});
|
||||
|
||||
interface FormData {
|
||||
enabled: boolean;
|
||||
language: string;
|
||||
units: string;
|
||||
tone: string[];
|
||||
highlights: string[];
|
||||
enabled: boolean;
|
||||
language: string;
|
||||
units: string;
|
||||
tone: string[];
|
||||
highlights: string[];
|
||||
}
|
||||
|
||||
const preferences = useState<FormData>("preferences", () => ({
|
||||
enabled: false,
|
||||
language: "English",
|
||||
units: "Metric",
|
||||
tone: [],
|
||||
highlights: [],
|
||||
enabled: false,
|
||||
language: "English",
|
||||
units: "Metric",
|
||||
tone: [],
|
||||
highlights: [],
|
||||
}));
|
||||
|
||||
const { data, status } = useFetch("/api/preferences", {
|
||||
lazy: true,
|
||||
lazy: true,
|
||||
});
|
||||
|
||||
// @ts-expect-error typing issue - missing transform
|
||||
syncRef(data, preferences, { direction: "ltr", deep: true });
|
||||
|
||||
onMounted(() => {
|
||||
saveOp.resume();
|
||||
saveOp.resume();
|
||||
});
|
||||
|
||||
const saveOp = watchPausable(
|
||||
preferences,
|
||||
async (newData) => {
|
||||
await $fetch("/api/preferences", {
|
||||
method: "PUT",
|
||||
body: toValue(preferences),
|
||||
});
|
||||
},
|
||||
{
|
||||
initialState: "paused",
|
||||
deep: true,
|
||||
},
|
||||
preferences,
|
||||
async (newData) => {
|
||||
await $fetch("/api/preferences", {
|
||||
method: "PUT",
|
||||
body: toValue(preferences),
|
||||
});
|
||||
},
|
||||
{
|
||||
initialState: "paused",
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UContainer class="max-w-2xl py-8 flex flex-col gap-4">
|
||||
<div class="font-bold text-lg">Welcome to Ghostwriter!</div>
|
||||
<UContainer class="max-w-2xl py-8 flex flex-col gap-4">
|
||||
<div class="font-bold text-lg">Welcome to Ghostwriter!</div>
|
||||
|
||||
<div>
|
||||
Let's generate fun and engaging titles and descriptions for your Strava
|
||||
activities automatically, right when they are created. Customize your
|
||||
preferences below.
|
||||
</div>
|
||||
<div>
|
||||
Let's generate fun and engaging titles and descriptions for your
|
||||
Strava activities automatically, right when they are created.
|
||||
Customize your preferences below.
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Add a touch of creativity to your Strava workouts. Simply enable it and
|
||||
choose your language, and we'll do the rest!
|
||||
</div>
|
||||
</UContainer>
|
||||
<div>
|
||||
Add a touch of creativity to your Strava workouts. Simply enable it
|
||||
and choose your language, and we'll do the rest!
|
||||
</div>
|
||||
</UContainer>
|
||||
|
||||
<UContainer class="max-w-2xl py-8 flex flex-col gap-4">
|
||||
<div class="font-bold text-lg">❤️ Support</div>
|
||||
<UCard class="">
|
||||
<div class="flex flex-col gap-8">
|
||||
Ghostwriter 👻 is free to use, but it takes time and resources to keep
|
||||
it running smoothly. If you enjoy it, consider supporting the app and
|
||||
its creator - every bit helps!
|
||||
</div>
|
||||
<template #footer>
|
||||
<ULink href="https://buymeacoffee.com/mariosant" target="_blank">
|
||||
<NuxtImg
|
||||
src="images/bmac-orange-button.png"
|
||||
height="32px"
|
||||
class="h-8"
|
||||
/>
|
||||
</ULink>
|
||||
</template>
|
||||
</UCard>
|
||||
</UContainer>
|
||||
<UContainer class="max-w-2xl py-8 flex flex-col gap-4">
|
||||
<div class="font-bold text-lg">❤️ Support</div>
|
||||
<UCard class="">
|
||||
<div class="flex flex-col gap-8">
|
||||
Ghostwriter 👻 is free to use, but it takes time and resources
|
||||
to keep it running smoothly. If you enjoy it, consider
|
||||
supporting the app and its creator - every bit helps!
|
||||
</div>
|
||||
<template #footer>
|
||||
<ULink
|
||||
href="https://buymeacoffee.com/mariosant"
|
||||
target="_blank"
|
||||
>
|
||||
<NuxtImg
|
||||
src="images/bmac-orange-button.png"
|
||||
height="32px"
|
||||
class="h-8"
|
||||
/>
|
||||
</ULink>
|
||||
</template>
|
||||
</UCard>
|
||||
</UContainer>
|
||||
|
||||
<UContainer
|
||||
class="max-w-2xl py-8 flex flex-col gap-4"
|
||||
v-if="status === 'success'"
|
||||
>
|
||||
<div class="font-bold text-lg">🛠️ Preferences</div>
|
||||
<UCard class="">
|
||||
<div class="flex flex-col gap-8">
|
||||
<CardField>
|
||||
<template #title> Enabled </template>
|
||||
<template #description>
|
||||
Enable/disable automatic generation.
|
||||
</template>
|
||||
<template #value>
|
||||
<USwitch size="lg" v-model="preferences.enabled" />
|
||||
</template>
|
||||
</CardField>
|
||||
<UContainer
|
||||
class="max-w-2xl py-8 flex flex-col gap-4"
|
||||
v-if="status === 'success'"
|
||||
>
|
||||
<div class="font-bold text-lg">🛠️ Preferences</div>
|
||||
<UCard class="">
|
||||
<div class="flex flex-col gap-8">
|
||||
<CardField>
|
||||
<template #title> Enabled </template>
|
||||
<template #description>
|
||||
Enable/disable automatic generation.
|
||||
</template>
|
||||
<template #value>
|
||||
<USwitch size="lg" v-model="preferences.enabled" />
|
||||
</template>
|
||||
</CardField>
|
||||
|
||||
<CardField>
|
||||
<template #title> Model language </template>
|
||||
<template #description>
|
||||
Language for generated titles and descriptions.
|
||||
</template>
|
||||
<template #value>
|
||||
<USelect
|
||||
class="min-w-28"
|
||||
:items="languages"
|
||||
v-model="preferences.language"
|
||||
/>
|
||||
</template>
|
||||
</CardField>
|
||||
<CardField>
|
||||
<template #title> Model language </template>
|
||||
<template #description>
|
||||
Language for generated titles and descriptions.
|
||||
</template>
|
||||
<template #value>
|
||||
<USelect
|
||||
class="min-w-28"
|
||||
:items="languages"
|
||||
v-model="preferences.language"
|
||||
/>
|
||||
</template>
|
||||
</CardField>
|
||||
|
||||
<CardField>
|
||||
<template #title> Unit system </template>
|
||||
<template #description>
|
||||
Unit system preference, used in descriptions.
|
||||
</template>
|
||||
<template #value>
|
||||
<USelect
|
||||
class="min-w-28"
|
||||
v-model="preferences.units"
|
||||
:items="units"
|
||||
/>
|
||||
</template>
|
||||
</CardField>
|
||||
<CardField>
|
||||
<template #title> Unit system </template>
|
||||
<template #description>
|
||||
Unit system preference, used in descriptions.
|
||||
</template>
|
||||
<template #value>
|
||||
<USelect
|
||||
class="min-w-28"
|
||||
v-model="preferences.units"
|
||||
:items="units"
|
||||
/>
|
||||
</template>
|
||||
</CardField>
|
||||
|
||||
<CardField>
|
||||
<template #title> Tone </template>
|
||||
<template #description>
|
||||
Choose one or more writing styles you like.
|
||||
</template>
|
||||
<template #value>
|
||||
<USelect
|
||||
multiple
|
||||
class="min-w-28 max-w-64"
|
||||
v-model="preferences.tone"
|
||||
:items="tones"
|
||||
placeholder="None specified (Use all)"
|
||||
/>
|
||||
</template>
|
||||
</CardField>
|
||||
<CardField>
|
||||
<template #title> Tone </template>
|
||||
<template #description>
|
||||
Choose one or more writing styles you like.
|
||||
</template>
|
||||
<template #value>
|
||||
<USelect
|
||||
multiple
|
||||
class="min-w-28 max-w-64"
|
||||
v-model="preferences.tone"
|
||||
:items="tones"
|
||||
placeholder="None specified (Use all)"
|
||||
/>
|
||||
</template>
|
||||
</CardField>
|
||||
|
||||
<CardField>
|
||||
<template #title> Highlight </template>
|
||||
<template #description>
|
||||
Choose what Ghostwriter should focus on.
|
||||
</template>
|
||||
<template #value>
|
||||
<USelect
|
||||
multiple
|
||||
class="min-w-28 max-w-64"
|
||||
:items="highlights"
|
||||
v-model="preferences.highlights"
|
||||
placeholder="None specified (Use all)"
|
||||
/>
|
||||
</template>
|
||||
</CardField>
|
||||
</div>
|
||||
</UCard>
|
||||
</UContainer>
|
||||
<CardField>
|
||||
<template #title> Highlight </template>
|
||||
<template #description>
|
||||
Choose what Ghostwriter should focus on.
|
||||
</template>
|
||||
<template #value>
|
||||
<USelect
|
||||
multiple
|
||||
class="min-w-28 max-w-64"
|
||||
:items="highlights"
|
||||
v-model="preferences.highlights"
|
||||
placeholder="None specified (Use all)"
|
||||
/>
|
||||
</template>
|
||||
</CardField>
|
||||
</div>
|
||||
</UCard>
|
||||
</UContainer>
|
||||
|
||||
<UContainer class="max-w-2xl py-8 flex flex-col gap-4">
|
||||
<div class="font-bold text-lg">🪪 Your connected Strava account</div>
|
||||
<UCard class="bg-neutral-50 dark:bg-slate-800">
|
||||
<div class="flex flex-col gap-8">
|
||||
<CardField>
|
||||
<template #title> Full name </template>
|
||||
<template #description>
|
||||
Full name from your linked Strava account.
|
||||
</template>
|
||||
<template #value>
|
||||
{{ user.name }}
|
||||
</template>
|
||||
</CardField>
|
||||
<UContainer class="max-w-2xl py-8 flex flex-col gap-4">
|
||||
<div class="font-bold text-lg">🪪 Your connected Strava account</div>
|
||||
<UCard class="bg-neutral-50 dark:bg-slate-800">
|
||||
<div class="flex flex-col gap-8">
|
||||
<CardField>
|
||||
<template #title> Full name </template>
|
||||
<template #description>
|
||||
Full name from your linked Strava account.
|
||||
</template>
|
||||
<template #value>
|
||||
{{ user.name }}
|
||||
</template>
|
||||
</CardField>
|
||||
|
||||
<CardField>
|
||||
<template #title> Country </template>
|
||||
<template #description>
|
||||
Country associated with your Strava account.
|
||||
</template>
|
||||
<template #value> {{ user.country }} </template>
|
||||
</CardField>
|
||||
<CardField>
|
||||
<template #title> Country </template>
|
||||
<template #description>
|
||||
Country associated with your Strava account.
|
||||
</template>
|
||||
<template #value> {{ user.country }} </template>
|
||||
</CardField>
|
||||
|
||||
<CardField>
|
||||
<template #title> Athlete ID </template>
|
||||
<template #description>
|
||||
Your Athlete ID. Click it to view your profile on Strava.</template
|
||||
>
|
||||
<CardField>
|
||||
<template #title> Athlete ID </template>
|
||||
<template #description>
|
||||
Your Athlete ID. Click it to view your profile on
|
||||
Strava.</template
|
||||
>
|
||||
|
||||
<template #value>
|
||||
<ULink :href="stravaLink" class="underline flex items-center gap-2">
|
||||
{{ user.id }}
|
||||
<UIcon
|
||||
name="heroicons:arrow-top-right-on-square"
|
||||
class="size-4"
|
||||
/>
|
||||
</ULink>
|
||||
</template>
|
||||
</CardField>
|
||||
</div>
|
||||
</UCard>
|
||||
</UContainer>
|
||||
<template #value>
|
||||
<ULink
|
||||
:href="stravaLink"
|
||||
class="underline flex items-center gap-2"
|
||||
>
|
||||
{{ user.id }}
|
||||
<UIcon
|
||||
name="heroicons:arrow-top-right-on-square"
|
||||
class="size-4"
|
||||
/>
|
||||
</ULink>
|
||||
</template>
|
||||
</CardField>
|
||||
</div>
|
||||
</UCard>
|
||||
</UContainer>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user