** Copied and pasted from the original PR. Only difference is that we added a Loading Icon because blog posts were taking time to load.
Types of changes
[ ] Bugfix (change which fixes an issue)
[x] New feature (change which adds functionality)
[ ] Refactor (change which changes the codebase without affecting its external behavior)
[ ] Non-breaking change (fix or feature that would causes existing functionality to work as expected)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
Purpose
DigiPress wants to move off of Tumblr. We created a blog from within UCLA Radio. Users can make posts from KeystoneJS's Admin UI. Old posts from Tumblr are also compiled into the new blog. They have been categorized via machine learning. The same categories are used in the new Admin UI.
Approach
Mia categorized old tumblr posts using machine learning with app/database/scripts/augment_training_set.py. Her original input came from the JSON object generated by app/database/scripts/addTumblrPosts.js, which fetches all the Tumblr posts and stores them in the database.
When a user goes to /blog (BlogPage.js), the /getBlogPosts (index.js) route is called. This fetches all the Keystone posts from the deployed KeystoneJS API and the stored Tumblr posts which are in MongoDB. We modified all the post objects to include their original platform "KEYSTONE" or "TUMBLR" and to include a category object for filtering. These posts are displayed with some g00d ole styling on /blog.
The filter bar (BlogFilterBar.js) essentially keeps track of an array of toggleable filters. The current state of the array is sent back to BlogPage.js, which filters the fetched blogposts object based on the active filters. The search bar (BlogSearch.js) dynamically searches through all the fetched blogposts, resetting the pagination (Pagination.js) component to 1 each time. Users can add only numerical input to pagination.
Keystone Posts are parsed manually. Admin Users are instructed to include images as <Image#> in the content object. The images are fetched as separate parts of the post object. The post's content object is parsed to replace all <*> with their corresponding image.
Updated the README for new blog development instructions.
Testing
Install package.json: yarn
Run mongod: in one terminal: mongod
Delete the blogposts object from the mongo shell: in a second terminal: mongouse uclaradiodb.blogposts.drop()Ctrl+C
** Copied and pasted from the original PR. Only difference is that we added a Loading Icon because blog posts were taking time to load.
Types of changes
Purpose
DigiPress wants to move off of Tumblr. We created a blog from within UCLA Radio. Users can make posts from KeystoneJS's Admin UI. Old posts from Tumblr are also compiled into the new blog. They have been categorized via machine learning. The same categories are used in the new Admin UI.
Approach
Mia categorized old tumblr posts using machine learning with
app/database/scripts/augment_training_set.py. Her original input came from the JSON object generated byapp/database/scripts/addTumblrPosts.js, which fetches all the Tumblr posts and stores them in the database.When a user goes to /blog (BlogPage.js), the /getBlogPosts (index.js) route is called. This fetches all the Keystone posts from the deployed KeystoneJS API and the stored Tumblr posts which are in MongoDB. We modified all the post objects to include their original platform "KEYSTONE" or "TUMBLR" and to include a
categoryobject for filtering. These posts are displayed with some g00d ole styling on /blog.The filter bar (BlogFilterBar.js) essentially keeps track of an array of toggleable filters. The current state of the array is sent back to BlogPage.js, which filters the fetched blogposts object based on the active filters. The search bar (BlogSearch.js) dynamically searches through all the fetched blogposts, resetting the pagination (Pagination.js) component to 1 each time. Users can add only numerical input to pagination.
Keystone Posts are parsed manually. Admin Users are instructed to include images as <Image#> in the content object. The images are fetched as separate parts of the post object. The post's content object is parsed to replace all <*> with their corresponding image.
Updated the README for new blog development instructions.
Testing
yarnmongodmongouse uclaradiodb.blogposts.drop()Ctrl+Cyarn fill-blog-dbyarn dev. Navigate to localhost:3000/blog.Screenshot(s)
Filtering
Checklist
masterwithout error.Link to Issue
#331