imdhemy-jekyll-theme 0.1.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1515c0ede2f0e2f57a4ba4a73ab0d572884b971d7d403eddfc3eb10effc63711
-  data.tar.gz: 7fd36ddbd7002a8942de8be2395de69e6498c62947d1db15437898729b73ace4
+  metadata.gz: 179d0424722ed53ef5573005cf1e0368bf2d89bb2ac245e916469ef929b9919f
+  data.tar.gz: '093cee0a2647463971ba89a45044cfb8e0fd13ab40f2d7231124ada95cfe95d5'
 SHA512:
-  metadata.gz: 74e4c503fbcdc91e5b21a1076f0928286dec9d50350a883460bdefce263f33b2d0090d59764e0163a48f620b06367d225ea404d37785d44c31fe44c4966e46bb
-  data.tar.gz: cab8c356554ef5cb0e598eda95ebad05bce0897209183d74af96e4ee8638eed3abf6a120f0e3ffb92478ac661ac7a23704de4e83b04b82782b29fec1b65ebae2
+  metadata.gz: 74469dd324a8d26623efe87445b80e1ade7c41db4d4ea9339459a38a4b81dc92416c8d7c5ffa3742ce2f26bb009092cc71ad6740b8f5fbbda57d24b7e08e6cbb
+  data.tar.gz: 96cf8cd47b2f64084573064bf9169da41c14f7ed6560deb85f280d905c1ed9d5a8f1dcd358fd577b1790c95ccd655e5618ee3df8e7ed841ec31329f561ef077c

data/README.md

@@ -1,2 +1,98 @@
 # Imdhemy Jekyll Theme
-[...]
+
+Jekyll theme for my personal website. [imdhemy.com](https://imdhemy.com)
+
+## Installation (Recommended: RubyGem)
+
+Install the theme as a gem and pin a semantic version.
+
+Add to your site's `Gemfile`:
+
+```ruby
+gem "imdhemy-jekyll-theme", "1.0.0"
+```
+
+Set the theme in your site's `_config.yml`:
+
+```yaml
+theme: imdhemy-jekyll-theme
+```
+
+Then run:
+
+```bash
+bundle install
+```
+
+## Migrating From `remote_theme`
+
+If your site currently uses:
+
+```yaml
+remote_theme: imdhemy/imdhemy-jekyll-theme
+```
+
+Migrate to the gem flow:
+
+1. Remove `remote_theme` from `_config.yml`.
+2. Add `theme: imdhemy-jekyll-theme` to `_config.yml`.
+3. Add `gem "imdhemy-jekyll-theme", "<semantic-version>"` to your `Gemfile`.
+4. Run `bundle install`.
+
+## Usage
+
+You can find examples in the [example](/example) directory.
+
+## Development Quick Start
+
+Use this sequence every time you start working on the theme locally.
+
+### 1. Prerequisites
+
+- Ruby 3.3.4 + Bundler
+- Node.js 24 + npm
+
+The project pins runtime versions in:
+
+- `.ruby-version`
+- `.nvmrc`
+- `.node-version`
+- `.tool-versions`
+
+### 2. Install dependencies
+
+```bash
+bundle install
+npm install
+```
+
+### 3. Start development
+
+Run the theme preview and JS watcher together:
+
+```bash
+npm start
+```
+
+This runs:
+
+- `bundle exec rake preview` to serve the example site from `http://127.0.0.1:4000/example/`
+- `vite build --watch` to rebuild `assets/js/dist/main.js` on JS changes
+
+### 4. Day-to-day workflow
+
+- Edit layouts/includes/styles in the theme root.
+- Edit sample content under `example/` to verify real pages.
+- Keep `npm start` running while you work.
+
+### 5. Useful standalone commands
+
+```bash
+npm run rake      # Jekyll preview only
+npm run js:build  # JS production build
+npm run js:watch  # JS watcher only
+```
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](/LICENSE.txt).

data/_includes/content.html

@@ -1,3 +1,3 @@
-<div class="max-w-screen-md mx-auto bg-white p-5 text-xl content">
+<div class="m-auto max-w-screen-md bg-white p-5 text-xl content">
     {{ content }}
 </div>

data/_includes/contributions.html

@@ -1,3 +1,4 @@
+{% if site.contributions.size > 0 %}
 <section class="mb-8">
     <div class="container mx-auto">
         <div class="p-5 max-w-screen-lg mx-auto">
