Merge pull request #33 from solimer/bugfix/app-cache

🚀 chore(package.json): update styled-components to version 6.0.4 and …

package.json

@@ -4,24 +4,20 @@
  "author": "solimer",
  "license": "UNLICENSED",
  "dependencies": {
- "@fortawesome/fontawesome-svg-core": "^6.4.0",
- "@fortawesome/free-brands-svg-icons": "^6.4.0",
- "@fortawesome/react-fontawesome": "^0.2.0",
  "@hookform/resolvers": "^3.1.0",
- "@material-ui/core": "^4.12.4",
- "@material-ui/icons": "^4.11.3",
  "@plaiceholder/next": "^2.5.0",
  "@prismicio/client": "^7.1.0",
  "@prismicio/next": "^1.3.3",
  "@prismicio/react": "^2.7.1",
+ "@radix-ui/react-tooltip": "^1.0.6",
  "@trycourier/courier": "^4.8.0",
- "@types/recompose": "^0.30.10",
  "@vercel/analytics": "^1.0.1",
  "classnames": "^2.3.2",
- "cloudinary-react": "^1.8.1",
+ "clsx": "^2.0.0",
  "dayjs": "^1.11.7",
  "dotenv": "^16.0.1",
  "eslint-plugin-tailwindcss": "^3.13.0",
+ "google-map-react": "^2.2.1",
  "graphql": "^16.5.0",
  "lucide-react": "^0.260.0",
  "next": "^13.4.10",
@@ -34,16 +30,14 @@
  "react-bootstrap": "^2.7.4",
  "react-device-detect": "^2.2.3",
  "react-dom": "^18.2.0",
- "react-google-maps": "^9.4.5",
  "react-hook-form": "^7.43.9",
  "react-images": "^1.2.0-beta.7",
  "react-lite-youtube-embed": "^2.3.52",
  "react-typed": "^1.2.0",
  "react-youtube": "^10.1.0",
- "recompose": "^0.30.0",
  "sass": "^1.62.1",
  "sharp": "^0.32.1",
- "styled-components": "^6.0.0-rc.1",
+ "styled-components": "^6.0.4",
  "tailwind-merge": "^1.13.2",
  "use-count-up": "^3.0.1",
  "yet-another-react-lightbox": "^3.11.3",
@@ -76,6 +70,7 @@
  "@prismicio/slice-simulator-react": "^0.2.3",
  "@prismicio/types": "^0.2.7",
  "@slicemachine/adapter-next": "^0.1.3",
+ "@types/google-map-react": "^2.1.7",
  "@types/react": "18.2.5",
  "@types/react-anchor-link-smooth-scroll": "^1.0.2",
  "@types/styled-components": "^5.1.26",
@@ -88,7 +83,7 @@
  "eslint-config-prettier": "^8.8.0",
  "eslint-plugin-react": "^7.32.2",
  "postcss": "^8.4.23",
- "prettier": "^3.0.0",
+ "prettier": "^2.8.8",
  "prettier-plugin-tailwindcss": "^0.4.1",
  "pretty-quick": "^3.1.3",
  "prismic-ts-codegen": "^0.1.15",

prismicio.ts

@@ -1,5 +1,6 @@
 import * as prismic from "@prismicio/client";
 import * as prismicNext from "@prismicio/next";
+
 import config from "./slicemachine.config.json";
 
 /**
@@ -45,3 +46,23 @@ export const createClient = (config: prismicNext.CreateClientConfig = {}) => {
 
  return client;
 };
+
+export const createAppClient = (
+ config: prismicNext.CreateClientConfig = {}
+) => {
+ const client = prismic.createClient(repositoryName, {
+ routes,
+ fetchOptions:
+ process.env.NODE_ENV === "production"
+ ? { next: { tags: ["prismic"] }, cache: "force-cache" }
+ : { next: { revalidate: 5 } },
+ });
+
+ prismicNext.enableAutoPreviews({
+ client,
+ previewData: config.previewData,
+ req: config.req,
+ });
+
+ return client;
+};

src/app/api/revalidate/route.ts

@@ -1,4 +1,4 @@
-import { revalidatePath } from "next/cache";
+import { revalidatePath, revalidateTag } from "next/cache";
 import { NextRequest, NextResponse } from "next/server";
 import { createClient } from "@/prismicio";
 import * as z from "zod";
@@ -33,6 +33,7 @@ export async function POST(req: NextRequest) {
  revalidatePath(doc.url?.includes("blog") ? "/blog/[postId]" : "/");
  })
  );
+ revalidateTag("prismic");
 
  return NextResponse.json(
  { revalidated: true, now: Date.now() },

src/app/blog/[postId]/page.tsx

@@ -1,6 +1,5 @@
-import { createClient } from "@/prismicio";
+import { createAppClient } from "@/prismicio";
 import Post from "@/src/components/Post/Post";
-import PostHeader from "@/src/components/Post/PostHeader";
 import { useImageStore } from "@/src/lib/stores";
 import addImagesPlaceholders from "@/src/lib/utils/addImagesPlaceholders";
 
@@ -11,7 +10,7 @@ interface PostPageProps {
 }
 
 export async function generateStaticParams() {
- const client = createClient();
+ const client = createAppClient();
  const posts = await client.getAllByType("post");
 
  return posts.map((post) => ({
@@ -20,7 +19,7 @@ export async function generateStaticParams() {
 }
 
 async function getPostData(postUID: string) {
- const client = createClient();
+ const client = createAppClient();
 
  const post = await client.getByUID("post", postUID);
  const images = await addImagesPlaceholders({ post });

src/components/Home/Blog/BlogBox.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import Link from "next/link";
-import KeyboardBackspaceIcon from "@material-ui/icons/KeyboardBackspace";
 import { PrismicText } from "@prismicio/react";
 import { ImageField, RichTextField } from "@prismicio/types";
+import { MoveLeft } from "lucide-react";
 
 import ImageWithBlur from "../../Shared/ImageWithBlur";
 
@@ -32,9 +32,9 @@ const BlogBox: React.FC<BlogBoxProps> = ({
  <PrismicText field={description} />
  </p>
  </div>
- <div className="tracking-[0.5pt] text-gray-800">
+ <div className="flex items-center tracking-[0.5pt] text-gray-800">
  <span className="pl-[6px]">קרא עוד</span>
- <KeyboardBackspaceIcon className="text-primary" />
+ <MoveLeft className="text-primary" width={18} strokeWidth={3} />
  </div>
  </div>
  </Link>

src/components/Home/Header/NavigationBar/BurgerMenu.tsx

@@ -7,9 +7,9 @@ const BurgerMenu: React.FC = () => (
  stroke="currentColor"
  >
  <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
  d="M4 6h16M4 12h16M4 18h16"
  />
  </svg>

src/components/Home/Header/NavigationBar/FacebookNav.tsx

@@ -1,15 +1,24 @@
 import React from "react";
-import { faFacebookF } from "@fortawesome/free-brands-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import cn from "@/src/lib/utils/cn";
+import { Facebook } from "lucide-react";
 
-const FacebookNav: React.FC<{ facebookLink: string }> = ({ facebookLink }) => (
+const FACEBOOK_LINK =
+ "https://www.facebook.com/%D7%A6%D7%A4%D7%A8%D7%99%D7%A8-%D7%9C%D7%99%D7%9B%D7%98%D7%A0%D7" +
+ "%A9%D7%98%D7%99%D7%99%D7%9F-%D7%9C%D7%99%D7%9E%D7%95%D7%93-%D7%AA%D7%95%D7%A4%D7%99%D7%9D-%D7%95%D7%9B%D7%9C" +
+ "%D7%99-%D7%94%D7%A7%D7%A9%D7%94-365617346882919/";
+
+const FacebookNav: React.FC<{ isMobile: boolean }> = ({ isMobile }) => (
  <li className="hover:text-primary">
- <a href={facebookLink} target="_blank" rel="noopener noreferrer">
- <FontAwesomeIcon
- icon={faFacebookF}
- width={15}
- height={15}
- className="transition-colors hover:text-primary"
+ <a href={FACEBOOK_LINK} target="_blank" rel="noopener noreferrer">
+ <Facebook
+ width={18}
+ height={18}
+ className={cn(
+ "fill-white transition-all duration-700 hover:fill-primary hover:text-primary",
+ "group-[.on-scroll]:fill-black",
+ isMobile && "fill-black"
+ )}
+ strokeWidth={"0.75px"}
  />
  </a>
  </li>

src/components/Home/Header/NavigationBar/NavigationItems.tsx

@@ -9,29 +9,22 @@ const NavigationItems: React.FC<{
  target: "mobile" | "desktop";
  isOpen?: boolean;
 }> = ({ target, isOpen }) => {
- const facebookLink =
- "https://www.facebook.com/%D7%A6%D7%A4%D7%A8%D7%99%D7%A8-%D7%9C%D7%99%D7%9B%D7%98%D7%A0%D7" +
- "%A9%D7%98%D7%99%D7%99%D7%9F-%D7%9C%D7%99%D7%9E%D7%95%D7%93-%D7%AA%D7%95%D7%A4%D7%99%D7%9D-%D7%95%D7%9B%D7%9C" +
- "%D7%99-%D7%94%D7%A7%D7%A9%D7%94-365617346882919/";
-
  const items = navArray.map((item) => {
  if (item.target === "facebook") {
- return <FacebookNav facebookLink={facebookLink} key="nav-facebook" />;
+ return <FacebookNav isMobile={target === "mobile"} key="nav-facebook" />;
  }
  return <ItemNav item={item} key={item.target} />;
  });
  return (
  <ul
  className={cn(
  "flex-col items-center font-hebrew text-xl text-white transition-all duration-700 md:flex-row md:space-x-4 md:space-x-reverse",
- "group-[.on-scroll]:text-black",
- {
- "top-20 flex h-[285px] w-full items-start space-y-3 bg-white pr-8 text-gray-800 opacity-100 md:hidden":
- target === "mobile",
- },
- { "h-0 opacity-0": target === "mobile" && !isOpen },
- { "mt-4 pt-4": isOpen },
- { "hidden md:flex": target === "desktop" }
+ "group-[.on-scroll]:fill-black group-[.on-scroll]:text-black",
+ target === "mobile" &&
+ "top-20 flex h-[285px] w-full items-start space-y-3 bg-white pr-8 text-gray-800 opacity-100 md:hidden",
+ target === "mobile" && !isOpen && "h-0 opacity-0",
+ isOpen && "mt-4 pt-4",
+ target === "desktop" && "hidden md:flex"
  )}
  >
  {items}

src/components/Home/Testimonials/Testimonials.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import cn from "@/src/lib/utils/cn";
-import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
-import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 
 import { HomepageDocumentDataTestimonialsItem } from "../../../../prismicio-types";
 import useInterval from "../../../hooks/useInterval";
@@ -40,15 +39,15 @@ const Testimonials: React.FC<{
  className="flex flex-1 cursor-pointer justify-start"
  onClick={() => onArrowClick("left")}
  >
- <KeyboardArrowRight style={{ fontSize: "35px" }} />
+ <ChevronRight className="transition-colors hover:text-primary" />
  </div>
  <div className="flex-[10]">
  <div className="relative min-h-[337px] pb-7 text-center">
  <ol className="absolute bottom-[-10px] left-[0%] top-auto mx-0 mb-0 flex w-full justify-center">
  {testimonials.map((_slider, i) => (
  <li
  className={cn(
- "mr-3 h-[6px] w-[6px] cursor-pointer rounded bg-[#c0c0c0]",
+ "mr-3 h-[6px] w-[6px] cursor-pointer rounded bg-[#c0c0c0] transition-colors hover:bg-[#333333]",
  i === activeIndex && "mb-px bg-[#333333]"
  )}
  onClick={() => onIndicatorClick(i)}
@@ -78,7 +77,7 @@ const Testimonials: React.FC<{
  className="flex flex-1 cursor-pointer justify-end"
  onClick={() => onArrowClick("right")}
  >
- <KeyboardArrowLeft style={{ fontSize: "35px" }} />
+ <ChevronLeft className="transition-colors hover:text-primary" />
  </div>
  </div>
  </div>

src/components/Post/ContactSSR.tsx

@@ -1,9 +1,9 @@
-import { createClient } from "@/prismicio";
+import { createAppClient } from "@/prismicio";
 
 import Contact from "../Shared/Contact/Contact";
 
 const getContactData = async () => {
- const client = createClient();
+ const client = createAppClient();
  const homepageMap = await client.getSingle("homepage", {
  graphQuery: `
  {