Browse Source

Add dynamic tag support on main page.

master
Ben Kurtovic 10 years ago
parent
commit
7007048833
4 changed files with 51 additions and 10 deletions
  1. +1
    -5
      _layouts/base.html
  2. +2
    -2
      index.html
  3. +15
    -2
      static/main.css
  4. +33
    -1
      static/main.js

+ 1
- 5
_layouts/base.html View File

@@ -2,11 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
{% if page.title == "Home" %}
<title>Ben Kurtovic</title>
{% else %}
<title>{{ page.title }} - Ben Kurtovic</title>
{% endif %}
<title>{% if page.title != "Home" %}{{ page.title }} - {% endif %}Ben Kurtovic</title>
<link rel="icon" type="image/png" href="/static/favicon.png" />
<link rel="stylesheet" href="/static/main.css" />
<link rel="stylesheet" href="/static/syntax.css" /> <!-- shamelessly stolen from https://github.com/mojombo/tpw/blob/master/css/syntax.css -->


+ 2
- 2
index.html View File

@@ -121,12 +121,12 @@ title: Home
<div>
Tags:
{% for tag in site.tags %}
{{tag[0]}}
<span class="tag">{{tag[0]}}</span>
{% endfor %}
</div>
<ul id="post-list">
{% for post in site.posts %}
<li>{{ post.date | date: "%b %-d, %Y" }}: <a class="underlined" href="{{ post.url }}">{{ post.title }}</a><br /><span class="subtitle">{{ post.description }}<br />{{ post.tags | join: ", " }} &middot; <a href="{{ post.url }}#disqus_thread" data-disqus-identifier="{{ post.id }}"></a></span></li>
<li data-tags="{{ post.tags | join: "|" }}">{{ post.date | date: "%b %-d, %Y" }}: <a class="underlined" href="{{ post.url }}">{{ post.title }}</a><br /><span class="subtitle">{{ post.description }}<br />{{ post.tags | join: ", " }} &middot; <a href="{{ post.url }}#disqus_thread" data-disqus-identifier="{{ post.id }}"></a></span></li>
{% endfor %}
</ul>
</td>


+ 15
- 2
static/main.css View File

@@ -129,6 +129,19 @@ a.underlined:hover, a.underlined:active { text-decoration: none; }
font-size: 14px;
}

.tag {
background-color: #f2f2f2;
border: 1px solid #e8e8e8;
color: #888;
cursor: pointer;
padding: 0 3px;
}

.tag-selected {
background-color: #ddd;
color: black;
}

#post-info {
list-style-type: none;
margin: 0;
@@ -153,7 +166,7 @@ pre {
}

code {
background: #f2f2f2;
background-color: #f2f2f2;
border: 1px solid #e8e8e8;
padding: 0 3px;
}
@@ -164,7 +177,7 @@ pre code {
}

.highlight, .highlighttable {
background: #f2f2f2;
background-color: #f2f2f2;
border: 1px solid #e8e8e8;
font-size: 14px;
line-height: 1.35em;


+ 33
- 1
static/main.js View File

@@ -1,4 +1,31 @@
$(document).ready(function() {
function load_tag_filters() {
$(".tag").click(function() {
$(this).toggleClass("tag-selected");

var allowed = [];
$(".tag-selected").each(function() {
allowed.push($(this).text())
});

var num_selected = $(".tag-selected").length;
if (num_selected == 0 || num_selected == $(".tag").length)
$("#post-list li").show();
else {
$("#post-list li").hide();
$("#post-list li").each(function() {
var tags = $(this).data("tags").split("|");
for (var t in tags) {
if ($.inArray(tags[t], allowed) != -1) {
$(this).show();
return;
}
}
});
}
});
}

function load_paragraph_links() {
$("#post").find("h1, h2, h3, h4, h5, h6").hover(function() {
$(this).append($("<a>")
.attr("href", "#" + this.id)
@@ -7,4 +34,9 @@ $(document).ready(function() {
}, function() {
$(this).find(".para-link").remove();
});
}

$(document).ready(function() {
load_tag_filters();
load_paragraph_links();
});

Loading…
Cancel
Save