게이츠비 서류 가방을 만들어서 인스타그램 댓글을 보여주세요.

나는 나의 첫 번째를 창조했다.이는 인스타그램 API를 통해 모든 사용자가 올린 최신 인스타그램 게시물을 표시하고 우버가 구축한 디자인 시스템Base Web을 구현했다.

🚀

이 글에서 나는 너에게 내가 어떻게 이 초보자를 신속하게 원형화하고 구축하는지 보여줄 것이다.나는 너에게 힌트와 요령, 주의사항(그리고 그것들의 해결 방법), 그리고 너의 초보자를 어떻게 시작하는지 알려줄 것이다. (내가 거기서 무엇을 했는지 봐라.👀)
저장소를 보려면 아래에서 을 클릭합니다.

짐로즈 /

🎢 인스타그램 기반 포트폴리오를 만드는 데 쓰이는 경량급, 미니멀리즘의 게이츠비 입문 제품.

❓ 게이츠비는 무엇입니까?

GatsbyReact 기반의 무료 소스 오픈 프레임워크로 개발자가 속도가 매우 빠른 사이트와 응용 프로그램을 구축하는 데 도움을 준다.많은 plugins와 starters가 있는데 그 위에 당신이 구축하고 해독할 수 있는 주제와 같습니다. 지역 사회는 정말 대단합니다. 대단합니다!
나는 게이츠와 한 달 넘게 놀았다.나는 그것으로 재설계와 재건my portfolio을 했고 프리랜서 사진작가의 친구를 위해 작품집을 만들었다.게이츠비와 함께 바다 밑으로 잠입할 수 있는 절호의 기회야!

🤔 그것은 어떻게 일합니까?

이 초보자를 만드는 것은 의외로 쉽지 않다. 게이츠비가 제공하는 자연과 학습 곡선 때문이라고 나는 말한다.상하문으로 말하자면, 나는 인터넷 기술의 초보자이다.

올바른 템플릿 찾기

사용하기 시작하겠습니다Gatsby Default Starter.그것은 게이츠비의 허브 식욕을 돋우는 술로 여겨지는 이미 생산할 수 있게 되었다.위대한 학습과 건설!

인스타그램 연결

이 사이트의 주요 기능은 인스타그램 게시물을 얻고 표시하는 것이다.나에게 행운은 게이츠비에게 하나 있다!그것의 설정은 매우 간단하고 두 가지 시작 방식을 제공했다.

공통 스크래치

인스타그램 API는 어떤 공용 파일에서도 최대 12개의 게시물을 얻을 수 있는 옵션을 제공한다.이것은 우리가 사용할 옵션이 될 것이다.

