Skip to content

Commit

Permalink
Update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
cp-sumi-k committed Feb 22, 2024
1 parent 7b94103 commit c3d1b6e
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 95 deletions.
126 changes: 31 additions & 95 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,78 +1,55 @@
# Feature-Rich Blog Platform for writing and publishing your content
<p align="center"><a href="https://canopas.com/contact"><img src="./assets/banner.png"></a></p>

This is our open-source Next.js blog website of [canopas](https://canopas.com). This powerful and feature-rich application is designed to help bloggers and content creators build and manage their online presence with an emphasis on search engine optimization (SEO). Whether you are a beginner blogger or an experienced content creator, our project provides a seamless and user-friendly experience to showcase your expertise and attract more traffic through superior SEO techniques.
# Feature-Rich Blog Admin Platform for writing and publishing your content

## Showcase

This repository contains the working code of [our resources](https://canopas.com/resources). You can check out the link to view a live example of this repository.

### Admin panel for handling content
This is our open-source Strapi blog admin panel of [canopas](https://canopas.com). This application is designed to help bloggers and content creators build and manage their online presence with an emphasis on search engine optimization (SEO). Whether you are a beginner blogger or an experienced content creator, our project provides a seamless and user-friendly experience to showcase your expertise and attract more traffic through superior SEO techniques.

![Admin panel](https://github.com/canopas/canopas-blog/assets/115449373/7542ff05-08ca-45ae-a4c6-24785419ae35)

### Blogs website

#### Blog Index page UI
## Showcase

![Blog index page UI](https://github.com/canopas/canopas-blog/assets/69897605/10747407-ada8-40fc-b23c-fa965c0bc33a)
This repository contains the admin panel of [our resources](https://canopas.com/resources) and [blog](https://canopas.com/blog).

#### Blog UI
### Admin panel preview

![Blog UI](https://github.com/canopas/canopas-blog/assets/69897605/bf24fbb5-9771-495a-a553-1c54e0b271d7)
![Admin panel](https://github.com/canopas/canopas-blog-admin/assets/115449373/7542ff05-08ca-45ae-a4c6-24785419ae35)

---

# Table of contents

- [Key features](https://github.com/canopas/canopas-blog#key-features)
- [Admin panel -- Backend](https://github.com/canopas/canopas-blog#admin-panel----backend)
- [Requirements](https://github.com/canopas/canopas-blog#requirements)
- [Setup](https://github.com/canopas/canopas-blog#setup)
- [Customization](https://github.com/canopas/canopas-blog#customization)
- [Blogs website -- Frontend](https://github.com/canopas/canopas-blog#blogs-website----frontend)
- [Requirements](https://github.com/canopas/canopas-blog#requirements-1)
- [Setup](https://github.com/canopas/canopas-blog#setup-1)
- [Formatting and Linting](https://github.com/canopas/canopas-blog#formatting-and-linting)
- [Deployment](https://github.com/canopas/canopas-blog#deployment)
- [Dependencies](https://github.com/canopas/canopas-blog#dependencies)
- [Licence](https://github.com/canopas/canopas-blog#licence)
- [Key features](https://github.com/canopas/canopas-blog-admin#key-features)
- [Requirements](https://github.com/canopas/canopas-blog-admin#requirements)
- [Setup](https://github.com/canopas/canopas-blog-admin#setup)
- [Customization](https://github.com/canopas/canopas-blog-admin#customization)
- [Formatting and Linting](https://github.com/canopas/canopas-blog-admin#formatting-and-linting)
- [Deployment](https://github.com/canopas/canopas-blog-admin#deployment)
- [Dependencies](https://github.com/canopas/canopas-blog-admin#dependencies)
- [Licence](https://github.com/canopas/canopas-blog-admin#licence)

---

# Key Features

1. **Next.js in Website:** Our blog website is built Next.js, a powerful React framework known for its server-side rendering (SSR) and static site generation (SSG) capabilities. This ensures lightning-fast page loading and optimal performance, enhancing the user experience and search engine rankings.
2. **Strapi CMS in Admin Panel:**: Seamlessly manage your website's content using Strapi CMS. The admin panel allows easy content creation, editing, and publishing, making it simple for non-technical users to update the website's content.
1. **Strapi CMS in Admin Panel:**: This project created with Strapi. This provides us CMS with API as backend. We can use both for Creating Editing, and Publishing the blogs and its relavant content seamlessly.

3. **SEO-friendly URLs and Metadata:** We prioritize SEO best practices to ensure that your blog posts receive the visibility they deserve in search engines. From meta tags to URL structure and sitemaps, our blog website is equipped with all the essential elements for optimal SEO.
2. **SEO-friendly URLs and Metadata:** Each posts has SEO fields like meta tags, URL structures and sitemaps. You can customize all the essentia; fields for Optimal SEO.

4. **Schema Markup and Rich Snippets:** Leveraging structured data and schema markup, our blog website enables search engines to display rich snippets in search results. This visually enhances your listings and provides valuable information, enticing users to click through to your blog.
3. **Automatic previews:** We created custom previews like medium in Blog Editor.Your blog post will have preview of links based on its data like images or videos. You need to just paste the links and it will geneate preview on save and you can see it at your frontend.

5. **Responsive and Mobile-friendly Design:** We understand the importance of a mobile-friendly design in modern SEO. Our blog website is fully responsive and adapts seamlessly to various screen sizes, providing a positive user experience across devices.
4. **CI/CD and Deployment:** With CI in place, every code change is automatically tested and integrated into the main codebase. This ensures that the main branch always remains stable, reducing the chances of bugs and allowing for rapid deployment.
5. **Recommended Posts:** Enhance user engagement by showcasing recommended posts to your audience. This feature suggests relevant content based on the user's reading history, keeping visitors on your website for longer.

6. **Open Graph and Twitter Card Integration:** Sharing blog posts on social media is crucial for driving traffic. Our project integrates Open Graph and Twitter Card meta tags, allowing for optimized sharing on social platforms, complete with engaging previews and relevant information.

7. **Image Optimization:** Images play a significant role in SEO and user experience. Our project automatically optimizes images, reducing their file sizes without compromising quality, resulting in faster loading times and better search rankings.
8. **CI/CD and Deployment:** With CI in place, every code change is automatically tested and integrated into the main codebase. This ensures that the main branch always remains stable, reducing the chances of bugs and allowing for rapid deployment.

9. **Code formatting and linting:** Clean, readable, and consistent code is the foundation of any successful project. This website follows strict code formatting and linting rules, which are enforced through automated tools. This ensures that the codebase remains maintainable and adheres to industry best practices.
10. **Recommended Posts:** Enhance user engagement by showcasing recommended posts to your audience. This feature suggests relevant content based on the user's reading history, keeping visitors on your website for longer.
11. **reCAPTCHA Integration:** Security is paramount, especially when it comes to user-generated content. Our blog website integrates reCAPTCHA, a widely trusted CAPTCHA service, to protect your site from spam and abuse while maintaining a user-friendly experience.

12. **Email Subscription:** Engage your readers effectively with our built-in subscription system. Visitors can subscribe to your blog and receive updates whenever you publish new content, helping you build a loyal readership base. Users can also unsubscribe from emails.
6. **Email Subscription:** Engage your readers effectively with our built-in subscription system. Visitors can subscribe to your blog and receive updates whenever you publish new content, helping you build a loyal readership base. Users can also unsubscribe from emails.

---

# Admin panel -- Backend

**Note:** Admin panel code resides in the `admin` directory

## Requirements
# Requirements

- Node.js: v18
- Postgres

## Setup
# Setup

### Database

Expand Down Expand Up @@ -100,7 +77,7 @@ yarn develop

- Application will start on http://localhost:1337/admin

## Customization
# Customization

- All email templates reside in `admin/pubic/emailTemplates`. You can customize them as per your requirement.
- You can update titles, descriptions, and logos of your admin panel from `admin/src/admin/app.js`.
Expand All @@ -109,45 +86,6 @@ yarn develop

---

# Blogs website -- Frontend

## Requirements

- Node.js: v20

## Setup

### Setup environment variables

- Copy `.env.example` to `.env`
- Add your variables and keys in the `.env` file

### Install dependencies

- Install all required dependencies using,

```
yarn install
```

### Start website in dev mode using,

```
yarn dev
```

- Application will start on http://localhost:3000

### To Start the website in production mode,

```
yarn build && yarn start
```

- Application will start on http://localhost:3000

---

# Formatting and Linting

The pre-commit hook will automatically lint and format your code before committing.
Expand All @@ -168,7 +106,6 @@ git config core.hooksPath .githooks
- Deployment stacks:

- Admin panel: Docker, Docker swarm, AWS [ECR](https://aws.amazon.com/ecr/) and [EC2](https://aws.amazon.com/ec2/)
- Website: [AWS Amplify](https://aws.amazon.com/amplify/)

---

Expand All @@ -177,18 +114,17 @@ git config core.hooksPath .githooks
The following are main dependencies used by the project

- [Strapi](https://github.com/strapi/strapi)
- [NextJs](https://github.com/vercel/next.js/)

- [Ckeditor](https://github.com/nshenderov/strapi-plugin-ckeditor)
- [Swiper](https://swiperjs.com/swiper-api)
- [Tagsinput](https://market.strapi.io/plugins/strapi-plugin-tagsinput)

- [Tailwind CSS](https://tailwindcss.com/)
---

- [FontAwesome](https://github.com/FortAwesome/Font-Awesome)
- [highlight.js](https://github.com/highlightjs/highlight.js)
# Credits

---
This repository is owned and maintained by the [Canopas team](https://canopas.com/). If you are interested in building web applications, admin panels or designing products, please let us know. We'd love to hear from you!

<a href="https://canopas.com/contact"><img src="./assets/cta.png" width=300></a>

# Licence

This repository is released under the [MIT](https://github.com/canopas/canopas-blog/blob/master/LICENSE).
This repository is released under the [MIT](https://github.com/canopas/canopas-blog-admin/blob/master/LICENSE).
6 changes: 6 additions & 0 deletions admin/src/api/post/content-types/post/lifecycles.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,14 @@ module.exports = {
},

async afterUpdate(event) {
console.log(
"afterUpdate: ",
event.params.data.publishedAt,
event.result.is_published
);
if (event.params.data.publishedAt) {
if (!event.result.is_published) {
console.log("afterUpdate inside: ", event.result.is_published);
await strapi.db.query("api::post.post").update({
where: { id: event.result.id },
data: {
Expand Down
Binary file added assets/banner.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/cta.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c3d1b6e

Please sign in to comment.