feat: add GPT Homepage and Details Page

.gitignore

@@ -31,3 +31,6 @@ yarn-error.log*
 
 # turbo
 .turbo
+
+# vscode
+.vscode

.prettierignore

@@ -2,3 +2,6 @@
 **/dist
 **/.docusaurus
 pnpm-lock.yaml
+
+/apps/website/src/pages/plugins/**/index.mdx
+/apps/website/src/pages/gpts/**/index.mdx

apps/website/.gitignore

@@ -21,3 +21,5 @@ yarn-error.log*
 
 /src/pages/plugins
 !/src/pages/plugins.tsx
+/src/pages/gpts
+!/src/pages/gpts.tsx

apps/website/content/gpts-list.js

@@ -0,0 +1,93 @@
+/**
+ * Copyright 2023 Janus Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @type {import('ui/types').GPT[]} */
+const GPT_LIST = [
+  {
+    title: 'Ansible Job',
+    description: 'Launch an Ansible Job within Ansible Automation Platform',
+    href: 'gpts/ansible-job',
+    githubUrl:
+      'https://raw.githubusercontent.com/janus-idp/software-templates/main/scaffolder-templates/ansible-job/README.md',
+    sourceUrl:
+      'https://github.com/janus-idp/software-templates/tree/main/scaffolder-templates/ansible-job',
+  },
+  {
+    title: 'Add ArgoCD to an existing project',
+    description: 'Add ArgoCD to an existing project',
+    href: 'gpts/argocd',
+    githubUrl:
+      'https://raw.githubusercontent.com/janus-idp/software-templates/main/scaffolder-templates/argocd-template/README.md',
+    sourceUrl:
+      'https://github.com/janus-idp/software-templates/tree/main/scaffolder-templates/argocd-template',
+  },
+  {
+    title: '.NET Frontend application',
+    description: 'Create a starter .NET frontend application with a CI pipeline',
+    href: 'gpts/dotnet-frontend',
+    githubUrl:
+      'https://raw.githubusercontent.com/janus-idp/software-templates/main/scaffolder-templates/dotnet-frontend-template/README.md',
+    sourceUrl:
+      'https://github.com/janus-idp/software-templates/tree/main/scaffolder-templates/dotnet-frontend-template',
+  },
+  {
+    title: 'Go Backend application',
+    description: 'Create a starter Go backend application with a CI pipeline',
+    href: 'gpts/go-backend',
+    githubUrl:
+      'https://raw.githubusercontent.com/janus-idp/software-templates/main/scaffolder-templates/go-backend-template/README.md',
+    sourceUrl:
+      'https://github.com/janus-idp/software-templates/tree/main/scaffolder-templates/go-backend-template',
+  },
+  {
+    title: 'Node.js Backend application',
+    description: 'Create a starter Node.js backend application with a CI pipeline',
+    href: 'gpts/nodejs-backend',
+    githubUrl:
+      'https://raw.githubusercontent.com/janus-idp/software-templates/main/scaffolder-templates/nodejs-backend-template/README.md',
+    sourceUrl:
+      'https://github.com/janus-idp/software-templates/tree/main/scaffolder-templates/nodejs-backend-template',
+  },
+  {
+    title: 'Python Backend application',
+    description: 'Create a starter Python backend application with a CI pipeline',
+    href: 'gpts/python-backend',
+    githubUrl:
+      'https://raw.githubusercontent.com/janus-idp/software-templates/main/scaffolder-templates/python-backend-template/README.md',
+    sourceUrl:
+      'https://github.com/janus-idp/software-templates/tree/main/scaffolder-templates/python-backend-template',
+  },
+  {
+    title: 'Quarkus Backend application',
+    description: 'Create a starter Quarkus Backend application with a CI pipeline',
+    href: `gpts/quarkus-backend`,
+    githubUrl:
+      'https://raw.githubusercontent.com/janus-idp/software-templates/main/scaffolder-templates/quarkus-backend-template/README.md',
+    sourceUrl:
+      'https://github.com/janus-idp/software-templates/tree/main/scaffolder-templates/quarkus-backend-template',
+  },
+  {
+    title: 'Spring Boot Backend application',
+    description: 'Create a starter Spring Boot backend application with a CI pipeline',
+    href: 'gpts/spring-boot-backend',
+    githubUrl:
+      'https://raw.githubusercontent.com/janus-idp/software-templates/main/scaffolder-templates/spring-boot-backend-template/README.md',
+    sourceUrl:
+      'https://github.com/janus-idp/software-templates/tree/main/scaffolder-templates/spring-boot-backend-template',
+  },
+];
+
+module.exports = { GPT_LIST };

apps/website/content/plugin-list.js

