One of the more challenging aspects of running a 

, (single-page application) website is making it more visible to search engines due to their reliance on javascript to present content in the browser. If you look at the flowchart below, you'll see why it can take longer for a SPA-style site to get pages crawled and listed.

If the crawler reaches your page and sees no immediate HTML content, it will send the page to the render queue, meaning it will need to spend additional time and resources to render your page using javascript. Meanwhile, other 

, (server side rendering), sites generate pages that don't require javascript to render content, get indexed directly after being crawled, so they have an SEO advantage. The good news is there have been advancements made in JS platforms to deal with problem, the most popular examples are 

. They can both provide fully rendered content to the browser through hybrid or static rendering. These rendering strategies will ensure the content is picked up by the crawlers and more likely to be indexed right away.

Despite these new amazing platforms, there is still a major SEO gap in my opinion. The one sure fire way to make Google notice your lonely little pages is to present them in a lovely 

file. This is one of the first things Mr. Google Spider looks for when searching your website for content. If there is no sitemap, it relies solely on HTML href links to hop from one page to the next, and this doesn't account for dynamically generated pages that you'd have if you power your website with a CMS or have other api-driven content.

Creating the sitemap isn't that difficult, there are plenty of 

 to follow, and if you have a small amount of pages you can probably create it by hand. However, if you use a CMS to help generate content, you might forget to update the sitemap every time you post something new. And if you already have a lot of content, creating the map by hand might now be too practical.

In this tutorial I'm going to help you create a sitemap using 

, but you could use the code examples and apply it to whichever coding platform you use.

If you're brand-new to Next.js, you might want to pause this tutorial and walk through their 

 to get started. It steps through some of the fundamental building blocks and core Next.js concepts. If you already have a project and want to get right into building the 

The easiest way to get started with Next.js is to run the following in your console:

This will automatically setup a Next.js project in whichever folder you run this from.

Once the packages have finished downloading, you should be able to run your new Next.js app with the following:

If everything is good you should see this in your browser.

The idea with our sitemap is we'll create a new route in our app that will serve up the sitemap when google hits it. In Next.js, this is really easy. We'll be creating a new file in your 

. Here is where we'll be doing the bulk of the work. The core Next.js feature we're going to be using here is 

. This will use node.js to prefetch all the data needed to generate the sitemap before the page is generated. The reason we'll use server-side here is because it will be able to fetch data from your content api to ensure it has all the latest content when Google comes a knockin'.

const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";

function generateSiteMap(posts) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>${SITE_URL}</loc>
     </url>
   </urlset>
 `;
}

 is using an environment variable to get the full site URL which will eventually reference the production URL. When developing, or if no environment variable is set, it will default to 

The next function is the beginning of our xml file string. We will start with something basic and just insert the static pages we already know about. The first sitemap location we added is just the root of the site 

Below this function, we'll add an empty default component function:

export default function SiteMap() {
  // getServerSideProps will do the heavy lifting
}

Essentially the component doesn't require any internal logic , it will rely solely on the 

 feature we'll create in the next code block.

In this tutorial we'll connect with Storyblok and axios to fetch some content from its api. To make it easy to talk to the api, use npm to install the storyblok js client.

You can use any api content, just keep in mind the shape of our content might be different and you'll need to adapt some of the final code to make it work.

You need to create a new folder in the root directory called 

import StoryblokClient from 'storyblok-js-client'

const Storyblok = new StoryblokClient({
  accessToken: process.env.NEXT_PUBLIC_STORYBLOK_TOKEN,
  cache: {
    clear: 'auto',
    type: 'memory',
  },
})

export const getPostLinks = async () => {
  const result = await Storyblok.get('cdn/links', {
    starts_with: 'posts',
  })
  return result
}

This will create a new Storyblok instance, provide it with a new 

 that will contain your Storyblok api token, and use automatic cache clearing. You can either create a new .env.local file and add the variable to it, or you can export the variable to your console with:

export NEXT_PUBLIC_STORYBLOK_TOKEN=your-storyblok-api-token-here

 Storyblok endpoint which will send minimal amount of data that can be used to generate a sitemap from. We're going to be pulling the 

 file. Now that we have the means to fetch api data, let's use the data to complete the xml formatted string we started earlier. Right below the 

 default function, add a new function called 

export async function getServerSideProps({ res }) {
  const request = await getPostLinks();
  const links = request.data.links;
}

 and saving the links portion of the request to our 

Next we're going to iterate over the returned data and build the rest of our xml string. The 

 endpoint returns an object with the id of the post as keys. The data shape will look something like:

 to walk the returned data and pull out the information we want to use in our xml.

export async function getServerSideProps({ res }) {
  const request = await getPostLinks();
  const links = request.data.links;
  const paths = [];
  Object.keys(links).forEach((linkKey) => {
    if (links[linkKey].is_folder) {
      return;
    }
    const slug = links[linkKey].slug;
    paths.push({ slug });
  });
  
  const sitemap = generateSiteMap(paths);
}

There is a condition that prevents objects with the 

 property from appearing in our xml, those do not map to actual URLs in our example so we don't want it in our sitemap.

Now we'll need to go back and modify our 

 function, to accept the paths data and complete the xml string.

function generateSiteMap(paths) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>${SITE_URL}</loc>
     </url>
     ${paths
       .map(({ slug }) => {
         return `
       <url>
           <loc>${`${SITE_URL}/${slug}`}</loc>
       </url>
     `;
       })
       .join("")}
   </urlset>
 `;
}

 with some object destructuring to pull out the 

 property we're after. The map function will output another xml location with the main URL path followed by the path from the slug. The final 

 function will convert our array to a string.

