Question on lab icon/logo/preview

[sterding]

Hi, Vincent

Thank you always for your prompt reply and just the right answers to my questions.

I've successfully set up my lab website (www.donglab.org) with your help. However, there are few flaws which I wish you could help to make it 100% satisfactory.

1. When I search in Google, my website shows "Untitled" headline and also the wrong icon. See screenshot below. I've replaced the default icon with my own icon and it can display correctly in the tab. It's just not right in Google search result. Does that relate to Google?

2. Logo font
   I used my own logo.svg (link) and also set logo-text: false in the _config.yaml as I wanted to hide the title/subtitle and use my own text in the logo instead. It looks fine in my computer:
   

However, one of the reviewers told me that it looks weird in his browser (Chrome); The font style are changed and also the characters are cut on the right. See screenshot below. Do you know how this happened and how to fix it?

Thanks very much! The source code of the website is at https://github.com/sterding/donglab.org

Thanks,
-Xianjun

[vincerubinetti]

For the first error, I don't see that you're doing anything wrong. Going to your site shows the correct favicon in the browser tab:
Also, "for full functionality please enable javascript" exists no where in the template and never has.

Did you have some other type of site at donglab.org previously? This seems like some kind of caching issue with google. You should try resubmitting the url to Google Search Console to force google to re-index it. If that doesn't eventually fix it let me know. Fwiw I've just verified that google shows the correct icon/title/description for other sites using the template such as Greene Lab and Way Lab.

---

For the second issue, that has to do with your SVG. If you look at the source code of your logo, you'll see that the text uses <text> elements. This of course seems natural and right, but the problem with that is that it relies on fonts, which are not consistent across people's systems. Looking more at the source code, it looks like the font is supposed to be Didot-Bold. The other person probably doesn't have that font installed while you do.

Your SVG was generated in Illustrator. To fix this, there is a way to export such that your text is "rendered" down to pure <path> elements, which is fool proof because they're just shapes at that point.

[vincerubinetti]

Also I'm glad you've been able to be successful with the template. The site looks nice, and I like your header background. If it's okay with you, I'd like to add it to the template gallery via #97 .

[vincerubinetti]

Minor side note, on your homepage you probably should use the feature component instead of "float" components, for better alignment. You can still have the title text, paragraph, and button in each.

[sterding]

Thanks always, Vincent!
I've submitted request of re-indexing in Google Search Console. Will see. (BTW, thanks for letting me know the function. First time used it. You are right; I was using the default website from godaddy.com when I got the domain from there).

I also fixed the SVG issue by outlining the characters. (By the way, I want to learn how to add animation to the logo like you did for the Greenelab.org. Maybe you can point me some resources for learning. It's cool!)

I'm glad you mentioned the float vs. feature highlight components in my homepage. You open a can of worms :) I did test both; I had a hard time to set the width of image in the feature function. That's why I had to use figure component and wrap it into a float manner (I did the same way in the projects page). See my screenshot below if I use feature component:

The source code behind above screenshot is as

{% capture text %}
We study (1) **transcriptional regulation**, incl. discovery of regulatory elements in the human genome and how they contribute to gene expression; (2) **non-coding RNAs** (such as eRNA, circRNA, piRNA, miRNA) and their role in neurological diseases; and (3) **AI in precision medicine** by integrating multi-model data (e.g. omics, clinical, imaging, and wearable device) and the latest machine learning methods to predict disease diagnosis and progression. 
{% include button.html link="publication" text="See our publications" icon="fa-solid fa-arrow-right" %}
{% endcapture %}

{%
  include feature.html
  image="images/ncRNA.png"
  link="publication"
  title="Our Research"
  text=text
  flip=true
%}

[vincerubinetti]

Unfortunately I don't really have a good resource for animating SVGs, it comes from a long history of writing SVGs by hand and also knowing CSS animations. Mostly it comes down to turning things into strokes instead of fills if you want to "draw something out", animating transforms like translates and rotations, and things like that.

I do have this SVG tutorial for academics, but it goes over more foundational stuff and not so much animations.

---

Regarding the float vs. feature issue, that shouldn't be happening. I did a quick test using that exact image here, and it looks fine:

It looks like it's because you changed the styles of the component. (This is why I really need to see the repo source code to help with issues, because the problem could be in 100 different places).

Also, on your projects page, the use of float is appropriate, because you have very long text that you want to go underneath the image once it extends beyond it. On the homepage, you have less text, and using the feature component will keep them as separate columns always and keep them more aligned.