Add features from CMS

src/app/features/page.tsx

@@ -1,5 +1,6 @@
 import BgLayer from "@/components/layout/bg-layer";
 import Container from "@/components/layout/container";
+import FeatureList from "@/components/features/list";
 import Header from "@/components/layout/header";
 import Implementations from "@/components/features/implementations";
 import MainWrapper from "@/components/layout/main-wrapper";
@@ -17,42 +18,19 @@ export default async function FeaturesPage() {
           />
           <Container>
             <h2>Features</h2>
-
             <p>
               Building on Hyrax, Hyku has a long list of features and
               distinctions, including:
             </p>
-            <ul>
-              <li>
-                Multi-tenancy, or the ability to host multiple repository
-                “slices” within the same application, each with its own users,
-                objects, and look & feel
-              </li>
-              <li>Support for the IIIF Image and Presentation APIs</li>
-              <li>
-                Support for harvesting metadata and content via ResourceSync
-              </li>
-              <li>Rich object viewing using the Universal Viewer</li>
-              <li>
-                Two bundled work types: Image Work and Generic Work and more!
-              </li>
-            </ul>
+            <FeatureList />
             <section className="space-y-6">
               <div>
-                <h3>Hyku Beta 2.0.0</h3>
-                <p>
-                  Hyku Beta 2.0.0 was released in October 2018 and Hyku was
-                  promoted out of Samvera Labs in February 2019. Information
-                  about the initial Beta Test can be found below and user
-                  documentation is being added to this site regularly.
-                </p>
-              </div>
-              <div>
-                <h3>Hyku 3.0</h3>
+                <h3>Hyku 5.0</h3>
                 <p>
-                  Hyku 3.0 was released in early 2021, bringing Hyku up to speed
-                  with Hyrax, and introducing new theming and other
-                  configurations.
+                  Hyku 5.0 was released in February 2023, offering the ability
+                  to use Solr graph queries to skip having to do nested
+                  indexing. Features include Groups with Roles and the ability
+                  to implement Google or Motomo analytics.
                 </p>
               </div>
               <div>
@@ -66,12 +44,20 @@ export default async function FeaturesPage() {
                 </p>
               </div>
               <div>
-                <h3>Hyku 5.0</h3>
+                <h3>Hyku 3.0</h3>
                 <p>
-                  Hyku 5.0 was released in February 2023, offering the ability
-                  to use Solr graph queries to skip having to do nested
-                  indexing. Features include Groups with Roles and the ability
-                  to implement Google or Motomo analytics.
+                  Hyku 3.0 was released in early 2021, bringing Hyku up to speed
+                  with Hyrax, and introducing new theming and other
+                  configurations.
+                </p>
+              </div>
+              <div>
+                <h3>Hyku Beta 2.0.0</h3>
+                <p>
+                  Hyku Beta 2.0.0 was released in October 2018 and Hyku was
+                  promoted out of Samvera Labs in February 2019. Information
+                  about the initial Beta Test can be found below and user
+                  documentation is being added to this site regularly.
                 </p>
               </div>
               <p>

src/components/features/list.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import Skeleton from "react-loading-skeleton";
+import useGetContentfulData from "@/hooks/use-get-contentful-data";
+
+export default function FeatureList() {
+  const data = useGetContentfulData("feature");
+  console.log("data", data);
+
+  return (
+    <ul>
+      {!data && <Skeleton count={5} />}
+
+      {data &&
+        data.map(({ fields, sys }: { fields: any; sys: any }) => (
+          <li key={sys.id}>{fields.featureDescription}</li>
+        ))}
+    </ul>
+  );
+}