Giter VIP home page Giter VIP logo

blog-reflexion's Introduction

What is this?

This is an extremely simple blogging platform I made for the argentinian magazine Reflexión en Música. It's A Next.Js blog with a password-protected dashboard where a blog owner can either upload an .md file, or write in a built in editor to create a new post. When a post is added or removed from the dashboard, an on-demand revalidation is triggered. The authentication is handled by next-auth. The front end has a dark theme I really like, it's done with the useTheme hook. The .md to html parse is made with remark, footnotes with remark-gfm and image captions with remark-captions. To try out a basic version of the dashboard, you can visit a live demo here. Thanks for reading!!!

Usage

  1. Clone repo.

  2. npm install packages.

  3. Define .env variables:

    • Create an .env.local file, and replace "value" with your own values (mind "value_1" and "value_2" must match):
      MONGODB_URI=value
      MONGODB_DB=value
      MONGODB_COLLECTION=value

      NEXT_PUBLIC_SAVE_TOKEN=value_1
      SAVE_TOKEN=value_1

      UPLOAD_PASSWORD=value_2
      LOGIN_PASSWORD=value_2
      NEXTAUTH_SECRET=value_2
      REVALIDATE_TOKEN=value
      USER_TOKEN=value

      NEXT_PUBLIC_BASE_URL=http://localhost:3000/api
      NEXTAUTH_URL=http://localhost:3000
      BASE_URL=http://localhost:3000
      NEXT_PUBLIC_URL=http://localhost:3000

  4. Open /lib/data-template.js, add your own values and change file name to data.js.

  5. npm run dev to run locally in dev mode, or npm run build and npm start to run a production build locally.

blog-reflexion's People

Contributors

gmzi avatar

Stargazers

Roman avatar

Watchers

 avatar  avatar

blog-reflexion's Issues

Add router

To avoid editing unexisting posts, and to guide qrong urls to index page

Social media plugins

  • Add plugins to make comments on posts. On login (facebook? Twitter? Google?), a user can post a comment on a post's page.

Image field in CMS

  • Add an "Image" field on post creation and edition. The image object has 1 main image and multiple embeded images. Make a form where user can:
  • Upload an image -> get url for that image.
  • Then a user can paste the url of that image on the .md editor (using the syntax already provided) and move it around.

Local storage saving in Edit-Post page

  • Local Storage is currently working on Post Creation page, but not in Post Edition. Local Storage needs to be added on Edit Post page for the cases when an author is working and there are issues with their internet connection, their browser, etc. Let's save authors time and tears, please!!!!
  • Plan for this: abstrac the localStorage logic in a hook or function, and consume it from "Create post" and from "Edit post"

Add preview after editing a post

  • After edition of the post, it would be nice to consume the Preview component to see the changes made, and publish/keep editing after that

Test images folder

Create a test folder on image host. Create an .env variable with /images/test, and apply that variable to imageUploader, images/test folder for dev environment, images/posts for prod environment.

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.