Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/collective/volto-educal-theme

volto-educal-theme: Volto add-on
https://github.com/collective/volto-educal-theme

Last synced: 2 months ago
JSON representation

volto-educal-theme: Volto add-on

Host: GitHub
URL: https://github.com/collective/volto-educal-theme
Owner: collective
License: mit
Created: 2022-06-14T07:42:46.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-09-12T10:12:27.000Z (over 2 years ago)
Last Synced: 2024-11-05T00:35:34.526Z (2 months ago)
Language: Less
Size: 38.7 MB
Stars: 13
Watchers: 3
Forks: 4
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-volto - volto-educal-theme - Volto theme for Educational websites (Addons / Themes)

README

        

 volto-educal-theme 🎨 


   Table of content! 

- [About 💡](#about-)

- [Features ✨](#features-)

- [Features requiring Customization 🔧](#features-requiring-customization-)

- [Community add-ons used 👥 📦](#community-add-ons-used--)

- [Installation 🚀](#installation-)

- [Creating the Front Page 📹](#creating-the-front-page-)

- [Contributing 👩‍💻](#contributing-)

- [License 📄](#license-)

- [Screenshot 📸](#screenshot-)

## About 💡

- A [volto](https://plone.org/what-is-plone/volto) theme [add-on](https://6.dev-docs.plone.org/volto/addons/index.html) based on [educal theme](https://themeforest.net/item/educal-online-learning-and-education-vue-js-template/37099827).

- This repository is the work product of [Google Summer of Code](https://summerofcode.withgoogle.com/) 2022 🌞 project - [Create new Volto theme](https://summerofcode.withgoogle.com/programs/2022/projects/M2LAPzxL) developed for the [Plone Foundation](https://summerofcode.withgoogle.com/programs/2022/organizations/plone-foundation) 🔵 under the mentorship 🧑🏻‍🏫 of [@nileshgulia1](https://github.com/nileshgulia1), [@tkimnguyen](https://github.com/tkimnguyen) & [@jackahl](https://github.com/jackahl).

![](/assets/github/preview.gif)

## Features ✨

1. Blocks 🧱 included with this add-on:

   - [Category Teaser Block](src/components/Blocks/CategoryTeaser/README.md)

   - [Banner Area Block](src/components/Blocks/BannerAreaBlock/README.md)

   - [Course Block](src/components/Blocks/CourseBlock/README.md)

   - [Pricing Block](src/components/Blocks/PricingBlock/README.md)

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

   - [volto-educal-hero-block](https://github.com/collective/volto-educal-hero-block) (Used as **Hero** block)

   - [volto-block-banner](https://github.com/collective/volto-block-banner) (Used as **Pre-footer** block)

1. New [listing variation](src/components/Blocks/Listing/README.md) 🔖 especially for events

1. Navigation menu ⬇️ handles two level nested pages

1. Animations 💫 on hover, click events

1. [Image assets](/theme/themes/educal/assets/images/) 🍱 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](https://plonerestapi.readthedocs.io/en/latest/vocabularies.html) `/++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](src/customizations/components/theme/Header/Header.jsx) as per the requirements.

   ![](/assets/github/category_menu_preview.gif)

1. Footer section links including social handles are available but requires additional customization. Change the code in [Footer.jsx](src/customizations/components/theme/Footer/Footer.jsx) as per the requirements.

   ![](/assets/github/footer_preview.png)

1. The `Try for free` button can be customized in the [Header.jsx](src/customizations/components/theme/Header/Header.jsx) as per the requirements. For example: It can be used to route to `/login` route.

   ![](/assets/github/header_preview.png)

## Community add-ons used 👥 📦

1. [volto-slate](https://github.com/eea/volto-slate)

1. [@kitconcept/volto-blocks-grid](https://github.com/kitconcept/volto-blocks-grid)

1. [@eeacms/volto-tabs-block](https://github.com/eea/volto-tabs-block)

1. [@eeacms/volto-block-divider](https://github.com/eea/volto-block-divider)

## Installation 🚀

1. [Create a new volto project](https://github.com/plone/volto#create-a-volto-project-using-the-generator), if you don't have one.

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

   ```json

   {

     "volto-educal-hero-block": {

       "url": "[email protected]: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": "[email protected]: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": "[email protected]:collective/volto-educal-theme.git",

       "https": "https://github.com/collective/volto-educal-theme.git",

       "package": "@plone-collective/volto-educal-theme",

       "branch": "main",

       "path": "src"

     }

   }

   ```

1. 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](https://classic.yarnpkg.com/lang/en/docs/workspaces/#toc-how-to-use-it).

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

   1. 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:

   ```json

   {

     "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](https://6.dev-docs.plone.org/volto/addons/index.html#loading-addon-configuration).

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

   ```diff

   - 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](https://github.com/avimishra18/volto_educal/blob/main/src/theme.js).

1. [Bootstrap](https://github.com/plone/volto#bootstrap-the-plone-api-backend) the Plone API backend. Alternatively, you can visit the [official documentation](https://docs.plone.org/manage/installing/index.html) for other installation options.

1. Run `yarn` to install the node modules. 📦

1. Run `yarn start` command to start the volto server! 🍻

## Creating the Front Page 📹

   Click to watch video! 

[![IMAGE ALT TEXT](/assets/github/video_thumbnail.png)](https://www.youtube.com/watch?v=jxbq_OHJUIo 'Creating the Front Page | volto-educal-theme')

## Contributing 👩‍💻

Contributions are welcome. This project is under Plone [Collective](https://github.com/collective). Visit [collective's documentation](https://collective.github.io/) to know more.

## License 📄

Distributed under the `MIT` License. See [LICENSE](/LICENSE) for more information.

## Screenshot 📸

   Click to view! 

![image](/assets/github/preview.png)

(back to top)