망원경 1.8 출시

Telescope용 릴리스 1.8은 GitHub가 예정된 릴리스 시간에 다운되었기 때문에 매우 특별합니다. 우리의 경험이 풍부한 교수에 따르면 이렇게 GitHub가 다운되는 것을 본 것은 이번이 처음입니다. 나는 오픈 소스의 첫해에 이것을 볼 수 있어서 운이 좋다고 생각합니다.

그래서 영상통화로 PR리뷰를 진행했습니다. 놀랍도록 효율적이었습니다. PR을 수정하고 1.8 릴리스로 전달하려고 했습니다.


제가 이야기하고 싶은 이슈는 add the avatar component 입니다. 아바타의 계획은 사용자의 프로필 사진을 얻을 수 있도록 GitHub와 통합하는 것입니다. 그 전에 아래 그림과 같이 빈 원을 대체할 임시 아바타가 필요합니다.





페드로가 제안한 avatar component from evergreen . 그러나 Dave는 우리가 가지고 있는 material-UI를 고수하고 싶었습니다. avatar component from material-UI도 있습니다.

그러나 material-Ui 아바타 구성 요소는 원만 제공하고 주어진 이름 값으로 이니셜을 생성하지 않으므로 직접 생성해야 합니다. 따라서 내 작업은 사용자 정의 기능으로 material-UI 아바타 구성 요소를 래핑하는 것입니다.

저자 이름이나 이미지 값을 허용하도록 아바타 구성 요소를 만들고 싶습니다. 이미지 값이 선호되지만 이미지 값이 없으면 이름 값을 대신 사용하여 아바타의 이니셜을 생성합니다.

이니셜을 생성하는 방법에 대해 이야기하고 싶습니다. 에버그린의 아바타 컴포넌트 코드를 확인해보니 실제로 이름의 처음 두 단어로 이니셜이 생성됩니다. 대부분의 사람들이 이름에 대해 1단어를 사용하고 성에 대해 1단어를 사용하기 때문에 대부분의 경우에 작동할 수 있습니다(예: Piper Chapman). 그러나 여전히 이름에 2단어 이상의 이름이 있는 사람들이 있습니다. 여러 단어가 포함된 긴 이름이거나 중간 이름일 수 있습니다.

다른 문제는 이름의 단어를 구분하기 위해 공백이나 하이픈을 사용해야 하느냐입니다. PR에서 받은 댓글입니다. 개인적으로 하이픈 대신 공백을 사용합니다. 하이픈은 이름의 한 부분에 단어를 연결하는 것과 비슷합니다.

내 이니셜 생성기 코드는 다음과 같습니다.

const initials = name.split(' ')
                     .map((splitName, i, arr) =>
                     i === 0 || i + 1 === arr.length ? 
                     splitName[0].toUpperCase() : null)
                     .join('');

이 생성기는 이름의 단어를 공백으로 구분하고 이름과 성 이외의 단어는 무시합니다. splitName는 현재 값을 나타내고, i는 인덱스를 나타내며, arr는 분할된 이름의 전체 배열을 나타냅니다. i === 0는 이름의 첫 번째 단어를 처리하고 i + 1 === arr.length는 이름의 마지막 단어를 처리합니다. 예를 들어 OSD600의 내 친구 Abu는 그의 이름에 5개의 단어가 있습니다(Abu Zayed Kazi Masudan Nabi). 그의 이니셜은 AZ 대신 AN이 됩니다. 그리고 제 이름은 Yuan-Hsi Lee입니다. 이름에 하이픈이 두 음절을 연결하기 때문에 제 이니셜은 YH 대신 YL이 됩니다.



위는 이름 이니셜 아바타의 모습입니다.

이것과 관련된 다른 PR은 centre the initials text 입니다. 어쩐지 이 글꼴은 텍스트를 약간 위쪽으로 향하게 합니다. Anton, Ilya 및 Minh의 도움 덕분에 퍼즐이 풀리고 솔루션이 만들어집니다.