angristan / casper-xyz Goto Github PK

View Code? Open in Web Editor NEW

36.0 4.0 17.0 7.82 MB

Custom Ghost theme for my blog, based on Casper

Home Page: https://angristan.xyz/my-custom-ghost-theme/

License: MIT License

CSS 55.92% JavaScript 11.01% HTML 33.06%

ghost theme

casper-xyz's Introduction

Casper-XYZ

This is the Ghost theme of angristan.xyz, based on Casper.

I talked about it on my blog:

For more information regarding how to use the theme with Ghost, please refer to the original README

Please credit me if you plan on reusing my theme. 🙂

I stopped using and maintaining it in may 2020. For the record, here is how it looks:

Fork

I keep my fork up-to-date with the upstream.

List of the modifications made in this fork:

Custom CSS
- Use the Open Sans Pro font
- Header image is the same width as the content, and the content doesn't step on it
- Use GitLab-like font for code blocks instead of ugly monospace
- Disable dark mode
- Isso (comments) style enhancements
- A lot more, check the comments!
Removed share buttons in the header
Replaced Feedly links by original RSS links
Host jQuery locally
GitHub, Mastodon, Linkedin, Instagram and Shaarli links and SVG icons
Use GitHub Actions for CI instead of Travis (test + deploy)
Replaced estimated reading time on posts list by the release date

Hardcoded stuff

I try to make the theme reusable as possible, but I still have to hardcode some stuff.

MAKE SURE TO UPDATE/REMOVE THEM IF YOU PLAN ON REUSING MY THEME!

External assets embedded

Here are the assets that I downloaded and included in the repo as I don't want to make call to 3rd-party services:

They are all under their respective license.

casper-xyz's People

Contributors

Stargazers

Watchers

Forkers

fossabot picus13 jessejusoli abhijithvijayan trollwut mikeb30 xenon92 maskys late-in-autumn santoshsrinivas79 gojennie mansoormajeed cloudcap10 shafqatalix codesquadhud archector gust4ng

casper-xyz's Issues

Add i18n

Since a few versions, Ghost themes supports internationalisation. Sadly, Casper hasn't been updated by the core team. Nevertheless, there is WorldCasper2, aka Casper made translatable into any language. It might be a good idea to rebase your fork on it and therefore support internationalisation.

Install Renovate

You can automatically update the dependencies in package.json and yarn.lock with Renovate.

You need to install the GitHub App Renovate and configure with renovate.json

I have used that one:
{ "enabled": true, "automerge": true, "rebaseWhen": "conflicted", "node": { "supportPolicy": ["lts_latest"] } }

Native image lazy loading

I have to do some research on this

Syntax highlighting

Ghost secondary navigation

Ghost has a built-in feature to create custom social links.

You still need to hard-code a couple of things but it may be a cleaner method, and easier to maintain.

I have tried it locally, it works well!

Instead of copy-pasting the SVG Sprite in default.hbs, I added a sprite.hbs inside partials/icons then included it in default.hbs with {{> "icons/sprite"}}.

It is not a real issue, just a mere suggestion 😸

P.S. you would need to merge that fix: TryGhost/Casper@8886056

casper.js error

This may be a minor issue.

I was checking my CORS settings for Isso with the Chrome console, and I noticed some other errors when I display a post. When I switch from Casper-XYZ to original Casper and refresh the page, this error disappears from the console.

I checked with a post on your blog, the very same issue exists.

casper.js?v=b438736406:1 jQuery.Deferred exception: $postContent.fitVids is not a function TypeError: $postContent.fitVids is not a function
at HTMLDocument. (https://angristan.xyz/2020/02/crashes-virtualbox-macos-intel-power-gadget/:325:22)
at e (https://angristan.xyz/assets/built/casper.js?v=b438736406:1:32381)
at t (https://angristan.xyz/assets/built/casper.js?v=b438736406:1:32705) undefined
S.Deferred.exceptionHook @ casper.js?v=b438736406:1
t @ casper.js?v=b438736406:1
setTimeout (async)
(anonymous) @ casper.js?v=b438736406:1
i @ casper.js?v=b438736406:1
fireWith @ casper.js?v=b438736406:1
fire @ casper.js?v=b438736406:1
i @ casper.js?v=b438736406:1
fireWith @ casper.js?v=b438736406:1
ready @ casper.js?v=b438736406:1
F @ casper.js?v=b438736406:1
casper.js?v=b438736406:1 Uncaught TypeError: $postContent.fitVids is not a function
at HTMLDocument. ((index):325)
at e (casper.js?v=b438736406:1)
at t (casper.js?v=b438736406:1)

angristan.xyz-1583095593417.log
angristan.xyz-1583095585277.log

Isso language to English

Just a little suggestion: I see that your Ghost blog is in English but the Isso section shows up in French.

If you want to match Isso language to Ghost’s, you can add this data attribute to your Isso client configuration:

data-isso-lang="{{@site.lang}}"