chore: format

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import MainComponent from './components/MainComponent.vue';
-import { useDark } from '@vueuse/core';
-useDark();
+import MainComponent from './components/MainComponent.vue'
+import { useDark } from '@vueuse/core'
+useDark()
 </script>
 
 <template>

src/components/ActivityListEntry.vue

@@ -1,20 +1,31 @@
 <script setup lang="ts">
-import type { Activity } from '@/data/activity';
-import { dateString } from '@/utils';
+import type { Activity } from '@/data/activity'
+import { dateString } from '@/utils'
 
 defineProps<{
   activity: Activity
-}>();
+}>()
 </script>
 
 <template>
   <div border-t="1 gray-200 dark:dark-100 solid" class="activity-list-entry" p-y-4 box-border>
     <h3 m-0>{{ activity.title }}</h3>
     <!-- doesn't seem to be the best way, but it works -->
     <span text-gray-500 block m-t-1 dark:text-gray-300>{{ dateString(activity.time) }}</span>
-    <p v-if="activity.excerpt?.trim()" whitespace-pre text-wrap m-t-2 m-b-0>{{ activity.excerpt.trim() }}</p>
-    <a :href="activity.contentUrl" text-blue-500 dark:text-blue-300 underline-offset-4 m-b-2 m-t-2 inline-block
-      w-auto>阅读全文...</a>
+    <p v-if="activity.excerpt?.trim()" whitespace-pre text-wrap m-t-2 m-b-0>
+      {{ activity.excerpt.trim() }}
+    </p>
+    <a
+      :href="activity.contentUrl"
+      text-blue-500
+      dark:text-blue-300
+      underline-offset-4
+      m-b-2
+      m-t-2
+      inline-block
+      w-auto
+      >阅读全文...</a
+    >
   </div>
 </template>
 

src/components/AutoDarkImage.vue

@@ -1,22 +1,26 @@
 <script setup lang="ts">
-import { useDark } from '@vueuse/core';
-import { onMounted, ref, watch } from 'vue';
+import { useDark } from '@vueuse/core'
+import { onMounted, ref, watch } from 'vue'
 const props = defineProps<{
-  src: string;
-  srcDark?: string;
-  alt?: string;
-}>();
+  src: string
+  srcDark?: string
+  alt?: string
+}>()
 
-const url = ref('');
-const isDark = useDark();
+const url = ref('')
+const isDark = useDark()
 onMounted(() => {
-  watch(isDark, (newVal) => {
-    const src = newVal ? props.srcDark ?? props.src : props.src;
-    url.value = src;
-  }, { immediate: true })
+  watch(
+    isDark,
+    (newVal) => {
+      const src = newVal ? (props.srcDark ?? props.src) : props.src
+      url.value = src
+    },
+    { immediate: true },
+  )
 })
 </script>
 
 <template>
-  <img :src="url" :alt="alt">
+  <img :src="url" :alt="alt" />
 </template>

src/components/ExpanderComponent.vue

@@ -1,50 +1,56 @@
 <script setup lang="ts">
-import { ChevronRightIcon } from "@heroicons/vue/24/outline";
-import { onMounted, ref, watch } from "vue";
+import { ChevronRightIcon } from '@heroicons/vue/24/outline'
+import { onMounted, ref, watch } from 'vue'
 
-const contentWrapperRef = ref<HTMLDivElement>();
-const contentDesiredSizeWrapperRef = ref<HTMLDivElement>();
+const contentWrapperRef = ref<HTMLDivElement>()
+const contentDesiredSizeWrapperRef = ref<HTMLDivElement>()
 
-const content = ref(0);
-const collapsed = ref(false);
+const content = ref(0)
+const collapsed = ref(false)
 
 function toggleCollapsed() {
-  collapsed.value = !collapsed.value;
+  collapsed.value = !collapsed.value
   if (collapsed.value) {
-    contentWrapperRef.value!.style.height = "0";
+    contentWrapperRef.value!.style.height = '0'
   } else {
-    contentWrapperRef.value!.style.height = `${content.value}px`;
+    contentWrapperRef.value!.style.height = `${content.value}px`
   }
 }
 
 onMounted(() => {
-  if (!contentWrapperRef.value || !contentDesiredSizeWrapperRef.value) return;
+  if (!contentWrapperRef.value || !contentDesiredSizeWrapperRef.value) return
 
   watch(content, (newSize) => {
-    if (!collapsed.value)
-      contentWrapperRef.value!.style.height = `${newSize}px`;
-  });
+    if (!collapsed.value) contentWrapperRef.value!.style.height = `${newSize}px`
+  })
 
-  content.value = contentDesiredSizeWrapperRef.value!.scrollHeight;
+  content.value = contentDesiredSizeWrapperRef.value!.scrollHeight
 
   const observer = new ResizeObserver(() => {
-    content.value = contentDesiredSizeWrapperRef.value!.scrollHeight;
-  });
+    content.value = contentDesiredSizeWrapperRef.value!.scrollHeight
+  })
 
-  observer.observe(contentDesiredSizeWrapperRef.value);
-});
+  observer.observe(contentDesiredSizeWrapperRef.value)
+})
 </script>
 
 <template>
   <div overflow-clip>
     <div flex="~ items-center">
       <slot name="header"></slot>
