Need help with theme component Github

[Heliosurge (Dan DeMontmorency)]

I apologize as still a complete noob.

I am working in creating a theme component
I have imported the theme component skeleton.

I have created a javascript and added the file to

Javascript\Discourse\Initializers\Discourse_foo.js

From my understanding this file needs to be called by the script tag in header?

<script src="discours_foo.js"></script>

Looking over a few other theme components have not seen them have a file called header.css? Calling to the js scripts they are using.

Any guidance is really appreciated to improve my understanding

Thank you

[pfaffman (Jay Pfaffman)]

This is my novice understanding, which may be helpful for your even-more-novice understanding, but is likely techically incorrect from the standpoint of someone who actually understands this stuff.

@Heliosurge

From my understanding this file needs to be called by the script tag in header?

I don’t believe so. I think it just works since its’ in that initializers directory. IIRC, the skeleton includes an initializer with a console.log so that you can see it’s running.

(I think) You only need to run them in a script if you add them in an old-school done-in-the-UX theme component rather than a new school put-the-files-in-the-right-place way of doing things.

[Heliosurge (Dan DeMontmorency)]

Okay that sounds like it makes sense.

One of the ones I looked at was your hide staff

So if you don’t have any CSS required then you only need to include your JScript file in the initializers directory and fill in the about.json details?

And the component should work without anything further? (Assuming the script is good that is)

[pfaffman (Jay Pfaffman)]

@Heliosurge

So if you don’t have any CSS required then you only need to include your JScript file in the initializers directory and fill in the about.json details?

I think that’s true. If you don’t want to add CSS, then you don’t need a CSS file. (Seems like a safe tautology.)

[Heliosurge (Dan DeMontmorency)]

Always fun learning new things/procedures.

[Lilly (Lillian)]

these topics should help

Theme Developer Quick Reference Guide

As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under #theme-guides, but if you just need something to jog your memory, this guide may help. General Resources Beginner’s guide Designer’s guide Developer’s guide Theme Creator Theme CLI Theme Directory Component Directory Theme Modifiers Themeable site se…

Structure of themes and theme components

Discourse supports native themes that can be sourced from a .tar.gz archive or from a remote git repository including private repositories. [56] An example theme is at: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub [32] The git repository will be checked for updates (once a day), or by using the Check for Updates button. When changes are detected the Check for Updates button will change to the Update to Latest. [image] To create a theme you need to foll…

Split up theme Javascript into multiple files

Complex theme javascript can be split into multiple files, to keep things nicely organised. To use this functionality, simply add files to the /javascripts folder in your theme directory. These files can not be edited from the Discourse UI, so you must use the Theme CLI or source the theme from git. Javascript files are treated exactly the same as they are in core/plugins, so you should follow the same file/folder structure. Theme files are loaded after core/plugins, so if the filenames match,…

Split up theme SCSS into multiple files

Themes and theme components are becoming steadily more powerful, and developers are getting more and more ambitious. To make things easier for developers, themes can now split their SCSS into multiple files. https://github.com/discourse/discourse/commit/268d4d4c828a0d9e3ca6b0b5b623db85eb32b9f3 When creating a new theme with the theme CLI, or sharing a theme on github, simply create a new folder called scss. Fill it with your .scss files, following any folder structure, and all the files will b…

[Heliosurge (Dan DeMontmorency)]

Thank you very kindly Lilly. I check these out. You help us as always greatly appreciated.