5 posts tagged with "Website"

Electron 웹사이트는 이제 API 문서, 튜토리얼, Electron 관련 npm 패키지 등을 즉각적으로 검색할 수 있는 새로운 검색 엔진을 제공한다.

Electron과 같은 새로운 기술이나 프레임워크를 배우는 것은 부담스러울 수 있다. [빠른 시작] 단계를 넘어서면, 최선의 방법을 배우거나 적절한 API를 찾거나 꿈꾸던 앱을 만들 수 있는 도구를 발견하는 것이 어려울 수 있다. 우리는 Electron 웹사이트가 더 빠르고 쉽게 앱을 만들 수 있는 리소스를 찾는 데 더 나은 도구가 되기를 원한다.

electronjs.org의 어떤 페이지를 방문해도 페이지 상단에 새로운 검색 입력창을 찾을 수 있다.

검색 엔진​

웹사이트에 검색 기능을 추가하려고 처음 계획했을 때, 우리는 GraphQL을 백엔드로 사용해 자체 검색 엔진을 구축했다. GraphQL은 작업하기 재미있었고, 검색 엔진도 꽤 성능이 좋았다. 하지만 우리는 검색 엔진을 만드는 일이 결코 간단하지 않다는 사실을 금방 깨달았다. 여러 단어 검색이나 오타 감지 같은 기능은 제대로 구현하려면 상당한 노력이 필요했다. 바퀴를 다시 발명하지 않고 기존 검색 솔루션을 사용하기로 결정했다. 우리가 선택한 것은 Algolia다.

Algolia는 호스팅 검색 서비스로, React, Vue, Bootstrap, Yarn 등 유명 오픈소스 프로젝트에서 널리 사용되고 있다. 여러 다른 프로젝트에서도 검색 엔진으로 채택하고 있다.

Electron 프로젝트에 Algolia가 적합했던 몇 가지 특징은 다음과 같다:

• InstantSearch.js는 타이핑하는 즉시 결과를 보여주며, 보통 1ms 내에 결과가 나타난다.
• 오타 허용 기능은 widnow처럼 잘못 입력해도 여전히 결과를 제공한다.
• 고급 쿼리 문법은 "정확한 따옴표 일치"와 -제외 기능을 지원한다.
• API 클라이언트는 오픈소스이며 문서화가 잘 되어 있다.
• 분석 기능은 사용자가 가장 많이 검색하는 내용과 찾지 못한 내용을 알려준다. 이를 통해 Electron 문서를 어떻게 개선할지 유용한 통찰을 얻을 수 있다.
• Algolia는 오픈소스 프로젝트에 무료로 제공된다.

API 문서​

때로는 무엇을 해야 할지는 알지만, 정확히 어떻게 해야 할지 모를 때가 있다. Electron에는 750개가 넘는 API 메서드, 이벤트, 프로퍼티가 있다. 사람이 이 모든 것을 쉽게 기억하기는 어렵지만, 컴퓨터는 이런 일에 능숙하다. Electron의 JSON API 문서를 사용해 이 모든 데이터를 Algolia에 인덱싱했기 때문에, 이제 원하는 API를 쉽게 찾을 수 있다.

예를 들어, 윈도우 크기를 조정하려면 resize를 검색하면 바로 필요한 메서드로 이동할 수 있다.

튜토리얼​

Electron은 API 문서를 보완하기 위해 지속적으로 튜토리얼 컬렉션을 확장하고 있다. 이제 특정 주제에 대한 튜토리얼을 관련 API 문서와 함께 더 쉽게 찾을 수 있다.

보안 관련 모범 사례를 찾고 있는가? security를 검색해 보자.

npm 패키지​

현재 npm 레지스트리에는 70만 개가 넘는 패키지가 등록되어 있다. 필요한 패키지를 찾는 것이 항상 쉬운 일은 아니다. 이러한 모듈을 더 쉽게 발견할 수 있도록, 우리는 Electron과 함께 사용하기 위해 특별히 제작된 3400개 이상의 모듈을 모아 electron-npm-packages라는 컬렉션을 만들었다.

