Merge branch 'ProjectDepot:main' into main

Author: parsehex

README.md

@@ -1,12 +1,10 @@
-# GitCase
-
-> [!NOTE] Name change incoming
+# Project Depot Gallery
 
 ---
 
 > You've already created your projects -- show them off without spending more time.
 
-GitCase is a ready-to-use template that deploys a zero-maintenance landing page to your [USERNAME].github.io repository. With a single click, your GitHub repositories are showcased and updated everyday via GitHub Actions. No manual updates needed—just point it at your GitHub account and let it run.
+Project Depot Gallery is a ready-to-use template that deploys a zero-maintenance landing page to your [USERNAME].github.io repository. With a single click, your GitHub repositories are showcased and updated everyday via GitHub Actions. No manual updates needed—just point it at your GitHub account and let it run.
 
 ## Key Features
 
@@ -48,20 +46,20 @@ To customize the app, create your own configuration file:
 
 ## Updating
 
-When GitCase updates upstream, you can easily bring in the changes to your copy of the app by going to **your repo** -> **Sync fork** -> **Update branch**, which will start the re-building process.
+When Gallery updates upstream, you can easily bring in the changes to your copy of the app by going to **your repo** -> **Sync fork** -> **Update branch**, which will start the re-building process.
 
 ## Demo
 
-To see a working demo of GitCase in action, check out my copy at [parsehex.github.io](https://parsehex.github.io/).
+To see a working demo of Gallery in action, check out my copy at [parsehex.github.io](https://parsehex.github.io/).
 
 ## Local Development Setup
 
 If you want to run the project locally:
 
 1. Clone the repo:
 
-   git clone <https://github.com/GitCase-app/GitCase>
-   cd GitCase
+   git clone <https://github.com/ProjectDepot/Gallery>
+   cd Gallery
 
 2. Copy `.env.example` to `.env` and update the GitHub username:
    • Example:

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "gitcase",
+  "name": "project-depot-gallery",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -23,7 +23,8 @@
     "pinia": "^3.0.3",
     "tailwindcss": "^4.0.8",
     "tippy.js": "^6.3.7",
-    "vue": "^3.5.21"
+    "vue": "^3.5.21",
+    "vue-tippy": "^6.7.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",

package.json

@@ -18,8 +18,6 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted, watch, computed, toRefs } from 'vue'
-import tippy from 'tippy.js'
-import 'tippy.js/dist/tippy.css'
 import Hero from './Hero.vue'
 import repos from './repos.json'
 import Header from './Header.vue'
@@ -60,10 +58,6 @@ const { config } = toRefs(configStore)
 onMounted(async () => {
 	await configStore.loadConfig()
 
-	tippy('[data-tooltip]', {
-		content: (el) => el.getAttribute('data-tooltip') as string,
-	})
-
 	if (config.value?.hero.src) {
 		fetch(config.value.hero.src)
 			.then((res) => res.text())

src/App.vue

@@ -1,10 +1,9 @@
 <template>
 	<footer class="mt-8 text-center text-gray-600 dark:text-gray-400">
 		<p v-if="footerText">{{ footerText }}</p>
-		<p class="text-xs"> Showcase your GitHub repositories with <a v-if="includeGitCaseLink"
-				href="https://github.com/GitCase-app/GitCase" target="_blank" rel="noopener noreferrer"
-				class="underline hover:text-blue-500"> GitCase </a>
-			<span v-else>GitCase</span>
+		<p v-if="includeGitCaseLink" class="text-xs"> Showcase your GitHub repositories with <a
+				href="https://github.com/ProjectDepot/Gallery" target="_blank" rel="noopener noreferrer"
+				class="underline hover:text-blue-500"> Project Depot Gallery </a>
 		</p>
 	</footer>
 </template>

src/Footer.vue

@@ -12,7 +12,6 @@
 	</header>
 </template>
 <script setup lang="ts">
-import 'tippy.js/dist/tippy.css'
 import { useConfigStore } from './stores/config'
 import { computed } from 'vue'
 

src/Header.vue

@@ -11,12 +11,12 @@
 		<div class="text-sm text-gray-500 dark:text-gray-400 mb-4 space-y-1">
 			<div class="flex items-center gap-2 flex-wrap">
 				<Clock class="w-4 h-4" />
-				<span :data-tooltip="formatDate(repo.pushed_at, true)" class="relative"> {{ repo.latest_update?.label }}: {{
+				<span v-tippy="formatDate(repo.pushed_at, true)" class="relative"> {{ repo.latest_update?.label }}: {{
 					repo.latest_update && showRelativeTime(repo.latest_update.value) }} </span>
 			</div>
 			<div v-if="repo.created_at" class="flex items-center gap-2 flex-wrap">
 				<Calendar class="w-4 h-4" />
-				<span :data-tooltip="formatDate(repo.created_at, true)" class="relative"> Created: {{
+				<span v-tippy="formatDate(repo.created_at, true)" class="relative"> Created: {{
 					showRelativeTime(repo.created_at) }} </span>
 			</div>
 		</div>
@@ -36,9 +36,9 @@
 			</a>
 			<button v-if="hasReadme" @click="$emit('readme-click', repo)"
 				class="flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
-				title="View README">
+				v-tippy="'View README'">
 				<BookOpen class="w-4 h-4" />
-				<span>README</span>
+				<span class="hidden xl:inline">README</span>
 			</button>
 		</div>
 	</div>
@@ -68,9 +68,9 @@
 			</a>
 			<button v-if="hasReadme" @click="$emit('readme-click', repo)"
 				class="flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
-				title="View README">
+				v-tippy="'View README'">
 				<BookOpen class="w-4 h-4" />
-				<span>README</span>
+				<span class="hidden sm:inline">README</span>
 			</button>
 		</div>
 	</div>

src/components/repo/RepoCard.vue

@@ -1,8 +1,13 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
+import VueTippy from 'vue-tippy';
+import 'tippy.js/dist/tippy.css';
 import './index.css';
 import App from './App.vue';
 
 const app = createApp(App);
 app.use(createPinia());
+app.use(VueTippy, {
+	defaultProps: {},
+});
 app.mount('#app');