Code Monkey home page Code Monkey logo

source's Introduction

Source

The default theme for Ghost. This is the latest development version of Source! If you're just looking to download the latest release, head over to the releases page.

 

First time using a Ghost theme?

Ghost uses a simple templating language called Handlebars for its themes.

This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full theme API documentation which explains every possible Handlebars helper and template.

The main files are:

  • default.hbs - The parent template file, which includes your global header/footer
  • home.hbs - The homepage
  • index.hbs - The main template to generate a list of posts
  • post.hbs - The template used to render individual posts
  • page.hbs - Used for individual pages
  • tag.hbs - Used for tag archives, eg. "all posts tagged with news"
  • author.hbs - Used for author archives, eg. "all posts written by Jamie"

One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example:

  • page-about.hbs - Custom template for an /about/ page
  • tag-news.hbs - Custom template for /tag/news/ archive
  • author-ali.hbs - Custom template for /author/ali/ archive

Development

Source styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node, Yarn and Gulp installed globally. After that, from the theme's root directory:

# install dependencies
yarn install

# run development server
yarn dev

Now you can edit /assets/css/ files, which will be compiled to /assets/built/ automatically.

The zip Gulp task packages the theme files into dist/<theme-name>.zip, which you can then upload to your site.

# create .zip file
yarn zip

PostCSS Features Used

  • Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.

SVG Icons

Source uses inline SVG icons, included via Handlebars partials. You can find all icons inside /partials/icons. To use an icon just include the name of the relevant file, eg. To include the SVG icon in /partials/icons/rss.hbs - use {{> "icons/rss"}}.

You can add your own SVG icons in the same manner.

Copyright & License

Copyright (c) 2013-2023 Ghost Foundation - Released under the MIT license.

source's People

Contributors

daniellockyer avatar minimaluminium avatar peterzimon avatar renovate[bot] avatar sanne-san avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

source's Issues

Picture not shown?

Hello, there seems to be an issue with one of the contents on the homepage. I noticed that an image is not appearing in the designated section. I checked the demo site, and the same problem persists there as well. I attached a screenshot of the selected area where the image should be, but it's not visible. Is this an error on my part or is it a known issue?

Ekran görüntüsü 2023-12-01 234709

Pagination doesn't work when Ghost URL is set to a subpath

I have configured my Ghost blog to be hosted on a subpath such as https://example.com/blog/.

However with the Source theme the link to see the next page of posts is linked as https://example.com/page/2

Whereas I believe it should link to as https://example.com/blog/page/2

Looks like the culprit is this line:

<a href="/page/2">See all {{> "icons/arrow"}}</a>

I've solved it for now by using the following Code injection in my admin panel:

<script>
  document.addEventListener('DOMContentLoaded', function () {
      var currentUrl = window.location.href; // Get current URL
      var appendUrl = "page/2"; 
      var newUrl = currentUrl + appendUrl;
      var link = document.querySelector('.gh-more a');
  
      link.href = newUrl; // Set the href attribute
  });
</script>

Improve accessibility rating

Hi,

Not really an issue but since I'm not a developer and don't know how to create/submit PRs, I'm dropping it here.

I've made a couple of changes to improve the accessibility rating on Google PageSpeed Insights that maybe you could look into implementing:

added title="Subscribe" aria-label="Subscribe" in email-subscription.hbs
<button class="gh-button" type="submit" title="Subscribe" aria-label="Subscribe">

added title="Menu" aria-label="Menu" in navigation.hbs
<button class="gh-burger gh-icon-button" title="Menu" aria-label="Menu">

These basically improved the accessibility rating for my website homepage to 100%!
I will look to do the same in other files that use <button> tags...
Wanted to contribute to Ghost and improve even more the amazing Source theme :)

Best,
Pedro

Navigation scroll issue on mobile

When scrolling the fixed navigation element on mobile, the scroll event is propagated to the rest of the page once the bottom/top is reached.

Ideally, this should not happen. The page below should retain the position that it had when the navigation menu was opened, and it should not be accidentally scrolled as a result of the scrolling on the navigation.

See the problem in action:

Peek 2023-10-16 15-56

I was trying to fix this myself, but there are multiple ways to to tackle this problem, so I thought it would be better to open an issue first, to discuss which would be the preferable way to fix it.

Bug: Tag pages missing pagination

Hey all, thanks for the awesome theme.

