Enhance Footer with Legal Information, Social Media Links, and Newsle…

…tter Signup This pull request aims to improve the website's footer by adding the following elements: Legal Information: Links to Privacy Policy and Terms of Service. Social Media Links: Icons and links to our social media profiles. Newsletter Signup: A form to allow users to subscribe to our newsletter.
subhadipbhowmik · Jul 14, 2024 · fc0ad87 · fc0ad87
1 parent 3d63b83
commit fc0ad87
Show file tree

Hide file tree

Showing 3 changed files with 196 additions and 87 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -1,19 +1,18 @@
-import {themes as prismThemes} from 'prism-react-renderer';
+import { themes as prismThemes } from "prism-react-renderer";
 
-/** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "30 Days of CPP",
   tagline:
     "30 days of CPP programming challenge is a step-by-step guide to learn CPP programming language in 30 days",
   favicon: "img/favicon.ico",
 
-  url: "https://subhadipbhowmik.github.io/",
-  baseUrl: "/30-Days-Of-CPP/", 
+  url: "https://subhadipbhowmik.github.io",
+  baseUrl: "/30-Days-Of-CPP/",
 
   organizationName: "subhadipbhowmik",
   projectName: "30-Days-Of-CPP",
   trailingSlash: false,
-  onBrokenLinks: "warn",
+  onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
 
   i18n: {
@@ -23,105 +22,158 @@ const config = {
 
   presets: [
     [
-      'classic',
-      /** @type {import('@docusaurus/preset-classic').Options} */
-      ({
+      "classic",
+      {
         docs: {
           sidebarPath: "./sidebars.js",
           editUrl:
             "https://github.com/subhadipbhowmik/30-Days-Of-CPP/tree/main/",
         },
         blog: {
-          blogDescription: "Read blog post about C++ programming language",
+          blogDescription: 'Read blog posts about C++ programming language',
           showReadingTime: true,
           editUrl:
             "https://github.com/subhadipbhowmik/30-Days-Of-CPP/tree/main/",
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: require.resolve("./src/css/custom.css"),
         },
-      }),
+        pages: {
+          path: "./src/pages",
+        },
+      },
     ],
   ],
 
