Skip to content

A fully customizable template for clubs, with blog and events fetched from Notion.

License

Notifications You must be signed in to change notification settings

mitblr-club/template

Repository files navigation

mitblr.club template

This template is a fully responsive website built with Next.JS, TailwindCSS, and shadcn/ui.

Configuration

  1. All core config. values of the template exist at config/site.ts. For convenience, we recommend using the Config Generator available at https://mitblr.club/generators/config, although you can also edit these files directly.

    export const siteConfig = {
      name: '...',
      institution: '...',
      description: '...',
      eventsTableId: '...',
      blogTableId: '...',
      navLinks: [
        {
          title: 'Home',
          href: '/',
        },
        {
          title: 'Blog',
          href: '/blog',
        },
        {
          title: 'Events',
          href: '/events',
        },
      ] satisfies NavItem[],
      mediaLinks: {
        instagram: '...',
        linkedin: '...',
        github: '...',
        twitter: '...',
        institute: '...',
      },
      contactDetails: {
        number: '+91 1234567890',
        email: '[email protected]',
      },
    };

    a. The Notion Database IDs are provided to eventsTableId and blogTableId.

    b. The social media links are provided under mediaLinks: {...}.

    c. These same variables contribute to the metadata of the site.

  2. The homepage view is organized into two sets of files within the config/ directory:

    a. The title, description, and FAQs are stored in the home.ts files. For convenience, we recommend using the Config Generator available at https://mitblr.club/generators/home, although you can also edit these files directly.

    b. The cards displayed on the page are stored in the cards.tsx files. Similarly, you can use the Config Generator at https://mitblr.club/generators/cards for easier configuration, or make direct edits to the files if preferred.

Development

  1. To install packages, run:

    npm install

    You can then make changes as necessary in order to be committed.

  2. Run the development server:

    npm run dev
  3. Lint and format changes using ESLint/Prettier.

    # Linting
    npm run lint:fix
    
    # Formatting
    npm run format:write

Now, you can create a pull request to commit changes to the repository.