theme config

[mbostock]

Implements the project-level theme option as a shorthand alternative for the style option. TODO implement the equivalent page-level options, allowing multiple style bundles for the project. Done.

Ref. #440 (comment)

[mbostock]

I’m not sure how we’d identify (name) the different style bundles for the page-level options… 🤔 Maybe the answer is that we load the themes (if any) and the stylesheet (defaulting to default.css) as separate requests? Need to think more.

[Fil]

I've tried to address the todo in #443; this looks totally viable.

[mbostock]

If we generated the style bundle here, we could scan it for external imports and add preloads here to fix #423.

[mbostock]

Merged with #447 and ready for review now @Fil. 🙏

[Fil]

we need to update the docs!

[Fil]

some docs in #448

[mbostock]

The path resolution of the style option isn’t quite correct here. For the project-level option, it should either be resolved relative to the config file or the source root; for the page-level option, it should be resolved relative to the page (the Markdown file). The latter is working as intended, but the former is not.

[Fil]

I think (??) there is still an issue where using

observable dev --root=docs --config=config.js

is not loading the same configuration file as
observable dev --config=config.js

even though docs is the default for the --root option?

I'll double-check later.

[mbostock]

You mean observable preview right? It looks like that currently errors if you try to pass both --root and --config because it parses the arguments incorrectly. But also I don’t think it’s meaningful to set both options, since the config file itself says where the root is, and the --root option is just a shorthand alternative to writing a config file.

[Fil]

Yes. I have these 4 variants, that use the default values either implicitly or explicitly, and so I'd expect them to give the same result:

• [a] yarn tsx bin/observable.ts preview
• [b] yarn tsx bin/observable.ts preview --config=observablehq.config.ts
• [c] yarn tsx bin/observable.ts preview --root=docs
• [d] yarn tsx bin/observable.ts preview --root=docs --config=observablehq.config.ts

However they don't. Only [a] and [b] use /docs/ and /observablehq.config.ts as expected.
But:

• [c] uses /docs/ and /docs/observablehq.config.ts
• [d] errors with observable: Unexpected argument 'preview'. This command does not take positional arguments. See 'observable help preview'.

Is this an artifact of how I'm testing? It's not necessarily a blocker in the sense that it's not blocking any way you'd want to do things, but I find this confusing.

[mbostock]

[c] and [d] aren’t equivalent to [a] and [b], aside from the splice error (which I fixed). The source root is specified by the config file, not the --root option. The --root option is typically used as a shorthand alternative to --config. So, --root=docs will look for docs/observablehq.config.ts, and so will --root=docs --config=observablehq.config.ts.