add categories, change fav and style of site

.env.example

@@ -1 +1 @@
-WORDPRESS_GRAPHQL_URL=
+NEXT_PUBLIC_WORDPRESS_GRAPHQL_URL=

components/card/Card.js

@@ -1,18 +1,16 @@
-import Link from 'next/link'
-import { sanitiseExcerpt } from '../../lib/sanitise'
-import cardStyles from './Card.module.scss'
+import Link from 'next/link';
+import { sanitiseExcerpt } from '../../lib/sanitise.js';
+import cardStyles from './Card.module.scss';
 
 const Card = (props) => {
+  return (
+    <Link href={props.link} key={props.id}>
+      <a className={cardStyles.card}>
+        <h2>{props.title}</h2>
+        {props.excerpt ? <div dangerouslySetInnerHTML={{ __html: sanitiseExcerpt(props.excerpt) }} /> : ''}
+      </a>
+    </Link>
+  );
+};
 
-    return (
-        <Link href={props.link} key={props.id}>
-        <a className={cardStyles.card}>
-          <h2>{props.title}</h2>
-          <div dangerouslySetInnerHTML={{ __html: sanitiseExcerpt(props.excerpt) }} />
-        </a>
-      </Link>
-    )
-
-}
-
-export default Card
+export default Card;

components/card/Card.module.scss

@@ -4,8 +4,8 @@
     text-decoration: none;
     transition: all 0.3s ease;
     width: 100%;
-    border-top: 1px solid #d1d1d1;
-    padding-top: 2rem;
+    margin: 0 0 2rem 0;
+    display: block;
   }
 
   .card:hover,
@@ -17,13 +17,15 @@
   }
 
   .card h2 {
-    margin: 0 0 1rem 0;
+    margin: 0;
     font-size: 1.8rem;
-    font-weight: 700;
-    min-height: 48px;
+    font-weight: 400;
     color: $primary;
   }
 
   .card p {
-    margin: 0;
+    display: block;
+    margin-top: 1rem;
+    margin-bottom: 3rem;
+    color: $baseFontColor;
   }

components/header/Header.js

@@ -1,21 +1,40 @@
 import Link from 'next/link';
 import headerStyles from './Header.module.scss';
