Customization - zyplos/bluesky-handles-kiosk GitHub Wiki

If you've deployed this project to Vercel already, as seen in the Project Setup, you should have a clone of this git repository in your own GitHub account. Otherwise, clone this repo to get started.

This project has made it easy to customize the theme and the content of the landing page.

Customizing the theme

Take a look at the ./styles/_variables.scss file. There are default styles that you should leave alone as they serve as fallback styles. To create a theme for your domain, scroll to the bottom of the _variables.scss file and copy the example styles for you to edit.

// example hostname specific theme
// use #root selector for hostname specific themes
#root[data-hostname="<your domain>"] {
  // everything between the brackets
  // ...
}

This project supports taking requests from multiple domains within the same Vercel deployment. If your project is set up for multiple domains, you can create a different theme for each.

// use #root selector for hostname specific themes
#root[data-hostname="example.net"] {
  // ...
}

#root[data-hostname="example.science"] {
  // ...
}

Changing the landing page

If you'd like to change the content shown on the landing page, then edit the ./components/HostnameLandingContent/index.tsx file. This project was meant with unused or gag domains in mind (such as crouton.net), so the landing page will center any images/content you put in. You can add your own images by adding an image to the HostnameLandingContent folder and following this example:

interface HostnameLandingContentProps {
  rootDomain: string;
}

import Image from "next/image";
import reallyGoodImage from "./really-cool-image.png";
import myOtherReallyCoolImage from "./really-cool-image.png";

export default function HostnameLandingContent({
  rootDomain,
}: HostnameLandingContentProps) {
  switch (rootDomain) {
    case "example.com":
      return <ExampleDotCom />;
    case "example.net":
      return <ExampleDotNet />;
    case "example.science":
      return <ExampleDotScience />;
    default:
      return <div>welcome to {rootDomain}</div>;
  }
}

function ExampleDotCom() {
  return (
    <>
      <video controls loop>
        <source src="/static-assets/too-many-toasters.webm" type="video/webm" />

        <source src="/static-assets/too-many-toasters.mp4" type="video/mp4" />
      </video>
    </>
  );
}

function ExampleDotNet() {
  return (
    <Image
      src={reallyGoodImage}
      alt="a good description of the image"
      // this makes the image resize nicely on mobile devices
      className="fluidImg"
    />
  );
}

function ExampleDotScience() {
  return (
    <Image
      src={myOtherReallyCoolImage}
      alt="a cool description of the image"
      // this makes the image resize nicely on mobile devices
      className="fluidImg"
    />
  );
}

If you'd like to further change the landing page, take a look at ./app/hostnameSpecific/[rootDomain]/page.tsx (the page that actually renders when the home page gets requested) and ./components/HomeLayout/index.tsx (the component that applies the per-domain themes).

⚠️ **GitHub.com Fallback** ⚠️