Developer content (#34)

data/links.yaml

@@ -45,3 +45,25 @@ project_doc_home:
   sdk: "https://ansible-sdk.readthedocs.io/en/latest/"
   sign: "https://ansible.github.io/ansible-sign/"
   vscode: "https://marketplace.visualstudio.com/items?itemName=redhat.ansible"
+developer:
+  start:
+    overview: "https://docs.ansible.com/ansible/latest/dev_guide/overview_architecture.html"
+    setup: "https://docs.ansible.com/ansible/latest/dev_guide/developing_modules_general.html#preparing-an-environment-for-developing-ansible-modules"
+    conduct: "https://docs.ansible.com/ansible/latest/community/code_of_conduct.html"
+  contribute:
+    checklist: "https://docs.ansible.com/ansible/latest/dev_guide/developing_modules_checklist.html"
+    lifecycle: "https://docs.ansible.com/ansible/latest/dev_guide/module_lifecycle.html"
+    review: ""
+    fix: ""
+  test:
+    learn: "https://docs.ansible.com/ansible/latest/dev_guide/testing.html#why-test-your-ansible-contributions"
+    run: "https://docs.ansible.com/ansible/latest/dev_guide/testing_sanity.html"
+    integration: "https://docs.ansible.com/ansible/latest/dev_guide/testing_integration.html#testing-integration"
+    unit: "https://docs.ansible.com/ansible/latest/dev_guide/testing_units.html#testing-units"
+  create_collection:
+    skeleton: "https://docs.ansible.com/ansible/latest/dev_guide/developing_collections_creating.html#creating-collections-skeleton"
+    test: "https://docs.ansible.com/ansible/latest/dev_guide/developing_collections_testing.html"
+    distribute: "https://docs.ansible.com/ansible/devel/dev_guide/developing_collections_distributing.html#initial-configuration-of-your-distribution-server-or-servers"
+    gh_actions: ""
+    troubleshoot: ""
+    request_inclusion: "https://github.com/ansible-collections/ansible-inclusion"

data/pages.yaml

@@ -65,3 +65,41 @@ index:
 ecosystem:
   title: Ansible Ecosystem
   intro: Projects in the Ansible ecosystem let you expand automation to a virtually unlimited set of use cases.
+# Developer page
+developer:
+  title: Developer resources
+  intro: Extend automation with custom Ansible modules, add functionality to existing modules, or fix bugs to improve existing code.
+  milestone:
+    start: Start writing code
+    contribute: Contribute code to an Ansible project
+    test: Test plugins and modules
+    create_collection: Create new collections
+  start:
+    intro: Ready to start writing code for Ansible? Follow these steps to get started.
+    label: Button group that links to starting developer documentation.
+    overview: Understand the Ansible architecture
+    setup: Set up your development environment
+    conduct: Review code of conduct and contributor guidelines
+  contribute:
+    intro: Contribute your code to an Ansible project or collection.
+    label: Button group that links to developer contribution documentation.
+    checklist: Contribute your module to an existing collection
+    lifecycle: Review the lifecycle of an Ansible module or plugin
+    review: Review issues and PRs in an Ansible project
+    fix: Fix issues and implement new features in an Ansible project, collection, or module
+  test:
+    intro: Test Ansible to help fix bugs and enforce coding standards and requirements.
+    label: Button group that links to test documentation.
+    learn: Understand testing in Ansible
+    run: Run sanity tests
+    integration: Write integration tests
+    unit: Write unit tests
+  create_collection:
+    intro: Create a new collection that distributes Ansible content for specific use cases.
+    label: Button group that links to documentation for creating collections.
+    skeleton: Set things up with the collection skeleton
+    test: Test your collection for code quality
+    distribute: Publish your collection on a distribution server
+    gh_actions: Use GitHub actions to set up testing workflows
+    troubleshoot: Troubleshoot collections with ansible-navigator
+    request_inclusion: Request a collection be added to the Ansible package

sass/main.scss

@@ -13,27 +13,31 @@ body {
   font-family: $redhat-text;
 }
 h1 {
-	font-family: $redhat-display;
-	font-size: 2.5rem;
+  font-family: $redhat-display;
+  font-size: 2.5rem;
+  text-transform: none;
 }
 h2 {
-	font-family: $redhat-display;
-	font-size: 2.25rem;
+  font-family: $redhat-display;
+  font-size: 2.25rem;
+  text-transform: none;
 }
 h3 {
-	font-family: $redhat-display;
+  font-family: $redhat-display;
+  text-transform: none;
 }
 h4 {
-	font-family: $redhat-display;
-	font-size: 1.5rem;
-	margin-bottom: 1.2rem;
+  font-family: $redhat-display;
+  font-size: 1.5rem;
+  margin-bottom: 1.2rem;
+  text-transform: none;
 }
 h5 {
-	font-family: $redhat-display;
+  font-family: $redhat-display;
   text-transform: none;
 }
 h6 {
-	font-family: $redhat-display;
+  font-family: $redhat-display;
 }
 
 .container {

templates/developer.html

@@ -1,4 +1,49 @@
 {% extends "_base.html" %}
 {% block body %}
-<p>Developer resources go here.</p>
-{% endblock %}
+<div class="container">
+    <div class="page-title">
+      <h2>{{ pages.developer.title }}</h2>
+      <p>{{ pages.developer.intro }}</p>
+    </div>
+    <div class="full-width-bg component">
+      <div class="grid-wrapper">
+        <div class="width-6-12 width-12-12-m">
+          <h3>{{ pages.developer.milestone.start }}</h3>
+          <p>{{ pages.developer.start.intro }}</p>
+          <div class="btn-group-vertical" role="group" aria-label="{{ pages.developer.start.label }}">
+            <a class="btn btn-primary" href="{{ links.developer.start.setup }}" role="button">{{ pages.developer.start.setup }}</a>
+            <a class="btn btn-primary" href="{{ links.developer.start.conduct }}" role="button">{{ pages.developer.start.conduct }}</a>
+          </div>
+        </div>
+        <div class="width-6-12 width-12-12-m">
+          <h3>{{ pages.developer.milestone.contribute }}</h3>
+          <p>{{ pages.developer.contribute.intro }}</p>
+          <div class="btn-group-vertical" role="group" aria-label="{{ pages.developer.contribute.label }}">
+            <a class="btn btn-primary" href="{{ links.developer.contribute.checklist }}" role="button">{{ pages.developer.contribute.checklist }}</a>
+            <a class="btn btn-primary" href="{{ links.developer.contribute.lifecycle }}" role="button">{{ pages.developer.contribute.lifecycle }}</a>
+          </div>
+        </div>
+        <div class="width-6-12 width-12-12-m">
+          <h3>{{ pages.developer.milestone.test }}</h3>
+          <p>{{ pages.developer.test.intro }}</p>
+          <div class="btn-group-vertical" role="group" aria-label="{{ pages.developer.test.label }}">
+            <a class="btn btn-primary" href="{{ links.developer.test.learn }}" role="button">{{ pages.developer.test.learn }}</a>
+            <a class="btn btn-primary" href="{{ links.developer.test.run }}" role="button">{{ pages.developer.test.run }}</a>
+            <a class="btn btn-primary" href="{{ links.developer.test.integration }}" role="button">{{ pages.developer.test.integration }}</a>
+            <a class="btn btn-primary" href="{{ links.developer.test.unit }}" role="button">{{ pages.developer.test.unit }}</a>
+          </div>
+        </div>
+        <div class="width-6-12 width-12-12-m">
+          <h3>{{ pages.developer.milestone.create_collection }}</h3>
+          <p>{{ pages.developer.create_collection.intro }}</p>
+          <div class="btn-group-vertical" role="group" aria-label="{{ pages.developer.create_collection.label }}">
+            <a class="btn btn-primary" href="{{ links.developer.create_collection.skeleton }}" role="button">{{ pages.developer.create_collection.skeleton }}</a>
+            <a class="btn btn-primary" href="{{ links.developer.create_collection.test }}" role="button">{{ pages.developer.create_collection.test }}</a>
+            <a class="btn btn-primary" href="{{ links.developer.create_collection.distribute }}" role="button">{{ pages.developer.create_collection.distribute }}</a>
+            <a class="btn btn-primary" href="{{ links.developer.create_collection.request_inclusion }}" role="button">{{ pages.developer.create_collection.request_inclusion }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endblock %}