{
  allInstaNode(sort: { fields: timestamp, order: DESC }, limit: 12) {
    edges {
      node {
        id
        caption
        localFile {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

API 토큰을 사용한 캡처

역사 게시물 (12편 이상) 을 삭제하려면 인증서를 사용해야 합니다.시작하자.
이 조회는 인스타그램 계정의 최신 12편의 게시물과 id(원본 게시물로 리디렉션하는 데 사용), caption와 localFile를 보여줍니다. 이 게시물에는 이미지를 표시하는 데 필요한 데이터가 포함되어 있습니다.

디자인 시스템 선택

이후에 나는 디자인 시스템을 연구하기 시작했다. 왜냐하면 나는 최소한의 설정으로 원형을 만들고 교체하고 싶기 때문이다.바로 그때 나는 Base Web 우보가 만든 디자인 시스템을 발견했다.경량급과 미니멀리즘의 디자인 방법이 그것으로 하여금 이 예에 매우 적합하게 했다.
특징:

견고한 기존 구성 요소날짜 선택기에서 간단한 블록까지.

Styletron 스타일링에 사용됩니다.CSS-in-JS 메서드를 사용합니다.

및 Overrides API를 통해 확장됩니다.

액세스 용이성 내장

Styletron 엔진의 뛰어난 성능

BaseWeb을 사용하여 응답 요소를 만드는 것은 매우 간단합니다.다음은 이미지를 포함하고 표시하는 유연한 메쉬를 만드는 방법입니다.

const Gallery = () => (
  <FlexGrid flexGridColumnCount={[1, 2, 3]}>{renderImages()}</FlexGrid>
);

너는 flexGridColumnCount가 하나의 수조에 둘러싸인 것을 볼 수 있을 것이다. [1, 2, 3].이렇게 하면 브레이크가 자동으로 처리됩니다.

작은 화면 크기: flexGridColumnCount = 1

중간 화면 크기: flexGridColumnCount = 2

대형 화면 크기: flexGridColumnCount = 3

구성 가능한 주제 네가 시작하기 전에

한 가지 주의할 점이 있습니다: Gatsby 사용 은 서버 쪽 렌더링 (SSR) 을 의미하며, React를 통해 실행할 때 정적 내용을 나타냅니다.window 또는 document 와 같은 코드나 플러그인 접근 변수를 사용하면 프로그램을 구축할 때 문제가 발생할 수 있습니다.
이것이 우리 애플리케이션의 입구라고 상상해 봅시다.

import { Client as Styletron } from 'styletron-engine-atomic';
import { Provider as StyletronProvider } from 'styletron-react';
import { LightTheme, BaseProvider, styled } from 'baseui';
import * as React from 'react';

const engine = new Styletron();

export default function EntryPoint() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <h1>Hello!</h1>
      </BaseProvider>
    </StyletronProvider>
  );
}

간단해 보이죠?그것은 심지어 gatsby develop를 통해 일할 수 있다.문제는 gatsby build를 통해 프로그램을 구축할 때 오류document is undefined를 던져서 styletron-engine-atomic 패키지를 가리키는 것이다.정말 재수 없어!아니면, 그래요?
파괴되고 있는 코드를 가리키면 styletron-engine-atomic 방문 document 요소를 볼 수 있습니다. 이것은 게이츠비 생태계를 이해하는 중요한 부분입니다.이러한 요소는 브라우저에만 존재합니다.
이 문제를 해결하려면 브라우저에 들어간 후에 다시 불러올 수 있습니다 styletron-engine-atomic.hydrationuseEffect와 useState의 마력을 빌려 우리는 응용 프로그램에 구성 요소가 설치되면 import 라이브러리에 접근할 수 있다는 것을 알려줄 수 있다. 이것은 우리가 브라우저에 있다는 것을 의미한다.

import { Provider as StyletronProvider } from 'styletron-react';
import { LightTheme, BaseProvider, styled } from 'baseui';
import * as React from 'react';

export default function EntryPoint() {
  const [engine, setEngine] = React.useState(null);

  React.useEffect(() => {
    // Once the `styletron-engine-atomic` library imports
    // We will grab its content and create a new client through it
    import('styletron-engine-atomic').then((styletron) => {
      const clientEngine = new styletron.Client();
      setEngine(clientEngine);
    });
  }, []);

  if (!engine) return null;

  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <h1>Hello!</h1>
      </BaseProvider>
    </StyletronProvider>
  );
}

이러한 변화를 감안하여 이 네트워크 응용은 이미 준비가 다 되었다.

반응 갈고리 🏋️ 게이츠비에게 역도를 시키다

대부분의 게이츠비 응용 프로그램의 입구점은 gatsby-config.js 파일이다.사이트 메타데이터를 지정하고 플러그인을 설정할 수 있습니다.이 경우 기본 플러그인을 제외한 몇 개의 추가 플러그인만 얻을 수 있습니다.

: 인스타그램 API를 통해 데이터를 가져오고 표시해야 합니다.

: 이렇게 해야만 Base 웹 엔진이 스타일론과 Gatsby와 함께 작동할 수 있습니다.gatsby-plugin-styletron .

Read more: 가져오기 바로 가기를 만들 수 있는 옵션이지만 편리한 도구:

// -- gatsby-config.js
{
  resolve: `gatsby-plugin-alias-imports`,
  options: {
    alias: {
      components: `${__dirname}/src/components`,
      data: `${__dirname}/data/`
    }
  }
}

// -- script.js
// Before
import { title } from '../../data/config';
import { Component } from '../components/Component';

// After
import { title } from 'data/config';
import { Component } from 'components';

개츠비 플러그인 별칭 가져오기 어플리케이션을 PWA로 변환(점진적 웹 어플리케이션)

애플리케이션을 PWA로 전환하는 것은 충분한 이유가 있는 대목이다.구글의 총결산 은 상당히 괜찮다.
개츠비가 있으면 이 응용 프로그램을 PWA로 변환하는 것이 얼마나 쉬운가.

내부에 플러그인what PWAs are을 사용합니다.

파일을 만듭니다.우리는 gatsby-plugin-offline 함수에 리셋 함수를 추가해야 한다. 리셋 함수는 응용 프로그램gatsby-config.js을 다시 불러오는 것을 알려준다.

export const onServiceWorkerUpdateReady = () => {
  window.location.reload(true);
};

번영--당신의 사이트가 설립되면 당신은 PWA의 기초 지식을 가지게 됩니다. 됐어!구글onServiceWorkerUpdateReady의 감사 점수다.
Lighthouse

처리 데이터

조작을 간소화하고 가장 중요한 변수를 한 곳에 저장하기 위해 gatsby-browser.js 파일을 만들었습니다.우리는 사이트의 제목, 설명, 저자, 소셜 링크 및 기타 메타데이터를 추가할 수 있다.이 변수들은 SEO 구성 요소에 동력을 제공할 것입니다!

검색 엔진 최적화

나는 에서 schema.org 조직을 사용하겠다는 생각을 얻었다.

import Thumbnail from 'static/images/thumbnail.png';

import {
  address,
  contact,
  foundingDate,
  legalName,
  logo,
  socialLinks,
  url
} from 'data/config';

const structuredDataOrganization = `{
  "@context": "http://schema.org",
  "@type": "Organization",
  "legalName": "${legalName}",
  "url": "${url}",
  "logo": "${logo}",
  "foundingDate": "${foundingDate}",
  "founders": [{
    "@type": "Person",
    "name": "${legalName}"
  }],
  "contactPoint": [{
    "@type": "ContactPoint",
    "email": "${contact.email}",
    "contactType": "customer service"
  }],
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "${address.city}",
    "addressCountry": "${address.country}"
  },
  "sameAs": [
    "${socialLinks.instagram}",
    "${socialLinks.twitter}",
  ]
}`;

그것을 주입하기 위해서, 게이츠비는 우리에게 편집할 수 있는 Smakosh 을 제공했다.우리는 window 스크립트의 형식으로 데이터를 전달해야 한다.

const SEO = ({ description, lang, meta, title }) => {
  const { site } = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          title
          description
          author
        }
      }
    }
  `);

  const metaDescription = description || site.siteMetadata.description;

  return (
    <Helmet>
      <script type='application/ld+json'>
        {structuredDataOrganization}
      </script>
    </Helmet>
  );
};

반응 투구 미디어 쿼리 중단점 변경

기본 웹으로 테마를 덮어쓰는 것은 매우 간단합니다.그들 이 바로 내가 필요로 하는 것이다.

import { LightTheme } from 'baseui';

// Specify your custom breakpoint sizes here
const breakpoints = Object.freeze({
  small: 769,
  medium: 1024,
  large: 1216
});

const ResponsiveTheme = Object.keys(breakpoints).reduce(
  (acc, key) => {
    acc.mediaQuery[
      key
    ] = `@media screen and (min-width: ${breakpoints[key]}px)`;
    return acc;
  },
  {
    breakpoints,
    mediaQuery: {}
  }
);

export default { ...LightTheme, ...ResponsiveTheme };

사용자 정의 브레이크 예 🌯 쌌어!

이 프로젝트를 만드는 것은 게이츠비와 엔진 뚜껑 아래에서 어떻게 일을 하는지 배우는 좋은 방법이다.이것은 네가 인터넷 응용 프로그램을 만드는 데 전념할 수 있도록 아주 빨리 적응할 수 있는 프레임워크이다.필요할 때 필요한 도구를 제공함으로써 이를 실현하고 생산을 지원하는 놀라운 내장 설정을 갖추고 있습니다.
기본 웹은 응용 프로그램과 원형을 구축할 수 있고 덮어쓰기 쉬운 좋은 디자인 시스템이다.내가 특히 좋아하는 것은 웹 응용을 팽창시킬 수 있는 일반적인 구성 요소가 많지 않다는 것이다. 웹 응용 프로그램이 필요로 할 수 있는 정확한 구성 요소가 있다는 것이다.

너의 생각을 나눠라!

당신은 게이츠비에 대해 어떤 경험을 가지고 있습니까?나에게 말해라. 나는 네가 무엇을 보여주고 이야기할 것인지 매우 알고 싶다.
사진은 가 Soragrit Wongsa에서 찍었다.