feat(editorial): make background image and footer photo credit dynamic

fezcode · fezcode · commit a45e33d12d3d · 2026-01-17T05:29:15.000+03:00
diff --git a/public/projects/projects.piml b/public/projects/projects.piml
@@ -61,6 +61,9 @@
     (shortDescription) Dush (Dumb Shell) is a custom terminal shell written in Go, intended as a Bash alternative and a learning platform for shell mechanics.
     (date) 2026-01-12
     (image) https://raw.githubusercontent.com/fezcode/dush/main/title-card.png
+    (backgroundImage) /images/bg/tim_simon.jpg
+    (photoCreditText) Photo by Tim Simon
+    (photoCreditLink) https://unsplash.com/photos/a-plane-flying-in-the-sky-with-a-lot-of-clouds-g3XW9EerLmE
 
   > (project)
     (slug) nocturnote
diff --git a/src/components/editorial-project/EditorialFooter.jsx b/src/components/editorial-project/EditorialFooter.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const EditorialFooter = ({ content }) => {
+const EditorialFooter = ({ content, photoCredit }) => {
   return (
     <footer className="border-t border-white/10 py-16 bg-black z-10 relative">
       <div className="max-w-[2400px] mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-4">
@@ -9,11 +9,17 @@ const EditorialFooter = ({ content }) => {
            <span>© {new Date().getFullYear()} Handcrafted by Fezcode &nbsp; · &nbsp; Built with love and code.</span>
         </div>
 
-        <div className="text-[10px] text-white/30 hover:text-white/50 transition-colors uppercase tracking-wider ml-auto">
-            <a href="https://unsplash.com/photos/a-plane-flying-in-the-sky-with-a-lot-of-clouds-g3XW9EerLmE" target="_blank" rel="noopener noreferrer">
-              Photo by Tim Simon
-            </a>
-        </div>
+        {photoCredit?.text && (
+            <div className="text-[10px] text-white/30 hover:text-white/50 transition-colors uppercase tracking-wider ml-auto">
+                {photoCredit.link ? (
+                    <a href={photoCredit.link} target="_blank" rel="noopener noreferrer">
+                    {photoCredit.text}
+                    </a>
+                ) : (
+                    <span>{photoCredit.text}</span>
+                )}
+            </div>
+        )}
 
       </div>
     </footer>
diff --git a/src/components/editorial-project/EditorialGridBackground.jsx b/src/components/editorial-project/EditorialGridBackground.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const EditorialGridBackground = () => {
+const EditorialGridBackground = ({ image }) => {
   return (
     <div aria-hidden="true" className="fixed top-0 left-0 w-full h-full pointer-events-none z-0">
       <svg
@@ -16,12 +16,14 @@ const EditorialGridBackground = () => {
         <line className="stroke-white/10" x1="2354.3941" y1="0" x2="2354.3941" y2="3344" strokeWidth="1" />
       </svg>
             {/* Background Image Overlay */}
-            <img
-              src="/images/bg/tim_simon.jpg"
-              alt=""
-              className="absolute top-0 left-0 w-full h-full object-cover mix-blend-normal opacity-40"
-              style={{ maskImage: 'linear-gradient(to bottom, #000 80%, transparent 100%)' }}
-            />    </div>
+            {image && (
+              <img
+                src={image}
+                alt=""
+                className="absolute top-0 left-0 w-full h-full object-cover mix-blend-normal opacity-40"
+                style={{ maskImage: 'linear-gradient(to bottom, #000 80%, transparent 100%)' }}
+              />
+            )}    </div>
   );
 };
 
diff --git a/src/pages/EditorialProjectDetailsPage.jsx b/src/pages/EditorialProjectDetailsPage.jsx
@@ -74,7 +74,7 @@ const EditorialProjectDetailsPage = () => {
         keywords={projectMetadata?.technologies}
       />
 
-      <EditorialGridBackground />
+      <EditorialGridBackground image={projectMetadata?.backgroundImage} />
 
       <div className="relative z-10 flex flex-col min-h-screen">
         <EditorialNavbar title={projectMetadata?.title || 'Project'} repoLink={projectMetadata?.repo_link} />
@@ -87,7 +87,7 @@ const EditorialProjectDetailsPage = () => {
            <EditorialSocial content={content.social} />
         </main>
 
-        <EditorialFooter content={content.footer} />
+        <EditorialFooter content={content.footer} photoCredit={{ text: projectMetadata?.photoCreditText, link: projectMetadata?.photoCreditLink }} />
       </div>
     </div>
   );
