On the frontend I had Apollo Client setup to use authenticatedFetch to send requests to the backend. I needed to use verifyRequest to check the incoming session tokens in the authorization header.

The following were required;

const Koa = require('koa');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const Router = require('koa-router');
const koaBody = require('koa-body');
const Shopify = require('@shopify/shopify-api').Shopify;

Initialized server and router;

    const server = new Koa()
    const router = new Router()

You will need to have implemented OAuth with Shopify. Shopify App Bridge is used to make authenticated requests from the frontend, attaching valid session tokens in the authorization header.

For the incoming requests to /graphql;

  router.post('/graphql', koaBody(), verifyRequest({returnHeader: true}), async (ctx) => {
    const session = await Shopify.Utils.loadCurrentSession(ctx.request, ctx.response, false);
    const { shop, accessToken } = session;
    const options = {
      data: ctx.request.body,
    };
    const client = new Shopify.Clients.Graphql(shop, accessToken);
    const response = await client.query(options);
    ctx.status = 200;
    ctx.body = response.body
  }
);

I used koaBody from koa-body to parse the request body, and then pass it to the shopify-api GraphQL client.

Sure you can setup a custom domain and add your own styling to your blog, but for full control I prefer to grab data from the Hashnode GraphQL API, to display it on my portfolio.

What about other hosts?

My portfolio is a static site hosted on Netlify, but this same general idea should be applicable to most static site hosts, with minor changes.

The following assumes you have a static site pulling data from Hashnode's API, and you have setup your blog to automatically backup all your posts to GitHub.

Netlify Build Hook

1. Login to your Netlify account
2. Select the site you want to build
3. Select Site settings
4. In the sidebar select Build & deploy
5. Scroll down to "Build hooks"
6. Select Add build hook
7. Enter a hook name
8. Select branch to build
9. Copy the build hook url

GitHub Actions

In the repo you created to backup your markdown files, you should create a YAML file in ./github/workflows/. For example I use

.github/workflows/build.yml

And place the following into the file

name: Netlify Build

on:
  push:
    branches: [ main ]

jobs:
  build:
    name: Request Netlify Webhook
    runs-on: ubuntu-latest
    steps:
      - name: Curl request
        run: curl -X POST -d {} YOUR HOOK URL HERE

This will trigger a request to the build hook URL you created earlier, any time there are changes pushed to the main branch of the Hashnode backup repository.

Additional information about Netlify build hooks and GitHub Actions can be found in their supporting documentation.

These components can be passed an in prop that accepts a boolean which determines whether or not to show the component and trigger the enter/exit state.

"react-visibility-sensor" is a package that makes it easy to assign a boolean to represent whether or not a DOM element is within the viewport.

react-intersection-observer provides similar functionality in this use case, and is a newer and actively maintained project with some additional features. Since this package utilizes a built in API, it requires no additional dependencies. More on browser compatibility can be found at caniuse.com.

The following assumes you have an existing React project, with Chakra UI setup, but follow these links if you need help "Getting Started with React (CRA)" or "Getting Started with Chakra UI"

react-visibility-sensor

First off, install react-visibility-sensor in your project;

npm install react-visibility-sensor

Import into your project;

import VisibilitySensor from "react-visibility-sensor"

You can now wrap the element you wish to animate, and the Chakra UI transition component, in the VisibilitySensor component. You can then use an arrow function from within the VisibilitySensor component to access the isVisible variable.

<VisibilitySensor offset={{bottom:200}} partialVisibility={true}>
    {({isVisible}) =>
        <Fade in={isVisible}>
            <YourElement />
        </Fade>
     }
</VisibilitySensor>

In this example the VisibilitySensor component is passed props for offset and partialVisibility. Check on npm for a full list of all the options you can assign.

react-intersection-observer

First off, install react-intersection-observer in your project;

npm install react-intersection-observer

Import into your project;

import InView from "react-intersection-observer"

You can now wrap the element you wish to animate, and the Chakra UI transition component, in the InView component. You can then use an arrow function from within the InView component to access the inView variable. You must also include a ref prop on the element you will be observing.

