search

Watts-College / cpp-527-fall-2021

A course shell for CPP 527 Foundations of Data Science II
https://watts-college.github.io/cpp-527-fall-2021/
2 stars 6 forks source link

Lab 06 Part 1 HTML not executing? #49

Open mtwelker opened 2 years ago

mtwelker commented 2 years ago

I have put everything together for Lab 06 Part 1, but only some of the HTML seems to execute correctly. Here's my output:

image

As you can see, it seems to work okay until it gets to the "item-links" section. I have gone over my HTML with a fine-tooth comb, but to me it looks exactly like the example in the instructions. Here's the HTML my build_circles function generates for just the first person:

<div class="list-circles">
<div class="list-circles-item">
  <a href="http://www.imperial.ac.uk/people/c.donnelly">
  <img src="https://www.repidemicsconsortium.org/img/people/christl-donnelly.jpg" class="item-img"></a>

  <h4 class="item-name">Christl Donnelly</h4>
  <div class="item-desc">Professor of Statistical Epidemiology, Fellow of the Royal Society, Christl has extensive experience in epidemics analysis and emergency outbreak response. Imperial College London, UK.</div>

  <div class="item-links">

    <a class="item-link" href="http://www.imperial.ac.uk/people/c.donnelly" title="Website">
    <span class="fa fa-home"></span>
    </a>

    <a class="item-link" href="" title="GitHub">
    <span class="fa fa-github"></span>
    </a>

    <a class="item-link" href="" title="Twitter">
    <span class="fa fa-twitter"></span>
    </a>

  </div>

Here's what I have for my CSS:


<style>
/* --- Lists of circles --- */

div {
    display: block;
}

.list-circles {
  text-align: center;
}

@media only screen and (min-width: 1200px) {
  .list-circles {
    width: 150%;
    margin-left: -25%;
  }
}

.list-circles-item {
  display: inline-block;
  width: 240px;
  vertical-align: top;
  margin: 0;
  padding: 20px;
}

.list-circles-item:hover {
  background: #fafafa;
}

.list-circles-item .item-img {
  max-width: 200px;
  height: 200px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #777;
}

.list-circles-item .item-desc {
  font-size: 16px;
}

.list-circles-item .item-links {
  margin-top: 5px;
}

.list-circles-item .item-link {
  margin:0 3px;
  color: #314f96;
  text-decoration: none !important;
}

.list-circles-item .item-link:hover {
  color: #042265;
}
</style>

I'm not sure what I'm missing here. Any help would be appreciated!

mtwelker commented 2 years ago

I'm thinking this relates to the CSS... In Step 5 of the instructions, it says "You will also need the custome CSS items contained in the site main.css file in order to replicate the style of the gallery:" and then has instructions for creating the CSS code chunk and adding the "Necessary CSS elements from the R Epidemics Hub website:". Are there additional CSS items that we need to get from the site main.css file, or do we only need the ones that are included in the instructions?

lecy commented 2 years ago

It's not additional CSS elements. It's loading the fa-icon library so they are accessible.

Give me a minute.

lecy commented 2 years ago

Can you try this please? 

install.packages("fontawesome")
library( fontawesome )

Then replace:

<span class="fa fa-twitter"></span>

With: 

fa( name="twitter" )    # creates an <svg></svg> tag

# others: 
# fa( name="github" )
# fa( name="home" )

I think the CSS elements will still work because they target the link style (the tag), not the icon itself (span tag).

Let me know if that works!

lecy commented 2 years ago

This is an alternative library: 

remotes::install_github("mitchelloharawild/icons")
icons::download_fontawesome(version = "dev")
icons::fontawesome("twitter")

You can test it by using the elements first without installing the package: 

# icons::fontawesome("twitter")

<svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">
  <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>

# icons::fontawesome("github")

<svg viewBox="0 0 496 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">
  <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
</svg>

# icons::fontawesome("home")

<svg viewBox="0 0 576 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">
  <path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path>
</svg>
mtwelker commented 2 years ago

Thank you for those suggestions!
I installed the fontawesome package and included this line in my rmd: library( fontawesome ) Then I replaced <span class="fa fa-twitter"></span> with fa( name="twitter" ), and knitted the rmd but it didn't make any difference.

After that I followed your next suggestion:

remotes::install_github("mitchelloharawild/icons")
icons::download_fontawesome(version = "dev")

The line icons::fontawesome("twitter") does generate a Twitter icon on my rmd, but the output from the build_circles function still includes the HTML code instead of the icons:

image

Am I missing something?

lecy commented 2 years ago

The fa() function would have to be embedded inside a paste to add the tag to the HTML code, similar to how arguments get embedded in paste(). Something like:

paste0( “<a>”, fa(), “</a>” )

I see 4 open <div> tags and only one closing </div> tag. Are you sure your html is complete?

mtwelker commented 2 years ago

I'm sorry I don't know enough HTML to troubleshoot this myself. Thanks so much for your help!

Yes, I did make sure all my <div> tags have matching </div> tags. The HTML above is only the portion for the first person.

When I added the fa() into the paste as follows:

  cat( paste0( '    <a class="item-link" href="', TWITTER, '" title="Twitter">' ) )
  cat( '\n' )  
  cat( paste0( '    <a>', fa( name="twitter" ), '</a>') )
  cat( '\n' )
  cat( '    </a>')

the output is slightly different (it's cut off below because it spanned multiple screens), but still problematic. (By the way, I commented out the remotes::install_github("mitchelloharawild/icons") line because it didn't seem to have any effect and am using the fontawesome package instead.) image

mtwelker commented 2 years ago

Maybe this will be more helpful. Here's the HTML that is generated by a test of my build_circles function:

build_circles("http://www.imperial.ac.uk/people/c.donnelly", "https://www.repidemicsconsortium.org/img/people/christl-donnelly.jpg", "Christl Donnelly", "This is my description", "https://github.com/jlgardy", "https://twitter.com/jennifergardy")

<div class="list-circles-item">
  <a href="http://www.imperial.ac.uk/people/c.donnelly">
  <img src="https://www.repidemicsconsortium.org/img/people/christl-donnelly.jpg" class="item-img"></a>

  <h4 class="item-name">Christl Donnelly</h4>
  <div class="item-desc">This is my description</div>

  <div class="item-links">

    <a class="item-link" href="http://www.imperial.ac.uk/people/c.donnelly" title="Website">
    <span class="fa fa-home"></span>
    </a>

    <a class="item-link" href="https://github.com/jlgardy" title="GitHub">
    <span class="fa fa-github"></span>
    </a>

    <a class="item-link" href="https://twitter.com/jennifergardy" title="Twitter">
    <a><svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></a>
    </a>

  </div>

</div>
mtwelker commented 2 years ago

And here are the four different permutations I've tried, one at a time (the commented out lines):

  cat( paste0( '    <a class="item-link" href="', TWITTER, '" title="Twitter">' ) )
  cat( '\n' )  
#  cat( paste0( '    ', icons::fontawesome("twitter") ) )
#  cat( paste0( '    <a>', icons::fontawesome("twitter"), '</a>') )
#  cat( paste0( '    ', fa( name="twitter" ) ) )
#  cat( paste0( '    <a>', fa( name="twitter", '</a>') ) )
  cat( '\n' )
  cat( '    </a>')

None of them generates the icon.

lecy commented 2 years ago

So here is some fun info on the differences between the two icons packages as a result of returning slightly different object types.

https://watts-college.github.io/cpp-527-fall-2021/labs/font-awesome-rmd-integration-test.html

The main take-away is that you should cast the icons as characters before adding them to your HTML template text.

Does that make sense?

Here is the main different between the two packages and stable ways to incorporate the <svg> tags into your templates (a lot of this has changed somewhat recently).

