DEV Community: Dylan Muraco

Guide to Adding Info Text in Sanity Studio

Dylan Muraco — Fri, 04 Oct 2024 02:15:52 +0000

At WebTechCD, we allow clients to edit their site content directly through Sanity Studio. To make the editing experience more intuitive, we wanted to ensure that each document clearly explained its purpose and the specific content users could modify. For instance, we have a singleton document titled Global Settings, where clients can update the navbar and footer content.

Rather than explaining the document’s purpose every time a client wants to make changes, we decided to add informative text directly within the document. This self-explanatory text helps guide clients through the content they can edit, minimizing confusion.

In this guide, I’ll show you how to add informative text to any document in Sanity Studio using a simple read-only field and a custom component.

Step 1: Create a Custom Component

Start by creating a new component that will display the informational text. In your Sanity project, create a new file for this component:

<sanity_project>/components/DocumentInfo.tsx

export const InfoText = () => (
  <div style={{ padding: '20px', background: '#f0f0f0', borderRadius: '8px' }}>
    <p>
      <strong>Global Site Settings:</strong> Use this document to configure your site's global settings, such as the navbar links and logo. Changes made here will apply across your entire site.
    </p>
  </div>
);

This component provides the user with a simple explanation of what the Global Settings document controls.

Step 2: Update Your Schema

Next, we’ll import the new InfoText component into your schema and create a read-only field to display it. In this case, we’ll use the Global Settings schema as an example:

<sanity_project>/schemaTypes/global_settings.ts

import { defineField, defineType } from "sanity";
import { InfoText } from "../components/DocumentInfo"; // Import the new component

const GlobalSettings = defineType({
  name: "globalSettings",
  title: "Global Settings",
  type: "document",
  fields: [
    // Define the read-only field for the informative text
    defineField({
      name: "info",
      type: "string",
      components: {
        field: InfoText
      },
      readOnly: true
    }),
    // Other schema fields...
  ]
});

export default GlobalSettings;

Here, we define a new field for the Global Settings document that uses our InfoText component. Setting the field as readOnly: true ensures that clients can’t edit this information but can easily see it when they open the document.

Final Result

Once you’ve added the component and updated the schema, here’s what the Global Site Settings document will look like in Sanity Studio:

This approach helps reduce client confusion by clearly explaining the purpose of each document, and it saves time by reducing the need for manual explanations.

Thanks for reading!!

How to Create a Local RAG Agent with Ollama and LangChain

Dylan Muraco — Tue, 13 Aug 2024 17:53:11 +0000

What is a RAG?

RAG stands for Retrieval-Augmented Generation, a powerful technique designed to enhance the performance of large language models (LLMs) by providing them with specific, relevant context in the form of documents. Unlike traditional LLMs that generate responses purely based on their pre-trained knowledge, RAG allows you to align the model’s output more closely with your desired outcomes by retrieving and utilizing real-time data or domain-specific information.

RAG vs Fine-Tuning

While both RAG and fine-tuning aim to improve the performance of LLMs, RAG is often a more efficient and resource-friendly method. Fine-tuning involves retraining a model on a specialized dataset, which requires significant computational resources, time, and expertise. RAG, on the other hand, dynamically retrieves relevant information and incorporates it into the generation process, allowing for more flexible and cost-effective adaptation to new tasks without extensive retraining.

Building a RAG Agent

Installing the Requirements

Install Ollama

Ollama provides the backend infrastructure needed to run LLaMA locally. To get started, head to Ollama's website and download the application. Follow the instructions to set it up on your local machine.

Install LangChain Requirements

LangChain is a Python framework designed to work with various LLMs and vector databases, making it ideal for building RAG agents. Install LangChain and its dependencies by running the following command:

pip install langchain

Coding the RAG Agent

Create an API Function

First, you’ll need a function to interact with your local LLaMA instance. Here’s how you can set it up:

from requests import post as rpost

