Skip to content

chore : added new og images #20

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

Merged
Sohan-Rout merged 2 commits into from
Aug 8, 2025
Merged

chore : added new og images #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65ef140
chore : added new og image
Sohan-Rout Aug 8, 2025
0cff6ff
Feat : added daily dsa and og images to selection sort
Sohan-Rout Aug 8, 2025
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
2 changes: 1 addition & 1 deletion app/visualizer/searching/binarysearch/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const metadata = {
export default function Page() {
const paths = [
{ name: "Home", href: "/" },
{ name: "Visulaizer", href: "/visualizer" },
{ name: "Visualizer", href: "/visualizer" },
{ name: "Binary Search", href: "" },
];

Expand Down
2 changes: 1 addition & 1 deletion app/visualizer/searching/linearsearch/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const metadata = {
export default function Page() {
const paths = [
{ name: "Home", href: "/" },
{ name: "Visulaizer", href: "/visualizer" },
{ name: "Visualizer", href: "/visualizer" },
{ name: "Linear Search", href: "" },
];

Expand Down
4 changes: 2 additions & 2 deletions app/visualizer/sorting/bubblesort/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const metadata = {
openGraph: {
images: [
{
url: "/og/bubbleSort.png",
url: "/og/sorting/bubbleSort.png",
width: 1200,
height: 630,
alt: "Bubble Sort Algorithm Visualization",
Expand All @@ -52,7 +52,7 @@ export const metadata = {
export default function Page() {
const paths = [
{ name: "Home", href: "/" },
{ name: "Visulaizer", href: "/visualizer" },
{ name: "Visualizer", href: "/visualizer" },
{ name: "Bubble Sort", href: "" },
];

Expand Down
2 changes: 1 addition & 1 deletion app/visualizer/sorting/insertionsort/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const metadata = {
export default function Page() {
const paths = [
{ name: "Home", href: "/" },
{ name: "Visulaizer", href: "/visualizer" },
{ name: "Visualizer", href: "/visualizer" },
{ name: "Insertion Sort", href: "" },
];

Expand Down
26 changes: 24 additions & 2 deletions app/visualizer/sorting/mergesort/content.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,30 @@ const content = () => {
];

return (
<main className="max-w-4xl mx-auto">
<article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
<div className="col-span-1">
<div className="hidden md:block">
<iframe
src="https://hw.glich.co/resources/embed/daily/dsa"
width="100%"
height="400"
title="Daily DSA Challenge"
></iframe>
</div>
<div className="flex justify-center">
<span className="text-xs hidden md:block">
Powered by{" "}
<a
href="https://hw.glich.co/resources/daily"
target="_blank"
className="underline hover:text-blue-500 duration-300"
>
Hello World
</a>
</span>
</div>
</div>
<article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
{/* What is Merge Sort */}
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
Expand Down
48 changes: 34 additions & 14 deletions app/visualizer/sorting/selectionsort/content.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,30 @@ const content = () => {
];

return (
<main className="max-w-4xl mx-auto">
<article className="bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
<div className="col-span-1">
<div className="hidden md:block">
<iframe
src="https://hw.glich.co/resources/embed/daily/dsa"
width="100%"
height="400"
title="Daily DSA Challenge"
></iframe>
</div>
<div className="flex justify-center">
<span className="text-xs hidden md:block">
Powered by{" "}
<a
href="https://hw.glich.co/resources/daily"
target="_blank"
className="underline hover:text-blue-500 duration-300"
>
Hello World
</a>
</span>
</div>
</div>
<article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
{/* What is Selection Sort */}
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
Expand Down Expand Up @@ -172,9 +194,7 @@ const content = () => {
<span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
{items.points}
</span>
<span className="ml-2">
{items.subpoints}
</span>
<span className="ml-2">{items.subpoints}</span>
</li>
))}
</ul>
Expand All @@ -184,13 +204,13 @@ const content = () => {
</p>

<div className="mt-8">
<ComplexityGraph
bestCase={(n) => n*n}
averageCase={(n) => n*n}
worstCase={(n) => n*n}
maxN={25}
/>
</div>
<ComplexityGraph
bestCase={(n) => n * n}
averageCase={(n) => n * n}
worstCase={(n) => n * n}
maxN={25}
/>
</div>
</div>
</section>

Expand Down Expand Up @@ -250,7 +270,7 @@ const content = () => {
{/* Additional Info */}
<section className="p-6">
<div className="prose dark:prose-invert max-w-none">
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<div className="px-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
{paragraph[3]}
</p>
Expand All @@ -262,4 +282,4 @@ const content = () => {
);
};

export default content;
export default content;
10 changes: 5 additions & 5 deletions app/visualizer/sorting/selectionsort/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const metadata = {
openGraph: {
images: [
{
url: "/og/selectionSort.png",
url: "/og/sorting/selectionSort.png",
width: 1200,
height: 630,
alt: "Selection Sort Algorithm Visualization",
Expand All @@ -60,7 +60,7 @@ export default function Page() {

<div className="py-20 bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200">
<section className="px-6 md:px-12">
<div className="mt-10 sm:mt-10">
<div className="mt-10 sm:mt-10 mb-4">
<Breadcrumbs paths={paths} />
</div>

Expand All @@ -84,14 +84,14 @@ export default function Page() {
<Animation />
</section>

<section>
<section className="px-6">
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-2">
Test Your Knowledge before moving forward!
</p>
<Quiz />
</section>

<section>
<section className="px-6">
<Code />
</section>

Expand All @@ -104,7 +104,7 @@ export default function Page() {
/>
</section>

<section>
<section className="px-6">
<ExploreOther
title="Explore Sorting Algorithms"
links={[
Expand Down
61 changes: 11 additions & 50 deletions app/visualizer/sorting/selectionsort/quiz.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,39 +88,30 @@ const SelectionSortQuiz = () => {
const [selectedAnswer, setSelectedAnswer] = useState(null);
const [score, setScore] = useState(0);
const [showResult, setShowResult] = useState(false);
const [setQuizCompleted] = useState(false);
const [quizCompleted, setQuizCompleted] = useState(false);
const [answers, setAnswers] = useState(Array(questions.length).fill(null));
const [showExplanation, setShowExplanation] = useState(false);
const [showIntro, setShowIntro] = useState(true);
const [showSuccessAnimation, setShowSuccessAnimation] = useState(false);
const [penaltyApplied, setPenaltyApplied] = useState(false);

const handleAnswerSelect = (optionIndex) => {
if (selectedAnswer !== null) return;
setSelectedAnswer(optionIndex);
const newAnswers = [...answers];
newAnswers[currentQuestion] = optionIndex;
setAnswers(newAnswers);
};

const handleNextQuestion = () => {
if (selectedAnswer === null) return;

if (showExplanation && !penaltyApplied) {
setScore(prevScore => Math.max(0, prevScore - 0.5));
setPenaltyApplied(true);
}

if (selectedAnswer === questions[currentQuestion].correctAnswer) {
setScore(score + 1);
}

setShowExplanation(false);
setPenaltyApplied(false);

const newAnswers = [...answers];
newAnswers[currentQuestion] = selectedAnswer;
setAnswers(newAnswers);

const newScore = newAnswers.reduce((acc, ans, idx) => {
return ans === questions[idx].correctAnswer ? acc + 1 : acc;
}, 0);
setScore(newScore);

if (currentQuestion < questions.length - 1) {
setCurrentQuestion(currentQuestion + 1);
setSelectedAnswer(null);
setSelectedAnswer(newAnswers[currentQuestion + 1]);
} else {
setShowSuccessAnimation(true);
setTimeout(() => {
Expand All @@ -132,7 +123,6 @@ const SelectionSortQuiz = () => {
};

const handlePreviousQuestion = () => {
setShowExplanation(false);
setCurrentQuestion(currentQuestion - 1);
setSelectedAnswer(answers[currentQuestion - 1]);
};
Expand All @@ -144,9 +134,7 @@ const SelectionSortQuiz = () => {
setShowResult(false);
setQuizCompleted(false);
setAnswers(Array(questions.length).fill(null));
setShowExplanation(false);
setShowIntro(true);
setPenaltyApplied(false);
};

const calculateWeakAreas = () => {
Expand Down Expand Up @@ -220,10 +208,6 @@ const SelectionSortQuiz = () => {
<FaTimes className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
<span>0 points for wrong answers</span>
</li>
<li className="flex items-start">
<FaInfoCircle className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
<span>-0.5 point penalty for viewing explanations</span>
</li>
<li className="flex items-start">
<FaTrophy className="text-blue-500 mt-1 mr-2 flex-shrink-0" />
<span>Earn stars based on your final score (max 5 stars)</span>
Expand Down Expand Up @@ -325,29 +309,6 @@ const SelectionSortQuiz = () => {
))}
</div>

{selectedAnswer !== null && (
<div className="mb-6">
<button
onClick={() => setShowExplanation(!showExplanation)}
className="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:underline mb-2"
>
<FaInfoCircle className="mr-1" />
{showExplanation ? "Hide Explanation" : "Show Explanation"}
</button>
<AnimatePresence>
{showExplanation && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-sm overflow-hidden"
>
{questions[currentQuestion].explanation}
</motion.div>
)}
</AnimatePresence>
</div>
)}
</motion.div>

<div className="flex justify-between">
Expand Down
Binary file removed public/og/bubbleSort.png
View file
Open in desktop
Binary file not shown.
Binary file removed public/og/selectionSort.png
View file
Open in desktop
Binary file not shown.
Binary file added public/og/sorting/bubbleSort.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/og/sorting/selectionSort.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading