Redirect to repo on click code icon (#11)

* Redirect to repo on click code icon

* Add pages support

.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 }}

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">

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>

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;

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;

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;
 }
 

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');
+});