You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've been tinkering away with this wonderful theme, trying to make it work for my fairly large existing Jekyll site. I've got a core test site using the theme working (https://github.com/steinea/garden) but I can't get Link Previews to work. Somewhere in the process of modifying the template I've broken something.
One of the big changes I made was to use all native CSS, since I'm not fluent in Sass, and this would allow me to more easily play around with values. I was able to get this working perfectly except for the styling for internal links inside the tags, which is where I started to notice the problem.
To style internal links with border #8b88e6 / bg #efefff, the site requires this snippet of CSS found in the link-previews.html file:
The latter two snippets work just fine for me, but for whatever reason Jekyll is not recognizing the content a.internal-link CSS. If I delete content, then all internal links (including nav and backlinks) get the styling, so the CSS class works... just not with the content tag specifier.
To get around this, I added a nav-link class that I can use to style the nav and backlinks in the default style:
This gets me the styling like the defaults in the theme, but it doesn't solve the broader problem of the Link Previews functionality itself. In the default template, Link Previews are added in the default.html layout:
{% include link-previews.html wrapperQuerySelector="content" %}
</body>
</html>
link-previews.html is in turn a file kept in the _includes directory, and which includes styles, some html, and some javascript (source). Since I had moved the internal-link styling to my style.css file, I also tried to move #tooltip-wrapper and #tooltip-wrapper:after to style.css. I then cut the link preview script out and moved it into its own js file, link-previews.js. Finally, I took the html (a div and an iframe) and inserted it into my default.html layout in the same place it appears in the original default.html layout. The result, instead of the inclusion above, is the following:
The #tooltip-wrapper and #tooltop-content selectors should be initialized by the link to style.css, and then the html and js call at the bottom replicate the inclusion from the default template.... as far as I can tell. But this isn't working for me.
As a last resort, I tried removing all of this and implementing Link Previews as they appear exactly in the template repository, using the include call to an unmodified link-previews.html file. This doesn't work either. This is why I believe something has broken further upstream, and why I've written what is now quite a long post. Any help from @maximevaillancourt or this forum is much appreciated!! 🙏
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
I've been tinkering away with this wonderful theme, trying to make it work for my fairly large existing Jekyll site. I've got a core test site using the theme working (https://github.com/steinea/garden) but I can't get Link Previews to work. Somewhere in the process of modifying the template I've broken something.
One of the big changes I made was to use all native CSS, since I'm not fluent in Sass, and this would allow me to more easily play around with values. I was able to get this working perfectly except for the styling for internal links inside the tags, which is where I started to notice the problem.
To style internal links with border
#8b88e6/ bg#efefff, the site requires this snippet of CSS found in thelink-previews.htmlfile:However, the "content" referred to here is the tag in the
note.htmllayout:Which is a CSS grid-template-area defined in the
_style.scssfile:The latter two snippets work just fine for me, but for whatever reason Jekyll is not recognizing the
content a.internal-linkCSS. If I deletecontent, then all internal links (including nav and backlinks) get the styling, so the CSS class works... just not with thecontenttag specifier.To get around this, I added a nav-link class that I can use to style the nav and backlinks in the default style:
This gets me the styling like the defaults in the theme, but it doesn't solve the broader problem of the Link Previews functionality itself. In the default template, Link Previews are added in the
default.htmllayout:link-previews.htmlis in turn a file kept in the_includesdirectory, and which includes styles, some html, and some javascript (source). Since I had moved the internal-link styling to mystyle.cssfile, I also tried to move#tooltip-wrapperand#tooltip-wrapper:aftertostyle.css. I then cut the link preview script out and moved it into its own js file,link-previews.js. Finally, I took the html (a div and an iframe) and inserted it into mydefault.htmllayout in the same place it appears in the originaldefault.htmllayout. The result, instead of the inclusion above, is the following:The
#tooltip-wrapperand#tooltop-contentselectors should be initialized by the link tostyle.css, and then the html and js call at the bottom replicate the inclusion from the default template.... as far as I can tell. But this isn't working for me.As a last resort, I tried removing all of this and implementing Link Previews as they appear exactly in the template repository, using the include call to an unmodified
link-previews.htmlfile. This doesn't work either. This is why I believe something has broken further upstream, and why I've written what is now quite a long post. Any help from @maximevaillancourt or this forum is much appreciated!! 🙏Beta Was this translation helpful? Give feedback.
All reactions