chore: Readability

aliases.ts

@@ -5,7 +5,48 @@ import type { AliasOptions } from 'vite';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+const exactAliases: AliasOptions = [
+	['@components/CoverImageLoader.vue', './src/components/CoverImg.vue'],
+	['@components/icons/LinkedinIcon.vue', './src/components/icons/Linkedin.vue'],
+	['@pages/ContactPage.vue', './src/pages/Contact.vue'],
+	['@pages/ProjectsPage.vue', './src/pages/Projects.vue'],
+	['@pages/TagPostsPage.vue', './src/pages/TagPosts.vue'],
+	['@pages/TermsAndPoliciesPage.vue', './src/pages/TermsPage.vue'],
+	['@pages/WorkWithUsPage.vue', './src/pages/WorkUs.vue'],
+	['@pages/WritingPage.vue', './src/pages/Writing.vue'],
+	['@partials/AboutConnectSkeletonPartial.vue', './src/partials/AbtConnSk.vue'],
+	['@partials/ArticleItemPartial.vue', './src/partials/ArtItem.vue'],
+	['@partials/ArticleItemSkeletonPartial.vue', './src/partials/ArtItemSk.vue'],
+	['@partials/ArticlesListPartial.vue', './src/partials/ArtList.vue'],
+	['@partials/FooterPartial.vue', './src/partials/Footer.vue'],
+	['@partials/HeroCircuitPartial.vue', './src/partials/HeroCirc.vue'],
+	['@partials/HeroPartial.vue', './src/partials/Hero.vue'],
+	['@partials/NavPartial.vue', './src/partials/NavBar.vue'],
+	['@partials/PostPageSkeletonPartial.vue', './src/partials/PostPgSkl.vue'],
+	['@partials/ProjectCardPartial.vue', './src/partials/ProjCard.vue'],
+	['@partials/ProjectCardSkeletonPartial.vue', './src/partials/ProjCardSk.vue'],
+	['@partials/RecommendationDialogSkeletonPartial.vue', './src/partials/RecDlgSkel.vue'],
+	['@partials/RecommendationPartial.vue', './src/partials/RecomPart.vue'],
+	['@/support/content-types.ts', './src/support/contype.ts'],
+	['@support/content-types.ts', './src/support/contype.ts'],
+	['@/support/lazy-loading.ts', './src/support/lazyload.ts'],
+	['@support/lazy-loading.ts', './src/support/lazyload.ts'],
+	['@/support/useTextHighlight.ts', './src/support/useTxtHi.ts'],
+	['@support/useTextHighlight.ts', './src/support/useTxtHi.ts'],
+	['@/support/content/contact-page.ts', './src/support/content/contpage.ts'],
+	['@support/content/contact-page.ts', './src/support/content/contpage.ts'],
+	['@/support/content/projects-page.ts', './src/support/content/projpage.ts'],
+	['@support/content/projects-page.ts', './src/support/content/projpage.ts'],
+	['@/support/content/terms-and-policies-page.ts', './src/support/content/termspage.ts'],
+	['@support/content/terms-and-policies-page.ts', './src/support/content/termspage.ts'],
+	['@/support/content/work-with-us-page.ts', './src/support/content/workpage.ts'],
+	['@support/content/work-with-us-page.ts', './src/support/content/workpage.ts'],
+	['@/support/content/writing-page.ts', './src/support/content/writpage.ts'],
+	['@support/content/writing-page.ts', './src/support/content/writpage.ts'],
+].map(([find, replacement]) => ({ find, replacement: path.resolve(__dirname, replacement) }));
+
 export const aliases: AliasOptions = [
+	...exactAliases,
 	// allow importing modules with a leading ~ like CSS preprocessors produce
 	{ find: /^~.+/, replacement: '$1' },
 	{ find: '@', replacement: path.resolve(__dirname, './src') },

src/App.vue

@@ -4,5 +4,5 @@
 </template>
 
 <script setup lang="ts">
-import NavPartial from '@partials/NavPartial.vue';
+import NavPartial from '@partials/NavBar.vue';
 </script>

src/components/ui/accordion/index.ts

@@ -1,4 +1,4 @@
 export { default as Accordion } from './Accordion.vue';
-export { default as AccordionContent } from './AccordionContent.vue';
-export { default as AccordionItem } from './AccordionItem.vue';
-export { default as AccordionTrigger } from './AccordionTrigger.vue';
+export { default as AccordionContent } from './AccCont.vue';
+export { default as AccordionItem } from './AccItem.vue';
+export { default as AccordionTrigger } from './AccTrig.vue';

src/components/ui/dialog/DialogContent.vue → src/components/ui/dialog/DlgCont.vue

@@ -5,7 +5,7 @@ import { reactiveOmit } from '@vueuse/core';
 import { Cross2Icon } from '@radix-icons/vue';
 import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '@components/lib/utils';
-import DialogOverlay from './DialogOverlay.vue';
+import DialogOverlay from './DlgOver.vue';
 
 defineOptions({
 	inheritAttrs: false,

src/components/ui/dialog/index.ts

@@ -1,5 +1,5 @@
 export { default as Dialog } from './Dialog.vue';
-export { default as DialogClose } from './DialogClose.vue';
-export { default as DialogContent } from './DialogContent.vue';
-export { default as DialogTitle } from './DialogTitle.vue';
-export { default as DialogTrigger } from './DialogTrigger.vue';
+export { default as DialogClose } from './DlgClose.vue';
+export { default as DialogContent } from './DlgCont.vue';
+export { default as DialogTitle } from './DlgTitle.vue';
+export { default as DialogTrigger } from './DlgTrig.vue';

src/components/ui/navigation-menu/NavigationMenu.vue → src/components/ui/navigation-menu/NavMenu.vue

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { NavigationMenuRoot, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '@components/lib/utils';
-import NavigationMenuViewport from './NavigationMenuViewport.vue';
+import NavigationMenuViewport from './NavView.vue';
 
 const props = withDefaults(
 	defineProps<

src/components/ui/navigation-menu/index.ts

@@ -1,13 +1,13 @@
 import { cva } from 'class-variance-authority';
 
-export { default as NavigationMenu } from './NavigationMenu.vue';
-export { default as NavigationMenuContent } from './NavigationMenuContent.vue';
-export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue';
-export { default as NavigationMenuItem } from './NavigationMenuItem.vue';
-export { default as NavigationMenuLink } from './NavigationMenuLink.vue';
-export { default as NavigationMenuList } from './NavigationMenuList.vue';
-export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue';
-export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue';
+export { default as NavigationMenu } from './NavMenu.vue';
+export { default as NavigationMenuContent } from './NavCont.vue';
+export { default as NavigationMenuIndicator } from './NavIndic.vue';
+export { default as NavigationMenuItem } from './NavItem.vue';
+export { default as NavigationMenuLink } from './NavLink.vue';
+export { default as NavigationMenuList } from './NavList.vue';
+export { default as NavigationMenuTrigger } from './NavTrig.vue';
+export { default as NavigationMenuViewport } from './NavView.vue';
 
 export const navigationMenuTriggerStyle = cva(
 	'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-3 focus-visible:outline-1',

src/components/ui/pagination/PaginationContent.vue → src/components/ui/pagination/PagCont.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { cn } from '@components/lib/utils';
-import { usePaginationContext } from './pagination';
+import { usePag } from './pagination';
 
 interface Props {
 	class?: HTMLAttributes['class'];
 }
 
 const props = defineProps<Props>();
-const pagination = usePaginationContext();
+const pager = usePag();
 </script>
 
 <template>
 	<div data-slot="pagination-content" :class="cn('flex flex-wrap items-center gap-2', props.class)">
-		<slot :items="pagination.items.value" />
+		<slot :items="pager.items.value" />
 	</div>
 </template>

src/components/ui/pagination/PaginationItem.vue → src/components/ui/pagination/PagItem.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
-import PaginationLink from './PaginationLink.vue';
-import { usePaginationContext } from './pagination';
+import PaginationLink from './PagLink.vue';
+import { usePag } from './pagination';
 
 interface Props {
 	value: number;
@@ -16,20 +16,20 @@ const props = withDefaults(defineProps<Props>(), {
 	disabled: false,
 });
 
-const pagination = usePaginationContext();
-const isDisabled = computed(() => props.disabled || pagination.disabled.value);
+const pager = usePag();
+const isDisab = computed(() => props.disabled || pager.disabled.value);
 
-const handleClick = () => {
-	if (isDisabled.value) {
+const onClick = () => {
+	if (isDisab.value) {
 		return;
 	}
 
-	pagination.setPage(props.value);
+	pager.setPage(props.value);
 };
 </script>
 
 <template>
-	<PaginationLink data-slot="pagination-item" :is-active="props.isActive" :disabled="isDisabled" :class="props.class" @click="handleClick">
+	<PaginationLink data-slot="pagination-item" :is-active="props.isActive" :disabled="isDisab" :class="props.class" @click="onClick">
 		<slot>{{ props.value }}</slot>
 	</PaginationLink>
 </template>

src/components/ui/pagination/PaginationLink.vue → src/components/ui/pagination/PagLink.vue

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 import { cn } from '@components/lib/utils';
-import { paginationActiveButtonClasses, paginationButtonClasses } from './pagination';
+import { pagAct, pagBtn } from './pagination';
 
 interface Props {
 	isActive?: boolean;
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
 	disabled: false,
 });
 
-const classes = computed(() => cn(props.isActive ? paginationActiveButtonClasses : paginationButtonClasses, props.class));
+const classes = computed(() => cn(props.isActive ? pagAct : pagBtn, props.class));
 </script>
 
 <template>

src/components/ui/pagination/PagNext.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import PaginationLink from './PagLink.vue';
+import { usePag } from './pagination';
+
+interface Props {
+	disabled?: boolean;
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	disabled: false,
+});
+
+const pager = usePag();
+const isDisab = computed(() => props.disabled || pager.disabled.value || pager.page.value >= pager.pageCount.value);
+
+const onClick = () => {
+	if (isDisab.value) {
+		return;
+	}
+
+	pager.goToNextPage();
+};
+</script>
+
+<template>
+	<PaginationLink data-slot="pagination-next" :disabled="isDisab" :class="props.class" @click="onClick">
+		<slot>Next</slot>
+	</PaginationLink>
+</template>

src/components/ui/pagination/PaginationPrevious.vue → src/components/ui/pagination/PagPrev.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
-import PaginationLink from './PaginationLink.vue';
-import { usePaginationContext } from './pagination';
+import PaginationLink from './PagLink.vue';
+import { usePag } from './pagination';
 
 interface Props {
 	disabled?: boolean;
@@ -13,20 +13,20 @@ const props = withDefaults(defineProps<Props>(), {
 	disabled: false,
 });
 
-const pagination = usePaginationContext();
-const isDisabled = computed(() => props.disabled || pagination.disabled.value || pagination.page.value <= 1);
+const pager = usePag();
+const isDisab = computed(() => props.disabled || pager.disabled.value || pager.page.value <= 1);
 
-const handleClick = () => {
-	if (isDisabled.value) {
+const onClick = () => {
+	if (isDisab.value) {
 		return;
 	}
 
-	pagination.goToPreviousPage();
+	pager.goToPreviousPage();
 };
 </script>
 
 <template>
-	<PaginationLink data-slot="pagination-previous" :disabled="isDisabled" :class="props.class" @click="handleClick">
+	<PaginationLink data-slot="pagination-previous" :disabled="isDisab" :class="props.class" @click="onClick">
 		<slot>Prev</slot>
 	</PaginationLink>
 </template>

src/components/ui/pagination/Pagination.vue

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue';
 import { computed, provide, ref, watch } from 'vue';
 import { cn } from '@components/lib/utils';
-import { buildPaginationItems, clampPage, PAGINATION_CONTEXT } from './pagination';
+import { pagItems, clampPg, PAG_CTX } from './pagination';
 
 interface Props {
 	total: number;
@@ -27,56 +27,56 @@ const emit = defineEmits<{
 	'update:page': [page: number];
 }>();
 
-const uncontrolledPage = ref(props.defaultPage);
+const localPg = ref(props.defaultPage);
 
-const pageCount = computed(() => {
+const pageCnt = computed(() => {
 	const total = Number.isFinite(props.total) ? Math.max(0, props.total) : 0;
-	const itemsPerPage = Number.isFinite(props.itemsPerPage) ? Math.max(1, props.itemsPerPage) : 1;
+	const perPage = Number.isFinite(props.itemsPerPage) ? Math.max(1, props.itemsPerPage) : 1;
 
-	return Math.max(1, Math.ceil(total / itemsPerPage));
+	return Math.max(1, Math.ceil(total / perPage));
 });
 
-const currentPage = computed({
-	get: () => clampPage(props.page ?? uncontrolledPage.value, pageCount.value),
+const curPage = computed({
+	get: () => clampPg(props.page ?? localPg.value, pageCnt.value),
 	set: (page: number) => {
-		const nextPage = clampPage(page, pageCount.value);
+		const nextPg = clampPg(page, pageCnt.value);
 
 		if (props.page === undefined) {
-			uncontrolledPage.value = nextPage;
+			localPg.value = nextPg;
 		}
 
-		emit('update:page', nextPage);
+		emit('update:page', nextPg);
 	},
 });
 
-const isDisabled = computed(() => props.disabled);
-const items = computed(() => buildPaginationItems(currentPage.value, pageCount.value, props.siblingCount, props.showEdges));
+const isDisab = computed(() => props.disabled);
+const items = computed(() => pagItems(curPage.value, pageCnt.value, props.siblingCount, props.showEdges));
 
-watch(pageCount, (nextPageCount) => {
-	if (currentPage.value > nextPageCount) {
-		currentPage.value = nextPageCount;
+watch(pageCnt, (nextCnt) => {
+	if (curPage.value > nextCnt) {
+		curPage.value = nextCnt;
 	}
 });
 
-provide(PAGINATION_CONTEXT, {
-	page: currentPage,
-	pageCount,
+provide(PAG_CTX, {
+	page: curPage,
+	pageCount: pageCnt,
 	items,
-	disabled: isDisabled,
+	disabled: isDisab,
 	setPage: (page) => {
-		currentPage.value = page;
+		curPage.value = page;
 	},
 	goToPreviousPage: () => {
-		currentPage.value = currentPage.value - 1;
+		curPage.value = curPage.value - 1;
 	},
 	goToNextPage: () => {
-		currentPage.value = currentPage.value + 1;
+		curPage.value = curPage.value + 1;
 	},
 });
 </script>
 
 <template>
 	<nav role="navigation" aria-label="Pagination" data-slot="pagination" :class="cn('flex w-full', props.class)">
-		<slot :page="currentPage" :page-count="pageCount.value" :pageCount="pageCount.value" />
+		<slot :page="curPage" :page-count="pageCnt.value" :pageCount="pageCnt.value" />
 	</nav>
 </template>

src/components/ui/pagination/index.ts

@@ -1,7 +1,7 @@
 export { default as Pagination } from './Pagination.vue';
-export { default as PaginationContent } from './PaginationContent.vue';
-export { default as PaginationEllipsis } from './PaginationEllipsis.vue';
-export { default as PaginationItem } from './PaginationItem.vue';
-export { default as PaginationLink } from './PaginationLink.vue';
-export { default as PaginationNext } from './PaginationNext.vue';
-export { default as PaginationPrevious } from './PaginationPrevious.vue';
+export { default as PaginationContent } from './PagCont.vue';
+export { default as PaginationEllipsis } from './PagEllip.vue';
+export { default as PaginationItem } from './PagItem.vue';
+export { default as PaginationLink } from './PagLink.vue';
+export { default as PaginationNext } from './PagNext.vue';
+export { default as PaginationPrevious } from './PagPrev.vue';