Libraries.io의 팀은 코드, 커뮤니티, 문서, 사용량 등 다양한 지표를 기반으로 소프트웨어 프로젝트에 점수를 매기는 시스템인 SourceRank를 개발했다. 우리는 npm 레지스트리에 있는 모든 모듈의 점수를 포함한 sourceranks 모듈을 만들었고, 이 점수를 사용해 패키지 검색 결과를 정렬한다.

Electron의 내장 IPC 모듈 대신 사용할 수 있는 대안을 찾고 있다면, is:package ipc로 검색해 보자.

Electron 앱​

Algolia로 데이터를 쉽게 인덱싱할 수 있기 때문에, electron/apps에 있는 기존 앱 목록을 추가했다.

music이나 homebrew로 검색해 보자.

검색 결과 필터링​

GitHub의 코드 검색을 사용해 본 적이 있다면, extension:js나 user:defunkt와 같은 콜론으로 구분된 키-값 필터를 알고 있을 것이다. 우리는 이 필터링 기법이 매우 강력하다고 생각하기 때문에, Electron의 검색 기능에 is: 키워드를 추가하여 특정 타입의 결과만 표시할 수 있게 했다:

• is:api thumbnail
• is:tutorial security
• is:package ipc
• is:app graphql

키보드 네비게이션​

사람들은 키보드 단축키를 좋아한다! 새로운 검색 기능은 키보드에서 손을 떼지 않고도 사용할 수 있다:

• /를 누르면 검색 입력창에 포커스가 이동한다.
• esc를 누르면 검색 입력창에 포커스가 이동하고 내용이 지워진다.
• down을 누르면 다음 검색 결과로 이동한다.
• up를 누르면 이전 검색 결과로 이동하거나 검색 입력창으로 돌아간다.
• enter를 누르면 검색 결과를 연다.

이 키보드 상호작용을 가능하게 하는 모듈을 오픈소스로 공개했다. 이 모듈은 Algolia InstantSearch와 함께 사용하도록 설계되었지만, 다양한 검색 구현과 호환될 수 있도록 일반화되었다.

여러분의 피드백을 기다립니다​

새로운 검색 도구를 사용하면서 문제를 발견했다면, 여러분의 의견을 들려주세요!

피드백을 제출하는 가장 좋은 방법은 GitHub의 해당 리포지토리에 이슈를 등록하는 것입니다:

• electron/electronjs.org는 Electron 웹사이트입니다. 어디에 이슈를 등록해야 할지 모르겠다면, 여기를 선택하는 것이 가장 좋습니다.
• electron/algolia-indices는 검색 가능한 모든 Electron 데이터가 컴파일되는 곳입니다.
• electron/search-with-your-keyboard는 키보드로 검색 인터페이스를 탐색할 수 있게 해줍니다.
• algolia/instantsearch.js는 타이핑과 동시에 검색을 가능하게 하는 브라우저 측 클라이언트입니다.
• algolia/algoliasearch-client-javascript는 Algolia 서버에 데이터를 업로드하기 위한 Node.js 클라이언트입니다.

감사의 말​

새로운 검색 기능을 구축해 준 Emily Jordan과 Vanessa Yuen에게 특별한 감사를 표한다. 또한 SourceRank 점수를 제공한 Libraries.io와 시작을 도와준 Algolia 팀에게도 감사한다. 🍹

새로운 다국어 지원 Electron 웹사이트가 출시된 이후, 영어권 이외의 개발자들이 Electron 개발 환경을 더 쉽게 접할 수 있도록 노력해왔다.

이번에는 흥미로운 i18n 업데이트 소식을 전한다!

🌐 언어 전환 기능​

많은 사람들이 번역된 문서를 읽을 때 원본 영어 문서와 함께 참조한다는 사실을 알고 있는가? 이렇게 하는 이유는 영어 문서에 익숙해지기 위해서이기도 하고, 국제화된 문서에서 발생할 수 있는 오래되거나 부정확한 번역을 피하기 위해서이다.

영어 문서와의 교차 참조를 더 쉽게 하기 위해, 최근에 Electron 문서에서 특정 섹션을 영어와 현재 웹사이트에서 선택한 언어 사이에서 원활하게 전환할 수 있는 기능을 추가했다. 웹사이트에서 영어가 아닌 언어를 선택한 경우, 언어 전환 버튼이 나타난다.

