I’ve been working on a brand and design system for a coalition I’m working with and I’d like to set up Grav For their website. As part of their Grav site I’d like to build a sub domain with the brand and design system. I really like how Atlassian has set up their design system and would like to replicate the style & functionality.
Here’s their site: https://www.atlassian.design/
If you were rebuilding the Atlassian site on Grav how would you approach it? Maybe a modular page with subpages? Or a collections page that links to blog posts? Or maybe the landing page would be a regular page, and all the subpages would be set up like learn.getgrav.org?
@miller.nw, You can’t use the a ‘modular’ page the way Grav defines it. But a ‘modular’ page is nothing but an internal Grav page plus some characteristics/behaviours, like the meaning of the underscore prefix of the folder and the use of collections.
The limitation of the ‘modular’ page is that its children/modules are not routable, because they are part of the parent modular.
So basically we create our own page templates that make use of collections.
Suggested approach:
My first hunch is to try the following coarse approach with Quark in mind. It may not be the best and is not intended to be complete, but might give you some idea.
Folder structure:
Since the leaf pages (mission, personality, etc) are stand-alone routable pages, I would suggest a hierarchical folder structure as follows:
user/pages
├── 01.home
│ └── level0.md <-- level0: uses collection of pages.children
├── 02.brand
│ ├── 01.mission
│ │ └── level2.md <-- level2: almost the same as default.md
│ ├── 02.personality
│ │ └── level2.md
│ ├── 03.promise
│ │ └── level2.md
│ ├── 04.values
│ │ └── level2.md
│ └── level1.md <-- level1: uses collection of children
├── 03.foundations
│ ├── 01.accessibility
│ │ └── level2.md
│ ├── 02.etc....
│ └── level1.md
Templates:
- macros/macro.html.twig
- Prints the main menu
- Comment out printing of submenu.
- partials/sub-menu.html.twig
- Contains a vertical menu containing title of level1 page + titels level1.children collection.
- Included in level1 and level2 templates.
- level2.html.twig
- Page is almost like a default.md page.
- Includes the submenu on its left side (based on children of parent)
- level1.html.twig
- Includes submenu on left site (based on children of current page)
- Prints content of level1 page
- Below content of level1, prints summary of level2 items from collection of page.children.
- level0.html.twig
- Same idea as level1.html.twig, but a tad different…
2 Likes
Wow! An incredibly well thought out and highly descriptive solution. Thank you so much! I’ll do some testing on this technique and see what happens.
Thanks again!