feat: add git-skyline extension

apps/desktop/pages/iframe-ext.vue

@@ -21,7 +21,7 @@ import { loadExtensionManifestFromDisk } from "~/lib/commands/extensions"
 import { cn } from "~/lib/utils"
 import { sendNotificationWithPermission } from "~/lib/utils/notification"
 import { isInMainWindow } from "~/lib/utils/window"
-import { ArrowLeftIcon, MoveIcon, RefreshCcwIcon } from "lucide-vue-next"
+import { ArrowLeftIcon, MoveIcon, RefreshCcwIcon, XIcon } from "lucide-vue-next"
 import { flatten, safeParse } from "valibot"
 import * as v from "valibot"
 import { toast } from "vue-sonner"
@@ -37,14 +37,16 @@ const ui = reactive<{
 	backBtnPosition: Position
 	moveBtnPosition: Position
 	refreshBtnPosition: Position
+	transparentBg: boolean
 }>({
 	iframeLoaded: false,
-	showBackBtn: isInMainWindow(), // if open in new window, hide back button
+	showBackBtn: true, // if open in new window, hide back button
 	showMoveBtn: true,
 	showRefreshBtn: true,
 	backBtnPosition: "top-left",
 	moveBtnPosition: "bottom-left",
-	refreshBtnPosition: "top-right"
+	refreshBtnPosition: "top-right",
+	transparentBg: false
 })
 const appWin = getCurrentWindow()
 const iframeRef = ref<HTMLIFrameElement | null>(null)
