Moving styles to the the theme component

[pragdave]

I was working on the tag stuff, and hit a roadblock with styles: TagInfo is under component, and TagList is under theme, and it wasn't obvious how to share between the two.

Then I started wondering why the components had styles associated with them. Most of them cannot be used free-standing, and so having styles mixed in with them doesn't seem to add much value. It does, however, make it more difficult to manage look-and-feel across different aspects of the site.

Having all the css files in theme/ (organized in a way that mirrors the external components that use them) would probably make builds faster, and possibly reduce page load times.

Would this be something you'd consider? (I'd happily do the work)

Dave

[Mister-Hope]

The reason is already in docs bro, I almost write everything needed

https://vuepress-theme-hope.github.io/v2/guide/advanced/customize.html

[Mister-Hope]

See also

https://vuepress-theme-hope.github.io/v2/faq.html#slow-in-a-cold-boot-with-vite

[pragdave]

Right. But the downside is that there is no cohesion between components, and it is difficult to share styles. So one list of tags has access to hope-config, and the other doesn't. I understand the motivation to keep components isolated, but in reality they aren't. If they were truly independent components, then there wouldn't be the need for two separate components that both output a list of tags. I'm not trying to argue with you. This is your code, and you've done an amazing job. I'm also just beginning to understand the system, so my ignorance shows. I'm just reporting observations that I've made as I learn it. Dave

…

On Sun, Mar 6, 2022, 10:10 PM Mr.Hope ***@***.***> wrote: See also https://vuepress-theme-hope.github.io/v2/faq.html#slow-in-a-cold-boot-with-vite [image: Screenshot_2022-03-07-12-09-20-19_40deb401b9ffe8e1df2f1cc5ba480b12.jpg] <https://user-images.githubusercontent.com/33315834/156966440-e5bcd0f9-90fe-464f-a439-e156ab2fe4a8.jpg> — Reply to this email directly, view it on GitHub <#1545 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAACTGFMUQ75AKZPJ3NEVKDU6V6SBANCNFSM5QBP7IEA> . You are receiving this because you authored the thread.Message ID: <vuepress-theme-hope/vuepress-theme-hope/repo-discussions/1545/comments/2305912 @github.com>

[Mister-Hope]

Right. But the downside is that there is no cohesion between components,
and it is difficult to share styles.

I don't understand why you think of that. So I will make a better explain here.

1. Each component has it's own styles imported, also I am trying to make every style treeshakable (e.g.: see plugin-md-enhance)

2. One component can use another component, and there are situations where different component may need to slightly adjust the original component behavior. E.g.: Page with sidebar may want the imported footer component to create enought spaces on the left for sidebar. So we allow them to make some small overides to the imported component in its own scope.

   This gives benifit where someone provides a new component while remain the outer class unchanged, he would still easily make it work with the whole theme.

I understand the motivation to keep components isolated, but in reality
they aren't. If they were truly independent components, then there wouldn't
be the need for two separate components that both output a list of tags.

Nope, please see timeline and category, they are different component either. The reason I make them as differnt component is that they can not use the same style in different places, and also them may have differnt doms. So is the tag.

Also you may not understand why am I spliting those component in to a plugin. That is because they are independant enough with theme layout in V1, and that's a historical reason I choose them split out in V1. So if you wonder if we can move them back to theme, my answer is yes. That plugin only gives a chance to let other theme use it, but it's true that probably no one will use it.

So one list of tags has access to hope-config, and the other doesn't.

The vuepress-plugin-sass-pallete's goal, is to make a sharable style config variables and css variables across theme and plugins with same id. You may check the docs https://vuepress-theme-hope.github.io/v2/sass-palette/guide.html

[pragdave]

Well... in order to share a plugin such as components/client/.../TagInfo.ts, you'd have to create a plugin for it: it can't be shared directlt.

I've submitted a PR for the tag stuff just to get your feedback.

[Mister-Hope]

I just realize, if we remain the old color logic, we can remove the magic number with using :nth() selector in css.

But that will loose the ability to generate colors through hash.

[Mister-Hope]

We already move these components back to theme now.