<InView rootMargin="-200px" triggerOnce={true}>
    {({inView, ref}) =>
        <Fade in={inView}>
            <YourElement ref={ref} />
        </Fade>
     }
</InView >

In this example the InView component is passed props for rootMargin and triggerOnce. Check on npm for a full list of all the options you can assign.

And there you have two methods of triggering transition animations using the built-in Chakra UI components.

HTML is made up of elements which tell the browser additional information about the content using a system of opening and closing tags. While content is often text based, HTML also allows for the usage of links, scripts, images, audio, video and more.

HTML Boilerplate

When you open up a new .html file in Visual Studio Code , you can generate HTML boilerplate by typing a single exclamation mark and pressing enter/return.

This template contains the basic structure that an HTML document should follow. It is a good practice to include all of these tags, and only a single html, head, title, and body tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

The <!DOCTYPE> declaration tells the browser what version of HTML to expect. The <head> tag contains the page title and metadata, and is also the place to link to styles, and certain scripts. The <body> tag is where the content of the HTML document lives, and where JavaScript files are commonly added.

Block vs. Inline

HTML elements generally fall into two categories, inline or block. Block level elements will automatically fill to 100% the width of their parent container, while inline elements are only as wide as the content they hold.

HTML has a general use container for block and inline content. Block level content can be wrapped in a <div> tag, while inline content can be wrapped in a <span> tag.

These generic containers don't provide the browser any information about the content's purpose, and therefore you should always use more appropriate semantic elements, if at all possible.

Headings and Paragraphs

Text content in HTML is often either a heading or a paragraph. Headings are titles and subtitles that are numbered in order of importance. There are six level's of headings which are shown by the tags; <h1> to <h6>.

<h1> is the most important heading, and provides the main title or subject of the page. Only one <h1> tag should be used per page, and tags should exist in order, i.e. <h2> comes after <h1> and so on.

Paragraph's are block level elements which are wrapped in a <p> tag. The main purpose of a <p> tag is to denote a block of text content.

Semantics and Accessibility

One of the best ways to ensure your site is accessible to the largest population of users, is to ensure you always use the correct element for the content you are displaying. HTML includes many descriptive semantic tags such as:

• <main>
• <section>
• <header>
• <footer>
• <nav>
• <article>
• <aside>
• <figure>

Someone might be viewing your website with a screen reader, or navigating with only a keyboard. It is important that you keep this in mind when creating any HTML document for use by the general public.

Attributes, IDs and Classes

HTML elements often have settings or options that can be changed by their attributes. Attributes generally follow the name="value" format. Some attributes are required for certain elements, and others are optional.

Two commonly used attributes are id and class. These are names you can assign to elements in order to reference them later, often using CSS or JavaScript. Id's are unique and should not be re-used on different elements, while classes may be used on multiple elements.

Images, Links, and Lists

It's hard to find a website that doesn't have a single image on it. Images can be added to HTML by using the <img> tag. The image element requires a src attribute that points to the images location. It is highly recommended for accessibility to always include a descriptive alt attribute.

The H in HTML (and http) stands for Hypertext, text that contains links. Hypertext was in usage before the invention of the World Wide Web, and has long been a core part of the internet. Text can be wrapped in an <a> or "Anchor" tag which accepts an href attribute as a location.

Lists in HTML can either be ordered <ol> or unordered <ul>. The main difference is the default styling for <ol> uses numbers , while <ul> uses bullets. Use <ol> when the order is important, for example a sequence of events such as a cooking recipe. Both types of lists are made up of <li> elements.

Forms and Input

An important part of HTML is the ability to accept a user's input. The <form> element tells a browser this part of the page is for gathering user input. Forms often contain;

• <input>
• <label>
• <button>
• <textarea>
• <select>

<input> elements are differentiated by their type attribute. Some commonly used input types are text, checkbox, button, password, radio, and submit. Associated <labels> are used to add captions to input elements.