scavin
(scavin)
1
Discourseコミュニティにエレガントなタイムラインレイアウトを追加する新しいテーマコンポーネントを共有できることを嬉しく思います！
これはLLMの支援を受けて構築された、私の最初のテーマコンポーネントです。
それは何ですか？
Discourse Timelines は、美しいミニマリストなタイムラインレイアウトを作成するためのカスタムBBCode [timelines]...[/timelines] を実装するテーマコンポーネントです。プロジェクトロードマップ、ステップバイステップガイド、会社の歴史、章の区切りなどに最適です。
公開されたタイムラインエフェクト
コンポーザートップバーボタン
Markdownエディタビュー
主な機能
カスタムBBCode - 簡単な[timelines]構文
コンポーザートップバーボタン - タグを手動で入力する必要はありません（新しいエディタのブラケットエスケープ問題を解決！）
美しいデザイン - クリーンでミニマリストな美学を持つ垂直グラデーションライン
Markdownサポート - タイムライン内のすべてのフォーマットを保持します
多言語対応 - 9言語（EN、ZH_CN、ZH_TW、DE、ES、FR、JA、KO、RU）の組み込み翻訳
テーマ互換性 - ライトモードとダークモードの両方で動作します
カスタマイズ可能 - 管理設定で色を簡単に変更できます
レスポンシブ - モバイルフレンドリーなレイアウト
安全 - XSS保護が組み込まれています
依存関係なし - DiscourseネイティブAPIのみを使用します
使用方法
ツールバーボタンを使用する（最も簡単！）
- コンポーザーを開きます
- 「+」（オプション） メニューボタンをクリックします
- 「タイムラインを挿入」 を選択します
- コンテンツを編集します
- 公開します！
ツールバーボタンは、新しいDiscourseエディタが手動で入力された角括弧を自動的にエスケープする問題を解決します。
構文例
[timelines]
## 2024年1月 - プロジェクトローンチ
プロジェクトが正式に開始され、チームが編成されました。
## 2024年3月 - 初回リリース
コア機能の開発が完了し、ベータテストが開始されました。
## 2024年6月 - バージョン2.0
新機能を含むメジャーアップデート：
- 機能A
- 機能B
- 機能C
[/timelines]
カスタマイズ
すべての色はテーマ設定でカスタマイズできます：
- timeline_gradient_start - 上部のグラデーションカラー（デフォルト：
#ff7a18）
- timeline_gradient_end - 下部のグラデーションカラー（デフォルト：
#ffb800）
- timeline_heading_color - 見出しテキストカラー（デフォルト：
#d96d14）
- timeline_dot_color - タイムラインドットカラー（デフォルト：
#ff7a18）
- timeline_heading_color_dark - ダークモードの見出しカラー（デフォルト：
#ff9854）
- timeline_dot_border_color_dark - ダークモードのドット境界線（オプション）
このコンポーネントがお役に立てば幸いです！ご質問、フィードバック、提案がありましたら、お気軽にお知らせください。 
「いいね！」 25
Heliosurge
(Dan DeMontmorency)
2
これは非常に優れたコンポーネントです！非常に便利です。
「いいね！」 3
DiscoTOCでも動作しますか？
これはより大きなヘッダーに依存しているようで、TOCの階層構造に対する柔軟性が少し低くなります。
scavin
(scavin)
7
DiscoTOCでテストしましたが、問題は見つかりませんでした。
デモページに目次を追加しましたので、開いて動作を確認してみてください。
「いいね！」 1
その参照情報ありがとうございます。
autoTOC（自動目次）を使用して投稿内でこれを使用すると、ヘッダー2と3のマークダウンに依存しているため目立ちます。柔軟性を高めるために、代わりに、または追加でヘッダー4または5を使用するように変更する方法はありますか？
タイムラインがTOC階層のさらに下、例えばヘッダー2や3の後に表示されると、TOCが視覚的に順序がバラバラに見えてしまいます。
編集：これを[details]タグで囲むと、タイムラインのヘッダーがTOCに表示されなくなります。私にとっては妥当な回避策です。
「いいね！」 2
scavin
(scavin)
9
ご提案ありがとうございます！改善方法を検討します。
「いいね！」 1
scavin
(scavin)
10
これで、ワークアラウンドなしでタイムラインの見出しをTOC（目次）から除外できるようになりました。
[timelines] 内で疑似見出しを使用するには、##!（H2スタイル用）または ###!（H3スタイル用）を先頭に付けます。
例：
[timelines]
##! 2020 – Foundation
コンテンツ…
[/timelines]
これらはタイムライン内ではH2/H3のようにレンダリングされますが、実際の見出しとしては扱われないため、タイムラインがどこにあってもautoTOCはすっきりと保たれます。
タイムラインの見出しをTOCに残したい場合は、引き続き通常の ##/### を使用してください。
現在、[timelines] 内に1つでも ##!（または ###!）があると、TOCはそのタイムライン全体をスキップします。
同じタイムライン内で両方のスタイルを混在させることはまだサポートされていません。
混在させることができるようになりました。##/### は引き続きTOCに表示され、##!/###! はタイムライン内でのみレンダリングされ、TOCからは除外されます。
コンポーネントを更新して試してみてください。
「いいね！」 4
それは賢い回避策のアイデアですね！
これは以下ではうまく機能したようです。
[timelines]
##! 2020 - Foudnation
Content...
###! March
Content
[/timelines]
しかし、別のフォーマットされたリストの後に続く疑似ヘッダーが2つある場合には機能しませんでした。
[timelines]
##! 2020 - Foundation
* Listicle
###! March
Dooooooom!
[/timelines]
また、最初の疑似ヘッダーは、通常のヘッダーではないタイムラインブロックの行のように上に空行がフォーマットされるのを避けるため、開始タグ [timelines] とインラインであることを好みます。例えば：
[timelines]##! 2020 - Foundation
Content...
[/timelines]
そうしないと、最初の疑似ヘッダーの上に、通常の、ヘッダーではないタイムラインブロックの行であるかのように間隔が空いてしまいます。
この機能に取り組んでいただきありがとうございます。今では信じられないほど柔軟に使用できるようになっています。
「いいね！」 2
scavin
(scavin)
12
ご指摘ありがとうございます。
現在、以下は正しくレンダリングされます。
[timelines]##! 2020 - Foundation
Content...
[/timelines]
および
[timelines]
##! 2020 - Foundation
Content...
[/timelines]
しかし、以下は機能しません。
[timelines]
##! 2020 - Foundation
Content...
[/timelines]
調査中ですが、まだ適切な修正を決定していません。 
「いいね！」 3
コードは、投稿内のどこかに [timelines] が存在する場合、たとえ上記のコードバッククォートで囲まれていてもアクティブになるようです。バックスラッシュ \\[timelines] でのエスケープも違いを生み出さないようです。
追記: コードブロック（3つのバッククォート付き）では、[timelines] タグと [/timelines] タグが改行をエスケープし、最も近いテキストと同じ行に表示されるようです。
したがって、
[timelines]
Blah
Blah
[/timelines]
次のように表示されます。
[timelines]Blah
Blah[/timelines]
これは、使用方法に関するガイドを作成しているときに見つかったものなので、おそらくエッジケースでしょう。
「いいね！」 1