@@ -58,7 +60,11 @@ const iframeUiAPI: Omit<
 		navigateTo(localePath("/"))
 	},
 	iframeUiGoBack: async () => {
-		history.back()
+		if (isInMainWindow()) {
+			navigateTo(localePath("/"))
+		} else {
+			appWin.close()
+		}
 	},
 	iframeUiHideBackButton: async () => {
 		ui.showBackBtn = false
@@ -90,11 +96,20 @@ const iframeUiAPI: Omit<
 	},
 	async iframeUiReloadPage() {
 		location.reload()
+	},
+	async iframeSetTransparentWindowBackground(transparent: boolean) {
+		if (isInMainWindow()) {
+			throw new Error("Cannot set background in main window")
+		}
+		if (transparent) {
+			document.body.style.backgroundColor = "transparent"
+		} else {
+			document.body.style.backgroundColor = ""
+		}
 	}
 }
 
 onMounted(async () => {
-	// navigateTo(localePath("/"))
 	setTimeout(() => {
 		appWin.show()
 	}, 100)
@@ -222,6 +237,14 @@ function positionToCssStyleObj(position?: Position) {
 	}
 	return ret
 }
+
+function onBackBtnClicked() {
+	if (isInMainWindow()) {
+		navigateTo(localePath("/"))
+	} else {
+		appWin.close()
+	}
+}
 </script>
 <template>
 	<main class="h-screen">
@@ -231,9 +254,10 @@ function positionToCssStyleObj(position?: Position) {
 			:style="positionToCssStyleObj(ui.backBtnPosition)"
 			size="icon"
 			variant="outline"
-			@click="navigateTo(localePath('/'))"
+			@click="onBackBtnClicked"
 		>
-			<ArrowLeftIcon class="w-4" />
+			<ArrowLeftIcon v-if="appWin.label === 'main'" class="w-4" />
+			<XIcon v-else class="w-4" />
 		</Button>
 		<Button
 			v-if="ui.showMoveBtn"
@@ -268,3 +292,8 @@ function positionToCssStyleObj(position?: Position) {
 		<FunDance v-if="!ui.iframeLoaded" class="-z-30" />
 	</main>
 </template>
+<style>
+body {
+	/* background-color: transparent; */
+}
+</style>

apps/desktop/pages/index.vue

@@ -103,9 +103,6 @@ onMounted(async () => {
 	setTimeout(() => {
 		extLoaders.value = cache
 	}, 10)
-	listen("tauri://blur", (e) => {
-		console.log(e)
-	})
 })
 
 // when close window if not focused on input. If input element has content, clear the content

apps/desktop/src-tauri/Cargo.toml

@@ -11,7 +11,7 @@ edition = "2021"
 tauri-build = { version = "2.0.0-beta", features = [] }
 
 [dependencies]
-tauri = { version = "2.0.0-beta", features = [
+tauri = { version = "2.0.0-beta", features = [ "macos-private-api",
     "protocol-asset",
     "image-png",
     "image-ico",

apps/desktop/src-tauri/tauri.conf.json

@@ -9,7 +9,7 @@
 		"frontendDist": "../dist"
 	},
 	"app": {
-		"macOSPrivateApi": false,
+		"macOSPrivateApi": true,
 		"windows": [
 			{
 				"title": "",

extensions/git-skyline/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["Vue.volar"]
+}

extensions/git-skyline/CHANGELOG.md

@@ -0,0 +1,8 @@
+# template-ext-vue
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [fba6a49]
+  - @kksh/vue@0.0.1

extensions/git-skyline/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

extensions/git-skyline/components.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://shadcn-vue.com/schema.json",
+	"style": "new-york",
+	"typescript": true,
+	"tsConfigPath": "./tsconfig.json",
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/index.css",
+		"baseColor": "neutral",
+		"cssVariables": true
+	},
+	"framework": "vite",
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils"
+	}
+}

extensions/git-skyline/dist/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+    <script type="module" crossorigin src="./assets/index-CtWBky6f.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BLdfQ8o3.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

extensions/git-skyline/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

extensions/git-skyline/package.json

@@ -0,0 +1,64 @@
+{
+	"$schema": "../../packages/schema/manifest-json-schema.json",
+	"name": "kunkun-ext-git-skyline",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "vue-tsc -b && vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@kksh/api": "workspace:*",
+		"@kksh/vue": "0.1.2",
+		"@radix-icons/vue": "^1.0.0",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.1.1",
+		"radix-vue": "^1.9.2",
+		"tailwind-merge": "^2.4.0",
+		"tailwindcss-animate": "^1.0.7",
+		"vue": "^3.4.31",
+		"zod": "^3.23.8"
+	},
+	"devDependencies": {
+		"@types/node": "^20.14.12",
+		"@vitejs/plugin-vue": "^5.0.5",
+		"autoprefixer": "^10.4.19",
+		"postcss": "^8.4.38",
+		"tailwindcss": "^3.4.6",
+		"typescript": "^5.2.2",
+		"vite": "^5.3.4",
+		"vue-tsc": "^2.0.24"
+	},
+	"kunkun": {
+		"name": "Git Skyline",
+		"shortDescription": "Display your 3D GitHub Skyline",
+		"longDescription": "Display your 3D GitHub Skyline from https://git-skyline.huakun.tech",
+		"identifier": "git-skyline",
+		"icon": {
+			"type": "iconify",
+			"value": "tabler:building-skyscraper"
+		},
+		"demoImages": [],
+		"permissions": [],
+		"customUiCmds": [
+			{
+				"main": "dist",
+				"devMain": "http://localhost:5173",
+				"name": "Git Skyline",
+				"cmds": [],
+				"window": {
+					"title": "",
+					"transparent": true,
+					"hiddenTitle": true,
+					"decorations": false
+				}
+			}
+		],
+		"templateUiCmds": []
+	},
+	"files": [
+		"dist"
+	]
+}

extensions/git-skyline/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

extensions/git-skyline/src/App.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { initCustomExtension, toast, ui } from "@kksh/api/ui/iframe"
+import { updateTheme } from "@kksh/vue"
+import { computed, onMounted, ref, watch } from "vue"
+import ContextMenu from "./components/context-menu.vue"
+import PreferencesComponent from "./components/preference.vue"
+import { getPreferences } from "./lib/db"
+import { Preferences, PreferencesSchema } from "./lib/model"
+import { cn } from "./lib/utils"
+
+const displayPreference = ref(false)
+const preferences = ref<Preferences>()
+const showInstructions = ref(true)
+
+watch(preferences, (val) => {
+	console.log("latest preferences", val)
+
+	if (val) {
+		setTransparentBackground(val.transparentBackground)
+		displayPreference.value = false
+	} else {
+		displayPreference.value = true
+	}
+})
+
+function setTransparentBackground(transparent: boolean) {
+	document.body.style.backgroundColor = transparent ? "transparent" : ""
+}
+const url = computed(() => {
+	if (!preferences.value) {
+		return null
+	}
+	const p = preferences.value
+	const params = new URLSearchParams({
+		enableZoom: p.enableZoom ? "true" : "false",
+		enablePan: p.enablePanning ? "true" : "false",
+		enableDamping: p.enableDamping ? "true" : "false",
+		autoRotate: p.enableAutoRotate ? "true" : "false",
+		autoRotateSpeed: p.autoRotateSpeed.toString()
+	})
+	return `https://git-skyline.huakun.tech/contribution/github/huakunshen/embed?${params.toString()}`
+})
+
+onMounted(async () => {
+	initCustomExtension()
+	ui.setTransparentWindowBackground(true)
+	ui.showBackButton("bottom-right")
+	ui.hideMoveButton()
+	ui.getTheme().then((theme) => {
+		updateTheme(theme)
+	})
+	console.log("mounted")
+
+	const pref = await getPreferences()
+	console.log(pref)
+
+	if (pref) {
+		displayPreference.value = false
+		preferences.value = pref
+		setTransparentBackground(preferences.value.transparentBackground)
+	} else {
+		toast.error("Failed to load preferences")
+		displayPreference.value = true
+	}
+	setTimeout(() => {
+		showInstructions.value = false
+	}, 5000)
+})
+</script>
+
+<template>
+	<div class="h-screen" v-if="displayPreference">
+		<PreferencesComponent v-model="preferences" />
+	</div>
+	<div class="absolute z-0 h-screen w-full" v-if="!displayPreference && url">
+		<iframe width="100%" height="100%" frameBorder="0" class="grow" :src="url" frameborder="0" />
+	</div>
+	<div class="flex h-screen flex-col">
+		<div class="z-50 h-32" data-tauri-drag-region>
+			<div
+				:class="
+					cn(
+						'kunkun-drag-region flex h-full w-full items-center justify-center',
+						showInstructions ? 'border border-green-400' : ''
+					)
+				"
+			>
+				<h1 v-if="showInstructions" class="kunkun-drag-region z-0 select-none text-3xl">
+					Left Click and Drag this region to move this window
+				</h1>
+			</div>
+		</div>
+		<div class="grow"></div>
+		<div class="z-50 h-32">
+			<div class="h-full w-full">
+				<ContextMenu
+					:showInstructions="showInstructions"
+					v-model:displayPreference="displayPreference"
+				/>
+			</div>
+		</div>
+	</div>
+</template>