Skip to content

Home

Jump to bottom
Alexandros SIDIRAS edited this page Dec 2, 2022 · 2 revisions

How to contribute to Pictalk ?

  1. Pick an issue
  2. Create your branch or clone the repository
  3. Submit a pull request

How Pictalk works

How Vuejs/Nuxtjs works

nuxtjs_code_structure drawio

Interactions with the API

store_mecanism drawio

Folder structure

  • Assets: Here are the images (PNG, WEBP, JPG) and the global styling (SCSS). The image files are compressed by 'Nuxt responsive loader' processes them in multiple sizes in order to have size optimized images.
  • Components: Divided into 4 categories. 1) Administrator (Alex, Adri...) related components. 2) Auth related components such as Signin, Signup, Account, Groups, Feedback. 3) Navigation components like Navbar (Static site navbar, Pictalk navbar, Footer, Switch to another space (Shared, Public, Perso). 4) The most important components are the Pictogram related ones. Here is the PictoBar, Picto, PictoList etc.
  • Lang: Language files (translations files).
  • Layout: Vuejs Layout files. We specify here the layout of the static website pages, Pictalk and public mode layout.
  • Middleware: Some the HTTP requests are intercepted here. Here we define custom functions that can be run before rendering either a page. We use it to check if a user is authenticated.
  • Mixins: Not Vue components. It is code that will be copied where the mixin was imported. Here is the code that is used in lot of pages or components. There is the Text-To-Speech related code, Language, Emoji...
  • Pages: Structure for the whole website (check nuxt directory routing). Pages import components and/or mixins and are whole Vue components.
  • Plugins: JS Files that will be runned before the Vue Root component. Here we define the Workbox (web-worker related stuff), Base URL (find the API URL)
  • Static: Static files that can be accessed with ease at http:www.pictalk.org/STATIC_FILE_NAME. Here are the GIF, MP4 & fonts.
  • Store: Vuex Store directory. The store is central in Pictalk. The store holds and leaves access to variables to all components/pages/layouts. The store allows us to have persistant and consistent application wide variables. Pictalk can be Off-line & Fast thanks to it.
  • Utils: Some StackOverflow usefull JS functions.
Clone this wiki locally