Index pages

docs/assets/stylesheets/extra.css

@@ -0,0 +1,118 @@
+/**
+ * Example information
+ */
+
+.md-typeset .author {
+    text-align: right;
+}
+
+/**
+ * Tag filters
+ */
+.md-typeset .filters {
+    background-color: lightgray;
+}
+
+.md-typeset .tagcheck {
+    display: none;
+}
+
+.md-typeset .taglabel {
+    background: var(--md-primary-fg-color);
+    border-radius: 10px;
+    padding-left: 5px;
+    padding-right: 5px;
+    color: white;
+    font-size: .64rem;
+}
+
+.md-typeset .taglist {
+    float:right;
+    padding-left:1em;
+}
+
+.md-typeset input:not(:checked) + .taglabel {
+    background: #909090;
+}
+
+/** First row: Materials version and integration **/
+
+#public:not(:checked) ~ .example[data-tags~="public"]{
+    display:none;
+}
+
+#insiders:not(:checked) ~ .example[data-tags~="insiders"]{
+    display:none;
+}
+
+#integration:not(:checked) ~ .example[data-tags~="integration"]{
+    display:none;
+}
+
+/** Second row: functionality */
+
+#colors:not(:checked) ~ .example[data-tags~="colors"]{
+    display:none;
+}
+
+#fonts:not(:checked) ~ .example[data-tags~="fonts"]{
+    display:none;
+}
+
+#icons:not(:checked) ~ .example[data-tags~="icons"]{
+    display:none;
+}
+
+#page_status:not(:checked) ~ .example[data-tags~="page_status"]{
+    display:none;
+}
+
+/** Third row: plugin */
+
+#blog:not(:checked) ~ .example[data-tags~="blog"]{
+    display:none;
+}
+
+#group:not(:checked) ~ .example[data-tags~="group"]{
+    display:none;
+}
+
+#info:not(:checked) ~ .example[data-tags~="info"]{
+    display:none;
+}
+
+#meta:not(:checked) ~ .example[data-tags~="meta"]{
+    display:none;
+}
+
+#offline:not(:checked) ~ .example[data-tags~="offline"]{
+    display:none;
+}
+
+#optimize:not(:checked) ~ .example[data-tags~="optimize"]{
+    display:none;
+}
+
+#privacy:not(:checked) ~ .example[data-tags~="privacy"]{
+    display:none;
+}
+
+#projects:not(:checked) ~ .example[data-tags~="projects"]{
+    display:none;
+}
+
+#search:not(:checked) ~ .example[data-tags~="search"]{
+    display:none;
+}
+
+#social:not(:checked) ~ .example[data-tags~="social"]{
+    display:none;
+}
+
+#tags:not(:checked) ~ .example[data-tags~="tags"] {
+    display: none;
+}
+
+#typeset:not(:checked) ~ .example[data-tags~="typeset"] {
+    display: none;
+}

docs/index.md

@@ -1,10 +1,25 @@
+---
+template: exampleindex.html
+---
 # Examples
 
-This project lists all options that are supported by Material for MkDocs and
-can be used as a basis for new projects or reproductions. Note that some options
-might currently be reserved for [sponsors]. Check the list of [available features]
-to be sure.
+The examples in this repository augment the documentation of Material for 
+MkDocs by providing worked examples of the functionality it provides. There
+are also extended examples showing common integrations with third-party plugins 
+or that demonstrate specific use cases.
+
+Our aim is to cover all the options that are supported by Material for MkDocs 
+so that the examples can be used as a basis for new projects or [reproductions]. 
+
+Note that some options might currently be reserved for [sponsors]. We aim to 
+indicate this in the tags that are displayed with each examples but please
+check the list of [available features] to be sure.
 
   [sponsors]: https://squidfunk.github.io/mkdocs-material/insiders/
   [available features]: https://squidfunk.github.io/mkdocs-material/insiders/#whats-in-for-me
+  [reproductions]: https://squidfunk.github.io/mkdocs-material/guides/creating-a-reproduction/
 
+Use the filters below to choose which examples should be shown. For an example
+to show, the filters matching *all* of its tags need to be selected. Note that
+some examples have addtional tags that do not show in the filters - these are 
+not used in filtering.

examples/blog-basic/docs/README.md

@@ -1,8 +1,17 @@
-# Adding a blog to your site
+---
+tags:
+    - public
+    - blog
+authors:
+  alexvoss:
+    name: Alex Voss
+    description: Collaborator
+    ghuser: alexvoss
+---
 
-This example shows how to add a [blog] to your site. 
+# Adding a blog to your site
 
-It shows how to:
+This example shows how to add a [blog] to your site. It shows how to:
 
 - configure the `mkdocs.yml` to activate and configure the plugin 
 - set up a directory structure in your `docs/` folder

examples/blog-rss/docs/README.md

@@ -1,3 +1,14 @@
+---
+tags:
+  - public
+  - blog
+  - integration
+authors:
+  alexvoss:
+    name: Alex Voss
+    description: Collaborator
+    ghuser: alexvoss
+---
 # Adding an RSS feed to a blog
 
 This example shows how to [add an RSS feed to a blog]. You should be

examples/blog-update/docs/README.md

@@ -1,3 +1,15 @@
+---
+name: Blog that shows post updates 
+tags:
+  - public
+  - blog
+  - customization
+authors:
+  alexvoss:
+    name: Alex Voss
+    description: Collaborator
+    ghuser: alexvoss
+---
 # A blog with update dates shown
 
 This example shows how to add a small customization that will show

examples/color-palette-system-preference/docs/README.md

@@ -1,3 +1,8 @@
+---
+tags: 
+  - colors
+  - public
+---
 # Using the color palette system preference
 
 This example shows how to implement the [color palette toggle] so that it

examples/color-palette-toggle/docs/README.md

@@ -1,3 +1,9 @@
+---
+tags:
+  - colors
+  - public
+---
+
 # Using the color palette toggle
 
 This example shows how to implement the [color palette toggle] to let users switch

examples/cookie-consent/docs/README.md

@@ -1,3 +1,8 @@
+---
+tags:
+  - privacy
+  - insiders
+---
 # Adding a cookie consent 
 
 This example shows how to add a [cookie consent]. [Click here] to bring

examples/custom-colors/docs/README.md

@@ -1,3 +1,8 @@
+---
+tags:
+  - colors
+  - public
+---
 # Using custom colors
 
 This example shows how to set [custom colors] with [additional CSS].

examples/custom-cookies/docs/README.md

@@ -1,3 +1,8 @@
+---
+tags:
+  - insiders
+  - privacy
+---
 # Adding a custom cookie
 
 This example shows how to add a [custom cookie] to the [cookie consent] and

examples/fonts-builtin/docs/README.md

@@ -1,3 +1,14 @@
+---
+tags:
+  - public
+  - fonts
+authors:
+  alexvoss:
+    name: Alex Voss
+    description: Collaborator
+    ghuser: alexvoss
+---
+
 # Using built-in browser fonts
 
 This example shows what happens when auto-loading of fonts from Google

examples/fonts-custom/.example.yml

@@ -0,0 +1,11 @@
+example:
+  name: Using a custom font
+  tags:
+    - public        # works without Insiders
+    - fonts         # functionality demonstrated
+    - simple        # uses only Material functionality
+  authors:
+    alexvoss:
+      name: Alex Voss
+      description: Collaborator
+      ghuser: alexvoss

examples/fonts-custom/docs/README.md

@@ -1,3 +1,13 @@
+---
+tags:
+  - public
+  - fonts
+authors:
+  alexvoss:
+    name: Alex Voss
+    description: Collaborator
+    ghuser: alexvoss
+---
 # Using a custom font
 
 This example uses the Noto Serif and Noto Mono font families to show

examples/page-status/docs/README.md

@@ -1,3 +1,8 @@
+---
+tags: 
+  - public
+  - "page_status"
+---
 # Using page status
 
 This example shows how to add a [page status] to a page. This works for section

examples/tags-with-icons/docs/README.md

@@ -1,3 +1,8 @@
+---
+tags:
+  - public
+  - tags
+---
 # Using tags with icons
 
 This example shows how to use [tags with icons] and includes the following pages:

examples/tags/docs/README.md

@@ -1,3 +1,8 @@
+---
+tags: 
+  - public
+  - tags
+---
 # Using tags
 
 This example shows how to use [tags] and includes the following pages: