🎨
volto-educal-theme Table of content!
💡
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 -
Blocks
🧱 included with this add-on: -
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)
-
New listing variation
🔖 especially for events -
Navigation menu
⬇️ handles two level nested pages -
Animations
💫 on hover, click events -
Image assets
🍱 included with the theme
🔧
Features requiring Customization -
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. -
Footer section links including social handles are available but requires additional customization. Change the code in Footer.jsx as per the requirements.
-
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
🚀
Installation -
Create a new volto project, if you don't have one.
-
Add the following packages to the
mrs.developer.json
file of your volto project.{ "volto-educal-hero-block": { "url": "git@github.com: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": "git@github.com: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": "git@github.com:collective/volto-educal-theme.git", "https": "https://github.com/collective/volto-educal-theme.git", "package": "@plone-collective/volto-educal-theme", "branch": "main", "path": "src" } }
-
Now link the add-on in the volto project:
-
Make sure the
private
field is set totrue
in the volto project'spackage.json
. As yarn workspaces can only be enabled in private projects. -
Add
src/addons/*
as array members under theworkspaces
property in the volto project'spackage.json
. -
Add
@plone-collective/volto-educal-theme
as an array member under theaddons
property in the volto project'spackage.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-onspackage.json
file. - For a more detailed guide, on how to install an add-on in volto visit here.
-
-
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.
-
Bootstrap the Plone API backend. Alternatively, you can visit the official documentation for other installation options.
-
Run
yarn
to install the node modules.📦 -
Run
yarn start
command to start the volto server!🍻
📹
Creating the Front Page
👩💻
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.