Giter Club home page Giter Club logo

hny-blogs's Introduction

Hny-Blogs

My own personal blog where I share thoughts and experiences about my journey as a developer. Created with Astro and Contentful CMS.

Table of Contents

Purpose

The purpose of this project is to create a personal blog while trying out Contentful CMS. Creating this project allowed me to learn more about content management systems (CMS) and get familiar with using one.

In addition, this project allowed me to practice creating websites utilizing the Astro framework and the power behind it, such as built-in pagination and dynamic routes.

Built with

All blog posts and most assets are stored on the Contentful Content platform. Blog posts are first written in Markdown, then rendered utilizing Marked, a markdown parser.

Setup

Upon cloning this repo, install it using your preferred package manager, like so:

$ npm install

Afterwards, run the project in dev mode:

$ npm run dev

and that's it!

Useful Resources

hny-blogs's People

Contributors

hny-codes avatar

Watchers

 avatar  avatar

hny-blogs's Issues

[TODO] - Enhance blog post items

Problem: Blog post items as of this issue are quite plain. A blog post is simply a title with a description to go along with what the blog post is.

Solution: UI enhancements should be done to make each blog post more engaging (and perhaps showing an image to go along as the blog preview)

[BUG] - Content shifting on Chrome

Reposting from Pull request - #8

A bug has occurred on Chrome where:

  • Chat bubbles creates content shifting when animating in on the home page.

This issue only occurs on Chrome at a relatively small viewport (ex. 375px) while Firefox does not seem to have this content shifting error as the API uses the fallback API functions instead due to it being unsupported.

EDIT:

After testing the preview site on different browsers on a mobile device, there seems to be no issue with the content shift as the API's fallback functions are called instead (this results in a simple fade animation).

Browsers tested on mobile device:

  • Safari
  • Brave
  • FireFox
  • Google Chrome

Migrate blog posts from Rich Text to Markdown

Because the project is moving from rich text to markdown format, the blog posts on Contentful must also be converted to markdown format.

Original content type: Rich Text

Target content type: Markdown

[TODO] - Search And Tagging System

Problem: Blog posts will become harder to navigate and find as the amount of blog posts increases.

Solution: Implementing a system that allows a user to search for a specific blog post (either by tag or name) will allow the user to easily find the specific blog post in mind.

Change content rendering to Markdown

Issue: Although Contentful's CMS is quite simple and easy to use, there are restrictions when it comes rendering particular content types (ie. code blocks).

Solution: The switch to markdown will allow easier content creation while still utilizing Contentful CMS's core platform.

[TODO] - Add Social Media Share Option to Blog Posts

Adding a widget/button that creates a link to the user's clipboard will help make sharing the blog posts easier than copy/pasting the blog post's URL in the search bar.

This will be located at the bottom of each blog post.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.