Dev

TODO.md

@@ -42,7 +42,14 @@
   - Add PDF Reader or Modal on Project Details.
   - Implemet Full Text Search.
   - Configure for MySQL Database.
-  - Generate normal requirements.txt
+  - Generate normal requirements.txt.
+  - (DONE) Fix File Browser in cPanel.
+  - Make Swagger, Redoc, Filebrowser is authenticated required.
+  - Implement if blog content contains code, then don't show reading time.
+  - Investigate about RSS and Newsletter.
+  - Make frontend server.js Allowed Hosts come from env.
+  - Auto remove unused files (media) from backend.
+  - Fix order non null violetion in Projects Section.
 
 ## Bug Fix
 

backend/config/settings.py

@@ -289,7 +289,8 @@
 }
 
 # Django Filebrowser Configuration
-FILEBROWSER_DIRECTORY = ""
+FILEBROWSER_DIRECTORY = ''
+DIRECTORY = ''
 FILEBROWSER_ADMIN_THUMBNAIL="admin_thumbnail"
 FILEBROWSER_ADMIN_VERSIONS=['thumbnail', 'small', 'medium', 'big', 'large']
 FILEBROWSER_VERSION_QUALITY=90
@@ -323,6 +324,7 @@
 # ----------------------------------------------------
 # *** Configurable Values ***
 # ----------------------------------------------------
+BACKEND_SUBDOMAIN = "/backend"
 BLOG_WORDS_PER_MINUTE = 200
-LOGIN_URL = "/admin/login/"
+LOGIN_URL = BACKEND_SUBDOMAIN + "/admin/login/"
 LOGOUT_REDIRECT_URL = '/'

backend/portfolios/api/professional_experiences/views.py

@@ -11,3 +11,16 @@ class ProfessionalExperienceViewset(GenericViewSet, ListModelMixin):
     permission_classes = (permissions.IsAuthenticated,)
     queryset = ProfessionalExperience.objects.all()
     serializer_class = ProfessionalExperienceSerializer
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        limit = self.request.query_params.get('_limit')
+
+        if limit:
+            try:
+                limit = int(limit)
+                queryset = queryset[:limit]
+            except ValueError:
+                pass
+
+        return queryset

frontend/.env.example

@@ -4,12 +4,6 @@ EMAIL_JS_SERVICE_ID=
 EMAIL_JS_TEMPLATE_ID=
 EMAIL_JS_PUBLIC_KEY=
 
-
-# I've used this api to get the personal stats of my dev.to blog
-# You can generate you `api-key` through https://dev.to/settings/account
-NEXT_PUBLIC_BLOGS_API=
-
-
 # Google Analytics
 NEXT_PUBLIC_GA_MEASUREMENT_ID=
 
@@ -19,8 +13,7 @@ GA_CLIENT_EMAIL=
 GA_PRIVATE_KEY=
 
 # Spotify API TOKENS
-# This is little bit complex complex process. So, I have made a full tutorial how you can get your credentials
-# visit here - https://j471n.in/blogs/spotify-api-nextjs
+# Tutorial - https://j471n.in/blogs/spotify-api-nextjs
 SPOTIFY_CLIENT_ID=
 SPOTIFY_CLIENT_SECRET=
 SPOTIFY_REFRESH_TOKEN=
@@ -29,15 +22,6 @@ SPOTIFY_REFRESH_TOKEN=
 # Your URI ID such as - example@bank (remove this if you are not using UPI Integretion)
 NEXT_PUBLIC_UPI=
 
-
-# Supabase for projects and certificates data
-# I am using ISR to fetch the data from Supabase using REST API
-SUPABASE_URL=
-SUPABASE_KEY=
-
-# Supbase Webhook Revalidate Secret
-REVALIDATE_SECRET=
-
 # Backend API URL
 BACKEND_API_BASE_URL=
 

frontend/components/Certificates.tsx

@@ -10,6 +10,7 @@ import { popUpFromBottomForText } from '@content/FramerMotionVariants'
 import Link from 'next/link'
 import { CertificateType, MediaType } from '@lib/types'
 import MediaModal from '@components/Modals/MediaModal'
