tessera-jekyll-theme 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d698752f107880b273524ba14c09d97948f37b562d26fd0852561f206edfc42e
-  data.tar.gz: 90068a01f33c575b1e478fc1836a5f59c01608fdb9b05552cba2ec71cf24187d
+  metadata.gz: 32412ff1b96b7d50bbc21d86b11df15913457a0010a9ae0972215beb673d9394
+  data.tar.gz: b631456a28835c76c6faab98f838543ec0c423172910f2d4b530a2d44db6858e
 SHA512:
-  metadata.gz: beab1c8822c0b0820986b85f15e0a495247dd2951a9d8b224cd491e45ab61978ec9e73d259ccf8eab94a991ef93298041f5acb678b9ce9e32042d2c28e53356e
-  data.tar.gz: e2bbf6900573f516fb0e7d7c7a7f9655a7146c138d692a141826a94708e2244f3028b0c5073d73b6d9d3b4dec0ebde0303a6b31dc4fa7b6f69a6870649fcd4d9
+  metadata.gz: a4f3e906d06fd67c6973cfb8e410b6763b05b80800f5f2fcd8851ad650ecfc0559e8ee3f47c909c80839378d2a7f3c3cb93d6d2fe2fe486f364c8f780105ab2a
+  data.tar.gz: 4a2b63dc296c699ffb66b5a721b35fcd66e15278ab4a28776cd01e5d95c1c745aa5e5a63d480fef0628f2a1186dc69980887b9629fdd0110b201a931e0431309

data/README.md

@@ -4,18 +4,22 @@ Tessera is a Jekyll theme designed with content creators in mind, but like any o
 
 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`.
 
+## Example:
+
+See [Tessera example page](https://itszariep.github.io/Tessera) for a vanilla example, or [My blog](https://itszariep.github.io/) (in Spanish) for a version with modifications and a real use case
+
 ## Installation
 
 Add this line to your Jekyll site's `Gemfile`:
 
 ```ruby
-gem "tessera"
+gem "tessera-jekyll-theme"
 ```
 
 Then add this line to your Jekyll site's `_config.yml`:
 
 ```yaml
-theme: tessera
+theme: tessera-jekyll-theme
 ```
 
 And then execute:
@@ -27,9 +31,18 @@ $ bundle
 Or install it manually with:
 
 ```
-$ gem install tessera
+$ gem install tessera-jekyll-theme
 ```
 
+### GitHub Pages
+Instead of doing the above steps, define this in your `_config.yml`, removing also `theme`:
+
+```
+# theme: something # remove this
+remote_theme: itszariep/Tessera # add this
+```
+
+
 ## Dependencies
 Tessera needs the following Jekyll plugins to function properly:
 
@@ -38,6 +51,7 @@ Tessera needs the following Jekyll plugins to function properly:
   
   
 ## Post-install setup
+
 ### Search
 Search needs /`search.json`:
 
@@ -46,26 +60,117 @@ 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 %}
+	{% 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 }}",
+			"tags": "{{ post.tags }}"
+		}{% unless forloop.last %},{% endunless %}
+	{% endfor %}
 ]
+```
+
+### Social Media Preview on non-post pages
+set this on your `_config.yml`:
+```
+defaults:
+  -
+    scope:
+      path: ""
+      type: "pages"
+    values:
+      image: /preview.jpg
+```
+
+> Image need to be always /preview.jpg
+
+
+## Authors
+
+1.  Optionally set default author in `_.config.yml`:
+
+```
+defaults:
+  - 
+    scope:
+      path: ""
+      type: "pages"
+    values:
+      image: /preview.jpg
+  -
+    scope:
+      path: ""
+      type: "posts"
+    values:
+      author: "Tessera"
+      image: /preview.jpg
+
+```
+
+2. Create `assets/img/authors/[Author Name].webp`
+3. Create `about/[Author Name].md`
+4. Create `_includes/authors.html and set your data`:
 
 ```
+{% case include.author %}
+	{% when "[YOUR NAME]" %}
+		Cool Description
+	{% when "Tessera" %}
+		Cool Description
+	{% else %}
+		Unknown Author
+{% endcase %}
+```
+
+> You can add multiple authors, for example with "Tessera", files would be `assets/img/authors/Tessera.webp` and `about/Tessera.md`
 
 ### Pagination
