Clean code.

.github/workflows/self_deploy.yml

@@ -8,10 +8,10 @@ on:
 jobs:
   deploy:
     runs-on: ubuntu-latest
-    
+
     env:
       DEPLOY_URL: ${{ secrets.DEPLOY_URL }}
-    
+
     steps:
       - name: Send deployment request
         id: deploy-request
@@ -24,11 +24,11 @@ jobs:
             --silent \
             --show-error \
             "${{ secrets.DEPLOY_URL }}" || echo "Failed to send request")
-          
+
           if [ $? -eq 0 ]; then
             echo "Deployment request sent successfully"
             echo "Response: $RESPONSE"
           else
             echo "Error sending deployment request"
             exit 1
-          fi
+          fi

.gitignore

@@ -25,4 +25,4 @@ logs
 
 # Scraping data
 .venv
-__pycache__
+__pycache__

components/ui/command/Command.vue

@@ -1,30 +1,33 @@
 <script setup lang="ts">
-import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
-import { computed, type HTMLAttributes, reactive, ref, watch } from 'vue'
-import { provideCommandContext } from '.'
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui";
+import { computed, type HTMLAttributes, reactive, ref, watch } from "vue";
+import { provideCommandContext } from ".";
 
-const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
-  modelValue: '',
-})
+const props = withDefaults(
+  defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: "",
+  },
+);
 
-const emits = defineEmits<ListboxRootEmits>()
+const emits = defineEmits<ListboxRootEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const allItems = ref<Map<string, string>>(new Map())
-const allGroups = ref<Map<string, Set<string>>>(new Map())
+const allItems = ref<Map<string, string>>(new Map());
+const allGroups = ref<Map<string, Set<string>>>(new Map());
 
-const { contains } = useFilter({ sensitivity: 'base' })
+const { contains } = useFilter({ sensitivity: "base" });
 const filterState = reactive({
-  search: '',
+  search: "",
   filtered: {
     /** The count of all visible items. */
     count: 0,
@@ -33,59 +36,66 @@ const filterState = reactive({
     /** Set of groups with at least one visible item. */
     groups: new Set() as Set<string>,
   },
-})
+});
 
 function filterItems() {
   if (!filterState.search) {
-    filterState.filtered.count = allItems.value.size
+    filterState.filtered.count = allItems.value.size;
     // Do nothing, each item will know to show itself because search is empty
-    return
+    return;
   }
 
   // Reset the groups
-  filterState.filtered.groups = new Set()
-  let itemCount = 0
+  filterState.filtered.groups = new Set();
+  let itemCount = 0;
 
   // Check which items should be included
   for (const [id, value] of allItems.value) {
-    const score = contains(value, filterState.search)
-    filterState.filtered.items.set(id, score ? 1 : 0)
-    if (score)
-      itemCount++
+    const score = contains(value, filterState.search);
+    filterState.filtered.items.set(id, score ? 1 : 0);
+    if (score) itemCount++;
   }
 
   // Check which groups have at least 1 item shown
   for (const [groupId, group] of allGroups.value) {
     for (const itemId of group) {
       if (filterState.filtered.items.get(itemId)! > 0) {
-        filterState.filtered.groups.add(groupId)
-        break
+        filterState.filtered.groups.add(groupId);
+        break;
       }
     }
   }
 
-  filterState.filtered.count = itemCount
+  filterState.filtered.count = itemCount;
 }
 
 function handleSelect() {
-  filterState.search = ''
+  filterState.search = "";
 }
 
-watch(() => filterState.search, () => {
-  filterItems()
-})
+watch(
+  () => filterState.search,
+  () => {
+    filterItems();
+  },
+);
 
 provideCommandContext({
   allItems,
   allGroups,
   filterState,
-})
+});
 </script>
 
 <template>
   <ListboxRoot
     v-bind="forwarded"
-    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+    :class="
+      cn(
+        'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+        props.class,
+      )
+    "
   >
     <slot />
   </ListboxRoot>

