• 테마를 전환할 때 favicon url도 업데이트한다
• 2개의 favicon 파일이 있다

1
2
3
4
5
6

function setFaviconTheme(theme) {
  const href = `https://cdn.jsdelivr.net/gh/chinsun9/chinsun9.github.io@master/img/favicon-bold-color210928${
    theme === 'dark' ? '-dark' : ''
  }.svg?`;
  document.querySelector(`head > link[rel="icon"]`).href = href;
}

메모

• favicon으로 쓰이는 svg에 어떻게 색을 넘길까..?
• 그냥 svg 2개 만들어서 토글하기
• 기존 테마 파일 리팩토링

참고

• https://brunch.co.kr/@ultra0034/129

• 커스텀 로딩 아이콘을 만들 수 있다
• gif, svg, css, png, apng 등 여러 형식을 지원한다

• css로 받으면 html, css 코드 스니펫을 주는데, 너무 신기하다 ㅋㅋㅋ

참고

• https://loading.io/

• Smooth Page Transitions With Javascript Tutorial를 보고 따라만들었다

결과

• 보러가기

후기

• 영상 제목만 보고 단순히 css js를 이용한 트랜지션을 구현할 줄 알았는데,
• node로 parcel, gsap, highway 를 사용해서 웹만드는 것을 배우게되었다

• parcel을 처음 써보았는데, 개발할 때도, 배포할 때에도 좋은 것 같다
• higyway와 gsap으로 애니메이션을 구현해 보았다

• parcel을 이용해 웹을 만들어 깃허브 페이지로 배포할 때,
• parcel build index.html --out-dir docs --public-url ./
• 위 처럼 옵션을 넣어줘야한다
• –out-dir docs 는 깃허브 페이지 설정할 때 디렉터리
• –public-url ./ 는 이미지, css, js 경로가 망가지지 않도록한다

참고

• Smooth Page Transitions With Javascript Tutorial
• Use Parcel to Bundle a Hyperapp App & Deploy to GitHub Pages
• https://github.com/chinsun9/smooth-page-transitions