def call_llama(prompt):
    headers = {"Content-Type": "application/json"}
    payload = {
        "model": "llama3.1",
        "prompt": prompt,
        "stream": False,
    }

    response = rpost(
        "http://localhost:11434/api/generate",
        headers=headers,
        json=payload
    )
    return response.json()["response"]

Create a LangChain LLM

Next, integrate this function into a custom LLM class within LangChain:

from langchain_core.language_models.llms import LLM

class LLaMa(LLM):
    def _call(self, prompt, **kwargs):
        return call_llama(prompt)

    @property
    def _llm_type(self):
        return "llama-3.1-8b"

Integrating the RAG Agent

Setting Up the Retriever

The retriever is responsible for fetching relevant documents based on the user’s query. Here’s how to set it up using FAISS for vector storage and HuggingFace’s pre-trained embeddings:

from langchain.vectorstores import FAISS
from langchain_huggingface import HuggingFaceEmbeddings

documents = [
    {"content": "What is your return policy? ..."},
    {"content": "How long does shipping take? ..."},
    # Add more documents as needed
]

texts = [doc["content"] for doc in documents]

retriever = FAISS.from_texts(
    texts,
    HuggingFaceEmbeddings(model_name="all-MiniLM-L6-v2")
).as_retriever(k=5)

Create the Prompt Template

Define the prompt template that the RAG agent will use to generate responses based on the retrieved documents:

from langchain.prompts import ChatPromptTemplate, MessagesPlaceholder

faq_template = """
You are a chat agent for my E-Commerce Company. As a chat agent, it is your duty to help the human with their inquiry and make them a happy customer.

Help them, using the following context:
<context>
{context}
</context>
"""

faq_prompt = ChatPromptTemplate.from_messages([
    ("system", faq_template),
    MessagesPlaceholder("messages")
])

Create Document and Retriever Chains

Combine the document retrieval and LLaMA generation into a cohesive chain:

from langchain.chains.combine_documents import create_stuff_documents_chain

document_chain = create_stuff_documents_chain(LLaMa(), faq_prompt)

def parse_retriever_input(params):
    return params["messages"][-1].content

retrieval_chain = RunnablePassthrough.assign(
    context=parse_retriever_input | retriever
).assign(answer=document_chain)

Start Your Ollama Server

Before running your RAG agent, make sure the Ollama server is up and running. Start the server with the following command:

ollama serve

Prompt Your RAG Agent

Now, you can test your RAG agent by sending a query:

from langchain.schema import HumanMessage

response = retrieval_chain.invoke({
    "messages": [
        HumanMessage("I received a damaged item. I want my money back.")
    ]
})

print(response)

Response:
"I'm so sorry to hear that you received a damaged item. According to our policy, if you receive a damaged item, please contact our customer service team immediately with photos of the damage. We will arrange a replacement or refund for you. Would you like me to assist you in getting a refund? I'll need some information from you, such as your order number and details about the damaged item. Can you please provide that so I can help process your request?"

By following these steps, you can create a fully functional local RAG agent capable of enhancing your LLM's performance with real-time context. This setup can be adapted to various domains and tasks, making it a versatile solution for any application where context-aware generation is crucial.

Authenticate in React with Firebase Auth

Dylan Muraco — Tue, 11 Jan 2022 04:57:57 +0000

Authentication is something almost every modern web app needs. I've user Auth0 and Next Auth but Firebase seems to provide the easiest way to get authentication up and running.

Registering a Firebase App

Now we need to create a new project in firebase. Navigate to Firebase Console and click Add project

After creating this project and you are in the project console click on the Web icon to create a new web app. Follow the directions and copy the config which will look something like this.

After creating this project navigate to the authentication tab and click Get Started. Then click Google

Getting Started

npm install firebase

create a new folders in /src named /lib/auth. Inside this auth folder create a file index.js

first lets import what we need and initialize our constants

import {getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged} from 'firebase/auth'
import {initializeApp} from 'firebase/app'
import { createContext, useContext, useEffect, useState } from 'react'


