Create landing page layout (#7)

* fix UI issues of profile-card * create sample posts in the main page * allow users to see table of contents for top 2 level * document all the config variables and customizations in README.md * document usage of the theme in README.md Not an issue: * it do not occupy the entire screen * is not center aligned on mobile screens * no fixed size of background or profile image Resolves #2
sudharkj · Jun 30, 2019 · 851dbd8 · 851dbd8
1 parent a265a25
commit 851dbd8
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,22 @@
-# Material::Jekyll
+# material-jekyll
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/material/jekyll`. To experiment with that code, run `bin/console` for an interactive prompt.
+Project material-jekyll is a [Jekyll](https://jekyllrb.com/) theme supporting 
+[Material Design for Bootstrap](https://fezvrasta.github.io/bootstrap-material-design/). 
 
-TODO: Delete this and the text above, and describe your gem
+The theme is built on an Ruby gem using free version of 
+[MDB for jQuery](https://mdbootstrap.com/docs/jquery/)
+for material design and [Jekyll](https://github.com/jekyll/jekyll) `3.8` plugin to generate
+the static files with some customisations.
 
 ## Installation
 
+1. Install all the gem dependencies [\[ref: bundler\]](https://bundler.io/man/bundle-install.1.html).
+1. Start the server by running
+    ```ruby
+    bundle exec jekyll serve --host=0.0.0.0
+    ```
+   and open `http://0.0.0.0:4000/` in the browser to see the changes.
+
 Add this line to your application's Gemfile:
 
 ```ruby
@@ -22,17 +33,61 @@ Or install it yourself as:
 
 ## Usage
 
-TODO: Write usage instructions here
+1. Create an empty project for your site [\[ref: github\]](https://pages.github.com/).
+1. Create `index.html` and set the layout. Also, put all the information on your site with [Variables](https://jekyllrb.com/docs/variables/)
+following the **Configuration** section.
+1. Add the following additional variable to `_config.yml` to use this remote theme. 
+    ```yaml
+    remote_theme: sudharkj/material-jekyll
+    ```
+1. Add any custom changes as suggested in **Development** based on the requirement.
+1. Follow instructions in **Installation** to see your changes.
+
+## Configuration
+
+Following config variables are for the profile card on the landing page. 
+Note that this is intended to show your profile in a short card.
+
+| variable | value | description|
+| --- | --- | --- |
+| profile-link | publicly accessible link | image link to be shown above the profile image |
+| profile-color | any bootstrap color | color to be shown in case profile-link is not provided |
+| avatar-link | link to the profile photo | public link to the profile photo |
+| name | name of the person | name of the person |
+| title | title of the person | title of the person |
+| caption | caption to be shown | caption to be shown to people |
+| attachment-text | attachment text | attachment text |
+| attachment-link | attachment link | publicly accessible link to the attachment |
+| facebook | link to facebook profile | do not add it if not required |
+| twitter | link to twitter profile | do not add it if not required |
+| linkedin | link to linkedin profile | do not add it if not required |
+| instagram | link to instagram profile | do not add it if not required |
+| stack-overflow | link to stack-overflow profile | do not add it if not required |
+| youtube | link to youtube profile | do not add it if not required |
+| github | link to github profile | do not add it if not required |
+| reddit | link to reddit profile | do not add it if not required |
+| show-table-of-contents | true or false | whether to show table of contents |
+| landing-page-order | comma with space separated list of markdown file names | markdown files showing various content is added and template takes care of formatting |
+
+**Note:**
+* Currently, specific dimensions are not set for profile-link and avatar-link. So, proper dimension images are to be added. 
+* All referred links should be public.
+* This is a base theme to support MDB in Jekyll pages. So, custom templates are allowed 
+by creating [LAYOUT].html in `_includes` and referring that in layout in `index.html`.
 
 ## Development
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
-
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+1. Clone the repository [\[ref: github\]](https://help.github.com/en/articles/cloning-a-repository).
+1. Make any changes to the local repository. 
+1. Stash the files to git using the following command and 
+follow the instructions in **Installation** to see the changes.
+    ```text
+    git add .
+    ```
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/material-jekyll.
+Bug reports and pull requests are welcome on GitHub at [sudharkj/material-jekyll](https://github.com/sudharkj/material-jekyll).
 
 ## License
 

diff --git a/_config.yml b/_config.yml
@@ -28,3 +28,10 @@ attachment-link: https://github.com/
 #youtube: https://youtube.com/
 #github: https://github.com/
 #reddit: https://www.reddit.com/
+
+################
+# Page Details #
+################
+
+show-table-of-contents: true
+landing-page-order: posts/projects.md, posts/all-projects.md
diff --git a/_layouts/default.html b/_layouts/default.html
diff --git a/_layouts/landing.html b/_layouts/landing.html
@@ -19,14 +19,26 @@
 <body>
 
 <!-- Start your project here-->
-<main>
+<main class="min-vh-100">
     <div class="container">
         <div class="row">
-            <div class="col-12 col-sm-6 col-md-4">
+            <div class="col-12 col-sm-6 col-md-4 mt-1 mb-2 pl-1 pr-1">
                 {% include profile-card.html %}
             </div>
             <div class="col-12 col-sm-6 col-md-8">
-                {{ content }}
+                <div class="row">
+                    <div class="content">
+                        {% assign modals = site.landing-page-order | split:", " %}
+                        {% for modal in modals %}
+                        <div class="card mt-1 mb-2">
+                            <div class="card-body">
+                                {% capture my_include %}{% include_relative {{ modal }} %}{% endcapture %}
+                                {{ my_include | markdownify }}
+                            </div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -42,6 +54,21 @@
 <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="assets/js/mdb.min.js"></script>
+<!-- Custom JavaScript -->
+<script type="text/javascript" src="assets/js/script.js"></script>
+{% if site.show-table-of-contents %}
+<script>
+    $(function () {
+        showTableOfContents(true);
+    })
+</script>
+{% else %}
+<script>
+    $(function () {
+        showTableOfContents(false);
+    })
+</script>
+{% endif %}
 </body>
 
 </html>
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,6 +1,5 @@
-.profile-card {
-    max-width: 22rem;
-    margin: 1px 0px 3px;
+main {
+    background-color: #ededee;
 }
 
 .profile-card .card-up {

diff --git a/assets/js/script.js b/assets/js/script.js
@@ -0,0 +1,53 @@
+function updateTableOfContents(content, tableOfContentsDiv) {
+    let contents = $('<ul></ul>');
+
+    $.each(content.find('.card-body'), function(ind, element) {
+        // console.log($(element));
+        for (let h1 = 1; h1 <= 6; h1++) {
+            let tag1 = 'h' + h1 + '_' + ind;
+            let header1 = $(element).find('h' + h1);
+            if (header1.text()) {
+                header1.attr('id', tag1);
+                let content1 = $('<a />', {href: '#'+tag1, text: header1.text()});
+                content1 = $('<li />', {html: content1});
+                for (let h2 = h1 + 1; h2 <= 6; h2++) {
+                    let header2s = $(element).find('h'+h2);
+                    console.log('h'+h2, header2s);
+                    if (header2s.length > 0) {
+                        let level2 = $('<ul></ul>');
+                        $.each(header2s, function(ind, element) {
+                            let tag2 = tag1 + '_' + ind;
+                            let header2 = $(element);
+                            header2.attr('id', tag2);
+                            let content2 = $('<a />', {href: '#'+tag2, text: header2.text()});
+                            content2 = $('<li />', {html: content2});
+                            level2.append(content2);
+                        });
+                        content1.append(level2);
+                        break;
+                    }
+                }
+                contents.append(content1);
+                console.log(header1);
+                // $(table).append("<li>" + header + "</li>");
+                break;
+            }
+        }
+    });
+    tableOfContentsDiv.append(contents);
+}
+
+function showTableOfContents(isShow) {
+    const content = $('.content');
+    if (isShow) {
+        let tableOfContents = $('<div />', {class: 'card-body', text: 'Table of contents:'});
+        tableOfContents = $('<div />', {class: 'card mt-1 mb-2', html: tableOfContents});
+        tableOfContents = $('<div />', {class: 'table-of-contents', html: tableOfContents});
+        content.parent().append(tableOfContents);
+        content.addClass('col-sm-12 col-md-8 pl-2 pr-2');
+        tableOfContents.addClass('col-sm-12 col-md-4 pl-1 pr-1');
+        updateTableOfContents(content, $(tableOfContents.find('.card-body')));
+    } else {
+        content.addClass('col-sm-12 col-md-12 pl-2 pr-1');
+    }
+}
diff --git a/index.html b/index.html
@@ -1,6 +1,3 @@
 ---
 layout: landing
 ---
-
-<div class="col-sm-12 col-md-8"></div>
-<div class="col-sm-12 col-md-4"></div>
diff --git a/posts/all-projects.md b/posts/all-projects.md
@@ -0,0 +1,3 @@
+#### Other Repositories
+
+All my other repositories can be found at [material-jekyll](https://github.com/sudharkj/material-jekyll).
diff --git a/posts/projects.md b/posts/projects.md
@@ -0,0 +1,5 @@
+#### Interesting Repositories
+
+###### Ruby
+
+* [material-jekyll](https://github.com/sudharkj/material-jekyll): Jekyll theme supporting material design with bootstrap 4 for github pages.