components/ui/command/CommandDialog.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
-import { Dialog, DialogContent } from '@/components/ui/dialog'
-import { useForwardPropsEmits } from 'reka-ui'
-import Command from './Command.vue'
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { useForwardPropsEmits } from "reka-ui";
+import Command from "./Command.vue";
 
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
   <Dialog v-bind="forwarded">
     <DialogContent class="overflow-hidden p-0 shadow-lg">
-      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+      <Command
+        class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+      >
         <slot />
       </Command>
     </DialogContent>

components/ui/command/CommandEmpty.vue

@@ -1,25 +1,32 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { Primitive } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import { useCommand } from '.'
+import type { PrimitiveProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { Primitive } from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
+import { useCommand } from ".";
 
-const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<
+  PrimitiveProps & { class?: HTMLAttributes["class"] }
+>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const { filterState } = useCommand()
-const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
-)
+const { filterState } = useCommand();
+const isRender = computed(
+  () => !!filterState.search && filterState.filtered.count === 0,
+);
 </script>
 
 <template>
-  <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+  <Primitive
+    v-if="isRender"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
+  >
     <slot />
   </Primitive>
 </template>

components/ui/command/CommandGroup.vue

@@ -1,44 +1,55 @@
 <script setup lang="ts">
-import type { ListboxGroupProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
-import { computed, type HTMLAttributes, onMounted, onUnmounted } from 'vue'
-import { provideCommandGroupContext, useCommand } from '.'
+import type { ListboxGroupProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui";
+import { computed, type HTMLAttributes, onMounted, onUnmounted } from "vue";
+import { provideCommandGroupContext, useCommand } from ".";
 
-const props = defineProps<ListboxGroupProps & {
-  class?: HTMLAttributes['class']
-  heading?: string
-}>()
+const props = defineProps<
+  ListboxGroupProps & {
+    class?: HTMLAttributes["class"];
+    heading?: string;
+  }
+>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const { allGroups, filterState } = useCommand()
-const id = useId()
+const { allGroups, filterState } = useCommand();
+const id = useId();
 
-const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+const isRender = computed(() =>
+  !filterState.search ? true : filterState.filtered.groups.has(id),
+);
 
-provideCommandGroupContext({ id })
+provideCommandGroupContext({ id });
 onMounted(() => {
-  if (!allGroups.value.has(id))
-    allGroups.value.set(id, new Set())
-})
+  if (!allGroups.value.has(id)) allGroups.value.set(id, new Set());
+});
 onUnmounted(() => {
-  allGroups.value.delete(id)
-})
+  allGroups.value.delete(id);
+});
 </script>
 
 <template>
   <ListboxGroup
     v-bind="delegatedProps"
     :id="id"
-    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+    :class="
+      cn(
+        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+        props.class,
+      )
+    "
     :hidden="isRender ? undefined : true"
   >
-    <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+    <ListboxGroupLabel
+      v-if="heading"
+      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    >
       {{ heading }}
     </ListboxGroupLabel>
     <slot />

components/ui/command/CommandInput.vue