export async function getServerSideProps({ res }) {
  const request = await getPostLinks();
  const links = request.data.links;
  const paths = [];
  Object.keys(links).forEach((linkKey) => {
    if (links[linkKey].is_folder) {
      return;
    }
    const slug = links[linkKey].slug;
    paths.push({ slug });
  });

  const sitemap = generateSiteMap(paths);

  res.setHeader("Content-Type", "text/xml");
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
}

What this does is utilizes the node server to output the xml string we created directly to the browser. So now, whenever Google scrapes your sitemap.xml, it will get the most up-to-date map automatically with no extra work on your part. If you point your browser to 

 you should see something like the following:

That just about wraps up this tutorial. I hope you found it useful. You might want to use 

 to verify it can read your sitemap once you have this up on your production site at a URL google can reach. With an automated way of generating your sitemap, you'll be well on your way to greater visibility in Google searches. Happy coding. 

Build a dynamic sitemap.xml for your Next.js app

It had been a few years since I gave my personal website any love. When you code professionally, sometimes you have little left at the end of the day, or evening, to devote to personal projects. The last time I redid my site, I used 

, it was time to give something else a try. I remember thinking how much better I liked Vue, it felt much more natural to be coding in an environment that gracefully coupled template HTML code with JS code. Then right when I finished the first pass, I took a new job and started learning 

Three years later and I'm starting to manage my daily tasks efficiently and have some time for my own projects. I decided it was time to spruce up my site and add some content. I started looking through my Vue code and realized I hadn't committed much of it to memory and I thought it would be easier to redesign my site in React and use some more current tools and best practices I had gained. After a weekend, I had my new site deployed to 

Then I started adding the new content I had planned and wanted to measure any traffic. And that's where I started going down a rabbit hole. In terms of SEO performance, I'd rank a vanilla create-react-app roughly a 

. I think this probably holds true for many JS heavy SPA-style websites, when Google's webcrawler comes a knockin', there's nobody home. Sure you can create a sitemap and submit pages to 

, but if you're site pulls content from an API and renders it in the browser asynchronously, your pages are practically invisible to web crawlers until they get in the render queue which takes considerably longer to process given the amount of web content out there.

Other issues, like page titles and meta tags are not considered in a 

 project, you'll need to develop your own method for handling these if your want them to be unique and SEO-friendly. There are methods described where you dynamically populate the 

 after your content is fetched, but I have my doubts that a web crawler would read the updated tag instead of the whatever it was on the initial page load.

