Enhance example documented-component

Signed-off-by: Adam Harvey <adam.harvey@dxc.com>

.changeset/techdocs-kind-seals-fix.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs-backend': patch
+---
+
+Enhanced the example documented-component to better demonstrate TechDocs features

plugins/techdocs-backend/examples/documented-component/docs/code/code-sample.md

@@ -0,0 +1,22 @@
+# Sample Code
+
+This page provides some sample code which may be used in your example component.
+
+This code uses TypeScript, and the Markdown code fence to wrap the code.
+
+```tsx
+const DefaultEntityPage = ({ entity }: { entity: Entity }) => (
+  <EntityPageLayout>
+    <EntityPageLayout.Content
+      path="/*"
+      title="Overview"
+      element={<ComponentOverviewContent entity={entity} />}
+    />
+    <EntityPageLayout.Content
+      path="/docs/*"
+      title="Docs"
+      element={<DocsRouter entity={entity} />}
+    />
+  </EntityPageLayout>
+);
+```

plugins/techdocs-backend/examples/documented-component/docs/index.md

@@ -1,3 +1,30 @@
-# example docs
+# Welcome!
 
 This is a basic example of documentation.
+
+Here is a bulleted list:
+
+- Item one
+- Item two
+- Item Three
+
+Check out the [Markdown Guide](https://www.markdownguide.org/) to learn more about how to simply create documentation.
+
+You can also learn more about how to configure and setup this documentation in Backstage,
+[read up on the TechDocs Overview](https://backstage.io/docs/features/techdocs/techdocs-overview).
+
+## Image Example
+
+This documentation is powered by Backstage's TechDocs feature:
+
+![Backstage Logo](images/backstage-logo-cncf.svg)
+
+## Table Example
+
+While this documentation isn't comprehensive, in the future it should cover the following topics outlined in this example table:
+
+| Topic   | Description                                                  |
+| ------- | ------------------------------------------------------------ |
+| Topic 1 | An introductory topic to help you learn about the topic.     |
+| Topic 2 | A more detailed topic that explains more information.        |
+| Topic 3 | A final topic that provides conclusions and lessons learned. |

plugins/techdocs-backend/examples/documented-component/docs/sub-page.md

@@ -1 +1,11 @@
 # Another page in our documentation
+
+This sub-page can be used to elaborate on a specific part of the component.
+
+## Details
+
+It is linked off the main page, and due to it's inclusion in the `mkdocs.yml` file, becomes part of the auto-generated site navigation.
+
+## MkDocs
+
+Visit https://www.mkdocs.org for more information about the MkDocs tool.

plugins/techdocs-backend/examples/documented-component/mkdocs.yml

@@ -1,8 +1,9 @@
-site_name: 'example-docs'
+site_name: 'Example Documentation'
 
 nav:
   - Home: index.md
-  - SubPage: sub-page.md
+  - Subpage: sub-page.md
+  - 'Code Sample': code/code-sample.md
 
 plugins:
   - techdocs-core