From d3c25b033c2b0d13e9b81f41399f20b2b9f685ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kadir=20Yaz=C4=B1c=C4=B1?=
 <47540799+kadiryazici@users.noreply.github.com>
Date: Fri, 14 Oct 2022 01:55:31 +0300
Subject: [PATCH] Redirect to repo on click code icon (#11)

* Redirect to repo on click code icon

* Add pages support
---
 .github/workflows/pages.yml           | 29 +++++++++++++++++++++++++++
 playground/App.vue                    |  6 +++++-
 playground/components/TheSidebar.vue  |  4 ++--
 playground/examples/keyboard/index.ts |  4 ++--
 playground/examples/nested/index.ts   |  4 ++--
 playground/types.ts                   |  2 +-
 vite.config.ts                        |  8 +++++++-
 7 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 .github/workflows/pages.yml

diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
new file mode 100644
index 0000000..87ad488
--- /dev/null
+++ b/.github/workflows/pages.yml
@@ -0,0 +1,29 @@
+name: Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    name: Pages
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+      - name: Install dependencies
+        run: npm install
+      - name: Build for pages
+        run: npm run build:pages
+      - name: Deploy
+        uses: crazy-max/ghaction-github-pages@v2
+        with:
+          target_branch: gh-pages
+          build_dir: playground/dist
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
diff --git a/playground/App.vue b/playground/App.vue
index 6af3f20..8181bb7 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -7,13 +7,17 @@ const activeExampleId = ref(examples[0].id);
 const activeExample = computed(() =>
   examples.find((example) => example.id === activeExampleId.value),
 );
+
+function handleClickSourceCode(link: string) {
+  window.open(link, '_blank');
+}
 </script>
 
 <template>
   <TheSidebar
     v-model:activeExample="activeExampleId"
     :examples="examples"
-    @clickSourceCode="({}.constructor.constructor('return console.log')()(activeExample?.code))"
+    @clickSourceCode="handleClickSourceCode"
   />
 
   <div class="site-container">
diff --git a/playground/components/TheSidebar.vue b/playground/components/TheSidebar.vue
index 7435fec..ec979fc 100644
--- a/playground/components/TheSidebar.vue
+++ b/playground/components/TheSidebar.vue
@@ -9,7 +9,7 @@ interface Props {
 
 interface Emits {
   (e: 'update:activeExample', id: string): void;
-  (e: 'clickSourceCode'): void;
+  (e: 'clickSourceCode', link: string): void;
 }
 
 const props = withDefaults(defineProps<Props>(), { examples: () => [] });
@@ -28,7 +28,7 @@ function handleItemClick(example: Example) {
       :text="example.title"
       :active="props.activeExample === example.id"
       @click="() => handleItemClick(example)"
-      @clickSourceCode="$emit('clickSourceCode')"
+      @clickSourceCode="$emit('clickSourceCode', example.repoLink)"
     />
   </ul>
 </template>
diff --git a/playground/examples/keyboard/index.ts b/playground/examples/keyboard/index.ts
index cf75494..03e2431 100644
--- a/playground/examples/keyboard/index.ts
+++ b/playground/examples/keyboard/index.ts
@@ -1,13 +1,13 @@
 import type { Example } from '../../types';
 import { nanoid } from 'nanoid';
 import { defineAsyncComponent } from 'vue';
-import code from './index.vue?raw';
 
 const keyboardExample: Example = {
   id: nanoid(),
   title: 'Keyboard Support',
   component: defineAsyncComponent(() => import('./index.vue')),
-  code,
+  repoLink:
+    'https://github.com/kadiryazici/vue-selectable-items/tree/main/playground/examples/keyboard',
 };
 
 export default keyboardExample;
diff --git a/playground/examples/nested/index.ts b/playground/examples/nested/index.ts
index a93b82f..9b8e656 100644
--- a/playground/examples/nested/index.ts
+++ b/playground/examples/nested/index.ts
@@ -1,13 +1,13 @@
 import type { Example } from '../../types';
 import { nanoid } from 'nanoid';
 import { defineAsyncComponent } from 'vue';
-import code from './index.vue?raw';
 
 const nestedExample: Example = {
   id: nanoid(),
   title: 'Nested Items',
   component: defineAsyncComponent(() => import('./index.vue')),
-  code,
+  repoLink:
+    'https://github.com/kadiryazici/vue-selectable-items/tree/main/playground/examples/nested',
 };
 
 export default nestedExample;
diff --git a/playground/types.ts b/playground/types.ts
index 9f0a4f8..55451a2 100644
--- a/playground/types.ts
+++ b/playground/types.ts
@@ -3,7 +3,7 @@ import type { Component } from 'vue';
 export interface Example {
   title: string;
   id: string;
-  code?: string;
+  repoLink: string;
   component: Component;
 }
 
diff --git a/vite.config.ts b/vite.config.ts
index 9fe815a..c72d029 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -44,4 +44,10 @@ const prodConfig: UserConfigExport = {
 };
 
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => (mode === 'production' ? prodConfig : devConfig));
+export default defineConfig(({ mode }) => {
+  if (mode === 'production') return prodConfig;
+  if (mode === 'development') return devConfig;
+  if (mode === 'staging') return { ...devConfig, base: '/vue-selectable-items' };
+
+  throw new Error('Invalid mode');
+});