@@ -1,27 +1,33 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { Search } from 'lucide-vue-next'
-import { ListboxFilter, type ListboxFilterProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
-import { useCommand } from '.'
+import { cn } from "@/lib/utils";
+import { Search } from "lucide-vue-next";
+import {
+  ListboxFilter,
+  type ListboxFilterProps,
+  useForwardProps,
+} from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
+import { useCommand } from ".";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<ListboxFilterProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps<
+  ListboxFilterProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 
-const { filterState } = useCommand()
+const { filterState } = useCommand();
 </script>
 
 <template>
@@ -31,7 +37,12 @@ const { filterState } = useCommand()
       v-bind="{ ...forwardedProps, ...$attrs }"
       v-model="filterState.search"
       auto-focus
-      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+      :class="
+        cn(
+          'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+          props.class,
+        )
+      "
     />
   </div>
 </template>

components/ui/command/CommandItem.vue

@@ -1,32 +1,39 @@
 <script setup lang="ts">
-import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { useCurrentElement } from '@vueuse/core'
-import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
-import { computed, type HTMLAttributes, onMounted, onUnmounted, ref } from 'vue'
-import { useCommand, useCommandGroup } from '.'
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { useCurrentElement } from "@vueuse/core";
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
+import {
+  computed,
+  type HTMLAttributes,
+  onMounted,
+  onUnmounted,
+  ref,
+} from "vue";
+import { useCommand, useCommandGroup } from ".";
 
-const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<ListboxItemEmits>()
+const props = defineProps<
+  ListboxItemProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<ListboxItemEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const id = useId()
-const { filterState, allItems, allGroups } = useCommand()
-const groupContext = useCommandGroup()
+const id = useId();
+const { filterState, allItems, allGroups } = useCommand();
+const groupContext = useCommandGroup();
 
 const isRender = computed(() => {
   if (!filterState.search) {
     return true;
-  }
-  else {
-    const filteredCurrentItem = filterState.filtered.items.get(id)
+  } else {
+    const filteredCurrentItem = filterState.filtered.items.get(id);
     // If the filtered items is undefined means not in the all times map yet
     // Do the first render to add into the map
     if (filteredCurrentItem === undefined) {
@@ -36,30 +43,31 @@ const isRender = computed(() => {
     // Check with filter
     return filteredCurrentItem > 0;
   }
-})
+});
 
-const itemRef = ref()
-const currentElement = useCurrentElement(itemRef)
+const itemRef = ref();
+const currentElement = useCurrentElement(itemRef);
 onMounted(() => {
-  if (!(currentElement.value instanceof HTMLElement))
-    return
+  if (!(currentElement.value instanceof HTMLElement)) return;
 
   // textValue to perform filter
-  allItems.value.set(id, currentElement.value.textContent ?? props.value.toString())
+  allItems.value.set(
+    id,
+    currentElement.value.textContent ?? props.value.toString(),
+  );
 
-  const groupId = groupContext?.id
+  const groupId = groupContext?.id;
   if (groupId) {
     if (!allGroups.value.has(groupId)) {
-      allGroups.value.set(groupId, new Set([id]))
-    }
-    else {
-      allGroups.value.get(groupId)?.add(id)
+      allGroups.value.set(groupId, new Set([id]));
+    } else {
+      allGroups.value.get(groupId)?.add(id);
     }
   }
-})
+});
 onUnmounted(() => {
-  allItems.value.delete(id)
-})
+  allItems.value.delete(id);
+});
 </script>
 
 <template>
@@ -68,10 +76,17 @@ onUnmounted(() => {
     v-bind="forwarded"
     :id="id"
     ref="itemRef"
-    :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
-    @select="() => {
-      filterState.search = ''
-    }"
+    :class="
+      cn(
+        'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+        props.class,
+      )
+    "
+    @select="
+      () => {
+        filterState.search = '';
+      }
+    "
   >
     <slot />
   </ListboxItem>

components/ui/command/CommandList.vue

@@ -1,22 +1,27 @@
 <script setup lang="ts">
-import type { ListboxContentProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { ListboxContent, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import type { ListboxContentProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { ListboxContent, useForwardProps } from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
 
-const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<
+  ListboxContentProps & { class?: HTMLAttributes["class"] }
+>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardProps(delegatedProps)
+const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <ListboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+  <ListboxContent
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)"
+  >
     <div role="presentation">
       <slot />
     </div>

components/ui/command/CommandSeparator.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import type { SeparatorProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-import { Separator } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import type { SeparatorProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { Separator } from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
 
-const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes["class"] }
+>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 </script>
 
 <template>

components/ui/command/CommandShortcut.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+  <span
+    :class="
+      cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)
+    "
+  >
     <slot />
   </span>
 </template>

components/ui/command/index.ts

@@ -1,25 +1,29 @@
-import type { Ref } from 'vue'
-import { createContext } from 'reka-ui'
+import type { Ref } from "vue";
+import { createContext } from "reka-ui";
 
-export { default as Command } from './Command.vue'
-export { default as CommandDialog } from './CommandDialog.vue'
-export { default as CommandEmpty } from './CommandEmpty.vue'
-export { default as CommandGroup } from './CommandGroup.vue'
-export { default as CommandInput } from './CommandInput.vue'
-export { default as CommandItem } from './CommandItem.vue'
-export { default as CommandList } from './CommandList.vue'
-export { default as CommandSeparator } from './CommandSeparator.vue'
-export { default as CommandShortcut } from './CommandShortcut.vue'
+export { default as Command } from "./Command.vue";
+export { default as CommandDialog } from "./CommandDialog.vue";
+export { default as CommandEmpty } from "./CommandEmpty.vue";
+export { default as CommandGroup } from "./CommandGroup.vue";
+export { default as CommandInput } from "./CommandInput.vue";
+export { default as CommandItem } from "./CommandItem.vue";
+export { default as CommandList } from "./CommandList.vue";
+export { default as CommandSeparator } from "./CommandSeparator.vue";
+export { default as CommandShortcut } from "./CommandShortcut.vue";
 
 export const [useCommand, provideCommandContext] = createContext<{
-  allItems: Ref<Map<string, string>>
-  allGroups: Ref<Map<string, Set<string>>>
+  allItems: Ref<Map<string, string>>;
+  allGroups: Ref<Map<string, Set<string>>>;
   filterState: {
-    search: string
-    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
-  }
-}>('Command')
+    search: string;
+    filtered: {
+      count: number;
+      items: Map<string, number>;
+      groups: Set<string>;
+    };
+  };
+}>("Command");
 
 export const [useCommandGroup, provideCommandGroupContext] = createContext<{
-  id?: string
-}>('CommandGroup')
+  id?: string;
+}>("CommandGroup");

