ルートテンプレートに`.gjs`を使用できますか?

ルーティングでGlimmerコンポーネントは現在サポートされていますか?

Discourseでは「いいえ」が答えだと推測していますが、もしそうでないなら喜んで知りたいです。

「いいね!」 2

はい、現在 Discourse でルートテンプレートに .gjs ファイルを使用できます。実際、本日コアで大量のファイルを変換したばかりです!例については、https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates を確認してください。

「誰か」とは Discourse のことです。私たちは ember-route-template の開発を後援しており、それは私たちの GitHub 組織にあります :wink:

まだ最新の Ember 6.x には移行していませんが、このアドオンを使用してその機能を利用しています。

「いいね!」 5

素晴らしい!迅速な返信ありがとうございます!

(笑)Discourseのgithubにあることに気づきませんでした。良い点ですね。 :slight_smile:

「いいね!」 3

アプリに新しいルートを追加するのは非常にわかりにくいことがわかりました。他の人のためにここに記録しておきます。

ルートに /print を追加したかったのです。

  • このチュートリアルでは、/admin ルートを追加する方法を説明していますが、通常のルートについては説明していません。
  • ここには、ルートに API エンドポイントを追加する方法に関する情報があります(Ember ルートではありません)。
  • ここには、トップレベルの Ember ルートのトラブルシューティングに関する長い議論があります。

最終的に機能したコードは次のとおりです。county-fence は私のプラグイン名なので、ご自身の名前に置き換えてください。

Ember ルート

assets/javascripts/discourse/routes/county-fence-route-map.js.es6

export default function() {
  this.route('print', { path: '/print' });
}

assets/javascripts/discourse/routes/print.js

import Route from "@ember/routing/route";

export default class PrintRoute extends Route {
  model() {
    return { message: "This is a custom print page!" };
  }
}

assets/javascripts/discourse/templates/print.gjs

import RouteTemplate from "ember-route-template';
import ...;

export default RouteTemplate(
  <template>
    ...
  </template>
)

API ルート

plugin.rb

after_initialize do
  require_relative "app/controllers/print_controller"
end

app/controllers/print_controller.rb

# frozen_string_literal: true
# HTTP Status codes: https://github.com/discourse/discourse/blob/main/lib/discourse.rb

class ::CountyFence::PrintController < ::ApplicationController
  requires_plugin CountyFence::PLUGIN_NAME


  def save_print
  end

  def list_prints
    render json: { name: "donut", description: "delicious!" }
  end

  def get_print
  end

end

Discourse::Application.routes.append do
  post "/print" => "county_fence/print#save_print"
  get "/print" => "county_fence/print#list_prints"
  get "/print/:id" => "county_fence/print#get_print"
end
「いいね!」 4

レイアウト、ナビバー、またはサイトのCSSなしで空白ページを取得する方法はありますか? Glimmerコンポーネントを使用したいのですが、印刷ページを作成する上でウェブサイトのスタイルは役立ちません。

印刷ページ専用のスタイル設定で、ページ表示時のナビバーやその他の要素を気にしないのであれば、@media print CSSセレクターを使用して印刷時のスタイルを変更できます。Discourseはすでに印刷時に多くの要素を非表示にしています (discourse/app/assets/stylesheets/common/printer-friendly.scss at main · discourse/discourse · GitHub)。Firefoxのインスペクトモードにある「print media simulation」モードを使用してページをプレビューできます。Chromeのインスペクトモードにも同様の機能があるはずです。

通常のウェブブラウジングだけでなく、印刷モードでも完全に空白のキャンバスが必要な場合は、CSSのトリックを使用できます。

Glimmerコンポーネントのルートdivにid="print-component__root"があると仮定すると、:has()セレクターでCSSにその存在を確認させることができます(または、Glimmerコンポーネントのライフサイクルからbodyにクラスを追加/削除するだけ)、選択的にスタイルを適用できます。

body:has(#print-component__root) {
  header,
  .avatar,
  .sidebar-wrapper,
  ... {
    all: unset !important;  // all: unset は少し攻撃的すぎるかもしれません
    display: none !important;
  }
}

#print-component__root {
  // 通常のスタイル
}

DOM要素を実際に削除する、よりクリーンな方法があるかもしれませんが、CSSはすべてをリセットするための良い回避策です。

「いいね!」 2

SCSS が読み込まれません。何かアイデアはありますか?core のチャットプラグインに従ってファイルをセットアップしました。

plugins.rb には以下があります。

register_asset "stylesheets/common/index.scss"

assets/stylesheets/common/index.scss には以下があります。

@import "common";

assets/stylesheets/common/common.scss には以下があります。

