From a890bc1f08eeb0f099b7157a32d1ce770cd6b7e1 Mon Sep 17 00:00:00 2001 From: Owen McGrath Date: Tue, 27 Nov 2018 06:27:03 -0600 Subject: [PATCH 1/6] Update README.md --- README.md | 138 ++---------------------------------------------------- 1 file changed, 3 insertions(+), 135 deletions(-) diff --git a/README.md b/README.md index 678161ca53..c5a221df06 100755 --- a/README.md +++ b/README.md @@ -1,139 +1,7 @@ -# Prologue - Jekyll Theme - -[![Gem Version](https://badge.fury.io/rb/jekyll-theme-prologue.svg)](https://badge.fury.io/rb/jekyll-theme-prologue) +# Prologue - owm's Edits ![Prologue Theme](assets/images/screenshot.png "Prologue Theme Screenshot") -This is Prologue, a simple, single page responsive site template from [HTML5 UP](https://html5up.net/prologue), now available as a blog-aware Jekyll theme from [Chris Bobbe](https://chrisbobbe.github.io). It features a clean, minimalistic design and a sticky sidebar with navigation-linked scrolling. - -**Demo**: https://chrisbobbe.github.io/jekyll-theme-prologue/ - -# Added Features - -* **Blogging and multi-page features you expect from Jekyll** -* Compatible with GitHub Pages -* **[Formspree.io](https://formspree.io/) contact form integration** - just add your email to the `_config.yml` and it works! -* Build your homepage with **custom scrolly sections** in the _sections folder - * Set a **cover photo** for any section (not just the first), with alt text for screen readers and SEO -* Add your **social profiles** easily in `_config.yml`. -* Automatic search engine optimization (SEO) **meta tags** based on info you provide in `_config.yml` and frontmatter -* **Google Analytics** built-in; just put your [Tracking ID](https://support.google.com/analytics/answer/1008080?hl=en) in `_config.yml` as `google_analytics` -* Custom **404 page** (called 404.html; to activate, move it to your project directory). - -# Installation - -There are two ways to get started (choose one): - -1. **Install the [jekyll-theme-prologue gem](https://rubygems.org/gems/jekyll-theme-prologue).** Instructions are in the [Jekyll docs](https://jekyllrb.com/docs/themes/#installing-a-theme). After running `bundle install`, you can find the theme files by running `open $(bundle show jekyll-theme-prologue)`. A sample working `_config.yml` file ships with the gem; if you want to activate it, move it to your project's root directory. It will do nothing until you move it there, replacing the default `_config.yml` file. -2. **Fork or clone the [GitHub repository](https://github.com/chrisbobbe/jekyll-theme-prologue).** If you want to use [GitHub Pages](https://pages.github.com/), create a branch named `gh-pages`, and replace `theme: jekyll-theme-prologue` with `remote_theme: chrisbobbe/jekyll-theme-prologue` in the provided `_config.yml` ([GitHub Pages now supports open-source themes on GitHub](https://github.com/blog/2464-use-any-theme-with-github-pages)). - -Next, make sure that `url` and `base_url` are set for your own website in `_config.yml`. For local testing, make them both blank. Add a photo avatar to your project, then set `avatar: path/to/your/avatar.jpg` in _config.yml; for example, `avatar: assets/images/avatar.jpg` (48x48 pixels works best). Poke around the sample `_config.yml` file to see how you can add your social profiles. - -# Build your homepage - -1. **Your `_config.yml` file must include the following line or your homepage won't work**: `collections: [sections]`. This tells Jekyll to look in the _sections folder (which you will create) for your content and render it all on one page. - -2. **Create a `_sections` folder** in your project's root directory and start adding content to your homepage. Set a cover photo in any of the sections by adding `cover-photo: path/to/photo.jpg` and `cover-photo-alt: your alt text here` to the section's frontmatter. Sample content is provided in the [GitHub repository](https://github.com/chrisbobbe/jekyll-theme-prologue/tree/master/_sections). - -All new sections should be added as html or Markdown documents in the `_sections` folder. The following section variables can be set with [frontmatter](https://jekyllrb.com/docs/frontmatter/): -- `title` (required) -- `order` (required; orders the sequence of sections on the page. Example: `1`) -- `cover-photo` (optional; sets a background image for the section. Example: `assets/images/banner.jpg`) -- `cover-photo-alt` (required if using a cover photo. Describes the photo for screen readers and SEO; e.g. "Dome of Light art installation, Kaohsiung, Taiwan") -- `icon` (optional; see [Font Awesome](https://fontawesome.com/icons) for icon codes. Example: `fa-github`) -- `icon-style` (optional; "solid" is default, "regular" for outline style icons, or "brands" for logos) -- `auto-header` (optional; "use-title" is default, "none" for no header, or custom header text) -- `hide` (optional; if `true`, the section won't appear) - -# Start blogging! - -Jekyll has great resources to get you started writing blog posts. Check out [this Jekyll Docs page](https://jekyllrb.com/docs/posts/) first. When you've written a post or two, copy the following into a new file in your project directory called `blog.html`, and you'll see a link to your blog from the homepage: - -``` ---- -layout: blog -title: My Blog ---- -``` - --- and that's it! - -# Add a page - -To add a page, just make a new .html or .md file in your project directory. There's an example called `reading-list` [provided](https://github.com/chrisbobbe/jekyll-theme-prologue/blob/master/reading-list.md) with the GitHub repository. Add this frontmatter: - -``` ---- -title: My New Page -layout: page ---- -``` - -You can also set these page variables in the frontmatter, if you want: -- `subtitle` -- `order` (orders links in the nav menu, e.g. `1`) -- `icon` (optional; see [Font Awesome](https://fontawesome.com/icons) for icon codes. Example: `fa-github`) -- `icon-style` (optional; "solid" is default, "regular" for outline style icons, or "brands" for logos) -- `hide` (optional; if `true`, a link won't appear in the nav menu. All this does is remove the nav link; your page will still be served to anyone who has the URL.) - -**This same set of frontmatter variables (including `title`) can also be set in `index.md` and `blog.html`.** You may want to give them titles, or hide the homepage link with `hide: true` if the homepage is the only page. - -For advanced SEO, this theme also lets you add `permalink` (see [Jekyll Docs](https://jekyllrb.com/docs/permalinks/#where-to-configure-permalinks)), `robots` (string, e.g. "noindex, nofollow"), and `canonical` (boolean; true is default) to any page or post. - -# Contributing - -Please feel free to submit issues and feature requests! - -# Credits - -Thanks to @andrewbanchich for his many Jekyll adaptations of HTML5 UP's elegant themes, which helped and inspired me, and of course many thanks to HTML5 UP. - -Original README from HTML5 UP: - -``` -Prologue by HTML5 UP -html5up.net | @ajlkn -Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) - - -This is Prologue, a simple, single page responsive site template. It features a -clean, minimalistic design and a sticky sidebar with navigation-linked scrolling. - -Demo content images* are courtesy of the ridiculously talented Felicia Simion. Check out -more of her amazing work over at deviantART: - -http://ineedchemicalx.deviantart.com/ - -(* = Not included! Only meant for use with my own on-site demo, so please do NOT download -and/or use any of Felicia's work without her explicit permission!) - -Demo banner images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) -images you can use for pretty much whatever. - -(* = Not included) - -AJ -aj@lkn.io | @ajlkn - -PS: Not sure how to get that contact form working? Give formspree.io a try (it's awesome). - - -Credits: - - Demo Images: - Felicia Simion (ineedchemicalx.deviantart.com) - Unsplash (unsplash.com) - - Icons: - Font Awesome (fortawesome.github.com/Font-Awesome) +> This is Prologue, a simple, single page responsive site template from [HTML5 UP](https://html5up.net/prologue), now available as a blog-aware Jekyll theme from [Chris Bobbe](https://chrisbobbe.github.io). It features a clean, minimalistic design and a sticky sidebar with navigation-linked scrolling. - Other - jQuery (jquery.com) - html5shiv.js (@afarkas @jdalton @jon_neal @rem) - CSS3 Pie (css3pie.com) - background-size polyfill (github.com/louisremi) - Respond.js (j.mp/respondjs) - jquery.scrolly (@ajlkn) - jquery.scrollzer (@ajlkn) - Skel (skel.io) -``` +My edits and changes to this theme. See [original project](https://github.com/chrisbobbe/jekyll-theme-prologue) for documentation. From 630ee5c2d34aee7faaa59734b07f2115db256bf4 Mon Sep 17 00:00:00 2001 From: Owen McGrath Date: Tue, 27 Nov 2018 06:32:52 -0600 Subject: [PATCH 2/6] Remove gemspec I'm pretty sure that I don't need this since this isn't the orignial project --- Gemfile | 5 +++-- jekyll-theme-prologue.gemspec | 18 ------------------ 2 files changed, 3 insertions(+), 20 deletions(-) delete mode 100755 jekyll-theme-prologue.gemspec diff --git a/Gemfile b/Gemfile index 1291498971..775d954bf2 100755 --- a/Gemfile +++ b/Gemfile @@ -1,2 +1,3 @@ -source "https://rubygems.org" -gemspec \ No newline at end of file +source 'https://rubygems.org' +gem 'github-pages', group: :jekyll_plugins + diff --git a/jekyll-theme-prologue.gemspec b/jekyll-theme-prologue.gemspec deleted file mode 100755 index 3d75340934..0000000000 --- a/jekyll-theme-prologue.gemspec +++ /dev/null @@ -1,18 +0,0 @@ -# coding: utf-8 - -Gem::Specification.new do |spec| - spec.name = "jekyll-theme-prologue" - spec.version = "0.3.2" - spec.authors = ["HTML5 UP", "Chris Bobbe"] - spec.email = ["csbobbe@gmail.com"] - - spec.summary = %q{A Jekyll version of the Prologue theme by HTML5 UP.} - spec.description = "A Jekyll version of the Prologue theme by HTML5 UP. Demo: https://chrisbobbe.github.io/jekyll-theme-prologue/" - spec.homepage = "https://github.com/chrisbobbe/jekyll-theme-prologue" - spec.license = "CC-BY-3.0" - - spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|_config.yml|404.html|LICENSE|README)}i) } - - spec.add_development_dependency "jekyll", "~> 3.3" - spec.add_development_dependency "bundler", "~> 1.12" -end From ed620707490fcd8a32a6d0238559459ba42ae1a9 Mon Sep 17 00:00:00 2001 From: Owen McGrath Date: Tue, 27 Nov 2018 06:57:39 -0600 Subject: [PATCH 3/6] Add syntax highlighting --- README.md | 4 +++ _config.yml | 2 ++ _sass/highlight.scss | 59 ++++++++++++++++++++++++++++++++ _sass/jekyll-theme-prologue.scss | 4 ++- 4 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 _sass/highlight.scss diff --git a/README.md b/README.md index c5a221df06..d42457cfd7 100755 --- a/README.md +++ b/README.md @@ -5,3 +5,7 @@ > This is Prologue, a simple, single page responsive site template from [HTML5 UP](https://html5up.net/prologue), now available as a blog-aware Jekyll theme from [Chris Bobbe](https://chrisbobbe.github.io). It features a clean, minimalistic design and a sticky sidebar with navigation-linked scrolling. My edits and changes to this theme. See [original project](https://github.com/chrisbobbe/jekyll-theme-prologue) for documentation. + +## List of Changes +- Add syntax highlighting with Rouge ("Trac" theme) + diff --git a/_config.yml b/_config.yml index 7813c190d5..fca40521ae 100644 --- a/_config.yml +++ b/_config.yml @@ -61,3 +61,5 @@ google_analytics: # The following settings are NECESSARY for the Prologue theme to run: theme: jekyll-theme-prologue collections: [sections] + +highligher: rouge diff --git a/_sass/highlight.scss b/_sass/highlight.scss new file mode 100644 index 0000000000..851ba3c1ae --- /dev/null +++ b/_sass/highlight.scss @@ -0,0 +1,59 @@ +.highlight .hll { background-color: #ffffcc } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kn { font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #bb8844 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #999999 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #bb8844 } /* Literal.String.Backtick */ +.highlight .sc { color: #bb8844 } /* Literal.String.Char */ +.highlight .sd { color: #bb8844 } /* Literal.String.Doc */ +.highlight .s2 { color: #bb8844 } /* Literal.String.Double */ +.highlight .se { color: #bb8844 } /* Literal.String.Escape */ +.highlight .sh { color: #bb8844 } /* Literal.String.Heredoc */ +.highlight .si { color: #bb8844 } /* Literal.String.Interpol */ +.highlight .sx { color: #bb8844 } /* Literal.String.Other */ +.highlight .sr { color: #808000 } /* Literal.String.Regex */ +.highlight .s1 { color: #bb8844 } /* Literal.String.Single */ +.highlight .ss { color: #bb8844 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/_sass/jekyll-theme-prologue.scss b/_sass/jekyll-theme-prologue.scss index 3cfcab0559..3c82b52b40 100644 --- a/_sass/jekyll-theme-prologue.scss +++ b/_sass/jekyll-theme-prologue.scss @@ -4,6 +4,8 @@ @charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600"); +@import "highlight"; + /* Prologue by HTML5 UP html5up.net | @ajlkn @@ -1106,4 +1108,4 @@ } } - } \ No newline at end of file + } From 64f9d131541fd5ea16e428df7a38911b2157d911 Mon Sep 17 00:00:00 2001 From: Owen McGrath Date: Tue, 27 Nov 2018 17:27:56 -0600 Subject: [PATCH 4/6] Change syntax highlighting theme --- _sass/highlight.scss | 48 +++++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/_sass/highlight.scss b/_sass/highlight.scss index 851ba3c1ae..5c45e67768 100644 --- a/_sass/highlight.scss +++ b/_sass/highlight.scss @@ -1,14 +1,14 @@ .highlight .hll { background-color: #ffffcc } .highlight .c { color: #999988; font-style: italic } /* Comment */ .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.highlight .k { font-weight: bold } /* Keyword */ -.highlight .o { font-weight: bold } /* Operator */ +.highlight .k { color: #000000; font-weight: bold } /* Keyword */ +.highlight .o { color: #000000; font-weight: bold } /* Operator */ .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ -.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */ .highlight .gr { color: #aa0000 } /* Generic.Error */ .highlight .gh { color: #999999 } /* Generic.Heading */ .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ @@ -17,41 +17,43 @@ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { color: #aaaaaa } /* Generic.Subheading */ .highlight .gt { color: #aa0000 } /* Generic.Traceback */ -.highlight .kc { font-weight: bold } /* Keyword.Constant */ -.highlight .kd { font-weight: bold } /* Keyword.Declaration */ -.highlight .kn { font-weight: bold } /* Keyword.Namespace */ -.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */ +.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ +.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ +.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #009999 } /* Literal.Number */ -.highlight .s { color: #bb8844 } /* Literal.String */ +.highlight .s { color: #d01040 } /* Literal.String */ .highlight .na { color: #008080 } /* Name.Attribute */ -.highlight .nb { color: #999999 } /* Name.Builtin */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ .highlight .no { color: #008080 } /* Name.Constant */ +.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ .highlight .ni { color: #800080 } /* Name.Entity */ .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */ .highlight .nn { color: #555555 } /* Name.Namespace */ .highlight .nt { color: #000080 } /* Name.Tag */ .highlight .nv { color: #008080 } /* Name.Variable */ -.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mf { color: #009999 } /* Literal.Number.Float */ .highlight .mh { color: #009999 } /* Literal.Number.Hex */ .highlight .mi { color: #009999 } /* Literal.Number.Integer */ .highlight .mo { color: #009999 } /* Literal.Number.Oct */ -.highlight .sb { color: #bb8844 } /* Literal.String.Backtick */ -.highlight .sc { color: #bb8844 } /* Literal.String.Char */ -.highlight .sd { color: #bb8844 } /* Literal.String.Doc */ -.highlight .s2 { color: #bb8844 } /* Literal.String.Double */ -.highlight .se { color: #bb8844 } /* Literal.String.Escape */ -.highlight .sh { color: #bb8844 } /* Literal.String.Heredoc */ -.highlight .si { color: #bb8844 } /* Literal.String.Interpol */ -.highlight .sx { color: #bb8844 } /* Literal.String.Other */ -.highlight .sr { color: #808000 } /* Literal.String.Regex */ -.highlight .s1 { color: #bb8844 } /* Literal.String.Single */ -.highlight .ss { color: #bb8844 } /* Literal.String.Symbol */ +.highlight .sb { color: #d01040 } /* Literal.String.Backtick */ +.highlight .sc { color: #d01040 } /* Literal.String.Char */ +.highlight .sd { color: #d01040 } /* Literal.String.Doc */ +.highlight .s2 { color: #d01040 } /* Literal.String.Double */ +.highlight .se { color: #d01040 } /* Literal.String.Escape */ +.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */ +.highlight .si { color: #d01040 } /* Literal.String.Interpol */ +.highlight .sx { color: #d01040 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d01040 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ .highlight .vc { color: #008080 } /* Name.Variable.Class */ .highlight .vg { color: #008080 } /* Name.Variable.Global */ From 731cfcc605f4b55371d24232cf58870efc7321de Mon Sep 17 00:00:00 2001 From: Owen McGrath Date: Tue, 27 Nov 2018 17:29:05 -0600 Subject: [PATCH 5/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d42457cfd7..243cdf58ac 100755 --- a/README.md +++ b/README.md @@ -7,5 +7,5 @@ My edits and changes to this theme. See [original project](https://github.com/chrisbobbe/jekyll-theme-prologue) for documentation. ## List of Changes -- Add syntax highlighting with Rouge ("Trac" theme) +- Add syntax highlighting with Rouge (GitHub theme) From 0c2a85ded17888f4c4ab71b6085e61be84aff86b Mon Sep 17 00:00:00 2001 From: Owen McGrath Date: Tue, 27 Nov 2018 17:34:35 -0600 Subject: [PATCH 6/6] Prepare for PR --- Gemfile | 3 +- README.md | 138 ++++++++++++++++++++++++++++++++-- jekyll-theme-prologue.gemspec | 18 +++++ 3 files changed, 152 insertions(+), 7 deletions(-) create mode 100644 jekyll-theme-prologue.gemspec diff --git a/Gemfile b/Gemfile index 775d954bf2..851fabc21d 100755 --- a/Gemfile +++ b/Gemfile @@ -1,3 +1,2 @@ source 'https://rubygems.org' -gem 'github-pages', group: :jekyll_plugins - +gemspec diff --git a/README.md b/README.md index 243cdf58ac..678161ca53 100755 --- a/README.md +++ b/README.md @@ -1,11 +1,139 @@ -# Prologue - owm's Edits +# Prologue - Jekyll Theme + +[![Gem Version](https://badge.fury.io/rb/jekyll-theme-prologue.svg)](https://badge.fury.io/rb/jekyll-theme-prologue) ![Prologue Theme](assets/images/screenshot.png "Prologue Theme Screenshot") -> This is Prologue, a simple, single page responsive site template from [HTML5 UP](https://html5up.net/prologue), now available as a blog-aware Jekyll theme from [Chris Bobbe](https://chrisbobbe.github.io). It features a clean, minimalistic design and a sticky sidebar with navigation-linked scrolling. +This is Prologue, a simple, single page responsive site template from [HTML5 UP](https://html5up.net/prologue), now available as a blog-aware Jekyll theme from [Chris Bobbe](https://chrisbobbe.github.io). It features a clean, minimalistic design and a sticky sidebar with navigation-linked scrolling. + +**Demo**: https://chrisbobbe.github.io/jekyll-theme-prologue/ + +# Added Features + +* **Blogging and multi-page features you expect from Jekyll** +* Compatible with GitHub Pages +* **[Formspree.io](https://formspree.io/) contact form integration** - just add your email to the `_config.yml` and it works! +* Build your homepage with **custom scrolly sections** in the _sections folder + * Set a **cover photo** for any section (not just the first), with alt text for screen readers and SEO +* Add your **social profiles** easily in `_config.yml`. +* Automatic search engine optimization (SEO) **meta tags** based on info you provide in `_config.yml` and frontmatter +* **Google Analytics** built-in; just put your [Tracking ID](https://support.google.com/analytics/answer/1008080?hl=en) in `_config.yml` as `google_analytics` +* Custom **404 page** (called 404.html; to activate, move it to your project directory). + +# Installation + +There are two ways to get started (choose one): + +1. **Install the [jekyll-theme-prologue gem](https://rubygems.org/gems/jekyll-theme-prologue).** Instructions are in the [Jekyll docs](https://jekyllrb.com/docs/themes/#installing-a-theme). After running `bundle install`, you can find the theme files by running `open $(bundle show jekyll-theme-prologue)`. A sample working `_config.yml` file ships with the gem; if you want to activate it, move it to your project's root directory. It will do nothing until you move it there, replacing the default `_config.yml` file. +2. **Fork or clone the [GitHub repository](https://github.com/chrisbobbe/jekyll-theme-prologue).** If you want to use [GitHub Pages](https://pages.github.com/), create a branch named `gh-pages`, and replace `theme: jekyll-theme-prologue` with `remote_theme: chrisbobbe/jekyll-theme-prologue` in the provided `_config.yml` ([GitHub Pages now supports open-source themes on GitHub](https://github.com/blog/2464-use-any-theme-with-github-pages)). + +Next, make sure that `url` and `base_url` are set for your own website in `_config.yml`. For local testing, make them both blank. Add a photo avatar to your project, then set `avatar: path/to/your/avatar.jpg` in _config.yml; for example, `avatar: assets/images/avatar.jpg` (48x48 pixels works best). Poke around the sample `_config.yml` file to see how you can add your social profiles. + +# Build your homepage + +1. **Your `_config.yml` file must include the following line or your homepage won't work**: `collections: [sections]`. This tells Jekyll to look in the _sections folder (which you will create) for your content and render it all on one page. + +2. **Create a `_sections` folder** in your project's root directory and start adding content to your homepage. Set a cover photo in any of the sections by adding `cover-photo: path/to/photo.jpg` and `cover-photo-alt: your alt text here` to the section's frontmatter. Sample content is provided in the [GitHub repository](https://github.com/chrisbobbe/jekyll-theme-prologue/tree/master/_sections). + +All new sections should be added as html or Markdown documents in the `_sections` folder. The following section variables can be set with [frontmatter](https://jekyllrb.com/docs/frontmatter/): +- `title` (required) +- `order` (required; orders the sequence of sections on the page. Example: `1`) +- `cover-photo` (optional; sets a background image for the section. Example: `assets/images/banner.jpg`) +- `cover-photo-alt` (required if using a cover photo. Describes the photo for screen readers and SEO; e.g. "Dome of Light art installation, Kaohsiung, Taiwan") +- `icon` (optional; see [Font Awesome](https://fontawesome.com/icons) for icon codes. Example: `fa-github`) +- `icon-style` (optional; "solid" is default, "regular" for outline style icons, or "brands" for logos) +- `auto-header` (optional; "use-title" is default, "none" for no header, or custom header text) +- `hide` (optional; if `true`, the section won't appear) + +# Start blogging! + +Jekyll has great resources to get you started writing blog posts. Check out [this Jekyll Docs page](https://jekyllrb.com/docs/posts/) first. When you've written a post or two, copy the following into a new file in your project directory called `blog.html`, and you'll see a link to your blog from the homepage: + +``` +--- +layout: blog +title: My Blog +--- +``` + +-- and that's it! + +# Add a page + +To add a page, just make a new .html or .md file in your project directory. There's an example called `reading-list` [provided](https://github.com/chrisbobbe/jekyll-theme-prologue/blob/master/reading-list.md) with the GitHub repository. Add this frontmatter: + +``` +--- +title: My New Page +layout: page +--- +``` + +You can also set these page variables in the frontmatter, if you want: +- `subtitle` +- `order` (orders links in the nav menu, e.g. `1`) +- `icon` (optional; see [Font Awesome](https://fontawesome.com/icons) for icon codes. Example: `fa-github`) +- `icon-style` (optional; "solid" is default, "regular" for outline style icons, or "brands" for logos) +- `hide` (optional; if `true`, a link won't appear in the nav menu. All this does is remove the nav link; your page will still be served to anyone who has the URL.) + +**This same set of frontmatter variables (including `title`) can also be set in `index.md` and `blog.html`.** You may want to give them titles, or hide the homepage link with `hide: true` if the homepage is the only page. + +For advanced SEO, this theme also lets you add `permalink` (see [Jekyll Docs](https://jekyllrb.com/docs/permalinks/#where-to-configure-permalinks)), `robots` (string, e.g. "noindex, nofollow"), and `canonical` (boolean; true is default) to any page or post. + +# Contributing + +Please feel free to submit issues and feature requests! + +# Credits + +Thanks to @andrewbanchich for his many Jekyll adaptations of HTML5 UP's elegant themes, which helped and inspired me, and of course many thanks to HTML5 UP. + +Original README from HTML5 UP: + +``` +Prologue by HTML5 UP +html5up.net | @ajlkn +Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) + + +This is Prologue, a simple, single page responsive site template. It features a +clean, minimalistic design and a sticky sidebar with navigation-linked scrolling. + +Demo content images* are courtesy of the ridiculously talented Felicia Simion. Check out +more of her amazing work over at deviantART: + +http://ineedchemicalx.deviantart.com/ + +(* = Not included! Only meant for use with my own on-site demo, so please do NOT download +and/or use any of Felicia's work without her explicit permission!) + +Demo banner images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) +images you can use for pretty much whatever. + +(* = Not included) + +AJ +aj@lkn.io | @ajlkn + +PS: Not sure how to get that contact form working? Give formspree.io a try (it's awesome). + + +Credits: -My edits and changes to this theme. See [original project](https://github.com/chrisbobbe/jekyll-theme-prologue) for documentation. + Demo Images: + Felicia Simion (ineedchemicalx.deviantart.com) + Unsplash (unsplash.com) -## List of Changes -- Add syntax highlighting with Rouge (GitHub theme) + Icons: + Font Awesome (fortawesome.github.com/Font-Awesome) + Other + jQuery (jquery.com) + html5shiv.js (@afarkas @jdalton @jon_neal @rem) + CSS3 Pie (css3pie.com) + background-size polyfill (github.com/louisremi) + Respond.js (j.mp/respondjs) + jquery.scrolly (@ajlkn) + jquery.scrollzer (@ajlkn) + Skel (skel.io) +``` diff --git a/jekyll-theme-prologue.gemspec b/jekyll-theme-prologue.gemspec new file mode 100644 index 0000000000..3d75340934 --- /dev/null +++ b/jekyll-theme-prologue.gemspec @@ -0,0 +1,18 @@ +# coding: utf-8 + +Gem::Specification.new do |spec| + spec.name = "jekyll-theme-prologue" + spec.version = "0.3.2" + spec.authors = ["HTML5 UP", "Chris Bobbe"] + spec.email = ["csbobbe@gmail.com"] + + spec.summary = %q{A Jekyll version of the Prologue theme by HTML5 UP.} + spec.description = "A Jekyll version of the Prologue theme by HTML5 UP. Demo: https://chrisbobbe.github.io/jekyll-theme-prologue/" + spec.homepage = "https://github.com/chrisbobbe/jekyll-theme-prologue" + spec.license = "CC-BY-3.0" + + spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|_config.yml|404.html|LICENSE|README)}i) } + + spec.add_development_dependency "jekyll", "~> 3.3" + spec.add_development_dependency "bundler", "~> 1.12" +end