/kbss-site

Konbit Bibliyotèk Site Solèy

Primary LanguageJavaScript

Konbit Bilbiyotèk Site Solèy✨

👉 Get Started

Install dependencies

npm install

Run the development server

npm run dev

When the above command completes you'll be able to view your website at http://localhost:3000

🥞 Stack

This project uses the following libraries and services:

📚 Guide

Styles

You can edit Bulma SASS variables in the global stylesheet located at src/styles/global.scss. Variables allow you to control global styles (like colors and fonts), as well as element specific styles (like button padding). Before overriding Bulma elements with custom style check the Bulma docs to see if you can do what need by tweaking a SASS variable.

Custom styles are located in their related component's directory. For example, if any custom style is applied to the Navbar component you'll find it in components/Navbar/styles.scss. We ensure custom styles are scoped to their component by prepending the classname with the component name (such as .Navbar__brand). This ensures styles never affect elements in other components. If styles need to be re-used in multiple components consider creating a new component that encapsulates that style and structure and using that component in multiple places.

Routing

This project uses the built-in Next.js router and its convenient useRouter hook. Learn more in the Next.js docs. 

import Link from 'next/link';
import { useRouter } from 'next/router';

function MyComponent(){
  // Get the router object
  const router = useRouter();

  // Get value from query string (?postId=123) or route param (/:postId)
  console.log(router.query.postId);

  // Get current pathname
  console.log(router.pathname)

  // Navigate with the <Link> component or with router.push()
  return (
    <div>
      <Link href="/about"><a>About</a></Link>
      <button onClick={(e) => router.push('/about')}>About</button>
    </div>
  );
}

Authentication

This project wasn't setup with a particular auth service in mind, but includes a useAuth hook (located in util/auth.js) that allows you to prototype auth flows. Before moving to production you'll want to edit that file to make calls to an actual authentication provider. 

import { useAuth } from './../util/auth.js';

function MyComponent(){
  // Get the auth object in any component
  const auth = useAuth();

  // Depending on auth state show signin or signout button
  // auth.user will either be an object, null when loading, or false if signed out
  return (
    <div>
      {auth.user ? (
        <button onClick={(e) => auth.signout()}>Signout</button>
      ) : (
        <button onClick={(e) => auth.signin('hello@divjoy.com', 'yolo')}>Signin</button>
      )}
    </div>
  );
}

Deployment

Install the ZEIT Now CLI 

npm install -g now

Then run this command in your project directory to deploy to ZEIT Now

now

See the ZEIT docs for more details.

Other

The Next.js documentation covers many other topics. This project was initially created using Divjoy, a React codebase generator. Feel free to ask questions in the Divjoy forum and we'll do our best to help you out.