While I was reading up on solutions to fix these problems, I remembered reading about 

 and vaguely recalling that it offered several unique ways to deploy a React-based site, one option is deploying a completely static HTML site. This peaked my interest because I knew a static site with all of its content ready on initial paint would be much more SEO-friendly.

I didn't think too hard about my next steps, they just sort of fell into my lap. I began with looking at the 

 section. The tutorial started walking me through building a new Next.js project, and within minutes I had something up and running in my dev environment. There wasn't too much unfamiliar here if you're coming from a React background. 

The main thing that stuck with me is Next.js has routing built-in. And the way routing works is drastically different than what you're probably used to. Instead of defining routes in a file, the routes are created automatically based on your file hierarchy. Essentially anything you add to the 

 folder in a Next.js app, the route will be created automatically. In my example below, I have posts, projects, and services which correspond to my main navigation. It even has a very simple way to create dynamic routes, say you wanted 

, you would simply create a file under your 

 component, it started to click that Next.js was built with SEO in mind. The Head component allows you to specify 

 tags that should appear on your pages. You may use the component on pages, and if you require a custom title that comes from your api, you can pass that into your head component using a new Next.js convention called 

  which allows you to do cool things like pass in server-based or api data that needs to be available before your page is rendered. 

On my old site, I spent a bit of effort dealing with lazy loading images to improve page performance. Since I use pretty large images for my portfolio section, I wanted to make sure these pages would be usable for people on mobile devices. For this I used a custom React library called 

. This worked pretty well but it was an afterthought and I am really happy to see a site building platform that treats this as a first-class citizen. Next.js Image components handle lazy-loading automatically. They even come with a built-in 

 property that can add a blur effect while the high-res image is downloading. It also requires you to define a height and width which ensures minimal layout shift when your image finishes downloading.Other responsive features are baked in, like on-demand image resizing, even for images stored on remote servers. That is pretty amazing.

These are features that typically take a bit of fiddling with new/existing projects to get it right. However, Next.js has these already part of it's core. You can start a new project with built-in TS support by simply typing in your console 

 or if you have an existing project, type 

 and Next.js will automatically configure typescript to work inside your project. 

With Next.js, you can deploy a site that serves up pages at request time, or serves pre-rendered pages at build time, all under the same app. This gives you lots of flexibility and optimizes site performance. 

Speaking of performance, here's a snapshot of my sites performance after the Next.js redesign taken with Chrome's Lighthouse performance analyzer.

This is a significant improvement over my previous 

 version which scored roughly an 80% performance score before tinkering. I was eventually able to raise it to upper 90s, but that was after adding the 

I did hit a slight snag though. After deploying my new site to Heroku and dealing with some DNS issues, I tested my new site and started to notice the images were downloading slower than what I saw in my development environment. Even worse, I saw my app crash while attempting to fetch these images. I tried many changes including passing in a PORT config variable, but kept seeing my app crash which was unacceptable.

While I wasn't able to resolve my issue on Heroku, I was able to fix it, and enjoy some massive load time improvements by hosting my new site on 

, the makers of Next.js. I was actually really pleasantly surprised by their onboarding experience, which got my new site deployed in minutes, and unlike Heroku, they offer free SSL with free accounts. Vercel specializes in Next.js app hosting and its likely you will see a performance boost if you choose to try them.

Overall I'm really happy with what Next.js brings to the table. For those comfortable with React, it's a no-brainer to give it a try. I think the hardest concept to grasp was the 

 features, but once you understand how these work, you will start to understand what makes Next.js the future of Web coding.

Reasons to Switch from Create React App to Next.js

 for my website. The obvious thing to do is ensure your 

 is up-to-date and being read by google. If you have a nifty SPA-style site that relies heavily on javascript, you might be wondering the best way to maintain the sitemap. Perhaps you're like me and have lots of dynamically generated pages, pages that fetch their information from an api, google will have a harder time finding them if they aren't present in your sitemap. 

That got me thinking I should probably leverage my api and start experimenting with webhooks to keep the sitemap up to date whenever I publish or remove content. Before long I had a working node backend that could handle hook events coming from my 

