Skip to content

feat: Add Aossie github link on navbar (#16) #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
akshat3410 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: Add Aossie github link on navbar (#16) #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
06762e1
feat: Add Aossie github link on navbar (#16)
akshat3410 Mar 6, 2026
78dda42
chore: sync package-lock.json
akshat3410 Mar 8, 2026
e606b41
sync
akshat3410 Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
content="PictoPy - Advanced desktop gallery application powered by Tauri, React, and Rust"
/>
<title>PictoPy</title>
<script type="module" crossorigin src="/assets/index-C5vtocBI.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B2IaS9E7.css">
<script type="module" crossorigin src="/assets/index-BJeuyIYS.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BBSWjhFA.css">
</head>
<body class="light">
<div id="root"></div>
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

101 changes: 74 additions & 27 deletions src/Pages/Landing page/Home1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { motion } from "framer-motion";
import { useEffect, useRef, useState } from "react";
import { useOS } from "../../hooks/useOS";

const ShuffleHero = () => {
// Function to scroll to downloads section
const scrollToDownloads = () => {
const downloadsSection = document.getElementById('downloads-section');
if (downloadsSection) {
Expand All @@ -13,6 +13,23 @@ const ShuffleHero = () => {
}
};

const os = useOS();

const getButtonContent = () => {
switch (os) {
case "mac":
return { text: "Download for Mac", href: "#mac-download-placeholder" };
case "windows":
return { text: "Download for Windows", href: "#windows-download-placeholder" };
case "linux":
return { text: "Download for Linux (.deb)", href: "#linux-download-placeholder" };
Comment on lines +20 to +25
Copy link

@coderabbitai coderabbitai bot Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

The hero download CTA now resolves to dead hashes.

#mac-download-placeholder, #windows-download-placeholder, and #linux-download-placeholder do not match any target in the provided code. src/Pages/pictopy-landing.tsx already owns the real release handling, and the only known in-page target here is #downloads-section, so desktop users now lose the primary download path.

🧭 Safe fallback until the real release URLs are wired into this component 
       case "mac":
-        return { text: "Download for Mac", href: "#mac-download-placeholder" };
+        return { text: "Download for Mac", href: "#downloads-section" };
       case "windows":
-        return { text: "Download for Windows", href: "#windows-download-placeholder" };
+        return { text: "Download for Windows", href: "#downloads-section" };
       case "linux":
-        return { text: "Download for Linux (.deb)", href: "#linux-download-placeholder" };
+        return { text: "Download for Linux (.deb)", href: "#downloads-section" };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
case "mac":
return { text: "Download for Mac", href: "#mac-download-placeholder" };
case "windows":
return { text: "Download for Windows", href: "#windows-download-placeholder" };
case "linux":
return { text: "Download for Linux (.deb)", href: "#linux-download-placeholder" };
case "mac":
return { text: "Download for Mac", href: "#downloads-section" };
case "windows":
return { text: "Download for Windows", href: "#downloads-section" };
case "linux":
return { text: "Download for Linux (.deb)", href: "#downloads-section" };
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/Pages/Landing` page/Home1.tsx around lines 20 - 25, The download CTAs in
Home1.tsx currently return dead fragment links; update the cases for "mac",
"windows", and "linux" to point to the in-page downloads anchor by returning
href: "#downloads-section" (e.g., keep text as-is but replace href for the three
cases), or wire them to the real release URLs in src/Pages/pictopy-landing.tsx
if available; locate the switch handling those platform strings in Home1.tsx and
change the href values accordingly.

Comment on lines +21 to +25
Copy link

@coderabbitai coderabbitai bot Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Externalize the new CTA copy.

The OS-specific labels and Looking for another OS? are hard-coded in the component. Please move them into the i18n resources instead of embedding them here.

As per coding guidelines, "Internationalization: User-visible strings should be externalized to resource files (i18n)".

Also applies to: 119-119

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/Pages/Landing` page/Home1.tsx around lines 21 - 25, The OS-specific CTA
labels ("Download for Mac", "Download for Windows", "Download for Linux (.deb)")
and the "Looking for another OS?" string are hard-coded in the Home1 component;
extract these into i18n resource keys (e.g. landing.cta.download_mac,
landing.cta.download_windows, landing.cta.download_linux, landing.cta.other_os)
and replace the literal strings in the switch/return objects and at the other
occurrence (the "Looking for another OS?" usage) with the i18n lookups (e.g.
using t('...')). Update any tests or snapshot text if present and ensure the
href values remain unchanged.

default:
return { text: "Download", href: undefined };
}
};

const btnContent = getButtonContent();

return (
<section className="w-full px-8 py-12 grid grid-cols-1 md:grid-cols-2 items-center gap-8 max-w-6xl mx-auto bg-white dark:bg-black transition-colors duration-300">
<div className="font-['Inter',_sans-serif]">
Expand Down Expand Up @@ -43,33 +60,63 @@ const ShuffleHero = () => {
Advanced desktop gallery application powered by Tauri, React, and Rust with a Python backend for intelligent image analysis and seamless management.
</motion.p>

<div className="flex space-x-4">
{/* Download button - scrolls to downloads section */}
<motion.button
onClick={scrollToDownloads}
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.6 }}
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.98 }}
className="bg-gradient-to-r from-yellow-500 to-green-500 text-white font-medium py-2 px-6 rounded transition-all shadow-sm hover:shadow-md"
>
Download
</motion.button>

{/* View Docs button - links to documentation */}
<motion.a
href="https://aossie-org.github.io/PictoPy/"
target="_blank"
rel="noopener noreferrer"
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.7 }}
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.98 }}
className="border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 font-medium py-2 px-6 rounded transition-all hover:border-teal-500 hover:text-teal-500"
<div className="flex flex-col items-start gap-3">
<div className="flex space-x-4">
{/* Dynamic Download button */}
{os === "unknown" ? (
<motion.button
onClick={scrollToDownloads}
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.6 }}
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.98 }}
className="bg-gradient-to-r from-yellow-500 to-green-500 text-white font-medium py-2 px-6 rounded transition-all shadow-sm hover:shadow-md"
>
{btnContent.text}
</motion.button>
) : (
<motion.a
href={btnContent.href}
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.6 }}
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.98 }}
className="bg-gradient-to-r from-yellow-500 to-green-500 text-white font-medium py-2 px-6 rounded transition-all shadow-sm hover:shadow-md"
>
{btnContent.text}
</motion.a>
)}

