feat: Added the ability to download the readme as a file

src/pages/index.css

@@ -159,9 +159,18 @@ input:focus {
     justify-self: center;
     padding: 2% 0%;
 }
+.download-button {
+    background: var(--grey-05);
+    border: 2px solid var(--grey-75);
+    text-align: center;
+    cursor: pointer;
+    width: 50%;
+    justify-self: center;
+    padding: 2% 0%;
+}
 .utils {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
     margin-top: 4%;
 }
 .preview-button {
@@ -336,4 +345,4 @@ a {
     #markdown-content {
         word-break: break-all;
     }
-}
+}

src/pages/index.js

@@ -13,7 +13,7 @@ import gsap from 'gsap';
 import Loader from '../components/loader';
 import Footer from '../components/footer';
 import './index.css'
-import { ArrowLeftIcon, CopyIcon, EyeIcon } from '@primer/octicons-react';
+import { ArrowLeftIcon, CopyIcon, DownloadIcon, EyeIcon } from '@primer/octicons-react';
 import SEO from '../components/seo';
 
 const IndexPage = () => {
@@ -168,6 +168,18 @@ const IndexPage = () => {
       duration: 0.5
     });
   }
+
+  const handleDownload = () => {
+    var markdownContent = document.getElementById("markdown-content");
+    var tempElement = document.createElement('a');
+    tempElement.setAttribute('href', 'data:text/markdown;charset=utf-8,' + encodeURIComponent(markdownContent.innerText));
+    tempElement.setAttribute('download', 'README.md');
+    tempElement.style.display = 'none';
+    document.body.appendChild(tempElement);
+    tempElement.click();
+    document.body.removeChild(tempElement);
+  }
+
   const handleBackToEdit = () => {
     setGeneratePreview(false);
     setGenerateMarkdown(false);
@@ -216,6 +228,9 @@ const IndexPage = () => {
             <div className="copy-button" tabIndex="0" role="button" onClick={handleCopyToClipboard}>
               <CopyIcon size={24} /> <span className="hide-on-mobile" id="copy-markdown"> copy-markdown </span>
             </div>
+            <div className="download-button" tabIndex="0" role="button" onClick={handleDownload}>
+              <DownloadIcon size={24} /> <span className="hide-on-mobile" id="download-markdown"> download </span>
+            </div>
             <div className="preview-button" tabIndex="0" role="button" onClick={handleGeneratePreview}>
               <EyeIcon size={16} /> <span className="hide-on-mobile" id="preview-markdown"> preview</span>
             </div>