https://github.com/gnowland/iza-sdg

Interactive SVG graphic for sustainability.zinc.org implemented through WordPress shortcode
https://github.com/gnowland/iza-sdg

css3 es6-javascript php webpack wordpress-plugin wordpress-shortcode yarn

Last synced: about 1 month ago
JSON representation

Interactive SVG graphic for sustainability.zinc.org implemented through WordPress shortcode

• Host: GitHub
• URL: https://github.com/gnowland/iza-sdg
• Owner: gnowland
• Created: 2018-09-27T06:27:11.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T19:49:08.000Z (about 2 years ago)
• Last Synced: 2024-10-14T03:26:27.830Z (2 months ago)
• Topics: css3, es6-javascript, php, webpack, wordpress-plugin, wordpress-shortcode, yarn
• Language: PHP
• Homepage: https://sustainability.zinc.org
• Size: 3.47 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# IZA-SDG

Interactive SVG graphic highlighting the International Zinc Association (IZA) and its members' committment to the United Nations 17 Sustainable Development Goals (SDGs) featured on the zinc.org sustainability microsite: [sustainability.zinc.org](https://sustainability.zinc.org).

## Use

Add shortcode `[iza_sdg]` to WordPress page content.


Divi: insert shortcode inside a "code" or "full-width code" module.

![Screen Shot](screenshot.png)

## Admin

Text editing and administrative interface is located under `Appearance > IZA SDG` in the WordPress Admin menu.

![Screen Shot - admin](screenshot-admin.png)

## Development

* Uses **yarn**, **webpack** and **browsersync**.

    * Dependancies are managed with `package.json` (yarn)

    * Builds are managed with `webpack.config.js` (webpack)

Source files are located in `/src` and are compiled to `/dist` by **yarn** scripts (see below). **WARNING:** *Do not directly edit files in `dist` as they will be overwritten on the next compile!*

The plugin automatically selects the CSS file for development/production.

### How does it work

1. [Install Yarn](https://yarnpkg.com/en/docs/install)

2. Initilize Project

    ```sh

    yarn

    ```

3. Available commands

    1. **Dev**

        starts browsersync, compiles your js and scss, creates sourcemaps and watches for file changes

        ```sh

        yarn dev

        ```

    2. **Dist**

        generates production files (minifies css and packs media queries), generates less detailed source maps

        ```sh

        yarn dist

        ```

## Design

* Use the Adobe Illustrator asset exporter to export the entire artboard.  Make sure that exporting "names as ID's" is set. Run through SVGOMG with generous settings.