initial commit

.eslintrc-auto-import.json

@@ -0,0 +1,87 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true,
+    "Editor": true,
+    "data": true,
+    "format": true,
+    "highlight": true,
+    "lifecycle": true,
+    "methods": true,
+    "parser": true,
+    "props": true,
+    "vueCompositionConverter": true,
+    "tool": true,
+    "DirectiveBinding": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "onWatcherCleanup": true,
+    "useId": true,
+    "useModel": true,
+    "useTemplateRef": true,
+    "parsedSfc": true,
+    "parseSfc": true,
+    "composeSfc": true
+  }
+}

.github/workflows/deploy.yml

@@ -0,0 +1,37 @@
+name: Deploy
+
+on:
+  push:
+    branches: ["main"]
+
+jobs:
+  web-deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+
+      - name: Setup pnpm and install dependencies
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: true
+
+      - name: Run tests
+        run: pnpm test
+
+      - name: Build docs
+        run: pnpm docs:build
+
+      - name: 📂 Sync files
+        uses: SamKirkland/[email protected]
+        with:
+          server: ${{ secrets.FTP_SERVER}}
+          username: ${{ secrets.FTP_ACCOUNT}}
+          password: ${{ secrets.FTP_PASSWORD}}
+          server-dir: "/tools/"
+          local-dir: "./.vitepress/dist/"

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+coverage
+cache
+.vscode/settings.json

.vitepress/config.ts

@@ -0,0 +1,77 @@
+import { defineConfig } from 'vitepress';
+
+export default defineConfig({
+	title: 'Kalimah Tools',
+	description: 'A collection of tools',
+		 head: [
+		[
+			'link', {
+				rel: 'icon',
+				href: '/logo.svg',
+				type: 'image/svg+xml',
+			},
+		],
+		[
+			'script',
+			{
+				async: '',
+				src: 'https://www.googletagmanager.com/gtag/js?id=G-0N928V7RV2',
+			},
+		],
+		[
+			'script',
+			{},
+			`window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-0N928V7RV2');`,
+		],
+	],
+	themeConfig: {
+		logo: '/logo.svg',
+		nav: [
+			{
+				text: 'Home',
+				link: '/',
+			},
+			{
+				text: 'Blog',
+				link: 'https://kalimah-apps.com/',
+			},
+			{
+				text: 'Projects',
+				link: 'https://kalimah-apps.com/projects',
+			},
+			{
+				text: 'Resources',
+				link: 'https://resources.kalimah-apps.com/',
+			},
+		],
+
+		sidebar: [
+			{
+				text: 'Tools',
+				items: [
+					{
+						text: 'Vue Composition Converter',
+						link: '/vue-composition-converter/info',
+					},
+				],
+			},
+		],
+		socialLinks: [
+			{
+				icon: 'github',
+				link: 'https://github.com/kalimahapps/tools',
+			},
+			{
+				icon: 'npm',
+				link: 'https://www.npmjs.com/org/kalimahapps',
+			},
+			{
+				icon: 'twitter',
+				link: 'https://twitter.com/kalimahapps',
+			},
+		],
+	},
+});

.vitepress/theme/GoToButton.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class="flex justify-center mb-2 mt-8">
+		<a
+			v-bind="$attrs"
+			class="!no-underline
+				!text-[var(--vp-button-brand-text)]
+				!transition-all
+				bg-[var(--vp-button-brand-bg)]
+				hover:bg-[var(--vp-button-brand-hover-bg)]
+				border
+				hover:border-[var(--vp-button-brand-hover-border)]
+				border-[var(--vp-c-brand-3)]
+				mx-auto
+				p-6
+				rounded-md
+				hover:text-[var(--vp-button-brand-hover-text)]"
+		>
+			<slot />
+		</a>
+	</div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+	inheritAttrs: false,
+});
+</script>

.vitepress/theme/Layout.vue

@@ -0,0 +1,28 @@
+<template>
+	<Layout>
+		<template #nav-bar-content-before>
+			<div class="flex items-center gap-3 ps-4">
+				{{ $frontmatter.title }}
+				<a
+					v-if="$frontmatter.info"
+					class="bg-[var(--vp-button-alt-bg)]
+						block
+						border
+						hover:border-[var(--vp-button-alt-border-hover)]
+						border-[var(--vp-button-alt-border)]
+						p-1
+						rounded-full
+						transition-colors"
+					:href="$frontmatter.info"
+				>
+					<AnOutlinedInfo class="text-base" />
+				</a>
+			</div>
+		</template>
+	</Layout>
+</template>
+
+<script setup lang="ts">
+import DefaultTheme from 'vitepress/theme';
+const { Layout } = DefaultTheme;
+</script>

.vitepress/theme/ToolsList.vue

@@ -0,0 +1,45 @@
+<template>
+	<h2 class="!border-0 !mt-0">
+		Tools
+	</h2>
+	<div class="grid grid-cols-3 gap-4">
+		<a
+			v-for="tool in tools"
+			:key="tool.link"
+			:href="`${tool.link}`"
+			class="!no-underline
+				!transition-all
+				bg-[var(--vp-c-bg-soft)]
+				border
+				hover:border-[var(--vp-c-brand-1)]
+				border-[var(--vp-c-divider)]
+				p-6
+				rounded-xl"
+		>
+			<h2
+				class="!border-0
+					!my-0
+					!py-0
+					!text-lg
+					text-[var(--vp-c-text-1)]"
+			>
+				{{ tool.label }}
+			</h2>
+			<p
+				class="text-[var(--vp-c-text-2)]"
+			>
+				{{ tool.description }}
+			</p>
+		</a>
+	</div>
+</template>
+
+<script setup lang="ts">
+const tools = [
+	{
+		link: '/vue-composition-converter/info.html',
+		label: 'Vue Composition Converter',
+		description: 'Converts Vue 2 Options API to Vue 3 Composition API',
+	},
+];
+</script>

.vitepress/theme/index.ts

@@ -0,0 +1,17 @@
+import type { Theme } from 'vitepress';
+import DefaultTheme from 'vitepress/theme';
+import './tailwind.css';
+import VueCompositionConverter from '@/tools/vue-composition-converter/index.vue';
+import ToolsList from './ToolsList.vue';
+import GoToButton from './GoToButton.vue';
+import Layout from './Layout.vue';
+export default {
+	extends: DefaultTheme,
+	Layout,
+	enhanceApp({ app }) {
+		// register your custom global components
+		app.component('VueCompositionConverter', VueCompositionConverter);
+		app.component('ToolsList', ToolsList);
+		app.component('GoToButton', GoToButton);
+	},
+} satisfies Theme;

.vitepress/theme/tailwind.css

@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --vp-c-brand-1: #6767e7;
+  --vp-c-brand-2: #494ae2;
+  --vp-home-hero-image-background-image: linear-gradient(135deg, var(--vp-c-brand-1) 0%, var(--vp-c-brand-2) 100%);
+	--vp-home-hero-image-filter: blur(120px);
+}
+
+.VPSidebarItem.is-active p {
+	font-weight: bold !important;
+}

.vscode/tabaqa.json

@@ -0,0 +1,3 @@
+{
+	"extends": "https://raw.githubusercontent.com/kalimahapps/configs/main/.vscode/settings.json"
+}