console-theme 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 04475aa09d82a7cf0ddbd28af115101fa2b0dc02
+  data.tar.gz: 0c754c63f5f6e5684397505ca911e7b614e9c70c
+SHA512:
+  metadata.gz: 199cf7d3d005eda91e8f30e2797561c391f8f0877d35758db76fa27d802246f316a29bc9c1ff6794bd2113a801939d383098e9ef159a032a64bdd271d332d64d
+  data.tar.gz: 2551ba23b9c4c0c4995facec17ec4ad3e8177813493178ba98568f96eb16212c99626aec327c016b107df096f72b628bb62ea38737a6743555e229272d4c68fa

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Jae Hee Lee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,172 @@
+# console-theme
+
+This is a simple yet powerful theme that will make your website look really stylish. This theme is especially suitable for users who would want to focus on writing blogs instead of working on front-end stuffs.
+
+The primary features of this theme are:
+* Gulp
+* Post search functionality
+* svg symbol functionality (plugin)
+* string original type check functionality (plugin)
+* Rake to create a post
+* Disqus integration (with each post having its unique identifier)
+* Color customization functionality
+* Categorization (data-driven)
+* Offcanvas menu
+* Pagination functionality (utilises jekyll-paginate as well as jquery paginator)
+* Internationalization (uses jekyll-polyglot)
+
+There are more features to come. Stay tuned!
+
+## Installation
+
+Add this line to your Jekyll site's Gemfile:
+
+```ruby
+gem "console-theme"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: console-theme
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install console-theme
+
+### Gulp settings
+
+To be able to use Gulp, you will need to install Node.js as well as its package manager (i.e. npm). Once you have installed npm. Go to the folder where the package.json is located and run `npm install` and it will install all the dependencies including Gulp.
+
+    $ npm install
+
+When running `gulp` command, it will run the default gulp task. Make sure to run the following command when you are in the folder that has `gulpfile.js`.
+
+    $ gulp
+
+This task would run several other tasks defined in `gulpfile.js.` To run individual tasks, please type `gulp [task name]`. For example:
+
+    $ gulp minify-css
+
+### Using a BrowserSync instead of Jekyll generated local server.
+
+When running Jekyll serve, it is possible to run a server. However, I chose to use BrowserSync instead of that for few reasons:
+
+* BrowserSync is a de-facto standard nowadays.
+* It is used with Gulp and Gulp provides bundling as well as minifying, which based on my knowledge is not possible with Jekyll generated server.
+
+Therefore, please do use gulp!
+
+## Usage
+
+### Creating a post
+
+Please use `rake` command to create a post. Using this command would automatically generate Jekyll front matter with a unique Disqus identifier. The syntax for rake command is [assuming that you are in the root folder]:
+
+```ruby
+rake post title="Title" [date="2017-01-13"] [category="category"]
+```
+
+[] are optionals.
+
+### Integrating Disqus with your website.
+
+You will need to first have Disqus account. Once the account is ready, please modify `config.yml` file by adding your shortname for disqus like below:
+
+```yaml
+disqus_shortname: [your short name. Remove the bracket!]
+```
+
+By doing this, every disqus script would use that information and disqus identifier to fetch relevant data.
+
+### How to use svg symbol
+
+Using svg symbol is a good practice. By doing this, we can organize svgs better while not losing the caching functionality. Make sure you change your svg file to the file that conforms to the svg symbol style:
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="beaker" viewBox="214.7 0 182.6 792">
+    <circle cx="344.8" cy="20.2" r="20.2"/>
+    <circle cx="344.8" cy="92.9" r="20.2"/>
+    <circle cx="320.5" cy="169.7" r="24.2"/>
+    <circle cx="243" cy="141.4" r="24.2"/>
+    <circle cx="284.2" cy="56.6" r="36.4"/>
+  </symbol>
+</svg>
+```
+
+If we would like to use this, we use svgicon tag by:
+
+```liquid
+{% svgicon beaker %}
+```
+
+This would display beaker on the screen! Examples are available.
+
+This external svg file is located in: `assets/css/images/graphics/svg-symbols.svg`
+
+## Categorization
+
+This theme uses data-driven categorization, which makes the construction of categoization simple and succinct. The json file for category is located in _data/categories.json. Each category has three attributes: title, href and id (used to uniquely identify them). Please view the sample file to get a sense of it.
+
+To create the category pages, you need to create a 'category' folder and subfolders would be the name of categories. They can be further nested (i.e. sub categories). Each folder would have index.md (as we will be using folder structure for creating the page for category.) You can reference my website or refer to the examples provided.
+
+## Layouts and Blocks
+
+This theme values simplicity. As such, every layout would look extremely analogous with each other. However, for extensibility there are about 7 layouts:
+
+* category
+* default
+* main
+* page
+* post
+* search
+* home
+
+These layouts share same blocks, which are defined in _includes folder. There are about 10 blocks:
+
+* **category**: the block that displays the available categories.
+* **comment**: the comment block, which would be visible if comment: true in the front matter for posts.
+* **footer**: the footer area.
+* **global**: the global menu area.
+* **head**: corresponds to the head tag in html.
+* **header**: the header area. This area usually shows the location of particular page.
+* **home**: corresponds the index.html
+* **navigation**: the block for the menu.
+* **not_found**: for 404 page.
+* **search**: the block for search.
+
+## Stylesheets
+
+Jekyll uses sass, which is a scripting language that would be interpreted into css files. They are largely divided into three usages:
+
+* **blocks**: the rest. The files are well separated. ( I think. )
+* **configurations**: color settings and foundation styling will be here.
+* **mixins**: self-explanatory. The breakpoint would be set here for responsive web design.
+
+Based on your needs, you may modify these files.
+
+## Why some pages need to use folder structure
+
+To create a page, there are few ways to achieve it. One of the solutions would be to use folder structure. For example, if we were to create a page called 'archive', then you can create the folder called 'archive' and then include index.html.  For pages that use jekyll-paginate functionality, it is mandatory to use this. Otherwise, the functionality would not work. Please do not use .md extension. Use `.html` only as it would not work if this extension is not used.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/jaehee0113/console. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+## Development
+
+To set up your environment to develop this theme, run `bundle install`.
+
+Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
+
+When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/_includes/category.html

