Revamp of Node2Blog #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

kenshiro-o wants to merge 28 commits into jawerty:master from kenshiro-o:master

.gitignore

-Original file line number
+Diff line change
@@ -1,2 +1,5 @@
     npm-debug.log
-    node_modules
+    node_modules
+    initproject.sh
+    kenshiro-hackuto-blog.iml
+    .idea

History.md

-Original file line number
+Diff line change
@@ -0,0 +1,27 @@
+.0.1
+    ====================
+    * Removed MongoDB ID from post URLs so as to make them more SEO-friendly
+    * Added projects page, removed some unused jade template and improved style
+.0.0 / 22/08/2013
+    ====================
+    * MAJOR refactoring of API (in progress).
+    * Revamping of layout as well (in progress).
+    * Work on Admin, new post view
+    * Improved look and feel, error handling (404 + 500) and code quality
+    * Readers can now submit comments to a given blog post
+    * Using the configured port in blogConfig.json to bind the server to the specified port
+    * Displaying correct page title
+    * Added RSS support
+    * Added Google Analytics
+    * Fixed issue FBK like URL
+    * Added edit post feature
+.2.2 / 2013-02-23
+    ====================
+    * Added favicon
+.2.1 / 2013-02-03
+    ====================
+    * Improved style
+    * Blog details are now loaded from a json configuration file

