새 기능 구축: 대화 미리 보기

나는 백엔드 개발자이기 때문에 대부분의 시간을 백엔드 일을 하고 있다.내가 전선에서 뭔가를 해야 할 때, 나는 대부분의 시간을 스트레스를 느낀다.
그리고 나서 나는 자신의 개인 사이트를 구축하기 시작했다.너무 좋아요!이것은 잠시 Netlify에 있는 블로그 사이트입니다. 그곳에서 저에게 연락하여 제가 쓴 내용을 읽고 건의하는 트윗을 통해 제 내용을 공유할 수 있습니다. 지금 제 직업 생활에서 강연을 볼 수 있습니다.
회담은 주로 기본 주제에 관한 것이었는데, 그 중 하나는 현재 진행 중이지만, 나는 내가 한 일을 보여주고 싶다.이게 바로 귀찮게 시작할 때입니다.

어떻게

첫 번째는 내가 원하는 것을 정의하는 것이다. 나는 나의 강연을 보여주고 싶다.이것은 매우 쉽지만, 현실 생활에서는 결코 쉽지 않다.
당신들에게 더 많은 언어 환경을 제공하기 위해서, 나는 나의 모든 프레젠테이션 원고를 구글 하드디스크에 저장하여, 내가 어디로 가든지, 나는 그것들을 처리할 수 있습니다.이것은 그것들을 처리하는 것을 더욱 쉽게 하지만, 당신이 그것을 오프라인으로 표시하려면 좀 어렵다.
왜?우선 파일을 다운로드해야 하기 때문이다.이것은 대뇌가 없는 UI 작업입니다. 마우스 오른쪽 버튼으로 클릭하고 다운로드하기만 하면 됩니다.게임 잘했어요.코드가 이 과정을 실행하기를 원할 때, 작업은 더욱 복잡해진다.그래서 나는 외로운 길을 걸었다. 이것은 내가 알고 있는 유일한 길이다. 똑같은 시도를 하고 성공한 사람을 찾는 것이다.
검색 상자에 drive 또는 google drive 를 입력하면 여러 개 Gatsby plugins 를 찾을 수 있습니다.나는 내가 원하는 것을 찾으려고 하나하나 시도했다.만약 당신이 비슷한 일을 하고 싶다면, 여기에 두드러진 목록이 하나 있다.
gatsby-source-google-docs

문제: 내가 생각한 용례는 도서관에서 한 것

과 매우 다르다
gatsby-plugin-drive

질문: 프레젠테이션이 아닌 문서 파일만 다운로드할 수 있습니다

gatsby-source-drive

문제: 그것은 작용하지 않는다.어쩌면 내가 뭘 오해했을지도 몰라.

gatsby-plugin-docs-sheets

질문: 폼만 다운로드할 수 있습니다.나는 이것이 gatsby-plugin-drive

에 기초한 것이라고 확신한다
따라서 내 요구를 충족시킬 수 있는 플러그인이 없기 때문에 나는 어쩔 수 없이 어려운 결정을 내렸다.

내 기능 포기

나만의 플러그인 만들기

두 번째 플러그인을 골랐습니다. 이 플러그인이 결과입니다. Gatsby-plugin-googledrive
전체 플러그인은 하나의 아이디어를 바탕으로 한다. 구글 드라이브folderID를 지정하고 폴더에서 모든 파일을 다운로드하여 하위 폴더를 훑어보고 선택한 destination에 같은 구조를 만든다.각 폴더의 파일을 다운로드합니다.
기술적 디테일은 이 프로젝트의 GitHub에서 찾을 수 있습니다. 이것은 원천적인 것이기 때문에 그것을 둘러싸고 뭔가를 구축하고 싶다면 마음대로 할 수 있습니다.

어떻게섹션 2

플러그인을 만든 후 삽입하고 다운로드를 시작합니다.나는 마침내 나의 현지 사이트에서 이 서류들을 찾았는데, 이것은 나의 목표와 또 한 걸음 가까워졌다.
나는 이곳에 PDF가 있는데, 지금 나는 세 가지 일을 하고 싶다.

내 파일 시스템(및 응용 프로그램)의 PDF에서 URL 가져오기

PDF의 첫 페이지(표지)

이 페이지를 이미지로 변환하고 예쁜 격자에 표시

소, 나는 세 가지 물건이 필요해.

파일 시스템에서 PDF를 가져오는 방법

PDF를 읽는 방법

읽은 PDF를 이미지로 변환하는 방법

첫 번째 항목에 대해 저는 게이츠비를 사용하기 때문에 gatsby-source-filesystem를 사용하여 제 폴더를 읽고 제 파일을 가리키는 실제 자산 URL을 얻었습니다.이것은 정말 간단합니다. 이것을 제 gatsby-config.js 파일에 추가하기만 하면 됩니다.

    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "talks",
        path: "${__dirname}/src/talks/",
      },
    }

이렇게!그리고 내 파일 시스템을 조회하고 데이터를 포함하는 nodes 을 얻기 위해서는 몇 가지 graphql 가 필요합니다.

  query {
    allFile (filter: {sourceInstanceName: { eq: "talks" } }) {
      edges {
        node {
          name
          publicURL
        }
      }
    }
  }  

이 질의는 다음 두 가지 작업을 수행합니다.

획득path의instance name 아래 모든 파일을 talks(플러그인에 정의된 name속성으로 전달)

각 nodeakafile에 대해 취득name 및 publicURL(자산이 구축된 후 사용할 URL임)

두 번째 항목에 대해 나는 반드시 약간의 연구를 해야 한다.연구 끝에 나는 자바스크립트에서 PDF를 관리하는 표준과 유사한 PDF.JS 을 찾았다.이것은 모질라에 의해 작성된 것으로 유용한 함수가 많다.나는 단지 기본적인 API를 사용해서 나의 기능을 몇 군데에서 일하게 할 뿐이다.

PDFJS.getDocument(talk.publicURL).promise.then((pdf) => {
      pdf.getPage(1).then((page) => {
          // some code goes here
      })
})

GitHub 페이지에서 이 라이브러리에 대한 소개는 간단합니다. 저에게는 너무 작지만 유용합니다.그것 때문에 남은 유일한 일은 PDF 페이지의 데이터를 실제 이미지로 바꾸는 방법을 찾는 것이다.
나는 이 점을 실현하기 위해 아주 좋은 방법을 찾았다.그것은 이렇게 일한다.

PDF 페이지 읽기

페이지 너비 및 높이 크기 조절(페이지 뷰포트 사용)

생성<canvas> 요소

캔버스 컨텍스트를 2d로 설정합니다(이미지를 그릴 것이기 때문에)

확대/축소 페이지를 canvas 의 새 데이터 컨텍스트로 설정

완전한 코드 링크는 이 StackOverflow's answer 에서 어떻게 작동하는지에 대한 예시가 있다.아름답다
이 모든 것이 준비되면 최종 결과는 다음과 같다.

당신이 이 글을 좋아하시길 바랍니다. 제 own website 에서도 이 글을 방문할 수 있습니다.