타임존 텍스트 수정 허용 (특히 이벤트에서)

기여 기능
1

:globe_showing_europe_africa: New Calendar Feature: Show Local Time에서 이어지는 논의입니다:

저희 사이트는 거의 전적으로 우리나라로 제한되어 있습니다.

특정 문제가 있는데, 저희 시간대가 우리나라의 특정 지역처럼 보이므로, 바로 아래에 위치한 위치 필드와 함께 볼 때 사용자를 혼란스럽게 할 수 있습니다:

image
image697×221 16.1 KB

이 경우, (현지) 행사는 오클랜드 시에서 약 1000km 떨어진 다른 도시의 잘 알려진 현지 시설에서 개최되고 있습니다. 여기에 (Auckland)이 포함되어 있어 매우 오해의 소지가 있습니다.

링크된 스레드에서 이에 대한 논의가 있었습니다:

사이트 수준에서 현지 이벤트의 시간대를 숨길 수 있다면(특히 이벤트의 경우) 매우 유용할 것입니다. 하지만 CSS로 이를 수행하는 방법을 찾지 못하고 있으며, ask.discourse.com에서도 도움이 되지 않습니다.

이와 관련하여, 현지 이벤트를 기본값으로 설정할 수 있다면 매우 유용할 것입니다.

1개의 좋아요
2

제가 이해한 바로는:

  • 이벤트의 시간대 도시는 이벤트 설정에서 '로컬 시간 표시’가 활성화된 경우에만 표시됩니다.
  • '로컬 시간 표시’는 기본적으로 비활성화되어 있습니다.

image
image586×492 27.5 KB

즉, 사용자가 이벤트에서 '로컬 시간 표시’를 활성화하고 있으며, 이를 원치 않으시는 것으로 보입니다.

‘로컬 시간 표시’ 설정을 숨겨서 활성화할 수 없게 하는 것은 어떨까요?

.event-field.show-local-time {
    display: none;
}

image
image582×376 16 KB

그렇게 하면 새 이벤트는 적어도 사용자의 시간과 시간대 도시가 표시됩니다. 피닉스 시간으로 생성된 이벤트는 제 로컬 시간과 "Chicago"가 표시됩니다.

도시를 완전히 제거하는 방법은 보이지 않습니다 – 그것은 이미 처리된(cooked) 콘텐츠의 일부이기 때문입니다 – 그리고 여전히 혼란을 줄 수 있다고 생각합니다. 아마도 해당 셀렉터 내부의 괄호 안 텍스트에 대해 자바스크립트가 동작할 수 있을까요? CSS로 생각할 수 있는 최선의 방법은 시간대 팝업을 클릭하도록 장려하기 위해 아이콘을 추가하는 것입니다:

image

span.discourse-local-date.cooked-date::after {
    content: " ℹ️";
}
3

이 건에 대한 검토와 조언에 감사드립니다, Todd!

아니에요, 그게 문제가 아닙니다. 현지 시간이든 사용자 시간이든 사실 크게 중요하지 않습니다 (대부분의 경우 둘은 동일할 테니까요).

문제는 우리의 특정 시간대 이름이 포함된 텍스트 때문에 오해를 살 수 있다는 점입니다 (이것은 뉴질랜드의 유일한 시간대입니다). 이 문제는 당신에게도 해당됩니다: 위 예시에서는 이벤트가 시카고의 리틀 크릭(Little Creek)에서 열린다는 인상을 줍니다.

저는 대신 이렇게 표현하고 싶습니다:

image
image667×218 9.53 KB

일단 ‘바이브 코딩(vibe coding)’ 벽에 머리를 부딪히다 보니, 결국 이 JavaScript 코드 조각(로컬 테마 컴포넌트의 JS 탭에 넣은 것)이 제게는 잘 작동하고 있습니다:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("swap-auckland-for-nz", (api) => {
  function swapTimezones(root = document) {
    root.querySelectorAll('.relative-time').forEach(elem => {
      if (elem.textContent && elem.textContent.includes('(Auckland)')) {
        elem.textContent = elem.textContent.replace('(Auckland)', '(NZ)');
      }
    });
  }

  api.onPageChange(() => {
    swapTimezones(document);

    // Set up persistent mutation observer for dynamic events/calendar output
    const observer = new MutationObserver(() => {
      swapTimezones(document);
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Optionally, also run again after other navigation events
    window.addEventListener("hashchange", () => swapTimezones(document));
    window.addEventListener("popstate", () => swapTimezones(document));
  });
});

시간이 나면 이걸 설치 가능한 테마 컴포넌트로 패키징해서 다른 사람들도 필요하면 사용할 수 있게 하려고 합니다.

4

뉴질랜드가 전부 하나의 시간대인 줄 몰랐는데, 거기에 있는 동안 작업을 마칠 때쯤에는 이 문제를 해결하려면 JavaScript가 필요할 것 같다는 느낌이 들었습니다. JavaScript로 해결책을 찾았다니 다행이네요!

1개의 좋아요