Discourse Retort

감사합니다. 네, 이모지 피커가 위치를 지정하는 데 사용하는 라이브러리인 popper의 특이한 동작입니다. 해당 문제를 해결하기 위해 popper 사용법을 업데이트했습니다.

4개의 좋아요

우선 이 플러그인을 맡아주신 @angus :pray:님께 큰 감사의 말씀을 드립니다. 저희가 꽤 오랫동안 애용해온 플러그인이었거든요.

최신 버전으로 업데이트했는데 개인 메시지(PM)가 깨지는 것 같습니다.

Uncaught TypeError: Cannot read property 'map' of undefined
    at _retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:57
    at _application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82147
    at Array.map (<anonymous>)
    at h (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82146)
    at i.html (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:78359)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82625)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82345)
    at s (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20534)
    at t.exports (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20521)
    at e (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:19890)
_retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:368 Uncaught TypeError: Cannot read property 'toString' of undefined
    at t.disabledFor (_retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:368)
    at _retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:51
    at _application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82147
    at Array.map (<anonymous>)
    at h (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82146)
    at i.html (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:78359)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82625)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82345)
    at s (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20534)
    at t.exports (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20521)
1개의 좋아요

감사합니다. 오늘 lodash를 제거하는 PR이 있었고, 또 다른 비공개화(deprecation) 처리가 있었습니다.

이제 해결되었어야 합니다:

업데이트 후 진행 상황을 알려주세요.

8개의 좋아요

이제 잘 작동하는 것 같습니다, 정말 감사합니다! :smile:

우리는 CSS를 적용해서 화면을 좀 더 보기 좋게 만들었습니다

데스크톱

.emoji-picker.has-limited-set img.emoji {
    width: 40px !important;
    height: 40px !important;
}

.post-retort {
    margin: 0px 2px;
}

.emoji-picker.has-limited-set .limited-emoji-set {
    flex-wrap: wrap;
}

.emoji-picker {
    min-height: 80px;
    max-width: 400px;
}

모바일

.emoji-picker.has-limited-set .limited-emoji-set {
    flex-wrap: wrap !important;
}

.emoji-picker {
    min-width: 100% !important;
}

4개의 좋아요

플러그인을 업데이트하기 위해 discourse를 재빌드했습니다. 하지만 이제 플러그인 아이콘이 사라졌고, 제 테마 컴포넌트도 전부 사라졌습니다. 이것이 관련이 있는지 모르겠지만 브라우저 콘솔에 이 메시지가 나옵니다:

수정: Retort를 비활성화하자 모든 테마 컴포넌트가 다시 돌아왔으니 정말로 연결이 있는 것 같습니다.

2개의 좋아요

사이트에서 이 오류가 자주 발생하고, 시간이 지나면 사이트 전체가 나에게 느려지거나 버벅거립니다.

안전 모드에서는 모든 것이 정상이고, 사이트가 빠르고 반응이 좋습니다.

사용 중인 브라우저: Google Chrome: 버전 85.0.4183.83 (공식 빌드) (64비트)

오류 내용:

