Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Development to main, week 6 #127

Merged
merged 19 commits into from
Feb 12, 2024
Merged

Development to main, week 6 #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
fc5cd6a
Merge branch 'main' into feature/OP-185/documentation
remko48 Jan 5, 2024
b754e68
Updated readme
remko48 Jan 8, 2024
cba7818
Merge remote-tracking branch 'origin/development' into feature/OP-185…
remko48 Feb 5, 2024
63a50d6
Updated readme and partually updated Dynamic_menu and Footer files
remko48 Feb 6, 2024
2bde28d
Merge remote-tracking branch 'origin/main' into feature/OP-185/docume…
remko48 Feb 7, 2024
3f84b16
updated jumbotron png
remko48 Jan 3, 2024
98db18c
Added improvements for development
remko48 Feb 8, 2024
3d1b473
Merge pull request #125 from ConductionNL/feature/OP-186/Improvements
remko48 Feb 12, 2024
0941713
Updated readme
remko48 Feb 12, 2024
731d9c1
Added themes
remko48 Feb 12, 2024
11c172a
Merge branch 'development' into feature/OP-185/documentation
remko48 Feb 12, 2024
63ff986
updated Dynamic_footer.md
remko48 Feb 12, 2024
480d011
Merge branch 'feature/OP-185/documentation' of https://github.com/Con…
remko48 Feb 12, 2024
cd2b12d
Updated Dynamic_footer.md
remko48 Feb 12, 2024
e1d90fe
updated
remko48 Feb 12, 2024
e5d678f
Added warning
remko48 Feb 12, 2024
4f877f5
Home fix
remko48 Feb 12, 2024
02be6ac
Merge pull request #126 from ConductionNL/feature/OP-185/documentation
remko48 Feb 12, 2024
602e384
Merge branch 'main' into development
remko48 Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions .github/workflows/product-page-deploy.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,38 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Create the Product Page
uses: OpenCatalogi/productpage-action@1.0.9
uses: OpenCatalogi/productpage-action@latest
with:
# Connect Repository
github_repository_name_as_prefix: true
github_repository_name: ${{ github.event.repository.name }}
github_repository_url: https://github.com/ConductionNL/product-website-template
github_api_base_url: https://api.github.com/repos/ConductionNL/product-website-template/contents
github_docs_directory_paths: '[{"name": "Features", "location": "/docs/features"}, {"name": "Roadmap", "location": "/docs/roadmap"}, {"name": "Usecases", "location": "/docs/usecases"}]'
pull_from_branche: "development"

# Links
slack_url: "false"
read_the_docs_url: "false"

# Navbar
navbar_content: "https://raw.githubusercontent.com/ConductionNL/product-website-template/main/pwa/src/templates/templateParts/header/HeaderContent.json"
footer_show_logo: true

# Footer
footer_show_logo: "true"
footer_logo_href: https://conduction.nl
footer_content: "https://raw.githubusercontent.com/ConductionNL/product-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json"
footer_content_header: "heading-3"

# Jumbotron
jumbotron_title: "Product Website Template"
jumbotron_subtitle: "Product page"
jumbotron_description: "Conduction's Product Website Template: a quick, customizable solution for creating dedicated product pages from repository contents, ideal for open-source projects."
jumbotron_image: "https://www.conduction.nl/wp-content/uploads/2021/07/cropped-Conduction_HOME_0000_afb1-1.png"

# Nl-Desgin Theme
nl_design_theme_classname: "conduction-theme"