+import fetcher from '../../lib/fetcher';
+import { getCats } from '../../lib/api';
+import { useEffect, useState } from 'react';
 
 const Header = () => {
+
+  // const [menuItems, setMenuItems] = useState([]);
+
+  // useEffect(async () => {
+  //   const response = await fetcher(getCats);
+
+  //   const kbCats = response.data.kbsTax.nodes;
+
+  //   setMenuItems(kbCats);
+  // }, []);
+
+  // console.log(menuItems, "menuItems")
+
   return (
     <div className={headerStyles.header}>
       <div className="wrapper">
         <Link href="/" className={headerStyles.logo}>
           <a>
-            <img src="logo.svg" alt="Knowledge Base" height="40"></img>
+            <img src="/logo.svg" alt="Knowledge Base" height="40"></img>
           </a>
         </Link>
 
         <nav className={headerStyles.nav}>
           <ul>
-            <li>
+            {/* {menuItems.map((item) => {
+              return <li key={item.id}><Link href={'/categories/'+item.slug}>{item.name}</Link></li>;
+            })} */}
+            {/* <li>
               <Link href="/">Back to home</Link>
-            </li>
+            </li> */}
           </ul>
         </nav>
       </div>

components/search/Search.module.scss

@@ -35,7 +35,7 @@
         background: white;
         width: 100%;
         border-top: 1px solid #f7f7f7;
-        box-shadow: rgb(0 0 0 / 3%) 0px 10px 19px 7px;
+        box-shadow: rgb(0 0 0 / 3%) 0px 20px 19px 7px;
         li {
             padding-top: 1rem;
             margin-top: 1rem;

lib/api.js

@@ -1,24 +1,60 @@
+// knowledge base categories
+export const getCats = `query getCats {
+  kbsTax {
+    nodes {
+      id
+      name
+      slug
+    }
+  }
+}`;
+
+// get categories by slug
+export const getCatSlug = `query getCatSlug($slug: [String!]) {
+  kbsTax(where: {slug: $slug}) {
+    nodes {
+      id
+      name
+      kbs(where: {orderby: {field: DATE, order: DESC}}) {
+        nodes {
+          id
+          modified
+          title
+          slug
+          excerpt(format: RENDERED)
+        }
+      }
+    }
+  }
+}`;
+
 // latest knowledge bases
 export const getLatestKbs = `query getLatestKbs {
-  kbs(first: 6, where: {orderby: {field: DATE, order: DESC}}) {
+  kbsTax {
     nodes {
       id
-      modified
-      title
-      slug
-      excerpt(format: RENDERED)
+      name
+      kbs(first: 6, where: {orderby: {field: DATE, order: DESC}}) {
+        nodes {
+          id
+          modified
+          title
+          slug
+          excerpt(format: RENDERED)
+        }
+      }
     }
   }
-}`
+}`;
 
 // get slugs
-export const getSlugs = `query getSlugs {
+export const getKbSlugs = `query getKbSlugs {
   kbs {
     nodes {
       slug
     }
   }
-}`
+}`;
 
 // knowledge base by slug
 export const getKbSlug = `query getKbSlug($id: ID!) {
@@ -27,5 +63,10 @@ export const getKbSlug = `query getKbSlug($id: ID!) {
       modified
       title
       content(format: RENDERED)
+      kbsTax {
+        nodes {
+          name
+        }
+      }
   }
-}`
+}`;

lib/fetcher.js

@@ -1,4 +1,4 @@
-const WP_API = process.env.WORDPRESS_GRAPHQL_URL
+const WP_API = process.env.NEXT_PUBLIC_WORDPRESS_GRAPHQL_URL
 
 async function fetcher(query, { variables } = {}) {
 

lib/sanitise.js

@@ -7,7 +7,7 @@ export const sanitiseExcerpt = (excerpt) => {
 
     sanitised = sanitised.replace(/\w*<a class="more-link".*<\/a>/, '');
 
-    sanitised = sanitised.replace(/^(.{50}[^\s]*).*/, "$1..."); 
+    sanitised = sanitised.replace(/^(.{200}[^\s]*).*/, "$1..."); 
 
     return sanitised;
 }

pages/_app.js

@@ -1,17 +1,31 @@
 import Header from '../components/header/Header'
 import NextNprogress from 'nextjs-progressbar';
+import fetcher from '../lib/fetcher';
 import '../styles/base/base.scss'
 import '../styles/base/gutenberg.scss'
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps, kbCats }) {
 
   return (
     <>
       <NextNprogress color="#0770ef" />
-      <Header />
+      <Header kbCats={kbCats} />
       <Component {...pageProps} />
     </>
   )
 }
 
-export default MyApp
+export default MyApp
+
+
+export async function getStaticProps() {
+  const response = await fetcher(getCats);
+
+  const kbCats = response.data.kbsTax.nodes;
+
+return {
+  props: {
+    kbCats,
+  },
+};
+}

pages/categories/[slug].js

@@ -0,0 +1,55 @@
+import Head from 'next/head';
+import fetcher from '../../lib/fetcher';
+import { getCats, getCatSlug } from '../../lib/api';
+import Card from '../../components/card/Card';
+import kbStyles from '../../styles/Kb.module.scss';
+
+export default function categories({ singleCategory }) {
+  return (
+    <>
+      <Head>
+        <title>{singleCategory.name}</title>
+      </Head>
+
+      <div className={kbStyles.title}>
+        <div className="wrapper">
+          <h2>{singleCategory.name}</h2>
+          <p>Category</p>
+        </div>
+      </div>
+
+      <div className={kbStyles.pageWrapper}>
+        <div className="wrapper">
+          {singleCategory.kbs.nodes.map((kb) => {
+            return <Card link={'/kb/' + kb.slug} key={kb.id} title={kb.title} excerpt={kb.excerpt} />;
+          })}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export async function getStaticPaths() {
+  const response = await fetcher(getCats);
+
+  const catSlugs = response.data.kbsTax.nodes;
+
+  return {
+    paths: catSlugs.map((cat) => `/categories/${cat.slug}`),
+    fallback: false,
+  };
+}
+
+export const getStaticProps = async ({ params }) => {
+  const variables = {
+    slug: params.slug,
+  };
+
+  const response = await fetcher(getCatSlug, { variables });
+
+  return {
+    props: {
+      singleCategory: response.data.kbsTax.nodes[0],
+    },
+  };
+};

pages/index.js

@@ -24,8 +24,15 @@ export default function Home({ latestKbs }) {
 
         <div className="wrapper">
           <div className={styles.grid}>
-            {latestKbs.map((kb) => {
-              return <Card link={'/kb/' + kb.slug} key={kb.id} title={kb.title} excerpt={kb.excerpt} />;
+            {latestKbs.map((kbcat, index) => {
+              return (
+                <div key={index}>
+                  <h3>{kbcat.name}</h3>
+                  {kbcat.kbs.nodes.map((kb) => {
+                    return <Card link={'/kb/' + kb.slug} key={kb.id} title={kb.title} />;
+                  })}
+                </div>
+              );
             })}
           </div>
         </div>
@@ -37,7 +44,7 @@ export default function Home({ latestKbs }) {
 export async function getStaticProps() {
   const response = await fetcher(getLatestKbs);
 
-  const latestKbs = response.data.kbs.nodes;
+  const latestKbs = response.data.kbsTax.nodes;
 
   return {
     props: {

pages/kb/[slug].js

@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import fetcher from '../../lib/fetcher';
-import { getSlugs, getKbSlug } from '../../lib/api';
+import { getKbSlugs, getKbSlug } from '../../lib/api';
 import kbStyles from '../../styles/Kb.module.scss';
 
 export default function Kb({ singlePage }) {
@@ -13,6 +13,7 @@ export default function Kb({ singlePage }) {
       <div className={kbStyles.title}>
         <div className="wrapper">
           <h2>{singlePage.title}</h2>
+          <p>{singlePage.kbsTax.nodes[0].name}</p>
         </div>
       </div>
 
@@ -26,7 +27,7 @@ export default function Kb({ singlePage }) {
 }
 
 export async function getStaticPaths() {
-  const response = await fetcher(getSlugs);
+  const response = await fetcher(getKbSlugs);
 
   const titleSlugs = response.data.kbs.nodes;
 

scripts/build-search.js

@@ -2,7 +2,7 @@ const fetch = require('node-fetch')
 const fs = require('fs')
 require('dotenv').config()
 
-const WP_API = process.env.WORDPRESS_GRAPHQL_URL
+const WP_API = process.env.NEXT_PUBLIC_WORDPRESS_GRAPHQL_URL
 
 async function fetcher(query) {
 

styles/Kb.module.scss

@@ -1,15 +1,22 @@
 .title {
-  padding: 5rem 0rem;
+  padding: 6rem 0rem;
     background: #f9fafc;
     h2 {
       font-weight: 700;
       font-size: 3.8rem;
+      margin: 0;
+    }
+    p {
+      margin-bottom: 0;
     }
   }
 
 .pageWrapper {
     margin-top: 4rem;
     a { 
       color: $primary;
+      &:hover {
+        color: darken($primary, 10%);
+      }
     }
 }