⚡️ 번역 페이지 빠른 접근​

문서를 읽다가 오타나 잘못된 번역을 발견한 적이 있는가? 이제 더 이상 Crowdin에 로그인하고, 로케일을 선택하고, 수정할 파일을 찾는 등의 번거로운 과정을 거칠 필요가 없다. 대신 해당 문서 하단으로 스크롤하여 "이 문서 번역하기"(또는 해당 언어로 된 동일한 문구)를 클릭하면 된다. 짜잔! 바로 Crowdin 번역 페이지로 이동한다. 이제 번역 마법을 발휘해 보자!

📈 현황 통계​

Electron 문서의 국제화(i18n) 작업을 공개한 이후, 전 세계 Electron 커뮤니티 멤버들의 번역 기여가 크게 증가했다. 현재까지 총 1,719,029개의 문자열이 번역되었으며, 1,066명의 커뮤니티 번역가가 참여했고, 25개 언어로 번역이 진행 중이다.

이 그래프는 현재 속도(작성 시점 기준 최근 14일 동안의 프로젝트 활동을 기반으로 함)를 유지할 경우, 각 언어로 프로젝트를 번역하는 데 필요한 대략적인 시간을 보여준다.

📃 번역가 설문 조사​

Electron 개선을 위해 시간을 내어 도움을 주신 모든 분들께 진심으로 감사드립니다! 번역가 커뮤니티의 노고를 제대로 인정하기 위해, Crowdin과 Github 사용자명 간의 매핑 정보를 수집하는 설문 조사를 마련했습니다.

저희의 훌륭한 번역가 중 한 분이라면, 잠시 시간을 내어 이 설문에 응답해 주시기 바랍니다: https://goo.gl/forms/b46sjdcHmlpV0GKT2.

여러분의 소중한 의견은 Electron 프로젝트의 발전에 큰 도움이 될 것입니다. 감사합니다!

Node의 국제화 프로젝트​

Electron의 i18n 프로젝트가 성공적으로 진행된 것을 보고, Node.js도 새롭게 개편된 i18n 프로젝트를 우리가 사용하는 패턴을 따라가기로 결정했다! 🎉 Node.js i18n 프로젝트는 이제 시작되었고 큰 추진력을 얻었지만, 초기 제안과 그 배경에 대해 여기서 여전히 읽어볼 수 있다.

🔦 기여 가이드​

Electron을 더욱 국제화하기 위해 함께하고 싶다면, 시작하는 데 도움이 될 기여 가이드를 참고하세요. 즐거운 국제화 작업 되세요! 📚

Electron의 새로운 웹사이트가 electronjs.org로 이전했다! 기존의 정적 Jekyll 사이트를 Node.js 웹 서버로 교체하면서, 사이트를 다국어로 지원할 수 있는 유연성을 확보했고, 더 많은 흥미로운 기능을 추가할 수 있는 기반을 마련했다.

🌍 다국어 지원​

Electron 앱 개발을 전 세계 개발자들이 더 쉽게 접근할 수 있도록 웹사이트의 국제화 작업을 시작했다. GitHub과 연동되는 Crowdin이라는 현지화 플랫폼을 사용하며, 콘텐츠가 다양한 언어로 번역될 때마다 자동으로 풀 리퀘스트를 생성하고 업데이트한다.

지금까지 조용히 진행해온 이 프로젝트에 75명 이상의 Electron 커뮤니티 멤버들이 자발적으로 참여했다. 웹사이트를 국제화하고 Electron 문서를 20개 이상의 언어로 번역하는 작업에 힘을 보태고 있다. 현재 프랑스어, 베트남어, 인도네시아어, 중국어 등의 언어 번역이 활발히 진행 중이며, 전 세계에서 매일 기여가 이뤄지고 있다.

원하는 언어를 선택하고 번역 진행 상황을 확인하려면 electronjs.org/languages를 방문하면 된다.

여러 언어에 능통하고 Electron 문서 및 웹사이트 번역에 관심이 있다면 electron/electron-i18n 저장소를 방문하거나, GitHub 계정으로 로그인하여 바로 Crowdin에서 번역 작업에 참여할 수 있다.