# Other
favicon_image: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgd2lkdGg9IjcxLjAwMDAwMHB0IiBoZWlnaHQ9IjcwLjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgNzEuMDAwMDAwIDcwLjAwMDAwMCIKICAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KCiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCw3MC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCiAgICAgICBmaWxsPSIjNDM3NkZDIiBzdHJva2U9Im5vbmUiPgogICAgICAgIDxwYXRoIGQ9Ik0yMTggNTkyIGwtMTM3IC03NyAwIC0xNjUgMCAtMTY1IDEzMSAtNzQgYzcyIC00MSAxMzcgLTc0IDE0MyAtNzQgNgowIDcwIDMzIDE0MyA3NCBsMTMxIDc0IDEgMTY1IDAgMTY1IC02OCAzNyBjLTM3IDIxIC05OSA1NiAtMTM3IDc3IGwtNzEgNDAKLTEzNiAtNzd6IG0yOTUgLTg1IGw1NyAtMzIgMCAtMTI1IDAgLTEyNSAtMTA2IC02MCBjLTU4IC0zMyAtMTA4IC02MCAtMTExCi01OSAtMyAwIC01MiAyNyAtMTA5IDYwIGwtMTAzIDU5IDAgMTI1IDAgMTI1IDEwNyA2MSAxMDcgNjIgNTAgLTI5IGMyNyAtMTYKNzYgLTQ0IDEwOCAtNjJ6Ii8+CiAgICAgICAgPHBhdGggZD0iTTI3OCA0NzIgbC02OCAtMzcgMCAtODUgMCAtODUgNzMgLTM5IDczIC0zOSA2MiAzNCBjMzQgMTggNjIgMzcgNjIKNDEgMCA0IC0xNCAxNSAtMzEgMjMgLTI4IDE1IC0zMyAxNSAtNTQgMSAtMzEgLTIwIC00NiAtMjAgLTg0IDIgLTI3IDE1IC0zMQoyMiAtMzEgNjIgMCA0MCA0IDQ3IDMxIDYzIDM4IDIxIDUzIDIxIDg0IDEgMjEgLTE0IDI2IC0xNCA1NCAxIDE3IDggMzEgMTkgMzEKMjMgMCA4IC0xMTMgNzIgLTEyNiA3MiAtNSAwIC0zOSAtMTcgLTc2IC0zOHoiLz4KICAgIDwvZz4KPC9zdmc+Cg=="
page_title: "Product Website Template"
nl_design_theme_classname: "conduction-theme"
pull_from_branche: "development"
144 changes: 81 additions & 63 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

94 changes: 94 additions & 0 deletions docs/features/Dynamic_footer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
# The Dynamic Footer: A Flexible Tool for Organizing Your Content

<!-- The dynamic footer in the Product Website Template is a powerful feature that allows you to add folders to the main footer of your product page. This provides a flexible and intuitive way to organize and navigate your content. -->

<!-- When you add a folder to the main menu, the template automatically creates a submenu item for each markdown file in that folder. This means that each markdown file becomes its own page under the corresponding main menu item. It's a simple and efficient way to structure your content and make it easily accessible to visitors.

There's one exception to this rule: the `README.md` file. Instead of becoming a submenu item, the `README.md` file is used as the page for the main menu item itself. This means that when a visitor clicks on the main menu item, they're taken to a page displaying the content of the `README.md` file.

This feature also provides a neat trick for creating a menu item without a submenu. If you want a menu item to lead directly to a single page without any subpages, you can simply create a folder that contains only a `README.md` file. When a visitor clicks on this menu item, they'll be taken directly to the page displaying the content of the `README.md` file. -->

A column on the footer consists of the following properties

