tear-jekyll-theme 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 169c9f84e9da00330e033e866b1f4f198806b25220a9e03584f62ff2e88dc3bf
+  data.tar.gz: 9521c6a9a87e8d201ce022b5b65bcb184becf3302526b2694313a5934f0ff79d
+SHA512:
+  metadata.gz: 612c65c1fe87f77ee0c41562311428190c0df2434e06741d70ddca9207de148472f91da245a9015df272e6c30a8c472dba01e776cb0fc6feb839d73de6a5957a
+  data.tar.gz: 773cdee5153a793f53602cc7f5f4a30ac2d2158a18ba6c3d2cbd7c0ab426eb1ba81e27576868fcd7748b0f007924428860732aabbdcfea80ea1117c3bd8b31ca

data/README.md

@@ -0,0 +1,110 @@
+<img src="https://i.ibb.co.com/sdVSmQ5x/niri-logo.png" alt="drawing" width="300"/>
+
+[![Gem](https://img.shields.io/gem/v/niri.svg)](https://rubygems.org/gems/niri)
+[![Gem](https://img.shields.io/gem/dt/niri.svg)](https://rubygems.org/gems/niri)
+
+# About
+Theme blog for jekyll using Bulma css.
+
+Live Demo : https://rokhimin.github.io
+
+## Features
+- Modern UI
+- Dark/Light Mode ( I set default Darkmode first time user open website )
+- Comment (Disqus)
+- Logo
+- Page Projects
+- many more
+
+## Installation Jekyll
+
+    $ gem install jekyll
+
+
+create first app
+
+    $ jekyll new yournameapp
+
+
+## Installation Theme 
+
+Installation theme Niri to your jekyll app
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "niri"
+```
+
+And add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: niri
+```
+
+And then execute:
+
+    $ bundle
+
+
+Run jekyll:
+
+    $ bundle exec jekyll s
+
+## Setup
+
+##### copy to _config.yml
+
+```yaml
+title: Niri
+email: youremail@gmail.com
+description: yourdesc
+baseurl: "" 
+url: "" 
+footer: Example Theme <a href="https://github.com/rokhimin/jekyll-niri">Niri</a> [/code] by whdzera
+twitter_username: whdzera
+github_username:  rokhimin
+logo: niri-logo.png 
+theme: niri
+photo_profile: ""
+disqus: ""
+```
+
+##### Create file 'projects.markdown' in '/' to use page Projects feature
+
+##### copy to projects.markdown
+
+```
+---
+layout: projects
+permalink: /projects/
+---
+YOUR PROJECT
+```
+
+##### edit about.markdown
+
+```
+---
+layout: about
+permalink: /projects/
+---
+YOUR ABOUT
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/rokhimin/jekyll-niri. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.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`, `_sass` and `assets` tracked with Git will be bundled.
+To add a custom directory to your theme-gem, please edit the regexp in `niri.gemspec` accordingly.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_config.yml

@@ -0,0 +1,20 @@
+title: Tear
+email: whdzera@gmail.com
+description: >- # this means to ignore newlines until "baseurl:"
+  Write an awesome description for your new site here. You can edit this
+  line in _config.yml. It will appear in your document head meta (for
+  Google search results) and in your feed.xml site description.
+baseurl: "" 
+url: ""
+logo: Tear
+footer: "Created with ❤ by whdzera"
+twitter_username: jekyllrb
+github_username:  jekyll
+disqus: "rokhimin-1.disqus"
+
+plugins:
+  - jekyll-feed
+
+markdown: kramdown
+kramdown:
+  input: GFM

data/_includes/footer.html

@@ -0,0 +1,9 @@
+<footer class="bg-white dark:bg-gray-800 shadow-inner mt-12">
+  <div class="max-w-6xl mx-auto px-4 py-8">
+      <div class="text-center text-gray-500 dark:text-gray-400">
+        <p>{{ site.footer }}</p>
+        <p>Powered by <a href="https://jekyllrb.com/" class="text-blue-400">Jekyll</a></p>
+        <p>&copy;{{ site.time | date: '%Y' }} <a href="https://github.com/rokhimin/jekyll-tear" class="text-blue-400">Tear Theme</a>.</p>
+      </div>
+  </div>
+</footer>

data/_includes/head.html

@@ -0,0 +1,11 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}"> 
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
+  <link href="{{ site.baseurl }}/assets/css/output.css" rel="stylesheet" />
+  <script type="module" src="{{ site.baseurl }}/assets/js/application.js"></script>
+</head>

data/_includes/navigation.html

@@ -0,0 +1,93 @@
+<nav class="bg-white dark:bg-gray-800 shadow-md" data-controller="navbar">
+  <div class="max-w-6xl mx-auto px-4">
+    <div class="flex justify-between">
+      <div class="flex space-x-4">
+        <div class="flex items-center py-3">
+          <a href="/" class="font-bold text-3xl text-primary dark:text-blue-400">
+            {{ site.logo }}
+          </a>
+        </div>
+      </div>
+
+      <!-- Desktop Navigation -->
+      <div class="hidden md:flex items-center space-x-1">
+        <a
+          class="py-4 px-3 text-gray-700 dark:text-gray-200 hover:text-primary dark:hover:text-primary transition-colors duration-300"
+          href="{{ '/' | relative_url }}"
+          >Home</a
+        >
+        <a
+          class="py-4 px-3 text-gray-700 dark:text-gray-200 hover:text-primary dark:hover:text-primary transition-colors duration-300"
+          href="{{ '/projects/' | relative_url }}"
+          >Projects</a
+        >
+        <a
+          class="py-4 px-3 text-gray-700 dark:text-gray-200 hover:text-primary dark:hover:text-primary transition-colors duration-300"
+          href="{{ '/about/' | relative_url }}"
+          >About</a
+        >
+
+        <!-- Dark Mode Toggle Desktop -->
+        <button
+          class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300"
+          data-action="click->theme#toggle"
+        >
+          <span data-theme-target="icon" class="w-5 h-5"></span>
+        </button>
+      </div>
+
+      <!-- Mobile Navigation -->
+      <div class="md:hidden flex items-center">
+        <!-- Dark Mode Toggle Mobile -->
+        <button
+          class="mr-2 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300"
+          data-action="click->theme#toggle"
+        >
+          <span data-theme-target="icon" class="w-5 h-5"></span>
+        </button>
+
+        <!-- Burger Menu Button -->
+        <button
+          class="mobile-menu-button p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none transition-colors duration-300"
+          data-action="click->navbar#toggle"
+          aria-label="Toggle menu"
+        >
+          <!-- Hamburger Icon -->
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-7 w-7 text-gray-700 dark:text-gray-200"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 12h16M4 18h16"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Mobile Menu -->
+  <div class="mobile-menu hidden md:hidden" data-navbar-target="menu">
+    <a
+      class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-gray-200"
+      href="{{ '/' | prepend: site.baseurl }}"
+      >Home</a
+    >
+    <a
+      class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-gray-200"
+      href="{{ '/projects/' | prepend: site.baseurl }}"
+      >Projects</a
+    >
+    <a
+      class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-gray-200"
+      href="{{ '/about/' | prepend: site.baseurl }}"
+      >About</a
+    >
+  </div>
+</nav>

data/_layouts/about.html

@@ -0,0 +1,21 @@
+---
+layout: default
+---
+
+<div
+  class="relative md:mr-25 md:ml-25 bg-white dark:bg-gray-800 rounded-l-lg rounded-r-lg shadow-lg overflow-hidden mb-6"
+>
+<h1 class="text-3xl ml-5 mt-2 md:text-4xl font-bold text-primary dark:text-blue-400 animate-fade-in">
+  About
+</h1>
+<article class="max-w-4xl mx-auto px-4 sm:px-6 py-4">
+    <div class="h-px w-full bg-gradient-to-r from-black to-transparent dark:from-blue-400 mb-8"></div>
+    
+
+    <div class="prose dark:prose-invert prose-lg max-w-none text-gray-700 dark:text-gray-200">
+        
+    <img src="{{ site.photo_profile }}" alt="photo_profile" style="width:150px;" />
+      {{ content }}
+    </div>
+</article>
+</div>

data/_layouts/default.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html  lang="en">
+  {% include head.html %}
+  <body
+  class="bg-gray-100 dark:bg-gray-900 dark:text-white transition-colors duration-300 max-h-100 overflow-y-auto
+
+  /* Scrollbar Track */
+  [&::-webkit-scrollbar]:w-4.5
+  [&::-webkit-scrollbar-track]:rounded-full
+  [&::-webkit-scrollbar-track]:bg-gray-100
+  dark:[&::-webkit-scrollbar-track]:bg-gray-900
+
+  /* Scrollbar Thumb */
+  [&::-webkit-scrollbar-thumb]:absolute
+  
+  [&::-webkit-scrollbar-thumb]:bg-gray-400
+  dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700
+
+  /* Scrollbar Thumb on Hover */
+  [&::-webkit-scrollbar-thumb:hover]:bg-gray-500
+  dark:[&::-webkit-scrollbar-thumb:hover]:bg-neutral-400
+  "
+  data-controller="theme"
+>
+
+    {% include navigation.html %}  
+  <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    {{ content }}
+  </main>
+    {% include footer.html %}
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,51 @@
+---
+layout: default
+---
+
+<!-- Blog Content -->
+<div class="text-center mb-12">
+  <h1 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">
+    Welcome to My Blog
+  </h1>
+  <p class="text-gray-600 dark:text-gray-300 mx-auto max-w-2xl">
+    {{ site.description }}
+  </p>
+</div>
+
+{% assign posts_by_year = site.posts | group_by_exp:"post", "post.date | date:
+'%Y'" %} {% for year in posts_by_year %} {% for post in year.items %}
+<!-- Post Card -->
+<div
+  class="relative md:mr-25 md:ml-25 bg-white dark:bg-gray-800 rounded-l-lg rounded-r-lg shadow-lg overflow-hidden mb-6"
+>
+  <!-- Thumbnail -->
+  {% if post.thumbnail %}
+  <a href="{{ post.url | relative_url }}" data-controller="thumbnail">
+    <img
+      src="{{ post.thumbnail }}"
+      alt="Thumbnail {{ post.title }}"
+      data-thumbnail-target="image"
+      class="w-full h-48 object-cover transition duration-300 ease-in-out rounded-lg"
+    />
+  </a>
+
+  {% endif %}
+
+  <!-- Post Content -->
+  <div class="p-3">
+    <div
+      class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-1"
+    >
+      <i class="far fa-calendar"></i>
+      <span>{{ post.date | date: "%b %-d, %Y" }}</span>
+    </div>
+
+    <h3
+      class="text-2xl font-bold text-gray-800 dark:text-white hover:text-primary transition-colors"
+    >
+      <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+    </h3>
+  </div>
+</div>
+
+{% endfor %} {% endfor %}

data/_layouts/post.html

@@ -0,0 +1,57 @@
+---
+layout: default
+---
+
+<div
+  class="relative md:mr-25 md:ml-25 bg-white dark:bg-gray-800 rounded-l-lg rounded-r-lg shadow-lg overflow-hidden mb-6"
+>
+  <!-- Thumbnail -->
+<img
+  src="{{ base.url }}/{{ page.thumbnail }}"
+  alt="Thumbnail {{ page.title }}"
+  class="w-full h-48 object-cover rounded-lg shadow-sm transition-transform duration-300 hover:scale-105"
+/>
+
+    
+<article class="max-w-4xl mx-auto px-4 sm:px-6 py-8">
+    <h1 class="text-3xl md:text-4xl font-bold text-primary dark:text-blue-400 mb-4 animate-fade-in">
+      {{ page.title }}
+    </h1>
+    
+    <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-6">
+      <i class="far fa-calendar mr-2"></i>
+      <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%Y-%m-%d" }}</time>
+    </div>
+    
+    <div class="h-px w-full bg-gradient-to-r from-black to-transparent dark:from-blue-400 mb-8"></div>
+    
+    <div class="prose dark:prose-invert prose-lg max-w-none text-gray-700 dark:text-gray-200">
+      {{ content }}
+    </div>
+</article>
+</div>
+
+
+<div
+  class="relative md:mr-25 md:ml-25 bg-white dark:bg-gray-800 rounded-l-lg rounded-r-lg shadow-lg overflow-hidden mb-6"
+>
+{% if page.comments %} 
+<div class="p-3">
+<div id="disqus_thread"></div>
+</div>
+<script>
+var disqus_config = function () {
+    this.page.url = "{{ page.url | absolute_url }}";  
+    this.page.identifier = "{{ page.id }}"; 
+};
+
+(function() { 
+    var d = document, s = d.createElement('script');
+    s.src = 'https://{{ site.disqus }}.com/embed.js'; 
+    s.setAttribute('data-timestamp', +new Date());
+    (d.head || d.body).appendChild(s);
+})();
+</script>
+
+{% endif %}
+</div>

data/_layouts/projects.html

@@ -0,0 +1,3 @@
+---
+layout: default
+---

data/assets/css/input.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@custom-variant dark (&:where(.dark, .dark *));