-Pagination needs setup on `_config.yml`:
+Pagination needs setup on two files:
+
+on `_config.yml`:
 
 ```
 paginate: 9
 paginate_path: "/page:num/"
 ```
 
+on `index.html`
+
+```
+---
+layout: home
+title: [Your index title]
+paginate: 9
+---
+```
+
+> 9 is the number of post per section, you can change it to have more o less post on grid per section
+
+
+### Archives (Categories)
+Archives needs setup on `_config.yml`:
+
+```
+jekyll-archives:
+  enabled:
+    - categories
+  layout: archive
+  permalinks:
+    category: '/categories/:name/'
+```
+
+> [!NOTE]  
+> Github Pages does not support Jekyll Archives, if you want this feature please use Github Actions instead
+
+### Date format
+Date format is configurable on `_config.yml`:
+
+```
+date_format: "%d/%m/%Y" # dd/mm/yy
+```
+
 ### Social links
 Like any other Jekyll theme, you need to setup your social links on `_config.yml`:
 
@@ -82,10 +187,10 @@ social_links:
     icon: linkedin
 ```
 
+## Customizing
 
-## 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:
+### Layouts
+To start customizing Tessera, copy any of the `_includes` components you'd like to modify:
 
 * `toppane.html`: Header
 * `leftpane.html`: Left side of the page
@@ -98,28 +203,14 @@ To start customizing Tessera, copy any of the `_includes` components you'd like
 * `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
-```
+### Styles
+Create `assets/css/custom.css`, this file will serve as override without having to modify entire CSS, so you can edit specific elements you want.
 
-Your theme is set up just like a regular Jekyll site! To test it, run:
+You can see common modifications on [Wiki](https://github.com/ItsZariep/Tessera/wiki/Common-modifications-and-additions:)
 
-```
-$ 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.
+## Contributing
 
-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.
+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.
 
 ## License
 

data/_config.yml

@@ -2,9 +2,28 @@ plugins:
   - jekyll-paginate
   - jekyll-archives
 
+author: Tesser
+
 jekyll-archives:
   enabled:
     - categories
   layout: archive
   permalinks:
     category: '/categories/:name/'
+
+defaults:
+  - 
+    scope:
+      path: ""
+      type: "pages"
+    values:
+      image: /preview.jpg
+  -
+    scope:
+      path: ""
+      type: "posts"
+    values:
+      author: "ItsZariep"
+      image: /preview.jpg
+
+date_format: "%d/%m/%Y"

data/_includes/authors.html

@@ -0,0 +1,8 @@
+{% case include.author %}
+	{% when "ItsZariep" %}
+		Cool Duckription🦆️
+	{% when "Tessera" %}
+		Cool Description
+	{% else %}
+		Unknown Author
+{% endcase %}

data/_includes/head.html

@@ -0,0 +1,24 @@
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ '/feed.xml' | relative_url }}">
+
+	<meta charset="UTF-8">
+	<meta property="og:site_name" content="{{ site.title }}" />
+	<meta property="og:title" content="{{ page.title }}" />
+	<meta property="og:image" content="{{ site.url }}{{ site.baseurl }}{{ page.image }}" />
+	<meta property="og:description" content="{% if page.description %}{{ page.description }}{% elsif page.content and page.content != '' %}{{ page.content | strip_html | truncate: 150 }}{% else %}{{ site.description }}{% endif %}" />
+	<meta property="og:url" content="{{ site.url }}{{ site.baseurl }}{{ page.url }}" />
+	<meta property="og:type" content="website" />
+
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content="{{ page.title }}" />
+	<meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% elsif page.content and page.content != '' %}{{ page.content | strip_html | truncate: 150 }}{% else %}{{ site.description }}{% endif %}" />
+	<meta name="twitter:image" content="{{ site.url }}{{ site.baseurl }}{{ page.image }}" />
+
+	<title>{{ page.title | default: site.title }}</title>
+	<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+	<link rel="stylesheet" href="{{ '/assets/css/custom.css' | relative_url }}">
+
+	<link rel="icon" href="{{ '/favicon.ico' | relative_url }}">
+</head>