I just switched to it and it looks pretty nice.

Unfortunately, I discovered that tag pages are showing 16 articles, only, and have no way to show older articles. Therefore, people cannot see more than 16 articles per tag. You can find an example here: https://blog.while-true-do.io/tag/automation/

I am using source 1.0.0 on Ghost 5.67.0.

I hope this can be hammered out quickly. In case I can support you with the same, please don't hesitate to reach out/ping me.

The "Latest" header on the homepage

I notice that my 5th newest blog article and older are listed under the "Latest" section below the "Subscribe" section on the home page. I am using the "Highlight" header style. I am running Ghost v5.70.1, and Source v1.1.0.

image

Is this "Latest" header referring to the items below it, or above it?

WebP links being generated, no webp in content

This may be something very weird with my storage adapter, but when using source I have my images generated with a formats/webp path but my content directory has no formats directory and no .webp

The articles (and images) were created while using source. The srcsets for the other formats are generated.

Pagination missing on front page

The Source theme seems to be missing any use of the {{pagination}} helper on the front page. Because it's making a {{get}} request, it's not possible to navigate to /page/2 and beyond.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

  • WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

npm
package.json
  • @tryghost/release-utils 0.8.1
  • autoprefixer 10.4.7
  • beeper 2.1.0
  • cssnano 5.1.12
  • gscan 4.39.4
  • gulp 4.0.2
  • gulp-concat 2.6.1
  • gulp-livereload 4.0.2
  • gulp-postcss 9.0.1
  • gulp-uglify 3.0.2
  • gulp-zip 5.1.0
  • inquirer 8.2.4
  • postcss 8.2.13
  • postcss-easy-import 4.0.0
  • pump 3.0.0

  • Check this box to trigger a request for Renovate to run again on this repository

Custom routes.yaml filters ignored

After switching to the new Source theme, the filters I've set up in my custom routes.yaml are no longer filtering posts correctly. Others in the forums also seem to have this issue: https://forum.ghost.org/t/the-source-theme-doesnt-show-posts-on-websites-with-custom-routes/41741/15

I have my routes.yaml set up to hide posts with certain tags from my homepage, which with Source no longer has any filtering. I also found that the collection pages I've set up for specific tags are only filtering up to the lazy load. The next set of posts loaded have no filtering.

EDIT: Now that I'm looking more closely, the lazy load on collection pages is loading the whole feed over again, repeating the posts already loaded.

Translations

Given the portal is getting translations now and this is the new default theme: is Source accepting translations pull-requests? I'd love to see german translation and I'd like to work on it.

Add a background colour to code elements

I love the Source theme, but I noticed that <code></code> and <pre><code></code></pre> elements have no background colour, which is common with other themes. My website has lots of code examples within posts, and using the Source theme makes them hard to read.

This is what code elements currently look like using Source:

image

This is what I would expect code elements to look similar to (please excuse shonky editing):

image

New issues after #10

With the fix of #10 2 new issues were introduced.

First, the new "endless scrolling" prevents that the footer can be seen properly. This might be an oversight, but the footer is no longer visible and therefore the secondary links are unavailable.

Second, when scrolling below the initial content (the moment when endless scrolling starts) the same content will be displayed again. Therefore, there is a lot of duplication when scrolling down.

Upload error: package.json

Screenshot 2023-10-06 at 14 04 30

When uploading the theme it is showing an error in the package.json:
'package.json property "config.custom" contains too many settings'

Issue with table wrapper in main.js

Hi there,

I ran into a problem when I included more than four tables in a single blog post; they all appeared clustered together. It was quite odd, but I believe I've discovered a workaround.

At the end of the file changed:

main.js:

/* Responsive HTML table */
(function () {
    const tables = document.querySelectorAll('.gh-content > table:not(.gist table)');
    const wrapper = document.createElement('div');
    wrapper.className = 'gh-table';

    tables.forEach(function (table) {
        table.parentNode.insertBefore(wrapper, table);
        wrapper.appendChild(table);
    });
})();

TO:

/* Responsive HTML table */
(function () {
    const tables = document.querySelectorAll('.gh-content > table:not(.gist table)');

    tables.forEach(function (table) {
        const wrapper = document.createElement('div');
        wrapper.className = 'gh-table';
        table.parentNode.insertBefore(wrapper, table);
        wrapper.appendChild(table);
    });
})();

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.