, then automatically update my sitemap.xml file with everything published in the CMS. The bad news was when I tried to use this method in my 

 production environment, it appeared I couldn't successfully update the sitemap.xml file. With a bit of research I found this interesting information directly from Heroku:

Once I read that, I basically shut my computer and packed it in for the night, having burned quite a few hours of experimentation for nothing. Or so I thought. In the morning, I started poking around SO for ideas and read something that seemed plausible. The basic concept is as follows:

I'm happy to say that after working through the implementation, this approach is sound and I'd like to share what I learned along the way.

In this short tutorial, I'll walk you through the basics of the following:

I won't go into the details of generating a sitemap.xml, or using webhooks, as those are pretty use-case specific and the implementation depends on a lot of things. But if you follow along, you'll have the information you'll need to work around the Heroku ephemeral file system problem and apply it to your specific use case.

If you don't already have one, you'll need to 

. Go ahead and do that before continuing. 

Once you have confirmed your account, sign in and access the S3 Management. From here you're going to 

Give the bucket a name, then you'll want to likely keep the defaults provided. For my use case, I allowed public read-only access because I wanted to expose my sitemap.xml there. Depending on your needs, you may choose to block all public access, and only allow access through the api key.

 to allow public read-only access to my bucket:

In order to read/write to the S3 bucket from your node app, you'll need to create access keys in AWS. You can get there by clicking the account dropdown and then select 

You can either create keys on your root user account, or create a new user. Once the user is created, AWS will show you a screen where you can access the keys. Make sure you record the information because it will be the only time you can access it. If you lose the key info, you'll have to generate new keys.

Now log in to your Heroku account and go to the app you plan to access S3 with. Under Settings, scroll down to 

Now when you deploy your app to Heroku, you'll reference these variables instead of adding them statically to your app code and risking exposing the information to the Web. You will use the same config vars in your app by adding them to an 

Now here comes the fun part, you will be using the 

 library to read/write to the S3 bucket from your app. To start, you will need to import the library, we can use NPM for that:

Next, you'll want to import or require the package at the top of your node script.

const s3 = new AWS.S3({
  accessKeyId: process.env.AWS_ACCESS_KEY,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
})

const params = {
  Bucket: 'chromaloop', // pass your bucket name
  Key: 'sitemap.xml', // file will be saved as chromaloop/sitemap.xml
  Body: sitemap,
}
s3.upload(params, function (s3Err, data) {
  if (s3Err) { 
    throw s3Err
  }
  console.log('sitemap: ', sitemap)
})

 xml-formatted string as the body in the 

 request. I won't go into the details of creating the xml file, but here's a 

 if you're interested. Then, if there are no errors, it logs the sitemap data which I used mainly for testing purposes once I deployed the app to Heroku. You would probably want to remove the log once you confirmed it was working.

I was pretty pleased about how easy it was to use the 

 library and glad to get a little experience working with AWS tools. I think using S3 for storage is a pretty good idea in general if you plan to host larger files on your site, you might want to consider it. 

I hope you found this post useful, I'll be working on more code tutorials in the near future.

How to write to files in a Heroku node.js application.

Using AWS S3 as storage for Heroku app

, I showed you how to setup a basic React app and fetch some content from the Storyblok API. In this post we'll dive a bit deeper and see how we can parse multiple stories returned and display it as a repeating list of items in React. You could use this for a simple blog, or perhaps a small portfolio. 

We'll assume that you've already setup your React app, but if you haven't done that yet you might want to check out 

We'll be building from a bare-bones react application, so open your text editor and open 

. You can go ahead and delete everything between the main div 

 in the template. We'll be replacing that with our awesome 

To consume the Storyblok API the easiest, we're going to import the 

 interface. We'll also need a place to store the Storyblok data in the App component state, so let's add 

 from the already imported React library.

import React, { useState } from 'react'
import StoryblokClient, { StoryData } from 'storyblok-js-client'

At the top of the App function, setup your story state and add the 

 typing to indicate the shape of the data we expect from the API. We will start the initial state with an empty array.

const [stories, setStories] = useState<StoryData[]>([])

At the top of the App function, add the following and replacing the 

 with your own from the Storyblok API tab within settings. I like to keep my token stored as an environment variable and access it like 

