chore: big changes

.env

@@ -0,0 +1 @@
+SITE_URL=http://localhost:3000

next.config.js

@@ -41,25 +41,6 @@ module.exports = {
       ],
     });
 
-    config.module.rules.push({
-      test: /(?<!inline)\.svg$/,
-      issuer: /\.(js|jsx|ts|tsx|css)$/,
-      use: [
-        {
-          loader: require.resolve('url-loader'),
-          options: {
-            limit: 512,
-            publicPath: '/_next/static/images',
-            outputPath: 'static/images',
-            fallback: require.resolve('file-loader'),
-          },
-        },
-        {
-          loader: require.resolve('svgo-loader'),
-        },
-      ],
-    });
-
     return config;
   },
 };

package.json

@@ -28,6 +28,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "slugify": "^1.6.5",
     "tailwindcss": "^3.2.4",
     "tailwindcss-safe-area": "^0.2.2"
   },

src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/head.jsx

@@ -0,0 +1,29 @@
+import HeadMetaTags from 'components/shared/head-meta-tags';
+import { MAIN_TITLE, SEPARATOR } from 'constants/seo';
+import {
+  addSlugToCategories,
+  addSlugToSubCategories,
+  findCategoryBySlug,
+  findSubCategoryBySlug,
+} from 'utils';
+import { getCategories, getSubCategories } from 'utils/api/queries';
+
+const Head = async ({
+  params: { 'category-slug': categorySlug, 'sub-category-slug': subCategorySlug },
+}) => {
+  let categories = await getCategories();
+  categories = addSlugToCategories(categories);
+  const matchingCategory = findCategoryBySlug(categories, categorySlug);
+  // eslint-disable-next-line no-underscore-dangle
+  let subCategories = await getSubCategories(matchingCategory._id);
+
+  subCategories = addSlugToSubCategories(subCategories);
+
+  const matchingSubCategory = findSubCategoryBySlug(subCategories, subCategorySlug);
+
+  const title = `${MAIN_TITLE}${SEPARATOR}${matchingCategory.category}${SEPARATOR}${matchingSubCategory.subCategory}`;
+
+  return <HeadMetaTags title={title} description={matchingSubCategory.description} />;
+};
+
+export default Head;

src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/page.jsx

