Today I was trying to change how the Table of Contents drop down menu worked in MindTouch Core.

The drop down menu is dynamically created as a list of headers on the page.  For example if your page has an h1 header of Hello and an h2 header of You, the drop down menu would be.
1. Hello
    1.1 You

As you see above, “Hello” and “You” are both links to their respective header on the page.

This is great for wiki's, but for the intranet site I am working on, we are using the headers manly for design this could be a problem.  For example, it is not uncommon to have an h2 of “Hello” and an h5 of “You” because the odd numbered headers I have styled with a yellow background, but I still want it to appear under the h2 in the Table of Contents. 

So in the above example the TOC will display like this.
1. Hello               <--h2
    1.1.1 You        <--h5

This is confusing for my users so I wanted this.
Hello
    You

Notice that it is still a list, but there is no number structure.

I looked at the markup via Firebug (in Firefox) and found that this should be easy.  The numbers I wanted to remove where in a span.  (i.e. <span>1.1</span> and the span was in a <li> inside of div with a class of pageToc.

Figuring this would be easy, I just added this to CSS.

.pageToc li {
    display: none;
    }

After adding this to the CSS it worked GREAT in Firefox, but not so well in IE 7/8.  The numbers were gone, but there was still a big space where the span used to be.  At first I thought that the span just some how wasn't going away, so I tried all sorts of CSS with NO luck.

Above is the TOC without the numbers viewed in Firefox

Above is the TOC without the numbers viewed in IE7/8

After a lot of frustration I actually looked at the source and noticed that the markup had a space before the anchor links (i.e. Hello and You) I am not sure why MindTouch did this and it might just be a bug or something they overlooked.

I had to look at the source because I could not tell viewing the markup via Firebug (in Firefox) that the spaces were there.

However when I viewed the webpage with Internet Explorer’s Developer Toolbar and I could see them a little better.  As you can see below you can see the Text – Empty Text Node.  The problem with Developer Toolbar is that it doesn’t display closing tags, so I didn’t catch this right away.

After all that troubleshooting I was happy to know at least what the issue was.  Now I just need to add some jQuery to remove those blank spaces.  Below is the jQuery I have come up on page load.

$(document).ready(function(){
            // Used to replace the spaces in the TOC menu before the anchor links
            $(".pageToc li").each (  function ( i , val  )
            {
                $(val).html($(val).html().replace(/\s<a/ig, "<a"));
            });
        });

I had to use Regular Expression to replace only in front of the anchor.  I created another post to go a little further into JavaScript's Regex Syntax.

After I added this jQuerry script all was good and now I had the following TOC display. 

I know this isn’t a common thing to do, but it works well for my customer’s intranet site, and the way they use the headers in content more as display elements than hierarchy elements.

I hope this helps anyone in the same boat.

In JavaScript, a regular expression is written in the form of /pattern/modifiers where "pattern" is the regular expression itself, and "modifiers" are a series of characters indicating various options. The "modifiers" part is optional.

    * /g enables "global" matching. When using the replace() method, specify this modifier to replace all matches, rather than only the first one.
    * /i makes the regex match case insensitive.
    * /m enables "multi-line mode". In this mode, the caret and dollar match before and after newlines in the subject string.

You can combine multiple modifiers by stringing them together as in /regex/gim.

Since forward slashes delimit the regular expression, any forward slashes that appear in the regex need to be escaped. For example, the regex 1/2 is written as /1\/2/ in JavaScript.

As with anything, you can find much more information about JavaScript on the web if you Google or Bing it. 

You may not be aware, but I started a semi personal semi professional blog and website based on the handle or username I use in most places on the web.  MikePixel is how many of my professional contacts and friends know me by.  I decided to do the blog part of the site in BlogEngine.NET.  I use DasBlog here and have enjoyed it, but I wanted to try something different.

I have enjoyed BlogEngine.NET a bunch, so I will be posting some small helps and hints on how to skin BE. 

Today I will go over the date box I have on the right hand side of the title.  The first thing is to open your PostView.ascx file in the themes directory under the theme you are using for your new skin.

My markup is as follows, with the markup used for the Date Box in red.

<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="false" Inherits="BlogEngine.Core.Web.Controls.PostViewBase" %>

<div class="post xfolkentry" id="post<%=Index %>">
  <span class="pubDate">
      <span class="month"><%=Post.DateCreated.ToString("MMM") %></span>
      <span class="day"><%=Post.DateCreated.ToString("dd") %></span>
      <span class="year"><%=Post.DateCreated.ToString("yyyy") %></span>
  </span>
  <h1><a href="<%=Post.RelativeLink %>" class="taggedlink"><%=Server.HtmlEncode(Post.Title) %></a></h1>
  <span class="author">by <a href="<%=VirtualPathUtility.ToAbsolute("~/") + "author/" + Server.UrlEncode(Post.Author) %>.aspx"><%=Post.AuthorProfile != null ? Post.AuthorProfile.DisplayName : Post.Author %></a></span>
  <div class="text"><asp:PlaceHolder ID="BodyContent" runat="server" /></div>
  <div class="bottom">
    <%=Rating %>
    <p class="tags">Tags: <%=TagLinks(", ") %></p>
    <p class="categories"><%=CategoryLinks(" | ") %></p>
  </div>

  <div class="footer">   
    <div class="bookmarks">
      <a rel="nofollow" title="Index <%=Index %>" target="_blank" href="http://www.dotnetkicks.com/submit?url=<%=Server.UrlEncode(Post.AbsoluteLink.ToString()) %>&amp;title=<%=Server.UrlEncode(Post.Title) %>">Submit to DotNetKicks</a> |
      <a rel="nofollow" href="mailto:?subject=<%=Server.UrlEncode(Post.Title) %>&amp;body=Thought you might like this: <%=Post.AbsoluteLink.ToString() %>">E-mail</a>
    </div>
    <%=AdminLinks %>
    <a rel="bookmark" href="<%=Post.PermaLink %>" title="<%=Server.HtmlEncode(Post.Title) %>">Permalink</a> |
    <a rel="nofollow" href="<%=Post.RelativeLink %>#comment"><%=Resources.labels.comments %> (<%=Post.ApprovedComments.Count %>)</a>
  </div>
</div>

As you notice I have the Post.DateCreated seperated into three different classes.  One for each line of the date box. MMM displays the three letter abbreviation for the month.  dd displays the two digit number day, and yyyy displays the 4 digit year.

Next you will create the CSS that will make the box and float it to the right of the title.

.post .pubDate
{
    background:#BCAFA3 none repeat scroll 0 0;
    border:1px solid #ccc;
    color:#FFFFFF;
    display:block;
    float:right;
    line-height:1;
    margin:0 0 10px 10px;
    padding:5px;
    text-align:center;
    width:40px;
}

.post .pubDate .month,
.post .pubDate .year
{
    display:block;
}

.post .pubDate .day
{
    display:block;
    font-size:20px;
}

.post .pubDate .year
{
    display:block;
}

As a side note, I have text throughout the blog set at 12px. 

body
{
    font-size: 12px;
{

This will make the top and bottom line 12px, and the .post .pubDate .day attribute you see in the CSS code above will set the two digit day to 20px.

You should also set the .post h1 (or what ever header you are using for your blog titles) to be a specific length so that it doesn’t run into the date box.  I have mine set as follows.

.post h1
{
    border-color:#999999;
    border-style:solid;
    border-width:0 0 1px;
    width:450px;
    margin: 5px 0 5px;
    padding: 0px 0px 2px;
}
.text
{
    margin: 15px 0px 0px;
}

You will also notice that I give the blog content a top margin of 15px so that you don’t get text wrap around your date box.  The text of your post will just run under the date box.  The class used for the div with your post’s textual content is “Text”

Conclusion

That is about it.  Have fun skinning your BlogEngine.NET.  They have done a good job of making things easy as far as skinning goes, so make your blog look however you want.  Let’s those creative juices flow!

I have been setting up a customers MindTouch 2009 site and I ran into an issue where I couldn’t search the contents of the PDF and Office 2007 attachments I had uploaded to MindTouch.

  I found I could search and find the titles of the documents, but not the contents.

Fortunately I had the #mindtouch irc.freenode.net channel to go to.  The people there are very helpful there.  It turns out that I needed to download and install IFilters for both PDF’s and Office 2007.

They directed me to IFilter.org, and once there I found a whole bunch of links for all different types of IFilters. 

The PDF link brought me to the Adobe site, and the Office Suites link brought me to the Microsoft site.  I downloaded each of the IFilters and then logged onto my Windows Server 2008 box to install.

NOTE:  I found out something interesting though.  It turns out that if you use the Debian/Linux VM’s you will not have any of these issues because they do not have IFilters and use various other tools to those conversions.  I have been told that the IFilters seem to be a better method, but that may be up for argument by people smarter than I.

Once on my server I just ran the IFilters exe files and after both installs went easy, I restarted the server.

Once restarted I went to the control panel under Cache Management and clicked on the “Rebuild Now” button and within a couple minutes all was good and I could now search the contents of PDF’s and Office 2007 documents.

NOTE:  I only had a small amount of attachments and very few pages.  It might take a longer time to rebuild for bigger sites.

I hope this helps any out there who is having the same issues.  I also want to remind people about the IRC support that can be had at the #mindtouch channel at irc.freenode.net.  It is well worth it and they people are VERY patient.