tcbutler320 / jekyll-theme-dumbarton

Dumbarton is a Jekyll Theme developed by Tyler Butler. The theme is designed for academics and features a simple home page with an about me section, a blog, and an interactive highlights section to describe publications, coursework, courses taught, and projects. UI design with Bootstrap and Animate CSS. Dumbarton is not compatible with Github Pages at this time.

Dumbarton

A simple Jekyll theme for academics
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• Table of Contents
• About
• Installation
• Setting Options
  • Base Settings
  • Site Settings
  • Blog Settings
  • Theme Settings
  • Help Settings
  • Jekyll Scholar Settings
  • CDN Settings
  • Meta Tag Settings
  • Favicon
• Thanks
  • Code
  • Images

About

Dumbarton is a Jekyll Theme developed by Tyler Butler. The theme is designed for academics and features a simple home page with an about me section, a blog, and an interactive highlights section to describe publications, coursework, courses taught, and projects. UI design with Bootstrap and Animate CSS.

A Note on Compatability

At this time, this theme is not compatible with GitHub pages because GitHub does not support jekyll-scholar.

Installation

Follow the following instructions to install the Dumbarton theme:

1. Clone the repo.

   git clone https://github.com/tcbutler320/Jekyll-Theme-Dumbarton.git
   cd Jekyll-Theme-Dumbarton

2. Use Bundler to install dependancies

   bundle install

3. Start the Jekyll development server

   bundle exec jekyll serve

Setting Options

There are many settings available to users to change how the theme looks. These settings can be changed in _config.yml. It's important to note that unlike previewing changes in other areas of the site, you must stop and restart the development server in order to see changes made in the config file.

Base Settings

Field	Description	Options
image	Used in metatag as sites link preview	https://example.com or /assets/path/to/image.png

Site Settings

Field	Description	Options
profile_image	Used on home page as authors profile image	https://example.com or /assets/path/to/image.png
social links, ex twitter	Used to generate links in the nav and footer	e.g. twitter: tbutler0x90

Blog Settings

Field	Description	Options
tags	Used to generate tags widget on blogs page, seperated by spaces	e.g. tags: post jekyll
comments	Enable comments on blog posts using gitalk. Not Currently Working	comments: false

Theme Settings

UI 2.0 Color Schemes 🌈
The recent Dumbarton release supports Color Schemes! To pick a pre-configured color theme, change the ui-theme option in _config.yml . To create a new theme add a new entry in _data/themes.yml

abyss:
    name: abyss
    nav-color: "#10292e"
    nav-text: "#149f98"
    title-font: "Noto Sans JP"
    link-font: "#272343"
    link-color: "#272343"
    link-font: "Poppins"
    font: "Poppins"
    font-color: "Black"
    social-color: "#CCCCCC"
    footer-social-color: "Black"
    button-color: "black"
    home-highlight-background: "#10292e"
    home-highlight-header-text: "#149f98"
    education-title-font: "Noto Sans JP"
    education-title-size: "18px"
    education-entry-font: "Noto Sans JP"
    education-entry-size: "18px"
    education-section-size: "15px"
    certification-title-font: "Noto Sans JP"
    certification-title-size: "18px"
    certification-entry-font: "Noto Sans JP"
    certification-entry-size: "18px"
    certification-section-size: "15px"
    highlights-tab-color: "White"
    projects-color: "Black"
    border-style: ""
    post-tag-size: "20px"
    post-title-size: "36px"
    post-author-size: "15px"
    post-font-weight: "700"
    default-button-color: ""

Field	Description	Options
nav-dIcon	Used as the nav bar drop down icon on mobile or small screen view	Select any fontawesome icon, e.g. "fas fa-caret-down"
animate	When enabled, home page animations will be turned on and used upon first loading the page	e.g. true, false
home_option	Used to change the section below the 'about me' on the home page. Note that only option education is currently working	e.g. education

Help Settings

Field	Description	Options
help_tips	Used for demo purposes only. When enabled, a popup occurs on the homepage detailing information about the theme	e.g. true, false

Jekyll Scholar Settings

Excerpt from Jekyll-Scholar

Jekyll-Scholar is for all the academic bloggers out there. It is a set of extensions to Jekyll, the awesome, blog aware, static site generator; it formats your bibliographies and reading lists for the web and gives your blog posts citation super-powers.

The Jekyll Scholar plugin is used on the publications page and the home page publications highlight section. Refer to the official documentation for setting options.

scholar:
  last_name: Dumbarton
  style: apa
  locale: en
  source: /_bibliography/
  bibliography: papers.bib
  bibliography_template: bib
  replace_strings: true
  join_strings: true
  details_dir: bibliography
  details_layout: bibtex.html
  details_link: 
  query: "@*"

CDN Settings

Field	Description	Options
font_awesome_id	Used to generate fontawesome icons in the navbar. Register free to get your id at https://fontawesome.com/	N/A

Meta Tag Settings