components/ui/dialog/Dialog.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
+import {
+  DialogRoot,
+  type DialogRootEmits,
+  type DialogRootProps,
+  useForwardPropsEmits,
+} from "reka-ui";
 
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

components/ui/dialog/DialogClose.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'reka-ui'
+import { DialogClose, type DialogCloseProps } from "reka-ui";
 
-const props = defineProps<DialogCloseProps>()
+const props = defineProps<DialogCloseProps>();
 </script>
 
 <template>

components/ui/dialog/DialogContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { X } from 'lucide-vue-next'
+import { cn } from "@/lib/utils";
+import { X } from "lucide-vue-next";
 import {
   DialogClose,
   DialogContent,
@@ -9,19 +9,21 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+} from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
+const props = defineProps<
+  DialogContentProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -35,7 +37,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         cn(
           'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
-        )"
+        )
+      "
     >
       <slot />
 

components/ui/dialog/DialogDescription.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from "@/lib/utils";
+import {
+  DialogDescription,
+  type DialogDescriptionProps,
+  useForwardProps,
+} from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<
+  DialogDescriptionProps & { class?: HTMLAttributes["class"] }
+>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>

components/ui/dialog/DialogFooter.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
 </script>
 
 <template>

components/ui/dialog/DialogHeader.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>

components/ui/dialog/DialogScrollContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { X } from 'lucide-vue-next'
+import { cn } from "@/lib/utils";
+import { X } from "lucide-vue-next";
 import {
   DialogClose,
   DialogContent,
@@ -9,19 +9,21 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+} from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
+const props = defineProps<
+  DialogContentProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
@@ -37,13 +39,18 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
           )
         "
         v-bind="forwarded"
-        @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
+        @pointer-down-outside="
+          (event) => {
+            const originalEvent = event.detail.originalEvent;
+            const target = originalEvent.target as HTMLElement;
+            if (
+              originalEvent.offsetX > target.clientWidth ||
+              originalEvent.offsetY > target.clientHeight
+            ) {
+              event.preventDefault();
+            }
           }
-        }"
+        "
       >
         <slot />
 

components/ui/dialog/DialogTitle.vue

@@ -1,27 +1,26 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import { cn } from "@/lib/utils";
+import { DialogTitle, type DialogTitleProps, useForwardProps } from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<
+  DialogTitleProps & { class?: HTMLAttributes["class"] }
+>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <DialogTitle
     v-bind="forwardedProps"
     :class="
-      cn(
-        'text-lg font-semibold leading-none tracking-tight',
-        props.class,
-      )
+      cn('text-lg font-semibold leading-none tracking-tight', props.class)
     "
   >
     <slot />

