docherty / m3-the-memes Goto Github PK

This repo contains a website displaying The Memes collection.

datamanipulator.py        # Script to generate the data files
/raw                      # Directory for raw json files (downloaded from an API etc.)
│
/site/                    # Website root...this is what needs to be published
│
├── index.html            # Main HTML file
├── css/
│   └── styles.css
│
├── fonts/                
│   └── ...
│
├── images/               # Directory for images (empty)
│   ├── /ui               # Images for UI elements
│        └── ...
│
├── js/
│   └── script.js

The listing is generated from json files stored in /data. The json data files are custom generated to reduce file size. To generate the optimised json files, place a set of raw project json files in /raw and run the datamanipulator.py script. Once this script has been run successfully, the /site/data directory will contain the optimised json files and the /raw directory can be deleted.

Two different types of images are used on the website; thumbnails and full-res images. The full-res images are only shown for projects where the description is really long (> 140 chars). In that case, a "more" button appears which on clicking presents a modal. In the modal the full-res image is shown.

The thumbnail images are lazy loaded (only requested when scrolled into view).

Both sets of images are hosted on external CDNs, the urls of which are sourced from the json files.

UI images are stored in /site/images/ui note that small svg files are inlined in the /js/script.js file to reduce network requests.

HiroP