@@ -18,3 +19,4 @@
         </div>
     </div>
 </section>
+{% endif %}

data/_includes/header.html

@@ -13,7 +13,7 @@
             <!-- begin right part -->
             <div class="flex-auto">
                 <div class="flex justify-end lg:hidden">
-                    <button type="button">
+                    <button type="button" class="menu-toggle" data-target="#mobile-nav">
                         <ion-icon name="menu-outline"></ion-icon>
                     </button>
                 </div>
@@ -34,7 +34,7 @@
             </div>
             <!-- begin mobile nav -->
             <nav id="mobile-nav"
-                 class="-z-10 opacity-0 absolute top-32 right-6 block min-w-fit w-40 bg-white p-5 rounded-md shadow-md ease-linear">
+                 class="menu -z-10 opacity-0 absolute top-32 right-6 block min-w-fit w-40 bg-white p-5 rounded-md shadow-md ease-linear">
                 <div class="ml-auto">
                     <ul class="p-0 m-0 flex-column items-center">
                         {% for page in site.navigation %}

data/_includes/post-header.html

@@ -1,11 +1,11 @@
-<div class="max-w-screen-lg mx-auto bg-white p-5">
-    <h1 class="font-black font-sans text-2xl lg:text-7xl post-title">{{ page.title }}</h1>
+<div class="max-w-screen-md mx-auto bg-white p-5">
+    <h1 class="font-black font-sans text-2xl lg:text-4xl post-title">{{ page.title }}</h1>
 </div>
 
 <div class="max-w-screen-md mx-auto bg-white p-5">
     <div class="flex justify-between flex-wrap my-2">
         <div class="flex items-center mr-8">
-            <img src="{{ site.baseurl }}/{{ site.author.avatar }}" alt="{{ author.name }}"
+            <img src="{{ site.baseurl }}{{ site.author.avatar }}" alt="{{ author.name }}"
                  class="rounded-full w-10 h-10 mr-3 block"/>
             <div>
                 <p class="text-gray-700 text-sm font-bold">{{ site.author.name }}</p>
@@ -24,9 +24,15 @@
 
     {% if page.image %}
     <div class="relative overflow-hidden">
-        <img src="{{ site.baseurl }}/{{ page.image }}"
-             alt="{{ page.title }}"
+        <img src="{{ site.baseurl }}{{ page.image }}"
+             alt="{{ page.image_alt | default: page.title }}"
              class="w-full h-auto rounded"/>
+        <!-- Image source -->
+        {% if page.image_source %}
+        <div class="bg-white text-xs text-gray-500 px-2 py-1">
+            Image source: {{ page.image_source }}
+        </div>
+        {% endif %}
     </div>
     {% endif %}
 </div>

data/_includes/post-item.html

@@ -1,11 +1,13 @@
 <article class="flex flex-col lg:flex-row items-center mb-8 pb-8 border-b border-gray-200">
     <!-- thumbnail -->
+    {% if post.image %}
     <a href="{{ site.baseurl }}{{ post.url }}"
        class="w-full relative block lg:min-w-[250px] lg:max-w-[250px] lg:max-h-[250px] aspect-square lg:mr-5 mb-5 lg:mb-0 rounded-lg overflow-hidden">
         <img src="{{ site.baseurl }}{{ post.image }}"
              class="absolute inset-0 w-full h-full object-cover hover:scale-105 ease-in duration-300"
              alt="{{ post.title }}"/>
     </a>
+    {% endif %}
     <!-- content -->
     <div>
         {% assign tags = post.tags %}

data/_includes/social-media-meta.html

@@ -0,0 +1,16 @@
+<!-- Facebook Meta Tags -->
+<meta property="og:title" content="{{ page.title | escape }}">
+<meta property="og:type" content="article">
+<meta property="og:image" content="{{ site.url }}{{ site.baseurl }}{{ page.image }}">
+<meta property="og:url" content="{{ site.url }}{{ site.baseurl }}{{ page.url }}">
+<meta property="og:description"
+      content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+<meta property="og:site_name" content="{{ site.title | escape }}">
+
+<!-- Twitter Meta Tags -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="{{ page.title | escape }}">
+<meta name="twitter:description"
+      content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+<meta name="twitter:image" content="{{ site.url }}{{ site.baseurl }}{{ page.image }}">
+

