Hacktoberfest에서 Sandpack에 기여

CodeSandbox에서는 Hacktoberfest과 흥미진진한 오픈 소스 프로젝트, 관리자 및 기여자를 위해 연중 이맘때에 오픈 소스 기여가 생성하는 모든 가치에 대해 기쁘게 생각합니다.

Sandpack에 hacktoberfest 주제를 추가했다는 소식을 전하게 되어 기쁩니다. 여러분의 참여를 환영합니다.

Sandpack 테마 기여

우리의 핵심 목표는 개발자가 웹 사이트 레이아웃이나 디자인 또는 전문 지식 수준에 관계없이 웹에 맞춤형 라이브 코딩 경험을 포함할 수 있도록 지원하는 것입니다. 이를 위해 @codesandbox/sandpack-themes 에서 다양한 옵션을 제공했으며 커뮤니티에서 더 많은 옵션을 제공하고자 합니다.

그렇다면 새로운 테마에 어떻게 기여할 수 있습니까?

샌드팩 테마 빌더

Sandpack은 사용자 정의 테마 생성을 안내하는 도구를 제공합니다. 어둡거나 밝은 테마로 시작한 다음 기본 및 보조 색상과 같은 사용자 지정 값을 추가합니다.

또한 더욱 개인적인 느낌을 주고 싶다면 고급 탭으로 이동하여 구문 강조 및 기타 사례에 대한 색상을 설정할 수 있습니다. https://sandpack.codesandbox.io/theme



테마 게시
이 시점에서 Sandpack 리포지토리로 이동하여 포크하고 풀 요청에 몇 가지 변경 사항을 도입해야 합니다. 이를 수행하는 가장 쉬운 방법은 CodeSandbox 프로젝트를 사용하는 것입니다.

CodeSandbox Projects에서 Sandpack 저장소를 엽니다.

리포지토리를 분기할 기여 분기를 만듭니다.

codesandbox/sandpack/sandpack-themes/src 폴더에 [myAwesomeTheme].ts 이름으로 새 파일을 만듭니다.

이 파일의 내용은 테마가 포함된 개체에 대한 내보내기여야 합니다.

import type { SandpackTheme } from "./types";

export const myAwesomeTheme: SandpackTheme = {
  colors: {
        ...
  },

  syntax: {
        ...
  },
  font: {
    ...
  },
};

모든 테마를 표시하는 index.ts 파일에 새 테마를 포함합니다.

풀 요청을 커밋하고 보냅니다. 완료 🚀

우리는 커뮤니티에서 놀라운 테마를 보기를 기다릴 수 없습니다. 질문이 있거나 팀에 연락하고 싶은 경우 Discord 또는 GitHub로 언제든지 문의하십시오.

즐겁게 기여하세요! 🎉