Merge pull request #53 from innovolve-ai/feature/#52-update-docs

updated docs

src/.vuepress/config.js

@@ -45,8 +45,16 @@ module.exports = {
                     link: "/localdevelopment/",
                   },
                   {
-                    text: "Create Articles",
-                    link: "/create_article/",
+                    text: "App Generation",
+                    link: "/app_generation/",
+                  },
+                  {
+                    text: "Update Document",
+                    link: "/update_document/",
+                  },
+                  {
+                    text: "Tech Stack",
+                    link: "/tech_stack/",
                   },
                   {
                     text: "Design Concepts",
@@ -111,8 +119,16 @@ module.exports = {
                     link: "/hi/localdevelopment/",
                   },
                   {
-                    text: "लेख बनाएं",
-                    link: "/hi/create_article/",
+                    text: "ऐप जनरेशन",
+                    link: "/app_generation/",
+                  },
+                  {
+                    text: "दस्तावेज़ अपडेट करें",
+                    link: "/hi/update_document/",
+                  },
+                  {
+                    text: "टेक स्टैक",
+                    link: "/tech_stack/",
                   },
                   {
                     text: "डिजाइन अवधारणाएं",

src/app_generation/README.md

@@ -0,0 +1,80 @@
+---
+sidebar: auto
+---
+
+## App Generation
+
+To generate this app from sratch run the following:
+
+### Part 1 - Automated
+
+- Install Vue globally - `npm install -g @vue/cli`
+- Create Vue App `vue create template-electron-vuex-vuetify`
+  - Please pick a preset:
+    - Manually select features
+  - Features (All Yes)
+  - Babel
+    - TypeScript
+    - Progressive Web App (PWA) Support
+    - Router
+    - Vuex
+    - CSS Pre-processors
+    - Linter / Formatter
+    - Unit Testing
+    - E2E Testing
+  - Use class-style component syntax?
+    - Yes
+  - Use Babel alongside TypeScript?
+    - Yes
+  - Use history mode for router?
+    - Yes
+  - Pick a CSS pre-processor:
+    - Sass/SCSS (with dart-sass)
+  - Pick a linter / formatter config:
+    - ESLint + Prettier
+- Pick additional lint features: \* Lint on save
+  - Pick a unit testing solution:
+    - Jest
+  - Pick an E2E testing solution:
+    Cypress
+  - Where do you prefer placing config:
+    - In dedicated config files
+- Add Vuetify UI framework `vue add vuetify`
+  - use `Default`
+
+### Part 2 - Manual steps
+
+- Remove Jest, will be replaced by [Vitest](https://vitest.dev/)
+  - remove test folder
+  - remove dependencies
+
+```sh
+npm remove @types/jest jest ts-jest @vue/vue3-jest @vue/cli-plugin-unit-jest babel-jest @vue/cli-plugin-babel
+```
+
+- Create [Vite template](https://vitejs.dev/guide/#trying-vite-online) for copying Vite config
+
+  - create blank vite-vue app `npm create vite@latest my-vue-app -- --template vue`
+  - copy accross folders `cypress` and `.vscode`
+  - copy acresss all the conig files
+
+- Add Electron, Vitest and Vite
+  - add configs `package.json`, `vite.config.ts`, `electron.js` and `electron/preload.js` follow this [Vite + Vue 3 + electron + TypeScript](https://dev.to/brojenuel/vite-vue-3-electron-5h4o)
+  - add dependencies
+
+```sh
+npm install vitest vue-tsc jsdom start-server-and-test @types/jsdom @types/node @vue/tsconfig @rushstack/eslint-patch @vitejs/plugin-vue concurrently cross-env electron electron-builder wait-on @types/electron-devtools-installer vite --save-dev
+```
+
+## Create Videos and GIF
+
+Here [Free Cam](https://www.freescreenrecording.com/) is used to create videos and after that a online converter
+[ezgif](https://ezgif.com/video-to-gif) is used to convert videos to GIF.
+
+<img width="800px" src="/freecam_window.png" />
+
+Its the main window of free cam video recorder , after clicking on `New recording` the video recording will get start.
+
+<img width="800px" src="/ezgif_window.png" />
+
+Need to select video in `Choose file` option from [ezgif] site and `Upload video!` for GIF conversion.

src/feature/README.md

@@ -47,28 +47,3 @@ This shows after minimise, app is running in background.
 
 Here app is closed permanently.
 
-## Tech Stack
-
-### Internationalisation/Multilingual
-the process of planning and implementing products and services so that they can easily be adapted to specific local languages and cultures, a process called localization. Using the [vue-i18n](https://www.npmjs.com/package/vue-i18n)package, this feature is implemented
-
-### PrimeVue
-[PrimeVue](https://www.primefaces.org/primevue/#/setup) is a rich set of open source native components for Vue.
-It is compatible with Vue3 and its working fine.
-
-### Cypress
-[Cypress](https://www.cypress.io/) is one of those popular tools which has established its place very quickly and is very popular for Web integration and End to End UI test automation.
-
-
-
-### Sass
-[Sass](https://sass-lang.com/documentation) stands for Syntactically Awesome Stylesheet. When Stylesheets are getting larger, more complex, and harder to maintain, where sass can help. Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
-
-### TypeDB
-[TypeDB](https://vaticle.com/typedb) is an open-source, distributed, strongly-typed database with a rich and logical type system.TypeDB empowers you to tackle complex problems, and TypeQL is its query language. TypeDB allows you to model your domain based on logical and object-oriented programming principles.
-
-### FastAPI
-[FastAPI](https://fastapi.tiangolo.com/) is a modern, fast (high-performance), web framework for building APIs with Python 3.6+ based on standard Python type hints. The key features are: Fast: Very high performance, on par with NodeJS and Go (thanks to Starlette and Pydantic). One of the fastest Python frameworks available.
-
-### Electron
-[Electron](https://www.electronjs.org/)  is the most popular framework for desktop app development. Will it be a good fit for your project? Learn more about its features, architecture, and look at a sample project.

src/guide/setup-vue.md

@@ -1,19 +1,12 @@
-# Getting started
+# How to get the app
 
-## TypeRefinary -InnovolveApp
+## Download Source code
 
-[![build_status](https://github.com/governance-foundation/template-electron-vuex-vuetify/workflows/Build/release/badge.svg)](https://github.com/governance-foundation/template-electron-vuex-vuetify/actions?workflow=Build/release)
-[![Coverage Status](https://coveralls.io/repos/github/governance-foundation/template-electron-vuex-vuetify/badge.svg?branch=master)](https://coveralls.io/github/governance-foundation/template-electron-vuex-vuetify?branch=master)
-[![github license](https://img.shields.io/github/license/governance-foundation/template-electron-vuex-vuetify)](https://github.com/governance-foundation/template-electron-vuex-vuetify)
-[![github issues](https://img.shields.io/github/issues/governance-foundation/template-electron-vuex-vuetify)](https://github.com/governance-foundation/template-electron-vuex-vuetify)
-[![github last commit](https://img.shields.io/github/last-commit/governance-foundation/template-electron-vuex-vuetify)](https://github.com/governance-foundation/template-electron-vuex-vuetify)
-[![github repo size](https://img.shields.io/github/repo-size/governance-foundation/template-electron-vuex-vuetify)](https://github.com/governance-foundation/template-electron-vuex-vuetify)
-[![Gitter](https://badges.gitter.im/governance-foundation/community.svg)](https://gitter.im/governance-foundation/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-[![Gitter](https://img.shields.io/badge/forum-Google-orange)](https://groups.google.com/forum/#!forum/governance-foundation)
+The typerefinery app's source code available below, you can download and run the app easily.
 
-## Overview
+[Source Code (zip)](https://github.com/innovolve-ai/typerefinery/archive/refs/tags/v2022.9.12.zip)
 
-This template should help get you started developing `Electron` app using `Vue 3`, `Vite`, `Vuex` and `primeVue`.
+[Source Code (tar.gz)](https://github.com/innovolve-ai/typerefinery/archive/refs/tags/v2022.9.12.tar.gz)
 
 ## Run Setup
 
@@ -29,6 +22,7 @@ npm install
 
 # develop
 npm run electron:dev
-```
-
 
+# build the app and run
+npm run electron:start
+```

src/hi/app_generation/README.md

@@ -0,0 +1,80 @@
+---
+sidebar: auto
+---
+
+## ऐप जनरेशन
+
+इस ऐप को स्क्रैच से जेनरेट करने के लिए निम्नलिखित चलाएं:
+
+### भाग 1 - स्वचालित
+
+- विश्व स्तर पर Vue स्थापित करें - `npm install -g @vue/cli`
+- व्यू ऐप बनाएं `vue create template-electron-vuex-vuetify`
+  - कृपया एक प्रीसेट चुनें:
+    - Manually select features
+  - Features (All Yes)
+  - Babel
+    - TypeScript
+    - Progressive Web App (PWA) Support
+    - Router
+    - Vuex
+    - CSS Pre-processors
+    - Linter / Formatter
+    - Unit Testing
+    - E2E Testing
+  - Use class-style component syntax?
+    - Yes
+  - Use Babel alongside TypeScript?
+    - Yes
+  - Use history mode for router?
+    - Yes
+  - Pick a CSS pre-processor:
+    - Sass/SCSS (with dart-sass)
+  - Pick a linter / formatter config:
+    - ESLint + Prettier
+- Pick additional lint features: \* Lint on save
+  - Pick a unit testing solution:
+    - Jest
+  - Pick an E2E testing solution:
+    Cypress
+  - Where do you prefer placing config:
+    - In dedicated config files
+- Add Vuetify UI framework `vue add vuetify`
+  - use `Default`
+
+### भाग 2 - मैनुअल चरण
+
+- Remove Jest, will be replaced by [Vitest](https://vitest.dev/)
+  - remove test folder
+  - remove dependencies
+
+```sh
+npm remove @types/jest jest ts-jest @vue/vue3-jest @vue/cli-plugin-unit-jest babel-jest @vue/cli-plugin-babel
+```
+
+- Vite config को कॉपी करने के लिए [Vite टेम्पलेट](https://vitejs.dev/guide/#trying-vite-online) बनाएं
+
+  - खाली त्वरित-दृश्य ऐप बनाएं `npm create vite@latest my-vue-app -- --template vue`
+  - फ़ोल्डरों में कॉपी करें `cypress` and `.vscode`
+  - सभी विन्यास योग्य फाइलों को कॉपी करें
+
+- इलेक्ट्रॉन, विटेस्ट और विटे जोड़ें
+  - add configs `package.json`, `vite.config.ts`, `electron.js` and `electron/preload.js` follow this [Vite + Vue 3 + electron + TypeScript](https://dev.to/brojenuel/vite-vue-3-electron-5h4o)
+  - add dependencies
+
+```sh
+npm install vitest vue-tsc jsdom start-server-and-test @types/jsdom @types/node @vue/tsconfig @rushstack/eslint-patch @vitejs/plugin-vue concurrently cross-env electron electron-builder wait-on @types/electron-devtools-installer vite --save-dev
+```
+
+## वीडियो और जीआईएफ बनाएं
+
+यहां हमने वीडियो बनाने के लिए [फ्री कैम] (https://www.freescreenrecording.com/) का उपयोग किया है और उसके बाद हमने ऑनलाइन कनवर्टर का उपयोग किया है
+[ezgif](https://ezgif.com/video-to-gif) वीडियो को GIF में बदलने के लिए।
+
+<img width="800px" src="/freecam_window.png" />
+
+यह फ्री कैम वीडियो रिकॉर्डर की मुख्य विंडो है, `New recording` पर क्लिक करने के बाद वीडियो रिकॉर्डिंग शुरू हो जाएगी।
+
+<img width="800px" src="/ezgif_window.png" />
+
+[ezgif](https://ezgif.com/video-to-gif) साइट से `Choose file` विकल्प में वीडियो का चयन करने की आवश्यकता है और GIF रूपांतरण के लिए `Upload video!`।

src/hi/feature/README.md

@@ -47,28 +47,3 @@ sidebar: auto
 
 यहां ऐप स्थायी रूप से बंद है।
 
-## टेक स्टैक
-
-### अंतर्राष्ट्रीयकरण/बहुभाषी
-उत्पादों और सेवाओं की योजना बनाने और उन्हें लागू करने की प्रक्रिया ताकि वे आसानी से विशिष्ट स्थानीय भाषाओं और संस्कृतियों के अनुकूल हो सकें, एक प्रक्रिया जिसे स्थानीयकरण कहा जाता है। [vue-i18n](https://www.npmjs.com/package/vue-i18n)पैकेज का उपयोग करके, यह सुविधा लागू की गई है
-
-### प्राइमव्यू
-[PrimeVue](https://www.primefaces.org/primevue/#/setup) Vue के लिए ओपन सोर्स नेटिव घटकों का एक समृद्ध सेट है।
-यह Vue3 और इसके ठीक काम करने के साथ संगत है।
-
-
-### साइप्रेस
-
-[Cypress](https://www.cypress.io/) उन लोकप्रिय उपकरणों में से एक है जिसने बहुत जल्दी अपना स्थान स्थापित कर लिया है और वेब एकीकरण और एंड टू एंड यूआई टेस्ट ऑटोमेशन के लिए बहुत लोकप्रिय है।
-
-### सैस
-[Sass](https://sass-lang.com/documentation) का अर्थ सिंटैक्टिकली विस्मयकारी स्टाइलशीट है। जब स्टाइलशीट बड़ी, अधिक जटिल और बनाए रखने में कठिन होती जा रही है, जहां sass मदद कर सकता है। Sass आपको उन सुविधाओं का उपयोग करने देता है जो CSS में मौजूद नहीं हैं, जैसे चर, नेस्टेड नियम, मिश्रण, आयात, विरासत, अंतर्निहित कार्य, और अन्य सामान।
-
-### टाइप डीबी
-[TypeDB](https://vaticle.com/typedb) एक समृद्ध और तार्किक प्रकार की प्रणाली के साथ एक खुला स्रोत, वितरित, दृढ़ता से टाइप किया गया डेटाबेस है। TypeDB आपको जटिल समस्याओं से निपटने के लिए सशक्त बनाता है, और TypeQL इसकी क्वेरी भाषा है। TypeDB आपको तार्किक और ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग सिद्धांतों के आधार पर अपने डोमेन को मॉडल करने की अनुमति देता है।
-
-### फास्टएपीआई
-[FastAPI](https://fastapi.tiangolo.com/) एक आधुनिक, तेज (उच्च-प्रदर्शन), मानक पायथन प्रकार के संकेतों के आधार पर पायथन 3.6+ के साथ एपीआई के निर्माण के लिए वेब ढांचा है। मुख्य विशेषताएं हैं: तेज: बहुत उच्च प्रदर्शन, NodeJS और Go के बराबर (Starlette और Pydantic के लिए धन्यवाद)। उपलब्ध सबसे तेज़ पायथन फ्रेमवर्क में से एक।
-
-### इलेक्ट्रॉन
-[Electron](https://www.electronjs.org/) डेस्कटॉप ऐप डेवलपमेंट के लिए सबसे लोकप्रिय फ्रेमवर्क है। क्या यह आपके प्रोजेक्ट के लिए उपयुक्त होगा? इसकी विशेषताओं, वास्तुकला के बारे में और जानें और एक नमूना परियोजना देखें।

src/hi/guide/setup-vue.md

@@ -1,19 +1,12 @@
-# शुरू करे
+# ऐप कैसे प्राप्त करें
 
-## टाइप रिफाइनरी -इनोवोल्वएप
+## स्रोत कोड डाउनलोड करें
 
-[![build_status](https://github.com/governance-foundation/template-electron-vuex-vuetify/workflows/Build/release/badge.svg)](https://github.com/governance-foundation/template-electron-vuex-vuetify/actions?workflow=Build/release)
-[![Coverage Status](https://coveralls.io/repos/github/governance-foundation/template-electron-vuex-vuetify/badge.svg?branch=master)](https://coveralls.io/github/governance-foundation/template-electron-vuex-vuetify?branch=master)
-[![github license](https://img.shields.io/github/license/governance-foundation/template-electron-vuex-vuetify)](https://github.com/governance-foundation/template-electron-vuex-vuetify)
-[![github issues](https://img.shields.io/github/issues/governance-foundation/template-electron-vuex-vuetify)](https://github.com/governance-foundation/template-electron-vuex-vuetify)
-[![github last commit](https://img.shields.io/github/last-commit/governance-foundation/template-electron-vuex-vuetify)](https://github.com/governance-foundation/template-electron-vuex-vuetify)
-[![github repo size](https://img.shields.io/github/repo-size/governance-foundation/template-electron-vuex-vuetify)](https://github.com/governance-foundation/template-electron-vuex-vuetify)
-[![Gitter](https://badges.gitter.im/governance-foundation/community.svg)](https://gitter.im/governance-foundation/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-[![Gitter](https://img.shields.io/badge/forum-Google-orange)](https://groups.google.com/forum/#!forum/governance-foundation)
+टाइपरिफाइनरी ऐप का सोर्स कोड नीचे उपलब्ध है, आप ऐप को आसानी से डाउनलोड और चला सकते हैं।
 
-## अवलोकन
+[Source Code (zip)](https://github.com/innovolve-ai/typerefinery/archive/refs/tags/v2022.9.12.zip)
 
-यह टेम्प्लेट आपको `Vue 3`, `Vite`, `Vuex` और `primeVue` का उपयोग करके `इलेक्ट्रॉन` ऐप विकसित करने में मदद करेगा।
+[Source Code (tar.gz)](https://github.com/innovolve-ai/typerefinery/archive/refs/tags/v2022.9.12.tar.gz)
 
 ## सेटअप चलाएं
 
@@ -29,4 +22,7 @@ npm install
 
 # develop
 npm run electron:dev
+
+# build the app and run
+npm run electron:start
 ```