Challenge Overview
Challenge Objectives
Zeta is a CMS (content management system) that the Hercules client has built and uses internally for a number of sites. There is very little documentation on Zeta, so we are going to run a few challenges with the goal of:
- Getting new members familiar with Zeta
- Building out some documentation that we can use for future challenges.
Zeta can be deployed locally via vagrant or Ansible. We have scripts for either.
This challenge will focus on the main flow of Zeta, which is to create a custom component, add the component to a template (doc-def), and then apply the doc-def to a "document", allowing the user to change content on the page easily.
Project Background
We have recently completed the Careers project for the Hercules client, which was our first project using Zeta. We learned a lot about Zeta, and now we have multiple new projects that use Zeta and want to get better documentation available. We also need to make sure we have a good base of members for future work.
Technology Stack
- NodeJS, MongoDB
- MySQL
Media
You will be required in this challenge to load content into the "Media" section of Zeta. On the dashboard is a "Media" link, where we can upload images and videos. We will be uploading images for this challenge. Make sure this part of the app works in your deployment.
Code access
There are a number of repositories involved in the Zeta deployment. A link will be provided in the forum that will give members access to the group of individual repos in Gitlab, as well as a large set of completed components which you can use for reference.
Individual requirements
Component
For this challenge, we will create a carousel component that can be used to spin through images in a list. Each slide in the carousel will be:
- An image
- A title
- A description
The component will expose fields for each image, title, and description. The component should support an arbitrary number of images in the list displayed. The title and description should be optional for a given cell, but the image is required.
The image will come from the `Media` content in Zeta! Do NOT just hard-code in image URLs. The user should be able to select uploaded media.
Just using the carousel component in Bootstrap is fine: https://getbootstrap.com/docs/4.0/components/carousel/
Note that all CSS definitions should match what's already done in our existing components (links provided in the forum)
Component installation
In general, components are deployed via Git to /vagrant/zeta/resources/<component group>. For instance, the jobs components we developed are deployed to /vagrant/zeta/resources/jobs. Once the component is deployed, you can restart the applications via forever restartall to load in the components. If everything worked properly, after the services have restarted, the component will be available in the component picker when editing a doc-def.
Doc-def
Once the component is built and installed in Zeta, you should create a new "doc-def" in the "Doc Definitions" tab on the left in Zeta. You should:
- Add the carousel component to the doc-def
- Add a "Data List" field that contains the individual fiels for the images, titles, and descriptions for the carousel
- Tie the fields to the carousel
- Publish the Doc-Def by clicking the Versions tab and checking the box next to the latest revision
Document
Once the doc-def has been created, you should create a new document for the landing page (/). Assign the doc-def to the document and add images and text to the fields of the document.
You can publish the document through the environment ("Publish all documents"), or through the "Versions" tab by checking the box next to the latest revision.
In general, everything that can be edited on a page should be a field in the doc-def, editable through the document. This applies to all text and images.
Final tests
To ensure everything is working:
- We should be able to open up the web app at "http://localhost:8000" and view the carousel on the landing page, clicking left and right to page through the individual images and text
- The CMS user should be able to edit the text or images on the Document, publish via the "Versions" tab, and see the results by refreshing the landing page
Deployment guide and validation document
NOTE: Documentation is a major requirement for this challenge! We'll be aggregating all our documentation to a single spot so that future challenges will have a good documentation base to work from. Note that you should target the documentation to the requirements above. For instance, you won't be expected to document *every* different type of field in a doc-def, but you should document the text and media fields used in the challenge.
Your README.md should include:
- How to set up the environment
- How to generate the CSS from the less files for the component
- How to create a doc-def
- How to add a component to a doc-def
- How to configure fields
- How to upload media
- How to create a document and assign it a doc-def
- How to edit a document with content
- How to publish doc-defs and documents in the versions tab
Please ensure you include clear screenshots to document the items above!
Your Validation.md should include:
- How to deploy the component
- How to set up the document and doc-def
- Images to upload
- How to view the document on the website
- How to edit the document and then view the updates
A video is required for validation
What To Submit
- Code for the carousel component
- README.md
- Validation.md, including video link