Main

README.md

@@ -48,3 +48,5 @@
 npm run export
 # exports your site as static files in /out
 ```
+# SanitySearchTutorial
+# SanityGlobalSearch

frontend/.env

@@ -0,0 +1,11 @@
+# For Studio Locally
+SANITY_STUDIO_API_PROJECT_ID = "v9re9945"
+SANITY_STUDIO_API_DATASET = "production"
+NEXT_SANITY_API_TOKEN_READ = "skr2jfUy1LwzrgOvbBKPT0iJvYJ46XoQzvtrkPTObhhzNJrTKnTzfLdfRckVznX05YL9W6crbng6Ktzl6REiUtxPYPfYMqJ2SQZ22uLGujWQ0gX68hYFwTg0zKiyirjWeloOZ4d6r8i178IJOKe22E2ntS8nhNw2YX7b0w0bvjXA2IoQI5p6"
+
+
+# For Next Locally
+NEXT_PUBLIC_SANITY_PROJECT_ID = "v9re9945"
+NEXT_PUBLIC_SANITY_DATASET = "production"
+NEXT_PUBLIC_SANITY_API_VERSION = '2021-03-25'
+NEXT_SANITY_API_TOKEN_READ = "skr2jfUy1LwzrgOvbBKPT0iJvYJ46XoQzvtrkPTObhhzNJrTKnTzfLdfRckVznX05YL9W6crbng6Ktzl6REiUtxPYPfYMqJ2SQZ22uLGujWQ0gX68hYFwTg0zKiyirjWeloOZ4d6r8i178IJOKe22E2ntS8nhNw2YX7b0w0bvjXA2IoQI5p6"

frontend/Styles/Card.css

@@ -0,0 +1,71 @@
+@import url(https://fonts.googleapis.com/css?family=Merriweather:400,300,700);
+@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
+
+h1,
+h4 {
+  font-family: "Montserrat", sans-serif;
+}
+
+.seperator {
+  margin-bottom: 30px;
+  width: 35px;
+  height: 3px;
+  background: #777;
+  border: none;
+}
+
+.title {
+  text-align: center;
+}
+.title .row {
+  padding: 50px 0 0;
+}
+.title h1 {
+  text-transform: uppercase;
+}
+.title .seperator {
+  margin: 0 auto 10px;
+}
+
+.item {
+  margin-bottom: 30px;
+  min-height: 1px;
+  float: left;
+  width: 100%;
+}
+.item .item-in {
+  background: #fff;
+  padding: 40px;
+  position: relative;
+}
+.item .item-in:hover:before {
+  width: 100%;
+}
+.item .item-in::before {
+  content: "";
+  position: absolute;
+  bottom: 0px;
+  height: 2px;
+  width: 0%;
+  background: #333333;
+  right: 0px;
+  transition: width 0.4s;
+}
+
+.item h4 {
+  color: rgb(80, 80, 80);
+  font-size: 18px;
+  margin-top: 25px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+}
+.item p {
+  font-size: 15px;
+}
+.item a {
+  font-family: "Montserrat", sans-serif;
+  font-size: 12px;
+  color: #666666;
+  margin-top: 10px;
+  text-decoration: none;
+}

frontend/Styles/base.css

@@ -0,0 +1,21 @@
+@import url("./Card.css");
+@import url("./searchInput.css");
+body {
+  background: #f1f0f0;
+  font-family: "Merriweather", serif;
+  font-size: 16px;
+}
+.pageWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  width: 100%;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 50%;
+}

frontend/Styles/searchInput.css

@@ -0,0 +1,57 @@
+a {
+  color: inherit;
+}
+a:hover {
+  color: #7f8ff4;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.btn {
+  display: inline-block;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  transition: all 200ms ease-in;
+  cursor: pointer;
+}
+.btn--primary {
+  background: #7f8ff4;
+  color: #fff;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  padding: 12px 36px;
+}
+.btn--primary:hover {
+  background: #6c7ff2;
+}
+.btn--primary:active {
+  background: #7f8ff4;
+  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
+}
+.btn--inside {
+  margin-left: -96px;
+}
+
+.form__field {
+  width: 360px;
+  background: #fff;
+  color: #a3a3a3;
+  font: inherit;
+  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
+  border: 0;
+  outline: 0;
+  padding: 22px 18px;
+}

frontend/client.ts

@@ -1,7 +1,8 @@
-import sanityClient from '@sanity/client'
+import sanityClient from "@sanity/client";
 
 export default sanityClient({
-  projectId: 'your-project-id', // you can find this in sanity.json
-  dataset: 'production', // or the name you chose in step 1
-  useCdn: true // `false` if you want to ensure fresh data
-})
+  projectId: "v9re9945", // you can find this in sanity.json
+  dataset: "production", // or the name you chose in step 1
+  useCdn: true, // `false` if you want to ensure fresh data
+  apiVersion: "2021-10-21",
+});

frontend/components/Card/Card.tsx

@@ -0,0 +1,41 @@
+import { PortableText } from "@portabletext/react";
+import image from "next/image";
+import Link from "next/link";
+import React from "react";
+type CardProps = {
+  title: string;
+  excerpt?: any;
+  type: string;
+  slug: string;
+  ptComponents?: any;
+  description?: string;
+};
+
+export const Card = ({
+  title,
+  excerpt,
+  type,
+  slug,
+  description,
+  ptComponents,
+}: CardProps) => {
+  return (
+    <div className="item">
+      <Link href={`/${type}/${slug?.current}`}>
+        <div className="item-in">
+          <h4>{title}</h4>
+          <p>{type}</p>
+          <div className="seperator"></div>
+          {excerpt && <p>{excerpt}</p>}
+          {description && <p>{description}</p>}
+          <a href="#">
+            Read More
+            <i className="fa fa-long-arrow-right"></i>
+          </a>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default Card;

frontend/components/SearchInput.tsx

@@ -0,0 +1,32 @@
+type SearchInputProps = {
+  value: string;
+  onChange: any;
+  onClick: any;
+};
+
+export const SearchInput = ({ value, onChange, onClick }: SearchInputProps) => {
+  return (
+    <div className="container">
+      <div className="container__item">
+        <form className="form">
+          <input
+            type="text"
+            className="form__field"
+            placeholder="Searchtext"
+            value={value}
+            onChange={onChange}
+          />
+          <button
+            type="button"
+            className="btn btn--primary btn--inside uppercase"
+            onClick={onClick}
+          >
+            Search
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default SearchInput;

frontend/components/index.js

@@ -0,0 +1 @@
+export * from "./card";

frontend/package.json

@@ -20,6 +20,7 @@
     "eslint-config-next": "13.1.6",
     "groq": "^3.2.6",
     "next": "13.1.6",
+    "next-sanity": "^5.5.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.5"

frontend/pages/_app.tsx

@@ -1,5 +1,6 @@
-import type { AppProps } from 'next/app'
+import type { AppProps } from "next/app";
+import "../styles/base.css";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

frontend/pages/api/queries/authors.ts

@@ -0,0 +1,23 @@
+import { groq } from "next-sanity";
+
+export const GET_ALL_AUTHORS = groq`
+    *[_type == "author" ] | order(publishedAt desc){
+      'slug': slug.current,
+      publishedAt,
+      name,
+      bio, 
+      image, 
+      'type': _type,
+    }
+  `;
+
+export const GET_AUTHOR = groq`
+    *[_type == "author" && slug.current == $slug][0]{
+      title,
+      "name": author->name,
+      slug, 
+      bio, 
+      image, 
+      'type': _type,
+    }
+  `;

frontend/pages/api/queries/index.js

@@ -0,0 +1 @@
+export { GET_ALL_POSTS, GET_POST } from "./posts";

frontend/pages/api/queries/posts.ts

@@ -0,0 +1,21 @@
+import { groq } from "next-sanity";
+
+export const GET_ALL_POSTS = groq`
+    *[_type == "post" ] | order(publishedAt desc) {
+      'slug': slug.current,
+      title,
+      publishedAt,
+      body, 
+      'type': _type,
+    }
+  `;
+
+export const GET_POST = groq`
+    *[_type == "post" && slug.current == $slug][0]{
+      title,
+      "name": author->name,
+      "categories": categories[]->title,
+      body,
+      'type': _type,
+    }
+  `;

frontend/pages/api/search.ts

@@ -0,0 +1,50 @@
+import client from "../../client";
+import { groq } from "next-sanity";
+
+export default async function search(req, res) {
+  const { query, resultLength } = req.query;
+  // store the query to access all the text in the block content fields
+  const bodyQuery = "body[].children[].text";
+  const bioQuery = "bio[].children[].text";
+
+  const searchQuery = groq`
+        *[_type in ['post', 'author', 'category'] && 
+        (
+        ${bodyQuery} match $queryString + '*' ||
+        ${bioQuery} match $queryString + '*' ||
+        description match $queryString + '*'  ||
+        title match $queryString + '*' || 
+        name match $queryString + '*' || 
+        description match $queryString + '*'
+        ) && !(_id in path('drafts.**')) ] | order(publishedAt desc) [$resultLength...$resultLength+2]{
+          title,
+          name, 
+          bio,
+          body,
+          text,
+          'slug' : slug.current,
+          description,
+          'type': _type,
+          'searchedQuery': select(
+
+            ${bodyQuery} match $queryString + '*' =>{
+              'cardExcerpt': ${bodyQuery},
+            },
+            ${bioQuery} match $queryString + '*' =>{
+              'cardExcerpt': ${bioQuery},
+            },
+            description match $queryString + '*' =>{
+              'cardExcerpt': description,
+            },
+          ),
+
+        }
+    `;
+
+  const data = await client.fetch(searchQuery, {
+    queryString: query,
+    resultLength: parseInt(resultLength),
+  });
+
+  res.status(200).json(data);
+}