Code Monkey home page Code Monkey logo

type's Introduction

Type: Minimal and Clean Free Jekyll Theme

Type: Minimal and Clean Free Jekyll Theme

Configurations

Type theme comes with different customizations in the _config.yml file:

title:       Type
email:       ''
description: ''
baseurl:     '' # The subpath of your site, e.g. /blog
url:         '' # The base hostname & protocol for your site
twitter:     ''
github:      ''
instagram:   ''
facebook:    ''

markdown:  kramdown
permalink: pretty
paginate:  60

sass:
  style: compressed

gems:
  - jekyll-paginate
  - jekyll/tagging

include:
  - _pages

exclude:
  - vendor
  - Gemfile
  - Gemfile.lock

# Tags
tag_page_dir:         tag
tag_page_layout:      tag_page
tag_permalink_style:  pretty

# Pages path
defaults:
  - scope:
      path: '_pages'
    values:
      permalink: /:basename:output_ext

Deployment

To run the theme locally, navigate to the theme directory and run bundle install to install the dependencies, then run jekyll serve to start the Jekyll server.

I would recommend checking the Deployment Methods page on Jekyll website.

Posts

To create a new post, you can create a new markdown file inside the _posts directory by following the recommended file structure.

The following is a post file with different configurations you can add as an example:

---
layout: post
title: Welcome to Jekyll!
featured: true
tags: [frontpage, jekyll, blog]
image: '/images/welcome.jpg'
---

You can set the author, featured or not, tags, and the post image.

The featured key is to mark the post as a featured post, this will add a simple star icon (*) to the postcard.

To keep things more organized, add post images to /images/posts directory, and add page images to /images/pages directory.

To create a draft post, create the post file under the _drafts directory, and you can find more information at Working with Drafts.

For tags, try to not add space between two words, for example, Ruby on Rails, could be something like (ruby-on-rails, Ruby_on_Rails, or Ruby-on-Rails).

Note that tags are not working with GitHub Pages, that's because the used jekyll-tagging plugin is not whitelisted by GitHub.

To make this work, I use Netlify.com for deployment.

Pages

To create a new page, just create a new markdown file inside the _pages directory.

The following is the about.md file that you can find as an example included in the theme with the configurations you can set.

---
layout: page
title: About
image: '/images/pages/about.jpeg'
---

Things you can change are: title and image path.

Navigation

The navigation on the sidebar will automatically include all the links to the pages you have created.

Disqus Comments

Open _includes/disqus.html file, and change the aspirethemes-demos value on line 12 with your Disqus account shortname.

s.src = '//aspirethemes-demo.disqus.com/embed.js';

So, if your Disqus shortname is exampleone, the final code above should be

s.src = '//exampleone.disqus.com/embed.js';

That's all you need to setup Disqus from the theme side. If you get any issue regarding that comments are unable to load. First, make sure you have registered your website with Disqus (Step 1)

And also check Disqus troubleshooting guide if you still have issues.

Social Media Links

Social media links included in _includes/footer.html file.

The theme is using Evil Icons, which contains very simple and clean icons. The following is a list of the social media icons to use:

Twitter

<span data-icon='ei-sc-twitter' data-size='s'></span>

Facebook

<span data-icon='ei-sc-facebook' data-size='s'></span>

Instagram

<span data-icon='ei-sc-instagram' data-size='s'></span>

Pinterest

<span data-icon='ei-sc-pinterest' data-size='s'></span>

Vimeo

<span data-icon='ei-sc-vimeo' data-size='s'></span>

Google Plus

<span data-icon='ei-sc-google-plus' data-size='s'></span>

SoundCloud

<span data-icon='ei-sc-soundcloud' data-size='s'></span>

Tumblr

<span data-icon='ei-sc-tumblr' data-size='s'></span>

Youtube

<span data-icon='ei-sc-youtube' data-size='s'></span>

Update favicon

You can find the current favicon (favicon.ico) inside the theme root directory, just replace it with your new favicon.

Aspire Themes

๐Ÿ‘‰ Visit aspirethemes.com for more Jekyll, Ghost, and WordPress themes.

Aspire Themes


type's People

Contributors