body:has(#print-root) {
  header,
  .avatar,
  .sidebar-wrapper {
    all: unset;  // all: unset は少し攻撃的すぎるかもしれません
    display: none !important;
  }
}

SCSSの読み込みに問題があることを確認するため、:has()セレクターなしでスタイルを追加してみてください。たとえば、次のようになります。

.sidebar-wrapper {
  outline: 5px solid red;
}

Railsサーバーの再起動も試してみてください。過去にregister_assetの呼び出しを追加または削除すると、Dockerコンテナ全体を再起動する必要があった問題が発生したことがあります。

「いいね!」 2
  • :has() セレクターを削除しました。
  • コードを index.scss に配置して、@import ステートメントではないことを確認しました。
  • d/rake assets:clobber tmp:cleard/rails s を実行しました。

今のところ、読み込ませることができていません。

他のほとんどのファイルはブラウザで自動リロードされますが、このファイルはそうなりません。そのため、問題があるのは register_asset の部分ではないかと考えています。register_asset は自動的にアセットフォルダを探すのではないでしょうか?私が確認したすべての例で、そうなっているようです。

「いいね!」 1

d/rails cDiscoursePluginRegistry.stylesheets から次のことがわかる:

`“county-fence”=

「いいね!」 1

d/rails s のログで次のようなエラーが見つかりました: No such file or directory @ rb_sysopen - /src/app/assets/stylesheets/plugin-cf.scss

プラグインは county-fence として /plugins フォルダにシンボリックリンクされ、plugins.rb でプラグイン名は明示的に county-fence と指定されているにもかかわらず、一部のコードが基になるディレクトリ名 plugin-cf を読み取り、プラグインのコンパイル済み CSS 名について推測を行っているようです。

これはバグですか、それとも機能ですか? :smiley:

この話の教訓は、プラグインディレクトリの名前は、プラグインの実際の名前と一致させる以外、いかなる場合でも変更してはならない ということだと思います。正しく名前が付けられたシンボリックリンクでは十分ではありません。

編集: register_asset \"stylesheets/common/index.scss\", plugin: \"county-fence\" も、プラグイン名が正しく設定されるように強制する回避策です。

body:has() の下のルールが適用されないという問題が発生しています。アセットコンパイルパイプラインで更新されていないようです。d/rake assets:clobber tmp:clear を実行し、d/rails s でサーバーを再起動しても、更新されません。

たとえば、body:has() セクションに body { background-color: red !important; } と記述しても、body 要素のスタイルにはまったく表示されません。上書きされているのではなく、開発者ツールの「スタイル」にまったく存在しないのです。

同じ CSS 行を body:has() の外に配置すると、問題なく表示されます。

ブラウザコンソールで document.querySelector("body:has(#print-root)") !== null を実行すると true が返されます。そして、body:has()一部 のルールは適用されています。

アセット生成パイプラインに、これらの変更が反映されないようにするルールがあるのではないかと疑問に思っています。

私のこのための定番は、ページに直接Glimmerコンポーネントにスタイルを含めることだと思います。それが一貫して機能する唯一の方法です。そうすれば、条件付きCSSルールをいじる必要がなくなります。

CSSコンパイルパイプラインは、私に終わりのないトラブルを与えています。リフレッシュ、ルールの適用に関して非常に一貫性がなく、ルールが消えてしまい、その理由がわかりません。これがDockerコンテナで実行していることと関係があるのかどうかはわかりません。プラグインフォルダへのシンボリックリンクは完全に廃止しました。Dockerのボリュームマウントとファイル監視/再コンパイルの問題を引き起こしていたのはそれだったと思います。これらの問題を再現するための最小限のレポを作成できるかもしれませんが、そうできれば、今後数日で公開できるでしょう。

これについてのフォローアップです…

Stripeからレンダリングされたiframeが、印刷レイアウトの下部に空白ページを表示させる原因となっています。iframeは要素に直接display: block !importantでハードコーディングされています。

この特定のバグは、このルートがロードされたときにiframeを削除することで回避できると思います…(ちなみに、Stripeはクリックイベントをすべて検出するページ幅のdivをレンダリングしていますが、これはかなりのプライバシー侵害のように思えます…これはサブスクリプションプラグインからのものだと信じています。)

しかし、私は将来を見据えており、印刷ページでのいたちごっこトラブルシューティングの長い道のりを予見しています。レイアウトに新しい要素が導入された場合、たとえそれが目立って見えなくても、印刷が誤動作する可能性があります。

このルートのサイトレイアウトを引き継ぐのは、私にとって理想的な状況ではありません。オプトアウトする方法、または独自のレイアウトを設定する方法はありますか?