Git Product home page Git Product logo

blog-frontend's Introduction

blog-frontend

Blog frontend built with ReactJs, NextJs and Sass.

Backend

Quality Gate Status Maintainability Rating Lines of Code

Running the project in development

It runs on port 6000 by default, some browser block that port, you can change it in package.json

npm run dev

Then you can visit the following urls:

  • localhost:6000/blog to visit the blog index (you can change the base path in next.config.js)
  • localhost:6000/blog/editor to access the editor (you need to be logged in)
  • localhost:6000/blog/editor/login to log in (you need to create an account using the backend)

Running the project in production

It runs on port 6000 by default, some browser block that port, you can change it in package.json

npm run build
npm run start

Generate the graphql schemas

When you change some graphql schemas in the backend, you need to generate up-to-date schemas for the frontend using:

npm run gen

Environment variables

Private

It is used by the Incremental Static Regeneration endpoint for on-demand revalidation. (What is ISR?)

REVALIDATE_TOKEN=some_random_string

Your graphql endpoint url used by the NextJs server (to build pages) Note that this can be equal to the NEXT_PUBLIC_GRAPHQL_ENDPOINT

GRAPHQL_ENDPOINT="http://localhost:7000/graphql

Public

Your graphql endpoint url used by the client

NEXT_PUBLIC_GRAPHQL_ENDPOINT="https://example.com/graphql"

Customizing colors

  1. Add a scss file in src/styles/colorscheme/your_colors.scss directory.
  2. Change src/styles/colorscheme.scss content to: @forward 'colorscheme/your_colors';
  • $color-a // Primary
  • $color-c // Only used in the editor you can use the same color as $color-d
  • $color-d // Accent
  • $color-error // Error
  • $color-warning // Not used yet
  • $color-success // Success

Previews

Index

index

An article

article

Editor index

editor index

Editor

editor

Login (2FA using TOTP)

login

blog-frontend's People

Contributors

mderam avatar

Stargazers

 avatar  avatar

Watchers

 avatar

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.