data/_includes/pagination-controls.html

@@ -2,6 +2,8 @@
 	{% if paginator.page > 1 %}
 		<a href="{{ '/' | relative_url }}">1</a>
 		<a href="{{ paginator.previous_page_path | relative_url }}">&laquo;</a>
+	{% else %}
+		<span class="current-page">1</span>
 	{% endif %}
 
 	{% assign start_page = paginator.page | minus: 3 %}
@@ -20,7 +22,7 @@
 
 	{% 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>
+		<a href="{{ site.paginate_path | replace: ':num', paginator.total_pages | relative_url }}">{{ paginator.total_pages }}</a>
 	{% endif %}
 </div>
 <br><br>

data/_includes/postcontent.html

@@ -1,6 +1,5 @@
 <!-- Tags -->
 <div class="post">
-
 	<div class="post-postcategories">
 		<h3>
 		{% for category in page.categories %}
@@ -14,22 +13,30 @@
 	</div>
 
 	<div class="post-postdate">
-		<h3>{{ page.date | date: "%y/%m/%d" }}</h3>
+		<h3>{{ page.date | date: site.date_format }}</h3>
 	</div>
 
 	<div class="post-postcontent">
+	<div class="post-img">
+		{% if page.image %}
+			<img src="{{ page.image | relative_url }}" alt="{{ page.title }}" />
+		{% endif %}
+	</div>
+
 	{{ 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>
+		<h3>
+		{% for tag in page.tags %}
+			<a>{{ tag }}</a>{% unless forloop.last %} | {% endunless %}
+		{% endfor %}
+		</h3>
+	<a href="#scrolltotop" class="scrolltotop"></a>
 	</div>
 
 	<hr class="endseparator">
 		{% include userbox.html %}
+		{% include sharebtn.html %}
 		{% include comments.html %}
 </div>

data/_includes/postgrid.html

@@ -13,13 +13,13 @@
 			<article class="post-card">
 				<div class="post-image-wrapper">
 					{% if post.image %}
-					<img src="{{ post.image }}" alt="{{ post.title }}" class="post-image" />
+					<img src="{{ post.image | relative_url}}" 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 class="post-date">{{ post.date | date: site.date_format }}</div>
 				</div>
 			</article>
 		</a>

data/_includes/rightpane.html

@@ -16,19 +16,20 @@
 	<!-- 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>
-
+	<div class="rightpaneposts">
+		<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 | relative_url }}">
+						<!-- Post title is shown here with a small heading. -->
+						<h6 class="rp-post-title">{{ post.title }}</h6>
+					</a>
+				</li>
+			{% endfor %}
+		</ul>
+	</div>
 	<!-- Categories Section -->
 	<!-- Lists all categories used across posts, sorted alphabetically. -->
 	<h2>Categories</h2>

data/_includes/searchbar.html

@@ -1,7 +1,5 @@
-<div class="search-box">
-  <input type="text" class="search-input" placeholder="Search...">
-  <ul class="search-results"></ul>
+<div id="search-container" data-baseurl="{{ site.baseurl }}"  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/sharebtn.html

@@ -0,0 +1,5 @@
+<div class="btnshare">
+	<input type="checkbox" id="toggleshare" />
+	<label for="toggleshare">Share this page</label>
+	<input class="urlshare" type="text" readonly value="{{ page.url | absolute_url }}" />
+</div>

data/_includes/toppane.html

@@ -3,7 +3,7 @@
 <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%" />
+	<a href="{{ '/' | relative_url }}"><img class="tp-banner" src="{{ '/assets/img/banner.svg' | relative_url }}" width="100%" /></a>
 		<!--<h1>{{ site.title }}</h1> -->
 	</div>
 
@@ -19,7 +19,7 @@
 	<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><a href="{{ '/about/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>

data/_includes/userbox.html

@@ -1,11 +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">
+	<img class="userpic" src="{{ '/assets/img/authors/' | append: page.author | append: '.webp' | relative_url }}" alt="Avatar">
 	<div class="userbox-content">
-		<h1>ItsZariep</h1>
-		<h3>Cool Description</h3>
-		<a href="{{ '/about/' | relative_url }}">About me</a>
+		<h1>{{ page.author }}</h1>
+		<h3>{% include authors.html author=page.author %}</h3>
+		<a href="{{ '/about/' | append: page.author | relative_url }}">About me</a>
 	</div>
 </div>
 <br>

data/_layouts/default.html

@@ -1,11 +1,6 @@
 <!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>
+{% include head.html %}
 <body>
 		{% include toppane.html %}
 	<main>

data/_layouts/home.html

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

data/_layouts/post.html

@@ -2,24 +2,9 @@
 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>
+<div id="main-container">
+	{% include leftpane.html %}
+	{% include postcontent.html %}
+		<!-- User box and comments are included on postcontent.html-->
+	{% include rightpane.html %}
+</div>

data/assets/css/custom.css

@@ -0,0 +1 @@
+

data/assets/css/style.css

@@ -53,6 +53,27 @@ a:hover {
 	color: var(--accenthv);
 }
 
+table {
+	margin: 0 auto;
+	width: 95%;
+	border-collapse: collapse;
+	box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+th, td {
+	padding: 12px 15px;
+	border: 1px solid var(--grey1);
+	text-align: left;
+}
+
+thead {
+	background-color: var(--accent);
+	color: var(--accentfg);
+}
+
+tbody tr:nth-child(even) {
+	background-color: var(--black);
+}
 
 /*-*/
 
@@ -227,6 +248,35 @@ input[type="text"] {
 
 /*CENTER SIDE (POST CONTENT)*/
 
+.post {
+	text-align: justify;
+	display: flex;
+	flex-wrap: wrap;
+	overflow: auto;
+	word-wrap: break-word;
+	word-break: break-word;
+	flex-direction: column;
+	align-items: start;
+	align-self: stretch;
+	width:100%;
+	box-sizing: border-box;
+}
+
+.post figcaption {
+	display: flex;
+	margin: 0 auto;
+	justify-content: space-evenly;
+	color: var(--grey1);
+}
+
+blockquote {
+	color: var(--accenthv);
+	border-left: 4px solid var(--accenthv);
+	background-color: var(--black);
+	border-radius: 6px;
+	padding: 0 1rem 0 1rem;
+}
+
 .post-postdate h3 {
 	position: relative;
 	top: -1rem;
@@ -238,6 +288,19 @@ input[type="text"] {
 	text-align: justify;
 }
 
+.post-postcontent img {
+	object-fit: contain;
+	width: 75%;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.post-posttitle {
+	max-width: 95%;
+	text-align: justify;
+}
+
 .language-plaintext.highlighter-rouge {
 	background-color: var(--black);
 	font-family: monospace;
@@ -264,19 +327,52 @@ input[type="text"] {
 
 hr.endseparator {
 	background-color: white; /* sets the color of the line */
-	width: 100%;
+	width: 95%;
 	height: 2.6px;
 	margin-left: 0;
 	border: none; /* remove default border */
 }
 
+.btnshare {
+	display: inline-block;
+	position: relative;
+	width: 100%;
+}
+#toggleshare {
+	display: none;
+}
+label[for="toggleshare"] {
+	display: inline-block;
+	padding: 7px 16px;
+	margin: 0vw 0vh 0vh 1vw;
+	max-width: 95%;
+	background: var(--accent);
+	color: var(--accentfg);
+	cursor: pointer;
+	border-radius: 5px;
+	user-select: none;
+}
+.urlshare {
+	display: none;
+	padding: 8px;
+	margin: 0vw 0vh 0vh 1vw;
+	max-width: 95%;
+}
+#toggleshare:checked + label {
+	display: none;
+}
+#toggleshare:checked ~ .urlshare {
+	display: inline-block;
+	width: 100%;
+}
+
 .userbox {
 	display: flex;
 	align-items: flex-start;
 	border: 3px solid var(--fg);
 	border-radius: 5px;
 	margin: 2vw 0vh 0vh 1vw;
-	max-width: 500px;
+	max-width: 95%;
 	font-family: sans-serif;
 	position: relative;
 }
@@ -301,7 +397,7 @@ hr.endseparator {
 }
 
 .userbox-content h3 {
-	margin: 4px 0 12px 0;
+	margin: 4px 5px 12px 0;
 	font-weight: normal;
 	color: #666;
 }
@@ -326,7 +422,7 @@ hr.endseparator {
 /* CENTER SIDE (POST LIST) */
 
 #posts-container {
-	width: 70%;
+	width: 100%;
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
 	gap: 2vw;
@@ -334,6 +430,7 @@ hr.endseparator {
 }
 
 .post-card {
+	height: 100%;
 	display: flex;
 	flex-direction: column;
 	border-radius: 8px;
@@ -354,7 +451,9 @@ hr.endseparator {
 .post-image-wrapper {
 	position: relative;
 	width: 100%;
-	padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100%) */
+	/* padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100%) */
+	/* padding-top: 75%; /* 4:3 aspect ratio (9 / 16 * 100%) */
+	padding-top: 52.36%; /* 1.91:1 aspect ratio (OG:Image standard) */
 	overflow: hidden;
 	border-radius: 8px 8px 0 0;
 }
@@ -432,6 +531,12 @@ hr.endseparator {
 	width: 20%;
 	padding: 0 0vw 0;
 	margin-left: 0vw;
+/* Uncomment this if you want sticky behavior
+	position: sticky;
+	top: 0;
+	align-self: flex-start;
+*/
+
 }
 
 
@@ -452,6 +557,10 @@ button {
 	background-color: var(--accent);
 }
 
+.rightpaneposts {
+	width: 75%
+}
+
 .rp-post-title {
 	margin: 0;
 	font-size: 1.1rem;
@@ -592,170 +701,180 @@ button {
 
 /* PORTRAIT SCREEN CHANGES*/
 @media only screen and (max-aspect-ratio: 1/1) {
-body {
-	background-color: var(--bg);
-	color: var(--fg);
-	margin: 0;
-	padding: 0;
-	padding-bottom: 9rem;
-	font-family: "Sans";
-}
+	body {
+		background-color: var(--bg);
+		color: var(--fg);
+		margin: 0;
+		padding: 0;
+		padding-bottom: 9rem;
+		font-family: "Sans";
+	}
 
-.search-box
-{
-	display:flex;
-	width: 90%;
-	margin: 0 auto;
-	flex-direction: column;
-	margin: 0 auto;
-}
+	.search-box
+	{
+		display:flex;
+		width: 90%;
+		margin: 0 auto;
+		flex-direction: column;
+		margin: 0 auto;
+	}
 
-.bottompane {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	height: 7rem;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	background-color: var(--black);
-	z-index: 1000;
-	flex-direction: column;
-}
+	.bottompane {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 7rem;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: var(--black);
+		z-index: 1000;
+		flex-direction: column;
+	}
 
-.burger-menu {
-	display: flex;
-}
+	.burger-menu {
+		display: flex;
+	}
 
-/* Hide menu by default on mobile */
-.tp-right {
-	display: none;
-	position: absolute;
-	top: 100%;
-	left: 0;
-	right: 0;
-	background-color: var(--black);
-	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-	z-index: 1;
-}
+	/* Hide menu by default on mobile */
+	.tp-right {
+		display: none;
+		position: absolute;
+		top: 100%;
+		left: 0;
+		right: 0;
+		background-color: var(--black);
+		box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+		z-index: 1;
+	}
 
-/* Show menu when burger checkbox is checked */
-#burger-toggle:checked ~ .tp-right {
-	display: block;
-}
+	/* Show menu when burger checkbox is checked */
+	#burger-toggle:checked ~ .tp-right {
+		display: block;
+	}
 
-.tp-nav {
-	flex-direction: column;
-	width: 100%;
-}
+	.tp-nav {
+		flex-direction: column;
+		width: 100%;
+	}
 
 
-.tp-nav li {
-	width: 100%;
-	text-align: left;
-	padding: 15px;
-	border-bottom: 1px solid var(--bg);
-}
+	.tp-nav li {
+		width: 100%;
+		text-align: left;
+		padding: 15px;
+		border-bottom: 1px solid var(--bg);
+	}
 
-/* Handle dropdown on mobile */
-.tp-dropdown-elements {
-	display: none;
-	position: static;
-	box-shadow: none;
-	padding-left: 15px;
-	margin-top: 10px;
-}
+	/* Handle dropdown on mobile */
+	.tp-dropdown-elements {
+		display: none;
+		position: static;
+		box-shadow: none;
+		padding-left: 15px;
+		margin-top: 10px;
+	}
 
-/* Show dropdown when its checkbox is checked */
-#social-toggle:checked ~ .tp-dropdown-elements {
-	display: block;
-}
+	/* Show dropdown when its checkbox is checked */
+	#social-toggle:checked ~ .tp-dropdown-elements {
+		display: block;
+	}
 
-/* Override hover behavior on mobile */
-.tp-dropdown:hover .tp-dropdown-elements {
-	display: none;
-}
+	/* Override hover behavior on mobile */
+	.tp-dropdown:hover .tp-dropdown-elements {
+		display: none;
+	}
 
-/* Label for dropdown toggle */
-.tp-dropdown label {
-	display: block;
-	cursor: pointer;
-}
+	/* Label for dropdown toggle */
+	.tp-dropdown label {
+		display: block;
+		cursor: pointer;
+	}
 
-#main-container {
-	display: flex;
-	flex-direction: column;
-	padding-top: 2rem;
-	width: 100vw;
-	max-width: 100vw;
-	justify-content: space-between;
-	align-items: center;
-}
+	#main-container {
+		display: flex;
+		flex-direction: column;
+		padding-top: 2rem;
+		width: 100vw;
+		max-width: 100vw;
+		justify-content: space-between;
+		align-items: center;
+	}
 
-.post {
-	text-align: justify;
-	display: flex;
-	flex-wrap: wrap;
-	overflow: auto;
-	word-wrap: break-word;
-	word-break: break-word;
-	flex-direction: column;
-	align-items: start;
-	width: 90vw;
-	max-width: 90vw;
-/*
-	overflow-x: hidden;
-*/
-	box-sizing: border-box;
-}
+	.post {
+		margin: 0 auto;
+		text-align: justify;
+		display: flex;
+		flex-wrap: wrap;
+		overflow: auto;
+		word-wrap: break-word;
+		word-break: break-word;
+		flex-direction: column;
+		align-items: start;
+		width: 90vw;
+		max-width: 90vw;
+	/*
+		overflow-x: hidden;
+	*/
+		box-sizing: border-box;
+	}
+	.post-postcontent {
+		max-width: 100%;
+		text-align: justify;
+	}
 
+	.post-postcontent img {
+		color: red;
+		object-fit: contain;
+		width: 100%;
+	}
 
-#left-container {
-	width: 90%;
-	padding: 0 0vw 0;
-	margin-left: 0vw;
-	padding-bottom: 1rem;
-}
+	#left-container {
+		width: 90%;
+		padding: 0 0vw 0;
+		margin-left: 0vw;
+		padding-bottom: 1rem;
+	}
 
-.leftpane-landscapescreen {
-	display: none;
-}
+	.leftpane-landscapescreen {
+		display: none;
+	}
 
-.leftpane-portraitscreen {
-	display: block;
-}
+	.leftpane-portraitscreen {
+		display: block;
+	}
 
-#posts-container {
-	width: 90%;
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(60%, 1fr));
-	gap: 2vw;
-	padding: 0 0 0 0vw;
-}
+	#posts-container {
+		width: 90%;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(60%, 1fr));
+		gap: 2vw;
+		padding: 0 0 0 0vw;
+	}
 
