chore: adding jsonld to questions page (#399)

Author: Logannford

next.config.js

@@ -29,6 +29,11 @@ const nextConfig = {
         destination: '/features/roadmap',
         permanent: true,
       },
+      {
+        source: '/features/daily-challenges',
+        destination: '/features/daily-coding-challenges',
+        permanent: true,
+      },
     ];
   },
   async headers() {

src/app/(app)/(default_layout)/(questions)/questions/explore/page.tsx

@@ -1,7 +1,7 @@
 import QuestionPageSidebar from '@/components/app/questions/layout/question-page-sidebar';
 import QuestionsCarouselList from '@/components/app/questions/layout/carousel/question-carousel-list';
 import Hero from '@/components/global/hero';
-import { createMetadata } from '@/utils';
+import { createMetadata } from '@/utils/seo';
 import { Button } from '@/components/ui/button';
 import { useUserServer } from '@/hooks/use-user-server';
 

src/app/(app)/(default_layout)/(questions)/questions/page.tsx

@@ -11,7 +11,7 @@ import { useUserServer } from '@/hooks/use-user-server';
 import { validateSearchParams } from '@/utils/search-params';
 import { parseSearchParams } from '@/utils/search-params';
 import { getTags } from '@/utils/data/questions/tags/get-tags';
-import { createMetadata } from '@/utils';
+import { createMetadata } from '@/utils/seo';
 import { Button } from '@/components/ui/button';
 import LoadingQuestions from '@/components/app/questions/loading/loading-questions';
 import { Suspense } from 'react';

src/app/(app)/(default_layout)/(questions)/questions/previous/page.tsx

@@ -11,7 +11,7 @@ import { useUserServer } from '@/hooks/use-user-server';
 import { validateSearchParams } from '@/utils/search-params';
 import { parseSearchParams } from '@/utils/search-params';
 import { getTags } from '@/utils/data/questions/tags/get-tags';
-import { createMetadata } from '@/utils';
+import { createMetadata } from '@/utils/seo';
 import { Button } from '@/components/ui/button';
 
 export async function generateMetadata() {

src/app/(app)/(default_layout)/leaderboard/page.tsx

@@ -4,7 +4,7 @@ import LeaderboardLongestStreaks from '@/components/app/leaderboard/leaderboard-
 import LeaderboardMostQuestionsAnswered from '@/components/app/leaderboard/leaderboard-most-questions-answered';
 import LeaderboardTodayBoard from '@/components/app/leaderboard/leaderboard-today-board';
 import { useUserServer } from '@/hooks/use-user-server';
-import { createMetadata } from '@/utils';
+import { createMetadata } from '@/utils/seo';
 
 export async function generateMetadata() {
   return createMetadata({

src/app/(app)/(questions)/question/[slug]/layout.tsx

@@ -5,9 +5,33 @@ import { Separator } from '@/components/ui/separator';
 import FeedbackButton from '@/components/ui/feedback-button';
 import SidebarLayoutTrigger from '@/components/global/navigation/sidebar-layout-trigger';
 import RandomQuestion from '@/components/global/random-question';
+import { createMetadata, getQuestionEducationLevel } from '@/utils/seo';
+import { capitalise, getBaseUrl } from '@/utils';
 
 // Actions
 import { getQuestion } from '@/utils/data/questions/get';
+import { QuizJsonLd } from '@/types/Seo';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}) {
+  const question = await getQuestion('slug', params.slug);
+  // get the title via slug and removing the - from the slug
+  const title = question?.slug?.replace(/-/g, ' ') || 'Coding Question';
+
+  return createMetadata({
+    title: `${capitalise(title)} | TechBlitz`,
+    description: 'Boost your coding skills for free with TechBlitz',
+    image: {
+      text: `${title} | TechBlitz`,
+      bgColor: '#000000',
+      textColor: '#ffffff',
+    },
+    canonicalUrl: `/question/${params.slug}`,
+  });
+}
 
 export default async function QuestionUidLayout({
   children,
@@ -17,8 +41,43 @@ export default async function QuestionUidLayout({
 
   const question = await getQuestion('slug', slug);
 
+  // determine the education level based on the question
+
+  // create json ld
+  const jsonLd: QuizJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Quiz',
+    // replace the - with a space and
+    name: capitalise(question?.slug?.replace(/-/g, ' ') || ''),
+    description: question?.question || '',
+    url: `${getBaseUrl()}/question/${slug}`,
+    educationLevel: getQuestionEducationLevel(question?.difficulty || 'EASY'),
+    educationalUse: 'practice',
+    learningResourceType: ['quiz', 'learning activity'],
+    creator: {
+      '@type': 'Organization',
+      name: 'TechBlitz',
+      url: getBaseUrl(),
+    },
+    assesses: ['coding'],
+    dateCreated: new Date(question?.createdAt || '').toISOString(),
+    dateModified: new Date(question?.updatedAt || '').toISOString(),
+    datePublished: new Date(
+      question?.questionDate || question?.createdAt || ''
+    ).toISOString(),
+    headline: question?.question || '',
+    interactivityType: 'mixed',
+    isAccessibleForFree: true,
+    isFamilyFriendly: true,
+    teaches: 'coding',
+  };
+
   return (
     <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <div className="flex items-center justify-between py-2 px-6">
         <div className="flex items-center gap-x-5 py-2">
           <SidebarLayoutTrigger />

src/app/(app)/(questions)/question/[slug]/page.tsx

@@ -10,28 +10,6 @@ import { getRandomQuestion } from '@/utils/data/questions/get-random';
 import ExpandedCodeModal from '@/components/app/questions/expanded-code-modal';
 import RelatedQuestions from '@/components/app/questions/single/related-question-card';
 import ResizableLayout from '@/components/ui/resizable-layout';
-import { capitalise, createMetadata } from '@/utils';
-
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string };
-}) {
-  const question = await getQuestion('slug', params.slug);
-  // get the title via slug and removing the - from the slug
-  const title = question?.slug?.replace(/-/g, ' ') || 'Coding Question';
-
-  return createMetadata({
-    title: `${capitalise(title)} | TechBlitz`,
-    description: 'Boost your coding skills for free with TechBlitz',
-    image: {
-      text: `${title} | TechBlitz`,
-      bgColor: '#000000',
-      textColor: '#ffffff',
-    },
-    canonicalUrl: `/question/${params.slug}`,
-  });
-}
 
 export default async function TodaysQuestionPage({
   params,

src/app/(app)/layout.tsx

@@ -10,7 +10,7 @@ import '@mantine/core/styles.css';
 import '@mantine/dates/styles.css';
 
 import NextTopLoader from 'nextjs-toploader';
-import { createMetadata } from '@/utils';
+import { createMetadata } from '@/utils/seo';
 import { useUserServer } from '@/hooks/use-user-server';
 import { getTodaysQuestion } from '@/utils/data/questions/get-today';
 import { userAnsweredDailyQuestion } from '@/utils/data/questions/user-answered-daily-question';

src/app/(marketing)/blog/[slug]/page.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { ChevronLeft } from 'lucide-react';
 
 import { getBlogPost, getBlogPosts } from '@/lib/blog';
-import { createMetadata } from '@/utils';
+import { createMetadata } from '@/utils/seo';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -32,6 +32,10 @@ interface BlogFrontmatter {
   author: string;
   readingTime: number;
   authorImage: string;
+  headings: {
+    title: string;
+    level: number;
+  }[];
 }
 
 // generate metadata for the blog post
@@ -77,7 +81,7 @@ export default async function BlogPost({ params }: BlogPostParams) {
     const typedFrontmatter = frontmatter as unknown as BlogFrontmatter;
 
     return (
-      <div className="container px-4 lg:px-0 flex flex-col md:flex-row gap-10 max-w-7xl mx-auto pt-32 pb-20">
+      <div className="container flex flex-col md:flex-row gap-10 max-w-7xl mx-auto pt-32 pb-20">
         <article className="w-full md:w-3/5">
           {/** global hero that displays on all blog posts */}
           <div className="mb-8">
@@ -152,7 +156,15 @@ export default async function BlogPost({ params }: BlogPostParams) {
           </div>
         </article>
         <aside className="w-full md:w-2/5 order-first md:order-last">
-          <div className="sticky top-32 md:max-w-[320px] mx-auto space-y-5">
+          <h3 className="text-2xl font-medium">Table of contents</h3>
+          <div className="mt-8">
+            {typedFrontmatter.headings.map((heading) => (
+              <div key={heading.title}>
+                <h4 className="text-lg font-medium">{heading.title}</h4>
+              </div>
+            ))}
+          </div>
+          <div className="sticky top-32 md:max-w-[320px] ml-auto space-y-5">
             <Card className="w-full border border-black-50 text-white shadow-lg">
               <CardHeader className="pb-2">
                 <CardTitle className="font-onest text-2xl flex items-center justify-center">

src/app/(marketing)/blog/page.tsx

@@ -4,7 +4,7 @@ import { getBlogPosts } from '@/lib/blog';
 import GridPattern from '@/components/ui/grid-pattern';
 import { Button } from '@/components/ui/button';
 import BlogCard from '@/components/marketing/resources/blog/blog-card';
-import { createMetadata } from '@/utils';
+import { createMetadata } from '@/utils/seo';
 
 export async function generateMetadata() {
   return createMetadata({

src/app/(marketing)/blog/posts/introducing-techblitz.mdx

@@ -6,6 +6,31 @@ date: '2025-01-07'
 author: 'Logan Ford'
 authorImage: 'https://lbycuccwrcmdaxjqyxut.supabase.co/storage/v1/object/public/user-profile-pictures/3a57d7e8-8b80-483b-93d0-70fe1f06b0c0/logo.png?u=1l5im5h5n6e5'
 readingTime: 5
+headings: 
+    - title: 'Introducing TechBlitz: The Future of Software Engineering Education'
+      level: 2
+    - title: 'Why TechBlitz Stands Out'
+      level: 2
+    - title: 'Level Up Daily with Practical Challenges'
+      level: 2  
+    - title: 'Learn on the Go'
+      level: 2
+    - title: 'Comprehensive Question Library for Real-World Excellence'
+      level: 2
+    - title: 'Personalized Learning Paths'
+      level: 2
+    - title: 'Dynamic Question Generation'
+      level: 2
+    - title: 'Advanced Analytics and Progress Tracking'
+      level: 2
+    - title: 'Detailed Performance Reports'
+      level: 2
+    - title: 'Open Source and Community-Driven'
+      level: 2
+    - title: 'Your career in tech is just a click away'
+      level: 2
+    - title: 'Conclusion'
+      level: 2
 status: published
 ---
 
@@ -54,7 +79,7 @@ For those with a competitive spirit, our global leaderboard system lets you meas
 </div>
 
 <div className="mt-4">
-Explore our daily challenge system in detail <a href="/features/daily-challenges" aria-label="Navigate to Daily Challenges" className="text-accent">here</a>, or <a href="/signup" aria-label="Navigate to Signup" className="text-accent">begin your journey today</a>.
+Explore our daily challenge system in detail <a href="/features/daily-coding-challenges" aria-label="Navigate to Daily Challenges" className="text-accent">here</a>, or <a href="/signup" aria-label="Navigate to Signup" className="text-accent">begin your journey today</a>.
 </div>
 
 <br />

src/app/(marketing)/daily-challenge/page.tsx

@@ -6,7 +6,7 @@ import { Separator } from '@/components/ui/separator';
 import { ChartColumn, User } from 'lucide-react';
 import QuestionDisplay from '@/components/app/questions/single/code-snippet';
 import FeedbackButton from '@/components/ui/feedback-button';
-import { createMetadata } from '@/utils';
+import { createMetadata } from '@/utils/seo';
 
 import ResizableLayout from '@/components/ui/resizable-layout';