docs: describe how to add content to Examples to page (#871)

* docs: how to add examples to page

* chore: address feedback PR

Co-authored-by: Tom Papiernik <[email protected]>

* fix: examples language logos

* fix: add missing logos

* fix: logos example page

* docs: language options example page

Co-authored-by: Tom Papiernik <[email protected]>

Author: vinckr

README.md

@@ -169,6 +169,29 @@ Locally:
 
 ## How-To
 
+### Add content to example page
+
+[The example page](https://www.ory.sh/docs/examples) provides an overview of Ory examples.
+Add a new example or modify existing entries:
+
+- Open `examples-content.tsx` under the path `docs/src/pages/_assets/`
+- Copy the following snippet and append it in the correct array (either official, community or self-hosting examples):
+
+```tsx
+{
+      title: 'Protect a Page with Login: NextJs/React', //Your example title goes here
+      language: 'typescript',                           //The main programming language of your example
+      author: 'ory',                                    //The author's GitHub handle
+      tested: true,                                     //Is the example in ory/examples or ory/docs and has automated tests?
+      repo: 'https://github.com/ory/docs/tree/master/code-examples/protect-page-login/nextjs', //The repo containing the example code
+      docs: 'https://www.ory.sh/docs/guides/protect-page-login/next.js'                        //Documentation for the example, can be README, blog article or similar
+    },
+```
+
+- `language` can be one of: dart, django, docker, erlang, flutter, go, java, javascript, kotlin, kubernetes, nextjs, nodejs, ory, php, python, react, rescript, svelte, typescript, vue
+
+- Open a pull request with your changes.
+
 ### Links to other pages
 
 If you would add a link to an outside resource, just go ahead.

src/pages/_assets/examples-content.tsx

@@ -8,17 +8,15 @@ export const official: PropTypes = {
   examples: [
     {
       title: 'Protect a Page with Login: Next.js/React',
-      language: 'javascript',
-      // framework: 'Next.js/React',
+      language: 'nextjs',
       author: 'ory',
       tested: true,
       repo: 'https://github.com/ory/docs/tree/master/code-examples/protect-page-login/nextjs',
       docs: 'https://www.ory.sh/docs/guides/protect-page-login/next.js'
     },
     {
       title: 'Protect a Page with Login: Express.js',
-      language: 'javascript',
-      // framework: 'Express.js',
+      language: 'typescript',
       author: 'ory',
       tested: true,
       repo: 'https://github.com/ory/docs/tree/master/code-examples/protect-page-login/expressjs',
@@ -27,7 +25,6 @@ export const official: PropTypes = {
     {
       title: 'Protect a Page with Login: Go',
       language: 'go',
-      // framework: 'Vanilla',
       author: 'ory',
       tested: true,
       repo: 'https://github.com/ory/docs/tree/master/code-examples/protect-page-login/go',
@@ -36,34 +33,30 @@ export const official: PropTypes = {
     {
       title: 'Protect a Page with Login: PHP',
       language: 'php',
-      // framework: 'Vanilla',
       author: 'ory',
       tested: true,
       repo: 'https://github.com/ory/docs/tree/master/code-examples/protect-page-login/php',
       docs: 'https://www.ory.sh/docs/guides/protect-page-login/php'
     },
     {
       title: 'Protect a Page with Login: Vue.js',
-      language: 'javascript',
-      // framework: 'Vanilla',
+      language: 'vue',
       author: 'ory',
       tested: true,
       repo: 'https://github.com/ory/docs/tree/master/code-examples/protect-page-login/vue',
       docs: 'https://www.ory.sh/docs/guides/protect-page-login/vue'
     },
     {
       title: 'Protect a Page with Login: Flutter',
-      language: 'dart',
-      // framework: 'Flutter',
+      language: 'flutter',
       author: 'ory',
       tested: true,
       repo: 'https://github.com/ory/docs/tree/master/code-examples/protect-page-login/flutter_web_redirect',
       docs: 'https://www.ory.sh/docs/guides/protect-page-login/-web-redirect'
     },
     {
       title: 'Protect a Page with Login: Django',
-      language: 'python',
-      // framework: 'Django',
+      language: 'django',
       author: 'ory',
       tested: true,
       repo: 'https://github.com/ory/examples/tree/master/django-ory-cloud',
@@ -72,34 +65,30 @@ export const official: PropTypes = {
     {
       title: 'Protect a Page with Login: Flask',
       language: 'python',
-      // framework: 'Flask',
       author: 'ory',
       tested: true,
       repo: 'https://github.com/ory/examples/tree/master/kratos-keto-flask',
       docs: 'https://www.ory.sh/securing-flask-application-using-kratos-and-keto/'
     },
     {
       title: 'Customize Self-service UI: Node.js',
-      language: 'typescript',
-      // framework: 'Node.js',
+      language: 'nodejs',
       author: 'ory',
       tested: true,
       repo: 'https://github.com/ory/kratos-selfservice-ui-node',
       docs: 'https://github.com/ory/kratos-selfservice-ui-node/blob/master/README.md'
     },
     {
       title: 'Customize Self-service UI: Next.js/React',
-      language: 'typescript',
-      // framework: 'Next.js/React',
+      language: 'nextjs',
       author: 'ory',
       tested: true,
       repo: 'https://github.com/ory/kratos-nextjs-react-example',
       docs: 'https://www.ory.sh/nextjs-authentication-spa-custom-flows-open-source/'
     },
     {
       title: 'Customize Self-service UI: React Native',
-      language: 'typescript',
-      // framework: 'React Native',
+      language: 'react',
       author: 'ory',
       tested: false,
       repo: 'https://github.com/ory/kratos-selfservice-ui-react-native',
@@ -108,7 +97,6 @@ export const official: PropTypes = {
     {
       title: 'Ory Cloud with Supabase Backend',
       language: 'go',
-      // framework: 'Go',
       author: 'ory',
       tested: false,
       repo: 'https://github.com/ory/examples/tree/master/supabase-ory-cloud',
@@ -125,44 +113,39 @@ export const community: PropTypes = {
   examples: [
     {
       title: 'Customize Self-service UI: Flutter',
-      language: 'dart',
-      // framework: 'Flutter',
+      language: 'flutter',
       author: 'amorevino',
       tested: false,
       repo: 'https://github.com/amorevino/ory-showcase-apps',
       docs: 'https://www.ory.sh/cloud-ecommerce-frontend/'
     },
     {
       title: 'Customize Self-service UI: Flutter Web',
-      language: 'dart',
-      // framework: 'Flutter Web',
+      language: 'flutter',
       author: 'IGLU-Agency',
       tested: false,
       repo: 'https://github.com/IGLU-Agency/iglu-ory-kratos-example',
       docs: 'https://www.ory.sh/login-flutter-authentication-example-api-open-source/'
     },
     {
       title: 'Protect a Page with Login: Kotlin',
-      language: 'java',
-      // framework: 'Quarkus',
+      language: 'quarkus',
       author: 'hbrammer',
       tested: false,
       repo: 'https://github.com/hbrammer/quarkus_kratos_example',
       docs: 'https://hauke.me/writing/2021-03-building-a-quarkus-application-with-ory-kratos/'
     },
     {
       title: 'Customize Self-service UI: Vue.js',
-      language: 'typescript',
-      // framework: 'Vue.js',
+      language: 'vue',
       author: 'timalanfarrow',
       tested: false,
       repo: 'https://github.com/timalanfarrow/kratos-selfservice-ui-vue3-typescript',
       docs: 'https://github.com/timalanfarrow/kratos-selfservice-ui-vue3-typescript/blob/main/README.md'
     },
     {
       title: 'Customize Self-service UI: NextJs',
-      language: 'typescript',
-      // framework: 'NextJs',
+      language: 'nextjs',
       author: 'spa5k',
       tested: false,
       repo: 'https://github.com/spa5k/kratos-next',
@@ -171,7 +154,6 @@ export const community: PropTypes = {
     {
       title: 'Customize Self-service UI: Erlang',
       language: 'erlang',
-      // framework: 'Rebar3',
       author: 'hrefhref',
       tested: false,
       repo: 'https://github.com/hrefhref/styx',
@@ -180,34 +162,30 @@ export const community: PropTypes = {
     {
       title: 'Customize Self-service UI: Rescript',
       language: 'rescript',
-      // framework: 'React',
       author: 'allancalix',
       tested: false,
       repo: 'https://github.com/allancalix/kratos-ui',
       docs: 'https://github.com/allancalix/kratos-ui/blob/main/README.md'
     },
     {
-      title: 'Customize Self-service UI: Sveltekit',
-      language: 'javascript',
-      // framework: 'Sveltekit',
+      title: 'Customize Self-service UI: Svelte',
+      language: 'svelte',
       author: 'micleyman',
       tested: true,
       repo: 'https://github.com/micleyman/sveltekit-ory-starter',
       docs: 'https://github.com/micleyman/sveltekit-ory-starter/blob/main/README.md'
     },
     {
-      title: 'Customize Self-service UI: Sveltekit',
-      language: 'javascript',
-      // framework: 'Sveltekit',
+      title: 'Customize Self-service UI: Svelte',
+      language: 'svelte',
       author: 'drejohnson',
       tested: false,
       repo: 'https://github.com/drejohnson/sveltekit-kratos',
       docs: 'https://github.com/drejohnson/sveltekit-kratos/blob/main/README.md'
     },
     {
-      title: 'Customize Self-service UI: Sveltekit',
-      language: 'javascript',
-      // framework: 'Sveltekit',
+      title: 'Customize Self-service UI: Svelte',
+      language: 'svelte',
       author: 'emrahcom',
       tested: false,
       repo: 'https://github.com/emrahcom/kratos-selfservice-svelte-node',
@@ -225,7 +203,6 @@ export const selfhosted: PropTypes = {
     {
       title: 'API Gateway using Kong, Ory Kratos & Ory Oathkeeper',
       language: 'ory',
-      // framework: 'Kong',
       author: 'ory',
       tested: false,
       repo: 'https://github.com/ory/examples/tree/master/kratos-oathkeeper-kong',
@@ -234,7 +211,6 @@ export const selfhosted: PropTypes = {
     {
       title: 'Ory Oathkeeper Configurations',
       language: 'ory',
-      // framework: 'Ory Oathkeeper',
       author: 'ory',
       tested: false,
       repo: 'https://github.com/ory/examples/tree/master/oathkeeper',
@@ -243,7 +219,6 @@ export const selfhosted: PropTypes = {
     {
       title: 'Ory Hydra Nginx Configurations',
       language: 'ory',
-      // framework: 'Ory Hydra',
       author: 'ory',
       tested: false,
       repo: 'https://github.com/ory/examples/tree/master/hydra-nginx',
@@ -252,43 +227,38 @@ export const selfhosted: PropTypes = {
     {
       title: 'Ory Kratos Nginx Configurations',
       language: 'ory',
-      // framework: 'Ory Oathkeeper',
       author: 'ory',
       tested: false,
       repo: 'https://github.com/ory/examples/tree/master/kratos-nginx',
       docs: 'https://github.com/ory/examples/blob/master/kratos-nginx/README.md'
     },
     {
       title: 'Basic Admin UI for Ory Kratos',
-      language: 'javascript',
-      // framework: 'Ory Kratos',
+      language: 'react',
       author: 'dfoxg',
       tested: false,
       repo: 'https://github.com/dfoxg/kratos-admin-ui',
       docs: 'https://github.com/dfoxg/kratos-admin-ui/blob/main/README.md'
     },
     {
       title: 'SSO and ACL Ory Stack',
-      language: 'javascript',
-      // framework: 'Ory Stack',
+      language: 'kubernetes',
       author: 'pngouin',
       tested: false,
       repo: 'https://github.com/pngouin/k8s-ory-example',
       docs: 'https://github.com/pngouin/k8s-ory-example/blob/main/README.md'
     },
     {
       title: ' Reference Ory Stack Docker Compose',
-      language: 'ory',
-      // framework: 'Ory Stack',
+      language: 'docker',
       author: 'radekg',
       tested: false,
       repo: 'https://github.com/radekg/ory-reference-compose',
       docs: 'https://github.com/radekg/ory-reference-compose/blob/master/README.md'
     },
     {
       title: 'Ory Kratos with Supabase Backend',
-      language: 'Go',
-      // framework: 'Go',
+      language: 'go',
       author: 'ory',
       tested: false,
       repo: 'https://github.com/ory/examples/tree/master/kratos-keto-oathkeeper-supabase',