search

mantrajs / mantra-sample-blog-app

A sample blog app built with Mantra
http://mantra-sample-blog-app.herokuapp.com/
MIT License
296 stars 104 forks source link

How to add Google material icons to the project? #74

Open rnarayan opened 8 years ago

rnarayan commented 8 years ago

I would like to add the following link in my html but I don't see a index.html file in the app. If I were to create one, where would I put that in the app?

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
payner35 commented 8 years ago

this is my main Styus file..

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700,900);

h1
    font-family: 'Roboto', sans-serif
    font-weight: 700
    font-size 2rem

h2
    font-family: 'Roboto', sans-serif
    font-weight: 300
    font-size 1.4rem

h3
    font-family: 'Roboto', sans-serif
    font-weight: 400
    font-size 1.3rem

h4
    font-family: 'Roboto', sans-serif
    font-weight: 300
    font-size 1.1rem
arunoda commented 8 years ago

Just create a style.css inside a component directory and import the stylesheet.

rnarayan commented 8 years ago

The material icons couldn't be imported using @import in CSS. Apparently, font awesome icons have same issue. I ended up downloading material icons in public folder to make it work.

Is there a reason why mantrajs doesn't allow access to index.html? It would be nice to be able to use at least the portion for quick prototyping. I know we can use kadira:dochead to manipulate but sometimes, it's just convenient to copy and paste links there.

arunoda commented 8 years ago

We won't stop you from adding a HTML file and setup CSS. That's totally fine.

rnarayan commented 8 years ago

I am a little lost right now. Where would I put index.html in the mantra-sample-blog-app and ensure that the <head></head> section is served correctly. Thanks.

rnarayan commented 8 years ago

Apparently, other people are having similar issues too. Here is an issue from mantra kickstarter app.

@arunoda , Let's reopen this issue. I think this is a serious consideration for a production app. Thanks.

kokjinsam commented 8 years ago

@rnarayan you can put your <head></head> in configs. Or if you want to use dochead, you can make a dochead.js and startup.js in the configs and initialize it in client/main

arunoda commented 8 years ago

@sammkj is correct. Create a startup.html file in configs and add your head into that. Meteor will load it correctly.

You can use DocHead too (and helmet) as mentioned on the kickstarter app repo in the similar fashion. If it's DocHead, it's a good idea to run them inside FlowRouter trigger to support server side rendering.

arunoda commented 8 years ago

@rnarayan I'll try to add an example case here: https://github.com/mantrajs/mantra-sample-blog-app/issues/76

rnarayan commented 8 years ago

Thanks @sammkj and @arunoda. I will try your suggestion of startup.html in configs. I was planning on using DocHead but then the favicon issue worried me. I am using mantrajs to prototype a production app.