feat: update footer link formatting and add shadcn-nuxt integration

- Refactored footer.vue to improve link formatting.
- Updated nuxt.config.ts to include shadcn-nuxt and added necessary HTML attributes and meta tags for SEO.
- Added new dependencies in package.json for class-variance-authority, clsx, lucide-vue-next, reka-ui, shadcn-nuxt, tailwind-merge, and tailwindcss-animate.
- Cleaned up unused template tags in headlines.vue, index.vue, and news/[provider]/[slug].vue.
- Simplified sources.vue template structure.
- Improved login.vue styles for better animation.
- Enhanced google.ts API handler for better error handling and code clarity.
- Updated find/newsOrg.ts to ensure consistent code style.
- Added CSS variables and improved Tailwind configuration in main.css and tailwind.config.js.
- Created components.json for shadcn integration and added new UI components (Alert, Button, Progress) with respective styles and variants.
- Implemented utility functions in utils.ts for class name merging and value updating.

components/footer.vue

@@ -12,9 +12,7 @@ const localeLink = useLocalePath();
       Inspired by Ground.News
     </span>
     <span class="">
-      <NuxtLink :to="localeLink('/sources')">
-        Sources
-      </NuxtLink>
+      <NuxtLink :to="localeLink('/sources')"> Sources </NuxtLink>
     </span>
   </div>
 </template>

components/ui/alert/Alert.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { type AlertVariants, alertVariants } from ".";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+  variant?: AlertVariants["variant"];
+}>();
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>

components/ui/alert/AlertDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

components/ui/alert/AlertTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>

components/ui/alert/index.ts

@@ -0,0 +1,23 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export { default as Alert } from "./Alert.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
+
+export const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;

components/ui/button/Button.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Primitive, type PrimitiveProps } from "reka-ui";
+import { type ButtonVariants, buttonVariants } from ".";
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"];
+  size?: ButtonVariants["size"];
+  class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

components/ui/button/index.ts

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export { default as Button } from "./Button.vue";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 rounded",
+        xs: "h-7 rounded px-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

components/ui/progress/Progress.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+  ProgressIndicator,
+  ProgressRoot,
+  type ProgressRootProps,
+} from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      class="h-full w-full flex-1 bg-primary transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>

components/ui/progress/index.ts

@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.vue";