| Property Name | Options/Type | Optional Values and Their Use |
| -------------------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title` | `string` | The title of the footer column. |
| `items` | `object` | The items displayed in the column |
| `items.ariaLabel` | `string` | The ariaLabel of the displayed item. |
| `items.value` | `string` | The text that wil be displayed. |
| `items.link` | `string` | The url that the item wil be linked to when clicked. |
| `items.internalMarkdown` | `object` | An object that contains the directoryName and fileName to internally link to. |
| `items.internalMarkdown.directoryName` | `string` | The directory name set the `github_docs_directory_paths` variable e.g. `Features` [Read more](#directoryname). |
| `items.internalMarkdown.fileName` | `string` | The file name thats in the directory set at `directoryName` e.g. `README`. |
| `items.icon` | `object` | The object of the icon containing de properties of a [Font Awesome](https://fontawesome.com/) icon. |
| `items.icon.prefix` | `fas`/`fab`/`far` | The prefix of the Font Awesome icon (`fas` Solid icon), (`fab` Brand icon), (`far` Regular icon). |
| `items.icon.icon` | `string` | The name of the Font Awesome icon e.g. `github`. |
| `items.icon.placement` | `left`/`right` | The placement of the Font Awesome icon on the `left` or `right`. |
| `items.customIcon` | `object` | An object containing properties for a customIcon. |
| `items.customIcon.icon` | `string` | The full lenght string of an icon e.g. `"<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.0\" ........ -2 0 -27 -23 -54 -50z\" /> </g> </svg>"`. |
| `items.customIcon.placement` | `left`/`right` | The placement of the Font Awesome icon on the `left` or `right`. |

##### directoryName

> [!WARNING]
> The directoryName must be equal to the a name set in the `GITHUB_DOCS_DIRECTORY_PATHS`. <br />
> e.g.: `Features`. If not set correctly the requested files can not be found and will result in a `404` error.

```yaml
GITHUB_DOCS_DIRECTORY_PATHS: '[{"name": "Features", "location": "/docs/features"}, {"name": "Roadmap", "location": "/docs/roadmap"}, {"name": "Usecases", "location": "/docs/usecases"}]'
```

## Configuration

Dynamic footer items can be passed to the json file like this:

```json
[
{
"title": "Links",
"items": [
{
"ariaLabel": "Home",
"value": "Home",
"link": "/",
"icon": { "prefix": "fas", "icon": "home", "placement": "left" }
},
{
"ariaLabel": "Github",
"value": "Github",
"link": "https://github.com/ConductionNL/product-website-template",
"icon": { "prefix": "fab", "icon": "github", "placement": "left" }
},
{
"ariaLabel": "Roadmap",
"value": "Roadmap",
"link": "/Roadmap",
"icon": { "prefix": "fas", "icon": "arrow-right", "placement": "left" }
}
]
},
{
"title": "Features",
"items": [
{
"ariaLabel": "Features README",
"value": "README",
"link": "/Features",
"icon": { "prefix": "fas", "icon": "arrow-right", "placement": "left" }
},
// ............
// ............
{
"ariaLabel": "NL Design",
"value": "NL Design",
"internalMarkdown": {
"directoryName": "Features",
"fileName": "NL_Design"
},
"icon": { "prefix": "fas", "icon": "arrow-right", "placement": "left" }
}
// ............
]
}
]
```
101 changes: 86 additions & 15 deletions docs/features/Dynamic_menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,101 @@

The dynamic menu in the Product Website Template is a powerful feature that allows you to add folders to the main menu of your product page. This provides a flexible and intuitive way to organize and navigate your content.

When you add a folder to the main menu, the template automatically creates a submenu item for each markdown file in that folder. This means that each markdown file becomes its own page under the corresponding main menu item. It's a simple and efficient way to structure your content and make it easily accessible to visitors.
<!-- When you add a folder to the main menu, the template automatically creates a submenu item for each markdown file in that folder. This means that each markdown file becomes its own page under the corresponding main menu item. It's a simple and efficient way to structure your content and make it easily accessible to visitors. -->

There's one exception to this rule: the `README.md` file. Instead of becoming a submenu item, the `README.md` file is used as the page for the main menu item itself. This means that when a visitor clicks on the main menu item, they're taken to a page displaying the content of the `README.md` file.
<!-- There's one exception to this rule: the `README.md` file. Instead of becoming a submenu item, the `README.md` file is used as the page for the main menu item itself. This means that when a visitor clicks on the main menu item, they're taken to a page displaying the content of the `README.md` file. -->

This feature also provides a neat trick for creating a menu item without a submenu. If you want a menu item to lead directly to a single page without any subpages, you can simply create a folder that contains only a `README.md` file. When a visitor clicks on this menu item, they'll be taken directly to the page displaying the content of the `README.md` file.
<!-- This feature also provides a neat trick for creating a menu item without a submenu. If you want a menu item to lead directly to a single page without any subpages, you can simply create a folder that contains only a `README.md` file. When a visitor clicks on this menu item, they'll be taken directly to the page displaying the content of the `README.md` file. -->

A menu item consists of the following properties

| Property Name | Options/Type | Optional Values and Their Use |
| -------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `label` | `string` | The name of the menu item. |
| `type` | `internal`/`extrernal` | The type of the menu item of which it links to, to an external or internal page. |
| `current` | `object` | An object that when true will set the menu item to current. |
| `current.pathname` | `string` | The pathname on whitch path the menu item is current. pathname = "/Roadmap" is current at https://conductionnl.github.io/product-website-template/Roadmap/ |
| `handleClick` | `object` | An object that tells the menu item what to do when clicked on. |
| `handleClick.link` | `string` | The url to link to. |
| `handleClick.internalMarkdown` | `object` | An object that contains the directoryName and fileName to internally link to. |
| `handleClick.internalMarkdown.directoryName` | `string` | The directory name set the `github_docs_directory_paths` variable e.g. `Features` [Read more](#directoryname). |
| `handleClick.internalMarkdown.fileName` | `string` | The file name thats in the directory set at `directoryName` e.g. `README`. |
| `subItems` | `object` | The subItems object contains all the previous properties. |

By leveraging the dynamic menu, you can create a user-friendly navigation system that adapts to the structure of your content.

##### directoryName

> [!WARNING]
> The directoryName must be equal to the a name set in the `GITHUB_DOCS_DIRECTORY_PATHS`. <br />
> e.g.: `Features`. If not set correctly the requested files can not be found and will result in a `404` error.

```yaml
GITHUB_DOCS_DIRECTORY_PATHS: '[{"name": "Features", "location": "/docs/features"}, {"name": "Roadmap", "location": "/docs/roadmap"}, {"name": "Usecases", "location": "/docs/usecases"}]'
```

## Configuration
Dynamic menu items can be passed to the
````json

Dynamic menu items can be passed to the json file like this:

```json
[
{
"name": "Features",
"location": "/docs/features"
"label": "Home",
"type": "internal",
"current": {
"pathname": "/"
},
"handleClick": {
"link": "/"
}
},
{
"name": "Roadmap",
"location": "/docs/roadmap"
"label": "Roadmap",
"type": "internal",
"current": {
"pathname": "/Roadmap"
},
"handleClick": {
"link": "/Roadmap"
}
},
{
"label": "Features",
"current": {
"pathname": "/Features"
},
"subItems": [
{
"label": "README",
"type": "internalMarkdown",
"current": {
"pathname": "/Features/README"
},
"handleClick": {
"internalMarkdown": {
"directoryName": "Features",
"fileName": "README"
}
}
},
// ............
// ............
{
"label": "NL Design",
"type": "internalMarkdown",
"current": {
"pathname": "/Features/NL_Design"
},
"handleClick": {
"internalMarkdown": {
"directoryName": "Features",
"fileName": "NL_Design"
}
}
}
// ............
]
}
]
````

