devCode

Back to few days ago, a friend of mine who also using .NET BlogEngine was asking me about how to modify the code to make it support password protected post/page.

After I look into details about how am I going to kick start... and I found the best implementation is writing an 'Extension'. That how the 'PasswordProtected' extension was borned! See the sample post here!

Before you can enjoy the password protection features, you are require to defined more roles besides both the existing 'Administrators' and 'Editors' in the \App_Data\roles.xml data file as show in the screen shot below,

Note, after you have updated the roles.xml, you are require to restart the IIS before you can see the new defined role appear on the users screen. Then, you are begin to create more users under any others roles other then 'Administrators' and 'Editors'. As the best practice is using email address as the login ID, and further defined the nickname under the respective profile, so a correct nickname will be display on the comments instead the login ID (email address).

Next is download this extension and upload to your respective .NET BlogEngine folders.

1.   Copy the 'PasswordProtected.cs' source fiel to '\\blog\App_Code\Extensions' folder.
2.   Copy the 'protected.png' image file to '\\pics' folder (you may change this image).

Last thing you need to know is the syntax... a syntax that make your post/page become password protected!

  [protected:on|off;roles:role1,role2,role3]

Below is some of the self explain combination,

• Turn the password protection off. 
    [protected:off]
• Sample syntax for password protection enabled and only limit to all users with under role of 'role2'.
    [protected:on;roles:role2]
• Another sample syntax with password protection enabled and limit to all users with under role of 'role1' and 'role3'.
    [protected:on;roles:role1,role3]

Note, both 'Administrators' and 'Editors' role will overwrite the defined role in the above syntax.

 PasswordProtected.v1.0.826.1.zip (37.48 kb)

BlogEngine.NET ASP.NET, extensions

This is a protected post, you are require to login prior read this post.

BlogEngine.NET ASP.NET, extensions

Recently a BE.NET user was requesting a link list widget that supported multiple group which is not available in the current 'Link List' widget. Therefore, I have spent some time to create a new widget by using the ASP.NET treeview control to have a better UI grouping presentation.

Throughout the development cycle, I thought of it will be added value if I exposed some of the basic settings to the user like list below,

• Main node title.
• Group node image.
• Link node image.
• Show/Hide the main node.
• Show/hide the dotted line.
• Expand/collapse node capability.
• Cutomize the group and link node style.
• The easy way to rearrange the group and link order.
• Show/hide individual group/link.
• Support multiple sub group.

Screen shot below show the major 'Treeview Link List' widget settings

While the following screen shot is the look and feel of this widget.

Now you may download and start using it in your personal blog that used .NET BlogEngine as the base engine.

 TreeList-20090805-1.0.zip (11.79 kb)

BlogEngine.NET widget

After reviewed the comment from Prima, I notice it is a must capabilty to limit a dedicated group of user from accessing the NewsBar's admin console, especially in the multi editors environment.

Hence, I review the Newsbar code and decided to go one step further... instead of hardcoded the role in the code. I created a "Roles" property which allow webmaster to define which roles are allow to access the NewsBar's admin console, like we defined an link in the web.sitemap page as show in code snippet below.

ToDo...

   1:  <hz:NewsBar id="newsbar" runat="server" Roles="Administrators, Editors" />

If the Roles is set to "Administrators", then only those login user with the "Administrators" role can access the NewsBar management console, same as apply to "Editors". The default value is "Administrators, Editors", which is enabled for both administrators and editors user group.

To read more about this control, please visit this link...

Download Here... 

newsbar-freshcitrus.zip (9.94 kb)
newsbar-inove.zip (11.75 kb)
portraitpress.zip (8.90 kb)

BlogEngine.NET control

I had used some others free blogging platform in the pass, and they always list out all my old posting with the correspond status in the control panel. Which is the most easiest way to find a particular post. 

Unfortunately, the BlogEngine.NET platform I used was not cover this area. Which mean I either have to search by key words or walk through page-by-page. Also, I found it was very difficult for me to visually find out which of my posting are not publish or in scheduling.

Due to I am too lazy searching thorugh page-by-page, so I made a step forward to create my own listing page.

With this listing control, I am easily get to the posting I need by the aids with the following support filters,

