Prep for release.

.env

@@ -0,0 +1 @@
+PROJECT_UPDATE_URL_BASE=https://ecosystem.khronos.org/update/

.github/workflows/ci.yaml

@@ -26,9 +26,3 @@ jobs:
         run: yarn
       - name: Build
         run: yarn build
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
-        if: ${{ github.ref == 'refs/heads/main' }}
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build

package.json

@@ -2,7 +2,7 @@
   "name": "project-explorer",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://github.khronos.org/glTF-Project-Explorer",
+  "homepage": "https://ecosystem.khronos.org/wp-content/plugins/glTF-project-explorer/",
   "dependencies": {
     "@types/dompurify": "^2.3.3",
     "@types/flexsearch": "^0.7.2",
@@ -18,7 +18,6 @@
     "marked": "^4.0.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-github-fork-ribbon": "^0.6.0",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",

public/data/glTF-projects-data.json

@@ -1372,8 +1372,7 @@
   "link" : "https://github.com/BabylonJS/Babylon.js/tree/master/packages/dev/loaders/src/glTF",
   "task" : [ "import", "view" ],
   "type" : [ "engine" ],
-  "inputs" : [ "glTF 2.0" ],
-  "tags" : [ "Staff Picks" ]
+  "inputs" : [ "glTF 2.0" ]
 }, {
   "name" : "OSG.JS glTF loader",
   "description" : "WebGL engine",
@@ -1541,7 +1540,7 @@
   "name" : "Microsoft.glTF.CPP",
   "description" : "A C++ library for serializing and deserializing gltf/glb files.",
   "link" : "https://github.com/microsoft/glTF-SDK",
-  "language" : [ "2.0" ],
+  "language" : [ "C++" ],
   "inputs" : [ "glTF 2.0" ]
 }, {
   "name" : "Qt 3D",
@@ -2108,47 +2107,47 @@
   "link" : "https://prototechsolutions.com/3d-products/inventor/gltf-exporter/",
   "task" : [ "export" ],
   "type" : [ "plugin", "sdk" ],
-  "language" : [ "c#" ],
+  "language" : [ "C#" ],
   "outputs" : [ "glTF 2.0" ]
 }, {
   "name" : "ProtoTech glTF Exporter For Fusion 360",
   "description" : "Export Fusion 360 model to GLTF and GLB files",
   "link" : "https://prototechsolutions.com/3d-products/fusion-360/gltf-exporter/",
   "task" : [ "export" ],
   "type" : [ "plugin", "sdk" ],
-  "language" : [ "c#" ],
+  "language" : [ "C#" ],
   "outputs" : [ "glTF 2.0" ]
 }, {
   "name" : "ProtoTech glTF Exporter For Revit",
   "description" : "Export Revit design to GLTF and GLB files",
   "link" : "https://prototechsolutions.com/3d-products/revit/gltf-exporter/",
    "task" : [ "export" ],
   "type" : [ "plugin", "sdk" ],
-  "language" : [ "c#" ],
+  "language" : [ "C#" ],
   "outputs" : [ "glTF 2.0" ]
 }, {
   "name" : "ProtoTech glTF Exporter For SolidEdge",
   "description" : "Export SolidEdge model to GLTF and GLB files",
   "link" : "https://prototechsolutions.com/3d-products/solidedge/gltf-exporter/",
   "task" : [ "export" ],
   "type" : [ "plugin", "sdk" ],
-  "language" : [ "c#" ],
+  "language" : [ "C#" ],
   "outputs" : [ "glTF 2.0" ]
  }, {
   "name" : "ProtoTech glTF Exporter For SolidWorks",
   "description" : "Export Solidworks model to GLTF and GLB files",
   "link" : "https://prototechsolutions.com/3d-products/solidworks/gltf-exporter/",
   "task" : [ "export" ],
   "type" : [ "plugin", "sdk" ],
-  "language" : [ "c#" ],
+  "language" : [ "C#" ],
   "outputs" : [ "glTF 2.0" ]
 }, {
   "name" : "F3D",
   "description" : "A fast and minimalist 3D viewer",
   "link" : "https://f3d-app.github.io/f3d/",
   "task" : [ "view" ],
   "type" : [ "application" ],
-  "language" : [ "c++" ],
+  "language" : [ "C++" ],
   "inputs" : [ "glTF 2.0" ]
 }, {
   "name": "Cesium for Unreal",

public/data/glTF-projects-metadata.json

@@ -0,0 +1,45 @@
+{
+  "name": {
+    "type": "string",
+    "isArray": false
+  },
+  "link": {
+    "type": "url",
+    "isArray": false
+  },
+  "description": {
+    "type": "markdown",
+    "isArray": false
+  },
+  "tags": {
+    "task": {
+      "type": "string",
+      "isArray": true
+    },
+    "type": {
+      "type": "string",
+      "isArray": true
+    },
+    "license": {
+      "type": "string",
+      "isArray": true
+    },
+    "language": {
+      "type": "string",
+      "isArray": true
+    },
+    "inputs": {
+      "type": "string",
+      "isArray": true
+    },
+    "outputs": {
+      "type": "string",
+      "isArray": true
+    },
+    "tags": {
+      "type": "string",
+      "isArray": true
+    }
+  },
+  "filterTags": ["tags", "task", "type", "language", "license"]
+}

src/App.tsx

@@ -1,7 +1,6 @@
 import ProjectList from "./components/ProjectList";
 import FilterBar from "./components/FilterBar";
 import SearchBar from "./components/SearchBar";
-import GitHubForkRibbon from "react-github-fork-ribbon";
 import { useWindowDimensions } from "./utils/WindowWidthHook";
 
 const App: React.FC = () => {
@@ -18,7 +17,20 @@ const App: React.FC = () => {
           src={`${process.env.PUBLIC_URL}/glTF_RGB_June16.svg`}
           alt="glTF"
         />
-        <h1 className="pl-2">Project Explorer</h1>
+        <h1 className="flex-1 pl-2">Project Explorer</h1>
+        <a
+          className="bg-white font-semibold visited:bg-white focus:bg-white active:bg-white hover:bg-gltf-green hover:text-white py-2 px-4 mx-4 border border-slate-300 hover:border-transparent rounded"
+          href="https://ecosystem.khronos.org/submit/"
+        >
+          Submit New Project
+        </a>
+        <a href="https://www.github.com/KhronosGroup/glTF-Project-Explorer">
+          <img
+            className="h-10"
+            src={`${process.env.PUBLIC_URL}/github-mark-white.svg`}
+            alt="GitHub"
+          />
+        </a>
       </div>
       <div className="grid grid-cols-1 grid-rows-1 lg:grid-cols-3 xl:grid-cols-4">
         <div className="col-auto h-fit">
@@ -29,13 +41,6 @@ const App: React.FC = () => {
           <ProjectList></ProjectList>
         </div>
       </div>
-      <GitHubForkRibbon
-        position="right"
-        color="white"
-        href="https://github.com/KhronosGroup/glTF-Project-Explorer"
-      >
-        Fork us on GitHub
-      </GitHubForkRibbon>
     </div>
   );
 };

src/components/FilterBar.tsx

@@ -6,7 +6,6 @@ import { updateSelectedFilters } from "../store/filters/Actions";
 import FilterBarOptions from "./FilterBarOptions";
 import "./FilterBar.css";
 import FilterBarSelected from "./FilterBarSelected";
-import { ProjectFilterProperties } from "../interfaces/IProjectInfo";
 
 interface IFilterBarOwnProps {
   allowCollapse: boolean;
@@ -44,7 +43,7 @@ const FilterBar: React.FC<IFilterBarProps> = (props) => {
   const handleFilterAddClick = useCallback(
     (filter: IFilter) => (_: React.MouseEvent) => {
       selectedFilters.add(filter);
-      const options = filterOptions.get(filter.propertyName);
+      const options = filterOptions.get(filter.tagName);
       if (options) {
         const index = options.indexOf(filter);
         options.splice(index, 1);
@@ -57,7 +56,7 @@ const FilterBar: React.FC<IFilterBarProps> = (props) => {
   const handleFilterRemoveClick = useCallback(
     (filter: IFilter) => (_: React.MouseEvent) => {
       selectedFilters.delete(filter);
-      const options = filterOptions.get(filter.propertyName);
+      const options = filterOptions.get(filter.tagName);
       if (options) {
         options.push(filter);
         options.sort((f0, f1) => f0.value.localeCompare(f1.value));
@@ -70,7 +69,7 @@ const FilterBar: React.FC<IFilterBarProps> = (props) => {
   const handleFilterResetClick = useCallback(
     (_) => {
       for (const filter of selectedFilters) {
-        const options = filterOptions.get(filter.propertyName);
+        const options = filterOptions.get(filter.tagName);
         if (options) {
           options.push(filter);
         }
@@ -106,7 +105,7 @@ const FilterBar: React.FC<IFilterBarProps> = (props) => {
           <FilterBarOptions
             key={entry[0]}
             filters={entry[1]}
-            label={`Filter by ${ProjectFilterProperties.get(entry[0])}`}
+            label={`Filter by ${entry[0]}`}
             allowCollapse={allowCollapse}
             addAction={handleFilterAddClick}
           />

src/components/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import { IProjectInfo, ProjectProperties } from "../interfaces/IProjectInfo";
+import { IProjectInfo } from "../interfaces/IProjectInfo";
 import ProjectDetailList from "./ProjectDetailList";
 import ProjectCardHeader from "./ProjectCardHeader";
 import "./ProjectCard.css";
@@ -13,7 +13,7 @@ interface IProjectCardProps {
 const ProjectCard: React.FC<IProjectCardProps> = (props) => {
   const { project } = props;
   return (
-    <div className="project-card m-4 rounded p-4 shadow-sharp transition ease-in-out hover:shadow-hover">
+    <div data-key={project.key} className="project-card m-4 rounded p-4 shadow-sharp transition ease-in-out hover:shadow-hover">
       <ProjectCardHeader project={project} />
       <div className="mt-4 grid gap-4 lg:grid-cols-3 lg:grid-rows-1">
         {project.description && (
@@ -23,13 +23,13 @@ const ProjectCard: React.FC<IProjectCardProps> = (props) => {
           />
         )}
         <div className="grid gap-4 md:grid-cols-3 lg:col-span-2 lg:grid-cols-4">
-          {Object.keys(project.properties).map((propName) => {
-            const items = project.properties[propName];
+          {Object.keys(project.tags).map((propName) => {
+            const items = project.tags[propName];
             return (
               shouldShowSection(items) && (
                 <ProjectDetailList
                   key={propName}
-                  header={`${ProjectProperties.get(propName)}`}
+                  header={`${propName}`}
                   items={items}
                 />
               )

src/components/ProjectCardHeader.tsx

@@ -7,10 +7,22 @@ interface IProjectCardHeader {
 const ProjectCardHeader: React.FC<IProjectCardHeader> = (props) => {
   const { project } = props;
 
+  const updateUrlBase = process.env.PROJECT_UPDATE_URL_BASE;
+
   return (
-    <h1 className="m-0 text-2xl">
-      {project.link ? <a href={project.link}>{project.name}</a> : project.name}
-    </h1>
+    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+      <h1 className="m-0 text-2xl">
+        {project.link ? <a className="external" href={project.link}>{project.name}</a> : project.name}
+      </h1>
+      {project.key && project.key.trim() !== "" && updateUrlBase && (
+        <a
+          className="bg-transparent !bg-none hover:bg-gltf-green font-semibold hover:text-white py-2 px-4 border border-slate-300 hover:border-transparent rounded"
+          href={updateUrlBase + project.key}
+        >
+          Update Project
+        </a>
+      )}
+    </div>
   );
 };
 

src/components/ProjectList.tsx

@@ -9,7 +9,6 @@ interface IProjectListProps {
 
 const ProjectList: React.FC<IProjectListProps> = (props) => {
   const { projects } = props;
-
   return (
     <>
       {projects && projects.map((p) => <ProjectCard project={p} key={p.id} />)}

src/index.css

@@ -51,13 +51,13 @@ a:focus {
   color: theme("colors.link-focus");
 }
 
-a[href*="http"] {
+a.external[href*="http"] {
   background: url(./external-link-icon.svg) no-repeat 100% 0;
   background-size: 1rem 1rem;
   padding-right: 1.25rem;
 }
 
-h1 a[href*="http"] {
+h1 a.external[href*="http"] {
   background-size: 1.5rem 1.5rem;
   padding-right: 2rem;
 }

src/interfaces/IAppState.ts

@@ -1,6 +1,7 @@
 import { Document } from "flexsearch";
 import { IFilter } from "./IFilter";
 import { IProjectInfo } from "./IProjectInfo";
+import { IProjectsMetadata } from "./IProjectsMetadata";
 
 /**
  * This is the document layout used for indexing the Projects.
@@ -24,12 +25,14 @@ export interface IProjectsState {
   isFetchingProjects: boolean;
   values: IProjectInfo[];
   searchIndex?: Document<IProjectSearchDoc>;
+  isFetchingProjectsMetadata: boolean;
+  projectsMetadata?: IProjectsMetadata
 }
 
 /**
  * The part of the state that summarizes the filter options and selection.
  *
- * @property filterOptions A record that maps ProjectProperties keys to the
+ * @property filterOptions A record that maps projectsMetadata tags to the
  * list of filters that are available for this project property. These are
  * one filter object for each possible value of this property.
  * @property titleSubstring The string that was entered in the free-text search box

src/interfaces/IFilter.ts

@@ -1,13 +1,11 @@
 export interface IFilter {
-  propertyName: string;
+  tagName: string;
   value: string;
-  // selected: boolean;
 }
 
-export function createNewFilter(propertyName: string, value: string): IFilter {
+export function createNewFilter(tagName: string, value: string): IFilter {
   return {
-    propertyName,
+    tagName,
     value,
-    // selected: false
   };
 }