Uncaught TypeError: Cannot read property 'map' of undefined
    at retort-11c49191cf3e1f7f570d8808ade67b5d7fcfdfe612b792c49f064baacdebadc7.js:1
    at application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1
    at Array.map (<anonymous>)
    at h (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at i.html (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at i.value (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at i.value (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at s (vendor-bf8061112a1b547c1b596d16d89c9a42af976a43984f9eacd40a8c690c0f30b2.js:1)
    at t.exports (vendor-bf8061112a1b547c1b596d16d89c9a42af976a43984f9eacd40a8c690c0f30b2.js:1)
    at e (vendor-bf8061112a1b547c1b596d16d89c9a42af976a43984f9eacd40a8c690c0f30b2.js:1)



 if (!v.default.disabledFor(e))
                    return v.default.storeWidget(r),
                    o.retorts.map(function(e) {   <<<<< 이 부분에서 오류 발생
                        var t = e.usernames
                          , i = e.emoji;
                        return r.attach("retort-toggle", {
                            post: o,
                            usernames: t,
                            emoji: i
                        })

일부 CSS 문제와 개인 사용 목적에 맞게 해결한 방법

데스크톱

첫 번째는 큰 문제가 아니지만 문제가 될 수도 있습니다. 한 게시물에 이 정도로 많은 '반박(retort)'이 달리는 경우는 드뭅니다. 하지만 '반박’이 8개를 초과하면 게시물 컨트롤(Post Controls)이 깨진다는 점을 알아두셔야 합니다.
screenshot-vapingcommunity.co.uk-2020.09.08-20_46_47

'반박’이 8개인 모습입니다. 아주 좋습니다.
screenshot-vapingcommunity.co.uk-2020.09.08-20_47_53

데스크톱에 사용된 CSS

.post-retort {
	margin: 0px 2px;
	border: 1px solid #333;
	border-radius: 5px;
	padding: 3px;
	background-color: #666;
}

휴대폰: iPhone SE 1세대

모바일

현재 모바일에서 게시물 컨트롤이 깨지지 않고 표시할 수 있는 최대 ‘반박’ 수는, 작은 화면을 사용하는 경우를 기준으로 1개입니다.

'반박’이 1개 이상이면 게시물 컨트롤이 화면 밖으로 밀려납니다.

우리의 CSS 변경 사항을 적용했을 때의 모습입니다.

모바일 CSS

.post-retort {
	border: 1px solid #333;
	border-radius: 5px;
	padding: 3px;
	background-color: #666;
	margin: 2px 2px;
	float: none;
}

위 모바일 CSS를 사용하면 데스크톱에서도 모바일과 동일한 모양을 구현할 수 있습니다. 이렇게 하면 '반박’이 게시물 컨트롤 위에 배치됩니다.

screenshot-vapingcommunity.co.uk-2020.09.08-21_03_13

우리는 이 플러그인을 정말 좋아하며 우리 포럼에서 많이 사용하고 있습니다. @angus 님, 이 작업을 맡아주셔서 감사합니다. :+1:

5개의 좋아요

저도 같은 오류가 발생합니다. 테마 컴포넌트는 여전히 작동하지만, JS가 깨져서 리포트 피커가 어디에도 표시되지 않습니다.

우리는 Discourse를 2.5.1로 업데이트한 후 이 플러그인을 처음 설치했습니다.

4개의 좋아요

wait load를 사용할 수 없습니다

2개의 좋아요

오늘 앱을 다시 빌드해서 어떻게든 문제를 해결했습니다.
여러분도 이 방법을 시도해 보세요.

저도 stable(2.5.1) 버전을 사용 중입니다.

1개의 좋아요

네, 그분들의 GitHub 이슈 트래커에 문제를 보고했는데 다음 날 바로 수정이 됐어요. 정말 친절하시네요 :slight_smile:

2개의 좋아요

여러분, 이 플러그인을 정말 좋아하는데, 마지막 업데이트 이후로 커뮤니티 포럼에서 중립적인 노란색 이모지가 아니라 흰 피부 이모지가 표시되고 있습니다.

설정은 변경하지 않았습니다. 현재 설정은 다음과 같습니다:

이것이 의도된 동작인가요? 변경할 수 있나요?

감사합니다!!

3개의 좋아요

안녕하세요,
저는 Discourse를 처음 사용해 보는 사용자입니다. GitHub에서 소스 코드를 설치하여 Discourse를 설정했고, 현재 온라인으로 정상 작동하고 있습니다.
오늘 Retort 플러그인을 다시 설치했는데, 관리자 > 플러그인 화면에서 새로 설치된 Retort가 활성화된 상태로 표시되고 있습니다.

새로운 주제를 게시하고 다른 계정으로 확인해 보았는데, 새로 설치한 Retort 플러그인을 사용할 수 있을 거라고 기대했지만, 예상했던 버튼을 찾을 수가 없었습니다…

다시 관리자 화면으로 돌아가서 플러그인 옵션이 매뉴얼에 설명된 대로 설정되어 있는지 확인했습니다. 아래 이미지를 참고해 주세요.

여기서 한 장의 이미지만 게시할 수 있으므로, 세 장의 이미지를 합쳐서 첨부합니다.

그래서 무엇이 문제인지 파악하는 데 도움을 주시겠어요? 어떤 제안도 환영합니다. 미리 감사드립니다.

1개의 좋아요

예상치 못한 일이네요. 주말에 확인해 보겠습니다.

@kchang 웹 콘솔(How can I open the browsers console? – Mailster Knowledge Base)을 열어 보고 이 플러그인이나 다른 플러그인/테마에서 예외가 발생하고 있는지 확인해 주시겠습니까? 콘솔의 빨간색 줄을 복사하여 여기에 붙여넣어 주세요(긴 경우 “상세 내용 숨기기” 탭에 숨겨 주세요).

2개의 좋아요

안녕하세요 @angus 님,

답변 주셔서 정말 감사합니다. 콘솔에 빨간 줄이 여러 개 표시되는 것을 확인했는데, 게시글에 진입할 때마다 Opera 브라우저에서 보이는 아래 이미지를 참고해 주세요.

제 설치 환경에서 “import” 관련 문제가 있는 것 같습니다. 저는 Docker가 아닌 소스 코드로 Discourse를 설치했기 때문에, 항상 새 플러그인을 discourse/plugins 폴더에 넣어서 설치하고 있습니다. 이 방식으로 다른 두 플러그인은 성공적으로 설치했지만, retort 플러그인도 같은 방식으로 설치하는 것이 올바른 방법인지 확실하지 않습니다.

참고로, 이전에 npm으로 @popperjs/core를 설치해 두긴 했지만, 왜 이런 오류가 발생하는지 모르겠습니다…

감사합니다.

1개의 좋아요

해당 import는 이 플러그인이 얼마 전 업데이트되는 계기가 된 이모지 피커 리팩터링 작업의 일부로 추가되었습니다(위 참조). 이 import는 약 한 달 전에 Discourse에 추가되었습니다. 해당 오류가 발생한다는 것은 구버전의 Discourse를 실행 중임을 의미합니다. stable 브랜치를 실행 중일 것으로 추정됩니다.

이 플러그인은 .discourse_compatibility 파일을 통해 stable도 지원하지만, Docker를 사용하지 않는 경우라면 stable에 맞는 올바른 버전의 플러그인을 가져오는 rake 태스크인 plugin:pull_compatible_all을 사용하여 플러그인을 설치해야 합니다.

이것이 프로덕션 환경이고 Discourse에 익숙하지 않다면 Docker 사용을 강력히 권장합니다. Docker는 환경에 맞는 올바른 플러그인 버전을 가져오는 등 Discourse 환경 관리의 여러 측면을 처리하여 잠재적인 문제를 방지해 줍니다.

4개의 좋아요

안녕하세요. 이모지가 제한되어 있었습니다. 얼마 전 업데이트 이후에는 플러그인이 작동하려면 제한 없는 이모지를 허용해야 했습니다.

1개의 좋아요

정말 감사합니다, @angus. 말씀하신 대로 지금은 discourse의 stable 브랜치를 사용 중입니다. 호환되는 버전의 retort를 가져오기 위해 rake 작업을 실행하겠습니다. 도메인 이름을 확보한 후에는 더 편리한 방법으로 Docker 이미지를 사용할 계획입니다. :grinning:

업데이트:
rake plugin:pull_compatible_all을 실행해 보았지만, 제 discourse stable 버전이 너무 오래된 것 같습니다. 그래서 discourse의 최신 버전으로 업데이트했습니다. 이제 모든 것이 원활하게 작동합니다. :grin:

다시 한번 친절하게 도와주셔서 감사합니다. :smiley:

2개의 좋아요

Discourse의 기본 테마에서 모바일 뷰를 사용할 때, 답글 버튼이 하단 도구 모음의 다른 아이콘(좋아요, 공유 등)과 분리되어 있고, 반박(반박) 아이콘을 아래로 밀어내어 외관상 매우 어색해 보입니다.

디자인을 수정하기 위해 테마에 아래 CSS를 추가하고 있습니다. 여러분에게도 유용할 수 있으니 참고해 주세요.

.mobile-view {
    
    .topic-post nav.post-controls .actions button.reply {
        margin: inherit;
        margin-left: 10px;
    }
    
    nav.post-controls .actions {
        text-align: right;
        float: right;
        display: inline-block;
    }
    
    .topic-post nav.post-controls .actions .double-button {
        display: inline-flex;
    }
    
    .post-menu-area {
        margin: 0;
        padding-top: 15px;
    }
}
3개의 좋아요

좋아요, 감사합니다 :slightly_smiling_face:

디버깅에 도움이 필요하거나 문제가 무엇인지 짐작이 된다면 알려주세요.

1개의 좋아요