working on sample custom package

packages/my-custom-package/lib/components/CustomLogo.jsx

@@ -5,10 +5,11 @@ it the same way.
 */
 
 import React from 'react';
+import { IndexLink } from 'react-router';
 
 const CustomLogo = ({logoUrl, siteTitle}) => {
   return (
-    <h1 className="logo-text"><a href="/">⭐{siteTitle}⭐</a></h1>
+    <h1 className="logo-text"><IndexLink to="/">⭐{siteTitle}⭐</IndexLink></h1>
   )
 }
 

packages/my-custom-package/lib/components/CustomNewsletter.jsx

@@ -8,26 +8,20 @@ functions, event handlers, etc.).
 */
 
 import React, { PropTypes, Component } from 'react';
+import { FormattedMessage, intlShape } from 'react-intl';
 
 class CustomNewsletter extends Telescope.components.Newsletter {
 
   render() {
 
-    const currentUser = this.context.currentUser;
-
-    ({Icon} = Telescope.components);
-
-    if (this.state.showBanner) {
-      return (
+    return this.state.showBanner
+      ? (
         <div className="newsletter">
-          <h4 className="newsletter-tagline">✉️{this.props.headerText}✉️</h4>
+          <h4 className="newsletter-tagline">✉️<FormattedMessage id="newsletter.subscribe_prompt"/>✉️</h4>
           {this.context.currentUser ? this.renderButton() : this.renderForm()}
-          <a onClick={this.dismissBanner} className="newsletter-close"><Icon name="close"/></a>
+          <a onClick={this.dismissBanner} className="newsletter-close"><Telescope.components.Icon name="close"/></a>
         </div>
-      );
-    } else {
-      return null;
-    }
+      ) : null;
   }
 
 }

packages/my-custom-package/lib/components/CustomPostsItem.jsx

@@ -1,16 +1,18 @@
 import React, { PropTypes, Component } from 'react';
+import { FormattedMessage, FormattedRelative } from 'react-intl';
+import { Button } from 'react-bootstrap';
 import moment from 'moment';
+import { ModalTrigger } from "meteor/nova:core";
+import { Link } from 'react-router';
 
-class CustomPostsItem extends Telescope.components.PostsItem {
+class CustomPostsItem extends Component {
 
   render() {
 
-    ({UsersAvatar, UsersName, Vote, PostsStats, PostsThumbnail} = Telescope.components);
-
     const post = this.props.post;
 
     let postClass = "posts-item"; 
-    if (post.sticky) postClass += " post-sticky";
+    if (post.sticky) postClass += " posts-sticky";
 
     // ⭐ custom code starts here ⭐
     if (post.color) {
@@ -22,23 +24,29 @@ class CustomPostsItem extends Telescope.components.PostsItem {
       <div className={postClass}>
         
         <div className="posts-item-vote">
-          <Vote post={post} currentUser={this.props.currentUser}/>
+          <Telescope.components.Vote post={post} currentUser={this.context.currentUser}/>
         </div>
         
-        {post.thumbnailUrl ? <PostsThumbnail post={post}/> : null}
+        {post.thumbnailUrl ? <Telescope.components.PostsThumbnail post={post}/> : null}
 
         <div className="posts-item-content">
           
           <h3 className="posts-item-title">
-            <a className="posts-item-title-link" href={Posts.getLink(post)} target={Posts.getLinkTarget(post)}>{post.title}</a>
+            <Link to={Posts.getLink(post)} className="posts-item-title-link" target={Posts.getLinkTarget(post)}>
+              {post.title}
+            </Link>
             {this.renderCategories()}
           </h3>
           
           <div className="posts-item-meta">
-            {post.user? <div className="posts-item-user"><UsersAvatar user={post.user} size="small"/><UsersName user={post.user}/></div> : null}
-            <div className="posts-item-date">{moment(post.postedAt).fromNow()}</div>
-            <div className="posts-item-comments"><a href={Posts.getPageUrl(post)}>{post.commentCount}&nbsp;comments</a></div>
-            <PostsStats post={post} />
+            {post.user? <div className="posts-item-user"><Telescope.components.UsersAvatar user={post.user} size="small"/><Telescope.components.UsersName user={post.user}/></div> : null}
+            <div className="posts-item-date"><FormattedRelative value={post.postedAt}/></div>
+            <div className="posts-item-comments">
+              <Link to={Posts.getPageUrl(post)}>
+                <FormattedMessage id="comments.count" values={{count: post.commentCount}}/>
+              </Link>
+            </div>
+            {(this.context.currentUser && this.context.currentUser.isAdmin) ?<Telescope.components.PostsStats post={post} />:null}
             {this.renderActions()}
           </div>
 
@@ -46,9 +54,18 @@ class CustomPostsItem extends Telescope.components.PostsItem {
 
         {this.renderCommenters()}
         
+      
       </div>
     )
   }
 };
   
+CustomPostsItem.propTypes = {
+  post: React.PropTypes.object.isRequired
+}
+
+CustomPostsItem.contextTypes = {
+  currentUser: React.PropTypes.object
+};
+
 export default CustomPostsItem;