-      <button @click="toggleCollapsed" rounded-unset transition-all duration-200 border-unset bg-transparent
-        cursor-pointer>
-        <ChevronRightIcon :class="[
-          'h-5 w-5 transition-all duration-300',
-          collapsed ? 'rotate-0' : 'rotate-90',
-        ]" class="color-black dark:color-white" />
+      <button
+        @click="toggleCollapsed"
+        rounded-unset
+        transition-all
+        duration-200
+        border-unset
+        bg-transparent
+        cursor-pointer
+      >
+        <ChevronRightIcon
+          :class="['h-5 w-5 transition-all duration-300', collapsed ? 'rotate-0' : 'rotate-90']"
+          class="color-black dark:color-white"
+        />
       </button>
     </div>
 

src/components/MainComponent.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useRoute } from '@/router/router';
-import { shallowRef, watch } from 'vue';
-const route = useRoute(() => undefined);
-const component = shallowRef(route.mainComponent);
+import { useRoute } from '@/router/router'
+import { shallowRef, watch } from 'vue'
+const route = useRoute(() => undefined)
+const component = shallowRef(route.mainComponent)
 
 watch(route, (newVal) => {
-  component.value = newVal.mainComponent;
+  component.value = newVal.mainComponent
 })
 </script>
 

src/components/NewsListEntry.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { News } from '@/data/news';
-import { dateString } from '@/utils';
+import type { News } from '@/data/news'
+import { dateString } from '@/utils'
 
 defineProps<{
-  news: News;
-}>();
+  news: News
+}>()
 </script>
 
 <template>
@@ -16,9 +16,20 @@ defineProps<{
       <span v-if="news.category?.trim()">·</span>
       <span v-if="news.category?.trim()">{{ news.category }}</span>
     </div>
-    <p v-if="news.excerpt?.trim()" whitespace-pre text-wrap m-t-2 m-b-0>{{ news.excerpt.trim() }}</p>
-    <a :href="news.contentUrl" text-blue-500 dark:text-blue-300 underline-offset-4 m-b-2 m-t-2 inline-block
-      w-auto>阅读全文...</a>
+    <p v-if="news.excerpt?.trim()" whitespace-pre text-wrap m-t-2 m-b-0>
+      {{ news.excerpt.trim() }}
+    </p>
+    <a
+      :href="news.contentUrl"
+      text-blue-500
+      dark:text-blue-300
+      underline-offset-4
+      m-b-2
+      m-t-2
+      inline-block
+      w-auto
+      >阅读全文...</a
+    >
   </div>
 </template>
 

src/components/ProjectCard.vue

@@ -1,25 +1,57 @@
 <script setup lang="ts">
-import type { Project } from '@/data/project';
-import { ArrowRightIcon } from '@heroicons/vue/24/outline';
-import AutoDarkImage from './AutoDarkImage.vue';
+import type { Project } from '@/data/project'
+import { ArrowRightIcon } from '@heroicons/vue/24/outline'
+import AutoDarkImage from './AutoDarkImage.vue'
 
 defineProps<{
-  project: Project;
-}>();
+  project: Project
+}>()
 </script>
 <template>
-  <a :href="project.link" target="_blank" rel="noopener noreferrer" decoration-none rounded-xl bg-gray-100
-    dark:bg-dark-600 flex="~ col gap-2" w-full h-auto p-4 box-border border="1 gray-200 dark:dark-100 solid"
-    class="group text-unset!">
-    <div h-12 w-12 rounded-md bg-gray-200 dark:bg-dark-700 flex justify-center items-center box-border p-2
-      border="1 gray-300 dark:dark-200 solid">
-      <AutoDarkImage v-if="project.image" :src="project.image" :src-dark="project.imageDark" :alt="project.title"
-        object-contain w-8 h-8 />
+  <a
+    :href="project.link"
+    target="_blank"
+    rel="noopener noreferrer"
+    decoration-none
+    rounded-xl
+    bg-gray-100
+    dark:bg-dark-600
+    flex="~ col gap-2"
+    w-full
+    h-auto
+    p-4
+    box-border
+    border="1 gray-200 dark:dark-100 solid"
+    class="group text-unset!"
+  >
+    <div
+      h-12
+      w-12
+      rounded-md
+      bg-gray-200
+      dark:bg-dark-700
+      flex
+      justify-center
+      items-center
+      box-border
+      p-2
+      border="1 gray-300 dark:dark-200 solid"
+    >
+      <AutoDarkImage
+        v-if="project.image"
+        :src="project.image"
+        :src-dark="project.imageDark"
+        :alt="project.title"
+        object-contain
+        w-8
+        h-8
+      />
       <span v-else text-xl>{{ project.title.charAt(0) }}</span>
     </div>
     <span m-t-1 text-xl font-semibold>{{ project.title }}</span>
     <p p-0 m-0 flex-1>{{ project.description }}</p>
     <ArrowRightIcon
-      class="h-5 w-5 text-gray-500 self-end group-hover:translate-x-1 transition-transform duration-200" />
+      class="h-5 w-5 text-gray-500 self-end group-hover:translate-x-1 transition-transform duration-200"
+    />
   </a>
 </template>