I've had my blog on github for a Jekyll. Out of nowhere, when I drill into a post, the formatting of the post is not right.
Any suggestions on what to tweak to get it back to it's defaults?
https://dfinke.github.io/
https://github.com/dfinke/dfinke.github.io
Your CSS is not loading.
AND your main.js isn't loading either, and it is being called twice, and it is being called from the posts directoy like the css above.
The problem appears to be paths.
For example, your path to the css is currently the individual post's path:
https://dfinke.github.io/2017/Microsoft-PowerShell-Yaml-and-VSTS/css/main.css
Whereas I think you want it from root (looking at your files):
https://dfinke.github.io/css/main.css
Your head.html include states this:
<link rel="stylesheet" href="{{ "css/main.css" | prepend: site.baseurl }}">
I note your _config sets site url as 'https://dfinke.github.io' and baseurl as '/'.
So that seems right to me from Jekyll perspective.
Something appears to be changing the url parts on your assets' paths.
I note you seem to have .ps1 powershell scripts.
I don't know powershell scripting, but looking through New-BlogPost.ps1 it does seem to be dealing with paths.
Perhaps github now runs powershell scripts, and that is now changing your paths somehow?
Hope that helps.
PS - If it is an issue caused by your powershell scripting, you may want to update the question title to reflect that for future readers.
Related
None of the bind examples in the documentation work - https://fancyapps.com/docs/ui/fancybox/api
The standard constructor examples work great, but anything that requires binding does not work. There is no error, but the gallery lightbox doesn't work - clicking an image just opens the image as a link. Here is the exact example code with markup:
<div id="gallery">
<a href="https://lipsum.app/id/1/800x600">
<img src="https://lipsum.app/id/1/300x225" />
</a>
<a href="https://lipsum.app/id/2/800x600">
<img src="https://lipsum.app/id/2/300x225" />
</a>
</div>
<script>
Fancybox.bind("#gallery a", {
on : {
ready : (fancybox) => {
console.log(`fancybox #${fancybox.id} is ready!`);
}
}
});
</script>
That console log never fires.
I'm importing FancyBox like this:
import { Fancybox } from '#fancyapps/ui';
I've tried searching around, but very little info on FancyBox 4 other than official docs and it's frustrating as they don't work. I've tried some of the examples in showcase also, and the same deal. If it's binding, it won't work and no errors are shown. Anyone have any insight into this?
Thanks,
Tom
It works perfectly fine. Since you did not provide a live demo (or at least a full HTML code), then it just not possible to help you.
It is so frustrating to read comments like this, no demo, no useful info, nothing. Maybe you did not include JS file, I do not know ... I would love to help you and to improve documentation, but, sorry, your comment is not helpful at all.
Fancybox is designed to be as easy to use as possible, all you have to do is:
Include two files - CSS and JS file (to get Fancybox object).
Add data-fancybox attribute to your links (or to call Fancybox.bind("YOUR_SELECTOR");)
Thats it! It can not be any simpler.
Sorry, it should have been a much clearer question. I didn't include a demo because it's a big wordpress site in production. It was giving me no useful feedback or errors or anything like that. I build websites day in and day out, so assumed it wasn't just me making some incredibly stupid mistake like a typo or something. I genuinely spent a lot of time on this, it wasn't me being lazy and just posting on stack overflow straight away...
It was me being stupid though.
In the process of making a demo to show you, I found the problem and (as you already know!) it's my mistake. I was able to make fancybox work by instantiating it straight away in my js, but binding (and therefore galleries etc) was not working.
The reason was the javascript was included in the head of the html document before the markup instead of at the bottom of the html document before the closing body. There was nothing for the js to bind to when it was executed.
I wouldn't normally include javascript in the head either but it's a wordpress project and because of some plugin, it's required there. Fancybox 3 worked with js in the head, but I suspect it might be jquery being more forgiving than native js with it's binding to DOM elements?
So, yes, entirely my fault. I was following the steps of the installation and startup guide almost exactly, but that inclusion of the js file in a slightly unusual (or bad practice at least) place was what caused all the issues.
I'm having a problem with loading work section, on my web site. This is the repo: https://github.com/Vukasin90/test/blob/gh-pages/_includes/work.html
and this is the we site: https://vukasin90.github.io/test/
when you click thumbnails, it should open a bounch of images and paragraphs, basically a html document.
When I run it locally, it works just fine, but on gh-pages it wont load (there's only a spinner animation, which I've put to show when loading is slow).
I'm guessing that it can't be done this way on GitHub, but I don't have any idea how to go around this problem. Or maybe I made mistake with links, or something. I really don't know
I think this is an issue with your js, not Jekyll.
Jquery is requesting: https://vukasin90.github.io/work/work-1.html
Instead of https://vukasin90.github.io/test/work/work-1.html
There are other js errors too - other 404s and blocked resources.
If you want to reference full paths in jekyll, you should use site.url and site.baseurl with something like:
..data-folder="{{ site.url|append: site.baseurl }}/work/work-1" style="background-image: url({{ site.url|append: site.baseurl }}/Assets/img/work/proj-1/thumb.jpg"..)
Have fun.
EDIT:
Amended above to show on page changes better.
Alternately, if you want to fix keeping your inline relative references, then change these:
...data-folder="../work/work-1"...
To:
...data-folder="../test/work/work-1"...
However, keep in mind this path reference issue between Jekyll and your js could crop up in other ways. So id recommend using full path references throughout or change your js setup to include the baseurl.
I have a Gist that I would like to embed within a GitHub issue. I have tried pasting the "Embed" <script> markup shown on the Gist page, which simply adds the escaped HTML to the issue comment.
This seems a rather obvious feature to not be supported. What am I missing?
Because embedding requires a <script> tag which gets sanitized and removed to prevent abuse this probably won't ever work in GitHub Issues.
Sorry if maybe I'm asking something very basic. I'm having some problems when deploying this repository which is not under a User or Organization Github account. When I deploy to localhost I don't have any problems at all and the blog theme runs perfectly. But this is not the case when I deploy to this Project page. You can see the publication result here.
Any tips?
Many thanks for your help!
In your index.html page you have given the path to your css, js and images from the site root eg: /images/logo.png, but your files are inside the blog folder. Change the paths in your index.html page to document-relative paths like this: images/logo.png.
Saravana is right about the inconsistency of your URLs, however I would suggest the following solution which I believe is a bit cleaner.
There is a baseurl variable that can be set in your _config.yml file. This can then be referenced in your layouts and other files with the {{ site.baseurl }} liquid templating syntax.
You can then do something like the following to get consistency across development and deployment:
<img src="{{ site.baseurl }}/images/logo.png">
The other benefit here is that if for some reason you need to update the base URL, you can do it in one place (the _config.yml) rather than having to go through and modify every URL in your site.
Read more about Jekyll configuration here.
Is it possible to change Github's gists default styles programmatically or through some interface?
I don't know of any API or interface influencing the way gist are presented on GitHub.
If you include those gist in your blog, then of course some CSS local changes can make your gist different, as illustrated by this blog post, this CSS or this CSS.
However, this doesn't concern syntax highlighting.
You can only share those Gist with a custom stylesheet through, for instance Octopress, using a Sass port of Solarized syntax highlighting.
But again, that won't change those gist presentation on GitHub itself.
May i am late at party, but you can create your own CSS by editing the default one it with the color you want. I have done something same but instead of pasting all the css in the blog i prefer to link it
See if this works for you
<link href="https://cdn.rawgit.com/Killercodes/281792c423a4fe5544d9a8d36a4430f2/raw/36c2eb3e0c44133880485a143717bda9d180f2c1/GistDarkCode.css" rel="stylesheet" type="text/css">
You can also find it here: GistDarkCode.css I made it look all black
Edit:
I figured out that the markdown (*.md) documents are where still white this has been fixed in this new version 0.3.0 also the font size is increased to 14px to make it look bigger, try the new one below
<link href="https://cdn.rawgit.com/Killercodes/281792c423a4fe5544d9a8d36a4430f2/raw/42e5b91a60ea5e25b7bb42c0a315d9e740c92f0/GistDarkCode.css" rel="stylesheet" type="text/css">
For embedded Gists there is Pretty Gist
Pretty Gist is a jQuery plugin to make prettier and more functional embedded Github Gists.
Github repo
Yes there are different properties to control the default css of GitHub gist. I did various customizations in this project and made sure I define the properties after the embedded js - https://github.com/tebelorg/TA.Gist (PHP template that displays your GitHub gists as blog posts)