Category: How to

A guide to Sanity headless CMS

How to use Sanity CMS for creating a headless backend and customize it using React


Sanity CMS help developers make headless content management system with custom types using JavaScript. The API can be utilized for web, Mobile and desk application.

Hope the following guides will help you.

Prismic slices and Dynamic tag in Solidjs

Dynamic tag in Solidjs and Prismic Slice use case.


According to the official docs, Dynamic component lets you insert an arbitrary Component.

It allows to use repeatable component and loop through it. It can be compared to Switch statement which check some criteria and insert component.

<Switch fallback={<BlueThing />}>
  <Match when={selected() === 'red'}><RedThing /></Match>
  <Match when={selected() === 'green'}><GreenThing /></Match>
</Switch>

Here is Dynamic component part

 <Dynamic component={options[selected()]} />

How simple it is. 😆

Prismic CMS use case

I fiund it is useful when dealing with Prismic Slices. First, I need to create a component registry and loop through slices.

The registry will look like following 

const Slices = {
  heading_slice: Heading1,
  code_slice: Code,
  paragraph_slice: Paragraph
};


//Heading1.jsx
export default function Heading1(props) {

    return (
        <div>
            <h1 class="text-xl text-yellow-600 py-3">{props?.content.header_rich_text_field[0].text || "Heading 1"}</h1>
        </div>
    )
}

Here Heading1, Code etc are declared in JavaScript modules. In our content section we have Prismic slices. Let’s loop through it.

<For each={props.post?.body}>
              {(post) => (
                <Dynamic
                  component={Slices[post.type]}
                  content={post.primary}
                ></Dynamic>
              )}
            </For>

Also note that we can pass props to each component, which is identical. Otherwise, you need a different logic.

Checking for undefined in Solidjs

How to deal with undefined in Solidjs


First time I am very unsure about how to dealing with undefined object in Solidjs. Hopefully there is a better way to do this.

You may meet the undefined object when accessing a set of objects, like posts and pass to other components.

Undefined can be tackled using ?. as follows.

  <Post post={post()?.post_type}/>

Here solid will check the post_type object which can be undefined for some point of time.

Similarly, we can also implement the login in template

   { props.post?.title[0].text  || "Post title"}

Keystroke handling in Svelte

How to handle keystroke in Svelte


Implementing keystroke in Svelte can be achieved using the <svelete:window></svelte.window> component. Suppose I want to do some action on Enter key press (input fields), it can be done as follows.

Add the <svelte:window> in your template section of a component/route. 

 <svelte:window on:keydown={onEnter}></svelte:window>

OnEnter is the event handler which can be defined in the script section, which accepts the event as argument.

const onEnter =(event)=>{ 
     if(event.key === "Enter"){        
        console.log("Enter key pressed");
        goto('/bakes')
     }
    }

Input and keystroke

The above metho will fired whenever you press enter key, no matter which input field you were in. There can be multiple input fields in a page. To work with specific field, we have to use the Input fields keydown event.

<input type="text" on:keydown={onEnter} bind:value={value}  >

Windows 11: Quickly open folder in command prompt (cmd)

How to quickly open a folder in terminal from the explorer in Windows 11


Sometimes we need to open a folder on terminal, and we used to do is jump to terminal and cd into it. 

c:/> cd my-project

But in Windows 11 there is special command which replaces the Windows 10’s open with terminal.

Navigate the folder in the explorer 📂 and on the top you can see the address bar. Click and type cmd and press enter, and it will open the terminal.

cool, 😎

Integrate Hygraph with Svelte, React, Vue

Hygraph headless CMS integration samples


Graph CMS or Hygraph CMS is a headless CMS for building backend for web and mobile apps. It is easy to use.

The Graphql which is modern way to fetch selected part of a database, enable developers to easily access the data in Hygraph.

Integrate Hygraph with Svelte

The first step is to enable public API from the Hygraph settings and then we can use libraries like urql, apollo, graphql-request for querying data.

