From c40a91d2d3b2b863f53b267c9bff0c89235e84dc Mon Sep 17 00:00:00 2001 From: Mwest2020 Date: Wed, 28 Feb 2024 14:22:42 +0100 Subject: [PATCH] product page --- .github/workflows/product-page-deploy.yml | 4 +- README.md | 165 ++++------------------ docs/README.md | 157 ++++++++++++++++++++ docs/architectuur.md | 44 ++++++ docs/vragenlijst_vng.md | 140 ++++++++++++++++++ 5 files changed, 369 insertions(+), 141 deletions(-) create mode 100644 docs/README.md create mode 100644 docs/architectuur.md create mode 100644 docs/vragenlijst_vng.md diff --git a/.github/workflows/product-page-deploy.yml b/.github/workflows/product-page-deploy.yml index 2c9c6b5..d00599e 100644 --- a/.github/workflows/product-page-deploy.yml +++ b/.github/workflows/product-page-deploy.yml @@ -39,8 +39,8 @@ jobs: # 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_subtitle: "De Product Page Bouwer is een gebruiksvriendelijke en efficiënte tool om snel professionele productpagina's te genereren" + jumbotron_description: "Met de Product Page Bouwer kunt u binnen enkele minuten een aantrekkelijke en informatieve productpagina lanceren, zonder dat u zich zorgen hoeft te maken over webhosting, codering of het up-to-date houden van uw content. Deze tool haalt automatisch de meest recente documentatie en projectinformatie uit uw GitHub-repository, waardoor u zich kunt concentreren op het ontwikkelen van uw product terwijl uw gebruikers altijd toegang hebben tot de nieuwste informatie. Ideaal voor open-source projecten en Common Ground initiatieven die hun zichtbaarheid willen vergroten zonder extra overhead." jumbotron_image: "https://www.conduction.nl/wp-content/uploads/2021/07/cropped-Conduction_HOME_0000_afb1-1.png" # Nl-Desgin Theme diff --git a/README.md b/README.md index e43f3f0..258d443 100644 --- a/README.md +++ b/README.md @@ -1,157 +1,44 @@ -# Product Website Template +# Over de Product Website Template -The [Product Website Template](https://github.com/ConductionNL/product-website-template) by [Conduction](https://www.conduction.nl/) is a powerful tool designed to alleviate the common issue faced by many open source and Common Ground projects: the need for a dedicated product page and the cost (in time) to build one. This template enables users to quickly and easily set up a product page based on the contents of their repository without actually making a page. +De [Product Website Template](https://github.com/ConductionNL/product-website-template) van [Conduction](https://www.conduction.nl/) is ontwikkeld om een snel en gemakkelijk opzetten van productpagina's voor open source en Common Ground projecten mogelijk te maken. Deze sjabloon stelt gebruikers in staat om met minimale inspanning een professionele en gestroomlijnde productpagina te creëren. -The template is highly customizable, allowing users to style their product page using their organization's NL design token. This template maintains a consistent look and feel across all your products and services, reinforcing your brand identity. +## Kernfunctionaliteiten -One of the key advantages of this template is its simplicity. You can have a fully functional product page up and running in minutes without writing any additional code or documentation. This template saves time and makes it accessible to users with varying technical expertise. +- **Eenvoudige Configuratie:** Gebruikers kunnen snel een productpagina opzetten zonder uitgebreide technische kennis. +- **Automatische Integratie:** De template haalt automatisch informatie uit uw GitHub-repository om de productpagina te vullen. +- **Aanpasbaar Ontwerp:** Pas de stijl van uw productpagina aan met behulp van NL Design Tokens om een consistente merkidentiteit te waarborgen. +- **Geen Server Nodig:** Maak gebruik van GitHub Pages voor hosting, wat het onderhoud en de kosten vermindert. +- **Dynamische Inhoud:** De pagina wordt automatisch bijgewerkt met de nieuwste documentatie uit uw repository. -Whether you're a seasoned developer or a newcomer to open-source projects, the Product Website Template is a valuable resource that can help you showcase your work professionally and appealingly. +## Installatie -## Advantages +### Voorbereiding -- **No coding needed** just copy the workflow to your repository -- **No server needed** GitHub pages will host your site -- **No content needed** the page will use the documentation that you already have in your repository -- **No maintenance or updates,** the page will always fetch the latest version of your documentation -- **Follows your organization's style;** just use your existing NL Design tokens to style the page +1. Zorg ervoor dat uw project is gehost op GitHub en dat u toegang hebt tot de repository-instellingen. -All in all, it's a simple, quick, fire-and-forget solution for providing a simple product page that is always up-to-date. +### GitHub Workflow Configuratie -## Using this template for your own GitHub repository +1. Download het [workflow-bestand](https://github.com/ConductionNL/product-website-template/blob/main/.github/workflows/product-page-deploy.yml) voor de productpagina. +2. Voeg dit bestand toe aan de `.github/workflows` map in uw repository. +3. Pas de configuratie aan binnen het workflow-bestand om overeen te komen met uw projectspecificaties. -1. **Download the GitHub Workflow File** - Download the [product page workflow file ](https://github.com/ConductionNL/product-website-template/blob/main/.github/workflows/product-page-deploy.yml) on GitHub. Download the file to your local machine. You can refer to the [GitHub Actions documentation](https://docs.github.com/en/actions) for more information on GitHub workflows. +### Activering GitHub Pages -2. **Place the Workflow File in Your Repository** +1. Activeer GitHub Pages in de instellingen van uw repository. +2. Configureer GitHub Pages om de inhoud van de `gh-pages` branch te gebruiken. - - _In your browser_, navigate to your repository. Inside the repository, look for a folder named `.github/workflows`. If it doesn't exist, create it. When in the folder, press `Add file` (top-right corner ) copy, paste the content of the `product-page-deploy.yml` into the edit screen, name the file `product-page-deploy.yml` and hit commit, and push - - OR _On your local machine_, navigate to your repository. Inside the repository, look for a folder named `.github/workflows`. If it doesn't exist, create it. Place the downloaded workflow file into this folder. For more information on the structure of a GitHub repository, you can refer to the [GitHub Docs](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-repositories). +## Gebruik -3. **Configure the Workflow File** - Open the workflow file in a text editor. Modify the configuration settings according to your needs. Be sure to save your changes. Refer to the GitHub Actions documentation for more information on configuring a workflow file. +Na installatie en configuratie wordt uw productpagina automatisch gegenereerd en gehost via GitHub Pages. U kunt de pagina verder aanpassen door de configuratieopties in het workflow-bestand aan te passen of door eigen content toe te voegen aan uw GitHub-repository. -4. **Commit and Push the Workflow File to Your Repository** - Open a terminal and navigate to your repository. Use the following commands to add the workflow file to your repository, commit the changes, and push them to GitHub: +## Bijdragen - ```CLI - git add .github/workflows/product-page-deploy.yml - git commit -m "Added workflow file for product page" - git push - ``` +Wij verwelkomen bijdragen aan de Product Website Template. Of het nu gaat om bug fixes, feature suggesties of code bijdragen, raadpleeg onze [CONTRIBUTING.md](CONTRIBUTING.md) voor meer informatie over hoe u kunt bijdragen. -For more information on using Git, refer to the [Git documentation](https://git-scm.com/doc). +## Licentie -If you don't have GitHub pages set up yet, follow the following steps: +De Product Website Template is uitgegeven onder de EUPL 1.2 licentie. Bekijk het [LICENSE.md](LICENSE.md) bestand voor meer details. -1. **Open your web browser and navigate to GitHub.** - Go to [https://github.com](https://github.com). +## Contact -2. **Log in to your GitHub account.** - Click on the "Sign in" button in the top right corner of the page. Enter your username, email address, and password, then click "Sign in". - -3. **Navigate to the repository where you want to activate GitHub Pages.** - You can do this by clicking on the repository's name under "Your repositories" if it's a recent repository, or by clicking on "Repositories", then clicking on the repository's name. - -4. **Switch to the `gh-pages` branch.** - By default, GitHub shows the `main` or `master` branch of your repository. To switch to the `gh-pages` branch, click on the "Branch" dropdown menu (it's usually a button with the name of the current branch, like `main` or `master`), then select or type `gh-pages` and hit Enter. - - If the `gh-pages` branch doesn't exist, you'll need to create it. Click on the "Branch" dropdown menu, type `gh-pages` into the text box, and hit Enter. Confirm that you want to create a new branch named `gh-pages`. - -5. **Activate GitHub Pages.** - Click on the "Settings" tab at the top of the repository. Scroll down to the "GitHub Pages" section. In the "Source" dropdown, select the `gh-pages` branch. For the folder, make sure it's set to "/ (root)". - -6. **Save your changes.** - Click on the "Save" button to activate GitHub Pages. - -7. **Confirm that GitHub Pages is activated.** - After saving, scroll down to the "GitHub Pages" section again. You should see a message saying, "Your site is published at [link]", and your GitHub Page can be accessed at that link. - -## Configuration - -You can configure the Product Website template through the workflow YAML file, specifically via the environment (env) variables found within this YAML file. When you open this file, you'll notice the environment variables located at the top, which can be altered to suit your preferences. Any image URL you include here can also be a base-encoded image. The variables should appear in this format: - -```yaml -name: Deploy the Product Page to GitHub Pages - -on: - push: - branches: - - main - - development - -permissions: - contents: write - -jobs: - build: - runs-on: ubuntu-latest - steps: - - name: Create the Product Page - uses: OpenCatalogi/productpage-action@latest - with: - # Connect Repository - github_repository_name_as_prefix: true - github_repository_name: ${{ github.event.repository.name }} - github_repository_url: ${{ github.event.repository.url }} - github_api_base_url: https://api.github.com/repos/${{ github.repository }}/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 - 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" -``` - -We currently support the following configurations option's - -| Variable Name | Default Value | Optional Values and Their Use | -| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -| `github_repository_name` | `${{ github.event.repository.name }}` | The name of the GitHub repository. | -| `github_repository_name_as_prefix` | `true` | Uses the repository name as the Gatsby URL prefix, options: `"true"` or `"false"` | -| `github_repository_url` | `${{ github.event.repository.url }}` | The URL of the GitHub repository. | -| `github_api_base_url` | `https://api.github.com/repos/${{ github.repository }}/contents` | The base URL for the GitHub API. | -| `github_docs_directory_paths` | `'[{"name": "Features", "location": "/docs/features"}, {"name": "Roadmap", "location": "/docs/roadmap"}, {"name": "Usecases", "location": "/docs/usecases"}]'` | The paths to the directories containing your documentation. | -| `pull_from_branche` | `"development"` | The branche on witch to base the build e.g. main or development. | -| `slack_url` | `"false"` | The URL for your Slack workspace. (set to `"false"` to omit Slack from your menu). | -| `read_the_docs_url` | `"false"` | The URL for your Read the Docs documentation. (set to `"false"` to omit documentation from your menu). | -| `navbar_content` | `"https://raw.githubusercontent.com/ConductionNL/product-website-template/main/pwa/src/templates/templateParts/header/HeaderContent.json"` | A link to the json file that manages the navbar content. | -| `footer_show_logo` | `"true"` | Whether to show to logo in the footer or not. | -| `footer_logo_href` | `"https://conduction.nl"` | The URL that the footer image will link to (set to blank to not link). | -| `footer_content` | `"https://raw.githubusercontent.com/ConductionNL/product-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json"` | A link to the json file that manages the footer content. | -| `footer_content_header` | `"heading-3"` | The heading size used in the footer ("heading-1" to "heading-5"). | -| `jumbotron_title` | `"Product Website Template"` | The title on your jumbotron. | -| `jumbotron_subtitle` | `${{ github.event.repository.url }}` | The subtitle on your jumbotron. | -| `jumbotron_description` | `${{ github.event.repository.description }}` | The description on your jumbotron. | -| `jumbotron_image` | `"https://www.conduction.nl/wp-content/uploads/2021/07/cropped-Conduction_HOME_0000_afb1-1.png"` | A base64 encoded SVG file or URL to the image used in the jumbotron. | -| `nl_design_theme_classname` | `"conduction-theme"` | The class name for your NL Design theme. | -| `favicon_image` | `"data:image/svg+xml;base64,..."` | A base64 encoded SVG file or URL to the image used as favicon. | -| `page_title` | `"Product Page"` | The title of your page. The title of the page will always look like `"PAGE_TITLE(Product Page)" \| "{page_location}(Home)"` | - -## Conclusion - -By following the steps mentioned in this guide, anyone can leverage the power of GitHub to deploy an engaging and informative product page with just a few clicks. So, whether you want to display the features of your newest software or give an overview of your portfolio, our Product Website Template will equip you with the right tool for the job. - -We are delighted to offer this template to the community, and we look forward to seeing the creative and innovative ways you will use it to present your projects. +Voor meer informatie over de Product Website Template of hoe u deze kunt implementeren voor uw projecten, kunt u contact opnemen via [info@conduction.nl](mailto:info@conduction.nl). diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..e43f3f0 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,157 @@ +# Product Website Template + +The [Product Website Template](https://github.com/ConductionNL/product-website-template) by [Conduction](https://www.conduction.nl/) is a powerful tool designed to alleviate the common issue faced by many open source and Common Ground projects: the need for a dedicated product page and the cost (in time) to build one. This template enables users to quickly and easily set up a product page based on the contents of their repository without actually making a page. + +The template is highly customizable, allowing users to style their product page using their organization's NL design token. This template maintains a consistent look and feel across all your products and services, reinforcing your brand identity. + +One of the key advantages of this template is its simplicity. You can have a fully functional product page up and running in minutes without writing any additional code or documentation. This template saves time and makes it accessible to users with varying technical expertise. + +Whether you're a seasoned developer or a newcomer to open-source projects, the Product Website Template is a valuable resource that can help you showcase your work professionally and appealingly. + +## Advantages + +- **No coding needed** just copy the workflow to your repository +- **No server needed** GitHub pages will host your site +- **No content needed** the page will use the documentation that you already have in your repository +- **No maintenance or updates,** the page will always fetch the latest version of your documentation +- **Follows your organization's style;** just use your existing NL Design tokens to style the page + +All in all, it's a simple, quick, fire-and-forget solution for providing a simple product page that is always up-to-date. + +## Using this template for your own GitHub repository + +1. **Download the GitHub Workflow File** + Download the [product page workflow file ](https://github.com/ConductionNL/product-website-template/blob/main/.github/workflows/product-page-deploy.yml) on GitHub. Download the file to your local machine. You can refer to the [GitHub Actions documentation](https://docs.github.com/en/actions) for more information on GitHub workflows. + +2. **Place the Workflow File in Your Repository** + + - _In your browser_, navigate to your repository. Inside the repository, look for a folder named `.github/workflows`. If it doesn't exist, create it. When in the folder, press `Add file` (top-right corner ) copy, paste the content of the `product-page-deploy.yml` into the edit screen, name the file `product-page-deploy.yml` and hit commit, and push + - OR _On your local machine_, navigate to your repository. Inside the repository, look for a folder named `.github/workflows`. If it doesn't exist, create it. Place the downloaded workflow file into this folder. For more information on the structure of a GitHub repository, you can refer to the [GitHub Docs](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-repositories). + +3. **Configure the Workflow File** + Open the workflow file in a text editor. Modify the configuration settings according to your needs. Be sure to save your changes. Refer to the GitHub Actions documentation for more information on configuring a workflow file. + +4. **Commit and Push the Workflow File to Your Repository** + Open a terminal and navigate to your repository. Use the following commands to add the workflow file to your repository, commit the changes, and push them to GitHub: + + ```CLI + git add .github/workflows/product-page-deploy.yml + git commit -m "Added workflow file for product page" + git push + ``` + +For more information on using Git, refer to the [Git documentation](https://git-scm.com/doc). + +If you don't have GitHub pages set up yet, follow the following steps: + +1. **Open your web browser and navigate to GitHub.** + Go to [https://github.com](https://github.com). + +2. **Log in to your GitHub account.** + Click on the "Sign in" button in the top right corner of the page. Enter your username, email address, and password, then click "Sign in". + +3. **Navigate to the repository where you want to activate GitHub Pages.** + You can do this by clicking on the repository's name under "Your repositories" if it's a recent repository, or by clicking on "Repositories", then clicking on the repository's name. + +4. **Switch to the `gh-pages` branch.** + By default, GitHub shows the `main` or `master` branch of your repository. To switch to the `gh-pages` branch, click on the "Branch" dropdown menu (it's usually a button with the name of the current branch, like `main` or `master`), then select or type `gh-pages` and hit Enter. + + If the `gh-pages` branch doesn't exist, you'll need to create it. Click on the "Branch" dropdown menu, type `gh-pages` into the text box, and hit Enter. Confirm that you want to create a new branch named `gh-pages`. + +5. **Activate GitHub Pages.** + Click on the "Settings" tab at the top of the repository. Scroll down to the "GitHub Pages" section. In the "Source" dropdown, select the `gh-pages` branch. For the folder, make sure it's set to "/ (root)". + +6. **Save your changes.** + Click on the "Save" button to activate GitHub Pages. + +7. **Confirm that GitHub Pages is activated.** + After saving, scroll down to the "GitHub Pages" section again. You should see a message saying, "Your site is published at [link]", and your GitHub Page can be accessed at that link. + +## Configuration + +You can configure the Product Website template through the workflow YAML file, specifically via the environment (env) variables found within this YAML file. When you open this file, you'll notice the environment variables located at the top, which can be altered to suit your preferences. Any image URL you include here can also be a base-encoded image. The variables should appear in this format: + +```yaml +name: Deploy the Product Page to GitHub Pages + +on: + push: + branches: + - main + - development + +permissions: + contents: write + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Create the Product Page + uses: OpenCatalogi/productpage-action@latest + with: + # Connect Repository + github_repository_name_as_prefix: true + github_repository_name: ${{ github.event.repository.name }} + github_repository_url: ${{ github.event.repository.url }} + github_api_base_url: https://api.github.com/repos/${{ github.repository }}/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 + 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" +``` + +We currently support the following configurations option's + +| Variable Name | Default Value | Optional Values and Their Use | +| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| `github_repository_name` | `${{ github.event.repository.name }}` | The name of the GitHub repository. | +| `github_repository_name_as_prefix` | `true` | Uses the repository name as the Gatsby URL prefix, options: `"true"` or `"false"` | +| `github_repository_url` | `${{ github.event.repository.url }}` | The URL of the GitHub repository. | +| `github_api_base_url` | `https://api.github.com/repos/${{ github.repository }}/contents` | The base URL for the GitHub API. | +| `github_docs_directory_paths` | `'[{"name": "Features", "location": "/docs/features"}, {"name": "Roadmap", "location": "/docs/roadmap"}, {"name": "Usecases", "location": "/docs/usecases"}]'` | The paths to the directories containing your documentation. | +| `pull_from_branche` | `"development"` | The branche on witch to base the build e.g. main or development. | +| `slack_url` | `"false"` | The URL for your Slack workspace. (set to `"false"` to omit Slack from your menu). | +| `read_the_docs_url` | `"false"` | The URL for your Read the Docs documentation. (set to `"false"` to omit documentation from your menu). | +| `navbar_content` | `"https://raw.githubusercontent.com/ConductionNL/product-website-template/main/pwa/src/templates/templateParts/header/HeaderContent.json"` | A link to the json file that manages the navbar content. | +| `footer_show_logo` | `"true"` | Whether to show to logo in the footer or not. | +| `footer_logo_href` | `"https://conduction.nl"` | The URL that the footer image will link to (set to blank to not link). | +| `footer_content` | `"https://raw.githubusercontent.com/ConductionNL/product-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json"` | A link to the json file that manages the footer content. | +| `footer_content_header` | `"heading-3"` | The heading size used in the footer ("heading-1" to "heading-5"). | +| `jumbotron_title` | `"Product Website Template"` | The title on your jumbotron. | +| `jumbotron_subtitle` | `${{ github.event.repository.url }}` | The subtitle on your jumbotron. | +| `jumbotron_description` | `${{ github.event.repository.description }}` | The description on your jumbotron. | +| `jumbotron_image` | `"https://www.conduction.nl/wp-content/uploads/2021/07/cropped-Conduction_HOME_0000_afb1-1.png"` | A base64 encoded SVG file or URL to the image used in the jumbotron. | +| `nl_design_theme_classname` | `"conduction-theme"` | The class name for your NL Design theme. | +| `favicon_image` | `"data:image/svg+xml;base64,..."` | A base64 encoded SVG file or URL to the image used as favicon. | +| `page_title` | `"Product Page"` | The title of your page. The title of the page will always look like `"PAGE_TITLE(Product Page)" \| "{page_location}(Home)"` | + +## Conclusion + +By following the steps mentioned in this guide, anyone can leverage the power of GitHub to deploy an engaging and informative product page with just a few clicks. So, whether you want to display the features of your newest software or give an overview of your portfolio, our Product Website Template will equip you with the right tool for the job. + +We are delighted to offer this template to the community, and we look forward to seeing the creative and innovative ways you will use it to present your projects. diff --git a/docs/architectuur.md b/docs/architectuur.md new file mode 100644 index 0000000..0b97053 --- /dev/null +++ b/docs/architectuur.md @@ -0,0 +1,44 @@ +# Architectuur van de Product Page Bouwer + +## Inleiding + +De Product Page Bouwer, aangeboden door Conduction, is ontworpen om de uitdagingen rondom de creatie van productpagina's voor open-source en Common Ground projecten te overwinnen. Deze tool stelt projecten in staat om snel en moeiteloos een productpagina op te zetten, gebruikmakend van bestaande documentatie binnen hun GitHub-repository, zonder de noodzaak voor extra codering of hosting. + +## Kerncomponenten + +### GitHub Workflows + +De ruggengraat van de Product Page Bouwer maakt gebruik van GitHub Actions en Workflows om automatisch de meest recente projectdocumentatie te halen en te publiceren op een GitHub Pages website. + +### Automatische Content Generatie + +Door de integratie met GitHub, haalt de tool dynamisch content op uit de repository van het project, waaronder README-bestanden, documentatie en andere relevante informatie, om een samenhangende en informatieve productpagina te creëren. + +### NL Design System + +De tool ondersteunt het NL Design System, waardoor gebruikers hun productpagina kunnen aanpassen aan de huisstijl van hun organisatie. Dit zorgt voor een consistente gebruikerservaring en versterkt de visuele identiteit van het project. + +### Geen Server Benodigd + +Dankzij de ondersteuning voor GitHub Pages is er geen aparte serverhosting nodig. De productpagina wordt direct gehost op GitHub, wat zorgt voor een eenvoudige setup en minimaliseert de operationele kosten. + +## Voordelen + +- **Snelheid en Eenvoud:** Een productpagina kan in enkele minuten worden opgezet, zonder de noodzaak voor extra codering of webontwikkelingsvaardigheden. +- **Altijd Up-to-Date:** De content op de productpagina blijft up-to-date met de laatste wijzigingen in de GitHub-repository van het project. +- **Kostenefficiënt:** Elimineert de noodzaak voor aparte webhosting en verlaagt de drempel voor projecten om hun zichtbaarheid te vergroten. +- **Aanpasbaarheid:** Biedt ondersteuning voor het NL Design System, waardoor organisaties hun productpagina kunnen stijlen volgens hun eigen merkrichtlijnen. + +## Implementatie + +### GitHub Workflow Configuratie + +Projecten dienen een specifieke GitHub Workflow te configureren die de Product Page Bouwer activeert. Deze workflow haalt de nieuwste documentatie en projectinformatie op en publiceert deze op een GitHub Pages site. + +### Aanpassingen + +Gebruikers kunnen de weergave van hun productpagina aanpassen door middel van NL Design tokens en specifieke configuratie-instellingen binnen de workflow, waaronder de aanpassing van de navigatiebalk, voettekst en het jumbotron. + +## Conclusie + +De Product Page Bouwer biedt een revolutionaire benadering voor het snel en efficiënt delen van projectinformatie, waardoor open-source en Common Ground projecten hun zichtbaarheid kunnen vergroten zonder de extra overhead van traditionele webontwikkeling. diff --git a/docs/vragenlijst_vng.md b/docs/vragenlijst_vng.md new file mode 100644 index 0000000..ba065e1 --- /dev/null +++ b/docs/vragenlijst_vng.md @@ -0,0 +1,140 @@ +# Intake Portfolio Common Ground + +## 1 Wat is de naam van het initiatief dat je wilt aanmelden? + +Product Website Template + +## 2 Wat voor type product is het initiatief? + +- Toepassing (bruikbare oplossing) + +## 3 Indien een toepassing, welke componenten zijn hierin opgenomen? + +- GitHub Actions +- GitHub Pages +- NL Design System + +## 4 Indien het initiatief software betreft, is het parallel te gebruiken naast de bestaande software die het moet vervangen? + +Ja, de Product Website Template is ontworpen om onafhankelijk van bestaande systemen te functioneren en vereist geen vervanging van huidige software. Het biedt een aanvullende methode voor het creëren van productpagina's. + +## 5 Indien een toepassing, pitch je product + +Met de Product Page Bouwer kunt u binnen enkele minuten een aantrekkelijke en informatieve productpagina lanceren, zonder dat u zich zorgen hoeft te maken over webhosting, codering of het up-to-date houden van uw content. Deze tool haalt automatisch de meest recente documentatie en projectinformatie uit uw GitHub-repository, waardoor u zich kunt concentreren op het ontwikkelen van uw product terwijl uw gebruikers altijd toegang hebben tot de nieuwste informatie. Ideaal voor open-source projecten en Common Ground initiatieven die hun zichtbaarheid willen vergroten zonder extra overhead. + +## 6 In welk domein past het initiatief? + +- Overkoepelend/ randvoorwaardelijk voor CG + +## 7 Welk type organisaties zijn betrokken? + +- Open source gemeenschappen +- Overheidsorganisaties + +## 8 Welke gemeenten zijn aangesloten bij de realisatie van dit initiatief? + +Rotterdam (Via OpenCatalogi) +Gouda (Via OpenCatalogi) +Noordwijk (Via OpenWoo.app) +Tubbergen (Via OpenWoo.app) +Epe (Via OpenWoo.app) +Dinkelland (Via OpenWoo.app) +Leiden (Via OpenCatalogi) +Roermond (Via OpenWoo.app) +Assen (Via OpenWoo.app) +Hilversum (Via OpenWoo.app) +Haarlemermeer (Via OpenWoo.app) +Enschede (Via OpenWoo.app) +Eindhoven (Via OpenWoo.app) +Hardewijk (Via OpenWoo.app) + +## 9 Welke gemeenten maken gebruik van dit initiatief? + +Noordwijk (Via OpenWoo.app) +Tubbergen (Via OpenWoo.app) +Epe(Via OpenWoo.app) +Rotterdam (Via OpenCatalogi) +Gouda (Via OpenWoo.app, Open Services | Berichten en Documenten, Waardepapieren) +Zutphen (Via OpenWoo.app) +Roosendaal (Via OpenWoo.app) +Alkmaar (Via OpenCatalogi) + +## 10 Welke leveranciers zijn betrokken? + +Conduction + +## 11 Wat is de startdatum van het initiatief + +01-08-2023 + +## 12 Wanneer wordt verwacht dat het initiatief ready for use is? Of sinds wanneer is het initiatief ready for use? + +01-08-2023 + +## 13 Welke organisatie wordt aangehouden als contact organisatie? + +Conduction + +## 14 Wie is de PO (product owner) van dit initiatief? + +Ruben van der Linde + +## 15 Wat is het emailadres van de PO? + + + +## 16 Op welke website kunnen we meer info over het product vinden? + +[https://github.com/ConductionNL/product-website-template](https://github.com/ConductionNL/product-website-template) + +## 17 Wat is een korte omschrijving van het product? + +De Product Page Bouwer is een gebruiksvriendelijke en efficiënte tool om snel professionele productpagina's te genereren, direct gekoppeld aan de inhoud van je GitHub-repository. + +## 18 Hoeverre draagt het initiatief volgens jou bij aan de wendbaarheid van gemeenten? + +- 4 + +## 19 Geef een korte toelichting op je beoordeling van de vorige vraag + +De template maakt het voor gemeenten makkelijker om hun projecten zichtbaar en toegankelijk te maken, wat bijdraagt aan een grotere wendbaarheid in het presenteren en delen van hun digitale initiatieven. + +## 20 In hoeverre draagt het volgens jou bij aan betere dienstverlening van gemeenten? + +- 3 + +## 21 Geef een korte toelichting op jouw antwoord de vorige vraag + +Door een efficiënte en gestroomlijnde methode te bieden voor het creëren van productpagina's, kunnen gemeenten hun diensten en projecten beter aan burgers presenteren. + +## 22 In hoeverre draagt het bij aan regie op gegevens voor inwoners? + +- 2 + +## 23 Geef een korte toelichting op jouw antwoord bij de vorige vraag + +Hoewel de template voornamelijk gericht is op het verbeteren van de zichtbaarheid van projecten, kan indirecte toegang tot projectinformatie inwoners helpen om beter geïnformeerd te zijn over de digitale diensten van hun gemeente. + +## 24 Waar staat informatie over de planning? Voeg indien mogelijk de link toe + +Informatie over de planning is direct beschikbaar op de GitHub-pagina van het project. + +## 25 Op welke laag of op welke lagen bevindt dit initiatief zich + +- Laag 5: Presentatie en interactie + +## 26 Welke API-standaarden zijn toegepast? + +Niet van toepassing + +## 27 In welke fase bevindt het initiatief zich? + +- Beschikbaar voor gebruik + +## 28 Waar zijn jullie tegenaan gelopen? In zowel ontwikkeling en waar van toepassing bij de implementatie + +Uitdagingen bij het creëren van een flexibele template die aanpasbaar is voor verschillende soorten projecten zonder de noodzaak voor uitgebreide configuratie. + +## 29 Zijn er nog vragen naar aanleiding van dit intakeformulier? + +Nee