README.md

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,10 +1,13 @@
  
    <h1>Node2Blog</h1>

    <p>Node2Blog is a simple and easy to use blog template for the casual blogger. For those who wish to setup an operable blog in minutes, this is the project for you. The blog is built with Node.js, Express.js, and Mongodb (with the mongoose driver). The instructions for quickly building a blog with the Node2Blog template is shown below.</p> 

    <p>Node2Blog is a simple and easy to use blog template for the casual blogger.

    For those who wish to setup an operable blog in minutes, this is the project for you.

    The blog is built with Node.js, Express.js, and Mongodb (with the mongoose driver).

    The instructions for quickly building a blog with the Node2Blog template is shown below.</p>

    <h1>Features</h1>

    <ul>

    	<li>

    		Intergration of the lightweight rich text editor, NicEdit.

    		Integration of the lightweight rich text editor, NicEdit.

    	</li>

    	<li>

    		Utilizes the Express framework.

    @@ -27,12 +30,20 @@
  
    	<li>

    		Easy Heroku integration.

    	</li>

    	<li>

    		Create, edit, and delete your posts.

    	</li>

    	<li>

      	RSS

      </li>

    	<li>

    		And much more...

    			And much more...

    	</li>	

    </ul>

    <h1>Prerequisites</h1>

    <ul>

    	<li>

    @@ -56,116 +67,107 @@
  
    <pre>$ node blog</pre>

    <p>The blog should be running on your localhost at the 3000 port; go to <a href='http://localhost:3000'>http://localhost:3000</a> to view it. And it should look similar to the screenshot below. </p>

    <img src='https://raw.github.com/jawerty/Node2Blog/master/public/images/screenshot1.png'></img>

    <img src='https://raw.github.com/kenshiro-o/Node2Blog/master/docs/node2blog_main_screen.png'></img>

    <p>If you would like to make a post, go to the the url http://localhost:3000/admin in order to log in and use the admin settings. <b>The password is <i>'narwhal'</i> by default</b>. To change the password, go to the file 'blog.js' and change the p variable at the top to your desired password.</p>

    <h4><b>*Note: Change the t variable in 'blog.js' to your blog title (i.e t = 'Jared's Tech Blog'). <br>Also, Change the st variable in 'blog.js' to whatever you would like your subtitle to be (i.e st = 'I am an App developer').</b></h4>

    <p>If you would like to make a post, go to the the url http://localhost:3000/admin in order to log in and use the admin settings.

    <b>The password is <i>'Your mongoDB password'</i> by default</b>. To change the password, go to the file /config/blogConfig.json

    and change the 'password' value</p>

    <img src='https://raw.github.com/jawerty/Node2Blog/master/public/images/screenshot2.png'></img>

    <h4><b>*Note: You can also change the subtitle and title of the blog in the /config/blogConfig.json file (i.e st = 'Exploring the path of the Hackuto-Shinken').</b></h4>

    <img src='https://raw.github.com/kenshiro-o/Node2Blog/master/docs/node2blog_admin_page_login_screen.png'></img>

    <p>When successfully logged in, your navigation bar should have three new options appended to it...</p>

    <ol>

    	<li>Admin-New (create a new post)</li>

    	<li>Admin-Delete (delete a post)</li>

    	<li>Admin-Logout (log out of admin view)</li>

    	<li>Create Post</li>

    	<li>Edit/Delete Post</li>

    	<li>Log out</li>

    </ol>

    <img src='https://raw.github.com/jawerty/Node2Blog/master/public/images/screenshot3.png'></img>

    <img src='https://raw.github.com/kenshiro-o/Node2Blog/master/docs/node2blog_admin_page.png'></img>

    <p>Creating and deleting posts should be self-explanatory; however, creating a new static page similar to the default 'about' page is detailed below.</p>

    <p>Creating, editing and deleting posts should be self-explanatory.

    However, creating a new static page similar to the default 'about' page is detailed below.</p>

    <h1>Adding a static page</h1>

    <p>To create a new page, first you must go to the 'layout.jade' file in the /views folder. Add the following code under the about 'li' tag which is in the 'ol' tag in the #nav div.</p>

    <p>To create a new page, first you must go to the 'default-layout.jade' file in the /views folder.

    Add the following code under the "About" 'a' tag which is in the div with the id 'widget-pages'</p>

    <pre>

    <code>

    a(href="/new-page-name")

    	li new_page_name

            #widgets

              #widget-pages

                h3.widget-title Pages

                a.widget-section-link(href="/") Home

                a.widget-section-link(href="/about") About

                a.widget-section-link(href="/newPage") New Page

    </code>

    </pre>

    <p>Now create a new view with whatever name you want (i.e. new_page_name.jade) in the /views folder. Add the following code to your new view</p>

    <p>Now create a new view with whatever name you want (i.e. newPage.jade) in the /views folder.

    Add the following code to your new view</p>

    <pre>

    <code>

    extends layout

    extends default-layout

    block wrapper_content

    	.container

    		h1 new_page_name

    		br 

    		p random information

    block blog-content

      .container

        h1 This is the new page

        br

        p Random information

    </code>

    </pre>

    <p>Now modify the get functions in the 'blog.js' file.</p>

    <label>The new modified code</label>

    <pre><code>

    ////////get////////

    app.get('/', home.index);

    app.get('/admin/delete', admin.delete);

    app.get('/admin/new', admin.new);

    app.get('/post/:id', post.post_view);

    app.get('/admin' || '/admin/', admin.admin_check);

    app.get('/admin/logout', function(req,res){

      delete req.session.admin;

      console.log('logged-out')

      res.redirect('/');

    });

    app.get('/post/:id/:title', post.get);

    app.get('/about', function (req, res) {

        res.render('about', {title: blogConfig.title + " - About", admin: req.session.admin});

    app.get('/about', function(req, res) {

      res.render('about', { title: t, admin:req.session.admin});

    });

    //The code you added

    app.get('/new-page-name', function(req, res) {

      res.render('new_page_name', { title: t, admin:req.session.admin});

    // The code you added

    app.get('/newPage', function(req, res){

        res.render("newPage", {title: "New Page", admin: req.session.admin});

    });

    ///////////////////

    </code></pre>

    <p>You should now be able to go the the '/new-page-name' route and have a view similar to what is below</p>

    <p>You should now be able to go the the '/newPage' route and have a view similar to what is below</p>

    <img src='https://raw.github.com/jawerty/Node2Blog/master/public/images/screenshot4.png'><img>

    <img src='https://raw.github.com/kenshiro-o/Node2Blog/master/docs/node2blog_new_page.png'><img>

    <h1>Adding a side widget</h1>

    <p>In order to add a side widget, or simply a box under the "Latest Posts" box, you must go to the file 'layout.jade' and insert this line </p>

    <p>In order to add a side widget, you must go to the file 'default-layout.jade' and insert your widget inside

    the div with id "widgets" </p>

    <pre>

    <code>

    .widget

    </code>

              #widgets

    </pre>

    <p>Exactly where it is inserted below</p>

    </code>

    <p>For instance the "Latest Posts widgets looks like this</p>

    <pre>

    <code>

    #box

    	#content

    		#wrapper

    			block wrapper_content

    		if(typeof posts == 'undefined')

    			.widget

    				a(href='/') Back to home

    		else

    			.widget

    				p(style='font-size: 150%; font-weight:bold; border-bottom: 1px solid #b1b1b1;padding-bottom: 5px;margin-bottom: 4px;') Latest Posts

    					br

    					pre

    					for post in posts

    						table(id='post_table', style='padding-top:10px;border-bottom:1px solid #ddd')

    							tr

    								td

    									#left

    										label(style='font-size: 130%;') -&nbsp&nbsp

    								td

    									#right

    										a(href='/post/#{post._id}/#{post.title_sub}', style='font-size: 130%;')=  post.title

    							tr(style='height:10px;')

    		<b>.widget</b> //the inserted code

              #widget-posts

                h3.widget-title Latest Posts

                for post in posts

                  a.widget-section-link(href="/post/#{post._id}/#{post.friendly_link_title}") #{post.title}

    </code>

    </pre>

    <p>Now you can input any sort of information you'd like in your new widget box.<b>*Note: Without any posts on your blog, the widget boxes will not be positioned adequately.</b></p>

    <br>

    <p>Now you can input any sort of information you'd like in your new widget box. Remember that you can add any style

    you want to your widgets by editing the <strong>style.css</strong> file

    <br>

    <h3>Congratulations you now have a working blog suitable to your basic blogger needs.</h3>

    <h3>Congratulations! You now have a working blog suitable to your basic blogger needs.</h3>

    <br>

    <br>

    <h1>Optional: Heroku Setup</h1>

    <h4><b>*Note: You must have a heroku account along with the <a href='https://toolbelt.heroku.com/'>Heroku Toolbelt</a> to follow this part of the tutorial</b></h4>

    <p>Simply follow the directions on <a href='https://devcenter.heroku.com/articles/nodejs'>this</a> page to deploy the blog with heroku. However, in order to use MongoDB, you must enter the following command in the directory of your project</p>

    @@ -175,8 +177,24 @@ $ heroku addons:add mongohq:sandbox
  
    </code>

    </pre>

    <p>This addon is a <b>free</b> starter package for running a server with a MongoDB backend by MongoHQ. This is essentially all you need to setup the basic functions to your new blog.</p>

    <h1>Contributors</h1>

    <ul>

    <li><a href="https://github.com/jawerty">jawerty</a>: Creator of Node2Blog</li>

    <li><a href="https://github.com/patgannon">patgannon</a>: RSS support</li>

    <li><a href="https://github.com/kenshiro-o">kenshiro</a>: Rewrite and style improvement</li>

    </ul>

    <h1>Contact</h1>

    <p><b>Contact the developer here</b><br>Email: jawerty210@gmail.com<br>Website: <a href='http://wrightdev.herokuapp.com'>http://wrightdev.herokuapp.com</a></p>

    <p><b>Contact the developers here</b>

    <br>

    Email: <a href="mailto:jawerty210@gmail.com">jawerty210@gmail.com</a>, website: <a href='http://jawerty.github.io'>http://jawerty.github.io</a>

    <br>

    Email: <a href="mailto:kenshiro@kenshiro.me">kenshiro@kenshiro.me</a>, website: <a href='http://kenshiro.me'>http://kenshiro.me</a>

    </p>

    <h1>MIT LICENSE</h1>

    The MIT License (MIT) Copyright (c) 2012 Jared Wright

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revamp of Node2Blog #5

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Revamp of Node2Blog #5

Are you sure you want to change the base?

Uh oh!

Revamp of Node2Blog #5

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!