tessera-jekyll-theme 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: d698752f107880b273524ba14c09d97948f37b562d26fd0852561f206edfc42e
+  data.tar.gz: 90068a01f33c575b1e478fc1836a5f59c01608fdb9b05552cba2ec71cf24187d
+SHA512:
+  metadata.gz: beab1c8822c0b0820986b85f15e0a495247dd2951a9d8b224cd491e45ab61978ec9e73d259ccf8eab94a991ef93298041f5acb678b9ce9e32042d2c28e53356e
+  data.tar.gz: e2bbf6900573f516fb0e7d7c7a7f9655a7146c138d692a141826a94708e2244f3028b0c5073d73b6d9d3b4dec0ebde0303a6b31dc4fa7b6f69a6870649fcd4d9

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ItsZariep
+
+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/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025 ItsZariep
+
+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,126 @@
+# Tessera
+
+Tessera is a Jekyll theme designed with content creators in mind, but like any other Jekyll theme, it can be used by anyone.
+
+Tessera features three main components: two side panels and a central content area. The theme is highly modular, allowing you to easily customize any component by overriding the `_includes`.
+
+## Installation
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "tessera"
+```
+
+Then add this line to your Jekyll site's `_config.yml`:
+
+```yaml
+theme: tessera
+```
+
+And then execute:
+
+```
+$ bundle
+```
+
+Or install it manually with:
+
+```
+$ gem install tessera
+```
+
+## Dependencies
+Tessera needs the following Jekyll plugins to function properly:
+
+  - jekyll-paginate (Pagination in main page)
+  - jekyll-archives (See posts matching category)
+  
+  
+## Post-install setup
+### Search
+Search needs /`search.json`:
+
+```
+---
+layout: null
+---
+[
+  {% for post in site.posts %}
+    {
+      "title": "{{ post.title | escape }}",
+      "url": "{{ site.baseurl }}{{ post.url }}",
+      "date": "{{ post.date | date: "%B %-d, %Y" }}",
+      "content": "{{ post.content | strip_html | strip_newlines | escape }}"
+    }{% unless forloop.last %},{% endunless %}
+  {% endfor %}
+]
+
+```
+
+### Pagination
+Pagination needs setup on `_config.yml`:
+
+```
+paginate: 9
+paginate_path: "/page:num/"
+```
+
+### Social links
+Like any other Jekyll theme, you need to setup your social links on `_config.yml`:
+
+```
+social_links:
+  - name: Twitter
+    url: https://twitter.com/yourprofile
+    icon: twitter
+  - name: GitHub
+    url: https://github.com/yourprofile
+    icon: github
+  - name: LinkedIn
+    url: https://linkedin.com/in/yourprofile
+    icon: linkedin
+```
+
+
+## Usage
+
+To start customizing Tessera, copy any of the `_includes` components you'd like to modify. You’ll probably want to copy most or all of them:
+
+* `toppane.html`: Header
+* `leftpane.html`: Left side of the page
+* `postgrid.html`: Post grid of the main page
+* `pagination-controls.html`: Pagination controls for the main page
+* `postcontent.html`: Content of a post
+* `userbox.html`: User box displayed below the post content
+* `comments.html`: Optional (currently unimplemented) comments section; by default, an example using Utterances is commented out. You can integrate any custom comment system via JavaScript.
+* `rightpane.html`: Right side of the page
+* `searchbar.html`: Search bar (requires JavaScript)
+* `bottompane.html`: Footer for all pages
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at [https://github.com/itszariep/tessera](https://github.com/itszariep/tessera). This project aims to be a safe and welcoming space for collaboration. All contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
+
+## Development
+
+To set up your environment for theme development, run:
+
+```
+$ bundle install
+```
+
+Your theme is set up just like a regular Jekyll site! To test it, run:
+
+```
+$ bundle exec jekyll serve
+```
+
+Then open your browser at [http://localhost:4000](http://localhost:4000). This starts a Jekyll server using your theme. Add pages, documents, data, etc., as usual to test your theme's content. As you modify the theme or its content, your site will automatically regenerate. Refresh the browser to see the changes.
+
+When your theme is released, only the files in `_layouts`, `_includes`, `_sass`, and `assets` that are tracked by Git will be bundled.
+To add a custom directory to your theme gem, update the regular expression in `tessera.gemspec` accordingly.
+
+## License
+
+This theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/_config.yml

@@ -0,0 +1,10 @@
+plugins:
+  - jekyll-paginate
+  - jekyll-archives
+
+jekyll-archives:
+  enabled:
+    - categories
+  layout: archive
+  permalinks:
+    category: '/categories/:name/'

data/_includes/bottompane.html

@@ -0,0 +1,12 @@
+<!-- Bottom Pane (Footer?) -->
+
+<!-- You can remove or replace any section if required, copying _includes/bottompane.html on your page -->
+
+<div class="bottompane">
+	<div class="bp-left">
+		<p>&copy; {{ site.time | date: '%Y' }} {{ site.title }}</p>
+	</div>
+	<div class="bp-right">
+		<p>&copy; Powered by <a href="https://github.com/itszariep/tessera">Tessera</a> for Jekyll</p>
+	</div>
+</div>

data/_includes/comments.html

@@ -0,0 +1,25 @@
+<!-- Example comment system with utterances
+ remove comment to enable it
+ See https://utteranc.es for more information about this example
+-->
+
+{% comment %}
+
+<script src="https://utteranc.es/client.js"
+		repo="username/repository"
+		issue-term="pathname"
+		theme="preferred-color-scheme"
+		crossorigin="anonymous"
+		async>
+</script>
+
+{% endcomment %}
+
+<!--Remove this after enabling comments-->
+<div class="userbox">
+	<div class="userbox-content">
+		<h1>Comment section will be here</h1>
+		<h3>See _includes/comments.html</h3>
+	</div>
+</div>
+<br>

data/_includes/leftpane.html

@@ -0,0 +1,64 @@
+<!-- Left Pane, this is a copy of rightpane because is not used on example
+		remove comment if you need it-->
+
+<div id="left-container">
+
+<div class="leftpane-landscapescreen">
+	<h3>Optional leftpane</h3>
+	<img class="userpic" src="{{ '/assets/img/avatar.webp' | relative_url }}" alt="Avatar">
+</div>
+
+<div class="leftpane-portraitscreen">
+	{% include searchbar.html %}
+</div>
+
+{% comment %}
+<!-- You can remove or replace any section if required, copying _includes/rightpane.html on your page -->
+
+	<!-- Banner Image or title-->
+	<!-- This image is displayed at the top of the right pane. -->
+	<!--<img class="rp-banner" src="{{ '/assets/img/banner.svg' | relative_url }}" width="100%" />-->
+		<h1 class="rp-banner">{{ site.title }}</h1>
+
+	<!-- Search Form -->
+	<!-- A simple GET form that allows users to perform a search query. -->
+	<!-- The search input is sent to the '/search' route. -->
+	<form action="/search" method="GET">
+		<input type="search" name="query" placeholder="Search..."> <!-- Search input field -->
+		<button type="submit">Search</button> <!-- Submit button -->
+	</form>
+
+	<!-- Entries Section -->
+	<!-- Displays a list of recent blog posts. -->
+	<h2>Entries</h2>
+	<ul>
+		<!-- Loop through the latest 5 posts in the site. -->
+		{% for post in site.posts limit:5 %} 
+			<li>
+				<!-- Each post is linked to its full page. -->
+				<a class="rp-post-link" href="{{ post.url }}">
+					<!-- Post title is shown here with a small heading. -->
+					<h6 class="rp-post-title">{{ post.title }}</h6>
+				</a>
+			</li>
+		{% endfor %}
+	</ul>
+
+	<!-- Categories Section -->
+	<!-- Lists all categories used across posts, sorted alphabetically. -->
+	<h2>Categories</h2>
+	<ul>
+		<!-- Get and sort all categories from the site. -->
+		{% assign all_categories = site.categories | sort %}
+		{% for category in all_categories %}
+			<li>
+				<!-- Link to the category page, with a slugified version of the category name. -->
+				<a class="rp-post-link" href="{{ site.baseurl }}/categories/{{ category[0] | slugify }}/">
+					<!-- Display the name of the category with a medium heading. -->
+					<h4 class="rp-post-title">{{ category[0] }}</h4>
+				</a>
+			</li>
+		{% endfor %}
+	</ul>
+{% endcomment %}
+</div>

data/_includes/pagination-controls.html

@@ -0,0 +1,26 @@
+<div class="pagination-controls">
+	{% if paginator.page > 1 %}
+		<a href="{{ '/' | relative_url }}">1</a>
+		<a href="{{ paginator.previous_page_path | relative_url }}">&laquo;</a>
+	{% endif %}
+
+	{% assign start_page = paginator.page | minus: 3 %}
+	{% if start_page < 1 %}{% assign start_page = 2 %}{% endif %}
+
+	{% assign end_page = paginator.page | plus: 3 %}
+	{% if end_page > paginator.total_pages %}{% assign end_page = paginator.total_pages %}{% endif %}
+	
+	{% for page in (start_page..end_page) %}
+		{% if page == paginator.page %}
+			<span class="current-page">{{ page }}</span>
+		{% else %}
+			<a href="{{ site.paginate_path | relative_url | replace: ':num', page }}">{{ page }}</a>
+		{% endif %}
+	{% endfor %}
+
+	{% if paginator.page < paginator.total_pages %}
+		<a href="{{ paginator.next_page_path | relative_url }}">&raquo;</a>
+		<a href="{{ paginator.last_page_path | relative_url }}">{{ paginator.total_pages }}</a>
+	{% endif %}
+</div>
+<br><br>

data/_includes/postcontent.html

@@ -0,0 +1,35 @@
+<!-- Tags -->
+<div class="post">
+
+	<div class="post-postcategories">
+		<h3>
+		{% for category in page.categories %}
+			<a href="/categories/{{ category | downcase | url_encode }}/">{{ category }}</a>{% unless forloop.last %} | {% endunless %}
+		{% endfor %}
+		</h3>
+	</div>
+
+	<div class="post-posttitle">
+		<h1>{{ page.title }}</h1>
+	</div>
+
+	<div class="post-postdate">
+		<h3>{{ page.date | date: "%y/%m/%d" }}</h3>
+	</div>
+
+	<div class="post-postcontent">
+	{{ content }}
+	</div>
+
+	<div class="post-postcategoriesbottom">
+	<h3>
+	{% for category in page.categories %}
+		<a href="/categories/{{ category | downcase | url_encode }}/">{{ category }}</a>{% unless forloop.last %} | {% endunless %}
+	{% endfor %}
+	</h3>
+	</div>
+
+	<hr class="endseparator">
+		{% include userbox.html %}
+		{% include comments.html %}
+</div>

data/_includes/postgrid.html

@@ -0,0 +1,30 @@
+<!-- Post grid, it includes the logic of displaying post on main.
+	Edit your _config.yml to configure entries per page, example:
+		paginate: 9
+		paginate_path: "/page:num/"
+ -->
+
+	<div id="posts-container">
+		<!-- If you don't want to use pagination
+			replace paginator.posts with site.posts
+		-->
+		{% for post in paginator.posts %}
+		<a href="{{ post.url | relative_url }}" class="post-link">
+			<article class="post-card">
+				<div class="post-image-wrapper">
+					{% if post.image %}
+					<img src="{{ post.image }}" alt="{{ post.title }}" class="post-image" />
+					{% endif %}
+				</div>
+				<div class="post-info">
+					<h3 class="post-labels">{{ post.categories | join: ' | ' }}</h3>
+					<h2 class="post-title">{{ post.title }}</h2>
+					<div class="post-date">{{ post.date | date: "%y/%m/%d"  }}</div>
+				</div>
+			</article>
+		</a>
+		{% endfor %}
+
+		<!-- pagination controls, see-->
+		{% include pagination-controls.html %}
+	</div>

data/_includes/rightpane.html

@@ -0,0 +1,48 @@
+<!-- Right Pane -->
+
+<!-- You can remove or replace any section if required, copying _includes/rightpane.html on your page -->
+
+<div id="right-container">
+
+<!-- Banner Image or title-->
+<!-- This image is displayed at the top of the right pane. -->
+<!--<img class="rp-banner" src="{{ '/assets/img/banner.svg' | relative_url }}" width="100%" />-->
+	<h1 class="rp-banner">{{ site.title }}</h1>
+
+	<!-- Search Form -->
+	<!-- A simple GET form that allows users to perform a search query. -->
+	<!-- The search input is sent to the '/search' route. -->
+		{% include searchbar.html %}
+	<!-- Entries Section -->
+	<!-- Displays a list of recent blog posts. -->
+	<h2>Entries</h2>
+	<ul>
+		<!-- Loop through the latest 5 posts in the site. -->
+		{% for post in site.posts limit:5 %} 
+			<li>
+				<!-- Each post is linked to its full page. -->
+				<a class="rp-post-link" href="{{ post.url }}">
+					<!-- Post title is shown here with a small heading. -->
+					<h6 class="rp-post-title">{{ post.title }}</h6>
+				</a>
+			</li>
+		{% endfor %}
+	</ul>
+
+	<!-- Categories Section -->
+	<!-- Lists all categories used across posts, sorted alphabetically. -->
+	<h2>Categories</h2>
+	<ul>
+		<!-- Get and sort all categories from the site. -->
+		{% assign all_categories = site.categories | sort %}
+		{% for category in all_categories %}
+			<li>
+				<!-- Link to the category page, with a slugified version of the category name. -->
+				<a class="rp-post-link" href="{{ site.baseurl }}/categories/{{ category[0] | slugify }}/">
+					<!-- Display the name of the category with a medium heading. -->
+					<h4 class="rp-post-title">{{ category[0] }}</h4>
+				</a>
+			</li>
+		{% endfor %}
+	</ul>
+</div>

data/_includes/searchbar.html

@@ -0,0 +1,7 @@
+<div class="search-box">
+  <input type="text" class="search-input" placeholder="Search...">
+  <ul class="search-results"></ul>
+</div>
+
+
+<script src="{{ '/assets/js/search.js' | relative_url }}"></script>

data/_includes/toppane.html

@@ -0,0 +1,52 @@
+<!-- Top Pane (Navbar?) -->
+
+<div class="toppanel">
+		<!-- Left side of the pane, usually only has a title or logo -->
+	<div class="tp-left">
+	<img class="tp-banner" src="{{ '/assets/img/banner.svg' | relative_url }}" width="100%" />
+		<!--<h1>{{ site.title }}</h1> -->
+	</div>
+
+	<!-- Burger menu using checkbox hack (for mobile, without using JS) -->
+	<input type="checkbox" id="burger-toggle" class="burger-checkbox">
+	<label for="burger-toggle" class="burger-menu">
+		<span></span>
+		<span></span>
+		<span></span>
+	</label>
+
+	<!-- Right side of the pane, usually has the navigation buttons, this example also has sub-elements -->
+	<div class="tp-right" id="mobile-menu">
+		<ul class="tp-nav">
+			<li><a href="{{ '/' | relative_url }}">Home</a></li>
+			<li><a href="{{ '/about/' | relative_url }}">About</a></li>
+			<li class="tp-dropdown">
+				<input type="checkbox" id="social-toggle" class="dropdown-checkbox">
+				<label for="social-toggle">Social Media</label>
+				<!-- Lists all site social links, declare it on your _config.yml
+						example:
+							social_links:
+							- name: Youtube
+							url: https://youtube.com/@zariep
+							icon: youtube
+							- name: GitHub
+							url: https://github.com/ItsZariep
+							icon: github
+							- name: LinkedIn
+							url: https://linkedin.com/in/zariep
+							icon: linkedin
+				-->
+				<ul class="tp-dropdown-elements">
+					{% for link in site.social_links %}
+					<li>
+						<a href="{{ link.url }}" target="_blank" aria-label="{{ link.name }}">
+							{{ link.name }}
+						</a>
+					</li>
+					{% endfor %}
+				</ul>
+			</li>
+			<li><a href="{{ 'https://github.com/itszariep/tessera' }}">Download</a></li>
+		</ul>
+	</div>
+</div>

data/_includes/userbox.html

@@ -0,0 +1,11 @@
+<!--Your personal box at the end of each post-->
+
+<div class="userbox">
+	<img class="userpic" src="{{ '/assets/img/avatar.webp' | relative_url }}" alt="Avatar">
+	<div class="userbox-content">
+		<h1>ItsZariep</h1>
+		<h3>Cool Description</h3>
+		<a href="{{ '/about/' | relative_url }}">About me</a>
+	</div>
+</div>
+<br>

data/_layouts/archive.html

@@ -0,0 +1,29 @@
+---
+layout: default
+---
+
+<h1>Categories: {{ page.title }}</h1>
+
+<div id="main-container">
+	{% include leftpane.html %}
+	<div id="posts-container">
+		{% for post in page.posts %}
+		<a href="{{ post.url | relative_url }}" class="post-link">
+			<article class="post-card">
+				<div class="post-image-wrapper">
+					{% if post.image %}
+					<img src="{{ post.image }}" alt="{{ post.title }}" class="post-image" />
+					{% endif %}
+				</div>
+				<div class="post-info">
+					<h3 class="post-labels">{{ post.categories | join: ' | ' }}</h3>
+					<h2 class="post-title">{{ post.title }}</h2>
+					<div class="post-date">{{ post.date | date: "%y/%m/%d"  }}</div>
+				</div>
+			</article>
+		</a>
+		{% endfor %}
+	</div>
+
+	{% include rightpane.html %}
+</div>

data/_layouts/default.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{{ page.title | default: site.title }}</title>
+	<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+</head>
+<body>
+		{% include toppane.html %}
+	<main>
+		{{ content }}
+	</main>
+		{% include bottompane.html %}
+</body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+<div id="main-container">
+	{% include leftpane.html %}
+	{% include postgrid.html %}
+	{% include rightpane.html %}
+</div>

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,25 @@
+---
+layout: default
+---
+
+<!DOCTYPE html>
+<html>
+<head>
+<!-- OG Origin tags for social media share preview -->
+	<meta charset="UTF-8">
+	<meta property="og:title" content="{{ page.title }}" />
+	<meta property="og:image" content="{{ page.image }}" />
+	<meta property="og:url" content="{{ site.url }}{{ site.baseurl }}{{ page.url }}" />
+	<meta property="og:type" content="website" />
+
+	<title>{{ page.title }}</title>
+</head>
+<body>
+	<div id="main-container">
+		{% include leftpane.html %}
+		{% include postcontent.html %}
+			<!-- User box and comments are included on postcontent.html-->
+		{% include rightpane.html %}
+	</div>
+</body>
+</html>