@@ -0,0 +1,91 @@
+<div class="container-main-nopost">
+{% if include.param == 'post' %}
+  {% assign curr_size = site.categories[page.category] | size %}
+  {% unless curr_size > 0 %}
+    {% assign word = page.category %}
+    <h3> {% localize no_related_post %} {% localize word %} </h3>
+  {% endunless %}
+{% endif %}
+</div>
+
+{% if include.param != 'post' %}
+<div class="category">
+
+  {% if include.param == 'main' %}
+    <ul class="category-list">
+  {% endif %}
+
+  {% for category in site.data.categories %}
+
+    {% if include.param == 'main' %}
+      <li class="category-list-enclosure">
+        <a class="category-list-link" href="{{site.production_url}}/category{{category.href}}">
+          {% assign word = category.id %}
+          {% localize word %}
+          {% if forloop.last %}<blink>_</blink>{% endif %}
+        </a>
+    {% endif %}
+
+    {% if category.subcategories != null and category.id != page.category %}
+      <ul class="category-sub-list">
+
+        {% if include.param == 'main' %}
+
+          {% for subcategory in category.subcategories %}
+            <li class="category-sub-list-enclosure">
+              <a class="category-sub-list-link" href="{{site.production_url}}/category{{category.href}}{{subcategory.href}}">
+                {% assign word = subcategory.id %}{% localize word %}
+              </a>
+            </li>
+          {% endfor %}
+
+        {% else %}
+
+          {% for category in site.data.categories %}
+            {% assign category_title = category.title | downcase %}
+            {% if category_title == page.category %}
+              {% for subcategory in category.subcategories %}
+                <li class="category-sub-list-enclosure">
+                  <a class="category-sub-list-link" href="{{site.production_url}}/category{{category.href}}{{subcategory.href}}">
+                    {% assign word = subcategory.id %}{% localize word %}
+                  </a>
+                </li>
+              {% endfor %}
+            {% endif %}
+          {% endfor %}
+
+        {% endif %}
+
+      </ul>
+    {% endif %}
+
+    {% if include.param == 'main' %}
+      </li>
+    {% endif %}
+
+  {% endfor %}
+
+  {% if include.param == 'main' %}
+    </ul>
+  {% endif %}
+
+</div>
+{% else %}
+  {% if curr_size > 0 %}
+  <ul class="post-list">
+      {% assign posts = site.categories[page.category] | sort:"date" | reverse %}
+      {% for post in posts %}
+      <li class="post-list-enclosure-2pr">
+        <div class="card-details">
+          <div class="card-details-header">
+            <span class="card-details-header-title">{{post.title}}</span>
+          </div>
+          <div class="card-details-readmore">
+            <a href="{{post.url}}"> {% localize readmore %} > </a>
+          </div>
+        </div>
+      </li>
+      {% endfor %}
+  </ul>
+  {% endif %}
+{% endif %}