In the Svelte Kit route we can place a load module on the top of the component for fetching data as follows .

//route/index.svelte

<script context="module">
    import {GraphQLClient} from "graphql-request";
    export async function load({params}) {
        const {slug} = params;
        const graphcms = new GraphQLClient(
            'https://api-ap-south-1.hygraph.com/v2/cl5uo7orr3kf801t8d4ld7hoe/master',
            {
                headers: {},
            }
        )
        const data = await graphcms.request(
            `query  {
        blogpost(where: {slug: "${slug}"})
        {
            title
            catgory
            content{
            html
            }
            publishedAt
            summary
            image {
            fileName
            url
        }
        }
    }`
        );
 return{
     props: {
         post: data.blogpost,
     },
 }
    }

</script>

<script>
    export let post;

</script>

Similarly we can apply the logic on Angular Service, Vuejs, React, and Solidjs.

I have two projects on Github for you 🎦

Hygraph : Graphql headless CMS

A Graphql only headless CMS for easy content management


Graph CMS or Hygraph CMS is a headless CMS for building backend for web and mobile apps. It is easy to use.

The Graphql which is modern way to fetch selected part of a database, enable developers to easily access the data in Hygraph.

Hygraph free account offer

  • 3 seats
  • 1 environment
  • 2 content stages
  • 2 roles
  • 2 locales
  • 1,000 content entries
  • 25 content models
  • 100 GB asset traffic (Hard limit)
  • 1M API calls (Hard limit)
  • No version retention
  • No audit logs retention

Schema and the content

Using schema we can create as many content type and create posts. A schema can be a product type consisting of fields required to store products information.

Behind the the scene Hygraph will handle the database for us. 😎

More Hygraph CMS guides on the way

How to build a blog with Solidjs

How to create blog application using mocked graphql API and Solidjs front end framework


Solidjs is rocking 🚀 and much easier than Reactjs for me. Let’s build a complete blog with Solidjs.

I don’t want to copy paste the whole code, snippets into this post. We go through the steps and requirements. The live project can be found on CodesandBox.

  1. Backend
    1. Mockend API
  2. Styling with TailwindCSS
  3. Fetching the API
  4. Escape
  5. Source code and other references
Continue reading “How to build a blog with Solidjs”

How to enable custom layout for routes in Nuxt3

How to enable custom Layout for a pages in Nuxt3


Layouts in Nuxt 3 and Nuxt 2 have some minor changes. In Nuxt 2 we have used <Nuxt/> component to render pages / routes (if you using ~pages ) .

Nuxt 3 replaced the Nuxt component with <Slot/>.

How to create a Layout ?

To create and apply custom layout, we need to create Layouts folder and create our layouts. 

//custom.vue
<template>
<div data-theme="winter" class="">   
    <header>
     <Header/>
    </header>
    <main class="h-screen w-full grid  overflow-auto ">
      <slot/>
    </main>
    <footer>
    <Footer/>
    </footer>
  </div>
</template>

Applying Layout

We can apply layout to pages using the the defineMeta section in the page component.

//pages/index.vue
<template>
  <div class="flex justify-center">
    <div class="p-1 h-full w-3/4 ">
      <Hero />  
    
    </div>     
  </div>
</template>

<script setup>
  definePageMeta({
   layout: "custom",
 });
</script>

It also require to wrap the root component with <NuxtLayout> as follows

//app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Applying layout in a template

We can apply templates using the NuxtLayout component directly into the HTML. Wrap the components with the NuxtLayout and pass the layout name.

<template> 
  <NuxtLayout name='custom'>
   <h1>Hello world</h1>
  </NuxtLayout>
</template>

Default layout

To create a default layout , create a component file with Layouts/default.vue and will be used for all pages with no Layout specified.

Disabling Layout

Suppose you want disable default layout for particular page, pass layout as false.

 definePageMeta({
   layout:false,
 });