현재 Crowdin에서 Electron 프로젝트를 위해 21개 언어가 활성화되어 있다. 더 많은 언어를 추가하는 것은 간단하므로, 번역에 관심이 있지만 원하는 언어가 목록에 없다면 알려주기만 하면 해당 언어를 활성화할 것이다.

원본 마크다운 문서 읽기​

원본 마크다운 파일로 문서를 읽고 싶다면, 이제 어떤 언어로든 가능하다:

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

앱 페이지​

현재 모든 Electron 앱은 Electron 사이트에 자체 페이지를 쉽게 가질 수 있다. 몇 가지 예제로는 Etcher, 1Clipboard, 또는 GraphQL Playground를 확인할 수 있다. 여기서는 일본어 버전의 사이트에 표시된 GraphQL Playground를 보여준다:

현존하는 Electron 앱 중에는 놀라운 것들이 많지만, 항상 쉽게 찾을 수 있는 것은 아니다. 또한 모든 개발자가 앱을 홍보하고 배포하기 위한 적절한 웹사이트를 구축할 시간과 리소스를 갖고 있지도 않다.

PNG 아이콘 파일과 약간의 앱 메타데이터만 사용하면 주어진 앱에 대한 많은 정보를 수집할 수 있다. GitHub에서 수집한 데이터를 활용해 앱 페이지는 스크린샷, 다운로드 링크, 버전, 릴리스 노트, 그리고 공개 저장소가 있는 모든 앱의 README를 표시할 수 있다. 각 앱의 아이콘에서 추출한 색상 팔레트를 사용해 대담하고 접근성이 좋은 색상을 생성함으로써 각 앱 페이지에 시각적 차별성을 부여할 수 있다.

앱 인덱스 페이지는 이제 카테고리와 키워드 필터를 제공해 GraphQL GUI나 p2p 도구와 같은 흥미로운 앱을 찾을 수 있게 한다.

만약 여러분의 Electron 앱을 이 사이트에 소개하고 싶다면, electron/electron-apps 저장소에 풀 리퀘스트를 열어보자.

Homebrew로 한 줄로 설치하기​

macOS용 패키지 관리자인 Homebrew에는 cask라는 서브커맨드가 있다. 이 명령어를 사용하면 터미널에서 단 한 줄의 명령어로 데스크톱 앱을 쉽게 설치할 수 있다. 예를 들어 brew cask install atom과 같은 명령어를 사용할 수 있다.

우리는 인기 있는 Electron 앱의 Homebrew cask 이름을 수집하기 시작했고, cask가 있는 모든 앱 페이지에 macOS 사용자를 위한 설치 명령어를 표시하고 있다.

Homebrew cask 이름이 있는 모든 앱을 보려면 electronjs.org/apps?q=homebrew를 방문하면 된다. 만약 우리가 아직 인덱싱하지 않은 cask가 있는 다른 앱을 알고 있다면, 추가해 주세요!

🌐 새로운 도메인으로 이전​

이제 사이트를 electron.atom.io에서 새로운 도메인인 electronjs.org로 옮겼다.

Electron 프로젝트는 GitHub의 오픈소스 텍스트 에디터인 Atom에서 시작되었다. Atom은 웹 기술을 기반으로 구축된 에디터다. Electron은 원래 atom-shell이라는 이름으로 불렸다. Atom이 이 기술을 처음 사용한 앱이었지만, 이 마법 같은 Chromium과 Node 런타임이 다양한 애플리케이션에 활용될 수 있다는 사실이 금방 알려졌다. Microsoft와 Slack 같은 회사들이 atom-shell을 사용하기 시작하면서, 이 프로젝트에 새로운 이름이 필요하다는 점이 명확해졌다.

그렇게 "Electron"이 탄생했다. 2016년 초, GitHub은 Atom과 별도로 Electron 개발과 유지보수에 집중할 새로운 팀을 꾸렸다. 그 이후로 Electron은 수천 명의 앱 개발자에게 채택되었으며, 이제는 많은 대기업에서 필수적인 기술로 자리 잡았다. 이들 중 상당수는 자체 Electron 팀을 운영하고 있다.

Atom과 GitHub Desktop 같은 GitHub의 Electron 프로젝트를 지원하는 것은 여전히 우리 팀의 우선순위다. 하지만 새로운 도메인으로 이전함으로써 Atom과 Electron 사이의 기술적 차이를 더 명확히 하고자 한다.

