The latest version is 0.6.0, but it's still @v0.2.0 in the readme file.

If I use @v0.2.0, I will get jekyll 3.9.0 | Error: 404 - Not Found - Loading URL: https://codeload.github.com/pages-themes/primer/zip/v0.2.0 in a local test.

The current version of jekyll-theme-primer cannot render scientific and mathematical notations properly.

Example 1 :

Markdown code:

Summarizing the results

The rendered output by primer:

Example 2:

Markdown code:

Note - Scaling factor was introduced simply because the numbers generated were small in magnitude and were difficult to plot. Hence, each values were scaled up by a factor of $10^6$. So, apart from the time axis, if a particular value on any axis is read as $V_{plot}$ from the plot, the value should be scaled down as : $$V_{actual} = V_{plot} * 10^{-6}$$

The rendered output by primer:

In particular, I have this repository's readme which is rendered properly by the GitHub markdown parser. However, the rendered GitHub page using the primer theme is erroneous.

My _config.yml file is as follows:

theme: jekyll-theme-primer

i see this:

https://github.com/pages-themes/primer/blob/df56ee7/_sass/primer-markdown/lib/blob-csv.scss

however its not used here:

https://pages-themes.github.io/primer

what is the purpose of this file?

When using jekyll-theme-primer on markdown-based github pages with kramdown enabled, sizing an as the first image on a page works using a kramdown tag:

![logo](./images/logo.png){: height="50%" width="50%" }

However, adding the .align-center tag does not center (but the sizing still works).

![logo](./images/logo.png){: .align-center height="50%" width="50%" }

There does seem to be support for .align-center in the jekyll-theme-primer CSS, but there must be something subtle going on where it isn't happening.

Ideas?

By default the Premier theme adds an H1 link with site URL on top of page. I believe the code below is responsible for this behaviour:

      {% if site.title and site.title != page.title %}
      <h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
      {% endif %}

I would like to find out how can top-of page link can be switched off.

My initial idea is forking a repo and deleting the code above from template. I would like to learn how can add and extra custom variable in _config.yaml to make H1 with URL disappear.

I think the code will look like:

      {% if must_show and (if site.title and site.title != page.title %)}
      <h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
      {% endif %}

My qustion is how can I introduce must_show or similar in _config.yaml

So they don't appear via Jekyll Sitemap

For long posts, it would be nice if the theme supported generating a table of content from the markdown document.

Maybe with a toc: true in the frontmatter?

Problem description

Currently, users have the option to customize the footer text for their Jekyll repository by directly modifying the /_layouts/default.html file, which involves copying the entire contents of https://github.com/pages-themes/primer/blob/master/_layouts/default.html and making changes. This approach is intrusive as it hardcodes the footer and the whole layout.

Solution

We propose implementing a footer-custom.html file to offer a less invasive customisation method. This dedicated file would allow users to define their custom footer content while keeping the modification separate from the core layout structure.

Alternative solutions

Alternatively, we could introduce the footer_text configuration value to allow users to modify the footer text easily without overriding the entire layout.

Pull requests

• #85: Implements the footer-custom.html file.
• #83: Implements the footer_text configuration variable as an alternative solution.

It would be nice if the Primer theme could add support for favicons. Spefically, it would be nice if default.html could add a <link rel="icon"> tag to the page if a favicon option is specified in _config.yml.

I first considered whether the Favicon should be included as part of the Jekyll SEO tag. However, I don't think the plugin should offer support for favicons, especially given its focus on generating machine-readable metadata for search engines and social networks.

I'm happy to open a PR to add favicon support — it should be extremely straightforward — but I wanted to ask for opinions before I do so. Comments and suggestions would be appreciated 😃

github.io pages use this type markup for headers:

<h2 id="header-2">Header 2<a class="anchorjs-link " href="#header-2"
aria-label="Anchor" data-anchorjs-icon="" style="font: 1em/1 anchorjs-icons;
padding-left: 0.375em;"></a></h2>

https://pages-themes.github.io/primer

However github.com pages use this:

<h2><a id="user-content-usage" class="anchor" aria-hidden="true"
href="#usage"><svg class="octicon octicon-link" viewBox="0 0 16 16"
version="1.1" width="16" height="16" aria-hidden="true"><path
fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69
3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13
12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6
11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13
6z"></path></svg></a>Usage</h2>

https://github.com/pages-themes/primer

What is the reason for this discrepancy, and could github.io pages be made to
use the "octicon" header style for consistency?

I've noticed that two images in the Primer theme are currently not displaying correctly:

1. Primer thumbnail image at https://github.com/pages-themes/primer:

2. Documentation large image at https://pages-themes.github.io/primer/:

Pull Request #62 was initiated to address a similar issue for the README image, but the problem persists for the images mentioned above.

To resolve this, I have submitted Pull Request #86, which aims to fix the display issue for the large image on the GitHub Pages example site.

