Refactor utils as separate files

src/components/CommentItem.vue

@@ -97,7 +97,8 @@ import { useEventListener } from '@vueuse/core';
 import DOMPurify from 'dompurify';
 import smartquotes from 'smartquotes-ts';
 import type { HackerNewsItem } from '@/types';
-import { apiItemUrl, absoluteTimestamp } from '@/utils';
+import { apiItemUrl } from '@/utils/apiUrls';
+import { absoluteTimestamp } from '@/utils/absoluteTimestamp';
 import BaseIcon from '@/components/BaseIcon.vue';
 import CommentItem from '@/components/CommentItem.vue';
 import { useRelativeTimestamp } from '@/composables/relativeTimestamp';

src/components/PostsListItem.vue

@@ -68,7 +68,8 @@
 <script setup lang="ts">
 import smartquotes from 'smartquotes-ts';
 import type { HackerNewsItem } from '@/types';
-import { formatNumber, absoluteTimestamp } from '@/utils';
+import { formatNumber } from '@/utils/formatNumber';
+import { absoluteTimestamp } from '@/utils/absoluteTimestamp';
 import BaseLabel from '@/components/BaseLabel.vue';
 import { useRelativeTimestamp } from '@/composables/relativeTimestamp';
 import { useViewStore } from '@/stores/ViewStore';

src/components/TheCommentsColumnBody.vue

@@ -67,7 +67,7 @@ import type { ComponentPublicInstance } from 'vue';
 import { useInfiniteScroll, useElementBounding } from '@vueuse/core';
 import scrollIntoView from 'smooth-scroll-into-view-if-needed';
 import type { HackerNewsItem } from '@/types';
-import { apiItemUrl } from '@/utils';
+import { apiItemUrl } from '@/utils/apiUrls';
 import BaseButton from '@/components/BaseButton.vue';
 import PageColumnBody from '@/components/PageColumnBody.vue';
 import CommentItem from '@/components/CommentItem.vue';

src/components/TheCommentsColumnTitle.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { formatNumber } from '@/utils';
+import { formatNumber } from '@/utils/formatNumber';
 import { useContentStore } from '@/stores/ContentStore';
 
 const content = useContentStore();

src/stores/ContentStore.ts

@@ -2,7 +2,8 @@ import { ref, computed, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { useStorage } from '@vueuse/core';
 import type { HackerNewsCategory, HackerNewsItemData, HackerNewsItem } from '@/types';
-import { apiCategoryUrl, apiItemUrl, parseUrl } from '@/utils';
+import { apiCategoryUrl, apiItemUrl } from '@/utils/apiUrls';
+import { parseUrl } from '@/utils/parseUrl';
 
 export const useContentStore = defineStore('content', () => {
   const categoryNames: { [key in HackerNewsCategory]: string } = {

src/utils/absoluteTimestamp.ts

@@ -0,0 +1,11 @@
+export function absoluteTimestamp(time?: number) {
+  if (time === undefined) return;
+
+  return new Intl.DateTimeFormat('en-GB', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  }).format(time * 1000);
+}

src/utils/apiUrls.ts

@@ -0,0 +1,11 @@
+import type { HackerNewsCategory } from '@/types';
+
+const apiBaseUrl = 'https://hacker-news.firebaseio.com/v0/';
+
+export function apiCategoryUrl(category: HackerNewsCategory) {
+  return apiBaseUrl + category + 'stories.json';
+}
+
+export function apiItemUrl(id: number) {
+  return apiBaseUrl + 'item/' + id + '.json';
+}

src/utils/formatNumber.ts

@@ -0,0 +1,4 @@
+export function formatNumber(number?: number) {
+  if (number === undefined) return;
+  return new Intl.NumberFormat('gb-GB').format(number);
+}

src/utils/parseUrl.ts

@@ -0,0 +1,23 @@
+export function parseUrl(url: string) {
+  const parsedUrl = new URL(url);
+
+  const customUrl = {
+    hostname: parsedUrl.hostname,
+    pathname: parsedUrl.pathname,
+    href: parsedUrl.href,
+    search: parsedUrl.search,
+  };
+
+  customUrl.hostname = customUrl.hostname.replace(/^www\./g, '');
+
+  if (customUrl.hostname === 'github.com') {
+    customUrl.hostname = customUrl.hostname + '/' + customUrl.pathname.split('/')[1];
+    customUrl.pathname = '/' + customUrl.pathname.split('/').slice(2).join('/');
+  }
+
+  if (customUrl.pathname.endsWith('/')) {
+    customUrl.pathname = customUrl.pathname.substring(0, customUrl.pathname.length - 1);
+  }
+
+  return customUrl;
+}