data/_includes/comment.html

@@ -0,0 +1,25 @@
+<div id="disqus_thread"></div>
+<script>
+{% if page.disqus_identifier %}
+var disqus_identifier = '{{page.disqus_identifier}}';
+{% else %}
+var disqus_identifier = '{{page.url}}';
+{% endif %}
+var disqus_shortname = 'Philsensus';
+/**
+*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
+*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
+/*
+var disqus_config = function () {
+this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
+this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+};
+*/
+(function() { // DON'T EDIT BELOW THIS LINE
+var d = document, s = d.createElement('script');
+s.src = '//philsensus.disqus.com/embed.js';
+s.setAttribute('data-timestamp', +new Date());
+(d.head || d.body).appendChild(s);
+})();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

data/_includes/footer.html

@@ -0,0 +1,25 @@
+<footer class="site-footer">
+
+  <div class="wrapper">
+    <div class="footer-col-wrapper">
+      <div class="footer-col footer-col-1">
+        <a class="anchor" href="#top">{% svgicon chevron-top %}</a>
+      </div>
+      <div class="footer-col footer-col-2">
+        <p>2017 @ Powered by Github Pages and Jekyll {% svgicon jekyll %}, licensed under MIT License.</p>
+      </div>
+      <div class="footer-col footer-col-3">
+        <a class="footer-link-linkedin" href="http://linkedin.com/in/{{site.linkedin_username}}">
+          {% svgicon linkedin %}
+        </a>
+        <a class="footer-link-github" href="http://github.com/{{site.github_username}}">
+          {% svgicon github %}
+        </a>
+        <a class="footer-link-youtube" href="http://youtube.com/{{site.youtube_username}}">
+          {% svgicon youtube %}
+        </a>
+      </div>
+    </div>
+  </div>
+</footer>
+

data/_includes/global.html

@@ -0,0 +1,33 @@
+<div class="site-global">
+  <div class="container">
+    <div class="container-inner">
+      <div class="container-inner-hamburger">
+        {% svgicon hamburger %}
+      </div>
+      <div class="container-main">
+        <a class="container-main-title" href="{{site.production_url}}">
+          {{site.title}}
+        </a>
+        <div class="container-main-language">
+          {% for language in site.languages %}
+            {% if language != 'en'%}
+              {% assign revised_url = {{site.production_url}} | append: '/' | append: {{language}} | append: {{page.url}} %}
+              {% if language == 'de'%}
+              <a class="container-main-language-link {% if language == site.active_lang %} active {% endif %}" id="{{language}}" href="{{revised_url}}">Deutsch</a>
+              {% endif %}
+              {% if language == 'ko' %}
+              <a class="container-main-language-link {% if language == site.active_lang %} active {% endif %}" id="{{language}}" href="{{revised_url}}">한국어</a>
+              {% endif %}
+            {% else %}
+            <a class="container-main-language-link {% if language == site.active_lang %} active {% endif %}" id="{{language}}" href="{{site.production_url}}">English</a>
+            {% endif %}
+          {% endfor %}
+
+        </div>
+      </div>
+      <div class="container-search">
+        {% svgicon search %}
+      </div>
+    </div>
+  </div>
+</div>

data/_includes/head.html