🐢🚀 Node.js를 어디서나 활용하기​

이전의 Electron 웹사이트는 Ruby 기반의 정적 사이트 생성기인 Jekyll로 구축되었다. Jekyll은 정적 웹사이트를 만드는 데 훌륭한 도구지만, 웹사이트가 점점 더 복잡해지면서 한계를 느끼기 시작했다. 우리는 적절한 리다이렉트와 동적 콘텐츠 렌더링과 같은 더 많은 동적 기능을 원했고, Node.js 서버가 명백한 선택이었다.

Electron 생태계는 Python부터 C++, Bash까지 다양한 프로그래밍 언어로 작성된 컴포넌트를 포함하고 있다. 하지만 JavaScript는 Electron의 기반이자 커뮤니티에서 가장 많이 사용되는 언어다.

웹사이트를 Ruby에서 Node.js로 마이그레이션함으로써, 우리는 웹사이트에 기여하고자 하는 사람들의 진입 장벽을 낮추고자 한다.

⚡️ 오픈소스 참여가 쉬워졌다​

여러분의 시스템에 Node.js (8 버전 이상)와 git이 설치되어 있다면, 로컬에서 사이트를 쉽게 실행할 수 있다:

git clone https://github.com/electron/electronjs.org
cd electronjs.org
npm install
npm run dev

새로운 웹사이트는 Heroku에 호스팅된다. 우리는 배포 파이프라인과 Review Apps 기능을 사용하며, 이 기능은 모든 풀 리���스트에 대해 실행 가능한 앱 복사본을 자동으로 생성한다. 이를 통해 리뷰어가 사이트의 실제 복사본에서 풀 리���스트의 효과를 쉽게 확인할 수 있다.

🙏 기여자들에게 감사드립니다​

전 세계에서 자발적으로 시간과 열정을 바쳐 Electron을 개선하는 데 기여한 모든 분들에게 특별한 감사를 표합니다. 오픈소스 커뮤니티의 열정은 Electron의 성공에 큰 힘이 되었습니다. 정말 감사합니다!

오늘 Electron 문서에 몇 가지 개선 사항을 발표한다. 이제 모든 새로운 릴리스에는 Electron의 모든 공개 API를 상세히 설명하는 JSON 파일이 포함된다. 개발자들이 Electron의 API 문서를 새로운 방식으로 활용할 수 있도록 이 파일을 만들었다.

스키마 개요​

각 API는 name, description, type 등의 속성을 가진 객체로 구성된다. BrowserWindow와 Menu 같은 클래스는 인스턴스 메서드, 인스턴스 속성, 인스턴스 이벤트 등을 설명하는 추가 속성을 포함한다.

다음은 BrowserWindow 클래스를 설명하는 스키마의 일부이다:

{
  name: 'BrowserWindow',
  description: '브라우저 윈도우를 생성하고 제어한다.',
  process: {
    main: true,
    renderer: false
  },
  type: 'Class',
  instanceName: 'win',
  slug: 'browser-window',
  websiteUrl: 'https://electronjs.org/docs/api/browser-window',
  repoUrl: 'https://github.com/electron/electron/blob/v1.4.0/docs/api/browser-window.md',
  staticMethods: [...],
  instanceMethods: [...],
  instanceProperties: [...],
  instanceEvents: [...]
}

다음은 메서드 설명의 예시로, apis.BrowserWindow.instanceMethods.setMaximumSize 인스턴스 메서드의 설명이다:

{
  name: 'setMaximumSize',
  signature: '(width, height)',
  description: '윈도우의 최대 크기를 width와 height로 설정한다.',
  parameters: [{
    name: 'width',
    type: 'Integer'
  }, {
    name: 'height',
    type: 'Integer'
  }]
}

새로운 데이터 활용하기​

개발자가 프로젝트에서 이 구조화된 데이터를 쉽게 사용할 수 있도록, 우리는 electron-docs-api라는 작은 npm 패키지를 만들었다. 이 패키지는 새로운 Electron 릴리스가 나올 때마다 자동으로 업데이트된다.

npm install electron-api-docs --save