so it doesn't get repeated everywhere in my templates. You will need to store this in an 

 file but I'm not going to elaborate on that as it's outside the scope of this tutorial.

const Storyblok = new StoryblokClient({
    accessToken: "YOUR-PUBLIC-TOKEN",
    cache: {
      clear: "auto",
      type: "memory",
    },
  })

Storyblok.get('cdn/stories', {
    per_page: 4,
    page: 1,
  }).then(result => {
    setStories(result.data.stories)
  })

This will make the GET call to storyblok's API and retrieve a total of 4 items, then update the stories state with the response data. Your App.tsx file should now look something like this:

import React, { Fragment, useState } from 'react';
import './App.css';
import StoryblokClient, { StoryData } from "storyblok-js-client";

function App() {
  const [stories, setStories] = useState<StoryData[]>([]);

  const Storyblok = new StoryblokClient({
    accessToken: process.env.REACT_APP_STORYBLOK_TOKEN,
    cache: {
      clear: 'auto',
      type: 'memory',
    },
  })

  Storyblok.get('cdn/stories', {
    per_page: 4,
    page: 1,
  }).then(result => {
    setStories(result.data.stories);
    console.log('stories: ', stories);
  })

  return (
    <Fragment />
  )
}

export default App;

At this point, if you preview the code in your browser, you should see a network call sent to the Storyblok 

https://api.storyblok.com/v2/cdn/stories?per_page=4&page=1&version=published&token=YOUR-PUBLIC-TOKEN&cv=1643638226

. Unless you already have some content saved in Storyblok, you should see it return an empty array. Let's fix that and create some content now in Storyblok.

If you haven't already, you'll need to sign up for a free Storyblok account. Once your account is created, I recommend starting by creating a new "Blank Space", that way we can start with the pure basics and add complexity later. Once your account is created, you'll want to create a new story under the "Getting Started" tab.

Click "Create Content" and choose "Add New" from the radios and call it "Demo" as the content type.

Next you'll want to define the fields used for this block. Let's use "Headline" as the field name, then choose "Add". 

The default field is already a text field, but you can use many different types of fields with your blocks, image, rich text, markdown, link, table, to name a few.

For my text input, I'll choose to make it required and limit the characters to 38.

Save the field and you can now enter some text for your new Headline block and then publish the story.

For the sake of the tutorial, I've gone ahead and created two additional stories, all with the same Demo content type. 

At this point you might be thinking this seems like a lot of work just to add a headline. In a real-world scenario, you would probably want to define a content type with multiple input fields and use that to describe a particular view of your website. An example would be:

So now that we have several stories created, let's go back now to our React app and see how we can output the content into our 

<Fragment>
  {stories.map((story) => (
    <div key={story.id}>{story.content.Headline}</div>
  ))}
</Fragment>

What this is doing is iterating over all the stories returned from the API, and outputting a 

 field we created in Storyblok. Once you add that and save it, you should now see the headline printed out 3 times in your browser.

It doesn't look pretty at all but we can fix that very easily with some styling and page layout. We aren't going to focus on that in this tutorial though. Stay tuned for more React + Storyblok posts and we'll continue to dive deeper.

Power a blog with React + Storyblok CMS

React + Storyblok - Displaying Content

When I was just starting out in web development, I was attracted to Wordpress for its built-in power, and because it had a massive developer community where you could find answers to figure out how to do pretty much anything. I wasn't very technical at the time, but I was eager to start building things and Wordpress felt like a pretty good place to start. 

Web development has changed significantly, and over the years I saw a major shift in how websites were developed. 

 became immensely popular as well as other JS libraries like 

. I remember I went to a local interactive workshop in Boston and learned about Yeoman and how you could easily create a MEAN, (Mongo, Express, Angular, Node) project by typing 

 in your console. I didn't really know a lot about what technologies made it possible to do that but I was pretty excited about the streamlined project creation after spending a lot of hours struggling to get projects up and running because of configuration issues. 

I started to think about this newer way I wanted to work and how I could apply it to my current project workflow, but I was really used to starting with Wordpress and didn't want to lose the powerful CMS framework that it provided. What I wanted though was something much simpler that could provide the CMS and nothing else, allowing me more easily deal with the visual presentation via React. It didn't take me long to find 