-  themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-    ({
-      // Replace with your project's social card
-      algolia: {
-        appId: "SKRAQTXG41",
-        apiKey: "4eadbd9906c2db99f8c4d53bb7202144",
-        indexName: "subhadipbhowmik",
-        contextualSearch: false,
+  themeConfig: {
+    algolia: {
+      appId: "SKRAQTXG41",
+      apiKey: "4eadbd9906c2db99f8c4d53bb7202144",
+      indexName: "subhadipbhowmik",
+      contextualSearch: false,
+    },
+    image: "img/30-days-cpp-banner.png",
+    navbar: {
+      title: "30 Days of CPP",
+      logo: {
+        alt: "30 Days of CPP Programming Logo",
+        src: "img/logo.svg",
       },
-      image: 'img/docusaurus-social-card.jpg',
-      navbar: {
-        title: '30 Days of CPP',
-        logo: {
-          alt: '30 Days Of CPP',
-          src: 'img/logo.svg',
+      items: [
+        {
+          type: "docSidebar",
+          sidebarId: "tutorialSidebar",
+          position: "left",
+          label: "Tutorial",
         },
-        items: [
-          {
-            type: 'docSidebar',
-            sidebarId: 'tutorialSidebar',
-            position: 'left',
-            label: 'Tutorial',
-          },
-          {to: '/blog', label: 'Blog', position: 'left'},
-          {
-            href: 'https://github.com/subhadipbhowmik/30-Days-Of-CPP',
-            label: 'GitHub',
-            position: 'right',
-          },
-        ],
-      },
-      footer: {
-        style: 'dark',
-        links: [
-          {
-            title: 'Learn',
-            items: [
-              {
-                label: 'Tutorial',
-                to: '/docs/intro',
-              },
-              {
-                label: 'Blog',
-                to: '/blog',
-              },
-            ],
-          },
-          {
-            title: 'Community',
-            items: [
-              {
-                label: 'Contributors',
-                href: 'https://github.com/subhadipbhowmik/30-Days-Of-CPP/graphs/contributors',
-              },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'Fork 🍴',
-                to: 'https://github.com/subhadipbhowmik/30-Days-Of-CPP/fork',
-              },
-              {
-                label: 'GitHub',
-                href: 'https://github.com/subhadipbhowmik/30-Days-Of-CPP',
-              },
-            ],
-          },
-        ],
-        copyright: `Copyright © ${new Date().getFullYear()} Built with Open Source 🥑.`,
-      },
-      prism: {
-        theme: prismThemes.github,
-        darkTheme: prismThemes.dracula,
-      },
-    }),
+        { to: "/blog", label: "Blog", position: "left" },
+        {
+          href: "https://github.com/subhadipbhowmik/30-Days-Of-CPP/",
+          label: "GitHub",
+          position: "right",
+        },
+        {
+          to: "/signup",
+          label: "Sign Up",
+          position: "right",
+        },
+        {
+          to: "/login",
+          label: "Login",
+          position: "right",
+        },
+      ],
+    },
+    footer: {
+      style: "dark",
+      links: [
+        {
+          title: " ",
+          items: [
+            {
+              html: `
+                <h1>30 Days of CPP</h1>
+                <p>
+                  30 days of CPP programming challenge is a step-by-step guide to learn CPP programming language in 30 days
+                </p>
+              `,
+            },
+          ],
+        },
+        {
+          title: "Docs",
+          items: [
+            {
+              label: "Tutorial",
+              to: "/docs/intro",
+            },
+          ],
+        },
+        {
+          title: "Community",
+          items: [
+            {
+              label: "Facebook",
+              href: "https://www.facebook.com/",
+            },
+            {
+              label: "Twitter",
+              href: "https://twitter.com/",
+            },
+            {
+              label: "Discord",
+              href: "https://discord.com/",
+            },
+            {
+              label: "Instagram",
+              href: "https://www.linkedin.com/",
+            },
+            {
+              label: "GitHub",
+              href: "https://github.com/",
+            },
+          ],
+        },
+        {
+          title: "More",
+          items: [
+            {
+              label: "Blog",
+              to: "/blog",
+            },
+            {
+              label: "Terms of Service",
+              to: "/terms",
+            },
+            {
+              label: "Privacy Policy",
+              to: "/privacy",
+            },
+          ],
+        },
+        {
+          title: "Newsletter",
+          items: [
+            {
+              html: `
+                <p>Subscribe to our newsletter</p>
+                <form action="https://your-newsletter-signup-url.com" method="post">
+                  <input type="email" name="email" placeholder="Enter your email" required />
+                  <button type="submit">Subscribe</button>
+                </form>
+              `,
+            },
+          ],
+        },
+      ],
+      copyright: `<hr /> Copyright &copy; 2024 <a href="#">30 Days of CPP</a>. All Rights Reserved.`,
+    },
+    prism: {
+      theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
+      additionalLanguages: ["cpp"],
+    },
+  },
 };
 
 export default config;
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -53,3 +53,39 @@
   --box-shadow-hover: 0 6px 10px rgba(0, 0, 0, 0.25);
   --footer-link-hover-bg: linear-gradient(90deg, #21af90, #25c2a0);
 }
+/* src/css/custom.css */
+/* Footer heading size */
+footer h1 {
+  width: 250px;
+  height: auto;
+  margin-right: 10px;
+  margin-top: -15px;
+}
+/* Footer Newsletter Signup Form */
+footer form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+footer input[type="email"] {
+  padding: 0.5em;
+  margin: 0.5em 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 100%;
+  max-width: 300px;
+}
+
+footer button[type="submit"] {
+  padding: 0.5em 1em;
+  background-color: #25c2a0;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+footer button[type="submit"]:hover {
+  background-color: #17816a;
+}