components/ui/dialog/DialogTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger, type DialogTriggerProps } from "reka-ui";
 
-const props = defineProps<DialogTriggerProps>()
+const props = defineProps<DialogTriggerProps>();
 </script>
 
 <template>

components/ui/dialog/index.ts

@@ -1,9 +1,9 @@
-export { default as Dialog } from './Dialog.vue'
-export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
-export { default as DialogFooter } from './DialogFooter.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'
+export { default as Dialog } from "./Dialog.vue";
+export { default as DialogClose } from "./DialogClose.vue";
+export { default as DialogContent } from "./DialogContent.vue";
+export { default as DialogDescription } from "./DialogDescription.vue";
+export { default as DialogFooter } from "./DialogFooter.vue";
+export { default as DialogHeader } from "./DialogHeader.vue";
+export { default as DialogScrollContent } from "./DialogScrollContent.vue";
+export { default as DialogTitle } from "./DialogTitle.vue";
+export { default as DialogTrigger } from "./DialogTrigger.vue";

components/ui/hover-card/HoverCard.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'reka-ui'
+import {
+  HoverCardRoot,
+  type HoverCardRootEmits,
+  type HoverCardRootProps,
+  useForwardPropsEmits,
+} from "reka-ui";
 
-const props = defineProps<HoverCardRootProps>()
-const emits = defineEmits<HoverCardRootEmits>()
+const props = defineProps<HoverCardRootProps>();
+const emits = defineEmits<HoverCardRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

components/ui/hover-card/HoverCardContent.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 import {
   HoverCardContent,
   type HoverCardContentProps,
   HoverCardPortal,
   useForwardProps,
-} from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+} from "reka-ui";
+import { computed, type HTMLAttributes } from "vue";
 
 const props = withDefaults(
-  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes["class"] }>(),
   {
     sideOffset: 4,
   },
-)
+);
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>

components/ui/hover-card/HoverCardTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { HoverCardTrigger, type HoverCardTriggerProps } from 'reka-ui'
+import { HoverCardTrigger, type HoverCardTriggerProps } from "reka-ui";
 
-const props = defineProps<HoverCardTriggerProps>()
+const props = defineProps<HoverCardTriggerProps>();
 </script>
 
 <template>

components/ui/hover-card/index.ts

@@ -1,3 +1,3 @@
-export { default as HoverCard } from './HoverCard.vue'
-export { default as HoverCardContent } from './HoverCardContent.vue'
-export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
+export { default as HoverCard } from "./HoverCard.vue";
+export { default as HoverCardContent } from "./HoverCardContent.vue";
+export { default as HoverCardTrigger } from "./HoverCardTrigger.vue";

createDatabase.ts