Keep in mind that in order to actually pass the json configuraiton trough the worflow yaml it needs to be both stringified and put to one line.
````yaml
GITHUB_DOCS_DIRECTORY_PATHS: '[{"name": "Features", "location": "/docs/features"},{"name": "Roadmap", "location": "/docs/roadmap"}]'
````
```
12 changes: 12 additions & 0 deletions docs/features/NL_Design.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,15 @@ The Product Website Template can be configured with any and all NL Design themes
| Bodegraven | `"bodegraven-theme"` |
| Borne | `"borne-theme"` |
| Buren | `"buren-theme"` |
| Commonground | `"commonground-theme"` |
| Demodam | `"demodam-theme"` |
| Dimpact | `"dimpact-theme"` |
| Dinkelland | `"dinkelland-theme"` |
| Drechterland | `"drechterland-theme"` |
| Duiven | `"duiven-theme"` |
| Enkhuizen | `"enkhuizen-theme"` |
| Epe | `"epe-theme"` |
| Gouda | `"gouda-theme"` |
| Groningen | `"groningen-theme"` |
| Haarlem | `"haarlem-theme"` |
| Haarlemmermeer | `"haarlemmermeer-theme"` |
Expand All @@ -53,14 +58,21 @@ The Product Website Template can be configured with any and all NL Design themes
| Leiden | `"leiden-theme"` |
| Leidschendam Voorburg | `"leidschendam-theme"` |
| Nijmegen | `"nijmegen-theme"` |
| Noaberkracht | `"noaberkracht-theme"` |
| Noordoostpolder | `"noordoostpolder-theme"` |
| Noordwijk | `"noordwijk-theme"` |
| Provincie Zuid Holland | `"pzh-theme"` |
| Rotterdam | `"rotterdam-theme"` |
| Sloterburg | `"sloterburg-theme"` |
| Stedebroec | `"stedebroec-theme"` |
| Tilburg | `"tilburg-theme"` |
| Tubbergen | `"tubbergen-theme"` |
| Utrecht | `"utrecht-theme"` |
| Venray | `"venray-theme"` |
| Vught | `"vught-theme"` |
| Westervoort | `"westervoort-theme"` |
| XXLLNC | `"xxllnc-theme"` |
| Zevenaar | `"zevenaar-theme"` |
| Zuiddrecht | `"zuiddrecht-theme"` |
| Zutphen | `"zutphen-theme"` |
| Zwolle | `"zwolle-theme"` |
Loading
Loading