Please review and merge the changes if they meet the project's requirements. This should help ensure that all visuals in the Primer theme are displayed correctly.

The primer theme is not listed in the list of supported github pages themes, even though it works.

https://pages.github.com/themes

Also the version v0.2.0 listed in README is wrong and should be v0.6.0 since it generates the following error, also notified by someone else at #58 (comment). The version doesn't exist in releases either so users may get confused with the error.

Generating... 
      Theme: pages-themes/[email protected]
Theme source: /tmp/jekyll-remote-theme-20220623-2884100-8kxo2y
Remote Theme: Using theme pages-themes/primer
Remote Theme: Downloading https://codeload.github.com/pages-themes/primer/zip/v0.2.0 to /tmp/jekyll-remote-theme-20220623-2884100-4y1sar.zip
jekyll 3.9.2 | Error:  404 - Not Found - Loading URL: https://codeload.github.com/pages-themes/primer/zip/v0.2.0

I should probably put this issue in the repository of the github help documentation, but I'm not sure where that is.

Just wanted to report that it took me about an hour of intensive searching and trial-and-error to realize that this is the theme that Github Pages uses if you don't put a theme in your _config.yml. I think that should be more clearly documented in the Github Pages documentation. I love the simplicity of the theme but wanted to make just one tiny tweak to the default layout, and it took me a very long time to figure out that this was the default.html file I needed to find!

The user @carlsonsantana validate your site template "https://pages-themes.github.io/primer/" and found these accessibility errors:

• Page https://pages-themes.github.io/primer/:
  • Issue a25fa5a6-42d1-485b-aeec-14cb7d83ce0a:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1.13:1. Recommendation: change text colour to #feffff.
    • Selector: html > body > div > table > tbody > tr:nth-child(4) > td:nth-child(2) > code
    • Context: <code class="highlighter-rouge">zoute</code>
  • Issue 1d600de8-15e6-4c5c-8955-d986904e54d8:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1.13:1. Recommendation: change text colour to #feffff.
    • Selector: html > body > div > table > tbody > tr:nth-child(3) > td:nth-child(2) > code
    • Context: <code class="highlighter-rouge">oreos</code>
  • Issue 3f2b00ff-ba96-46c8-9730-46d534b1f98e:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.48:1. Recommendation: change background to #f7f9fb.
    • Selector: html > body > div > div:nth-child(12) > div > pre > code > span:nth-child(4)
    • Context: <span class="no">Dependencies</span>
  • Issue e748a7fc-45e7-4bd6-8e16-6b39193bf048:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.48:1. Recommendation: change background to #f7f9fb.
    • Selector: html > body > div > div:nth-child(12) > div > pre > code > span:nth-child(2)
    • Context: <span class="no">GitHubPages</span>
  • Issue c1b677b8-89fc-489b-b0d4-95eb21ab1aec:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.71:1. Recommendation: change text colour to #131302.
    • Selector: html > body > div > div:nth-child(12) > div > pre > code > span:nth-child(1)
    • Context: <span class="c1"># Ruby code with syntax highlig...</span>
  • Issue 3a23defe-5fcc-4d23-a7b8-2faa7fd361d0:
    • Type: Error
    • Code: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
    • Message: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.71:1. Recommendation: change text colour to #131302.
    • Selector: html > body > div > div:nth-child(11) > div > pre > code > span:nth-child(1)
    • Context: <span class="c1">// Javascript code with syntax ...</span>

You can check these accessibility errors using pa11y.
You can view the full validation results in our website.

How do you change the fonts in the primer theme? I've tried to follow the instructions, i.e., to create an assets/css/style.scss file and add:

---
---

@import "{{ site.theme }}";
body {
  font-family: "Times New Roman", Times, serif;
}

However, I don't see any changes in the font used on my github page. What am I doing wrong? Or is there a simpler way to do this? Thanks,

Is there a way to add RTL support for pages using this theme? Or any theme for that matter?

The README.md lists pages-themes/[email protected] and it results in error:

      Remote Theme: Downloading https://codeload.github.com/pages-themes/primer/zip/v0.2.0 to /tmp/jekyll-remote-theme-20220807-6-biq7rw.zip
github-pages 227 | Error:  404 - Not Found - Loading URL: https://codeload.github.com/pages-themes/primer/zip/v0.2.0

I understand that the aim of this theme is to not get in the way, but the common workflow for building a new site (or changing themes in an existing one) is beginning to drive me mad - it's the worst thing about Jekyll right now. This is because of the inconsistency in layout conventions.

It would be great if this theme came with layouts that match the default expectations of a new install. This way, when switching from minima, it will be clear that the theme is working and ready to customise.

For example, if there was a "home" layout that just imported the (really nice) default layout, and other exactly the same called "page". Then a new install will work out of the box.

Is the title tag added as a part of Jekyll own work, not through the theme layout? What code is reposnsible for <!-- Begin Jekyll SEO tag v2.6.1 -->1

