최신글 목록 가져오기
chchaeun opened this issue · 2 comments
chchaeun commented
안녕하세요. velog readme stats를 유용하게 쓰고 있는 유저입니다! velog readme stats에 최신글 목록을 가져오는 기능이 추가되면 좋을 것 같아서 svg를 짜봤는데, api 부분을 어떻게 처리해야 할지 몰라서 이슈 남깁니다.
fetcher의 variables에 limit: 4를 주었을 때 다음과 같이 나오도록 바디 부분을 작성해봤습니다. hover 스타일 정도만 넣은 상태입니다. (svg를 짜본 게 처음이라 많이 미숙합니다 ㅠㅠ) 이 뒤로 어떻게 진행하면 좋을지 질문드리고 싶습니다!
const createLatestCardBody = ({ posts }) => {
const post_urls = posts.map(
(post) => `https://velog.io/@${post[0].user.username}/` + post.url_slug
);
return `
<g data-testid="main-card-body" transform="translate(0, 45)">
<svg data-testid="lang-items" x="25" width="400" height="400" viewBox="0 0 400 400">
<g transform="translate(0, 0)">
<text data-testid="lang-list" class="list-style" x="5" y="20">•</text>
<a href="${post_urls[0]}">
<text data-testid="lang-name" x="20" y="20" class="log-title">${posts[0].title}</text>
</a>
<text data-testid="lang-list" class="list-style" x="5" y="43">•</text>
<a href="${post_urls[1]}">
<text data-testid="lang-name" x="20" y="43" class="log-title">${posts[1].title}</text>
</a>
<text data-testid="lang-list" class="list-style" x="5" y="66">•</text>
<a href="${post_urls[2]}">
<text data-testid="lang-name" x="20" y="66" class="log-title">${posts[2].title}</text>
</a>
<text data-testid="lang-list" class="list-style" x="5" y="89">•</text>
<a href="${post_urls[3]}">
<text data-testid="lang-name" x="20" y="89" class="log-title">${posts[3].title}</text>
</a>
</g>
</svg>
</g>
`;
};eungyeole commented
정말 좋은 기능인것 같네요 ㅎㅎ 시간 남을때 넣어보면 좋을것같습니다!