@@ -0,0 +1,29 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  {% if page.url == "/404" %}
+    <meta http-equiv="refresh" content="5; url=/">
+  {% endif %}
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {% if layout["layout"] == "post" %}
+    <title>{{page.title}}</title>
+  {% elsif layout["layout"] == "category" %}
+    {% unless site.active_lang == 'ko' %}
+    <title>{% assign word = page.category %}{% localize word %}</title>
+    {% else %}
+      <title>{{page.title}}</title>
+    {% endunless %}
+  {% else %}
+    {% assign word = page.title | downcase | replace: ' ', '_' %}
+    <title>{% localize word %}</title>
+  {% endif %}
+  <meta name="description" content="{{site.description}}">
+  <link rel="stylesheet" type="text/css" href="{{site.production_url}}/public/css/style.min.css">
+  <link href="https://fonts.googleapis.com/css?family=PT+Sans|Press+Start+2P|Pacifico" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">
+  <script
+  src="https://code.jquery.com/jquery-3.1.1.min.js"
+  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+  crossorigin="anonymous"></script>
+  <script src="{{site.production_url}}/public/js/client.min.js"></script>
+</head>

data/_includes/header.html

@@ -0,0 +1,20 @@
+  <header class="site-header" role="banner">
+  <div id="top"></div>
+  <div class="wrapper-title">
+  	{% if layout["layout"] == "post" %}
+      <div class="site-title-header">{% assign word = 'posts' %}{% localize word %}/{{page.title | downcase | replace: ' ', '_'}}<blink>_</blink></div>
+    {% elsif layout["layout"] == "category" %}
+      {% unless site.active_lang == 'ko' %}
+      <div class="site-title-header">
+        {% assign word = 'category' %}{% localize word %}/{% assign word = page.category %}{% localize word %}<blink>_</blink>
+      </div>
+      {% else %}
+      <div class="site-title-header">category/{{page.title | downcase | replace: ' ', '_'}}<blink>_</blink>
+      </div>
+      {% endunless %}
+    {% else %}
+      {% assign word = page.title | downcase | replace: ' ', '_' %}
+      <div class="site-title-header">{% localize word %}<blink>_</blink></div>  
+    {% endif %}
+  </div>
+</header>

data/_includes/home.html

@@ -0,0 +1,51 @@
+<div class="post">
+  <div class="post-list-title">
+    <span class="post-title">
+      {% localize recent_posts %}
+    </span>
+  </div>
+  <ul class="post-list">
+    {% assign posts = site.posts | sort:"date" | reverse %}
+    {% for post in posts limit: 3 %}
+    <li class="post-list-enclosure-2pr">
+      <div class="card-details">
+        <div class="card-details-header">
+          <span class="card-details-header-title">{{post.title}}</span>
+
+          <span class="card-details-header-category">
+          {% for category in post.categories %}
+            {{category}}
+          {% endfor %}
+          </span>
+          <span class="card-details-header-date">
+            {% assign dateStrings = post.date | date_to_long_string | split: ' ' %}
+            {% for dateString in dateStrings %}
+              {% assign word = dateString | downcase %}
+              {% capture datatype %} {% typecheck word %} {% endcapture %}
+              {% assign datatype = datatype | strip %}
+              {% if datatype == 'int' %}
+                {{word}}
+              {% else %}
+                {% localize word %}
+              {% endif %}
+            {% endfor %}
+          </span>
+        </div>
+        <div class="card-details-main">
+          {{post.content | truncatewords: 30}}
+        </div>
+        <div class="card-details-readmore">
+          <a href="{{post.url}}">{% localize readmore %} > </a>
+        </div>
+      </div>
+    </li>
+    {% endfor %}
+  </ul>
+  <div class="post-list-full">
+    <a class="post-list-full-button-outline-link" href="{{site.production_url}}/archive/">
+      <div class="post-list-full-button-outline">
+        <span class="post-list-full-button"> {% localize view_all %} </span>
+      </div>
+    </a>
+  </div>
+</div>

data/_includes/navigation.html

@@ -0,0 +1,21 @@
+<nav class="site-navigation">
+  <div class="site-navigation-close">
+    {% svgicon cross %}
+  </div>
+  <div class="site-title-container">
+        <a class="site-title-container-header" href="/">{{site.title}}</a>
+  </div>
+  <ul class="menu-list">
+    {% assign navigation_pages = site.html_pages | sort: 'navigation_weight' %}
+    {% for p in navigation_pages %}
+      {% if p.navigation_weight %}
+        <li class="menu-item">
+          <a href="{{site.baseurl}}{{p.url}}" {% if p.url == page.url %} class="active menu-link" {% else %} class="menu-link" {% endif %}>
+            {% assign word = p.title | downcase %}
+            {% localize word %}
+          </a>
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+</nav>

