commit the nextjs project

.env.example

@@ -0,0 +1 @@
+WORDPRESS_GRAPHQL_URL=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+.env
+
+# faq desk
+public/search.json
+search.json
+
+.vercel

.prettierignore

@@ -0,0 +1,45 @@
+CODE_OF_CONDUCT.md
+CONTRIBUTING.md
+LICENSE
+README.md
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+yarn.lock
+.prettierignore
+.gitignore
+
+public
+
+.all-contributorsrc

.prettierrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+    singleQuote: true,
+    printWidth: 120,
+    overrides: [
+      {
+        files: '*.scss',
+        options: {
+          singleQuote: false,
+        },
+      },
+    ],
+  };

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/card/Card.js

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import { sanitiseExcerpt } from '../../lib/sanitise'
+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>
+          <div dangerouslySetInnerHTML={{ __html: sanitiseExcerpt(props.excerpt) }} />
+        </a>
+      </Link>
+    )
+
+}
+
+export default Card

components/card/Card.module.scss

@@ -0,0 +1,30 @@
+.card {
+    margin: 1.5rem 0 2.5rem;
+    padding: 3rem;
+    text-align: left;
+    color: inherit;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    width: 100%;
+    box-shadow: rgb(0 0 0 / 3%) 0px 4px 19px 7px;
+  }
+
+  .card:hover,
+  .card:focus,
+  .card:active {
+    box-shadow: rgb(0 0 0 / 6%) 0px 4px 19px 7px;
+    h2 {
+      color: $primary;
+    }
+  }
+
+  .card h2 {
+    margin: 0 0 2rem 0;
+    font-size: 2.4rem;
+    font-weight: 600;
+  }
+
+  .card p {
+    margin: 0;
+    font-size: 1.8rem;
+  }

components/header/Header.js

@@ -0,0 +1,40 @@
+import Link from 'next/link'
+import Image from 'next/image'
+import Logo from '../../public/logo.svg'
+import headerStyles from './Header.module.scss'
+
+const Header = () => {
+
+    return (
+
+        <div className={headerStyles.header}>
+
+            <div className={headerStyles.wrapper}>
+
+                <Link href="/" className={headerStyles.logo}>
+                    <a>
+                        <Image
+                            src={Logo}
+                            alt="FAQ Desk"
+                            width={160}
+                        />
+                    </a>
+                </Link>
+
+                <nav className={headerStyles.nav}>
+                    <ul>
+                        <li>
+                            <Link href="/">Back to home</Link>
+                        </li>
+                    </ul>
+                </nav>
+
+            </div>
+
+        </div>
+
+    )
+
+}
+
+export default Header

components/header/Header.module.scss

@@ -0,0 +1,26 @@
+.header > * {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.wrapper {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+.nav {
+    ul {
+        overflow: auto;
+        margin: 0;
+        li {
+            list-style: none;
+            float: left;
+            padding: 0 1rem;
+            &:hover a {
+                color: $primary;
+            }
+        }
+    }
+}

components/search/Search.js

@@ -0,0 +1,73 @@
+import { useCallback, useState, useRef } from 'react'
+import Link from 'next/link'
+import searchStyles from './Search.module.scss'
+
+const Search = () => {
+
+    const searchRef = useRef(null)
+    const [query, setQuery] = useState('')
+    const [active, setActive] = useState(false)
+    const [searchResults, setsearchResults] = useState([])
+
+    const searchAPI = (query) => `api/search?q=${query}`
+
+    const onChange = useCallback((event) => {
+        const query = event.target.value
+        setQuery(query)
+        if (query.length) {
+            fetch(searchAPI(query))
+                .then(res => res.json())
+                .then(res => {
+                    setsearchResults(res.results.slice(0,5))
+                })
+        } else {
+            setsearchResults([])
+        }
+    }, [])
+
+    const onFocus = useCallback(() => {
+        setActive(true)
+        window.addEventListener('click', onClick)
+    }, [])
+
+    const onClick = useCallback((event) => {
+        if (searchRef.current && !searchRef.current.contains(event.target)) {
+            setActive(false)
+            window.removeEventListener('click', onClick)
+        }
+
+    })
+
+    return (
+
+        <div className={searchStyles.search}>
+
+            <div className={searchStyles.inputWrapper} ref={searchRef}>
+                <input
+                    className={active && searchResults.length > 0 ? 'input active' : 'input'}
+                    type="text"
+                    placeholder="Start your search"
+                    onChange={onChange}
+                    onFocus={onFocus}
+                    value={query}
+                />
+                {active && searchResults.length > 0 && (
+                    <ul className={searchStyles.searchResults}>
+                        {searchResults.map(({ title, slug }) => (
+                            <li key={slug}>
+                                <Link href={`/faq/${slug}`}>
+                                    <a>{title}</a>
+                                </Link>
+                            </li>
+                        ))}
+
+                    </ul>
+                )}
+            </div>
+
+        </div>
+
+    )
+}
+
+export default Search