utils.ts

Overview

The utils.ts file provides utility functions and constants to generate and manage image resource paths used throughout the application. It primarily focuses on creating arrays of image names with consistent naming patterns, organized by categories such as book, laws, manual, and others. This helps maintain a centralized and standardized way of referencing image assets related to different topics or components.

Detailed Explanation

Function: getImageName

const getImageName = (prefix: string, length: number) => 
  new Array(length)
    .fill(0)
    .map((x, idx) => `chunk-method/${prefix}-0${idx + 1}`);

Purpose

Generates an array of image file name strings following a specific naming convention.

Parameters

• prefix (string): The prefix to use for each image name, representing the category or type of the image.

• length (number): The number of image names to generate.

Returns

• string[]: An array of image name strings, each formatted as chunk-method/{prefix}-0{index}, where {index} ranges from 1 to length.

Usage Example

const bookImages = getImageName('book', 4);
console.log(bookImages);
// Output:
// [
//   "chunk-method/book-01",
//   "chunk-method/book-02",
//   "chunk-method/book-03",
//   "chunk-method/book-04"
// ]

Implementation Details

• Creates a new array of the specified length.

• Fills it with zeros to initialize the array.

• Uses map to generate each image name string by appending the index (1-based) to the prefix.

• The naming pattern includes a fixed string chunk-method/ followed by the prefix and a zero-padded index.

Constant: ImageMap

export const ImageMap = {
  book: getImageName('book', 4),
  laws: getImageName('law', 2),
  manual: getImageName('manual', 4),
  picture: getImageName('media', 2),
  naive: getImageName('naive', 2),
  paper: getImageName('paper', 2),
  presentation: getImageName('presentation', 2),
  qa: getImageName('qa', 2),
  resume: getImageName('resume', 2),
  table: getImageName('table', 2),
  one: getImageName('one', 2),
  knowledge_graph: getImageName('knowledge-graph', 2),
  tag: getImageName('tag', 2),
};

Purpose

Provides a centralized mapping of categories to their respective arrays of image names.

Structure

• Keys represent categories or semantic labels of images.

• Values are arrays of strings generated by calling getImageName with appropriate prefixes and lengths.

Usage Example

import { ImageMap } from './utils';

console.log(ImageMap.book);
// [
//   "chunk-method/book-01",
//   "chunk-method/book-02",
//   "chunk-method/book-03",
//   "chunk-method/book-04"
// ]

console.log(ImageMap.laws);
// [
//   "chunk-method/law-01",
//   "chunk-method/law-02"
// ]

Important Implementation Details

• The naming convention is consistent with a base folder path chunk-method/ followed by the category prefix and a zero-padded numeric suffix.

• The zero-padding is hardcoded as 0{index}, which will only correctly pad numbers up to 9. For longer sequences (10+), this would not maintain consistent formatting.

• getImageName uses functional programming paradigms (array creation, fill, map) to succinctly generate the image name arrays.

Interaction with Other Parts of the System

• This utility file likely supports components or modules that require image asset references, such as UI components rendering icons or illustrations.

• By exporting a centralized ImageMap, the application ensures consistent and reusable image paths which aids in maintainability.

• Other parts of the system can import ImageMap and access the preformatted image names without manually constructing paths or risking inconsistent naming.

Visual Diagram

flowchart TD
    A[getImageName(prefix: string, length: number)] --> B[Array of image names]
    C[ImageMap Object] -->|calls| A
    C --> D[book: string[]]
    C --> E[laws: string[]]
    C --> F[manual: string[]]
    C --> G[picture: string[]]
    C --> H[naive: string[]]
    C --> I[paper: string[]]
    C --> J[presentation: string[]]
    C --> K[qa: string[]]
    C --> L[resume: string[]]
    C --> M[table: string[]]
    C --> N[one: string[]]
    C --> O[knowledge_graph: string[]]
    C --> P[tag: string[]]

Summary

The utils.ts file provides a small but essential utility function to generate standardized image names and organizes them into a convenient mapping object. This design promotes consistent asset referencing across the application, reducing errors and simplifying maintenance of image-related data.