@@ -0,0 +1,116 @@
+import slugify from 'slugify';
+
+import Button from 'components/shared/button';
+import Link from 'components/shared/link';
+import LINKS from 'constants/links';
+import {
+  addSlugToCategories,
+  addSlugToSubCategories,
+  findCategoryBySlug,
+  findSubCategoryBySlug,
+} from 'utils';
+import { getCategories, getSubCategories, getNotifications } from 'utils/api/queries';
+
+const colors = ['rgba(255, 179, 204, 1)', 'rgba(255, 230, 179, 1)'];
+const variables = [
+  {
+    name: '{{play_name}}',
+    description: 'The name of the play',
+  },
+  {
+    name: '{{theater_name}}',
+    description: 'The name of the theater',
+  },
+];
+
+const SubCategorySlug = async ({
+  params: { 'category-slug': categorySlug, 'sub-category-slug': subCategorySlug },
+}) => {
+  let categories = await getCategories();
+  categories = addSlugToCategories(categories);
+  // console.log(categories);
+  const matchingCategory = findCategoryBySlug(categories, categorySlug);
+  // eslint-disable-next-line no-underscore-dangle
+  let subCategories = await getSubCategories(matchingCategory._id);
+
+  subCategories = addSlugToSubCategories(subCategories);
+
+  const matchingSubCategory = findSubCategoryBySlug(subCategories, subCategorySlug);
+
+  const notifications = await getNotifications(matchingSubCategory._id);
+
+  // Exclude from subCategories the one that is currently being displayed
+  const otherSubCategories = subCategories.filter(
+    (subCategory) => subCategory.slug !== subCategorySlug
+  );
+
+  return (
+    <div className="container safe-paddings mt-20">
+      <div className="mb-56 grid grid-cols-2 gap-x-[30px]">
+        <div className="">
+          <div className="mb-6">
+            <Link to="/" theme="purple">
+              List of all categories
+            </Link>
+            <span className="mx-2 text-gray-5">/</span>
+            <Link to={`/${matchingCategory.slug}`} theme="purple">
+              {matchingCategory.category}
+            </Link>
+          </div>
+          <div className="mb-14">
+            <h1 className="mb-4 text-4xl">{matchingSubCategory.subCategory}</h1>
+            <p>{matchingSubCategory.description}</p>
+          </div>
+          <div className="mb-10">Code Snippet</div>
+          <div className="mb-14">
+            <h3 className="mb-3 text-xl">Variables</h3>
+            <ul className="border-b border-dashed border-purple-1/20">
+              {variables.map(({ name, description }, index) => (
+                <li
+                  key={index}
+                  className="flex border-t border-dashed border-purple-1/20 py-3 text-sm"
+                >
+                  <span style={{ color: colors[index] }} className="w-40">
+                    {name}
+                  </span>
+                  <p className="pl-3">{description}</p>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="flex space-x-5">
+            <Button size="sm" theme="purple-filled">
+              Send a test notification
+            </Button>
+            <Button to={LINKS.novu.to} size="sm" theme="gray-filled">
+              Try it on Novu
+            </Button>
+          </div>
+        </div>
+        <div>
+          <div className=" relative bg-mobile-gradient pb-[100%]">
+            <img
+              src="/images/mobile.svg"
+              loading="eager"
+              className="translate absolute bottom-0 left-1/2 -translate-x-1/2"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mb-40">
+        <h2 className="mb-14 text-center text-4xl">Other notification types for Social Media</h2>
+        <div className="grid grid-cols-4 gap-x-16 gap-y-5">
+          {otherSubCategories.map((subCategory, index) => (
+            <Link theme="purple" key={index} to={`/${matchingCategory.slug}/${subCategory.slug}`}>
+              {subCategory.subCategory}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SubCategorySlug;
+
+export const revalidate = 60;

src/app/(category)/[category-slug]/head.jsx

@@ -0,0 +1,21 @@
+import HeadMetaTags from 'components/shared/head-meta-tags';
+import { MAIN_TITLE, SEPARATOR } from 'constants/seo';
+import {
+  addSlugToCategories,
+  addSlugToSubCategories,
+  findCategoryBySlug,
+  findSubCategoryBySlug,
+} from 'utils';
+import { getCategories, getSubCategories } from 'utils/api/queries';
+
+const Head = async ({ params: { 'category-slug': categorySlug } }) => {
+  let categories = await getCategories();
+  categories = addSlugToCategories(categories);
+  const matchingCategory = findCategoryBySlug(categories, categorySlug);
+
+  const title = `${MAIN_TITLE}${SEPARATOR}${matchingCategory.category}`;
+
+  return <HeadMetaTags title={title} description={matchingCategory.description} />;
+};
+
+export default Head;

src/app/(category)/[category-slug]/page.jsx

@@ -0,0 +1,65 @@
+import slugify from 'slugify';
+
+import Link from 'components/shared/link';
+
+const getCategories = async () => {
+  const categoriesResponse = await fetch('https://api.notifications.directory/categories/');
+  const categories = await categoriesResponse.json();
+  return categories;
+};
+
+const getSubCategories = async (categoryId) => {
+  const subCategoriesResponse = await fetch(
+    `https://api.notifications.directory/categories/${categoryId}/sub`
+  );
+  const subCategories = await subCategoriesResponse.json();
+  return subCategories;
+};
+
+const CategoryPage = async ({ params: { 'category-slug': categorySlug } }) => {
+  const categories = await getCategories();
+  categories.forEach((category, index) => {
+    categories[index].slug = slugify(category.category, { lower: true });
+  });
+
+  const matchingCategory = categories.find((category) => category.slug === categorySlug);
+  // eslint-disable-next-line no-underscore-dangle
+
+  const subCategories = await getSubCategories(matchingCategory._id);
+
+  subCategories.forEach((subCategory, index) => {
+    subCategories[index].slug = slugify(subCategory.subCategory, { lower: true });
+  });
+
+  return (
+    <div className="container safe-paddings mt-20">
+      <div className="mb-6">
+        <Link to="/" theme="purple">
+          List of all categories
+        </Link>
+      </div>
+      <div className="mb-14 max-w-[500px]">
+        <h1 className="mb-4 text-4xl">{matchingCategory.category}</h1>
+        <p>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+          been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+          a galley of type and scrambled it to make a type specimen book.
+        </p>
+      </div>
+      <div className="mb-40">
+        <div className="grid grid-cols-4 gap-x-16 gap-y-5">
+          {/* {subCategories.lenght > 0 &&
+            subCategories.map((subCategory, index) => (
+              <Link theme="purple" key={index} to={`/${matchingCategory.slug}/${subCategory.slug}`}>
+                {subCategory.subCategory}
+              </Link>
+            ))} */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CategoryPage;
+
+export const revalidate = 60;

src/app/head.jsx

@@ -0,0 +1,8 @@
+import HeadMetaTags from 'components/shared/head-meta-tags';
+
+const title = 'Notification Generator - Generate notifications for your website';
+const description = 'Generate notifications for your website';
+
+const Head = async () => <HeadMetaTags title={title} description={description} />;
+
+export default Head;

src/app/layout.jsx

@@ -0,0 +1,18 @@
+import 'styles/main.css';
+import Footer from 'components/shared/footer';
+import Header from 'components/shared/header';
+
+const RootLayout = ({ children }) => (
+  <html>
+    <head />
+    <body className=" bg-black bg-noise text-white">
+      <div className="flex min-h-screen flex-col overflow-hidden">
+        <Header />
+        <main>{children}</main>
+        <Footer />
+      </div>
+    </body>
+  </html>
+);
+
+export default RootLayout;