Meta (#8)

README.md

@@ -1,5 +1,15 @@
-# Displacement X
+# ▓ Displacement X
 
-🚧🚧🚧 **under construction** 🚧🚧🚧
+Procedural displacement sci-fi maps generator. Web-based alternative to [JSplacement](https://www.google.com/search?q=JSplacement).
 
-Procedural displacement sci-fi maps generator.
+Live at ▶ **[displacementx.vercel.app](https://displacementx.vercel.app/)**
+
+<img src="./docs/screenshot.png" alt="Displacement X application screenshot"/>
+
+## Status
+
+The application is still in development, but it's already usable to some extent.
+
+## Development
+
+Developers guide is available in [docs/DEVELOPMENT.md](docs/DEVELOPMENT.md).

docs/DEVELOPMENT.md

@@ -0,0 +1,23 @@
+# Development
+
+The repository uses [Next.js](https://nextjs.org/) framework, so once you have some familiarity with it, it should be easy to work with this repository in general.
+
+## Pre-requisites
+
+- [Bun](https://bun.sh/) v1
+
+## Quick start
+
+Install dependencies:
+
+```sh
+bun i
+```
+
+Start local development server:
+
+```sh
+bun run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in the browser.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "displacementx",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.1-alpha.1",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -11,6 +11,7 @@
     "format": "prettier . --write"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-slider": "1.1.2",
     "@radix-ui/react-switch": "1.0.3",
     "clsx": "2.0.0",

src/app/layout.tsx

@@ -2,9 +2,32 @@ import type {Metadata} from 'next';
 import {GeistSans} from 'geist/font';
 import './style.css';
 
+const title = 'Displacement X';
+const description = 'Procedural displacement sci-fi maps generator';
+const images = [
+  {
+    url: '/og.png',
+    alt: description,
+    width: 1200,
+    height: 630,
+  },
+];
+
 export const metadata: Metadata = {
-  title: 'Displacement X',
-  description: 'Procedural displacement sci-fi maps generator',
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+    siteName: title,
+    images,
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title,
+    description,
+    images,
+  },
 };
 
 export default function RootLayout({

src/components/pages/Generator/Generator.tsx

@@ -1,11 +1,24 @@
+import Link from 'next/link';
+import {GitHubLogoIcon} from '@radix-ui/react-icons';
 import {CanvasSection} from './CanvasSection';
 import {SettingsSection} from './SettingsSection';
 
 export function Generator() {
   return (
     <div className='mx-auto max-w-screen-2xl'>
-      <header className='p-4'>
+      <header className='flex flex-row items-center justify-between p-4'>
         <h1 className='select-none text-2xl sm:text-3xl'>Displacement X</h1>
+        <Link
+          className='focus-visible:outline focus-visible:outline-2 focus-visible:outline-red-700'
+          href='https://github.com/satelllte/displacementx'
+          target='_blank'
+        >
+          <GitHubLogoIcon
+            aria-label='GitHub repository'
+            width={20}
+            height={20}
+          />
+        </Link>
       </header>
       <main className='flex flex-col gap-8 px-4 pb-4 md:flex-row md:gap-4'>
         <div className='relative flex-[3]'>