I'm going to teach you how to setup a simple React app and feed it content from Storyblok. Let's get started.

To install a fresh React project, type in your console:

npx create-react-app my-app --template typescript

This will install the typescript flavor of React which is totally optional but I couldn't live without Typescript now. After all the packages are downloaded, you can test to make sure your new app is running with:

If everything is good, you should see something like this in a new browser tab:

If you run into issues in the console, you might want to check to make sure you're running the correct version of node 

. I'm using v14.17.0 at the time of this writing. 

Next, you need to install the Storyblok client package along with 

, so you can request content from its api and feed it to your React app.

At this point, before we write any more code, you should go ahead and 

 for a free Storyblok account. Once you have the account created, you need to create at least one piece of content to use in the following example. You can start by adding a "Page", give the page a title, add a new block and call it "Text", and finally add a new field called "Body". It should look something like this:

Once the field is added, you can enter some text into the "Body" field shown in the main editor view. (I prefer to use the form as apposed the visual editor which can be configured in the tab "Config".

Once you've got some text in the Body field, you can Publish the page and exit the editor. Take note of the "Slug" information shown in the right-hand sidebar of the editor. We're going to use that to fetch the page from the api in the next steps.

Next you'll need to grab your API key from the Storyblok settings main tab. Copy and paste the "public" API key which is shown in the example below.

Below the other imports at the top of the file, add: 

import StoryblokClient from "storyblok-js-client";

const Storyblok = new StoryblokClient({
  accessToken: "YOUR-PUBLIC-TOKEN",
  cache: {
    clear: "auto",
    type: "memory",
  },
})

Storyblok.get('cdn/stories/demo').then(result => {
  console.log('result: ', result)
})

 value with your public key from the previous step, and make sure the 

JavascriptStoryblok.get('cdn/stories/demo')

 line matches the slug to your Storyblok page.

 file should look something like this now:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import StoryblokClient from "storyblok-js-client";

function App() {

  const Storyblok = new StoryblokClient({
    accessToken: "YOUR-PUBLIC-TOKEN",
    cache: {
      clear: "auto",
      type: "memory",
    },
  })

  Storyblok.get('cdn/stories/demo').then(result => {
    console.log('result: ', result)
  })

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Once that is saved, go to your app running in the browser and look at the console, you should see the data returned from the Storyblok API!

That is really all there is to it. As a next step you could 

, it will show you many more advanced ways to search for specific content, add paging, and other magic. There are many more advanced things you can do with Storyblok, but hopefully this was enough to get a feel for setting up a basic React + Storyblok project. 

Combine React + Storyblok to power a dynamic website

Creating a CMS-Powered Website with React and Storyblok

I used to build all of my websites on Wordpress, I did this for many years and usually enjoyed the process but there were a few things I didn't like. 

At my current job, I was recently made in charge of our marketing website. The site was developed on Wordpress by a contractor who used my 

 designs to create a custom theme. Once the initial design was done, I was the person to take it over and handle all the future changes. 

I immediately dug in and soon discovered two new things about Wordpress development I think help solve some, (not all), of the frustrations I had earlier. 

How to Wordpress in 2022

Flying drones is fun. I mean it's really truly hard, but also incredibly challenging and rewarding. My wife and kids like to joke that I spend more time repairing drones than actually flying them. I think anyone who gets serious about this hobby can relate to that easily. But it's not just about fixing broken stuff, it's about iterative improvements, testing, having fun, hitting limits, and repeating over and over.

Before I go much further, I'd like to say the majority of links below are affiliate links which means I'll get a small commission if you buy anything after clicking one of the links below. With that out of the way, let's continue on!

All Posts

Build a dynamic sitemap.xml for your Next.js app

Reasons to Switch from Create React App to Next.js

Using AWS S3 as storage for Heroku app

React + Storyblok - Displaying Content

Creating a CMS-Powered Website with React and Storyblok

How to Wordpress in 2022

Getting Started Flying FPV Drones

Get in Touch

Have A Nice Day