The fontawesome package wins because the hyperlink works properly. 

# FONTAWESOME PACKAGE: 
# - get icon svg object from font awesome 
# - implicitly recast as text when added to HTML tags 
# - cat() to export, need to include {r, results="asis"}
fa <- fontawesome::fa( name="github" )
x <-  paste0( '<a href="www.google.com">  \n\n', fa, '\n\n</a>' )
cat( x )
<a href="www.google.com">

<svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>

</a>

The tags come out fine for the icons package, but for some reason the hyperlink is still broken (see the link to the RMD doc above). 

# ICONS PACKAGE: 
# - convert icon svg to text 
# - then add to HTML tags 
# - cat() to export, need to include {r, results="asis"}
fa <- as.character( icons::fontawesome("twitter") )
x <-  paste0( "<a href='www.google.com'>  \n\n", fa, "\n\n</a>" )
cat( x )
<a href='www.google.com'>  

<svg viewBox="0 0 512 512" style="height:1em;position:relative;display:inline-block;top:.1em;" xmlns="http://www.w3.org/2000/svg">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>

</a>

Note the results="asis" requirement for both!

mtwelker commented 2 years ago

Thanks for figuring all that out! I read through it all and then updated my code as follows:

  1. In the same chunk where I created the data frame, I assigned the icons simpler names

    fa.github <- fontawesome::fa( name="github")
fa.twitter <- fontawesome::fa( name="twitter")
fa.home <- fontawesome::fa( name="home")

  2. As a quick test, I added a code chunk with results="asis" and the following:

    x <-  paste0( '<a href="https://www.google.com">  \n\n', fa.home, '\n\n</a>' )
cat( x )

    That generated the home icon in my output as a clickable link. So far, so good.

  3. In the chunk where I created the build_circles() function, I added results="asis" to the header and replaced the old code with the following:

    cat( paste0( '    <a class="item-link" href="', WEBSITE, '" title="Website"> \n\n', fa.home, '\n\n</a>' ) )
cat( '\n' )  
cat( '\n' )
cat( paste0( '    <a class="item-link" href="', GITHUB, '" title="GitHub"> \n\n', fa.github, '\n\n</a>' ) )
cat( '\n' )  
cat( '\n' )  
cat( paste0( '    <a class="item-link" href="', TWITTER, '" title="Twitter"> \n\n', fa.twitter, '\n\n</a>' ) )
cat( '\n' )  
cat( '\n' )

    Then I tested it:

    # Test it
build_circles("http://www.imperial.ac.uk/people/c.donnelly", "https://www.repidemicsconsortium.org/img/people/christl-donnelly.jpg", "Christl Donnelly", "This is my description", "https://github.com/jlgardy", "https://twitter.com/jennifergardy")

    The test produced the following, which is progress, but still not quite there: image You can't tell, because it's a screenshot, but while the photo is clickable, the icons are not.

I'm calling it a night. I'll look at it some more in the morning. Thanks for your help!

mtwelker commented 2 years ago

I can't believe it, but here's the very simple solution to my problem. I had too many spaces at the beginning of the line. This works: cat( paste0( '<a class="item-link" href="', WEBSITE, '" title="Website"> \n\n', fa.home, '\n\n</a>' ) )

image

But this doesn't: cat( paste0( ' <a class="item-link" href="', WEBSITE, '" title="Website"> \n\n', fa.home, '\n\n</a>' ) ) (It produces the errors in my post just above this one.)

mtwelker commented 2 years ago

And then after I posted my solution above (which I tested several times), I went back into my code and added the spaces back in to replicate the problem... and now I can't break my code. It produces the linked icons correctly no matter how many spaces I put at the beginning of the line. Truly, HTML is a mystery. @lecy

lecy commented 2 years ago

I was going to say, that's weird because I did not expect the spaces to matter.

But good that it works now regardless!

mtwelker commented 2 years ago

Yes! Thanks again for all your patient help!