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

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

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

• Official website : datami.multi.coop

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

• Preprod : Datami (preprod on Netlify)

Check out our brand new documentation website for technical support :

• Documentation website : datami-docs.multi.coop

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

To run locally Datami you just have to type :

npm run serve

npm run build

npm run test:unit

npm run lint

See Configuration Reference.

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/

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