즉시 사용해보고 싶다면, Node.js REPL에서 이 모듈을 시험해볼 수 있다:

npm i -g trymodule && trymodule electron-api-docs=apis

데이터 수집 방식​

Electron의 API 문서는 Electron 코딩 스타일과 Electron 스타일 가이드를 준수한다. 이 때문에 문서의 내용을 프로그래밍 방식으로 파싱할 수 있다.

electron-docs-linter는 electron/electron 저장소의 새로운 개발 의존성이다. 이 도구는 커맨드라인에서 모든 마크다운 파일을 검사하고 스타일 가이드의 규칙을 강제한다. 오류가 발견되면 해당 오류를 나열하고, 릴리스 프로세스를 중단한다. API 문서가 유효한 경우 electron-json.api 파일이 생성되고, GitHub에 업로드되어 Electron 릴리스의 일부로 포함된다.

표준 자바스크립트와 표준 마크다운​

올해 초, Electron의 코드베이스는 모든 자바스크립트 파일에 대해 standard 린터를 사용하도록 업데이트되었다. Standard의 README는 이 선택의 이유를 다음과 같이 요약하고 있다:

표준 스타일을 채택한다는 것은 코드의 명확성과 커뮤니티 규약을 개인적인 스타일보다 우선시한다는 의미이다. 이는 모든 프로젝트와 개발 문화에 적합하지 않을 수 있지만, 오픈소스는 초보자에게 가혹한 환경이 될 수 있다. 명확하고 자동화된 기여자 기대치를 설정하면 프로젝트가 더 건강해진다.

또한 최근에는 standard-markdown을 만들어 문서에 포함된 모든 자바스크립트 코드 조각이 유효하고 코드베이스의 스타일과 일치하는지 확인하고 있다.

이 두 도구를 함께 사용하면 지속적 통합(CI)을 통해 풀 리퀘스트에서 오류를 자동으로 찾을 수 있다. 이를 통해 코드 리뷰를 하는 사람들의 부담을 줄이고, 문서의 정확성에 대한 신뢰를 더욱 높일 수 있다.

커뮤니티의 노력​

Electron 문서는 지속적으로 개선되고 있으며, 이는 오픈소스 커뮤니티의 큰 기여 덕분이다. 이 글을 쓰는 시점에서 거의 300명이 문서에 기여했다.

이 새로운 구조화된 데이터로 사람들이 어떤 일을 해낼지 기대가 크다. 가능한 활용 사례는 다음과 같다:

• https://electronjs.org/docs/ 문서 개선
• TypeScript를 사용하는 프로젝트에서 Electron 개발을 더 효율적으로 할 수 있는 TypeScript 정의 파일 생성
• Dash.app이나 devdocs.io 같은 도구를 위한 검색 가능한 오프라인 문서 제공

Electron 커뮤니티의 활발한 참여가 문서 품질을 높이는 데 큰 역할을 하고 있다. 이러한 노력은 개발자들이 Electron을 더 쉽게 이해하고 활용할 수 있도록 돕는다. 앞으로도 더 많은 사람들이 참여해 문서를 발전시켜 나가길 기대한다.

이번 주에 Electron 문서를 electronjs.org로 옮겼다. 최신 문서는 /docs/latest에서 확인할 수 있다. 이전 버전의 문서도 유지하므로, 사용 중인 버전에 해당하는 문서는 /docs/vX.XX.X에서 찾아볼 수 있다.

사용 가능한 문서 버전을 확인하려면 /docs를 방문하거나, 모든 최신 버전의 문서를 한 페이지에서 보려면 /docs/all로 이동하면 된다. cmd + f를 사용해 검색하기에 편리하다.

문서 내용에 기여하고 싶다면, Electron 저장소에서 작업할 수 있다. 문서는 여기에서 가져오며, 각 마이너 릴리스마다 가져와 Jekyll로 만들어진 Electron 사이트 저장소에 추가한다.

문서를 한 저장소에서 다른 저장소로 가져오는 방법에 대해 더 알고 싶다면 아래를 계속 읽어보자. 그렇지 않으면 문서를 즐기길 바란다!

기술적 세부 사항​

