Building a Vite Dev Environment for Obsidian Theme Development

welcome everyone and we're back for another session of build with Ben and today you might have noticed the background is a little bit different took a little bit of a break to get a new streaming environment setup and as you can see I got some nice shells behind me now and they're willfully empty a little bit but hopefully over time as I get some of my other decorations and geek nerdum souvenirs whatnot back from my other place then hopefully that will allow me to fill this back up and you should see some new stuff and yeah it should be fun I'm excited to fill this shelf up but in the meantime let's go ahead and kick it off for today today we have there's a problem that I've been wanting to solve and it's around the idea of theme development and so when we talk about theme development what exactly that is basically when you have things like obsidian or other sites where there's the standard structure that goes along with it as far as what the content looks like but you might want to customize how it looks like and while you might be thinking I know CSS that's a piece of cake I know how to do that not everyone knows how to do that and more importantly some people might only know just enough CSS to make some change changes but they may not they may not know all the tooling involved in order to really create a call it a maintainable CSS framework that outputs exactly what they want and so in my work working with obsidian and doing theme development I realized that my work workflow is clunky and so what I want to do is actually basically enhance the workflow so that it utilizes Veet underneath which is a new sort of build tool that I can talk a little bit about when we get when we dive right into it but what it'll allows to do is basically set up an environment that allows anyone who's you know what I know just enough CSS to be dangerous but I don't know all the tooling so what if I just download someone's repo right and as long as I follow the instructions to like npm install and run I get a nice working environment where I can tweak CSS I can see the changes and then when I want to Output the correct CSS I can do so all with while still utilizing like best software development techniques basically without creating all the hassle of learning how to build tools and all that fun stuff I like to make it a lot easier for people to do so let's go ahead and Jump Right In shall we okay so first thing first let's talk about let's talk about where I'm at right now let's talk about this context set so let me see where I'm at right now okay so if I go ahead and open up vs code so actually let me give you a quick demo actually so this right here you see on the screen is Obsidian the tldr on obsidian is that it's a markdown editor that does way more in terms of notes and that kind of thing so I'm going to go ahead and just quickly bring this up right here you can see obsidian MD if you heard about second brain note-taking obsidians usually mentioned along with Rome and some other ones this is not the session for obsidian this is what I'm talking about and as we can see here this is a there's a theme to this so if we go inside of the preference here and we look at appearance there's a bunch of themes that you can choose to it basically and so when we're managing themes you can see I can switch to like minimal theme for example although actually instead of minimal let me switch to my buddy's vile plume theme Here although whoa what happened to the okay there you go you can see here I didn't change anything of the content wise everything still functions the same way but it looks different and so this is my buddy's viable theme but so I happen to create the night owl theme that's inspired from Sarah dressler's night owl theme on vs code and so I love working on this it was a lot of fun building it but maintaining it hasn't been the easiest and more importantly I'd like other people to be able to easily Fork make tweaks or simply Branch off and make their own and so today we're going to go ahead and take a look at the workflow for that right now and how we can better enhance that so other people can make use of that okay so first thing first let's go and take a look at that project shall we so I have obsidian night owl theme it's actually you know what I'm gonna do before I do that though let me go ahead and make a note for myself so let me go ahead and look inside of my GitHub search repositories and we're looking for obsidian Night Owl there we go search for that boom okay so this thing is completely public and it looks like it looks like some people have already forked it but in case you're watching the recording of this later I'll make sure to include this here inside of the resources in the show notes for the video all right so how exactly am I working with this right now as you can see here I'm working with SAS which is a pre-process preprocessor for CSS and the reason it's useful is because it basically makes it easy to break things up into Mana manageable chunks because if you look at what the CSS file looks like when it's actually compiled you'll see there is quite a bit going on here and this is probably not even all of it right this is just some CSS and this would be tricky to manage as it is it's nice nicer if you have already some organization to it and especially when you Minify things it can be hard to manage so this is why our build tools can be super helpful now the way I'm currently managing this is you'll see that I have this index.js file and basically what it's doing here is that I am basically looking inside of here oh this is a script that I have and it's running the fact that whenever I output a CSS file this is what's being copied into set destination so you can see here that in my end environment I have the ability to copy my Dev theme into to obsidian so I can test it so let's go ahead and make a change and show you how that works so let me go ahead and bump this over one third real quick there we go that looks better and bump this over here okay so what we're going to do here is let's go ahead and inside of sitting.css let's do something really obnoxious let's do I'm gonna come in here and let's see can we do this let's see I'm gonna do I'm gonna do the everything selector and then we're gonna say we're gonna everything is going to be border 1px solid red and we're gonna bang important okay so what this should do is that when I run my script here for npm run build this will basically build the notes like all the SAS files and compile them into a CSS so you can see here we wrote CSS file into this obsidian.css which is all right here so we look for that change right now we should see it down here which is yep it's right here on the bottom now the thing is in order for me to test to make sure that works I need to go ahead and then run npm what did I call it I think I said npm run move yeah I did npm run move you see It'll copy my file into the directory and you might be thinking like oh nothing's changed that's because I have to come in here inside of appearance manage and then I'm gonna I see this some night owl Dev that I can go ahead and use and then boom you can see that my changes are there so what I could could do in this case is I can go ahead and let's let me npm run Dev this will create a working no SAS environment that's watching my files so inside of here if I switch this over to Blue you can save that it automatically outputs the file but it doesn't necessarily copy it over certainly we could probably automate that piece as well but again these are all call it developer experience improvements we could make we could use in order to make our lives easier as as Steam developers so we see as we move what's nice is that obsidian itself is automatically updating things which is nice but I'll be honest the fact that you have to set up environment variable on this in order just to see how things are working to me is clunky especially because there's just yeah you just might want to smooth their development experience it's basically how I think of it so let's go ahead and Define the problem and how we want to architect the solution so if we come actually let me go ahead and switch now I don't want this to be all right so a couple of things we want to do so I'm going to go ahead and create a note and this will be for the call it the obsidian theme beat Dev environment I'm just going to make this a project right now inside of obsidian so this is my like how I like to track my notes and just get a sense of what's going on so here we go we have here's a project that I'm going to start working on and let me do a domain this is the domain of coding and then Yep this is good okay so basically what we want to do is how do we Define a like a good Dev environment right so we talked about a few things we talked automatically see changes in a live preview environment so whenever you make changes in your SAS files you want to automatically see that in some sort of hot module reloading environment so that's good easy to Output file to destination so right now It's tricky to configure this because for someone who might not know the terminal as well it might be interesting to do so it might be nice if we made it easier for people to automatically like point to a specific directory and then configure that to build the file that would be nice but that's more of a nice to have the other thing once we have that we want the ability to be able to easily make changes to the content to to add test cases and then finally what I want to do is we have markdown we have that okay the other thing we want to make sure we do then is make sure that the environment is context agnostic so in the case of what I showed you earlier with obsidian the problem is that we're actually we need to have obsidian running and then you need to switch to a specific theme to check that everything's working to Me theme development in general should you shouldn't really need any of that to be honest and it'd be nice if everything was just done within the browser and that way when people are building themes for other things they don't have to necessarily they don't have to open up obsidian or whatever it is they're writing for specifically so let's go ahead and yeah let's go ahead and work on this next I realized some challenges with the context agnostic though because some of the things I guess we can what's kind of interesting it might not be context agnostic okay let me talk through what I'm thinking the reason why the contact is it might be tricky so let me make a note here might be tricky because a lot of themes or software environments have specific hooks to tell you what specific thing they're looking at so in in that regard you can't always make agnostic HTML agnostic choices when you're making selectors because I imagine for example Rome which is another note-taking app where you might develop a theme for example they have different hooks you're gonna latch into so you might need to actually set specific context so I don't know we'll see how this goes part of the reason I wanted to do this was play around with Veet and also just to make my own development workflow with the night owl easier so we'll see how everything goes okay knife you because software tends to have specific hooks all right with that let's go ahead and start upgrading some stuff let's take a look first thing first you will notice we're running some very basic no terminal commands and I'd like to honestly enhance that a bit so let's go ahead and take a look at V shall we so Veet here is a build tool where you might have seen it it's been making quite a big splash within the JavaScript community and so basically it has super super fast performance and the overall developer experience has proven to be very popular so we're going to go ahead and build on top of this to use the Next Generation tooling while also just learning a few things so let's go ahead and take a look and let's take a look at docs shall we getting started yep yep we want to go ahead and build our first project okay so the way I'm going to do this is let's go ahead and yeah that's fine we can create a Veet folder in here and then move everything later so let's go ahead and digital C create Veet and PM create V latest yeah let's go and do that okay so inside of here clear npm create V latest okay yep let's go and get that set up so this is going to be we'll call this theme Dev for now and what we want to do here is do we need a framework right now depending on how I want to configure things to make things easier yes I will need something and we'll play around it so we'll use View and we're not going to worry about the typescript aspect so that's good enough and so if we go to theme Dev now okay so if we run Dev here npm run Dev wait was it what is it called in here oh oh I have to install everything okay install dependencies this will be separate okay do okay great all right npm run Dev wow what an interesting path okay whatever that works okay so we have our web environment which is good now the thing here though is that I'm gonna I want to use view in order to make the overall developer experience easier for when people are building their theme however what we don't want to do is make a sort of a requirement for people to use it and so what I'd like to be able to do is call have a source folder that contains all the different contains the markdown file we want to use to modify in order to look at our themes so for example let's go ahead and actually just so I have this obsidian I think it's a theme demo file right here yep and so it contains a lot of different markdown scenarios for you to basically test down how your CSS looks so what I'm going to do here is we're going to go ahead and let's see inside a source for now let's create a folder called Data and then I'll call it theme demo file and then paste all the markdown in here okay so this will be a little bit tricky to do I realize because obsidian does do some interesting things with it but we'll take it one step at a time we're here to learn okay now that we have this the question is how do we go ahead and make sure that we can ingest said markdown file so I'm trying to think here let's see wheat markdown is what I would Google here you go V plugin markdown so this allows us to import a various markdown file into view components okay this looks promising this looks very promising all right so first thing first let's go ahead and let me go ahead and create a new terminal window and let's create a trick check out the Veet Branch real quick just to make sure we don't break anything on Main and then let's go ahead and add everything real quick and we'll say this is a config scaffold V3 environment which is great now let's go ahead and work on this let's see so we have config here setup install configure then you can add front matter attributes great markdown options mode Toc import as view component okay from Context oh interesting custom component can be runable in view oh this looks very okay so let's play around with this shall we first thing first we will follow the instructions uh Veet plug-in markdown whoops that's not it at all I add an extra J okay so now that we have this is good now we need to actually look at the this is the config so I imagine here oh this review one okay the imagine I need of the config.js which already exists perfect as we can see here we have V plugin View cons MD require oh this is interesting that this syntax is like this but this looks old so I'm going to go ahead and update it using this new syntax import MD plugin from Veet plug-in I'm going to autocomplete for me nope okay that's fine as long as you can find it plug in view plugins MD plugin and we don't have any options right now so just like that Okay so now it's saying that I should be able to just log set attributes from this this is pretty interesting because you can do contents okay okay we have this running let's go ahead and verify that our okay MD plugin is not a function woof okay that's not good oh did not like that okay so it did not like the configuration here oh I wonder why all right let's bump this over like this the configuration here I think it's an older JS syntax because it has a require and so I wonder why it's saying rattling cannot be used oh there are people having issues let's see failed to resolve content yep yep oh this is what I did mode view app test MD okay so this person is doing something very similar so not not promising that we're seeing that someone's running to the very issue we're going to run into but what's interesting is that they're running into it sooner so maybe it's because my options aren't configured for example so we can see here options mode okay that's fine let's go ahead and verify that first so let me go ahead and hide this oh don't save do there we go okay V config Js view plugin and then we'll say mode is view just like that okay great now let's try this again all right let's try npm one Dev breaks let's see I'm on Note 16 trying to think of things that might be causing this if you want to unload config MD plugin is not a function yeah it does not like that at all import view component from the docsmd it's used by a fair number of people so someone else did not have this problem but is it because it doesn't like the import syntax no but then the module exports this is V1 can it be possible that we're on a later version of V that it can't support that doesn't make sense to me at all feed plug-in markdown note SAS package oh wait a second silly me I know what I did ha nope I don't I thought I did for a second oh wait I am right npm install DV plug-in markdown I have two different packets of Json files so that is eh resolve cannot resolve dependency tree why doesn't it like this that's fascinating why wouldn't it like this is it because it automatically going to the root that's so weird though you would think that you would be able to have what if I okay I'm just gonna we're just gonna test something out real quick come in here and then I can go ahead and wipe that out wipe that out yup yep okay all right that's good does not like that oh silly me npm install yup doesn't like it okay so something is horribly wrong unable to resolve dependency theme while resolving 3.0 3.0 is found the root project could not resolve dependency to oh that's sad that means that right now it's not compatible with V3 it looks like cannot resolve okay what if I forced it to two let's do that rmrf node modules npm install okay this looks better oh that flash of red always sucks do plug-in view disk oh the view plugin is broken okay wow oh wait maybe I'll do it like this maybe they but I think they bumped over I think they bumped the versions for both that'll be my immediate guess but we could be totally wrong yeah did not like it oh that's rough hello Dark Castle LP how's it going thank you for stopping by okay this is frustrating so it looks like there is an issue with this being compatible with V3 so we all right we're back to the drawing block it looks like a little bit why is there a yarn file in here all right okay so now we take a look at the package.json in theme Dev we should be back to 3-0 everything should still work it does okay great yep that's good but apparently it doesn't it really doesn't like this markdown ingester which is sad because this is the first thing that comes in okay oh Anthony has his own view marked down V plugin MD d ipline Builder engine declare module shim budok include markdown import it as a normal view component uh-huh use view components inside of markdown okay why not we went down this Rabbit Hole already so we might as well see where this goes feed plug-in MDD nope yep is that 3o dependency they recently upgraded lalio yes of course Anthony has his own DX Improvement on the viewed plugin components wow gosh yeah V3 markdown ingestion yeah okay we're gonna adapt so right now clearly there's some plug-in issues with the markdown for whatever reason yeah V plugin does not support V3 either yup that's what's frustrating okay no problem what we need to focus on next at least for now the MVP which I think I got a little distracted here is that we need to be able to see basically the CSS working so let's go and hack together let's go and actually figure out let me resolve this first part so the Milestone I was trying to accomplish here is be able to see the HTML that's being shown so we're gonna we're gonna cheat on this one so for the demo file here I'm going to go ahead and copy this entire HTML page is what I'm going to do basically this scroller div I just want this one oh wait close close okay so I need it does look like yeah I would need to like simulate there's a lot to this that I'm not I'm being a little I was being a little naive I think I could immediate remove the contacts entirely but one thing at a time okay so I think app container is a good place to start so I'm just gonna go ahead and copy I'm just going to copy the element this is going to be gigantic but it's okay we're gonna figure this out okay so what we can do now is go into app.view and oh this is going to be painful I know this is let's go ahead and let's go into hello world then and we don't need any of this we are going to need everything inside of template though okay and Pace oh save oh man so I cannot be reached that makes sense because right now it's broken this is good all right obsidian theme file yeah yeah lots of things are broken okay I was just showing up this is good so let's call this let's rename this to demo file yeah yeah I know nothing's working so demo file from like this then we can do demo file here we don't need any props and we're just gonna go ahead and leave this save okay here is our demo file and I realize though I do want to delete any styles that might be referenced here okay everything looking yeah there's a ton of stuff here that's not being tested out but that's okay okay now that we have this the next thing we got to do is just see if this works so style.css here so we can go ahead and we can test this out by opening up our obsidian CSS file and let's layer that on top and okay so we're seeing clearly some changes being made it looks decent but it's missing a lot of the bass styles doesn't even it doesn't even look that close to what it is which is interesting because well I guess that actually makes sense so the reason why is because inside of here there is an app.css file and actually that's what I'm gonna do let me go ahead and let's create a new file here for app.css at CSS we're going to contain everything in here what I need to do though is find out where style that CSS is being imported okay it's being imported here meaning we can import app.css like this and that should give us a much better yeah this gives us a much better Baseline which is nice okay so that's good although what's interesting though is I can't see anything anymore everything is gone iframe document hidden where's all my stuff I frame document grammarly in nope that's not what I want have container yup status bar that's fine oh did I only copy the status bar maybe that's what I did all right we'll find out see nope this is the app container this should contain everything so if I look at the demo file we should see yeah I have containers in here so where is app container in this thing gonna find out yep there it is okay great but why is it cut off like that weird commenting out app.css all right let's just keep going for now the other thing we need to do inside of our main CSS yeah Castle so what I'm trying to do is set up like a really easy to work with theme environment so that people can easily work in set environment now I had some different requirements at the beginning regarding how I thought this would look I am quickly learning that probably won't be that simple but we can figure stuff out as we go okay so the other thing I want to make sure we do is the style that CSS is what's interesting to me is that style.css is styling some stuff so let me actually take get rid of this but what happened to all my variables like why is it look so different that's what I can't seem to understand is like all my backgrounds are like gone oh I wonder nope you guys let's take a look at this if we look at this here we go CSS font family yup give me my background color where did it go background color yes okay there's a bunch of themed dark here which is nice div title bar body oh body class okay yup so let's go ahead and copy the element oh boy oh boy that's why the demo file is funny all right oh so much JavaScript that's what that is not gonna be pretty there is a lot of stuff in there a saving file oh this is gonna be monstrous oh this was a bad idea abandoning ship what we can do is let's go back to the app container but we did learn there is this theme class here so maybe if I can just trick it into thinking it has it that'll be enough to play around with it because right now we're just we're testing stuff out we don't know how it's going to work but we're just trying stuff out drop all the way down great save okay this looks better but the Dark theme is just really not liking it okay so we're ingesting stuff things are looking funny but when Building Solutions I'm all about trying to figure out the next best step okay clearly to me the hot amount of reloading for the for this part is tricky because what I'm essentially trying to do which was probably my mistake to begin with was trying to replicate the obsidian environment inside of an entirely separate container and that may have just been wishful thinking to be totally what we can do instead though at the bare minimum is try to use Veet to at least manage the build output so that it's easy for people when they're working with it so for now to scope it down to make sure we just don't get caught up in scope creep we're going to make sure that we can use Veet to Output the CSS file we need to obsidian directly as we develop it so we can get that live preview sort of workflow so how are we going to do that let's say we're not going to need any of this web server stuff really anyways let's one thing at a time here we go all right so one third one third great all right so a couple of things is that we need to one have a v build we need some sort of V plugin for SAS and I really hope we don't run into configuration issues if we do I really will need to drop to two but let's do things one at a time shall we first thing first we'll have a Styles and actually I don't even need to pretend we I literally have a whole SAS folder in here that's full of stuff so this stuff can come into Source like this and what I need to do is have Veet watch this full okay so let's document what we're trying to do here so if we go into our theme veed project we're trying to let's see I'll call this a wish list right now because this was made with wishful thinking the first thing I'm going to do here is we need to V needs to watch SAS folder and output a build file okay let's learn how to do that together first thing first is we go to Veet and then what we're going to do here is let's search for how we might handle SAS all right so we have some stuff here we can install SAS it does provide built-in support for silence files there's no need to install these specific plugins but the corresponding preprocessor must be installed if you're using V that's fine you're using import that's fine import alias static assets okay this is what's tricky though I want to actually output the styles so how do we do that Veet SAS output CSS file how to okay here we go so someone had the same question all right this was answered that's promising to me I'm using this it outputs for production but I wish to create in development so I can see my uncompressed what's the best way to do this actually I'd like to do this too so build Minify uh-huh okay I wonder if in your Dev environment you can actually watch be able to see V watch SAS file build output in watch mode changes CSS k let's see create an app CSS file Import Car Wash mode before you change anything CSS is built okay that's cool V in watch mode okay maybe that's what we're actually looking at right now is we have a watch mode that we need to have so how do I find the watch mode server.watch mode okay yep yep command async config environment variables no that's not what I want watch build watch this does not seem to have the information that I'm looking for okay V build watch ah okay build watch which means it'll automatically build it debugging uh-huh okay this is the RFC it looks like chatting about it for a hot reload you can see that with a plug-in V plugins are beyond the scope of this particular session so we're not going to do that okay so build beat is the closest thing I think I'm finding here so what I would like to I don't know this is tricky though because let's take a look at this if I do npm run build this will run V build everything dist ETS but that's not what I want what we want to do is actually build the HTML file so you know what I'm going to do we're going to go ahead and delete theme Dev let me make sure I get out of stuff so that it doesn't crash on me I just want a generic npm create the theme Dev and we're this time I'm just going to do vanilla because we really don't care we just we want the bare minimum on this and okay yup CSS CD theme Dev npm run oh npm I K and Pim run build the dist here same thing okay but what we want is to separate out the CSS file that's the first thing we need to actually see because right now we'll notice that this has been compiled yep okay so let's go ahead and play with this it's a v-con oh oh it looks like it didn't create One automatically I guess it makes sense V config.js okay module that exports why do I feel like this is not gonna work but it's fine Minify false let's just copy that roll up options output asset file names name dot EXT save I don't think this is gonna work yeah I I didn't think so yep and the reason for this is because most likely we are relying on V2 and so this is a tricky part because if you're using the latest a lot of this stuff won't work but we're just gonna yep let's go back to V2 for now because this is proving to be a little tricky rmrf node okay MMI him run Dev npm run build nope yep that's fine you'll see type module package.json so it doesn't like this Dev okay that now we're cooking okay so this did create like a vanilla great npm run build okay this is good that wasn't good okay okay so the configuration worked when I reverted it but the problem was that I broke oh silly me I did not square bracket it okay so that's that now if I won npm run build okay now this is good we have this now what if we configure this to be SAS now it's not mpm let's see let's see okay so this was super helpful so let me just drop this down into the resources so that build with Ben no 38 there we go the people who are looking into this thread might be curious watch mode yep we'll deal with watch mode in a second V SAS we'll deal with that in a little bit as well I don't want webpack I just want Veet and then more importantly I want sass there we go okay so the only thing is we need to install the whoops that's not what I wanted to do npm install npm ad they add an ad command Alias I guess so makes sense okay boom SAS has been added now this is good so in theory oh I deleted my SAS folder whoops oh wait no don't not committed yep okay so get at theme I'm sorry CD get a team Dev all that has been added SAS has been left alone great git commit config switch to vanilla project yup and then check that out because we don't want to delete any of that we want it all there you go now it's back so now we drop this in here we have our SAS file we have our obsidian.css then scss will it recognize it without any configuration I have a hard time believing that oh it looked oh wait silly me okay npm run build yep that that did not do anything get commit sure move SAS folder into the environment okay we've added it it's clearly seeing it but it's not being built and what is the reason for that I think the reason for that is because let's see Source module main.css which is fine main graphs here query selector okay but where are my Styles being imported so where is Stylus is being brought in is it because it's in here nope that's not it either it's being imported in main.js oh top here okay so then what that's telling me is that I should import the Slash obsidian.scss at work we will find out npm run build whoa something's funky whatever npm run build Okay so still not good still only seeing one thing though inside of this we're only seeing this we don't actually see the SAS file being brought in oh wait this no this is it this is the file okay it did build it however what happened to all this stuff so it automatically compiled everything together that's interesting so just came in dropped everything in and put it into one file which makes sense and then it dropped the other thing okay so now if I delete style like this and then inside of main.js we get rid of it here it looks like this works okay that looks right so now if we run npm run build watch wait oh wait I'm wrong I was going to be like what did I do no I think it's me this time Bill okay build watch I wonder if it's like this instead again one Dev watching for changes okay cool I'm let's see full screen split how do I split then I need to open this file up and then if it's really watching everything as we expect we should see here at the bottom obsidian.scss which is great save like that automatically compiled great this is really good so we're actually getting pretty darn close okay so let's see let's I don't know why this stuff is so unhappy but we're gonna just leave that alone leave that alone leave that alone leave that alone yes all right it's fine okay git commit feature create circumstances or environment for Veet building SAS output okay this is great this is actually a pretty big milestone because now what we need to actually do though is figure out how we can configure V to do a lot less so let me strip this down some more so we don't have that don't need this to be honest we really don't need most of this stuff because for now we're not even going to worry about HTML and all that stuff so I'm actually just going to make main.js this and then we can honestly let's keep this project simple because we want to do is minimize confusion for people so I'm just gonna wipe all this out because we don't need any of that and then counter.js don't even need that that's a relevant package.json Veet okay great so now if I run npm1 build oh it needs an entry module oh I think I went too far let's find out what is this thing the entry module okay entry config Okay so based on my gut instinct one of the reasons it needs an entry point is because it needs somewhere to see where all the dependencies are to do all the relationships but what if I only wanted to handle I know I can leave the HTML file in there but I want to spend just five ten minutes figuring out how to change the entry point so let's say this configuration is very lacking shared okay more options is there an entry API entry type configuring okay here okay it looks like this searching is a little bit oh I think that's what that is okay okay let's just let's start looking around is there an entry point list of fields when trying to resolve package entry points okay so maybe let's just check this out real quick is there an entry point in here that's defined as index.html nope not in here so we know it's not that then we look so that's not it CSS modules post CSS preprocessor options additional data Jesus options nope nope nope assets include server hosts of report localhost good to know okay oh here's some stuff that I know I'm gonna need build Target build assets directory build CSS code split build CSS Target uh-huh okay I'll put directory by default is this but what this means is people could people could configure the output assets directory yup so there's nothing stopping someone from configuring it although it looks like it just I really cannot escape the MV environment for now because otherwise I can't guarantee what people are going to use build watch MTR directory report compression size you have a worse entry why is entry not build Library oh Library maybe that's what it is entry string build as a library entries required because since the library County usage entry name is exposed as a global variable and required when formats include UMD if v e s MD to only build CSS files okay oh blog post exciting okay CSS Library yep project name yup index.html the league contest of main TS style the Cs sure run Dev run build run dist configure the build config V ah this is the secret this is the secret sauce I'm pretty sure okay so inside of the V config so what we're learning here oh actually iku here is actually beating me to the punch looks like what we need here is the lid mode which is it stands for library for those who don't know and it looks like yeah it's in the build section and so for me for example my entry point is going to be SAS obsidian scss and then we're just going to call it obsidian say night owl like that let's see if this works npm run build this did not like that path is not defined okay that makes sense because we need to actually import path from path so that's my mistake so let's drop that in real quick run build again oh beautiful the only problem is that we now have this we have these JS files being imported which we don't want so let's keep going further down the path looks like yup it's the same things but we have logo great perfect how to handle assets logo yeah but I don't yeah SAS yep it looks like we cannot Escape the JavaScript files um I'd like to eliminate the production of MJS and UMD entirely let's see and once again um V only build CSS no UMD or JS files building for production can Styles be injected in library mode okay for now nope come on how do I delete this V config yep and we could output it to a specific directory so what we could do then all right keep working don't get tripped up I want to build it output directory here relative to project root but we need to do Veet environment variables two let's see bomb dot m automatically yep loaded or imported these are automatically exposed to import meta M okay here's what I'm going to try to do now so what I want to do though is output it to a specific directory when it's building so this would be the closest to the example that I want so we have an out directory and then we go import.meta dot m i blue meta MV yep and it would be destination okay so like this okay there is no M environment right now so that'll break so that goes in here okay let's see if this works fingers crossed okay npm run build off they don't like it okay this files instead of ecmascript because of the import meta here okay so the import does not like that M prefix intellisense for typescript we start after making changes how to use M variables in V config yep import load M from Veet process and wait that looks obscenely complicated process m equals everything from process M and load M mode is that really the answer it's got to be an easier way right now that's not it Yep this is oh this is one of the challenges with the new es modules and everything they're great for a lot of things but then you run into these sort of configuration things where it's huh why because here you can see it's got this module that exports and it just does not like that piece did I misspell anything import nope meta M that's what it is build module exports [Music] you'll see oh this is still outputting as CS style that CSS that's that bothers me why can't I do this okay you know what I'm also once again it's so easy to get caught up in stuff whoops all right dropping that output here all right let's go here on build okay we see some problems so it looks like it already created that okay so we don't need to necessarily do it like this but oh that's annoying I only want to Output the CSS file but it's wanted to Output an entire directory can I do that can I do that the output file instead of directory nope because one of the things we certainly could do is build another script to watch that folder and when that folder changes like move set like copy set full like file into the environment that is an option okay so for the sake of getting to I always have to remind myself it's important not to get caught up in this piece Okay so when is that copy it yup okay so here's what we're gonna do we're gonna okay we're gonna call this a migrate file dot Js put this inside of steam.dev if we run migrate should then grab the thing and move it over but it's going to copy it from okay next I need to rename the file jumping around but bear with me wheat name CSS file to roll output acid name interesting I don't love that the reason for that is all right so we're not even gonna worry about the output directory we're leaving it as a standard dist it's interesting because like basically you're saying the option like inside of the role of austrians that's what allows you to change it there's got to be an easier name easier way to do this at least it feels like it do you finite is in the same guide page for the build Library mode okay great so let's go ahead and bump that out build options rename do library mode okay Library mode lib roll up external output globals running V build preset that's Oriental shipping libraries yep recommended package.json Advanced base options render build HTML mode nope that's not it entry resolve file oh wait file name lid name file name that should work yes City and night owl maybe like this build that did not do anything okay interesting okay we're gonna try that one solution that I saw earlier which apparently I was silly roll-up options output asset file names okay asset file names interesting okay so you then you get the asset info interesting if asset info dot name equals style.css turn obsidian dot CSS else return this okay see if that works hey okay that did work this is not terrible this works so basically Roll Up is the key here again builds as such I find it to be such a mystery especially if you work heavily on application specific logic like buildtooth is like a whole another world of the way you think regarding environments and that kind of thing and my hats off to those working in it it's one of the things I would love to get better at and learn more about but as we all know in the world of tech it's very tricky to keep up with everything you do what you do the best you can with what you have and that's why I think it's always super important to keep things contextual that's why to be honest like the problem we're trying to solve here is theme development and enhancing my workflow and then also part but the motivation behind it is also to work with Veet but as we know if you just read documentation it can feel very arbitrary a lot of times especially because you're not sure how it's going to be applied to certain situations and we saw that certain things very clearly only apply in certain situations or certain versions and that kind of stuff and so it's why one of the reasons I'm all for just getting our getting your hands in there and trying things out the field name should be in camo case but maybe it's only for V3 yeah this is what's tricky right now is that the documentation does seem to walk the line between two and three and it's not terribly clear right now which one's which however for the sake of progress we are moving forward so this obsidian CSS file needs to then be copied so similarly I will have a move command similar to this it's fine I'm part of me wishes this was simpler but there might be ultimately a reason all right so we have that we have a move command and we're just going to node the migrate file.js command so if we run npm build right great although I realize this has these dot m things that I need to install so package.json FSS yep these two need to go in here let's say we're almost ready for actually a proper no more nested folder situation okay npm run move okay great that's the pro that's good this makes sense because right now migrate file is looking for a root obsidian file which doesn't exist and instead it should look in here so now if we run move it looks like it was copied successfully so now we can start testing this a little bit to see if what I'm thinking is working so we have it here once again we will go ahead and modify the CSS file as CSS file and let's go ahead and just keep it simple once again and this time we're just going to do a border 2px solid green and we'll just make this important and then we'll run the build build should automatically build out the CSS file and put it on run move should copy it over granted I'm not currently using the dev theme because that's what I want to basically test before I send it out to people okay Dev theme is working great so once again we can go ahead and switch this yellow and then this should assuming we're running watch this would automatically do that and then we want to move okay the thing is though we've basically replicated the system I had before to be honest which was I built it I think it worked and then I moved it well we need to add to a fully enhanced the developer experience of this is basically the ability to now as the output changes it automatically copies it over first thing first let's go ahead and delete this we will run the build whoops and then we will move it over everything's good now let's go and just do a little bit of cleanup real quick so M sample is good ignores good change logs fine this is good I'm gonna delete these though these are gonna get overwritten yarn don't definitely don't have a yard lock anymore so that's gone then I can take everything from here I believe is this getting more different oh that get ignored it's better so this one is going bye bye pull and then one two three I think that's it so we take this whole thing move it out oh yes let me just delete the node folder just to make sure everything's good okay now we can take this move everything out great now we don't have a theme Dev folder which is good and then I definitely wrote something here obsidian night owl clear okay and then let's just make sure everything works again every build everything looks good Wonder Bar okay git commit let's see refactor layout files flat at root directory that's what we did here wonderful okay now we need to have the ability to watch a file and then do something so for now for the sake of the fact that we are starting we're starting to run a little low on time we're going to want to be able to let's see node watch file changes then run script so we need like a trigger upon any changes in a folder oh okay what's this how to make a package kit rerun whenever a filed a folder changes okay yep okay there's a watch package this makes sense you'll watch this what is it going to say add the watch script to package of Json you have the build so an ad script that watches the laser and run this upon every change oh this will if this works this would be great okay so this would be awesome okay okay here we go whoops wrong thing all right npm install watch is that how we do it all right great watch is good now we're gonna do this thing called watch and we'll say what does it say you said that we can say watch npm and then npm run Dev and when we watched that then we will focus on a specific folder called dist wait oh upon every change sorry run move we want to run it every time it happens okay that looks good all right here we go npm run watch okay watching dist gonna now we're gonna let npm run Dev okay so that's watching that's copying that's good sitting that CSS here we go order one PX solid magenta important save oh that did it although did not like that what happened copy copy can I try again save so it does this thing where it like copies it it's almost because it's writing multiple times it's like dropping it over but from intents and purposes it is working so what is then I say node Run 2 commands how do you run two commands node run multiple scripts with one command there has got to be a library for this I just can't remember what it's called Ah that's what it's called concurrently npm concurrent do great okay yup okay so we're about to I think we might have hit what I think is what we need to do concurrently is here then you command one command two okay so this is what we actually want so we want to do okay so we actually don't want Dev is technically true we wanted to build we're not going to worry about natural build command a preview command we have a move command we have a watch command to watch that but then we need a start command npm start let me just really quick yep it's a pre-configured one okay okay great so we have a start command that will concurrently run run Dev npm run watch I think that does it oh snap the error log is gross but if this is working the way I think it is I may have set it up okay so then now that we have this means we can then say come on brain broke what am I doing oh yes that's what we're doing you can test this now and we'll do like cyan here yeah that's it everything runs on one command so this is great let's see how do I customize this theme installation okay set up how to installation we do installation FAQs add CSS Snippets oh I need to like document how this works okay let me see installation let's do this real quick because I want to actually make sure people actually can use this so let's see code local Dev environment this is for people who want to clone the repo and work with the file locally so very quickly we cloned the repo install dependencies then what do we do we run npm start that's oh wait create dot m file with a file path to where your theme directory lives I think that's it at a high level that's basically what people need I could definitely go into more depth with this new let's do this use and sample to see the format that's good yeah so the key thing is you have to actually name it all right npm start all changes made to scss files will automatically be migrated into your obsidian environment great so we can stop that I think that's everything I think we did it feature oh wait actually that's this that's a feature this is docs kit to feature that ability to run all run commands with just one do ducks I haven't mentioned for how to set up local environment this is great so the reason this is important and one of the reasons I've gone through all this is because I've been wanting to find a way to make my life easier to basically work and maintain the theme so right now if we go to the rehab the repository fortnite owl there we go we go okay um I have some issues I need to work through so for example this one here okay for example right here we know that the theme is currently hiding this sidebar and I want the ability to basically actually I don't need feedback on this anymore this is I just need to work on it okay so a couple of things let's go and check out main git merge Veet good get push origin Main great that's good okay so how would I develop this team not using what we just learned oh that's not good I'm gonna end up giving everyone the Blue Barn because I was working on a testing thing run oh build does not exist anymore let me add that script back because we're not always just the build oh wait a second yep that's not great because it needs to be at the root I need to fix this real quick oops oh actually no it won't luckily won't hurt anything but this does mean when I run build I need to migrate that file into the directory so I have two different things I need to do okay so quickly so in terms of the solution there's two different types of migrated files this is to obsidian dot JS so that needs to then run here and then build needs to actually move build file oh man okay it's fine we good we're just gonna migrate to root I gotta call it for now root.js so this is very similar to this script for now except we don't need any of this we just need to copy the disk folder from here granted I could have probably done this with the terminal command but for the sake of keeping things consistent destination CSS build file copy successfully to root and I guess I'll add you know what I'll add a tree to this one because it's like the branch so it's like the root and then that should do it so right now I run migrate to root that did not like that path must be oh silly me just put it in root run did not like that how about like this operation not per minute unlink copy this I don't understand this is the root directory why does it not ever see copy to root path okay what if it's just like this node migrate to root illegal operation what is this illegal operation this is so weird authorities this as a directory this is why you're getting an error is directory oh obsidian.css npm run or node migrate to root there you go great beautiful so now that we have this we're gonna wrap this up so we have move okay now I have to be more specific move subsidian k c npm run script sequentially okay I think this is a double and yep I was right and MP node migrate file to root dot Js and then that should then if I run build okay that's fine cannot find folder migrate oh okay let's keep this naming consistent migrate to root migrate to obsidian that npm run build okay CSS copied to root successfully so now if we take whoops okay if we take a look at what's change see that things did get modified okay that's good so the build was updated so we can go ahead and say this is a fix or feature actually build path for V output all right and then the last thing we want to do to clean this up a little bit is honestly I'm going to rename this to styles and are actually this is actually just the theme the entire theme is represented in these SAS files and then we'll have a folder for Scripts dummy killer here you landed on ES build I'd love to see what you're doing to be honest because I feel like I'm hacking together a solution that really should could be a lot cleaner like the fact I have to hack all these node scripts to watch and move stuff like to me it's like I'll put a file to a directory and in the time we've had today I haven't been able to really figure out where that stuff lives for some reason so I honestly again I'm gonna blame myself before I blame anyone else so I would first to say that real quick that it's going to be me and not them Okay so can I run build nope entry module all right now that I move everything into Scripts this needs to go back a directory this needs to go back a directory and backup directory I think what's the harm we're gonna find out cannot find oh silly me I actually think the Rel no this is actually I don't know there's two different things I did that I screwed up there but it's fine we'll figure one thing at a time this is theme like that and then yes okay I'm run build yup now this is starting wait why is it still looking up SCS says oh here we go theme like that build resolve that no such file exists because when you're running this directory there is no facts with not relatives running it at the root environment there you go mpm start there you go copied no such file directory oh interesting wait now we're good no such file okay that makes sense because it doesn't exist it's good it's good it's good it's a nation all right actually I'm gonna do an emoji for this one I think it's a truck so again npm run oh not dead but npm start that's good okay there we go now we're I think we're in business obsidian.css test it again one more time quarter 1px solid cyan important save copied over migrated successfully great so that's solid okay great that is I think we've reorganized the project directory to be easier now so that pheromone there's a script this is the theme that people can work through everything the obsidian.css for those wondering this is actually how obsidian actually detects the marketplace for publishing so that's why it has to be of sitting on CSS I like I don't want to name it something else okay so this is great so this is a refactor uh reorganized layout of files a project directory great awesome oh your theme is prison that's okay that's awesome okay I will definitely want to check out the source code for how you're managing that because I just it's been pain working on the theme like I got to a point where the infrastructure was starting to get in my way so that's part of what we're working on today so iku here in the chat yeah the question here is can I just have used assassin pilot and done something very similar absolutely so this is uh you know what maybe actually that'll probably a good point to wrap up on but for those if you want to go ahead and check out the changes or develop the theme yourself be sure to check out the repo which I'll go ahead and include in the show notes but let's switch over to the camera because I think this will be a good one to wrap up on all right so today we pretty hectic day as far as like figuring out how things work traversing the V2 versus V3 and the question here from iku here which I think is a great one is around this idea of couldn't I have just done this with a standard notes ask compiler and then just chained them with regular notes that stuff and the answer is absolutely there's nothing stopping me from doing that part of the reason the thing I want to emphasize here is that as a software engineer or when you're building stuff is there are one lots of ways of doing things and more importantly when you're in like research mode and you're trying to learn something new it's always helpful to have context around what exactly is like the problem you're trying to solve so for me developing an obsidian theme that's something that I've been trying to do so it matters to me and then on the other hand I've been meaning to play around more with Veet and try to figure out how to get it to leverage like the es modules and all that stuff so as a result it was one of those like okay I have this problem and I had this thing I want to research I'm going to put these two together the key thing to remember here though is that there are so many ways to solve things and in the given context of Simplicity prom might have made sense to just keep it at note SAS but on the other hand it's okay to just try building with different tools especially when like I said in a perfect world one of the reasons I was going with Veet is because I wanted to give people a web environment that they could look at their theme switch from light to dark mode really easily like in a toggle mode like basically Envision like when you're on a site you can like you see your theme you can toggle it you can customize it develop it like I was hoping for an easy way to do that but because of the very specific context of obsidian I would probably need to build like an obsidian rapper essentially in a web browser and then have that sort of I don't know it seemed like a lot of work when what we have here ultimately is probably good enough for most people yeah anyhow I appreciate everyone for hanging out today and watching if you have any questions as always feel free to hit me up on Twitter you can find me on the internet of things at bencode Zen thanks to Derek castle iku and dummy killer today for hanging out it's been an absolute blast with that I think that's a wrap for today thanks everyone for hanging out and I'll talk to you all later bye

Channel: BenCodeZen

Views: 1,156

Keywords:

Id: q57xZG2BDTE

Length: 85min 27sec (5127 seconds)

Published: Tue Aug 02 2022