const app = initializeApp({
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    projectId: process.env.REACT_APP_projectId,
    storageBucket: process.env.REACT_APP_storageBucket,
    messagingSenderId: process.env.REACT_APP_messagingSenderId,
    appId: process.env.REACT_APP_appId
})


const auth = getAuth()

const googleProvider = new GoogleAuthProvider()

const UserContext = createContext()

We need to create a context provider so that we can access the user object in all components

`/src/lib/auth/index.js`

export const AuthProvider = ({children}) => {

    const [user, setUser] = useState()

    useEffect(() => {
        onAuthStateChanged(auth, (user) => {
            if(user) {
                setUser(user)
            } else {
                setUser(undefined)
            }
        })
    }, [])

    return (
        <UserContext.Provider value={user}>
            {children}
        </UserContext.Provider>
    )
}

export const googleSignIn = () => {
    signInWithPopup(auth, googleProvider)
}

onAuthStateChanged creates an observer for changes to the user's sign-in state.

Now lets wrap out base level components with this AuthProvider

`index.js`

ReactDOM.render(
  <React.StrictMode>
    <AuthProvider>

      <App />

    </AuthProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Finally lets create a signInGoogle, a signOut and a useAuth function

export const useAuth = () => {
    return useContext(UserContext)
}

export const googleSignIn = () => {
    signInWithPopup(auth, googleProvider)
        .then(value => {})
        .catch(reason => {console.error(reason)})
}

export const signOut = () => {
    auth.signOut()
        .then(value => {})
        .catch(reason => {console.error(reason)})
}

now in our App.js we can use these functions

import {googleSignIn, signOut, useAuth} from './lib/auth'

function App() {

  const user = useAuth()

  return (
    <div>
      {JSON.stringify(user)}
      <button onClick={(e) => {
        e.preventDefault()
        googleSignIn()
      }}>Sign in with google</button>
      <button onClick={(e) => {
        e.preventDefault()
        signOut()
      }}>Sign Out</button>
    </div>
  );
}

export default App;

Full code here.

When to Use Server-Side rendering vs Static Generation in Next.js

Dylan Muraco — Thu, 30 Dec 2021 19:01:11 +0000

Pre-rendering your pages has multiple benefits such as better performance and better SEO. But choosing whether to statically generate your pages or render them on the server side can be confusing.

Let's first take a look at Server-Side rendering

getServerSideProps

The main difference between getServerSideProps and getStaticProps is when they are ran. getServerSideProps is ran when every new request is made to the page.

export async function getServerSideProps(context) {
    const {userId} = context.params
    const user = await getUser(userId)

    return {
        props: {
           user
        }
    }

}

export default function User({user}) {
    return (
        <div>
            <h1>{user.name}</h1>
        </div>
    )
}

In this example we are getting the userId from a dynamic route, getting the information about the user, then using that data to build the user page.

Note that we have access to the request through params

now lets take a look at getStaticProps

getStaticProps

We saw that getServerSideProps gets ran every time a new request is made so what about getStaticProps. getStaticProps is ran at build time, meaning that whenever you run npm run build this is when your static pages are built.

export async function getStaticProps() {
    const blogPosts = await getBlogPosts()

    return {
        props: {
            blogPosts
        }
    }
}

export default function Home({blogPosts}) {
    return (
        <div>
            {blogPosts.map(post => (
                <h1>{post.name}</h1>
            ))}
        </div>
    )
}

this function is getting a list of blog posts and rendering them on a page. Because we know what we want before hand we can statically render the page whereas in our server side rendering example we don't know before the request is made what the user wants.

So when to user getServerSideProps?

Good for when you don't know what the user wants before they make a request
Still want good SEO

When to use getStaticProps?

When we know what the user wants at build time
Really fast performance and SEO

This was just a quick dive into static generation vs server-side generation. If you want to learn more please let me know.

As always thanks for reading.

How I host my Next.js side projects for free

Dylan Muraco — Wed, 29 Dec 2021 16:54:51 +0000

Hosting side projects can be expensive but why pay all that money if you don't have to.

Hosting

(Vercel)[https://vercel.com] offers a lot of benefits like:

Free tier
Easy and continuous deployments
Automatic Scaling
Super easy integration

Database

Most projects need a database and they can get very expensive.

I host my postgresql databases on heroku using their hobby tier.

There are a few downsides though like:

Maximum of 20 connections allowed
Maximum of 10,000 rows

For tiny projects it works well where I don't have a lot of users.

I hope this article was helpful thanks for reading.

Responsive Global Navbar in Next.js with tailwindcss

Dylan Muraco — Mon, 27 Dec 2021 19:08:40 +0000

A navbar is one of the most important parts of a website. Users don't know where to go without one. Lets dive into how to make a responsive navbar in Next.js with tailwindcss. I'll also show you how to make the navbar appear across all pages.

If you don't want to read the whole thing and just want the code go to https://github.com/dmuraco3/navbar

Setting up our environment

creating our project

npx create-next-app@latest navbar
cd navbar

installing Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

configuring template paths

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS
globals.css

...
@tailwind base;
@tailwind components;
@tailwind utilities;
...

now our environment is all set up and we're ready to go

Building our navbar

create a components folder in your root directory to keep components in.

in this folder make a new file called navbar.js

We're going to create three functions and import one

`navbar.js`

import {useState} from 'react'

function NavLink({to, children}) {

}
function MobileNav({open, setOpen}) {

}

export default function Navbar() {

}

Let's build the mobile nav first

`navbar.js`

...
function MobileNav({open, setOpen}) {
    return (
        <div className={`absolute top-0 left-0 h-screen w-screen bg-white transform ${open ? "-translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out filter drop-shadow-md `}>
            <div className="flex items-center justify-center filter drop-shadow-md bg-white h-20"> {/*logo container*/}
                <a className="text-xl font-semibold" href="/">LOGO</a>
            </div>
            <div className="flex flex-col ml-4">
                <a className="text-xl font-medium my-4" href="/about" onClick={() => setTimeout(() => {setOpen(!open)}, 100)}>
                    About
                </a>
                <a className="text-xl font-normal my-4" href="/contact" onClick={() => setTimeout(() => {setOpen(!open)}, 100)}>
                    Contact
                </a>
            </div>  
        </div>
    )
}
...

now we can build our navbar

`navbar.js`

export default function Navbar() {
const [open, setOpen] = useState(false)
    return (
        <nav className="flex filter drop-shadow-md bg-white px-4 py-4 h-20 items-center">
            <MobileNav open={open} setOpen={setOpen}/>
            <div className="w-3/12 flex items-center">
                <a className="text-2xl font-semibold" href="/">LOGO</a>
            </div>
            <div className="w-9/12 flex justify-end items-center">

                <div className="z-50 flex relative w-8 h-8 flex-col justify-between items-center md:hidden" onClick={() => {
                    setOpen(!open)
                }}>
                    {/* hamburger button */}
                    <span className={`h-1 w-full bg-black rounded-lg transform transition duration-300 ease-in-out ${open ? "rotate-45 translate-y-3.5" : ""}`} />
                    <span className={`h-1 w-full bg-black rounded-lg transition-all duration-300 ease-in-out ${open ? "w-0" : "w-full"}`} />
                    <span className={`h-1 w-full bg-black rounded-lg transform transition duration-300 ease-in-out ${open ? "-rotate-45 -translate-y-3.5" : ""}`} />
                </div>

                <div className="hidden md:flex">
                    <NavLink to="/contact">
                        CONTACT
                    </NavLink>
                    <NavLink to="/about">
                        ABOUT
                    </NavLink>
                </div>
            </div>
        </nav>
    )
}

Now our navbar depends on NavLink which is a pretty simple component so lets whip that up real quick

`navbar.js`

function NavLink({to, children}) {
    return <a href={to} className={`mx-4`}>
        {children}
    </a>
}

Now put that all together and we get

`navbar.js`

import { useState } from 'react'

function NavLink({to, children}) {
    return <a href={to} className={`mx-4`}>
        {children}
    </a>
}

function MobileNav({open, setOpen}) {
    return (
        <div className={`absolute top-0 left-0 h-screen w-screen bg-white transform ${open ? "-translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out filter drop-shadow-md `}>
            <div className="flex items-center justify-center filter drop-shadow-md bg-white h-20"> {/*logo container*/}
                <a className="text-xl font-semibold" href="/">LOGO</a>
            </div>
            <div className="flex flex-col ml-4">
                <a className="text-xl font-medium my-4" href="/about" onClick={() => setTimeout(() => {setOpen(!open)}, 100)}>
                    About
                </a>
                <a className="text-xl font-normal my-4" href="/contact" onClick={() => setTimeout(() => {setOpen(!open)}, 100)}>
                    Contact
                </a>
            </div>  
        </div>
    )
}

export default function Navbar() {

    const [open, setOpen] = useState(false)
    return (
        <nav className="flex filter drop-shadow-md bg-white px-4 py-4 h-20 items-center">
            <MobileNav open={open} setOpen={setOpen}/>
            <div className="w-3/12 flex items-center">
                <a className="text-2xl font-semibold" href="/">LOGO</a>
            </div>
            <div className="w-9/12 flex justify-end items-center">

                <div className="z-50 flex relative w-8 h-8 flex-col justify-between items-center md:hidden" onClick={() => {
                    setOpen(!open)
                }}>
                    {/* hamburger button */}
                    <span className={`h-1 w-full bg-black rounded-lg transform transition duration-300 ease-in-out ${open ? "rotate-45 translate-y-3.5" : ""}`} />
                    <span className={`h-1 w-full bg-black rounded-lg transition-all duration-300 ease-in-out ${open ? "w-0" : "w-full"}`} />
                    <span className={`h-1 w-full bg-black rounded-lg transform transition duration-300 ease-in-out ${open ? "-rotate-45 -translate-y-3.5" : ""}`} />
                </div>

                <div className="hidden md:flex">
                    <NavLink to="/contact">
                        CONTACT
                    </NavLink>
                    <NavLink to="/about">
                        ABOUT
                    </NavLink>
                </div>
            </div>
        </nav>
    )
}

Making navbar appear on all pages

Now we have our navbar made but we can't see it. We could go into each page function and add our components but that gets repetitive and there's a better way to do it.

In our root level file _app.js we have to import the Navbar component and render it in the root level component

`_app.js`

import Navbar from '../components/navbar'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <>
    <Navbar/>

    <Component {...pageProps} />
  </>
}

export default MyApp

Now you have a working responsive navbar.

Thanks for reading!

Server Side Rendering, Prisma + Next.js + TypeScript

Dylan Muraco — Sat, 25 Dec 2021 07:24:10 +0000

I've been working on a new project recently (CodeComponents if you wanna check it out) and struggled a little bit figuring out server side rendering because typescript wants to know what is being passed to the pages so I wanted to share how to do it.

so lets say we have a helper function that just returns all posts from the database

const prisma = new PrismaClient()
async function getPosts() {
    const posts = await prisma.post.findMany()
    return posts
}

Static Site Generation


export const getStaticProps: GetStaticProps<{
    posts: Prisma.PromiseReturnType<typeof getPosts>
}> = async () => {
    const posts = await getPosts()
    return {
        props: {
            posts
        }
    }
}

const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = (
  props: InferGetStaticPropsType<typeof getStaticProps>
) => {
    return (
        <div>
            ...
            {/* do whatever with posts here */}
        </div>
    )
}

export default Home;

Server Side Rendering

Server Side rendering is pretty similar we just have to change the type of props passed to page function

export const getServerSideProps: GetServerSideProps<{
    posts: Prisma.PromiseReturnType<typeof getPosts>
}> = async () => {
    const posts = await getPosts()
    return {
        props: {
            posts
        }
    }
}

const Home: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = (
  props: InferGetServerSidePropsType<typeof getServerSideProps>
) => {
    return (
        <div>
            ...
            {/* do whatever with posts here */}
        </div>
    )
}

export default Home;

Hope this was helpful