@@ -23,7 +23,7 @@ const PLUGINS_LIST = [
     href: '/plugins/3scale',
     githubUrl:
       'https://raw.githubusercontent.com/janus-idp/backstage-plugins/main/plugins/3scale-backend/README.md',
-    npmUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-3scale-backend',
+    sourceUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-3scale-backend',
     category: 'Backend',
   },
   {
@@ -34,7 +34,7 @@ const PLUGINS_LIST = [
     href: '/plugins/keycloak',
     githubUrl:
       'https://raw.githubusercontent.com/janus-idp/backstage-plugins/main/plugins/keycloak-backend/README.md',
-    npmUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-keycloak-backend',
+    sourceUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-keycloak-backend',
     category: 'Backend',
   },
   {
@@ -44,7 +44,7 @@ const PLUGINS_LIST = [
     href: '/plugins/acr',
     githubUrl:
       'https://raw.githubusercontent.com/janus-idp/backstage-plugins/main/plugins/openshift-image-registry/README.md',
-    npmUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-openshift-image-registry',
+    sourceUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-openshift-image-registry',
     category: 'Frontend',
   },
   {
@@ -54,7 +54,7 @@ const PLUGINS_LIST = [
     href: '/plugins/jfrog-artifactory',
     githubUrl:
       'https://raw.githubusercontent.com/janus-idp/backstage-plugins/main/plugins/jfrog-artifactory/README.md',
-    npmUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-jfrog-artifactory',
+    sourceUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-jfrog-artifactory',
     category: 'Frontend',
   },
   {
@@ -64,7 +64,7 @@ const PLUGINS_LIST = [
     href: '/plugins/quay',
     githubUrl:
       'https://raw.githubusercontent.com/janus-idp/backstage-plugins/main/plugins/quay/README.md',
-    npmUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-quay',
+    sourceUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-quay',
     category: 'Frontend',
   },
   {
@@ -74,7 +74,7 @@ const PLUGINS_LIST = [
     href: '/plugins/ocm',
     githubUrl:
       'https://raw.githubusercontent.com/janus-idp/backstage-plugins/main/plugins/ocm/README.md',
-    npmUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-ocm',
+    sourceUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-ocm',
     category: 'Frontend',
   },
   {
@@ -85,7 +85,7 @@ const PLUGINS_LIST = [
     href: '/plugins/topology',
     githubUrl:
       'https://raw.githubusercontent.com/janus-idp/backstage-plugins/main/plugins/topology/README.md',
-    npmUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-topology',
+    sourceUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-topology',
     category: 'Frontend',
   },
   {
@@ -95,9 +95,9 @@ const PLUGINS_LIST = [
     href: '/plugins/tekton',
     githubUrl:
       'https://raw.githubusercontent.com/janus-idp/backstage-plugins/main/plugins/tekton/README.md',
-    npmUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-tekton',
+    sourceUrl: 'https://www.npmjs.com/package/@janus-idp/backstage-plugin-tekton',
     category: 'Frontend',
   },
 ];
 
-module.exports = PLUGINS_LIST;
+module.exports = { PLUGINS_LIST };

apps/website/docusaurus.config.js

@@ -17,8 +17,9 @@
 const lightCodeTheme = require('prism-react-renderer').themes.github;
 const darkCodeTheme = require('prism-react-renderer').themes.vsDark;
 const dotenv = require('dotenv');
-/** @type {import('ui/types').Plugin[]} */
-const PLUGINS_LIST = require('./content/plugin-list');
+const { PLUGINS_LIST } = require('./content/plugin-list');
+const { GPT_LIST } = require('./content/gpts-list');
+const { fetchRemoteContent } = require('./src/lib/utils/fetch-remote-content');
 
 darkCodeTheme.plain.backgroundColor = '#232323';
 
@@ -27,41 +28,6 @@ dotenv.config({ path: `.env.local`, override: true });
 
 const copyright = `Copyright © ${new Date().getFullYear()} Janus -- All Rights Reserved <br> Apache License 2.0 open source project`;
 
-const linkRegex = /!\[([\w .-]+)]\(\.\/([\w ./-]+)\)/gm;
-const remoteContent = PLUGINS_LIST.map((plugin) => {
-  const filenameIndex = plugin.githubUrl.lastIndexOf('/') + 1;
-  const sourceBaseUrl = plugin.githubUrl.slice(0, Math.max(0, filenameIndex));
-  const filename = plugin.githubUrl.slice(Math.max(0, filenameIndex));
-
-  return [
-    'docusaurus-plugin-remote-content',
-    {
-      name: `${plugin.title}-content`,
-      sourceBaseUrl,
-      outDir: `src/pages/${plugin.href}`,
-      documents: [filename],
-      modifyContent: (fname, content) => {
-        if (fname.includes('README')) {
-          return {
-            filename: 'index.mdx',
-            content: `---
-title: ${plugin.title}
-description: ${plugin.description}
----
-import { PluginHeader } from 'ui/components';
-
-<PluginHeader plugin={{${Object.entries(plugin)
-              .map(([key, value]) => `${key}:"${value}"`)
-              .join(',')}}} />
-
-${content.replaceAll(linkRegex, `![$1](${sourceBaseUrl}$2)`)}`,
-          };
-        }
-      },
-    },
-  ];
-});
-
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Janus',
@@ -139,6 +105,7 @@ const config = {
           { to: '/blog', label: 'Blog', position: 'left' },
           { to: '/community', label: 'Community', position: 'left' },
           { to: '/plugins', label: 'Plugins', position: 'left' },
+          { to: '/gpts', label: 'GPTs', position: 'left' },
           {
             href: 'https://showcase.janus-idp.io/',
             label: 'Showcase',
@@ -232,7 +199,11 @@ const config = {
       },
     }),
 
-  plugins: ['docusaurus-plugin-tailwind', ...remoteContent],
+  plugins: [
+    'docusaurus-plugin-tailwind',
+    ...fetchRemoteContent(PLUGINS_LIST, 'PluginHeader'),
+    ...fetchRemoteContent(GPT_LIST, 'GPTHeader'),
+  ],
 };
 
 module.exports = config;

apps/website/src/lib/utils/fetch-remote-content.js

@@ -0,0 +1,61 @@
+/**
+ * Copyright 2023 Janus Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const linkRegex = /!\[([\w .-]+)]\(\.\/([\w ./-]+)\)/gm;
+
+/**
+ * @param {import('ui/types').RemoteContent[]} remoteContent
+ * @param {string} component
+ *
+ * @returns {import('ui/types').DocusaurusRemoteContent[]}
+ */
+function fetchRemoteContent(remoteContent, component) {
+  return remoteContent.map((plugin) => {
+    const filenameIndex = plugin.githubUrl.lastIndexOf('/') + 1;
+    const sourceBaseUrl = plugin.githubUrl.slice(0, Math.max(0, filenameIndex));
+    const filename = plugin.githubUrl.slice(Math.max(0, filenameIndex));
+
+    return [
+      'docusaurus-plugin-remote-content',
+      {
+        name: `${plugin.title}-content`,
+        sourceBaseUrl,
+        outDir: `src/pages/${plugin.href}`,
+        documents: [filename],
+        modifyContent: (fname, content) => {
+          if (fname.includes('README')) {
+            return {
+              filename: 'index.mdx',
+              content: `---
+title: ${plugin.title}
+description: ${plugin.description}
+---
+import { ${component} } from 'ui/components';
+
+<${component} remoteContent={{${Object.entries(plugin)
+                .map(([key, value]) => `${key}:"${value}"`)
+                .join(',')}}} />
+
+${content.replaceAll(linkRegex, `![$1](${sourceBaseUrl}$2)`)}`,
+            };
+          }
+        },
+      },
+    ];
+  });
+}
+
+module.exports = { fetchRemoteContent };

apps/website/src/pages/gpts.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright 2023 Janus Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Link from '@docusaurus/Link';
+import { GPT_LIST } from '@site/content/gpts-list';
+import Layout from '@theme/Layout';
+import Fuse from 'fuse.js';
+import React from 'react';
+import { GPTsGrid } from 'ui/components';
+import { GPT } from 'ui/types';
+
+const GPT_FUSE = new Fuse(GPT_LIST as GPT[], {
+  threshold: 0.25,
+  ignoreLocation: true,
+  keys: [{ name: 'title', weight: 2 }, 'description'],
+});
+
+function GPTsHeader(): JSX.Element {
+  return (
+    <header className="hero hero--primary relative overflow-hidden px-0 py-16 text-center">
+      <div className="container">
+        <h1 className="hero__title">Janus Golden Path Templates</h1>
+        <p className="hero__subtitle">Have a GPT idea?</p>
+        <div className="flex items-center justify-center">
+          <Link
+            className="button button--secondary button--lg"
+            to="https://github.com/janus-idp/software-templates/issues/new?assignees=&labels=template&projects=&template=gpts.yaml&title=GPT%3A+"
+          >
+            Submit a proposal for a GPT!
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Plugins(): JSX.Element {
+  return (
+    <Layout title="GPTs" description="Description will go into a meta tag in <head />">
+      <GPTsHeader />
+      <main>
+        <GPTsGrid GPT_FUSE={GPT_FUSE} GPT_LIST={GPT_LIST as GPT[]} />
+      </main>
+    </Layout>
+  );
+}