---

Contribute easily to data stored with git but without having to use Github or Gitlab interfaces

---

Summary

• What is Datami for ?
• Websites
• Documentation
• Project setup
• Testing examples
• Stack

---

What is Datami for ? ⇡

This project aims to create a serie of widgets to interact with ressources stored on Gitlab, Github, or mediawiki :

• Edit data stored on github or gitlab (csv, md, or json files) ;
• Allow unidentified users to push on a separate branch and automatically create a pull request ;
• Create a set of components for modular uses :
  • preview for .csv, .md, .json files or mediawiki ressources, with several choices for preview (table, cards list, ...) ;
  • files edition interfaces ;
  • dataviz for .csv files (barcharts, pies, ...) ;
  • user preferences: language, user token, ...
  • etc...
• Web integration as modular web component

---

Websites ⇡

• Official website : datami.multi.coop

Prod deploy  

• Website (widgets demo) : datami-widget.multi.coop

Preprod deploy

• Preprod : Datami (preprod on Netlify)

---

Documentation ⇡

Check out our brand new documentation website for technical support :

• Documentation website : datami-docs.multi.coop

---

Project setup ⇡

The current project is working with npm 8.3.2 version

To install it, use the command :

npm install -g npm@8.3.2

Then you can install the dependancies and add a dummy .env file based on the example.

nvm use
npm install

# and copy the example .env file
cp example.env .env

Compiles and hot-reloads for development

To run locally Datami you just have to type :

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

---

Testing examples ⇡

Some http files are stored in the ./http-tests folder, showing examples of Datami working as a stand-alone widget embedded in a page in a shadow DOM.

Setup :

nvm use 

# Option one - Build the app
npm run build

# Option 2 - Run the app to serve the script
npm run serve

Note : Depending on the option you will chose, you will have to check where to point to the Datami script in the html file. Some files are commented to check the different approaches.

Then you can launch the http server :

nvm use

# Run the server
npm run http

The server will automatically open a page in your brower at http://localhost:8180/html-tests/

---

Stack ⇡

We only used open source packages and technologies, coz' that's what we do... :

• Vue.js (2.x) : yes we like this framework a lot...
• VueX: the data store shared for every web component ;
• vue-custom-element: wrapper for vue web components ;
• gray-matter: package to convert md or yaml content to object ;
• Showdown and showdown-table extension: package to convert md content to html (see docs for showdown extensions);
• Bulma and Buefy : as UI frameworks for vue ;
• Material Design fonts: for icons ;
• Fetch: for requests to Github's or Gitlab's API ;
• JSDiff : to get diff between an original content and its edited version
• Diff2html : to display diff like in github / gitlab
• MapLibre : the open and free fork from MapboxGl.js to make maps
• ApexCharts : an open library to make charts
• ...and a lot of Stackoverflow help...

---

Datami is an open source project by the tech cooperative multi