{/* View Docs button - links to documentation */}
<motion.a
href="https://aossie-org.github.io/PictoPy/"
target="_blank"
rel="noopener noreferrer"
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.5, delay: 0.7 }}
whileHover={{ scale: 1.03 }}
whileTap={{ scale: 0.98 }}
className="border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200 font-medium py-2 px-6 rounded transition-all hover:border-teal-500 hover:text-teal-500 inline-block text-center flex items-center justify-center"
>
View Docs
</motion.a>
</div>

<motion.a
href="#downloads-section"
onClick={(e) => {
e.preventDefault();
scrollToDownloads();
}}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.8 }}
className="text-xs md:text-sm text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors underline underline-offset-2"
>
View Docs
Looking for another OS?
</motion.a>
</div>
</div>
Expand Down
27 changes: 26 additions & 1 deletion src/Pages/Landing page/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { Menu, X } from "lucide-react";
import { Menu, X, Github } from "lucide-react";
import { Button } from "@/components/ui/button";
import YourLogo from "@/assets/38881995.png"; // Update this import path to your logo

Expand Down Expand Up @@ -146,6 +146,19 @@ const Navbar: React.FC = () => {
<div className="hidden md:flex items-center space-x-8">
<NavLink to="/">Home</NavLink>

{/* GitHub Repository Link */}
<a
href="https://github.com/AOSSIE-Org/PictoPy"
target="_blank"
rel="noopener noreferrer"
className="text-gray-800 dark:text-gray-300
hover:text-black dark:hover:text-white
transition-colors duration-300"
aria-label="AOSSIE PictoPy GitHub Repository"
>
<Github className="h-5 w-5" />
</a>
Comment on lines +149 to +160
Copy link

@coderabbitai coderabbitai bot Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider extracting the GitHub URL to a constant.

The GitHub repository URL https://github.com/AOSSIE-Org/PictoPy is duplicated in both the desktop (line 151) and mobile (line 211) navigation sections. Extracting it to a constant improves maintainability.

♻️ Proposed refactor

Add a constant at the top of the component or in a shared constants file:

const GITHUB_REPO_URL = "https://github.com/AOSSIE-Org/PictoPy";

Then reference it in both links:

 <a
-  href="https://github.com/AOSSIE-Org/PictoPy"
+  href={GITHUB_REPO_URL}
   target="_blank"

Also applies to: 210-221

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/Pages/Landing` page/Navbar.tsx around lines 149 - 160, Extract the
duplicated GitHub URL string into a single constant (e.g., GITHUB_REPO_URL) and
replace the hard-coded URL in both anchor tags in the Navbar component so both
desktop and mobile links reference that constant; add the constant near the top
of Navbar.tsx (or in a shared constants file) and update the href attributes in
the anchors that render the Github icon to use GITHUB_REPO_URL.


{/* Dark Mode Toggle Button */}
<button
onClick={() => setDarkMode(!darkMode)}
Expand Down Expand Up @@ -194,6 +207,18 @@ const Navbar: React.FC = () => {
<NavLink to="/" onClick={() => setIsOpen(false)}>
Home
</NavLink>
<a
href="https://github.com/AOSSIE-Org/PictoPy"
target="_blank"
rel="noopener noreferrer"
className="text-gray-700 dark:text-gray-300 text-lg font-medium
hover:text-black dark:hover:text-white
transition duration-300 flex items-center space-x-2"
onClick={() => setIsOpen(false)}
>
<Github className="h-5 w-5" />
<span>GitHub</span>
</a>
Comment on lines +210 to +221
Copy link

@coderabbitai coderabbitai bot Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Externalize the user-visible string for i18n.

The "GitHub" text on line 220 is hardcoded. Per coding guidelines, user-visible strings should be externalized to resource files for internationalization.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/Pages/Landing` page/Navbar.tsx around lines 210 - 221, The "GitHub" label
in the Navbar anchor is hardcoded; update the Navbar component to use the i18n
resource lookup instead (e.g., t('github') or a shared strings object) in place
of the literal "GitHub", add the corresponding key ("github": "GitHub") to the
translation/resource files for supported locales, and ensure the anchor still
calls setIsOpen(false) and renders the Github icon component exactly as before;
also provide a sensible fallback if the i18n key is missing.

<NavLink to="#features" isScrollLink={true} onClick={() => setIsOpen(false)}>
Feature
</NavLink>
Expand Down
26 changes: 26 additions & 0 deletions src/hooks/useOS.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { useState, useEffect } from "react";

export type OS = "mac" | "windows" | "linux" | "unknown";

export const useOS = (): OS => {
const [os, setOS] = useState<OS>("unknown");

useEffect(() => {
// Avoid running on server side during SSR
if (typeof window === "undefined") return;

const userAgent = window.navigator.userAgent.toLowerCase();

if (userAgent.includes("mac")) {
setOS("mac");
} else if (userAgent.includes("win")) {
setOS("windows");
} else if (userAgent.includes("linux") && !userAgent.includes("android")) {
Comment on lines +12 to +18
Copy link

@coderabbitai coderabbitai bot Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Exclude iOS/iPadOS from the macOS branch.

Apple mobile user agents include Mac OS X/Macintosh tokens, so this ordering can classify iPhone/iPad visitors as mac. That sends unsupported mobile traffic down the desktop download path instead of the generic downloads flow.

📱 Minimal fix 
         const userAgent = window.navigator.userAgent.toLowerCase();
+        const isAppleMobile =
+            /iphone|ipad|ipod/.test(userAgent) ||
+            (window.navigator.platform === "MacIntel" &&
+                window.navigator.maxTouchPoints > 1);
 
-        if (userAgent.includes("mac")) {
+        if (isAppleMobile) {
+            setOS("unknown");
+        } else if (userAgent.includes("mac")) {
             setOS("mac");
         } else if (userAgent.includes("win")) {
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.includes("mac")) {
setOS("mac");
} else if (userAgent.includes("win")) {
setOS("windows");
} else if (userAgent.includes("linux") && !userAgent.includes("android")) {
const userAgent = window.navigator.userAgent.toLowerCase();
const isAppleMobile =
/iphone|ipad|ipod/.test(userAgent) ||
(window.navigator.platform === "MacIntel" &&
window.navigator.maxTouchPoints > 1);
if (isAppleMobile) {
setOS("unknown");
} else if (userAgent.includes("mac")) {
setOS("mac");
} else if (userAgent.includes("win")) {
setOS("windows");
} else if (userAgent.includes("linux") && !userAgent.includes("android")) {
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/hooks/useOS.ts` around lines 12 - 18, The mac detection in the useOS hook
incorrectly classifies iOS/iPadOS because mobile Apple user agents include "mac"
tokens; update the mac branch condition in the useOS hook (the logic that reads
window.navigator.userAgent and calls setOS("mac")) to exclude Apple mobile
tokens by ensuring userAgent.includes("mac") && !userAgent.includes("iphone") &&
!userAgent.includes("ipad") && !userAgent.includes("ipod") (and optionally
!userAgent.includes("ios") or other mobile markers) so iPhone/iPad visitors fall
through to the generic/mobile detection instead of the desktop mac path.

setOS("linux");
} else {
setOS("unknown");
}
}, []);

return os;
};
2 changes: 1 addition & 1 deletion tsconfig.app.tsbuildinfo
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/pages/pictopy-landing.tsx","./src/pages/demo/marqu.tsx","./src/pages/faqpage/faq.tsx","./src/pages/footer/footer.tsx","./src/pages/howitworks/howitworks.tsx","./src/pages/landing page/home1.tsx","./src/pages/landing page/navbar.tsx","./src/components/ui/bouncy card features.tsx","./src/components/ui/features.tsx","./src/components/ui/scrollprogress.tsx","./src/components/ui/smoothscroll.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/context/theme-provider.tsx","./src/lib/utils.ts"],"version":"5.7.3"}
{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/pages/pictopy-landing.tsx","./src/pages/demo/marqu.tsx","./src/pages/faqpage/faq.tsx","./src/pages/footer/footer.tsx","./src/pages/howitworks/howitworks.tsx","./src/pages/landing page/home1.tsx","./src/pages/landing page/navbar.tsx","./src/components/ui/bouncy card features.tsx","./src/components/ui/features.tsx","./src/components/ui/scrollprogress.tsx","./src/components/ui/smoothscroll.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/context/theme-provider.tsx","./src/hooks/useos.ts","./src/lib/utils.ts"],"version":"5.7.3"}
Copy link

@coderabbitai coderabbitai bot Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
echo "Tracked .tsbuildinfo files:"
git ls-files | rg '(^|/)[^/]+\.tsbuildinfo$' || true

echo
echo ".gitignore rules mentioning tsbuildinfo:"
rg -n --hidden --glob '.gitignore' 'tsbuildinfo'

Repository: AOSSIE-Org/PictoPy-Website

Length of output: 190

Add .tsbuildinfo files to .gitignore.

Generated TypeScript build metadata files (tsconfig.app.tsbuildinfo and tsconfig.node.tsbuildinfo) are currently tracked. These create noisy, environment-specific diffs across machines and should not be versioned. Add them to .gitignore.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@tsconfig.app.tsbuildinfo` at line 1, The tsconfig build metadata files
(tsconfig.app.tsbuildinfo and tsconfig.node.tsbuildinfo) are tracked and should
be ignored; update .gitignore to include these filenames, then remove them from
the repository index so they stop generating diffs (e.g., git rm --cached) while
leaving local copies intact; ensure the commit references adding
"tsconfig.app.tsbuildinfo" and "tsconfig.node.tsbuildinfo" to .gitignore and
removing them from tracking.

Loading