닷넷데브 프로필 뱃지

안녕하세요. :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 Likes

저는 medium 라이트 에 한표 …

6 Likes

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

4 Likes

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

3 Likes

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

3 Likes

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

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

4 Likes

오오
좋습니다.
image

4 Likes
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 Likes

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

4 Likes

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

4 Likes

의견 감사합니다!

링크 부분은 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 Likes

image

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

3 Likes

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

IMG_3796

6 Likes

develofun

오오~ 좋은데요~

5 Likes

stupid

우선덕지덕지…

3 Likes

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

3 Likes

안녕하세요. 저번에 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 Likes

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

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

image

image

4 Likes