diff --git a/README.md b/README.md index a9ba8fb..a4f0764 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,10 @@ # Docs Template -[](https://app.netlify.com/sites/docs-template-main/deploys) +[](https://app.netlify.com/sites/c4gt-docs/deploys) --- - [Contributing Guide](./CONTRIBUTING.md) :flashlight: +### Steps to run +- `npm install` +- `yarn start` + diff --git a/docs/.assets/C4GT-Architecture.png b/docs/.assets/C4GT-Architecture.png new file mode 100644 index 0000000..7d5777f Binary files /dev/null and b/docs/.assets/C4GT-Architecture.png differ diff --git a/docs/.assets/C4GT-Community.jpg b/docs/.assets/C4GT-Community.jpg new file mode 100644 index 0000000..4cc2d79 Binary files /dev/null and b/docs/.assets/C4GT-Community.jpg differ diff --git a/docs/.assets/C4GT-Onboarding.jpg b/docs/.assets/C4GT-Onboarding.jpg new file mode 100644 index 0000000..840f8ab Binary files /dev/null and b/docs/.assets/C4GT-Onboarding.jpg differ diff --git a/docs/.assets/zoomable.jpg b/docs/.assets/zoomable.jpg deleted file mode 100644 index 8bd4ef0..0000000 Binary files a/docs/.assets/zoomable.jpg and /dev/null differ diff --git a/docs/index.md b/docs/index.md index 773a778..3c53da5 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,70 +1,57 @@ --- -title: Samagra Documentation -sidebar_label: Overview +title: C4GT +sidebar_label: Introduction slug: / -hide_table_of_contents: true -demoUrl: https://docs-template-main.vercel.app/ -demoSourceUrl: https://github.com/Samagra-Development/docs-template +id: index --- -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; -
-Step-by-step guides to setting up your system and installing the framework.
-- The{' '} - - Android SDK - {' '} - is a software development kit built for developers building for Google's Android Platform. It includes tools for - building, testing, and debugging Android applications. -
-- - Android Studio - {' '} - is the official Integrated Development Environment (IDE) for Native Android app development. -
-
-
- Autoprefixer
- {' '}
- is a tool that adds vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules
- you write will be applied across all supporting browsers. For example, instead of having to know every flexbox
- syntax used by various browsers, autoprefixer allows you to just write display: flex; and it'll
- automatically plug in the correct CSS.
-
- Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and - compiling/transpiling them down to one single file. -
-- - Capacitor - {' '} - is an open source cross-platform app runtime that allows web-based apps to run natively on iOS, Android, Electron, - and the web. It's helpful to refer to these apps "Native Progressive Web Apps" and they represent the next evolution - beyond the traditional Hybrid app mentality. Capacitor was created and is actively developed/supported by Ionic, the - company. -
-- A CLI, or Command-Line Interface, is a text-based interface for - interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often - use Command Prompt. The Ionic community often uses this term to refer to{' '} - Ionic's CLI. Ionic's CLI can be used for a number of things, - such as creating production builds of an app, running the development server, and accessing{' '} - - Ionic commercial services - - . -
-- - CommonJS - {' '} - is a group that defines standard formats for JavaScript APIs. They have defined standards for JavaScript modules and - packages. -
-- - Apache Cordova - {' '} - is an open source mobile application development framework that transforms standard HTML/CSS/JS into full-fledged - native apps. It provides a JavaScript API for accessing native device functionality, such as the camera or - accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone. -
-- - CORS - {' '} - (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. See the{' '} - CORS FAQs for more information. -
-- You may be familiar with variables from Sass.{' '} - - CSS Variables - {' '} - enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers. -
-- Decorators are expressions that return a function. They allow you to take an existing function, and extend its - behavior. With TypeScript, you can also decorate classes and parameters. When you decorate a{' '} - class, you are wrapping and extending the behavior of its constructor. In other words, the - decorator will add some functionality when the constructor is called, and will then return the original constructor. - When you decorate a parameter, you are wrapping the argument that gets passed in for that - parameter. The decorator will add functionality when an argument is passed to the method, and then return the - original argument. -
-- ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which - developers are most familiar with today. -
-- A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators, - and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6 - features in older browsers, tools such as Babel and TypeScript have - to transpile ES6 code down to ES5. -
-
- This version of JavaScript added a number of new features to the language, including Array.includes and
- the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome,
- Safari, Firefox and Edge)
-
- This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new - official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics. -
-- Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on - Android. Check out our resource section on Genymotion for - more info. -
-- - Git - {' '} - is a distributed version control system for managing code. It allows development teams to contribute code to the - same project without causing code conflicts. -
-- - Gulp - {' '} - is a tool for running tasks which can be used to build your app. Common build tasks include transpiling{' '} - ES6 to ES5, turning Sass into CSS, minifying code, - and concatenating files. -
-- - ES Modules - {' '} - brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the - global scope and have to be explicitly imported into your project to be used. This makes it much easier to - understand where your code is coming from and increases modularity and compartmentalization of functionality. -
-- - Ionicons - {' '} - is an open-source icon set used and created by Ionic. It includes 1:1 iOS and Material Design icons, as well as - commonly used social/application icons. Ionicons is included by default in Ionic distributions, but they can also be - used in any project. -
-- - Karma - {' '} - is a test runner that will run an app's test inside a real browser. It executes test cases, written in any testing - framework, in a real browser. Karma was originally written for use with Angular 1. -
-- Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the - Global scope. -
-- A monorepo is a single git repository with multiple projects. Advantages include simpler - organization, shared tooling and dependencies, and better collaboration with teammates. -
-- Live Reload (or live-reload) is a tool that automatically reloads the browser or{' '} - Web View when it detects changes in your app. In some cases, it can replace - parts of your app without having to reload the entire window. See the{' '} - Live Reload docs for more information. -
-- - Node - {' '} - is a runtime environment that allows JavaScript to be written on the server-side. In addition to being used for web - services, node is often used to build developer tools, such as the Ionic CLI. -
-- - npm - {' '} - is the package manager for node. It allows developers to install, share, and package node - modules. Ionic can be installed with npm, along with a number of its dependencies. -
-- An observable is an object that emits events (or notifications). An observer is an object that listens for these - events, and does something when an event is received. Together, they create a pattern that can be used for - programming asynchronously. -
-- Referred to by Apple as Bundle ID and by Android as Application ID, the{' '} - Package ID is used for identifying apps published to the App Store/Play Store. It is a string - formatted in{' '} - - reverse-DNS notation - - . -
-- A{' '} - - polyfill - {' '} - is a bit of code that adds functionality to the browser and normalizes browser differences. This is similar to a{' '} - shim, but where a shim has it's own API, a polyfill let's the expect API of the browser be used. -
-- - Protractor - {' '} - is a testing framework written for and by the Angular team. Protractor can be used with test runners, like Karma, - for end-to-end testing. Test runners allow you to quickly and programmatically verify code quality. -
-- Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features - such as{' '} - - variables - - , - mixins - , and - loops - . -
-- A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a - data attribute at run time. Overriding scoped selectors in CSS requires a{' '} - - higher specificity - {' '} - selector. Scoped components can also be styled using{' '} - - CSS Custom Properties - - . -
-- - Shadow DOM - {' '} - is a native browser solution for DOM and style encapsulation of a component. It shields the component from its - surrounding environment. To externally style internal elements of a Shadow DOM component you must use{' '} - - CSS Custom Properties - {' '} - or{' '} - - CSS Shadow Parts - - . -
-- A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the - browser specific implementation from the end user. -
-- Transpilation is the process of converting code from one language to another language prior to execution. Typically, - a transpiler will convert a high-level language to another high-level language. The most common type of{' '} - transpilation in Ionic Framework is converting ES2015/ES6 ( - TypeScript) to ES5 (traditional JavaScript). -
-- - TypeScript - {' '} - is a superset of JavaScript, which means it gives you JavaScript, along with a number of extra features such as{' '} - - type declarations - {' '} - and{' '} - - interfaces - - . Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional. -
-- Unit Tests and unit testing are a way to test small pieces of code to see if they behave as expected. Unit testing - frameworks include Jasmine, Mocha, QUnit, and many others. -
-- - Webpack - {' '} - bundles together JavaScript modules and other assets. It can be used to create single or multiple "chunks" that are - only loaded when needed. Webpack can be used to take many files and dependencies and bundle them into one file, or - other types. -
-- The{' '} - - World Wide Web Consortium - {' '} - (W3C) is the standards organization for the Web. Together, industry leaders and the public work together to develop{' '} - - web standards - - , which are a set of protocols, specifications, and technologies that define the Web Platform. -
-- - Xcode - {' '} - is an Apple IDE (integrated development environment) for software development on Apple operating systems (macOS, - iOS, watchOS and tvOS), with extensions available for other languages and platforms. -
-