parse-code-blocks-with-gray-matter.mjs • Code & Beyond: Eugene’s Dev Journey

parse-code-blocks.mjs

/**
 * Markdown 파일에서 코드블록을 파싱하는 함수 (다양한 형식 지원)
 * @param {string} markdown - 파싱할 마크다운 텍스트
 * @param {string} language - 특정 언어의 코드블록만 추출하려면 언어 지정 (예: 'js', 'py')
 * @returns {Array} - 추출된 코드블록 배열 [{language: string, title: string, code: string}]
 */
function parseCodeBlocks(markdown, language = null) {
  // 코드블록 시작 패턴 찾기
  const lines = markdown.split('\n');
  const codeBlocks = [];

  let inCodeBlock = false;
  let currentLanguage = '';
  let currentTitle = '';
  let currentCode = [];
  let i = 0;

  while (i < lines.length) {
    const line = lines[i];

    // 코드 블록 시작 확인
    if (!inCodeBlock && line.startsWith('```')) {
      inCodeBlock = true;

      // 언어와 title 추출
      const headerMatch = line.match(
        // 문자, 숫자, 그리고 +, #, - 까지만 대응 (eg. js, ts, c#, c++, objective-c, etc)
        /^```([a-zA-Z0-9+#-]+)(?:\s+title=(?:"([^"]*)"|'([^']*)'))?/,
      );
      if (headerMatch) {
        currentLanguage = headerMatch[1] || '';
        currentTitle = headerMatch[2] || headerMatch[3] || '';
      } else {
        // 문자, 숫자, 그리고 +, #, - 까지만 대응 (eg. js, ts, c#, c++, objective-c, etc)
        const simpleMatch = line.match(/^```([a-zA-Z0-9+#-]*)/);
        currentLanguage = simpleMatch ? simpleMatch[1] : '';
        currentTitle = '';
      }

      currentCode = [];
    }
    // 코드 블록 끝 확인
    else if (inCodeBlock && line.trim() === '```') {
      inCodeBlock = false;

      // 언어 필터가 없거나 지정한 언어와 일치하는 경우만 추가
      if (!language || currentLanguage.toLowerCase() === language.toLowerCase()) {
        codeBlocks.push({
          language: currentLanguage.toLowerCase(),
          title: currentTitle,
          code: currentCode.join('\n'),
        });
      }
    }
    // 코드 블록 내용 수집
    else if (inCodeBlock) {
      currentCode.push(line);
    }

    i++;
  }

  // MARK: 만약 파일 끝이 닫히지 않은 경우도 처리하고 싶으면 아래 코드로 처리 가능
  // if (inCodeBlock) {
  //   if (!language || currentLanguage.toLowerCase() === language.toLowerCase()) {
  //     codeBlocks.push({
  //       language: currentLanguage.toLowerCase(),
  //       title: currentTitle,
  //       code: currentCode.join('\n')
  //     })
  //   }
  // }

  return codeBlocks;
}

mjs

parse-markdown.mjs

import fs from 'fs/promises';

import matter from 'gray-matter';

import parseCodeBlocks from './parseCodeBlocks.mjs'; 
import createFilesObject from './createFilesObject.mjs';

const fileContent = await fs.readFile('./sample.mdx', 'utf-8');
const { data: frontmatter, content } = matter(fileContent);
const codeBlocks = parseCodeBlocks(content);

// Octokit 인스턴스 생성
const octokit = new Octokit({
  // eslint-disable-next-line no-undef
  auth: process.env.GH_TOKEN,
});

// ex. octokit with parsed code blocks
try {
  // Code block 내의 key 값 중복을 체크하기 위해 사용
  // 중복된 키별 카운트 관리
  const dupKeyCounts = new Map();

  const response = await octokit.gists.create({
    files: createFilesObject(parseCodeBlocks(content), fileTitle),
    public: true,
    description: 'Description...! (Language: ...!)',
  });

  console.log(`Gist created: ${response.data.html_url}`);
} catch (error) {
  if (error.response) {
    console.error(`상태 코드: ${error.response.status}`);
    console.error('응답 데이터:', JSON.stringify(error.response.data, null, 2));
  } else if (error.request) {
    console.error('응답 없음:', error.request);
  } else {
    console.error('오류 메시지:', error.message);
  }
  console.error('오류 스택:', error.stack);
}

mjs

createFilesObject.mjs

import getUniqueFileName from './getUniqueFileName.mjs'; 

/**
 * 코드 블록에서 files 객체를 생성하는 함수
 * @param {Array} codeBlocks - parseCodeBlocks 함수로 파싱된 코드 블록 배열
 * @param {string} fileTitle - 파일 제목 (코드 블록 제목이 없을 때 사용)
 * @returns {Object} - Gist API에 전달할 files 객체
 */
function createFilesObject(codeBlocks, fileTitle) {
  // Code block 내의 key 값 중복을 체크하기 위해 사용
  // 중복된 키별 카운트 관리
  const dupKeyCounts = new Map();

  return codeBlocks.reduce((result, { title, code }) => {
    if (code) {
      // 빈 값 처리 및 기본 키 설정
      let key = title === '' || title == null ? fileTitle : title;

      // 키 중복 체크
      if (Object.prototype.hasOwnProperty.call(result, key)) {
        // 키 중복 시 고유키 생성
        const newCount = (dupKeyCounts.get(key) || 0) + 1;
        const newKey = getUniqueFileName(key, newCount);
        dupKeyCounts.set(key, newCount);
        result[newKey] = { content: code };
      } else {
        // 중복된 키가 없다면 바로 사용
        result[key] = { content: code };
        // MARK: 키가 중복되어 counts 를 확인할때 key 가 없더라도 초기값인 0 을 사용하므로, 여기서 Set 하지 않아도 됨
        // dupKeyCounts.set(key, 0)
      }
    }
    return result;
  }, {});
}

mjs

getUniqueFileName.mjs

import splitFileNameRegex from './splitFileNameRegex.mjs'; 

/**
 * 주어진 파일 이름에 숫자 카운트를 추가하여 고유한 파일 이름을 생성합니다.
 *
 * @param {string} fileName - 원본 파일 이름.
 * @param {string | number} postfix - 중복 방지를 위한 postfix, 보통 숫자 카운트.
 * @returns {string} 고유한 파일 이름.
 */
export default function getUniqueFileName(fileName, postfix) {
  const splitted = splitFileNameRegex(fileName);
  return splitted.extension
    ? `${splitted.name}_${postfix}.${splitted.extension}`
    : `${splitted.name}_${postfix}`;
}

mjs

splitFileNameRegex.mjs

/**
 * Split a file name into its name and extension.
 *
 * // splitFileNameRegex(fileName: string): { name: string; extension: string | undefined }
 * @param {string} fileName The file name to split.
 * @returns {Object} An object with the file name and its extension.
 * @returns {string} name The name of the file.
 * @returns {string | undefined} extension The extension of the file, or undefined if there is no extension.
 */
export default function splitFileNameRegex(fileName) {
  const match = fileName.match(/^(.*?)(?:\.([^.]+))?$/);

  if (!match) {
    return { name: fileName, extension: undefined };
  }

  const [, name, extension] = match;
  return {
    name: name || fileName,
    extension: extension?.toLowerCase(),
  };
}

mjs