Merge pull request #7 from ksaswin/feat/download-readme

Add button to Download README
ksaswin · May 9, 2023 · 75f76dc · 75f76dc
2 parents bcf59ca + caf5da5
commit 75f76dc
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,9 +8,10 @@
       </div>
 
       <div class='header-buttons-div'>
-        <button v-if='canShowThemeToggle' class='header-btn' @click='store.toggleLightMode'>
+        <button v-if='isInEditorPage' class='header-btn toggle-theme-icon' @click='store.toggleLightMode'>
           {{ isLightModeSet ? '&#9790;' : '&#9788;' }}
         </button>
+        <button class='download-readme-btn' @click='store.download'>Download</button>
         <button class='header-btn'>
           <a :href='repoGithubUri'>
             <img class='github-img' src='@/assets/icons/github.svg' alt='Github icon'/>
@@ -43,7 +44,7 @@ const isLightModeSet = computed((): boolean => {
   return store.isLightModeEnabled;
 });
 
-const canShowThemeToggle = computed((): boolean => {
+const isInEditorPage = computed((): boolean => {
   return route.name === routePaths.editorPage;
 });
 </script>
@@ -86,23 +87,39 @@ body {
   .header-buttons-div {
     display: flex;
     align-items: center;
+    gap: 12px;
 
     .header-btn {
       border: none;
       background: none;
       text-align: center;
       text-decoration: none;
       display: inline-block;
-      font-size: 40px;
       color: rgb(200, 200, 200);
       cursor: pointer;
-      margin-left: 20px;
+      padding: 0;
 
       .github-img {
         width: 80%;
         padding-top: 10px;
       }
     }
+
+    .toggle-theme-icon {
+      font-size: 40px;
+    }
+
+    .download-readme-btn {
+      border: none;
+      border-radius: 10px;
+      padding: 0;
+      margin: 6px 0 0 0;
+      font-size: 14px;
+      height: 45px;
+      width: 100px;
+      background-color: rgb(84, 181, 132);
+      color: white;
+    }
   }
 }
 

diff --git a/src/store/mdstore.ts b/src/store/mdstore.ts
@@ -112,6 +112,15 @@ export const useMdStore = defineStore('mdstore', {
           break;
         }
       }
+    },
+
+    download(): void {
+      const blob = new Blob([this.allContent]);
+
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = 'README.md';
+      a.click();
     }
   },
 

diff --git a/tests/unit/store/mdstore.spec.ts b/tests/unit/store/mdstore.spec.ts
@@ -1,5 +1,5 @@
 import { setActivePinia, createPinia } from 'pinia';
-import { describe, beforeEach, it, expect } from 'vitest';
+import { describe, beforeEach, it, expect, vi } from 'vitest';
 
 import { useMdStore } from '@/store/mdstore';
 
@@ -209,6 +209,19 @@ describe('Md Store', () => {
 			store.removeSectionFromAvailableSections(testSections[0]);
 			expect(store.availableSections.length).toBe(testSections.length - 1);
 		});
+
+    it('download action downloads all content', () => {
+			const store = useMdStore();
+
+      global.URL.createObjectURL = vi.fn();
+      const blobSpy = vi.spyOn(global, 'Blob').mockImplementationOnce(() => ({
+        size: 80
+      }));
+
+      store.download();
+      expect(blobSpy).toHaveBeenCalled();
+      expect(global.URL.createObjectURL).toHaveBeenCalledWith({ size: 80 });
+    });
 	});
 
 	describe('mdStore getters', () => {