• By Post or Page.
• By Category or Tags.
• By Published, Hidden or Scheduled

ToDo

1. Unzip the Listings.zip
2. Copy the Listings.ascx/ascx.cs files into your blog /admin/pages directory.
3. Next you need to add the following line of code into the /admin/pages/web.config (code snippet #1).
4. Last, you need to include the Listings.ascx into your site map (\web.sitemap) config file (code snippet #2).

Code snippet #1

   1:    <location path="Listings.aspx">

   2:      <system.web>

   3:        <authorization>

   4:          <allow roles="administrators"/>

   5:          <deny users="*" />

   6:        </authorization>

   7:      </system.web>

   8:    </location>

Code snippet#2

   1:  <?xml version="1.0" encoding="utf-8" ?>

   2:  <siteMap xmlns="

   3:  http://schemas.microsoft.com/AspNet/SiteMap-File-1.0

   4:  ">

   5:    <siteMapNode url="default.aspx" title="Blog Engine" description="" roles="administrators, editors">

   6:      <siteMapNode url="~/admin/Pages/Listings.aspx" title="Listings" description="" roles="administrators, editors"/>

   7:    </siteMapNode>

   8:  </siteMap>

Once you have done the above steps, you will be able to access the Listing page via the admin menu shown below.

Since, I can save my time with this little adds-in control, and I wish it can help you save your time as well. So, do enjoy it! 

Listings.zip (4.94 kb)

BlogEngine.NET control

When I composing the Headline News Control topic last week, and I keep suffering from formatting the sample code with the 'Code Formatter Extension' developed by manoli. After spent some time digging in and out from Google, and finally I found a posting about the missing CodeFormatterExtension.cs was actually put into a wrong folder (App_Code\Extensions\CodeFormatter) with a wrong filename (CodeFormatter.cs) too.

Next, I encounter another new problem... that is the code snippet does not formatted at all. So, I continue to digging through Google again. Last, I found this posting! Again... it does not solve my problem! Therefore, I took a visit manoli website and try out the version in his website and compare the formatted code with the output from the 'Code Formatter Extension' I have, and I notice there are differents! Hence, I step into the code and fixed it up and proceed to added the code, so that it will automatic include the missing CSS (csharp.css that I download from manoli website) link tag in the output HTML.

After a long struggling with this 'Code Formatter Extension', finally I get everything up and running with a minor touch up the csharp.css to have a better code snippet window being render in the blog. But, there is one problem I failed to resolve it! that is the alternative line background color does not cover the full code snippet when the code is too long as show in sample below.

   1:      /// <summary>

   2:      /// An event that handles ServingEventArgs

   3:      /// </summary>

   4:      /// <param name="sender"></param>

   5:      /// <param name="e"></param>

   6:      void ServingContent(object sender, ServingEventArgs e)

   7:      {

   8:        if (e.Body.Contains("XYZ"))

   9:        {

  10:            HtmlLink cssLink = new HtmlLink();

  11:            cssLink.Attributes["rel"] = "stylesheet";

  12:            cssLink.Attributes["type"] = "text/css";

  13:            cssLink.Attributes["href"] = String.Concat(Utils.RelativeWebRoot, "CodeFormatter/csharp.css");

  14:            System.Web.UI.Page page = (System.Web.UI.Page)HttpContext.Current.CurrentHandler;

  15:            page.Header.Controls.Add(cssLink);

  16:            

  17:            e.Body = codeRegex.Replace(e.Body, new MatchEvaluator(CodeEvaluator));

  18:            e.Body = codeBeginTagRegex.Replace(e.Body, @"<div class=""code"">");

  19:            e.Body = codeEndTagRegex.Replace(e.Body, @"</div>");

  20:        }

  21:      } 

To Do...

1. Unzip the CodeFormatterExtensions.zip
2. Copy the respective files into your blog root directory.

Syntaxs... 

Here are those syntax supported by this 'Code Formatter Extensions'

[code:c#|vb|js|html|xml|tsql|msh;ln=on|off;alt=on|off]

   Put your code snippet here

[⁄code]

Since I have spent the time to fixed most the problem in this 'Code Formatter Extension', and wish to save those BlogEngine.NET newbies time to fixed this problem...  I am upload the updated copy of 'Code Formatter Extensions' for those wish to download and use it. Do enjoy this extension origin from manoli.  

CodeFormatterExtensions.zip (19.13 kb)

BlogEngine.NET extensions

Sometimes I wish some of my posting always pinned at the top of my blog which can delivery to each of the new reader without wasting thier time to search through the old posting, like I would like to publish an announcement for a certain of time frame. Unfortunately I can not get a ready to use control for it. Therefore, I come to the mind to create my own headline control that serve my purpose, and after a struggle few days of coding... Finally I get my headline control up and deploy into my blogging site.

Since it is a add on feature for the BlogEngine.NET, and I would like to share with other BlogEngine.NET user as well. For time being, I have customized the NewsBar for freshcitrus and inove theme. I will try to adopt it to more themes in future for those who would like to use this control in thier blog.

To deploy this headline control into your blog site is simple, all you need to do is follow the steps below and you will get it done and running in just few minutes,

How to...

1. Unzip the downloaded headline control
2. Copy the following files into the respective theme folder
   1. NewsBar.ascx
   2. NewsBar.ascx.cs
   3. NewsBar.css
   4. site.master ¹
3. Copy the nbmc.png² into the images folder under the theme folder.
4. Refresh your blog, and login to start defined the headline news and featured news that you wish to pinned at top of your blog.

To do...

¹To consume the headline control, all you just need to do is add the following code into the site.master file,

   1:  <%@ Register TagPrefix="hz" TagName="NewsBar" Src="NewsBar.ascx" %>

   2:  <!-- place the following code at the place you want the headline control to be shown -->

   3:  <hz:NewsBar id="newsbar" runat="server" />

²The nbmc.png is the admin control panel background image used headline control (NewsBar.ascx), you may create your own image and overwrite it or even modify the NewsBar.css to fit your selected theme.

Where is...

All the defined headline and features news was save under App_Data\NewsBar.xml with the following format.

   1:  <?xml version="1.0" encoding="utf-8" standalone="yes"?>

   2:  <News>

   3:      <Title>A1 Headline</Title>

   4:      <ShowTitle>0</ShowTitle>

   5:      <PublishLocation>1</PublishLocation>

   6:      <Headline Type="0">539c672f-f9d1-47bf-bb11-c7e698751fb8</Headline>

   7:      <Featured>

   8:          <Post Type="0">0ce20c70-779a-4031-a167-858681447648</Post>

   9:          <Post Type="0">17084e6e-4cb1-4694-8d43-5d58acc08a42</Post>

  10:      </Featured>

  11:  </News>

Where the Type="0" mean the stored GUID is refering to a Post, and Type="1" mean refering to a Page.

Admin Console...

Once you have login, the 'Headline Management Concole' as shown in screen shot below will be available for you.

With the console, you can make the following change,

1. Change the headline section title.
2. Decide to show/hide the headline section title.
3. Define where you want the headline/features news beging display
   1. None
   2. All Location
   3. Post list only
   4. Single post
   5. Single page
   6. Post list and single post
   7. Post list and single page
   8. Post list and page list
4. Select which page/post to be display as headline news.
5. Add/remove any page/post from the featured news list.

Update...

• 24, March 2009 11:52 AM, Included Newsbar for PortraitPress theme.
• 13, April 2009 12:00 PM, Limit dedicated group of user access the Newsbar's admin console, more...

Download Here... 

newsbar-freshcitrus.zip (9.77 kb)
newsbar-inove.zip (11.57 kb)
newsbar-portraitpress.zip (8.72 kb)

BlogEngine.NET control

 I notice the current 'TextBox' widgets come with the BlogEngine.NET was trim off some of the JavaScript. Therefore, I have decided to create my own Html/javaScript widget. Which I just change the code edit to a normal Textbox control instead of the TinyMCE WYSWYG editor used in the TextBox widget.

How to

1. After download and unzip the HtmlBox-Widgets.zip
2. Copy into the 'Widgets' folder in your BlogEngine.NET web application root folder
3. Now you can start using it. ;)

HtmlBox-Widgets.zip (1.69 kb)

BlogEngine.NET widget