There is a blog for the Hungarian Microsoft Student Partners developed by Márk Bartha and Dominik Földi here on DotNest which is a great proof of how far you can get using only the built-in DotNest features and Media Theme for theming. Microsoft Student Partners are a group of university students who are enthusiastic about Microsoft technologies, regularly organizing meetups and workshops in their country. This blog has been written in Hungarian but it's still a really good example of a nice and heavily customized DotNest website.

This is a guest post by Márk Bartha, software engineer at Lombiq.

Click here to open the repository page of the theme project.

Requirements

Authenticated users who are using the website are in different roles. For example, the Student Partner role makes the user able to create a blog post, however, they are unable to publish it. Student Partner Mentors are proofreading the blog posts and hit the Publish button. Also, there are the Administrators who are able to create static pages (e.g. about page), event announcements or forms for contacting student partners. Let's see what features are implemented on this site hosted on DotNest.

• Create blog posts by student partners
• Publish blog posts by student partner mentors
• Set the status of blog posts (e.g. "Done", "Proofreading" or "Editing")
• Highlight a blog post on the home page
• Set header images for blog posts
• Create user profile pages to let the authors introduce themselves
• Create and publish event announcements and static pages by administrators
• Send emails to the student partners if a comment has been added anywhere on the site
• Create a contact page where the users can send a message to the student partners via email
• Share the blog posts on Facebook, Twitter, and Google+ automatically after a blog post has been published
• Other stuff like listing the posts and events in widgets and also be fancy using a nice customized Bootstrap theme

Some of these features are pretty trivial to achieve in Orchard. To keep this case study exciting only the most interesting implementations will be described in-depth.

Creating and displaying blog posts with proofreading possibility

Fields as placeholders

First of all, the BlogPost content type has been updated with a few additional fields. Most of these fields are functioning as placeholders (ie. their shapes has been overriden to display some data). For example, there are social share buttons displayed on the blog post detail page. To achieve this, an InputField has been added and overridden in the theme in the Fields.Input-Social-ContentSharing.liquid file containing the various share buttons. There is another field to display the author's name and profile link on both summary and detail pages. This one is in the Fields.Input-AuthorPart-ContentAuthor.liquid file that contains this code:

<span class="content-author {{ Model.ContentItem.ContentType }}-author">
  <a href="{% Href "~/Profile", Model.ContentItem.CommonPart.Owner.UserName %}">{{ Model.ContentItem.CommonPart.Owner.ProfilePart.FullName.Value }}</a>
</span>

Note, that these fields are on custom content parts to be able to reuse them on the Event content type.

Highlighting a blog post

To make it possible a BooleanField has been added to the BlogPost content type. Using this, the editor or the mentor can mark the post highlighted. There is a Query that fetches the posts with this field set ON and orders them by CreateDateUtc descending. It's using an unordered HTML list with a custom display type to render the items. Finally, a ProjectionWidget using this Query has been placed into the BeforeMain zone (can be Featured zone or anything) and only the first item has been displayed.

Proofreading blog posts

As mentioned above, the student partners are not authorized to publish blog posts. They can mark a blog post as "Done" by updating an EnumerationField attached to the BlogPost content type. After a mentor has logged in they see these posts and can review their content and publish them. If the post is not ready, they can mark it as "To be fixed". But how can the users see what status has a blog post been set to? The display shape of this field has been overridden in the Fields.Enumeration-StatusPart-Status.liquid that has been made visible in the admin summary from Placement.info. Since the theme stylesheets have no impact on Dashboard pages, this shape contains a liquid switch for assigning a background color for the status text container. Note, that it is possible to include static resources using the Liquid Markup. The following code section has been updated to show English status descriptions.

{% if Model.ContentItem.VersionRecord.Published == false %}
    {% case Model.ContentField.Value %}
        {% when "In progress" %}
            {% assign bgColor = "gray" %}
    
        {% when "Waiting for proofreading" %}
            {% assign bgColor = "#fa6800" %}
    
        {% when "Proofreading in progress" %}
            {% assign bgColor = "#6a00ff" %}
    
        {% when "Can be published" %}
            {% assign bgColor = "#008a00" %}
    
        {% when "Has to be fixed" %}
            {% assign bgColor = "red" %}
    
        {% else %}
            {% assign bgColor = "transparent" %}
    {% endcase %}
    
    <div style="padding: 5px;
                background-color: {{ bgColor }};
                width: auto;
                display: table-cell;
                color: white;
                font-weight: bold;
                width: 110px;
                text-align: center;">
        {{ Model.ContentField.Value }}
    </div>
{% endif %}

Using workflows to send emails

After a user commented on a blog post or an event announcement the student partners need to be notified about it. There is a pretty easy solution for this by using a workflow that is triggered by the Created Comment content item and followed by an Email activity. The Email activity is using tokens to display the author and their email address of the comment and the text itself.

The visitors on the site may want to send a message to the student partners. DynamicForms feature is the best solution for this since it has a Workflows activity that is fired after a dynamic form has been submitted. One can use this activity as a workflow trigger followed by an Email activity that can send the form values via email to the student partners.

Managing and displaying user profiles

The authors need to have a profile page where they can show a bio and other personal details like social profile links and their roles at Microsoft. Also, they want to list the posts they have already created on the site.

The Contrib.Profile module provides two pages where the users can edit and view their profiles outside the Orchard Dashboard. The User needs to have a ProfilePart where some fields have been attached to like FullName, Email, Bio and the social profile URLs.

To be able to list the blog posts created by the user a ProjectionWidget is used. The Query has a filter that selects the content items matched by a search query in a search index. The query string is a token which gets the username from the route: {Request.Route:username}.

Sharing blog posts on the social networks automatically

To reach the followers and notify them the posts has to be announced on Facebook and Twitter. To make this happen automatically the well-known IFTTT has been used. It polls the RSS feed of the blog, and if it detects a new content it shares a post on Facebook and Twitter using the title and the URL of the content. Nice and simple.

If you liked this case study and realized how cool features you have to create a nice website, just create your own site on DotNest for free. If you have any questions, then leave a comment below.

1 Comment

• simon said 6 years ago

  This was a great idea. Thumbs up