aggvinay avatar ahmadajmi avatar dependabot[bot] avatar gingerbeardman avatar resynth1943 avatar stigvoss 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

type's Issues

How to create an alternate blog (listing) page

Thank you for this beautiful template.

I am trying to create another page (that can be accessed from the sidebar) that also has a list view of the posts (I want to create a page with a list of podcast episodes, apart from the blog posts).

To start with, I tried to replicate the home page (blog list page), but was unable to do so.

I created a page named podcast.md in the _pages directory, and used the following code -

---
layout: default
title: Podcast
---

<div class='o-wrapper'>
  <div class='o-grid'>
    {% for post in paginator.posts %}
      {% include post-card.liquid %}
    {% endfor %}
  </div>

  <div class='o-grid'>
    {% include pagination.html %}
  </div>
</div>

But the rendered page (accessed from the sidebar) is empty.

Could someone please help me with what I am doing wrong?

Thank you

Long code lines expands text outside view on mobile.

I am experiencing issues where long code lines in a code block can cause mobile browsers to overflow without scrollbars either in the view or the code block.

An example would be a code block like below:

try
{
    tokenSource.CancelAfter(requestTimeout);
}

I am attempted to fix the issue, but unsuccessfully.

Add custom links to navigation bar

Hi,

this is a great theme -- thanks a lot for sharing! I have one question about the navigation bar. I understand that a link is generated for each page automatically... My question is how can you add a custom link to the nav bar?

Thanks!

Long code lines expands text outside view on mobile Safari

I am experiencing issues where long code lines in a code block can cause mobile browsers to overflow without scrollbars either in the view or the code block.

An example would be a code block like below:

import BackgroundTasks
...
    
BGTaskScheduler.shared.register(forTaskWithIdentifier: "com.demo.refresh", using: nil) { task in
    let refreshAppTask = task as! BGAppRefreshTask
    
    refreshAppTask.expirationHandler = {
        
    }
    
    ...
    
    task.setTaskCompleted(success: true)
}

...

I am attempted to fix the issue:

pre {
  overflow: auto;
  padding: double($base-spacing-unit);
  margin-bottom: $base-spacing-unit;
  font-size: $font-size-medium;
  line-height: $line-height-medium;
  white-space: pre-wrap;
  display: inline-block;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

But unsuccessfully.

Who is using Type?

I would love to see the theme in action, so if you are using Type, please share your blog URL? โค๏ธ

Liquid error (line 16): Invalid US-ASCII character "\xE2" on line 5

Error in Docker environment

OS

$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=18.04
DISTRIB_CODENAME=bionic
DISTRIB_DESCRIPTION="Ubuntu 18.04 LTS"

Error during first run

$ git clone https://github.com/aspirethemes/type.git
Cloning into 'type'...
remote: Enumerating objects: 174, done.
remote: Total 174 (delta 0), reused 0 (delta 0), pack-reused 174
Receiving objects: 100% (174/174), 614.92 KiB | 4.84 MiB/s, done.
Resolving deltas: 100% (48/48), done.

$ bundle install
Using public_suffix 2.0.5
...
Using nuggets 1.5.0
Using jekyll-tagging 1.1.0
Bundle complete! 4 Gemfile dependencies, 22 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

$ bundle exec jekyll serve
Configuration file: /home/alice/tmp/type/_config.yml
Configuration file: /home/alice/tmp/type/_config.yml
            Source: /home/alice/tmp/type
       Destination: /home/alice/tmp/type/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
  Liquid Exception: Liquid error (line 16): Invalid US-ASCII character "\xE2" on line 5 in /_layouts/default.html
jekyll 3.4.3 | Error:  Liquid error (line 16): Invalid US-ASCII character "\xE2" on line 5

How can I adapt google web font to this theme?

Hello, I appreciate that you made this theme.
I wanna adapt new google web font to this theme, but I don't know how to do it.
I added
link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800&display=swap&subset=korean"
rel="stylesheet"
to head.html and
also added

google_fonts: "Nanum Myeongjo:400,700,800"

to _config.yml.

But I can't find the file to change font-family.
I have no idea what file to add font...
Please help me with this.
Thank you.

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.