Several meta tag settings are optional. Refer to htmlhead.dev for a full list of options and explanations for the below configurations.

google-site-verification:                         #<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
yandex-verification:                              #<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
msvalidate:                                       # meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
alexaVerifyID:                                    # <meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
pinterestdomain_verify:                           #<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
norton-safeweb:                                   # <meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->
detectphone: yes                                  # yes or no. Disable automatic detection and formatting of possible phone numbers 
x-dns-prefetch-control: on                        # on or off. Completely opt out of DNS prefetching by setting to "off"
fbappid:                                          # Facebook OpenGraph 

Favicon

Site favicons are located at /assets/img/icons. You can use a Favicon Generator to create a new set of icons using any image you'd like. Simply create a package from the aboved linked generator and replace the icons folder.

Thanks

I borrowed concepts and assets from various other open source projects. A special thanks for everyone who contributed to Jekyll-Theme-Dumbarton.

Code

• Corey
  • Used as a concept for the blog layout v 2.0
• Masresha
  • Decision Making App: Used as a concept for the blog layout v 1.0

Images

Special thanks to the following individuals for their images

• Cole Keister

jekyll-theme-dumbarton's Issues

Make theme installable

Hi. I'd like to suggest making changes to the repo and to the docs to allow the theme to be installed as an external theme, in addition to the process of forking and installing as per the Install instructions.

Ghost borders are visible

Cards used to format page content have borders that are visible, these can be removed using border-0. Example below

div class="card h-100 border-0">
                    <span class="mx-auto" style="font-size: 100px;">
                        <i class="fab fa-js-square"></i>
                    </span>
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    </div>
                </div>

Add technology badges to projects page using bootstrap badges

Add technology badges to projects page using bootstrap badges. See below for an example.

{% if projects.tech %}
  <h6><mark><u>Technologies</u></mark></h6>
  {% for tech in projects.tech %}
  <span class="badge badge-secondary mr-1" style="background-color:#145374;">{{ tech }}</span>
  {% endfor %}
{% endif %}

Contact form does not work with Netlifty

Contact form does not work with Netlifty

Blog Pages not opening?

Describe the bug
I can see the posts, but can't open them.

To Reproduce
Steps to reproduce the behavior:

1. Go to Blog.
2. Click on any of them.
3. Doesn't open.

Expected behavior
Thought there would be some markdown generated blog post inside after clicking.

Slow Image Load Time

Slow Image Load Time

Upon opening /blog.html, images take a considerable time to load. Consider possibilities to optimize images and consider caching/preview image functions/plugins.

Potential Options
jekyll-speed

Sample Images in Demo do not Load when using VPN

When connected to VPN, sample images from placehold.it do not load. Suggested to load these locally

Footer color in `_config.yml` no longer supported since switch to transparent background

The option to set background color for the footer in _config.yml will no longer work since the footer.html in /includes is static. Suggested to add multiple footer options so users can decide to either use the background color style or the transparent style

Strange serving errors

After cloning the project, I tried a local run.

iruby:~/j/dumb$ bundle exec jekyll serve
Configuration file: /home/ubuntu/j/dumb/_config.yml
            Source: /home/ubuntu/j/dumb
       Destination: /home/ubuntu/j/dumb/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
       Jekyll Feed: Generating feed for posts
                    done in 0.803 seconds.
 Auto-regeneration: enabled for '/home/ubuntu/j/dumb'
    Server address: http://127.0.0.1:4000
  Server running... press ctrl-c to stop.
[2021-01-23 08:34:02] ERROR bad Request-Line `\x16\x03\x01\x02\x00\x01\x00\x01�\x03\x03\x1E�S�� �V\x03\x02J��JM\x1ASY.T���T��,���h� xh��VvR�������\x193��\ra�Ù��/[NE\x14|T\x00$\x13\x01\x13\x03\x13\x02�+�/̨̩�,�0�'.
[2021-01-23 08:34:02] ERROR bad Request-Line `\x16\x03\x01\x02\x00\x01\x00\x01�\x03\x03>k\x7F۰����ӌ��&#a��!z'.
[2021-01-23 08:34:02] ERROR bad Request-Line `\x16\x03\x01\x02\x00\x01\x00\x01�\x03\x03wv�\x01m��\x1A�/te:\x1F��\r�@�\x1E���\x13n�_�?�� �G<=�4�\x15'.

Every request of the browser pointing to the local port is producing at least one error.

This is strange

Problem builds with bibliography tag

GithubPages settings show
Your site is having problems building: The tag bibliography on line 80 in /_layouts/home.html is not a recognized Liquid tag. For more information, see https://docs.github.com/github/working-with-github-pages/troubleshooting-jekyll-build-errors-for-github-pages-sites#unknown-tag-error.

Footer is not sticky on certain pages

On the contact me, and publications pages the footer does not stick to the bottom of the viewport

algolia search bar not integrated

The search bar does not produce results because algolia has not be integrated yet.