This would help better solve #40

<!-- Begin Jekyll SEO tag v2.6.1 -->
<title>Custom header 1</title>
<meta name="generator" content="Jekyll v3.9.0" />
<meta property="og:title" content="Custom header 1" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Where does a short description of my site’s purpose go?" />
<meta property="og:description" content="Where does a short description of my site’s purpose go?" />
<link rel="canonical" href="https://epogrebnyak.github.io/never-blog-again/" />
<meta property="og:url" content="https://epogrebnyak.github.io/never-blog-again/" />
<script type="application/ld+json">
{"@type":"WebSite","headline":"Custom header 1","url":"https://epogrebnyak.github.io/never-blog-again/","description":"Where does a short description of my site’s purpose go?","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->

https://github.com/wanghenshui/cppweeklynews/runs/3143851548

any one seen this? im confused

Thanks for the awesome theme!

Is there anyway we could add dark mode support now that Primer css supports both light and dark themes?

in my own jekyll site, i use the following code to help build a navigation:

{% assign sorted_pages = site.pages | sort:"order" %}

when i iterate over this collection, i surprisingly find an object in sorted_pages that looks like this:

  {
    "content":"@import \"jekyll-theme-primer\";\n",
    "dir":"/assets/css/",
    "name":"style.scss",
    "path":"assets/css/style.scss",
    "url":"/assets/css/style.css"
   }

it seems that the frontmatter in assets/css/style.scss in this plugin causes jekyll to interpret that file as a page in my site, which is polluting my navigation. this should not be happening. is there any reason for the empty frontmatter in that file?

this is quite the annoyance because this plugin comes with the default github-pages gem. the workaround is i could use a filter on the collection to exclude this page, but that's less clean.

{% assign sorted_pages = site.pages | where_exp:"page", "page.name != 'style.scss'" | sort:"order" %}

Currently there is this code:

<html lang="{{ page.lang | default: site.lang | default: "en-US" }}">

This causes an error when rendering the page in strict mode. In the config use:

# Cause a build to fail if there is a YAML syntax error in a page's front matter.
strict_front_matter: true

# https://jekyllrb.com/docs/configuration/liquid/
liquid:
  error_mode: strict
  strict_variables: true
  strict_filters: true

Please update this to use the safe checkers like: site contains "title".

And of course upstream they should also have default suppress these errors. But whether that is implemented or not, the GitHub Pages default theme should work in strict mode.

the default a style contains "text-decoration: none"

In this case it fails WCAG 2.0, but more importantly, people with vision issues cannot discern between links within body text.

Before:

Before without Color:

After:

After without Color:

Hi team!

I would like to propose an option to remove the heading which is created by default in this theme (which is the default theme for GitHub Pages).

The heading I mean is the "Jekyll Theme Primer" which is a "Heading 1" link at the top of the landing page: https://pages-themes.github.io/primer/. Note that this heading does not show up in index.md because it is created automatically by this theme. I'd like to be able to disable this heading.

motivation

Users may wish to create their own custom first heading, so an easy way to remove the default one may be useful, especially if the repo name is not pretty (but it would show up on the Pages site by default).

It may look cleaner to have an index.md file which reflects 100% of the content that GitHub Pages renders by default.

Further, in older versions of Github, it seems that this heading was not created by default in this Pages style.

Solutions

Currently, a user can remove the heading piece from _layouts/default.html as instructed in README

In addition, perhaps it would be possible to easily disable this heading with a configuration change? Something like this in _config.yml:

title: false or title: nil

however, neither seems to delete the title. Truthy/Falsy Reference

EDIT. Reference stack overflow issue and another

I found the following W3C validation errors in assets/css/style.css:

ERROR; URI: file://localhost/TextArea; line 1: 
        
                                “break-all” is not a “overflow-wrap” value : 
                            
ERROR; URI: file://localhost/TextArea; line 1: 
        
                                Value Error :  max-width (nullvisudet.html#propdef-max-width)
        
                                Too many values or values are not recognized : 
                            

Interested in fixing them? Just clone this repository locally, make the suggested change, and run script/cibuild to confirm it's been fixed. After that, you can submit a pull request to get your change merged. Feel free to drop questions here if you run into any problems.

The instructions say that /assets/css/style.scss should start with the following:

---
---

@import "{{ site.theme }}";

This build fine locally. However, this leads to the following error on a github pages build:

Your site is having problems building: Your SCSS file assets/css/style.scss has an error on line 1: File to import not found or unreadable: primer. Load path: /tmp/jekyll-remote-theme-20210722-6-at4n5p/_sass. For more information, see https://docs.github.com/github/working-with-github-pages/troubleshooting-jekyll-build-errors-for-github-pages-sites#invalid-sass-or-scss.

It works when I hard-code the sass to say:

---
---
@import "jekyll-theme-primer";