collective / volto-educal-theme

volto-educal-theme: Volto add-on

volto-educal-theme 🎨

Table of content!

• About 💡
• Features ✨
• Features requiring Customization 🔧
• Community add-ons used 👥 📦
• Installation 🚀
• Creating the Front Page 📹
• Contributing 👩‍💻
• License 📄
• Screenshot 📸

About 💡

• A volto theme add-on based on educal theme.
• This repository is the work product of Google Summer of Code 2022 🌞 project - Create new Volto theme developed for the Plone Foundation 🔵 under the mentorship 🧑🏻‍🏫 of @nileshgulia1, @tkimnguyen & @jackahl.

Features ✨

1. Blocks 🧱 included with this add-on:

   • Category Teaser Block
   • Banner Area Block
   • Course Block
   • Pricing Block

2. Blocks that are also available as a separate add-on 🎉 :

   • volto-educal-hero-block (Used as Hero block)
   • volto-block-banner (Used as Pre-footer block)

3. New listing variation 🔖 especially for events

4. Navigation menu ⬇️ handles two level nested pages

5. Animations 💫 on hover, click events

6. Image assets 🍱 included with the theme

Features requiring Customization 🔧

1. Categorization of pages based on tags using the categorization menu present in the left side of the header.

   NOTE: This feature requires the API call to Keywords vocabulary /++api++/@vocabularies/plone.app.vocabularies.Keywords?b_start=0 which is by default only available to authenticated users. Currently, this menu is only visible when the user is authenticated. You can make changes in Header.jsx as per the requirements.

   

2. Footer section links including social handles are available but requires additional customization. Change the code in Footer.jsx as per the requirements.

   

3. The Try for free button can be customized in the Header.jsx as per the requirements. For example: It can be used to route to /login route.

   

Community add-ons used 👥 📦

1. volto-slate
2. @kitconcept/volto-blocks-grid
3. @eeacms/volto-tabs-block
4. @eeacms/volto-block-divider

Installation 🚀

1. Create a new volto project, if you don't have one.

2. Add the following packages to the mrs.developer.json file of your volto project.

   {
     "volto-educal-hero-block": {
       "url": "[e-mail]:collective/volto-educal-hero-block.git",
       "https": "https://github.com/collective/volto-educal-hero-block.git",
       "package": "@plone-collective/volto-educal-hero-block",
       "branch": "main",
       "path": "src"
     },
     "volto-block-banner": {
       "url": "[e-mail]:collective/volto-block-banner.git",
       "https": "https://github.com/collective/volto-block-banner.git",
       "package": "@plone-collective/volto-block-banner",
       "branch": "main",
       "path": "src"
     },
     "volto-educal-theme": {
       "url": "[e-mail]:collective/volto-educal-theme.git",
       "https": "https://github.com/collective/volto-educal-theme.git",
       "package": "@plone-collective/volto-educal-theme",
       "branch": "main",
       "path": "src"
     }
   }

3. Now link the add-on in the volto project:

   1. Make sure the private field is set to true in the volto project's package.json. As yarn workspaces can only be enabled in private projects.

   2. Add src/addons/* as array members under the workspaces property in the volto project's package.json.

   3. Add @plone-collective/volto-educal-theme as an array member under the addons property in the volto project's package.json.

   Finally, the volto project's package.json should include the following lines:

   {
     "private": true,
     "workspaces": ["src/addons/*"],
     "addons": ["@plone-collective/volto-educal-theme"]
   }

   REMEMBER:

   • You just need to add this in your volto project's package.json file and not in any of the add-ons package.json file.
   • For a more detailed guide, on how to install an add-on in volto visit here.

4. Change this line in src/theme.js of the volto project.

   - import 'semantic-ui-less/semantic.less';
   + import '@plone-collective/volto-educal-theme/semantic.less';
     import '@plone/volto/../theme/themes/pastanaga/extras/extras.less';

   You can refer the change here.

5. Bootstrap the Plone API backend. Alternatively, you can visit the official documentation for other installation options.

6. Run yarn to install the node modules. 📦

7. Run yarn start command to start the volto server! 🍻

Creating the Front Page 📹

Click to watch video!

Contributing 👩‍💻

Contributions are welcome. This project is under Plone Collective. Visit collective's documentation to know more.

License 📄

Distributed under the MIT License. See LICENSE for more information.

Screenshot 📸

Click to view!

(back to top)