닷넷데브 프로필 뱃지

안녕하세요. :grin:

닷넷데브 프로필을 md 또는 html을 통해 공유 할 수 있도록 뱃지를 제작해봤습니다!

현재 개발된 뱃지는 smallmedium이 있고 디자인은 혼자 구상해 봤는데 쉽지가 않더라구요.

  • (만약 좋은 디자인 아이디어 있으면 공유 부탁드립니다. :rofl:)

디자인은 다음과 같습니다.

  • theme
    • Light, Dark, Dotnet
  • small
    • dotnetdev dotnetdev dotnetdev
  • medium
    • dotnetdev dotnetdev dotnetdev

현재 확인된 문제는 medium 뱃지 사용 시 사용자 이름이 긴 경우 잘리는 현상이 있어 개선 예정입니다.


서비스는 .NET6 web api 프로젝트로 minimal api를 사용하여 진행했습니다.

GET 요청을 통해 응답을 받아오기 때문에 닷넷데브 사이트에 트래픽을 줄이기 위해 cache-control:max-age=86400 (1day)로 설정 해놓았습니다.


뱃지를 통해 닷넷데브를 알리고 많은 닷넷 개발자들이 찾아왔으면 하는 바램이 있습니다. :smile:

저번 포스트를 통해 확인은 했지만 혹시 문제소지가 있다면 서비스는 내리도록 하겠습니다.

감사합니다!

18개의 좋아요

저는 medium 라이트 에 한표 …

6개의 좋아요

https://profile.dotnetdev-badge.kr/api/v1/badge/medium?id=파란매&theme=Dark
구글 연동에 한글이라 그런지 저는 안나오네요 ??
image
어떻게 해야해요??

4개의 좋아요

프로필이 비공개인 경우 정보를 가져올 수 없어 그렇습니다!

3개의 좋아요

아 프로필이 비공개인것 처음 알았네요 이것 어디서 바꾸지 ^^;;; 설정 아무리 뒤져봐도 안나오네요 운영자들한테 문의해야 하나

3개의 좋아요

사용법을 잘 모르겠네요…
저는 뱃지가 바로 나오는게 아니라, 링크 페이지로 나옵니다…

https://profile.dotnetdev-badge.kr/api/v1/badge/medium?id=stupid&theme=Light

4개의 좋아요

오오
좋습니다.
image

4개의 좋아요
https://profile.dotnetdev-badge.kr/api/v1/badge/medium?id=stupid&theme=Light

api 호출 시 svg 태그로 응답하게 되는데 md 또는 html에서 다음과 같이 사용해볼 수 있습니다.

// md
![stupid](https://profile.dotnetdev-badge.kr/api/v1/badge/medium?id=stupid&theme=Light)

// html
<img src="https://profile.dotnetdev-badge.kr/api/v1/badge/medium?id=stupid&theme=Light" />

댓글에서도 md 형식을 사용할 수 있어 아래처럼 바로 사용가능합니다!

stupid

6개의 좋아요

스몰뱃지는 하트 수를 표시하기보다는, 닷넷 데브 프로필로 가는 링크로 나타내고, 닉네임을 표시하는건 어떨까요?

4개의 좋아요

svg 이미지라 링크를 걸거나 무슨 따로 기능을 거는것은 아마 안될것예요

4개의 좋아요

의견 감사합니다!

링크 부분은 svg 응답 시 a 태그를 포함하여 테스트를 진행해 보았는데요.

html에서는 object 태그를 이용하면 링크로 이동이 가능하나 md에서는 img 태그 또는 ![]()를 통해서는 안되고 object 태그도 사용할 수 없는 것 같더라구요.

사용하는데 일관성이 없어 링크를 적용하는 부분은 사용자가 직접 적용해야 될 것 같아 보입니다.

// md
[![dotnetdev](https://profile.dotnetdev-badge.kr/api/v1/badge/small?id=chanos-dev&theme=Dark)](https://forum.dotnetdev.kr/u/chanos-dev/summary)

dotnetdev

// html
<a href="https://forum.dotnetdev.kr/u/chanos-dev/summary">
    <img src="https://profile.dotnetdev-badge.kr/api/v1/badge/small?id=chanos-dev&theme=Light"/>
</a>
5개의 좋아요

image

SVG는 링크 적용이 불가능한가요?

3개의 좋아요

사용자 개별 설정에서 인터페이스 섹션에 그림과 같은 설정이 있는데, 이 설정을 변경하셔야하지 않을까 싶습니다.

IMG_3796

6개의 좋아요

develofun

오오~ 좋은데요~

5개의 좋아요

stupid

우선덕지덕지…

3개의 좋아요

감사합니다 잘 사용할게요
우선 깃허브에 적용완료에요!! ㅋㅋ

3개의 좋아요

안녕하세요. 저번에 API로 뱃지 서비스를 제공했는데요!

백엔드만 올려놔서 뱃지를 확인하려면 직접 API를 호출해야 하는 번거로움이 있어, 간단하게 테스트할 수 있게 UI를 만들어 봤습니다. (아직 generate만 가능하고 미완성 입니다.)

https://chanos-dev.github.io/dotnetdev-badge/

생각만하고 있다가 드디어 실천하네요. :rofl:

blazor wasm을 조금씩 공부만 하다가 실제 개발해 보는데 css가 쉽지 않더라고요.

올려놓고 모바일로 확인해 보니 반응형 UI 개선도 좀 필요한 상황이네요. :sob:

호스팅은 github pages를 이용했고 설정은 How to Deploy Blazor WebAssembly to GitHub Pages 참고 했습니다.

감사하게도 몇몇 분들이 사용하고 계시더라고요. 감사합니다!

새해 복 많이 받으세요!

5개의 좋아요

@chanos-dev 우와 기가 막히네요.
저도 제공해주신 사이트로 Generate 해봤습니다.

감사합니다. :laughing: :laughing:

image

image

4개의 좋아요