data/_includes/not_found.html

@@ -0,0 +1,8 @@
+<div class="site-404">
+  <div class="site-404-icon">
+    {% svgicon 404 %}
+  </div>
+  <div class="site-404-title">
+    {% localize page_not_found %}
+  </div>
+</div>

data/_includes/search.html

@@ -0,0 +1,44 @@
+{% if include.param != 'search' %}
+<div class="container-search-main">
+{% endif %}
+  <div class="container-search-inner">
+    {% if include.param != 'search' %}
+      <label class="container-search-inner-label" for="search-box">{% localize search %}</label>
+    {% endif %}
+    {% if site.active_lang == 'en' %}
+      <form class="container-search-inner-form" id="search-form" action="{{site.production_url}}/search/" method="get">
+    {% else %}
+      <form class="container-search-inner-form" id="search-form" action="{{site.production_url}}/{{site.active_lang}}/search/" method="get">
+    {% endif %}
+      <div class="container-search-inner-form-input">
+        <input type="text" placeholder="{% localize lookformore %}" class="container-search-inner-form-box" id="search-box" name="query">
+      </div>
+      <div class="container-search-inner-form-submit">
+        <input class="container-search-inner-form-submit-button" type="submit" value="{% localize go %}">
+      </div>
+    </form>
+  </div>
+{% if include.param != 'search' %}
+</div>
+{% endif %}
+
+{% if include.param == 'search' %}
+  <ul class="post-list" id="search-results"></ul>
+  <div class="pagination"></div>
+
+  <script>
+    window.store = {
+      {% for post in site.posts %}
+        "{{ post.url | slugify }}": {
+          "title": "{{ post.title | xml_escape }}",
+          "author": "{{ post.author | xml_escape }}",
+          "category": "{{ post.categories[0] | xml_escape }}",
+          "date": "{{post.date | date_to_long_string}}",
+          "content": {{ post.content | strip_html | strip_newlines | jsonify }},
+          "url": "{{ post.url | xml_escape }}"
+        }
+        {% unless forloop.last %},{% endunless %}
+      {% endfor %}
+    };
+  </script>
+{% endif %}

data/_layouts/category.html

@@ -0,0 +1,21 @@
+---
+layout: category
+---
+<!DOCTYPE html>
+<html>
+  <head>
+    {% include head.html %}
+  </head>
+  <body>
+    {% include navigation.html %}
+    <div class="application">
+      {% include global.html %}
+      {% include search.html %}
+      {% include header.html %}
+      <section class="wrapper category-main">
+        {{content}}
+      </section>
+    </div>
+  </body>
+  {% include footer.html %}
+</html>

data/_layouts/default.html

@@ -0,0 +1 @@
+{{ content }}

data/_layouts/home.html

@@ -0,0 +1,21 @@
+---
+layout: home
+---
+<!DOCTYPE html>
+<html>
+  <head>
+    {% include head.html %}
+  </head>
+  <body>
+    {% include navigation.html %}
+    <div class="application">
+      {% include global.html %}
+      {% include search.html %}
+      {% include header.html %}
+      <section class="wrapper home">
+        {{content}}
+      </section>
+    </div>
+  </body>
+  {% include footer.html %}
+</html>

data/_layouts/main.html

@@ -0,0 +1,21 @@
+---
+layout: main
+---
+<!DOCTYPE html>
+<html>
+  <head>
+    {% include head.html %}
+  </head>
+  <body>
+    {% include navigation.html %}
+    <div class="application">
+      {% include global.html %}
+      {% include search.html %}
+      {% include header.html %}
+      <section class="wrapper main">
+        {{content}}
+      </section>
+    </div>
+  </body>
+  {% include footer.html %}
+</html>

data/_layouts/page.html

@@ -0,0 +1,21 @@
+---
+layout: page
+---
+<!DOCTYPE html>
+<html>
+  <head>
+    {% include head.html %}
+  </head>
+  <body>
+    {% include navigation.html %}
+    <div class="application">
+      {% include global.html %}
+      {% include search.html %}
+      {% include header.html %}
+      <section class="wrapper page">
+        {{content}}
+      </section>
+    </div>
+  </body>
+  {% include footer.html %}
+</html>