Rename icons to images
drewbaker opened this issue · 11 comments
Why have all the images in a directory called icons? WordPress themes are all in images, lets stick to that I think.
Also, do we have to have components\templates and components\parts? Like, could it just be this:
* src
* components (which is now parts)
* templates
* images
* styles
* utilities
* services
* router
* store
** Can utilities just be files called router.js, store.js etc? Or does it need to be all sub-directories?
We don't need shared because we have fh-components. I just want to simplify all the nesting and different names for things, and hide directories that you don't really ever need to touch.
I definitely think it would be good to simplify it.
For the images folder, I think "icons" is more accurate because we will only ever put .svg files in there. It's important to have a clear distinction between which images will get compiled into bundle.js (all icons) and which ones we may want to serve static off the theme (a background pattern .png for example, which would come from /static like the fonts do.)
For structure, I think the components setup is useful because only .vue files go in the components folder. In the proposed structure .vue files would be littered throughout /src, for example I imagine you would want App.vue to go directly in /src alongside main.js ? Maybe we rename components to something more clear, but I do like that it contains all the main vue stuff, and App.vue is the clear entry point.
Store and router do not technically need to be directories, those can just be .js files. If the logic in those files gets too big though, we may need to split up the code between files and it would be handy to have them contained. I don't think we've done a site big enough to know how often this will be an issue.
So, maybe this is best ?
* src
* components (possibly renamed to something better)
* parts
* templates
* App.vue
* utilities
* services
* router.js
* store.js
* icons
* styles
I like that @jrobson153.
I hear you on icons vs images and how it effects compiling. So should we call it svgs then? Because that is the only thing that should go in there right?
I think utilities is good how you have it, and you can always add more files/directories in there as you build bigger sites. Seems like cahce.js is going to be the only thing in services for most sites, so I'd just put that in utilities, and then you can make the services directory when needed to expand.
I wonder if components could be called markup? It just seems strange to have templates inside components, and parts is a made up word from me, so maybe we repalce that with components?
So maybe:
* src
* markup
* components (which was parts)
* templates
* App.vue
* utilities
* cache.js
* router.js
* store.js
* svgs
* styles
svgs for the folder name is cool by me
I agree with all the suggestions for the utilities folder. For some reason "markup" feels a bit weird to me, I want to call it templates but we're already using that. A lot of other frameworks will refer to markup that corresponds directly with a page template as a "view" which feels intuitive to me.
So, one more iteration here, how do we feel about this?
* src
* templates
* components
* views
* App.vue
* utilities
* cache.js
* router.js
* store.js
* svgs
* styles
So this way all .vue files go in the templates folder, split into "views" which correspond directly with router-views and "components" which are smaller re-usable parts.
The one question I have with that is since component has such a particular meaning in Vue, would it be a little confusing to an outside Vue developer seeing custom components in both components and views? Or have you seen other Vue setups use that kind of structure, @jrobson153 ?
That's a good point, components does hold a very specific meaning to vue devs. I think the best example we could go off of is the Vue Hacker News 2.0 demo, which as I look now I realize actually has very similar naming convention to the last option I proposed. "Views" refers to their router views, which is siblings with a folder called "components" referring to smaller re-usable pieces.
Based on that I think we should be good!
So do we just do this then John?
* src
* components (which was parts)
* views (which was templates)
* utilities
* cache.js
* router.js
* store.js
* svgs
* styles
* App.vue
That is how that hacker news repo has it, and I'm fine with this.
Works for me!