mariosant/ghostwriter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Marios Antonoudiou
2025-04-07 12:59:20 +03:00
commit d47a21fcbf
47 changed files with 12696 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/app.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<NuxtRouteAnnouncer />
<UApp :toaster="{ position: 'bottom-center' }">
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UApp>
</template>

17
app/assets/css/main.css Normal file
View File

@@ -0,0 +1,17 @@
@import "tailwindcss";
@import "@nuxt/ui";
@theme static {
--ui-primary: var(--color-orange-500);
--ui-color-primary-50: var(--color-orange-50);
--ui-color-primary-100: var(--color-orange-100);
--ui-color-primary-200: var(--color-orange-200);
--ui-color-primary-300: var(--color-orange-300);
--ui-color-primary-400: var(--color-orange-400);
--ui-color-primary-500: var(--color-orange-500);
--ui-color-primary-600: var(--color-orange-700);
--ui-color-primary-700: var(--color-orange-700);
--ui-color-primary-800: var(--color-orange-800);
--ui-color-primary-900: var(--color-orange-900);
}

14
app/components/app-bar.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup lang="ts">
const { user, clear } = useUserSession();
</script>
<template>
<div class="w-full h-16 bg-black text-white flex">
<UContainer class="max-w-2xl flex justify-between items-center">
<div class="font-bold text-xl">Joyful</div>
<UDropdownMenu :items="[{ label: 'Log out', onSelect: () => clear() }]">
<UAvatar :src="user!.avatar" />
</UDropdownMenu>
</UContainer>
</div>
</template>

12
app/components/app-footer.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<UContainer
class="max-w-2xl py-8 text-sm text-slate-600 place-items-center grid gap-4"
>
<div class="text-center">
Built with 💪 in Athens, Greece 🇬🇷 by Marios Antonoudiou.
<ULink class="underline">Send feedback</ULink> or
<ULink class="underline">buy me a coffee</ULink>.
</div>
<NuxtImg src="/images/powered-by-strava.svg" width="80px" />
</UContainer>
</template>

13
app/components/card-field.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="flex justify-between items-center gap-4">
<div>
<div class="font-semibold"><slot name="title" /></div>
<div class="text-slate-600 text-sm">
<slot name="description" />
</div>
</div>
<div class="text-nowrap flex items-end">
<slot name="value" />
</div>
</div>
</template>

30
app/components/register.vue Normal file
View File

@@ -0,0 +1,30 @@
<script setup lang="ts">
import AppFooter from "./app-footer.vue";
const { openInPopup } = useUserSession();
</script>
<template>
<UContainer class="flex justify-center w-full p-16">
<UCard class="w-md">
<div class="flex flex-col gap-4 items-center justify-center text-center">
<UIcon name="heroicons:user" class="size-16" />
<div class="font-bold text-xl">Joyful</div>
<div>
Welcome to Joyful. Use the button below to sign in with your Strava
account.
</div>
<div>
<div
aria-role="button"
@click="openInPopup('/auth/strava')"
class="cursor-pointer"
>
<NuxtImg src="/images/connect-with-strava.svg" />
</div>
</div>
</div>
</UCard>
</UContainer>
<AppFooter />
</template>

10
app/layouts/default.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<AuthState v-slot="{ loggedIn }">
<Register v-if="!loggedIn" />
<template v-if="loggedIn">
<AppBar />
<slot />
<AppFooter />
</template>
</AuthState>
</template>

126
app/pages/index.vue Normal file
View File

@@ -0,0 +1,126 @@
<script setup lang="ts">
const { user } = useUserSession();
const stravaLink = computed(() => {
return `https://www.strava.com/athletes/${toValue(user).id}`;
});
interface FormData {
enabled: boolean;
language: string;
}
const preferences = useState<FormData>("preferences", () => ({
enabled: false,
language: "English",
}));
const { status } = useLazyFetch("/api/preferences", {
onResponse({ error, response }) {
if (error) {
return;
}
preferences.value = response._data;
},
});
watchEffect(async () => {
await $fetch("/api/preferences", {
method: "PUT",
body: toValue(preferences),
});
});
</script>
<template>
<UContainer class="max-w-2xl py-8 flex flex-col gap-4">
<div class="font-bold text-lg">Welcome to Joyful!</div>
<div>
Joyful automatically generates fun and engaging titles and descriptions
for your Strava activities, 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>
<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>
</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">
<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> 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>

7
app/utils/languages.ts Normal file
View File

@@ -0,0 +1,7 @@
export const languages = ref([
"English",
"Greek",
"German",
"Italian",
"Polish",
]);