kitchen-site icon indicating copy to clipboard operation
kitchen-site copied to clipboard

Replace CDN files with local copies

Open rgstephens opened this issue 9 years ago • 11 comments

Is there a recommended method to setup local versions of the Bootswatch theme files and fontawesome?

I downloaded the font-awesome.min.css file and referenced it using the application > stylesheet but of course there's still a reference to maxcdn.bootstrapcdn.com/.....

rgstephens avatar May 21 '16 18:05 rgstephens

@rgstephens sorry for late answer. Not possible by default, but you can:

  1. change generated code (but this will be overwritten if you generate app again).
  2. change meteor kitchen's template (this will work until you update meteor kitchen to the next version).
  • bootswatch templates are located in ~/.meteor-kitchen/templates/blaze/ui/bootstrap3/themes
  • fontawesome is coming from meteor package: natestrauser:font-awesome. You can replace this package with another one here: ~/.meteor-kitchen/templates/blaze/code/app_accounts.json and ~/.meteor-kitchen/templates/blaze/code/app_simple.json.

BTW, what do you think, should I change all external/CDN files to local and include it in "official" version?

perak avatar May 24 '16 10:05 perak

Hi @perak I also have problem with CDN files specially when I develop on machine without internet connection or with poor connection, page load longer than normal in this situations.

cyclops24 avatar May 24 '16 16:05 cyclops24

@perak I think having the files locally is a good idea. I initially ran across this issue while working on an airplane with no internet connection. Since then, I've been working on a mobile project and would also like the files on the device to reduce download time.

I implemented another approach a couple of days ago and have been meaning to post it. It's not ideal but it doesn't require changes to the generated code.

For Font Awesome, here's what I'm doing (doing similar for Bootswatch). I did a git clone of the Font Awesome project under a client directory in my main folder.

First copy the Font Awesome files to the meteor kitchen PUBLIC_DIR.

"copy_files": [
  { "source": "client/Font-Awesome/css", "dest": "PUBLIC_DIR/css" },
  { "source": "client/Font-Awesome/fonts", "dest": "PUBLIC_DIR/fonts" }
],

Now in a client_startup_source_file, patch up the reference to the CDN files with jQuery to point to the copied files:

$('link[href*=bootstrapcdn]').after('<link type="text/css" rel="stylesheet" href="/css/font-awesome.min.css">').remove();

This isn't the greatest because I'm still susceptible to changes in the output. Maybe I should just pull the natestrauer:font-awesome package out.

Also realized that I need to do the same with references to google fonts.

rgstephens avatar May 24 '16 17:05 rgstephens

Just replace the package with fortawesome:fontawesome because it does what you need already :)

meteor remove natestrauer:font-awesome 
meteor add fortawesome:fontawesome 

mikkelking avatar Jun 24 '16 18:06 mikkelking

Tnx Mike!

perak avatar Jun 24 '16 19:06 perak

@mikkelking I try to remove natestrauer:font-awesome and add fortawesome:fontawesome but it return below output for me:

natestrauer:font-awesome is not a direct dependency in this project.

But I have this module when use meteor list. Do you have any idea?

@perak what about Bootswatch theme? Do you have know any clean way to change Bootswatch to offline version? I generate my app later and can't use copy_files. How can I modify my current code to convert it to local?

cyclops24 avatar Aug 10 '16 11:08 cyclops24

oh @mikkelking I found issue. I copy command from your message and it contain a small misspell. You type meteor remove natestrauer:font-awesome but it's correct is meteor remove natestrauser:font-awesome Sorry if I didn't check first :wink:

cyclops24 avatar Aug 10 '16 11:08 cyclops24

Just edit the .meteor/packages file to get it where you want and meteor should do the rest

On 10/08/2016 9:36 pm, Ba Ba K wrote:

@mikkelking https://github.com/mikkelking I try to remove |natestrauer:font-awesome| and add |fortawesome:fontawesome| but it return below output for me:

|natestrauer:font-awesome is not a direct dependency in this project. |

But I have this module when use 'meteor list'. Do you have any idea?

@perak https://github.com/perak what about Bootswatch theme? Do you have know any clean way to change Bootswatch to offline version? I generate my app later and can't use |copy_files|. How can I modify my current code to convert it to local?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/perak/kitchen-site/issues/301#issuecomment-238841111, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWoT9bQWXsp3s8EqppA4B4w0eekPeu0ks5qebeigaJpZM4Ij0_T.

mikkelking avatar Aug 10 '16 11:08 mikkelking

Thanks man. @mikkelking do you have any idea about Bootswatch theme?

cyclops24 avatar Aug 11 '16 04:08 cyclops24

No I don't, but you could have a look on atmosphere to try and find one

On 11/08/2016 2:45 PM, Ba Ba K wrote:

Thanks man. @mikkelking https://github.com/mikkelking do you have any idea about Bootswatch theme?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/perak/kitchen-site/issues/301#issuecomment-239073245, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWoTzH01GUcShekqqlPPI6ACHfQ0NMKks5qeqjugaJpZM4Ij0_T.

mikkelking avatar Aug 11 '16 04:08 mikkelking

I wrote a post on selecting Bootswatch themes with Meteor Kitchen here.

rgstephens avatar Aug 11 '16 14:08 rgstephens