Merge pull request #7 from leon-luna-ray/dev

Dev

README.md

@@ -1,65 +1,48 @@
-  # ReadMe Generator
+# ReadMe Generator
 
-  ## Description
-  This application is currently being refactored as a web app.
+## Description
 
-  A command line application to seamlessly create a new ReadMe file for your projects quickly! This application will ask you all the right questions to generate a professional quality readme from the command line.
+A command line application to seamlessly create a new ReadMe file for your projects quickly! This application will ask you all the right questions to generate a professional quality readme from the command line.
 
-  [https://readme-generator-rldev.netlify.app/](https://readme-generator-rldev.netlify.app/)
+This project orginally started as a Node.js command line application. I have since refactored it to become a frontend web appliation for easy access.
 
+[![Netlify Status](https://api.netlify.com/api/v1/badges/7104dfd9-1c49-44d3-bf7e-831730ab07c4/deploy-status)](https://app.netlify.com/sites/readme-generator-rldev/deploys)
 
+🚀 [https://readme-generator-rldev.netlify.app/](https://readme-generator-rldev.netlify.app/)
 
-  [![Netlify Status](https://api.netlify.com/api/v1/badges/7104dfd9-1c49-44d3-bf7e-831730ab07c4/deploy-status)](https://app.netlify.com/sites/readme-generator-rldev/deploys)
+## Image
 
-  ## Table of Contents
+![Screenshot](./src/assets/img/screenshot.png)
 
-  * [Image](#image)
-  * [Usage](#usage)
-  * [Technologies](#technologies)
-  * [Known-Bugs](#known-bugs)
-  * [Next-Steps](#next-steps)
-  * [License](#License)
-  * [Contact](#contact)
-  * [Links](#Links)
+## Technologies
+- Vue.js
+- CSS3
+- HTML5
+- JavaScript
+- Netlify
+- TailwindCSS
+- Vite.js
 
-  ## Image
+## Next-Steps
 
-  ![Screenshot](https://github.com/leon-luna-ray/hw09-readme-generator/blob/main/assets/images/app-screenshot.png)
+Further refine and expand the question set.
 
-  ## Usage
-  This application runs on node js from the command line. Once cloned to your machine, open the folder with the index.js file in your integrated terminal and run the command 'node index.js.' Inquirer will then prompt you for all of the questions for what to include in your readme and create the new md file. See the video link below!
+## License
 
-  [Video](https://youtu.be/XI6C2lgj540)
+This project is licensed under the [MIT](https://opensource.org/licenses/MIT) license.
 
-  ## Technologies
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-  - Javascript
-  - Node.js
-  - inquirer npm
+## Contact
 
-  ## Known-Bugs
+### Author: Ray Luna
 
-  Trouble with getting some links to work in the table of contents and the screenshot when rendered by the app. Appears to be fixed but if not can be fixed by entering it manually in the md file.
+If you have any questions about the repo, open an issue or contact me directly at:
 
-  ## Next-Steps
+- E-Mail: leon.luna.ray@gmail.com
+- GitHub: [leon-luna-ray](https://github.com/leon-luna-ray)
 
-  Add functionality to add bullet point lists, add links to technologies section and fix bugs listed above and add additional sections further on as needed.
-
-  ## License
-
-  This project is licensed under the [MIT](https://opensource.org/licenses/MIT) license.
-
-  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-
-  ## Contact
-
-  ### Author: Ray Luna
-
-  If you have any questions about the repo, open an issue or contact me directly at:
-  - E-Mail: leon.luna.ray@gmail.com
-  - GitHub: [leon-luna-ray](https://github.com/leon-luna-ray)
-
-  ## Links
-
-  - [Project Repository](https://github.com/leon-luna-ray/hw09-readme-generator)
+## Links
 
+- [https://readme-generator-rldev.netlify.app/](https://readme-generator-rldev.netlify.app/)
+- [Project Repository](https://github.com/leon-luna-ray/readme-generator)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "readme-generator",
   "private": true,
-  "version": "0.0.0",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -9,17 +9,24 @@
         <div class="intro flex-col-2">
           <TerminalText :string="content.intro" :speed="500" />
           <div v-if="isReady" class="flex gap-x-[1rem]">
-            <p><span v-if="!formStore.isFormStarted" class="animate-pulse">{{ globalStore.indicator }}</span> {{ content.ready_text }}</p>
+            <p><span v-if="!formStore.isFormStarted" class="animate-pulse">{{ globalStore.indicator }}</span> {{
+              content.ready_text }}</p>
             <BooleanSelector @true="formStore.setIsFormStarted" @false="reloadPage" />
           </div>
         </div>
         <Form v-if="formStore.isFormStarted" :questions="content.questions" />
+
+        <div v-if="formStore.isFormReady" class="flex gap-x-[1rem]" ref="downloadRef">
+          <p><span class="animate-pulse">{{ globalStore.indicator }}</span> {{ content.download_text }}</p>
+          <BooleanSelector @true="formStore.handleSubmit" @false="reloadPage" />
+        </div>
       </main>
     </div>
   </div>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { storeToRefs } from 'pinia';
 import { useGlobalStore, useFormStore } from './stores/store'
 import { content } from './lib/content'
 
@@ -33,12 +40,29 @@ const globalStore = useGlobalStore();
 const formStore = useFormStore();
 
 // State
+const { isFormReady } = storeToRefs(formStore);
 const isReady = ref(false);
+const downloadRef = ref(null);
 
 // Methods
 const reloadPage = () => {
   location.reload()
 }
+const scrollToBottom = () => {
+  setTimeout(() => {
+    console.log('should scroll');
+    if (downloadRef.value) {
+      downloadRef.value.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, 100);
+};
+
+
+// Watchers
+watch(isFormReady, () => {
+  console.log('form is ready')
+  scrollToBottom();
+})
 
 // Lifecycle
 onMounted(() => {

src/assets/styles/base.css

@@ -26,7 +26,7 @@
 
   /* themes */
   #vue-app {
-    @apply h-screen w-screen;
+    @apply h-screen w-screen overflow-y-auto;
   }
   #vue-app.bsod,
   #vue-app.bsod input {

src/components/TextInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="text-input flex-col-1">
         <label for="title">{{ data.prompt }}</label>
-        <input type="text" for="title" class="outline-none" ref="inputRef" @keyup.prevent="e => handleKeyup(e)">
+        <input type="text" for="title" class="outline-none" ref="inputRef" :disabled="formStore.isFormReady" @keyup.prevent="e => handleKeyup(e)">
     </div>
 </template>
 <script setup>

src/lib/content.js

@@ -3,16 +3,26 @@ export const content = {
   intro:
     'This application will automatically generate a ReadMe.md file for use in your development projects. Simply answer a few questions about your project and Readme Generator will create your .md file for you!',
   ready_text: 'Are you ready to start?',
+  download_text: 'Are you ready to download your readme?',
   questions: [
     {
       type: 'text',
       name: 'title',
       prompt: 'What is the project title?',
+      template: (value) => {
+return `# ${value}`;
+      },
     },
     {
       type: 'text',
       name: 'description',
       prompt: 'A short description of the project',
+      template: (value) => {
+        return `
+## Description
+${value}
+        `;
+      },
     },
     // {
     //   type: 'multi',
@@ -32,27 +42,49 @@ export const content = {
       type: 'text',
       name: 'appUrl',
       prompt: 'What is the project URL?',
+      template: (value) => {
+        return `
+## Link
+${value}
+            `;
+      },
     },
-    {
-      type: 'text',
-      name: 'repoUrl',
-      prompt: 'What is the project repo URL?',
-    },
+    // Todo need to move to store to create template
+    // {
+    //   type: 'text',
+    //   name: 'repoUrl',
+    //   prompt: 'What is the project repo URL?',
+    //   template: (value) => {
+    //     return `# ${value}`;
+    //   },
+    // },
     {
       type: 'text',
       name: 'imageUrl',
       prompt: 'What is the project image URL or file path?',
+      template: (value) => {
+        return `
+# Image
+![Screenshot](${value})
+        `;
+      },
     },
-    {
-      type: 'text',
-      name: 'bugs',
-      prompt: 'A despription of any known bugs',
-    },
-    {
-      type: 'text',
-      name: 'nextSteps',
-      prompt: 'Next steps for the project',
-    },
+    // {
+    //   type: 'text',
+    //   name: 'bugs',
+    //   prompt: 'A despription of any known bugs',
+    //   template: (value) => {
+    //     return `# ${value}`;
+    //   },
+    // },
+    // {
+    //   type: 'text',
+    //   name: 'nextSteps',
+    //   prompt: 'Next steps for the project',
+    //   template: (value) => {
+    //     return `# ${value}`;
+    //   },
+    // },
     // {
     //   type: 'list',
     //   name: 'license',

src/stores/store.js

@@ -42,9 +42,7 @@ export const useFormStore = defineStore('form', () => {
   const isFormStarted = ref(false);
   const questions = ref([]);
   const currentLength = ref(1);
-
   const activeIndex = ref(0);
-  // use the isActiveIndex method
 
   // Computed
   const displayQuestions = computed(() => {
@@ -53,6 +51,30 @@ export const useFormStore = defineStore('form', () => {
     }
     return null;
   });
+  // const projectTitle = computed(() => {
+  //   const foundObject = questions.value.find((obj) => obj.name === 'title');
+  //   return foundObject ? foundObject.value : 'Title';
+  // });
+  const isFormReady = computed(() => {
+    if (
+      questions.value?.length &&
+      activeIndex.value === currentLength.value - 1
+    ) {
+      const lastQuestion = questions.value[questions.value.length - 1];
+      return lastQuestion.hasOwnProperty('value');
+    }
+    return false;
+  });
+  const templates = computed(() => {
+    if (isFormReady.value) {
+      return questions.value.map((item) => {
+        if (typeof item.template === 'function') {
+          return item.template(item.value);
+        }
+      });
+    }
+    return null;
+  });
 
   // Setters
   const setIsFormStarted = () => {
@@ -73,13 +95,27 @@ export const useFormStore = defineStore('form', () => {
     return questions.value[index].isActive;
   };
   const handleNextQuestion = () => {
-    currentLength.value++;
-    activeIndex.value++;
+    if (questions.value?.length === activeIndex.value - 1) {
+      handleSubmit();
+    } else {
+      currentLength.value++;
+      activeIndex.value++;
+    }
+  };
+  const generateMarkdown = () => {
+    let mdContent = ``;
+
+    if (templates.value) {
+      templates.value.forEach((template) => {
+        mdContent += `${template}\n\n`;
+      });
+    }
+
+    return mdContent.trim();
   };
-  const handleSubmit = (event) => {
+  const handleSubmit = () => {
     const downloadLink = document.getElementById('downloadLink');
-    const title = event.target[0].value;
-    const mdContent = `# ${title}`;
+    const mdContent = generateMarkdown();
     const blob = new Blob([mdContent], { type: 'text/markdown' });
     const mdFile = new File([blob], 'README.md');
     const url = URL.createObjectURL(mdFile);
@@ -98,7 +134,9 @@ export const useFormStore = defineStore('form', () => {
     currentLength,
     displayQuestions,
     isFormStarted,
+    isFormReady,
     questions,
+    templates,
     handleSubmit,
     handleNextQuestion,
     isIndexActive,