julia-dizhak / uawit-website

website for Non-profit Organization Ukrainian Women in Tech

UAWIT website

The website for the non-profit Organization Ukrainian Women in Tech in Stockholm.

It is built using Next.js + Sanity Studio. The Sanity studio is embedded in the project.

Getting Started

This project bootstrapped with create-next-app.

Note

This starter uses the /pages directory for Next.js routing.

Set up the project locally

Clone the repository, install dependencies npm install and run the development server:

npm run dev (or yarn dev)

Before running a project, please always do git pull.

Clone the repository and install dependencies npm install and run the development server:

npm run lint (or npm run lint:fix)

Run prettier

npm run format

Run eslint

npm run lint
npm run lint:fix

Open http://localhost:3000 with your browser to see the result.

You can edit the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

Note

This starter uses the /pages directory for Next.js routing.

You can collect a build

npm run build

How to open a pull-request

To open a new pull-request, you can do next

clone repo
add origin
open a new branch => git checkout -b
run npm install
add you changes
npm run lint:fix
npm run format
git add .
git commit
git push
open a pr from github

Set up the Sanity Studio

Before you proceed, please be sure that you have an account on Sanity or create it using that link Create a sanity project].

This starter is a statically generated site that uses Next.js for the frontend and Sanity to handle its content. It comes with a native Sanity Studio that offers features like real-time collaboration, instant side-by-side content previews, and intuitive editing.

The Studio connects to Sanity Content Lake, which gives you hosted content APIs with a flexible query language, on-demand image transformations, powerful patching, and more.

Download the environment variables needed to connect Next.js and the Studio to your Sanity project:

npx vercel env pull

This will create a git-ignored .env file with environment variables that will be used for local development.

Alternatively, you can do the next: create a .env file manually and fill it with variables:

SANITY_API_PROJECT_ID="xxxxxxxx" # You can find this in your sanity account
SANITY_STUDIO_PROJECT_ID="xxxxxxxx"
NEXT_PUBLIC_SANITY_PROJECT_ID="xxxxxxxx"
SANITY_API_DATASET="production" # Here is the name of your dataset, for example, production
NEXT_PUBLIC_SANITY_DATASET="production"
SANITY_STUDIO_DATASET="production"

Open http://localhost:3000/studio/ with your browser to see the sanity studio. (Below is a screenshot for the current data we have on production sanity)

Project Overview

Important files and folders

File(s)	Description
sanity.config.ts	Config file for Sanity Studio
/pages/index.tsx	Landing page for /.
/sanity/schemas.ts	Where Sanity Studio gets its content types from
/sanity/env.ts	Configuration for the Sanity project and dataset
/sanity/schemas.ts	Where Sanity Studio gets its content types from
/sanity/lib/client.ts	Sanity client configured based on env.ts
tailwind.config.js	Tailwind config. Only applies to files listed under content

All pages are wrapped in pages/_app.tsx.

Sanity Schema

Below are instructions on How to work with different schemas.

To create and see a new type in the sanity studio, you have to do the next steps:

• Before creating a new type, think it if it is needed or data can be static in the template. Create a new type for schema if data is dynamic.
• Think more abstractly when you create a new schema so we can reuse types better in the future.
• Create a new type in the folder src/schemas/ and import it to schemaTypes in filesrc/schemas/index.ts. For example, if you need to create a Logo type with fields logoImage, caption, link:

const logo = {
  name: 'logo',
  type: 'document',
  title: 'Logo',
  fields: [
    {
      name: 'logoImage',
      type: 'image',
      title: 'Logo Image',
      options: {
        hotspot: true,
      },
    },
    {
      name: 'caption',
      type: 'string',
      title: 'Caption',
      description: 'alt text',
    },
    {
      name: 'href',
      type: 'url',
      title: 'Link',
      description: `Can be a path starting with a ...`,
    },
  ],
}

• Note: It is always good idea to add description for your schema fields

• Update sanity.queries and provide your query

~/lib/sanity.queries/
  logo/
   queries.ts
   types.ts
  posts/
   queries.ts
   types.ts
  ...

• For example if you need to fetch Logo with image, link, alt. The schema will be next

export const logoQuery = groq`
  *[_type == "logo"] {
    "logoImage": logoImage,
    "caption": caption,
    "href": href,
  }[0] // Logo Query: always fetch first
`
export async function getLogoData(client: SanityClient): Promise<LogoType> {
  return await client.fetch(logoQuery)
}

• Note: Always fetch the first array, as you can create many logos.

Deploy on production

Alternatively, you can deploy without a git hosting provider using the Vercel CLI:

npm run build
or
npx vercel --prod

Deploy on Vercel

[][vercel-deploy]

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

TODO

• add pre-commit hook
• setup github actions
• add GraphQL