우리는 Electron 코어 저장소 내의 문서를 그대로 보존한다. 이는 electron/electron이 항상 최신 버전의 문서를 갖고 있음을 의미한다. 새로운 Electron 버전이 출시되면, 해당 문서를 Electron 웹사이트 저장소인 electron/electronjs.org로 복제한다.

문서를 가져오기 위해 script/docs vX.XX.X 커맨드라인 인터페이스를 사용해 스크립트를 실행한다. 이때 --latest 옵션을 포함할지 여부는 가져오는 버전이 최신 버전인지에 따라 결정된다. 문서를 가져오는 스크립트는 몇 가지 흥미로운 Node 모듈을 사용한다:

• nugget: 릴리스 tarball을 가져와 임시 디렉토리에 저장한다.
• gunzip-maybe: tarball을 압축 해제한다.
• tar-fs: tarball에서 /docs 디렉토리만 스트리밍하고, 파일을 필터링 및 처리한다. 이 과정에서 through2를 사용해 Jekyll 사이트와 잘 동작하도록 조정한다.

테스트는 모든 부분이 예상대로 동작하는지 확인하는 데 도움을 준다.

Jekyll​

Electron 웹사이트는 Jekyll로 구축되어 있으며, 문서화를 위해 컬렉션(Collections) 기능을 활용한다. 이 구조는 다음과 같다:

electron.atom.io
└── _docs
    ├── latest
    ├── v0.27.0
    ├── v0.26.0
    ├── so on
    └── so forth

Front matter​

Jekyll이 각 페이지를 렌더링하려면 최소한 빈 front matter가 필요하다. 우리는 모든 페이지에서 front matter를 활용할 것이므로, /docs 디렉토리를 스트리밍하는 동안 파일이 README.md인지 확인한다. README.md 파일인 경우 하나의 front matter 설정을 받고, 마크다운 확장자를 가진 다른 파일인 경우 약간 다른 front matter를 받는다.

각 페이지는 다음과 같은 front matter 변수 세트를 받는다:

---
version: v0.27.0
category: Tutorial
title: 'Quick Start'
source_url: 'https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md'
---

README.md는 추가적으로 permalink를 받아 URL이 /readme/와 같은 어색한 형태가 아닌 index.html이라는 공통 루트를 가지도록 한다.

permalink: /docs/v0.27.0/index.html

설정과 리다이렉트​

사이트의 _config.yml 파일에서는 문서를 가져올 때 --latest 플래그를 사용할 때마다 latest_version 변수가 설정된다. 또한 사이트에 추가된 모든 버전 목록과 전체 문서 컬렉션에 대해 원하는 고정 링크도 함께 추가한다.

latest_version: v0.27.0
available_versions:
  - v0.27.0
collections:
  docs: { output: true, permalink: '/docs/:path/' }

사이트 루트에 있는 latest.md 파일은 이 프런트 매터만 포함하고 있으며, 이를 통해 사용자는 특정 최신 버전 번호를 사용하지 않고도 electron.atom.io/docs/latest URL을 방문해 최신 버전 문서의 인덱스(즉, README)를 볼 수 있다(물론 최신 버전 번호를 직접 사용해도 된다).

---
permalink: /docs/latest/
redirect_to: /docs/{{ site.data.releases[0].version }}
---

레이아웃​

docs.html 레이아웃 템플릿에서는 조건문을 사용해 헤더와 브레드크럼브에 정보를 표시하거나 숨긴다.

{% raw %} {% if page.category != 'ignore' %}
<h6 class="docs-breadcrumb">
  {{ page.version }} / {{ page.category }} {% if page.title != 'README' %} / {{
  page.title }} {% endif %}
</h6>
{% endif %} {% endraw %}

사용 가능한 버전을 보여주는 페이지를 만들려면 사이트 루트에 있는 versions.md 파일에서 설정 파일의 리스트를 순회한다. 이 페이지에는 /docs/라는 고정 링크를 부여한다.

{% raw %} {% for version in site.available_versions %} - [{{ version
}}](/docs/{{ version }}) {% endfor %} {% endraw %}

이 기술적인 내용이 흥미로웠기를 바란다! Jekyll을 사용해 문서 사이트를 만드는 방법에 대해 더 알고 싶다면, GitHub의 문서 팀이 Jekyll로 GitHub 문서를 게시하는 방법을 확인해 보자.