Refactor: Improve page and code consistency (#136)

* refactor: implement dry principle

* feat: improve page consistency

Author: haricnugraha

app/[lang]/(hyperjump)/case-studies/[slug]/page.tsx

@@ -1,8 +1,10 @@
+import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
+import data from "@/data.json";
 import { caseStudyButton, caseStudyMore } from "@/locales/.generated/server";
 import {
   supportedLanguages,
@@ -12,7 +14,6 @@ import {
 import type { CaseStudy } from "../../data";
 import { caseStudyBy, getCaseStudies } from "../data";
 import { Content } from "./components/content";
-import { Metadata } from "next";
 import { dynamicOpengraph } from "@/lib/default-metadata";
 
 type Params = { lang: SupportedLanguage; slug: string };
@@ -25,17 +26,16 @@ export async function generateMetadata({
   params
 }: CaseStudyProps): Promise<Metadata> {
   const { lang, slug } = await params;
+  const { url } = data;
   const caseStudies = caseStudyBy(slug, lang);
-
-  const meta = {
+  const meta: Metadata = {
     title: `Case-Studies - ${caseStudies?.title ?? ""}`,
     description: caseStudies?.description ?? "",
     alternates: {
-      canonical: `https://hyperjump.tech/${lang}/case-studies/${caseStudies?.slug}`,
+      canonical: `${url}/${lang}/case-studies/${caseStudies?.slug}`,
       languages: (supportedLanguages as SupportedLanguage[]).reduce(
         (acc, l) => {
-          acc[l] =
-            `https://hyperjump.tech/${l}/case-studies/${caseStudies?.slug}`;
+          acc[l] = `${url}/${l}/case-studies/${caseStudies?.slug}`;
           return acc;
         },
         {} as Record<string, string>

app/[lang]/(hyperjump)/case-studies/page.tsx

@@ -1,8 +1,9 @@
 import Link from "next/link";
-import { Metadata } from "next";
+import type { Metadata } from "next";
 
 import { Hero } from "@/app/components/hero";
 import { Button } from "@/components/ui/button";
+import data from "@/data.json";
 import { dynamicOpengraph } from "@/lib/default-metadata";
 import {
   supportedLanguages,
@@ -29,15 +30,15 @@ export async function generateMetadata(props: {
   params: Promise<{ lang: SupportedLanguage }>;
 }): Promise<Metadata> {
   const { lang } = await props.params;
-
-  const meta: any = {
+  const { url } = data;
+  const meta: Metadata = {
     title: `Case Studies - ${caseStudyHeroHeading(lang)}`,
     description: caseStudyHeroDesc(lang),
     alternates: {
-      canonical: `https://hyperjump.tech/${lang}/case-studies`,
+      canonical: `${url}/${lang}/case-studies`,
       languages: (supportedLanguages as SupportedLanguage[]).reduce(
         (acc, l) => {
-          acc[l] = `https://hyperjump.tech/${l}/case-studies`;
+          acc[l] = `${url}/${l}/case-studies`;
           return acc;
         },
         {} as Record<string, string>
@@ -70,7 +71,7 @@ export default async function CaseStudiesPage({ params }: CaseStudyProps) {
 function CaseStudies({ lang }: { lang: SupportedLanguage }) {
   return (
     <section className="bg-white pt-5 pb-10">
-      <div className="mx-auto max-w-6xl">
+      <div className="mx-auto max-w-5xl">
         <div className="grid gap-6 md:grid-cols-2">
           {getCaseStudies(lang).map(
             ({ category, description, slug, title }) => (

app/[lang]/(hyperjump)/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import type { Organization, WebPage, WithContext } from "schema-dts";
@@ -46,24 +47,22 @@ import {
   pageData,
   services
 } from "./data";
-import { Metadata } from "next";
 import { dynamicOpengraph } from "@/lib/default-metadata";
 
-const { github, socials, title, url, description } = data;
+const { github, socials, title, url } = data;
 
 export async function generateMetadata(props: {
   params: Promise<{ lang: SupportedLanguage }>;
 }): Promise<Metadata> {
   const { lang } = await props.params;
-
-  const meta: any = {
+  const meta: Metadata = {
     title: mainHeroHeading(lang),
     description: mainHeroDesc(lang),
     alternates: {
-      canonical: `https://hyperjump.tech/${lang}`,
+      canonical: `${url}/${lang}`,
       languages: (supportedLanguages as SupportedLanguage[]).reduce(
         (acc, l) => {
-          acc[l] = `https://hyperjump.tech/${l}`;
+          acc[l] = `${url}/${l}`;
           return acc;
         },
         {} as Record<string, string>
@@ -290,7 +289,7 @@ function JsonLdOrganization() {
     "@type": "Organization",
     name: title,
     url,
-    logo: "https://hyperjump.tech/images/hyperjump-colored.png",
+    logo: `${url}/images/hyperjump-colored.png`,
     address: {
       "@type": "PostalAddress",
       streetAddress:

app/[lang]/(hyperjump)/products/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 
 import { GridItems } from "@/app/components/grid-items";
 import { Hero } from "@/app/components/hero";
+import data from "@/data.json";
 import { dynamicOpengraph } from "@/lib/default-metadata";
 import {
   supportedLanguages,
@@ -26,15 +27,15 @@ export async function generateMetadata({
   params
 }: ProductsProps): Promise<Metadata> {
   const { lang } = await params;
-
-  const meta = {
+  const { url } = data;
+  const meta: Metadata = {
     title: productsHeroHeading(lang),
     description: productsHeroDesc(lang),
     alternates: {
-      canonical: `https://hyperjump.tech/${lang}/products`,
+      canonical: `${url}/${lang}/products`,
       languages: supportedLanguages.reduce(
         (acc, l) => {
-          acc[l] = `https://hyperjump.tech/${l}/products`;
+          acc[l] = `https${url}${l}/products`;
           return acc;
         },
         {} as Record<string, string>

app/[lang]/(hyperjump)/services/[slug]/page.tsx

@@ -1,9 +1,11 @@
+import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
+import data from "@/data.json";
 import {
   supportedLanguages,
   type SupportedLanguage
@@ -23,7 +25,6 @@ import {
 
 import type { CaseStudy, Service } from "../../data";
 import { serviceBySlug, ServiceSlug } from "../../data";
-import { Metadata } from "next";
 import { dynamicOpengraph } from "@/lib/default-metadata";
 
 type LangProps = {
@@ -36,16 +37,16 @@ export async function generateMetadata(props: {
   params: Promise<{ lang: SupportedLanguage; slug: ServiceSlug }>;
 }): Promise<Metadata> {
   const { lang, slug } = await props.params;
+  const { url } = data;
   const service = serviceBySlug({ lang, slug });
-
-  const meta = {
+  const meta: Metadata = {
     title: `Services - ${service?.title ?? ""}`,
     description: service?.description ?? "",
     alternates: {
-      canonical: `https://hyperjump.tech/${lang}/services/${service?.slug}`,
+      canonical: `${url}/${lang}/services/${service?.slug}`,
       languages: (supportedLanguages as SupportedLanguage[]).reduce(
         (acc, l) => {
-          acc[l] = `https://hyperjump.tech/${l}/services/${service?.slug}`;
+          acc[l] = `${url}/${l}/services/${service?.slug}`;
           return acc;
         },
         {} as Record<string, string>

app/[lang]/(hyperjump)/services/page.tsx

@@ -23,19 +23,20 @@ import {
 import { Clients } from "../components/clients";
 import { serviceBySlug, services, ServiceSlug } from "../data";
 
+const { clients, url } = data;
+
 export async function generateMetadata(props: {
   params: Promise<{ lang: SupportedLanguage }>;
 }): Promise<Metadata> {
   const { lang } = await props.params;
-
-  const meta: any = {
+  const meta: Metadata = {
     title: `Services - ${servicesHeroHeading(lang)}`,
     description: servicesHeroDesc(lang),
     alternates: {
-      canonical: `https://hyperjump.tech/${lang}/services`,
+      canonical: `${url}/${lang}/services`,
       languages: (supportedLanguages as SupportedLanguage[]).reduce(
         (acc, l) => {
-          acc[l] = `https://hyperjump.tech/${l}/services`;
+          acc[l] = `${url}/${l}/services`;
           return acc;
         },
         {} as Record<string, string>
@@ -82,7 +83,7 @@ export default async function Services({ params }: ServicesProps) {
           <p className="text-hyperjump-gray mx-auto mb-8 w-full max-w-3xl text-center text-base md:text-lg">
             {servicesPartnersDesc(lang)}
           </p>
-          <Clients clients={data.clients} />
+          <Clients clients={clients} />
         </section>
       </div>
     </main>

app/[lang]/(inferenceai)/inferenceai/data.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
 import type { Item } from "@/app/components/grid-items";
+import data from "@/data.json";
 import type { SupportedLanguage } from "@/locales/.generated/types";
 import {
   inferenceaiNavItems0Label,
@@ -422,7 +423,7 @@ export const getFaqs = (lang: SupportedLanguage): Faq[] => {
 
 export const getData = (lang: SupportedLanguage) => ({
   name: "Inference AI",
-  baseUrl: `https://hyperjump.tech/${lang}/inferenceai`,
+  baseUrl: `${data.url}/${lang}/inferenceai`,
   socials: [
     {
       platform: "GitHub",

app/components/console.tsx

@@ -1,13 +1,14 @@
 "use client";
 
+import data from "@/data.json";
 import ClientOnly from "./client-only";
 
 const messages = [
   "👨‍💻 Suka ngoprek JavaScript/CSS/TypeScript/Node.js/React/Vue.js/Kotlin/Go/Swift?",
   "🏃‍♂️‍➡️ Pengen maju bersama tukang coding yang menggandrungi dunia open-source?",
   "👨‍🔬 Ingin eksplorasi teknologi keren kayak CI/CD, Docker, microservice, dkk?",
   "✅ UDAH DEH: Gabung kita aja",
-  "👉 https://hyperjump.tech/jobs"
+  `👉 ${data.url}/jobs`
 ];
 
 export default function Console() {