-.pagination-controls {
-	margin-top: 1rem;
-	grid-column: 1 / -1;
-	justify-self: center; 
-	width: fit-content;
-}
+	.pagination-controls {
+		margin-top: 1rem;
+		grid-column: 1 / -1;
+		justify-self: center; 
+		width: fit-content;
+	}
 
-.pagination-controls a {
-	font-size: 1.3rem;
-	text-decoration: none;
-	border: 2px solid var(--grey1);
-	padding: 4px 8px;
-	margin: 0 4px;
-	display: inline-block;
-	color: var(--fg);
-	border-radius: 4px;
-}
+	.pagination-controls a {
+		font-size: 1.3rem;
+		text-decoration: none;
+		border: 2px solid var(--grey1);
+		padding: 4px 8px;
+		margin: 0 4px;
+		display: inline-block;
+		color: var(--fg);
+		border-radius: 4px;
+	}
 
-#right-container {
-	width: 90%;
-	padding: 0 0vw 0;
-	margin-left: 0vw;
-}
+	#right-container {
+		width: 90%;
+		padding: 0 0vw 0;
+		margin-left: 0vw;
+	}
 
 }

data/assets/js/search.js

@@ -1,11 +1,23 @@
 let searchData = [];
 
-fetch('/search.json')
-	.then(res => res.json())
-	.then(data =>
+const baseurl = document.getElementById('search-container').getAttribute('data-baseurl');
+fetch(`${baseurl}/search.json`)
+	.then(res => res.text())
+	.then(text =>
 	{
-		searchData = data;
-		initSearchBars();
+		try
+		{
+			let cleanedText = text
+				.replace(/\\(?!["\\/bfnrtu])/g, '\\\\')
+				.replace(/[\u0000-\u001F]/g, '');
+
+			searchData = JSON.parse(cleanedText);
+			initSearchBars();
+		}
+		catch (e)
+		{
+			console.error("Failed to parse cleaned JSON:", e);
+		}
 	});
 
 function initSearchBars()
@@ -21,13 +33,32 @@ function initSearchBars()
 		{
 			const query = this.value.toLowerCase();
 			resultsContainer.innerHTML = '';
-
 			if (query.length < 2) return;
 
-			const results = searchData.filter(item =>
-				item.title.toLowerCase().includes(query) ||
-				item.content.toLowerCase().includes(query)
-			);
+			let results = [];
+			if (Array.isArray(searchData) && searchData.length > 0)
+			{
+				results = searchData.filter(item =>
+					(item.title?.toLowerCase() || '').includes(query) ||
+					(item.tags?.toLowerCase() || '').includes(query) ||
+					(item.content?.toLowerCase() || '').includes(query)
+				);
+			}
+
+
+			if (results.length > 0)
+			{
+				results.sort((a, b) =>
+				{
+					const aTitle = (a.title || '').toLowerCase();
+					const bTitle = (b.title || '').toLowerCase();
+
+					const aScore = aTitle === query ? 0 : aTitle.startsWith(query) ? 1 : 2;
+					const bScore = bTitle === query ? 0 : bTitle.startsWith(query) ? 1 : 2;
+
+					return aScore - bScore;
+				});
+			}
 
 			results.slice(0, 10).forEach(result =>
 			{
@@ -36,5 +67,6 @@ function initSearchBars()
 				resultsContainer.appendChild(li);
 			});
 		});
+
 	});
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tessera-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - ItsZariep
@@ -61,14 +61,17 @@ files:
 - LICENSE.txt
 - README.md
 - _config.yml
+- _includes/authors.html
 - _includes/bottompane.html
 - _includes/comments.html
+- _includes/head.html
 - _includes/leftpane.html
 - _includes/pagination-controls.html
 - _includes/postcontent.html
 - _includes/postgrid.html
 - _includes/rightpane.html
 - _includes/searchbar.html
+- _includes/sharebtn.html
 - _includes/toppane.html
 - _includes/userbox.html
 - _layouts/archive.html
@@ -76,7 +79,10 @@ files:
 - _layouts/home.html
 - _layouts/page.html
 - _layouts/post.html
+- assets/css/custom.css
 - assets/css/style.css
+- assets/img/authors/ItsZariep.webp
+- assets/img/authors/Tessera.webp
 - assets/img/avatar.webp
 - assets/img/banner.svg
 - assets/js/search.js