data/_includes/social.html

@@ -20,7 +20,7 @@
                 </div>
             </div>
         </div>
-        <div class="bg-[url('{{ site.baseurl }}{{ site.footer.bg_image }}')] opacity-75 absolute top-0 left-0 w-full h-full bg-bottom bg-cover -z-10"></div>
+        <div class="bg-social opacity-75 absolute top-0 left-0 w-full h-full bg-bottom bg-cover -z-10"></div>
         <div class="absolute top-0 left-0 w-full h-full bg-black -z-20"></div>
     </div>
 </section>

data/_includes/testimonials.html

@@ -1,3 +1,4 @@
+{% if site.testimonials.size > 0 %}
 <section class="mb-8">
     <div class="container mx-auto">
         <div class="p-5 max-w-screen-lg mx-auto">
@@ -8,8 +9,9 @@
                 <div class="w-full">
                     <div class="relative p-8 overflow-hidden bg-violet-100 rounded-3xl">
                         <div class="relative z-1 flex items-center mb-8">
-                            <div class="relative w-[68px] h-[68px] mr-3 border-2 border-indigo-600 rounded-full">
-                                <img class="absolute top-0 left-0 w-full h-full object-cover rounded-full select-none p-[2px]"
+                            <div class="relative min-w-[68px] min-h-[68px] mr-3 border-2 border-indigo-600 rounded-full">
+                                <img width="40px" height="40px"
+                                     class="absolute top-0 left-0 w-full h-full object-cover rounded-full select-none p-[2px]"
                                      src="{{ testimonial.image }}"
                                      alt=""/>
                             </div>
@@ -34,3 +36,4 @@
         </div>
     </div>
 </section>
+{% endif %}

data/_layouts/default.html

@@ -8,11 +8,28 @@
     <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
     <meta name="description"
           content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
+
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&display=swap"
+          rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap"
+          rel="stylesheet">
+
     <link rel="canonical" href="{{ page.url | replace:'index.html', '' | absolute_url }}">
     <link rel="stylesheet" href="{{ '/assets/css/main.css?v=' | append: site.github.build_revision | relative_url }}">
+    {% if site.favicon %}
+    <link rel="icon" type="image/png" href="{{ site.favicon | relative_url }}">
+    {% endif %}
     {% if page.math %}
     {% include math.html %}
     {% endif %}
+
+    {% if page.layout == 'post' %}
+    {% include social-media-meta.html %}
+    {% endif %}
+
 </head>
 <body class="min-h-screen">
 <div class="min-h-screen">
@@ -23,11 +40,6 @@
     {% include footer.html %}
 </div>
 
-
-<!-- Ion icons -->
-<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
-<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
-
 <!-- Main JS file -->
 <script src="{{ '/assets/js/dist/main.js?v=' | append: site.github.build_revision | relative_url }}"></script>
 </body>

data/_sass/base/_reset.scss

@@ -0,0 +1,227 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  border: 0 solid #e5e7eb;
+}
+
+*::before,
+*::after {
+  --tw-content: "";
+}
+
+html,
+:host {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  font-family: "Noto Sans Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  margin: 0;
+  line-height: inherit;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace;
+  font-size: 1em;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+table {
+  border-collapse: collapse;
+  border-color: inherit;
+  text-indent: 0;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+input:where([type="button"]),
+input:where([type="reset"]),
+input:where([type="submit"]) {
+  appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  appearance: textfield;
+  outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+  appearance: none;
+}
+
+::-webkit-file-upload-button {
+  appearance: button;
+  font: inherit;
+}
+
+summary {
+  display: list-item;
+}
+
+blockquote,
+dd,
+dl,
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset,
+legend,
+menu,
+ol,
+ul,
+dialog {
+  margin: 0;
+  padding: 0;
+}
+
+menu,
+ol,
+ul {
+  list-style: none;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+  display: block;
+  vertical-align: middle;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}

data/_sass/base/_typography.scss

@@ -0,0 +1,24 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  tap-highlight-color: transparent;
+}
+
+::selection {
+  background: #4d41e0;
+  color: #fff;
+}
+
+::-moz-selection {
+  background: #4d41e0;
+  color: #fff;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Noto Serif", Georgia, Cambria, "Times New Roman", Times, serif;
+}