Trello + Sapper JAMstack (3부)

Sapper 설정

Sapper 설정은 설치가 매우 쉽습니다. 자세한 내용은 확인하십시오here. 저는 개인적으로 롤업을 선호합니다.

# for Rollup
npx degit "sveltejs/sapper-template#rollup" my-app
# for webpack
npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app

npm install
npm run dev & open http://localhost:3000

편집기에서 프로젝트를 열면 처음에는 위압적으로 보일 수 있지만 Sapper의 SSG 부분을 생성할 때 매우 직관적인 혼란스러운 디렉토리 구조를 알 수 있습니다.

└───routes
│   │   index.svelte
│   │   about.svelte
│   │   _layout.svelte
|   |   _error.svlete
│   └───blog
│       │   [slug].svelte
│       │   index.svelte
│       │   [slug].json.js
│       │   _posts.js
│       │   index.json.js

Sapper에서 시작 부분에 _ 밑줄이 있는 파일은 숨김/개인 파일입니다. Trello에서 API를 통해 블로그 게시물을 가져오는 로직은 블로그 게시물에 적합한 JSON 파일을 생성하는 _posts.js 파일에서 발생합니다. [slug].svelte 및 index.svelte에는 게시물 목록과 게시물 자체를 담당하는 템플릿이 포함되어 있습니다. [slug].json.js 및 index.json.js JSON을 내보냅니다. 이 파일 없이도 가능하지만 SSG는 수행했지만 성능에 큰 타격을 주며 .
_posts.js 및 index.svelte에 채울 수 있는 블로그 게시물에 대한 데이터가 있는 JSON 개체를 내보내는 [slug].svelte에 대한 스니펫

//_posts.js

import fetch from "node-fetch";
let data = {};
let url = `https://api.trello.com/1/lists/5f538d3a842e0a3b6ce9f259/cards?key={key}&token={token}`; //this is from your previous post
let trello = async function getPosts() {
  const res = await fetch(url);
  data = await res.json();
  return (data = data.map((e) => {

    const months = ["jan", "feb", "mar","apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"];
    let posted_date = new Date(e.dateLastActivity)
    let formatted_date = `${posted_date.getDate()} ${months[posted_date.getMonth()]} ${posted_date.getFullYear()}`
    let tags = e.labels.map(e=>{
      return {
        name:e.name,
        color:e.color
      }
    })

    return { title: e.name, slug: e.name.toLowerCase().replace(/[^\w ]+/g,'').replace(/ +/g,'-'), desc: e.desc, image:e.cover.scaled,time:formatted_date,tags };
  }));
};

export default trello;

index.json.js 및 [slug].json.js를 약간 수정하면 자동으로 Trello 항목을 블로그 게시물로 가져올 수 있습니다.

//index.json.js
import trello from "./_posts.js";

export async function get(req, res) {
  res.writeHead(200, {
    "Content-Type": "application/json",
  });
  let data = await trello();
  let posts = data;
  posts = posts.map((post) => {
    return {
      title: post.title,
      slug: post.slug,
      time: post.time,
      tags: post.tags
    };
  });
  res.end(JSON.stringify(posts));
}

//[slug].json.js
import trello from './_posts.js';


const lookup = new Map();


export async function get(req, res, next) {
    // the `slug` parameter is available because
    // this file is called [slug].json.js
    const { slug } = req.params;
    let data = await trello()
    data.forEach(e => {
        lookup.set(e.slug, JSON.stringify(e));
    });
    if (lookup.has(slug)) {
        res.writeHead(200, {
            'Content-Type': 'application/json'
        });

        res.end(lookup.get(slug));
    } else {
        res.writeHead(404, {
            'Content-Type': 'application/json'
        });

        res.end(JSON.stringify({
            message: `Not found`
        }));
    }


}