search

bitovi / documentcss

A documentation/guide portal for the Live Style Guide feature of DocumentJS
https://documentcss.com/
MIT License
72 stars 7 forks source link

Custom Style Guide theme #43

Closed herrjosua closed 7 years ago

herrjosua commented 7 years ago

I am having an issue customizing the theme for my Style Guide. I have created a new theme folder, copied the directory structure and all the files. I was able to make a few changes to the HTML markup, but I am trying to change the logo. I have added the new logo file to the img directory in the static directory, and changed the LESS for the brand. But when I try to reload/restart my server my changes are not being pushed. I'm using the starter kit - https://github.com/brandonreid/documentcss_starter-kit

tomgreever commented 7 years ago

@herrjosua - this might have to do with a known issue around caching the theme files so that they don't have to be generated each time. The cache is not always purged, as it should be. Two things to try:

  1. Run it with the f flag which should force it to regenerate the theme, like documentjs -f

  2. Manually delete the cached files in /node_modules/documentjs/site/static/ both build and dist folders may have multiple cached folders which can be removed, as well as /node_modules/documentjs/site/templates/

Because of this issue, I will often add an rm to my terminal command so that everytime I run it, it manually deletes those files, like: rm -fr /some-location/node_modules/documentjs/site/templates/* && rm -fr /some-location/node_modules/documentjs/site/static/* && documentjs -f That way I can run this one command and have confidence that those files were removed.

tomgreever commented 7 years ago

Since you're using the starter kit, you might be able to modify line 17 https://github.com/brandonreid/documentcss_starter-kit/blob/master/gulpfile.js#L17 of the gulp file to something more like this: './node_modules/documentjs/site/templates/* && rm -fr ./node_modules/documentjs/site/static/* && ./node_modules/.bin/documentjs -f'

But I'm not sure without trying it.

herrjosua commented 7 years ago

Thanks. I will try that out and let you know the results.

herrjosua commented 7 years ago

I tried modifying the gulp task, but it would error out. This is the output in my terminal window:

/bin/sh: ./node_modules/documentjs/site/templates/d5b696e8a579e8128df33caae5ee933e: is a directory
[14:47:05] 'force-styleguide' errored after 251 ms
[14:47:05] Error: Command `./node_modules/documentjs/site/templates/* && rm -fr ./node_modules/documentjs/site/static/* && ./node_modules/.bin/documentjs -f` failed with exit code 126
    at ChildProcess.exithandler (child_process.js:213:12)
    at emitTwo (events.js:87:13)
    at ChildProcess.emit (events.js:172:7)
    at maybeClose (internal/child_process.js:829:16)
    at Socket.<anonymous> (internal/child_process.js:319:11)
    at emitOne (events.js:77:13)
    at Socket.emit (events.js:169:7)
    at Pipe._onclose (net.js:486:12)
[14:47:05] Finished 'copy-fonts' after 501 ms
tomgreever commented 7 years ago

Try manually deleting the files from your computer first. Just put them in the trash without using the terminal

On Dec 7, 2016, at 1:54 PM, Joshua Bock notifications@github.com wrote:

I tried modifying the gulp task, but it would error out. This is the output in my terminal window:

/bin/sh: ./node_modules/documentjs/site/templates/d5b696e8a579e8128df33caae5ee933e: is a directory [14:47:05] 'force-styleguide' errored after 251 ms [14:47:05] Error: Command ./node_modules/documentjs/site/templates/* && rm -fr ./node_modules/documentjs/site/static/* && ./node_modules/.bin/documentjs -f failed with exit code 126 at ChildProcess.exithandler (child_process.js:213:12) at emitTwo (events.js:87:13) at ChildProcess.emit (events.js:172:7) at maybeClose (internal/child_process.js:829:16) at Socket. (internal/child_process.js:319:11) at emitOne (events.js:77:13) at Socket.emit (events.js:169:7) at Pipe._onclose (net.js:486:12) [14:47:05] Finished 'copy-fonts' after 501 ms — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

herrjosua commented 7 years ago

I tried deleting the node_modules/documentjs/site/static/dist and the node_modules/documentjs/static/build directories but that does not resolve the issue. If I try t remove the whole static directory gulp crashes.

tomgreever commented 7 years ago

Did you also delete the contents of node_modules/documentjs/site/templates/ ?

herrjosua commented 7 years ago

Yup. I did a few tests. I just removed the template directory only. The tried removing both the template and the static directories. After each test I would close and reopen my browser.

tomgreever commented 7 years ago

And then after you delete the contents of those folders, you re-run documentjs to re-generate the docs, right?

herrjosua commented 7 years ago

Correct.

tomgreever commented 7 years ago

Hm, can you share your theme folder? Email tom [at] bitovi.com if you'd rather not post it here

herrjosua commented 7 years ago

Sure, I also created a new repo if you just want to check it out? Either way works for me.

tomgreever commented 7 years ago

Yeah that works even better

herrjosua commented 7 years ago

Here is the direct URL https://github.com/herrjosua/documentcss

tomgreever commented 7 years ago

The problem is your path to the static files is incomplete.

On https://github.com/herrjosua/documentcss/blob/master/documentjs.json#L3 you have: "static": "./stage-theme", Because of this, DocumentJS can't find your static files and reverts to the default theme files. It should be: "static": "./stage-theme/static",

When I made this change on your repo, I can now see the logo:

screen shot 2016-12-07 at 4 18 23 pm