diff --git a/README.md b/README.md index 3c9980da0..4c45425f8 100644 --- a/README.md +++ b/README.md @@ -17,13 +17,13 @@ In addition to the primary Sanity Studio (accessible at http://localhost:3000/st ### Features of Shared Studio - • Blog Posts: In the Shared Studio, you can create and manage Blog Posts. This content type allows for creating articles that can be displayed across different parts of the application. - • Customer Cases: Customer Cases is another content type available in the Shared Studio, enabling you to showcase client stories or testimonials. +- Blog Posts: In the Shared Studio, you can create and manage Blog Posts. This content type allows for creating articles that can be displayed across different parts of the application. +- Customer Cases: Customer Cases is another content type available in the Shared Studio, enabling you to showcase client stories or testimonials. Accessing Shared Studio - • Studio URL: The Shared Studio is accessible at http://localhost:3000/shared. - • Frontend Access: Content from the Shared Studio can be accessed on the frontend through API calls using sharedClient or loadSharedQuery. +- Studio URL: The Shared Studio is accessible at http://localhost:3000/shared. +- Frontend Access: Content from the Shared Studio can be accessed on the frontend through API calls using sharedClient or loadSharedQuery. ## Getting Started @@ -46,12 +46,20 @@ To get started with Sankitty, follow these steps: Ensure that the following environment variables are configured in your .env.local file: ``` + # ENV KEYS FOR UNIQUE STUDIO NEXT_PUBLIC_SANITY_PROJECT_ID= NEXT_PUBLIC_SANITY_DATASET= NEXT_PUBLIC_SANITY_API_VERSION= SANITY_API_TOKEN_DEV= SANITY_API_TOKEN_PROD= + # ENV KEYS FOR SHARED STUDIO + + NEXT_PUBLIC_SANITY_SHARED_PROJECT_ID= + NEXT_PUBLIC_SANITY_SHARED_DATASET= + NEXT_PUBLIC_SANITY_SHARED_API_VERSION= + SANITY_SHARED_API_TOKEN_DEV= + SANITY_SHARED_API_TOKEN_PROD= ``` 4. **Configure Sanity:** @@ -61,6 +69,7 @@ To get started with Sankitty, follow these steps: ``` npm run dev + ``` 6. **View the Application**: @@ -105,9 +114,9 @@ The `Site Settings` menu allows you to configure global settings for your site, - **Setting the Landing Page**: The `Navigation Manager` allows editors to set the landing page for the site, which is crucial for determining the primary page visitors see upon arrival. - **Adding Menu Items**: Within the `Navigation Manager`, editors can add items to various pre-defined menus: - - **Main Menu**: Add links and a single Call to Action (if needed) to the main menu, which appears at the top of the website. This helps visitors navigate to important sections. - - **Footer Menu**: Add items to the footer menu, which consists of different sections. Each section can contain either social media links, custom links, text, or images (e.g., logos). - - **Sidebar Menu**: Add links to the sidebar menu, which will appear on smaller screens to aid mobile navigation. +- **Main Menu**: Add links and a single Call to Action (if needed) to the main menu, which appears at the top of the website. This helps visitors navigate to important sections. +- **Footer Menu**: Add items to the footer menu, which consists of different sections. Each section can contain either social media links, custom links, text, or images (e.g., logos). +- **Sidebar Menu**: Add links to the sidebar menu, which will appear on smaller screens to aid mobile navigation. #### Pages @@ -121,10 +130,11 @@ To maintain consistency and efficiency, follow these steps when working on the p 1. Branching Strategy: Follow your team’s branching convention, such as feature/ or fix/ branches, to keep the git history clean and organized. 2. Adding New UI with Content: - - Define the Sanity schema for new content types. - - Implement the corresponding interface and payload structure in src/lib/payloads. - - Fetch the necessary data and create the UI component. - - Document and test the UI component in Storybook, using mock data for isolated development. + +- Define the Sanity schema for new content types. +- Implement the corresponding interface and payload structure in src/lib/payloads. +- Fetch the necessary data and create the UI component. +- Document and test the UI component in Storybook, using mock data for isolated development. ### Using `fetchWithToken` for Custom Components in Sanity @@ -141,29 +151,29 @@ import React, { useEffect, useState } from "react"; import { fetchWithToken } from "studio/lib/fetchWithToken"; const MyCustomComponent: React.FC = () => { - const [data, setData] = useState(null); - const [error, setError] = useState(null); - - useEffect(() => { - const fetchData = async () => { - try { - const query = '*[_type == "myType"]'; // Replace with your GROQ query - const result = await fetchWithToken(query); - setData(result); - } catch (err) { - console.error("Error fetching data:", err); - setError(err.message); - } - }; - - fetchData(); - }, []); - - if (error) { - return
Error: {error}
; - } - - return
{JSON.stringify(data)}
; // Render your component's UI +const [data, setData] = useState(null); +const [error, setError] = useState(null); + +useEffect(() => { + const fetchData = async () => { + try { + const query = '*[_type == "myType"]'; // Replace with your GROQ query + const result = await fetchWithToken(query); + setData(result); + } catch (err) { + console.error("Error fetching data:", err); + setError(err.message); + } + }; + + fetchData(); +}, []); + +if (error) { + return
Error: {error}
; +} + +return
{JSON.stringify(data)}
; // Render your component's UI }; export default MyCustomComponent;