alkahest-toolbar · Web
실행 중인 제품에 붙이는 이슈 제보 툴바입니다.
실행 중인 제품에 붙이는 이슈 제보 툴바입니다. 팀원이 보던 페이지에서 바로 Alkahest 이슈를 남깁니다. 의존성 없는 약 10 kB 스크립트이고, 일반 방문자에게는 보이지 않습니다.
TypeScriptShadow DOMZero Dependenciesnpm
주요 기능
01
보던 페이지에서 바로 제보
제목과 내용만 쓰면 됩니다. 현재 라우트가 이슈의 대상이 되고, 전체 URL과 브라우저 정보는 자동으로 붙습니다.
02
팀 전용
스니펫은 모든 방문자에게 배포되지만, 팀원이 Alkahest 계정으로 로그인해야만 보입니다. 일반 방문자에게는 아무것도 보이지 않아 운영 환경에 넣어도 안전합니다.
03
권한이 제한된 토큰
로그인은 alkahest.app의 동의 화면을 거칩니다. 토큰은 이슈 생성과 맵 목록 조회만 할 수 있고, 계정에서 언제든 취소할 수 있습니다. 페이지 소스에는 공개된 프로젝트 슬러그만 들어갑니다.
04
약 10 kB, 의존성 없음
프레임워크 없이 TypeScript로 만들었습니다. 스스로 초기화되는 스크립트 태그 한 줄을 넣거나, npm에서 ESM 빌드를 가져다 씁니다.
05
Shadow DOM으로 격리
사이트의 CSS가 툴바에 들어오지 않고, 툴바의 CSS도 밖으로 새지 않습니다. 라이트·다크 모드는 방문자의 OS가 아니라 사이트의 테마를 따릅니다.
06
모바일 우선
버튼을 좌우 가장자리로 끌어다 두면 그 자리에 남습니다. 휴대폰에서는 패널이 화면을 가득 채우고, 버튼을 ✕ 위에 놓으면 툴바가 꺼집니다.
기술 스택
- TypeScriptLanguage
- Shadow DOMIsolation
- IIFE + ESMBuilds
- npmDistribution
- 플랫폼
- Web (any site)
- 카테고리
- Developer Tools
- 지원 언어
- EN
ioxyz의 다른 제품
제품에 붙여 보세요
프로젝트 슬러그를 넣은 스크립트 태그 한 줄을 추가하거나, npm에서 @cr8rcho/alkahest-toolbar를 설치하세요. MIT 라이선스로 GitHub에 공개돼 있습니다.