refactor: reorganize texts

Author: eriandev

packages/shared/config/astro.ts

@@ -2,18 +2,25 @@ import icon from 'astro-icon'
 import tailwind from '@astrojs/tailwind'
 import type { AstroUserConfig } from 'astro/config'
 
-import { PROJECTS_URL } from '../consts'
+import { API_URL } from '../consts'
 
-export function getAstroConfig ({ project }: { project?: string } = {}): AstroUserConfig {
+export interface GetAstroConfig {
+  project?: string
+}
+
+export function getAstroConfig ({ project }: GetAstroConfig = {}): AstroUserConfig {
+  const assets = 'assets'
+  const { hostname } = new URL(API_URL)
   const hasProjectName = typeof project === 'string'
-  const { hostname } = new URL(PROJECTS_URL)
+  const outDir = hasProjectName ? `../../dist/${project}` : undefined
+  const base = hasProjectName ? `/frontendmentor/${project}` : '/frontendmentor'
 
   return {
+    base,
+    outDir,
     integrations: [tailwind(), icon()],
-    base: hasProjectName ? `/frontendmentor/${project}` : '/frontendmentor',
-    outDir: hasProjectName ? `../../dist/${project}` : undefined,
     build: {
-      assets: 'assets'
+      assets
     },
     image: {
       domains: [hostname]

packages/shared/consts.ts

@@ -1,9 +1,3 @@
-import { cwd } from 'node:process'
 import { loadEnv } from 'vite'
 
-const PROJECT_NAME = 'frontendmentor'
-
-const envDirectory = cwd().split(PROJECT_NAME)[0] + PROJECT_NAME
-const { API_PROJECTS_URL } = loadEnv('', envDirectory, 'API')
-
-export const PROJECTS_URL = API_PROJECTS_URL
+export const { PUBLIC_API_URL: API_URL, PUBLIC_FRONTENDMENTOR_URL: FRONTENDMENTOR_URL } = loadEnv('', '', 'PUBLIC')

packages/shared/utils/http.ts

@@ -0,0 +1,4 @@
+export async function get<T>(urlRequest: string): Promise<T> {
+  const response = await fetch(urlRequest)
+  return (await response.json()) as T
+}

src/components/Card.astro

@@ -6,18 +6,21 @@ import Tech from '@/components/Tech.astro'
 import LevelTag from '@/components/LevelTag.astro'
 
 interface Props {
-  title: string
-  link: string
-  level: number
+  level: {
+    link: string
+    name: string
+    number: number
+  }
   image: string
+  link: string
   techs: string[]
+  title: string
 }
 
 const { image: source, level, link, title, techs } = Astro.props
 
 const techsGridAlign = 'grid grid-rows-2 gap-y-3'
 const techsFlexAlign = 'flex flex-wrap items-center justify-between'
-const levelSearchLink = `https://www.frontendmentor.io/challenges?difficulty=${level}&sort=difficulty%7Casc`
 const cardShadowClass =
   'before:pointer-events-none before:absolute before:top-0 before:z-10 before:h-24 before:w-full before:bg-[linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0))] before:content-[""]'
 ---
@@ -38,8 +41,8 @@ const cardShadowClass =
       <div class="flex gap-x-1.5 md:gap-x-2.5">
         {techs.map((tech) => <Tech name={tech} />)}
       </div>
-      <Link external to={levelSearchLink} class="justify-self-end">
-        <LevelTag {level} />
+      <Link external to={level.link} class="justify-self-end">
+        <LevelTag level={level.number} name={level.name} />
       </Link>
     </article>
   </section>

src/components/Footer.astro

@@ -1,19 +1,32 @@
 ---
 import Link from 'shared/components/Link.astro'
+
+interface Props {
+  designedBy: {
+    link: string
+    text: string
+  }
+  developedBy: {
+    link: string
+    text: string
+  }
+}
+
+const { designedBy, developedBy } = Astro.props
 ---
 
 <footer class="border-y border-gray-300 bg-white">
   <div
     class="mx-auto flex max-w-[75rem] flex-col justify-center gap-y-3 p-6 text-center md:flex-row md:justify-between"
   >
     <p>
-      Design is property of <Link external to="https://www.frontendmentor.io/" class="font-bold hover:underline">
-        Frontend Mentor
+      Design is property of <Link external to={designedBy.link} class="font-bold hover:underline">
+        {designedBy.text}
       </Link>
     </p>
     <p>
-      Developed by <Link external to="https://erian.dev/" class="font-semibold text-html hover:underline">
-        @eriandev
+      Developed by <Link external to={developedBy.link} class="font-semibold text-html hover:underline">
+        {developedBy.text}
       </Link>
     </p>
   </div>

src/components/Header.astro

@@ -3,14 +3,24 @@ import Link from 'shared/components/Link.astro'
 import Icon from 'shared/components/Icon.astro'
 import Image from 'shared/components/Image.astro'
 
-const navigation = [
-  { to: '/', external: false, text: 'My Solutions' },
-  { to: 'https://www.frontendmentor.io/challenges', external: true, text: 'Challenges' },
-  { to: 'https://www.frontendmentor.io/resources', external: true, text: 'Resources' },
-]
+interface Props {
+  navigation: Array<{
+    external: boolean
+    text: string
+    to: string
+  }>
+  profile: {
+    image: {
+      src: string
+      alt: string
+    }
+    link: string
+    title: string
+  }
+}
+
+const { navigation, profile } = Astro.props
 
-const src = '/frontendmentor/images/profile-image.webp'
-const profileLink = 'https://www.frontendmentor.io/profile/eriandev'
 const linkClass =
   'relative after:absolute after:-bottom-1 after:left-0 after:h-0.5 after:w-full after:scale-0 after:bg-guru after:content-[""] after:[transition:transform_0.3s_ease_0s] hover:after:scale-100 hover:after:[transition:transform_0.3s_ease_0s]'
 ---
@@ -32,8 +42,8 @@ const linkClass =
           }
         </ul>
       </nav>
-      <Link external title="Go to my frontendmentor profile" to={profileLink}>
-        <Image {src} width={42} height={42} alt="Profile image" class="rounded-full" />
+      <Link external title={profile.title} to={profile.link}>
+        <Image src={profile.image.src} width={42} height={42} alt={profile.image.alt} class="rounded-full" />
       </Link>
     </section>
   </div>

src/components/LevelTag.astro

@@ -1,29 +1,28 @@
 ---
 interface Props {
   level: number
+  name: string
   class?: string
 }
 
-const { level, class: extraClass } = Astro.props
+const { level, name, class: extraClass } = Astro.props
 
-const LEVELS = ['newbie', 'junior', 'intermediate', 'advanced', 'guru']
-const levelColor = LEVELS[level - 1]
-const bgColor = 'bg-' + levelColor
-const textColor = 'text-' + levelColor
-const borderColor = 'border-' + levelColor
+const bgColor = 'bg-' + name
+const textColor = 'text-' + name
+const borderColor = 'border-' + name
 ---
 
 <div
   class:list={[
-    borderColor,
     'flex h-max w-max items-center rounded-md border text-xs font-bold leading-5 md:text-sm md:leading-6',
+    borderColor,
     extraClass,
   ]}
 >
   <span class:list={[bgColor, 'block h-full rounded-l-sm px-2 text-white md:px-3']}>
     {level}
   </span>
   <span class:list={[textColor, 'block px-1.5 uppercase md:px-3']}>
-    {levelColor}
+    {name}
   </span>
 </div>

src/env.d.ts

@@ -1,2 +1,10 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+interface ImportMetaEnv {
+  readonly PUBLIC_API_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

src/layouts/Layout.astro

@@ -1,6 +1,43 @@
 ---
+import { get } from 'shared/utils/http'
+import { API_URL } from 'shared/consts'
 import MetaTags from 'shared/components/MetaTags.astro'
+
 import Header from '@/components/Header.astro'
+import Footer from '@/components/Footer.astro'
+
+interface Landing {
+  header: {
+    navigation: Array<{
+      external: boolean
+      text: string
+      to: string
+    }>
+    profile: {
+      image: {
+        src: string
+        alt: string
+      }
+      link: string
+      title: string
+    }
+  }
+
+  footer: {
+    designedBy: {
+      link: string
+      text: string
+    }
+    developedBy: {
+      link: string
+      text: string
+    }
+  }
+}
+
+const { footer, header } = await get<Landing>(API_URL + '/landing/')
+const { designedBy, developedBy } = footer
+const { navigation, profile } = header
 ---
 
 <!doctype html>
@@ -44,7 +81,8 @@ import Header from '@/components/Header.astro'
   </head>
 
   <body class="min-h-screen bg-gray-100 font-barlow font-medium text-black">
-    <Header />
+    <Header {navigation} {profile} />
     <slot />
+    <Footer {designedBy} {developedBy} />
   </body>
 </html>

src/pages/index.astro

@@ -1,11 +1,24 @@
 ---
+import { get } from 'shared/utils/http'
+import { API_URL } from 'shared/consts'
+
 import Card from '@/components/Card.astro'
 import Layout from '@/layouts/Layout.astro'
-import Footer from '@/components/Footer.astro'
-import { getProjects } from '@/services/projects'
 
-const projects = await getProjects()
-const hasProjects = projects.length > 0
+interface Projects {
+  level: {
+    link: string
+    name: string
+    number: number
+  }
+  image: string
+  link: string
+  techs: string[]
+  title: string
+}
+
+const { results } = await get<{ results: Projects[] }>(API_URL + '/projects/')
+const hasProjects = results.length > 0
 ---
 
 <Layout title="Frontendmentor Challenges Solved">
@@ -24,12 +37,10 @@ const hasProjects = projects.length > 0
   >
     {
       hasProjects ? (
-        projects.map((projectData) => <Card {...projectData} />)
+        results.map((projectData) => <Card {...projectData} />)
       ) : (
         <p class="mx-auto w-max text-2xl md:text-3xl">No projects to show...</p>
       )
     }
   </main>
-
-  <Footer />
 </Layout>