@@ -42,7 +42,6 @@ create table if not exists newsProvidersZh (
 )
 `;
 
-
 const createGoLinks = await sql`
 create table if not exists go_links {
     uuid text primary key,
@@ -51,7 +50,7 @@ create table if not exists go_links {
     forwardUrl text not null,
     created_at timestampz default current_timestamp
 }
-`
+`;
 /*
 const createAdminPosts = await sql`
 create table if not exists adminPosts (

docker-compose.yml

@@ -6,7 +6,7 @@ services:
     ports:
       - "127.0.0.1:36694:80"
     volumes:
-      - /var/run/docker.sock:/var/run/docker.sock:ro 
+      - /var/run/docker.sock:/var/run/docker.sock:ro
     networks:
       - app-network
   newsanalyze-service:
@@ -18,7 +18,7 @@ services:
       retries: 3
     networks:
       - app-network
-    labels: 
+    labels:
       - "traefik.enable=true"
       - "traefik.http.routers.newsanalyze.rule=Host(`news.yuanhau.com`)"
       - "traefik.http.routers.newsanalyze.entrypoints=webinternal"

nuxt.config.ts

@@ -111,6 +111,6 @@ export default defineNuxtConfig({
     componentDir: "./components/ui",
   },
   nitro: {
-    preset: "bun" // This is dumb.
-  }
+    preset: "bun", // This is dumb.
+  },
 });

pages/newsOrgs.vue

@@ -2,7 +2,7 @@
 const { t } = useI18n();
 </script>
 <template>
-    <div>
-        <h1>{{ t("newsOrgs.title") }}</h1>
-    </div>
+  <div>
+    <h1>{{ t("newsOrgs.title") }}</h1>
+  </div>
 </template>

pages/topic/view/[slug].vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
-
+const route = useRoute();
+const slug = route.params.slug;
+const {
+  data: fetchNewsArticle,
+  pending,
+  error,
+} = await useFetch(`/api/objectstorage/files/${slug}`, {
+  method: "GET",
+});
 </script>
 <template>
-    <div class="">
-        <div class="content">
-        </div>
-    </div>
-</template> 
+  <div class="">
+    <div class="content"></div>
+  </div>
+</template>

scraping/README.md

@@ -0,0 +1,3 @@
+# Scraping
+
+This file contains the code for scraping the news from websites. And storing the data into the a postgres database.

scraping/main.py

@@ -1,12 +1,7 @@
-import scrapy
+from urllib.request import urlopen
 
-class BlogSpider(scrapy.Spider):
-    name = 'blogspider'
-    start_urls = ['https://news.google.com/u/4/home?hl=zh-TW&gl=TW&ceid=TW:zh-Hant&pageId=none']
+url = "https://tw.news.yahoo.com/"
 
-    def parse(self, response):
-        for title in response.css('.oxy-post-title'):
-            yield {'title': title.css('::text').get()}
+page = urlopen(url)
 
-        for next_page in response.css('a.next'):
-            yield response.follow(next_page, self.parse)
+page

scraping/requirements.txt

@@ -1 +1 @@
-scrapy
+urlopen

server/api/ai/chat/[slug].ts

@@ -1,35 +1,35 @@
-import { Groq } from 'groq-sdk';
+import { Groq } from "groq-sdk";
 import sql from "~/server/components/postgres";
 
 const groq = new Groq();
 
 export default defineEventHandler(async (event) => {
-  const slug = getRouterParam(event, 'slug');
+  const slug = getRouterParam(event, "slug");
   const body = await readBody(event);
   const fetchNewsArticle = await sql`
     select * from newArticle
     where slug = ${slug}
   `;
   const chatCompletion = await groq.chat.completions.create({
-        "messages": [
-          {
-            "role": "user",
-            "content": `${body}`
-          },
-          {
-            "role": "system",
-            "content": `You are a news chat, the following content will be used to chat with the user title: ${fetchNewsArticle.title}\n content: ${fetchNewsArticle.content}`
-          }
-        ],
-        "model": "llama3-70b-8192",
-        "temperature": 1,
-        "max_completion_tokens": 1024,
-        "top_p": 1,
-        "stream": true,
-        "stop": null
-    });
-    
+    messages: [
+      {
+        role: "user",
+        content: `${body}`,
+      },
+      {
+        role: "system",
+        content: `You are a news chat, the following content will be used to chat with the user title: ${fetchNewsArticle.title}\n content: ${fetchNewsArticle.content}`,
+      },
+    ],
+    model: "llama3-70b-8192",
+    temperature: 1,
+    max_completion_tokens: 1024,
+    top_p: 1,
+    stream: true,
+    stop: null,
+  });
+
   for await (const chunk of chatCompletion) {
-    process.stdout.write(chunk.choices[0]?.delta?.content || '');
+    process.stdout.write(chunk.choices[0]?.delta?.content || "");
   }
-})
+});

server/api/ai/summerize/[slug].ts

@@ -1,34 +1,34 @@
-import { Groq } from 'groq-sdk';
+import { Groq } from "groq-sdk";
 import sql from "~/server/components/postgres";
 
 const groq = new Groq();
 
 export default defineEventHandler(async (event) => {
-  const slug = getRouterParam(event, 'slug');
+  const slug = getRouterParam(event, "slug");
   const fetchNewsArticle = await sql`
     select * from newArticle
     where slug = ${slug}
   `;
   const chatCompletion = await groq.chat.completions.create({
-        "messages": [
-          {
-            "role": "user",
-            "content": `${fetchNewsArticle.title}\n${fetchNewsArticle.content}`
-          },
-          {
-            "role": "system",
-            "content": `You are a news summarizer. You will be given a news article and you will summarize it into a short paragraph.`
-          }
-        ],
-        "model": "llama3-70b-8192",
-        "temperature": 1,
-        "max_completion_tokens": 1024,
-        "top_p": 1,
-        "stream": true,
-        "stop": null
-    });
-    
+    messages: [
+      {
+        role: "user",
+        content: `${fetchNewsArticle.title}\n${fetchNewsArticle.content}`,
+      },
+      {
+        role: "system",
+        content: `You are a news summarizer. You will be given a news article and you will summarize it into a short paragraph.`,
+      },
+    ],
+    model: "llama3-70b-8192",
+    temperature: 1,
+    max_completion_tokens: 1024,
+    top_p: 1,
+    stream: true,
+    stop: null,
+  });
+
   for await (const chunk of chatCompletion) {
-    process.stdout.write(chunk.choices[0]?.delta?.content || '');
+    process.stdout.write(chunk.choices[0]?.delta?.content || "");
   }
-})
+});

server/api/fetcharticle/[slug].ts

@@ -1,28 +1,28 @@
 import sql from "~/server/components/postgres";
 export default defineEventHandler(async (event) => {
-    const slug = getRouterParam(event, 'slug');
-    
-    // Validate and sanitize the slug
-    if (!slug || typeof slug !== 'string') {
-        throw createError({
-            statusCode: 400,
-            message: 'Invalid slug parameter'
-        });
-    }
-    const cleanSlug = slug.replace(/[^a-zA-Z0-9-_]/g, '');
+  const slug = getRouterParam(event, "slug");
 
-    try {
-        const result = await sql`
+  // Validate and sanitize the slug
+  if (!slug || typeof slug !== "string") {
+    throw createError({
+      statusCode: 400,
+      message: "Invalid slug parameter",
+    });
+  }
+  const cleanSlug = slug.replace(/[^a-zA-Z0-9-_]/g, "");
+
+  try {
+    const result = await sql`
          select * from articles
          where slug = ${cleanSlug}
-        `
-        
-        return result.rows[0] || null;
-    } catch (error) {
-        console.error('Database error:', error);
-        throw createError({
-            statusCode: 500,
-            message: 'Internal server error'
-        });
-    }
-});
+        `;
+
+    return result.rows[0] || null;
+  } catch (error) {
+    console.error("Database error:", error);
+    throw createError({
+      statusCode: 500,
+      message: "Internal server error",
+    });
+  }
+});

server/components/postgres.ts

@@ -1,7 +1,7 @@
 import { SQL } from "bun";
 
 const postgres = new SQL({
-    url: process.env.POSTGRES_URL,
-})
+  url: process.env.POSTGRES_URL,
+});
 
-export default postgres;
+export default postgres;

server/routes/go/[slug].ts

@@ -1,24 +1,24 @@
 import sql from "~/server/components/postgres";
 export default defineEventHandler(async (event) => {
-    const slug = getRouterParam(event, 'slug');
-    if (!slug || typeof slug !== 'string') {
-        throw createError({
-            statusCode: 400,
-            message: 'Invalid slug parameter'
-        });
-    }
-    const cleanSlug = slug.replace(/[^a-zA-Z0-9-_]/g, '');
-    try {
-        const result = await sql`
+  const slug = getRouterParam(event, "slug");
+  if (!slug || typeof slug !== "string") {
+    throw createError({
+      statusCode: 400,
+      message: "Invalid slug parameter",
+    });
+  }
+  const cleanSlug = slug.replace(/[^a-zA-Z0-9-_]/g, "");
+  try {
+    const result = await sql`
         select * from go_links
         where slug = ${cleanSlug}
-        `
-        return result.rows[0] || null;
-    } catch (error) {
-        console.error('Database error:', error);
-        throw createError({
-            statusCode: 500,
-            message: 'Internal server error'
-        });
-    }
-})
+        `;
+    return result.rows[0] || null;
+  } catch (error) {
+    console.error("Database error:", error);
+    throw createError({
+      statusCode: 500,
+      message: "Internal server error",
+    });
+  }
+});