From 7e841695e2463939c6b25f6c2bd6dc2bbdf8928e Mon Sep 17 00:00:00 2001 From: Mohannad Otaibi Date: Sun, 4 Oct 2020 21:50:50 +0900 Subject: [PATCH 1/4] Add tags to posts, and RTL, fixing README * Added tags-cloud to head of posts page * Added RTL support by setting RTL: true in `_config.yml` then add appropriate styles to `default.html` head section * Fixing README.md to company with [Lint: Markdown Rules](https://github.com/markdownlint/markdownlint/blob/master/docs/RULES.md) --- README.md | 91 ++++++++++++++++++++++++++----------------- _config.yml | 1 + _includes/head.html | 1 + _layouts/post.html | 7 ++++ _sass/tale/_post.scss | 4 ++ assets/rtl.scss | 46 ++++++++++++++++++++++ 6 files changed, 115 insertions(+), 35 deletions(-) create mode 100644 assets/rtl.scss diff --git a/README.md b/README.md index a65f72b597..f2e6b45f32 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Tale is a minimal Jekyll theme curated for storytellers. Checkout the demo [here ![Tale screenshot](http://i.imgur.com/pXZrtmo.png) ## Features + - Easy installation - Compatible with GitHub Pages - Responsive design (looks just as good on mobile) @@ -16,6 +17,7 @@ Tale is a minimal Jekyll theme curated for storytellers. Checkout the demo [here - [Disqus comments (can be enabled if needed)](#enabling-comments) ## Installation + There are 3 ways to install this theme 1. Install it as a Ruby Gem (for self-hosted sites) @@ -23,75 +25,81 @@ There are 3 ways to install this theme 3. Fork the project directly ### Ruby Gem method + + + 1. Add this line to your `Gemfile`: -```ruby -gem "tale" -``` + ```ruby + gem "tale" + ``` 2. Install the theme's gems and dependencies: -```bash -$ bundle -``` + ```bash + $ bundle + ``` 3. In `_config.yml` add these lines: -```yaml -theme: tale + ```yaml + theme: tale -permalink: /:year-:month-:day/:title -paginate: 5 -``` + permalink: /:year-:month-:day/:title + paginate: 5 + ``` -Remove any other `theme:` lines. + Remove any other `theme:` lines. 4. Rename `index.md` to `index.html`. Without this, the `jekyll-paginate` gem will not work. 5. In `about.md`, change the `layout:` field to `post`: -```Markdown -layout: post -``` + ```Markdown + layout: post + ``` ### GitHub Pages method + 1. Add these 2 lines in to your `Gemfile`: -```ruby -gem "jekyll-remote-theme" -gem "jekyll-paginate" -``` + ```ruby + gem "jekyll-remote-theme" + gem "jekyll-paginate" + ``` 2. Install the newly added gems: -```bash -$ bundle -``` + ```bash + $ bundle + ... + ``` 3. In `_config.yml` add these lines: -```yaml -remote_theme: chesterhow/tale + ```yaml + remote_theme: chesterhow/tale -permalink: /:year-:month-:day/:title -paginate: 5 + permalink: /:year-:month-:day/:title + paginate: 5 -plugins: - - jekyll-paginate - - jekyll-remote-theme -``` + plugins: + - jekyll-paginate + - jekyll-remote-theme + ``` -Remove any other `theme:` or `remote_theme:` lines. + Remove any other `theme:` or `remote_theme:` lines. 4. Rename `index.md` to `index.html`. Without this, the `jekyll-paginate` gem will not work. 5. In `about.md`, change the `layout:` field to `post`: -```Markdown -layout: post -``` + ```Markdown + layout: post + ``` ### Fork method + 1. Fork this repository 2. Delete the unnecessary files/folders: `CODE_OF_CONDUCT.md`, `LICENSE`, `README.md`, `tale.gemspec` @@ -103,17 +111,22 @@ baseurl: "/tale" # delete this line ``` ## Usage + Once you've installed the theme, you're ready to work on your Jekyll site. To start off, I would recommend updating `_config.yml` with your site's details. To build and serve your site, run: ```bash $ bundle exec jekyll serve +... + Server address: http://127.0.0.1:4000/ + Server running... press ctrl-c to stop. ``` -And you're all set! Head over to http://127.0.0.1:4000/ to see your site in action. +And you're all set! Head over to to see your site in action. ### Enabling Comments + Comments are disabled by default. To enable them, look for the following line in `_config.yml` and change `jekyll-tale` to your site's Disqus id. ```yml @@ -122,8 +135,16 @@ disqus: jekyll-tale Next, add `comments: true` to the YAML front matter of the posts which you would like to enable comments for. +To enable globally, add `comments: true` to the YAML front matter of `_layouts/post.html` + +### Enabling RTL + +To enable RTL support, add `RTL: true` to `_config.yml` + ## Contributing + Found a bug or have a suggestion? Feel free to create an issue or make a pull request! ## License + See [LICENSE](https://github.com/chesterhow/tale/blob/master/LICENSE) diff --git a/_config.yml b/_config.yml index 7c01e9625b..7f1ef4cbc1 100644 --- a/_config.yml +++ b/_config.yml @@ -3,6 +3,7 @@ title: Tale description: "Minimal Jekyll theme for storytellers" baseurl: "/tale" url: "https://chesterhow.github.io" +rtl: true # Google Analytics google_analytics: UA—XXXXXXXX-X diff --git a/_includes/head.html b/_includes/head.html index 6e7d61d927..8adf2b8003 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -6,6 +6,7 @@ + {% if site.rtl %}{% endif %} diff --git a/_layouts/post.html b/_layouts/post.html index 82d90793c0..7393dd8566 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -17,6 +17,13 @@ {% endif %} + {% if page.tags %} +
+ {% for tag in page.tags %} + {{ tag }} + {% endfor %} +
+ {% endif %}

{{ page.title }}

diff --git a/_sass/tale/_post.scss b/_sass/tale/_post.scss index 3680d80b93..e82cb1f5f8 100644 --- a/_sass/tale/_post.scss +++ b/_sass/tale/_post.scss @@ -12,6 +12,10 @@ } } + &-tags { + margin: 15px; + } + &-title { color: $default-shade; font-family: $sans-serif; diff --git a/assets/rtl.scss b/assets/rtl.scss new file mode 100644 index 0000000000..95001140ac --- /dev/null +++ b/assets/rtl.scss @@ -0,0 +1,46 @@ +//RTL overrides +body, html { + direction: rtl; +} + +h1, h2, h3, h4, h5, h6, p, li, ul, time, blockquote { + text-align: right; +} + +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, +footer .blockquote-footer,a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, +q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, pre, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, +aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, +section, summary, time, mark, audio, video, .post-title { + font-family: "Droid Arabic Kufi", inherit; +} + +blockquote { + border-right: 0.25rem; + border-left: 0; + margin: 0.8rem 0; + padding: 0.5rem 1rem; +} + +.nav li { + padding: 0 0 0 2rem; +} + +.nav li:last-child { + padding-left: 0; +} + +@media (min-width: 600px) { + blockquote { + padding: 0 1.25rem 0 5rem; + } + .nav-container { + text-align: right; + } + + .nav ul { + right: auto; + left: 0; + } +} \ No newline at end of file From aa47b9f8ea32bff7ea2e081768088c56374b86e6 Mon Sep 17 00:00:00 2001 From: Mohannad Otaibi Date: Sun, 4 Oct 2020 22:21:03 +0900 Subject: [PATCH 2/4] border didn't show --- assets/rtl.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/rtl.scss b/assets/rtl.scss index 95001140ac..55f198c49b 100644 --- a/assets/rtl.scss +++ b/assets/rtl.scss @@ -17,7 +17,7 @@ section, summary, time, mark, audio, video, .post-title { } blockquote { - border-right: 0.25rem; + border-right: 0.25rem solid; border-left: 0; margin: 0.8rem 0; padding: 0.5rem 1rem; From 32442ad1148874fc3d076b1170f7ff412541cf23 Mon Sep 17 00:00:00 2001 From: Mohannad Otaibi Date: Sun, 4 Oct 2020 22:27:16 +0900 Subject: [PATCH 3/4] enable compilation of scss --- assets/rtl.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/assets/rtl.scss b/assets/rtl.scss index 55f198c49b..48da5e730e 100644 --- a/assets/rtl.scss +++ b/assets/rtl.scss @@ -1,3 +1,6 @@ +--- +--- + //RTL overrides body, html { direction: rtl; From ed5472d650783a27ffdcf978c692ee05ba1f8082 Mon Sep 17 00:00:00 2001 From: Mohannad Otaibi Date: Sun, 4 Oct 2020 22:34:29 +0900 Subject: [PATCH 4/4] fix enabling global comments --- README.md | 2 +- _config.yml | 3 ++- _layouts/post.html | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index f2e6b45f32..d7f52579aa 100644 --- a/README.md +++ b/README.md @@ -135,7 +135,7 @@ disqus: jekyll-tale Next, add `comments: true` to the YAML front matter of the posts which you would like to enable comments for. -To enable globally, add `comments: true` to the YAML front matter of `_layouts/post.html` +To enable globally, add `comments: true` to `_config.yml` ### Enabling RTL diff --git a/_config.yml b/_config.yml index 7f1ef4cbc1..3d37199086 100644 --- a/_config.yml +++ b/_config.yml @@ -39,4 +39,5 @@ paginate: 5 exclude: [ Gemfile, Gemfile.lock, tale.gemspec ] # Disqus (Set to your disqus id) -disqus: jekyll-tale \ No newline at end of file +disqus: jekyll-tale +comments: true \ No newline at end of file diff --git a/_layouts/post.html b/_layouts/post.html index 7393dd8566..b5c040db41 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -30,7 +30,7 @@

{{ page.title }}

{{ content }} -{% if page.comments %} +{% if page.comments or site.comments %} {% include disqus_comments.html %} {% endif %}