Advanced Page Composition And Collections: Part 1) Tutorial Introduction And Starter Project Setup
Prerequisites
Before proceeding with this tutorial, please familiarize yourself with Trio's Core Concepts, Tag-Based Callbacks, Metadata, and Collections.
Intention Of This Tutorial
As was stated at the conclusion of the previous tutorial, Advanced Page Composition With JSON Data, this next multipart tutorial forgoes the trivial and presents a real world use case - a catalog site, one very much like what you might expect from a web store, but in this case its catalog doesn't contain things for sale, but rather it contains images of all the flags of the world along with their relevant information which you are free to explore.
Aptly named "Flags Of The World", the site has a total of 250 pages consisting of:
- 1 landing page that is created using Trio's advanced page composition (along with the data from the root/source/data/world.json file) that lists all the flags of the world along with their geographic location.
- 249 detail pages that are generated using Trio's collections feature (along with the data from the same root/source/data/world.json file used to create the landing page) that lists all the relevant information for each flag of the world.
Video Demo Of Project
The video below discusses Trio's collection feature and demonstrates the "Flags Of The World" website that this multipart tutorial will teach you how to build.
Installing The Starter Project
As a convenience to you, a starter project has been created that already includes all the necessary project assets, including:
- All 249 root/source/media/flags/128x128/*.png files.
- The root/source/data/world.json file, which is an array of items sorted in ascending order by "name" where each item contains the following keys and value:
- "id" - a number, the unique id of the item
- "name" - a string, the geographical location that this items flags pertains to, also used to sort the file in ascending "name" order
- "alpha2" - a string, the 2 character code for the flag and its geographical location
- "alpha3" - a string, the 3 character code for the flag and its geographical location
- "img" - a string, the path to the flag's .png image residing in the site's media/flags/128x128/ folder
- All the root/source/sass/*.scss files.
To install the starter project, please open your terminal application, navigate to a folder in which you want to install the starter project and at the command line please enter the following:
git clone https://github.com/4awpawz/fotw-starter-project.git
As you will not be permitted to push changes to the upstream repo, you can now delete the starter project's .git/ folder. From the root folder of the starter project, please run the following command.
rm -rf .git
You can, if you desire, then run
git init
from the root folder of the starter project to initialize a new git repository specifically for your starter project.
Conclusion
With the starter project now installed, you can now proceed to the next part of this tutorial.