+import NoData from "@components/NoData"
 
 export default function CertificateSection() {
   const [certificates, setCertificates] = useState([])
@@ -24,8 +25,10 @@ export default function CertificateSection() {
   }
 
   // ******* Loader Starts *******
-  if (certificates.length === 0) {
-    return <div>Loading...</div>
+  if (certificates.length < 1) {
+    return (
+      <NoData topic="Certificates" />
+    )
   }
   // ******* Loader Ends *******
 

frontend/components/CreateAnIssue.tsx

@@ -8,7 +8,7 @@ export default function CreateAnIssue() {
         Something went wrong. I know you don't know what's the problem. So Let
         me know by{" "}
         <Link
-          href="https://github.com/j471n/j471n.in/issues/new"
+          href="https://github.com/NumanIbnMazid/issues/issues/new"
           target="_blank"
           rel="noopener noreferrer"
           className="font-bold underline hover:text-blue-500 "

frontend/components/Home/ExperienceSection.tsx

@@ -13,14 +13,7 @@ export default function ExperienceSection({ experiences }: { experiences: Experi
   const router = useRouter()
   const isHomePage = router.pathname === '/'
   // limit experiences to 1 if on home page otherwise show all
-  const experiencesToDisplay = isHomePage ? experiences.slice(0, 1) : experiences
-
-  // ******* Loader Starts *******
-  if (experiences.length === 0) {
-    return <div>Loading...</div>
-  }
-  // ******* Loader Ends *******
-
+  // const experiencesToDisplay = isHomePage ? experiences.slice(0, 1) : experiences
   return (
     <section className="mx-5">
       <div>
@@ -46,9 +39,9 @@ export default function ExperienceSection({ experiences }: { experiences: Experi
             seeking opportunities to learn and expand my skill set. Here's a brief rundown of my professional
             experiences.
           </p>
-          {experiencesToDisplay ? (
+          {experiences ? (
             <TimelineList>
-              {experiencesToDisplay.map((experience: ExperienceType, index) => (
+              {experiences.map((experience: ExperienceType, index) => (
                 <motion.div
                   key={index}
                   variants={popUp}

frontend/components/Home/SkillSection.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react'
 import Image from 'next/image'
 import { getAllSkills } from '@lib/backendAPI'
 import { SkillType } from '@lib/types'
+import NoData from "@components/NoData"
 
 export default function SkillSection() {
   const [skills, setSkills] = useState<SkillType[]>([])
@@ -20,8 +21,10 @@ export default function SkillSection() {
   }
 
   // ******* Loader Starts *******
-  if (skills.length === 0) {
-    return <div>Loading...</div>
+  if (skills.length < 1) {
+    return (
+      <NoData topic="Skills" />
+    )
   }
   // ******* Loader Ends *******
 

frontend/components/Interest.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react'
 import Image from 'next/image'
 import { getAllInterests } from '@lib/backendAPI'
 import { InterestType } from '@lib/types'
+import NoData from "@components/NoData"
 
 
 export default function InterestSection() {
@@ -21,8 +22,10 @@ export default function InterestSection() {
   }
 
   // ******* Loader Starts *******
-  if (interests.length === 0) {
-    return <div>Loading...</div>
+  if (interests.length < 1) {
+    return (
+      <NoData topic="Interests" />
+    )
   }
   // ******* Loader Ends *******
 

frontend/components/Loader.tsx

@@ -0,0 +1,29 @@
+export default function Loader() {
+  return (
+    <div className="flex items-center justify-center mt-12 p-12 relative max-w-4xl mx-auto bg-darkWhitePrimary dark:bg-darkPrimary dark:text-gray-100 2xl:max-w-5xl 3xl:max-w-7xl">
+      <div className="flex flex-col items-center">
+        <svg
+          className="animate-spin h-16 w-16 text-gray-600"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647zM20 12c0-3.042-1.135-5.824-3-7.938l-3 2.647A7.962 7.962 0 0120 12h4a8 8 0 01-8 8v-4z"
+          ></path>
+        </svg>
+        <span className="mt-4 font-bold text-slate-600">Loading ...</span>
+      </div>
+    </div>
+  )
+}
+

frontend/components/MDXComponents/Figcaption.tsx

@@ -1,38 +1,20 @@
-import Image from "next/image"
+import Image from 'next/image'
 
 type Props = {
   src: string;
   caption?: string;
-  alt: string;
+  alt?: string;
 };
 
 export default function figcaption({ src, caption, alt }: Props) {
   if (caption !== undefined) {
     return (
       <figure>
-        {/* <img src={src} alt={alt} /> */}
-        <Image
-          src={src}
-          className=""
-          width={100}
-          height={100}
-          alt={alt}
-          quality={75}
-          priority
-        />
+        <Image src={src} alt={alt || "Image"} width={1000} height={1000} quality={75} style={{ width: "auto", height: "auto" }} />
         <figcaption>{caption}</figcaption>
       </figure>
     );
   } else {
-    // return <img src={src} alt={alt} />
-    return <Image
-          src={src}
-          className=""
-          width={100}
-          height={100}
-          alt={alt}
-          quality={75}
-          priority
-        />
+    return <Image src={src} alt={alt || "Image"} width={1000} height={1000} quality={75} style={{ width: "auto", height: "auto" }} />
   }
 }

frontend/components/NoData.tsx

@@ -0,0 +1,10 @@
+export default function NoData({ topic }: { topic: string }) {
+  return (
+    <div className="flex justify-center p-16">
+      <div className="text-yellow-700 dark:text-yellow-600">
+        <span className="font-extrabold text-lg">{topic} </span>
+        Data not available!
+      </div>
+    </div>
+  )
+}

frontend/components/ProjectSection.tsx

@@ -13,12 +13,6 @@ import { headingFromLeft } from "@content/FramerMotionVariants"
 
 
 export default function ProjectSection({ projects }: { projects: ProjectType[] }) {
-  // ******* Loader Starts *******
-  if (projects.length === 0) {
-    return <div>Loading...</div>
-  }
-  // ******* Loader Ends *******
-
   return (
     <section className="mx-5">
       <div>

frontend/components/ShareOnSocialMedia.tsx

@@ -80,7 +80,7 @@ export default function ShareOnSocialMedia({
             <GrFacebookOption className="w-4 h-4" />
           </div>
         </FacebookShareButton>
-        <TwitterShareButton title={title} url={url} related={["@j471n_"]}>
+        <TwitterShareButton title={title} url={url} related={["@NumanIbnMazid"]}>
           <div className="p-2 text-white bg-gray-700 rounded-full hover:bg-cyan-700">
             <GrTwitter className="w-4 h-4" />
           </div>

frontend/components/SnippetCard.tsx

@@ -7,7 +7,7 @@ export default function SnippetCard({ code_snippet }: { code_snippet: CodeSnippe
     <Link
       href={`code-snippets/${code_snippet.slug}`}
       title="View Code Snippet Details"
-      className="w-full p-4 ring-1 ring-gray-300 hover:ring-gray-400 dark:ring-[#444] bg-white dark:bg-transparent dark:hover:bg-darkSecondary dark:hover:ring-[#555] flex flex-col gap-2 rounded"
+      className="w-full p-4 bg-darkWhiteSecondary dark:bg-darkFourth ring-1 ring-gray-300 hover:ring-gray-400 dark:ring-[#444] dark:hover:bg-darkSecondary dark:hover:ring-[#555] flex flex-col gap-2 rounded"
     >
       <div className="p-1 overflow-hidden w-fit">
         <Image src={code_snippet.image} alt={code_snippet.title} width={40} height={40}></Image>

frontend/components/StaticPage.tsx

@@ -24,7 +24,7 @@ export default function StaticPage({
         keywords={metadata.keywords}
       />
 
-      <section className="pageTop">
+      <section className="pageTop bg-darkWhitePrimary dark:bg-darkPrimary">
         <PageTop containerClass="mb-0" pageTitle={page.meta.title}>
           {showDescription && (metadata.description || page.meta.excerpt)}
         </PageTop>

frontend/components/TopNavbar.tsx

@@ -18,9 +18,7 @@ import { DarkModeSwitch } from "react-toggle-dark-mode";
 export default function TopNavbar() {
   const navRef = useRef<HTMLDivElement>(null);
 
-  /*  Using to control animation as I'll show the name to the mobile navbar when you scroll a bit
-   * demo: https://i.imgur.com/5LKI5DY.gif
-   */
+  // Using to control animation as I'll show the name to the mobile navbar when you scroll a bit
   const control = useAnimation();
   const [navOpen, setNavOpen] = useState(false);
   const { isDarkMode, changeDarkMode } = useDarkMode();
@@ -33,7 +31,7 @@ export default function TopNavbar() {
           "shadow",
           "backdrop-blur-xl",
           "bg-white/70",
-          "dark:bg-darkSecondary",
+          "dark:bg-darkFourth",
         ]
       );
 
@@ -44,7 +42,7 @@ export default function TopNavbar() {
           "shadow",
           "backdrop-blur-xl",
           "bg-white/70",
-          "dark:bg-darkSecondary",
+          "dark:bg-darkFourth",
         ]
       );
       control.start("hidden");
@@ -72,7 +70,7 @@ export default function TopNavbar() {
 
   return (
     <div
-      className="fixed w-full dark:text-white top-0 flex items-center justify-between px-4 py-[10px] sm:px-6 z-50 print:hidden"
+      className="fixed w-full dark:text-white top-0 flex items-center justify-between px-4 py-[10px] sm:px-6 z-50 print:hidden backdrop-blur transition-colors duration-500 supports-backdrop-blur:bg-white/60"
       ref={navRef}
     >
       {/* Mobile Navigation Hamburger and MobileMenu */}