Getting Started with Code Samples - How we created that custom component

There have been some questions on how we created the custom components you see on the Dev Nation home page.  For the first example, I'd like to show the "Getting Started with Code Samples" code.  This component looks for the latest messages tagged with the specific term "Code Sample".  There is some error checking and logged added for if that tag doesn't exist at all.  Keep in mind that the board id ("studio") and the term "Code Sample" are both hard coded.  If you would like to use this code on your site, you will ned to change those to fit your community.

 

<#macro debug message>
	<#if utils.logs.name.develop_start_code_samples.debugEnabled>
		${utils.logs.name.develop_start_code_samples.debug(message)}
	</#if>
</#macro>

	<#attempt>
		<#assign recent = restadmin("/boards/id/studio/tagging/for/tags/text/Code%20Sample/messages/recent?page=1&page_size=3").messages>
		<#if recent?has_content>
		<div id="devnet-samples" style="color:#212620; font-size:24px; font-family: ff-din-round-web-pro-1, ff-din-round-web-pro-2, Arial;">
				<div class="headline-devnet">
				Getting Started with Code Samples
				</div>
				<div class="devnet-code-wrapper">
				
					<img style="float:left" src="/html/images/computer_person_code_samples.png">
					<#list recent.message as message>
				      <#if message.deleted == "false">
				      <#assign full_message = restadmin("${message.@href}").message />
				      
				      <div class="largetext_devnet">
								<a class="devnet-title-link" href="${message.@view_href}"><#if message.subject?length gt 40> ${message.subject?substring(0, 37)}... <#else>${message.subject}</#if></a>			
								<#assign teaser = utils.html.stripper.from.gdata.strip(full_message.body) />
										<div class="teaser"><#if teaser?length gt 70> ${teaser?substring(0, 67)}... <#else>${teaser}</#if></div>
							
				   	  </div>
				   	  </#if>
					</#list>
						
			
		    	  <div class="lia-view-all" style="float:right; font-size:12px; font-family:arial;">
		       		<a href="/t5/tag/Code%20Sample/tg-p/board-id/studio">View All</a>
		       		</div>
		       	</div>
		</div>
		
		</#if>
	<#recover>
		<@debug message="error making REST call: " + .error />
		<#-- show nothing if the REST call fails -- this can happen if the Code Sample tag does not exist -->
	</#attempt>