Repository files navigation

This application provides a search and configuration dialog for pictograms fromARASAAC. You can use it as single page application or asWordpress plugin.

All pictographic symbols displayed and used are the property of the Governmentof Aragón and have been created by Sergio Palao forARASAAC, that distributesthem underCreative Commons License BY-NC-SA.

This application provides the following features:

• Search and browse pictograms from ARASAAC
• Download or copy them to your clipboard with one click
• Configure your pictogram
  • Choose skin and hair color
  • Set background color
  • Add border in several sizes
  • Add different modifiers
  • Add text to top and bottom
  • And much more...
• Save different edits of your favorite pictograms in a collection
  • Download your collection as ZIP archive
  • Create a PDF from your collection

To use this app as single page application, just runyarn install && yarn build:app and serve the content ofbuild/ with your favorite web server. Ofcourse you can also usedocker-compose up --build to do it all in once. Theresulting web server is listing on port 8070 (http://localhost:8070/).

The easiest way to use this application as plugin is to download thelatest release andextract it toYOUR_WP_INSTALL/wp-content/plugins/. If you like to use thelatest development version you have to download or clone this repo and compileall dependencies. On Linux you can use the following commands:

cd YOUR_WP_INSTALL/wp-content/plugins/wget https://github.com/kitsteam/wp-pictogram-viewer/archive/refs/heads/main.zip && unzip main.zip -d arasaac-pictogram-viewerORgit clone https://github.com/kitsteam/wp-pictogram-viewer.git arasaac-pictogram-viewercd arasaac-pictogram-vieweryarn install && yarn build

After you installed the plugin you have to go to your Wordpress admin dashboardand enable it. If done so, you can integrate the search and configuration dialogto every page with the shortcode[arasaac-pictogram-viewer].

Currently this application is available in german and english. To add anotherlanguage, the following steps have to been taken:

• add the language short code to thelocales short code ini18next-parser.config.js
• runyarn i18next
• translate everything insrc/locales/SHORT_CODE/translation.json
• include the new data file insrc/locales/index.ts like the existing

If a new translatable key is added to the code,yarn i18next will add it to alllanguage files.

To protect the privacy of users, you can configure a proxy for all endpoints.

1. Configure a proxy forhttps://api.arasaac.org/api andhttps://static.arasaac.org/images. E.g. use can use [mod_proxy] (ProxyPass "/api" "https://api.arasaac.org/api").
2. Set the environment variablesREACT_APP_API andREACT_APP_API_IMAGES tothe new absolute proxy url. The easiest way to do so, is to copy the file.env to.env.local and modify it accordantly.
3. Rebuild the project.

To release a new version a few things should be done:

• Bump the version inpackage.json
• Add a version header field inarasaac-pictogram-viewer.php, like* Version: 0.1.0
• Runyarn build && yarn run pack andyarn build:app && yarn run pack:app
• Create a signed commitgit commit -S -am "release 0.1.0 :tada:"
• Push all commitsgit push
• Create anew Github release and attach the previous packed archive

The PictoSearchlogo in thisrepo – created bySudarto Wasmad– is licenced underCC BY 3.0 Unported.