Updates to Landing (#2632)

* Updates to Landing Site

- Docker Modal Sizing fixed for mobile
- Matching button looks for copying across the site
- Move to Next.js `v14.2.5`
- Change the banner to `Alpha 0.4 is out` with a link to the release changelog.
- Updates to docs for easier copy-pasting commands.

* Update mobile docs in contributing

* Reorganize to have welcome first

Have welcome first in the list in the developers section of docs

* Formatting

CONTRIBUTING.md

@@ -111,13 +111,10 @@ To run the mobile app:
 - Make sure you have [NDK 26.1.10909125 and CMake](https://developer.android.com/studio/projects/install-ndk#default-version) installed in Android Studio.
 - Run the following commands:
   - `pnpm mobile android` (runs on Android Emulator)
-    - In order to have locations working on Android, you must run the following command once the application has been installed for the first time. Otherwise, locations will not work.
+    - In order to have locations working on Android, you must run the following command once the application has been installed for the first time (if the app fails to request the `MANAGE_EXTERNAL_STORAGE` permission). Otherwise, locations will not work.
       - `adb shell appops set --uid com.spacedrive.app MANAGE_EXTERNAL_STORAGE allow`
     - Run the following commands to access the logs from `sd-core`.
-      - `adb shell`
-      - Then `run-as com.spacedrive.app` to access the app's directory on device.
-      - Run `cd files/logs` and then select the logs with the timestamp of when you ran the app. Ex: `sd.log.2023-11-28`.
-        - You can view the logs using `tail -f [log-name]`. Ex: `tail -f sd.log.2023-11-28`.
+      - `adb logcat | grep -i com.spacedrive.app`
   - `pnpm mobile ios` (runs on iOS Emulator)
     - `xcrun simctl launch --console booted com.spacedrive.app` allows you to view the console output of the iOS app from `tracing`. However, the application must be built in `debug` mode for this.
   - `pnpm mobile start` (runs the metro bundler only)

apps/landing/package.json

@@ -27,7 +27,7 @@
 		"image-size": "^1.0.2",
 		"katex": "^0.16.9",
 		"markdown-to-jsx": "^7.3.2",
-		"next": "13.5.6",
+		"next": "14.2.5",
 		"next-contentlayer": "^0.3.4",
 		"next-plausible": "^3.11.3",
 		"react": "18.2.0",

apps/landing/src/app/Downloads/DockerDialog.tsx

@@ -20,7 +20,7 @@ export function DockerDialog({
 		<Dialog.Root open={open} onOpenChange={setOpen}>
 			<Dialog.Portal>
 				<Dialog.Overlay className="fixed inset-0 z-50 bg-app/80 backdrop-blur-sm radix-state-closed:animate-out radix-state-closed:fade-out-0 radix-state-open:animate-in radix-state-open:fade-in-0" />
-				<Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-[500px] translate-x-[-1/2] translate-y-[-1/2] overflow-hidden rounded-md border border-app-line bg-app shadow-lg outline-none duration-200 radix-state-closed:animate-out radix-state-closed:fade-out-0 radix-state-closed:zoom-out-95 radix-state-closed:slide-out-to-left-1/2 radix-state-closed:slide-out-to-top-[48%] radix-state-open:animate-in radix-state-open:fade-in-0 radix-state-open:zoom-in-95 radix-state-open:slide-in-from-left-1/2 radix-state-open:slide-in-from-top-[48%]">
+				<Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-[95%] max-w-[500px] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-md border border-app-line bg-app px-2 shadow-lg outline-none duration-200 radix-state-closed:animate-out radix-state-closed:fade-out-0 radix-state-closed:zoom-out-95 radix-state-closed:slide-out-to-left-1/2 radix-state-closed:slide-out-to-top-[48%] radix-state-open:animate-in radix-state-open:fade-in-0 radix-state-open:zoom-in-95 radix-state-open:slide-in-from-left-1/2 radix-state-open:slide-in-from-top-[48%]">
 					<div className="p-3 pt-0">
 						<h2 className="py-2 text-center text-lg font-semibold text-ink">Docker</h2>
 						{/* Link */}
@@ -31,7 +31,8 @@ export function DockerDialog({
 							<Button
 								size="icon"
 								variant="outline"
-								className="absolute right-4"
+								rounding="both"
+								className="absolute right-6 bg-app-box transition-colors duration-200 ease-in-out hover:bg-app-darkBox"
 								onClick={() => {
 									navigator.clipboard.writeText(DOCKER_URL);
 									setCopied(true);

apps/landing/src/app/layout.tsx

@@ -1,3 +1,4 @@
+import type { Metadata, Viewport } from 'next';
 import { PropsWithChildren } from 'react';
 
 import { Footer } from './Footer';
@@ -11,9 +12,8 @@ import PlausibleProvider from 'next-plausible';
 
 import { Providers } from './Providers';
 
-export const metadata = {
+export const metadata: Metadata = {
 	metadataBase: new URL('https://spacedrive.com'),
-	themeColor: { color: '#E751ED', media: 'not screen' },
 	robots: 'index, follow',
 	description:
 		'Combine your drives and clouds into one database that you can organize and explore from any device. Designed for creators, hoarders and the painfully disorganized.',
@@ -25,6 +25,10 @@ export const metadata = {
 	authors: { name: 'Spacedrive Technology Inc.', url: 'https://spacedrive.com' }
 };
 
+export const viewport: Viewport = {
+	themeColor: { color: '#E751ED', media: 'not screen' }
+};
+
 export default function Layout({ children }: PropsWithChildren) {
 	return (
 		<html lang="en" className="dark scroll-smooth">

apps/landing/src/app/page.tsx

@@ -39,7 +39,11 @@ export default async function Page() {
 			<div className="flex w-full flex-col items-center px-4">
 				<div className="mt-22 lg:mt-28" id="content" aria-hidden="true" />
 				<div className="mt-24 lg:mt-8" />
-				<NewBanner headline="Alpha 0.3 is here!" className="mt-[50px] lg:mt-0" />
+				<NewBanner
+					headline="Alpha 0.4 is out!"
+					className="mt-[50px] lg:mt-0"
+					href="/docs/changelog/alpha/0.4.0"
+				/>
 				<h1 className="fade-in-heading z-30 mb-3 bg-clip-text px-2 text-center text-4xl font-bold leading-tight text-white md:text-5xl lg:text-7xl">
 					One Explorer. All Your Files.
 				</h1>

apps/landing/src/components/mdx/Pre.tsx

@@ -3,6 +3,7 @@
 import { Check } from '@phosphor-icons/react';
 import { Copy } from '@phosphor-icons/react/dist/ssr';
 import { FC, useRef, useState } from 'react';
+import { Button, Tooltip } from '@sd/ui';
 
 const Pre: FC<{ children: React.ReactNode }> = ({ children }) => {
 	const textInput = useRef<HTMLDivElement | null>(null);
@@ -13,23 +14,38 @@ const Pre: FC<{ children: React.ReactNode }> = ({ children }) => {
 		navigator.clipboard.writeText(textInput.current!.textContent ?? '');
 		setTimeout(() => {
 			setCopied(false);
-		}, 2000);
+		}, 3000);
 	};
 
 	return (
 		<div ref={textInput} className="relative">
-			<button
+			{/* <button
 				aria-label="Copy code"
 				type="button"
 				className="absolute right-2 top-2 z-10 rounded-md bg-app-box p-3 text-white/60 transition-colors duration-200 ease-in-out hover:bg-app-darkBox"
 				onClick={onCopy}
 			>
 				{copied ? (
-					<Check className="my-0 size-5 text-green-400/60" />
+					<Check size={18} className="text-green-400" />
 				) : (
-					<Copy className="my-0 size-5 text-white" />
+					<Copy size={18} className="text-white opacity-70" />
 				)}
-			</button>
+			</button> */}
+			<Button
+				size="md"
+				rounding="both"
+				variant="outline"
+				className="absolute right-2 top-2 z-10 bg-app-box !py-2.5 transition-colors duration-200 ease-in-out hover:bg-app-darkBox"
+				onClick={onCopy}
+			>
+				<Tooltip label={copied ? 'Copied' : 'Copy to clipboard'}>
+					{copied ? (
+						<Check size={18} className="text-green-400" />
+					) : (
+						<Copy size={18} className="text-white opacity-70" />
+					)}
+				</Tooltip>
+			</Button>
 			<pre className="language-container">{children}</pre>
 		</div>
 	);

docs/developers/prerequisites/environment-setup.mdx

@@ -58,20 +58,31 @@ This project uses [Cargo](https://doc.rust-lang.org/cargo/getting-started/instal
 To run mobile app
 
 1. Install [Android Studio](https://developer.android.com/studio) for Android and [Xcode](https://apps.apple.com/au/app/xcode/id497799835) for IOS development
-2. `./scripts/setup.sh mobile`
-   _The should setup most of the dependencies for the mobile app to build._
+2. _This should setup most of the dependencies for the mobile app to build._
+   ```shell
+   ./scripts/setup.sh mobile
+   ```
 3. You must also ensure you have [NDK 26.1.10909125 and CMake](https://developer.android.com/studio/projects/install-ndk#default-version) in Android Studio
-4. `pnpm mobile android` (runs on Android Emulator)
-   - In order to have locations working on Android, you must run the following command once the application has been installed for the first time. Otherwise, locations will not work.
-     - `adb shell appops set --uid com.spacedrive.app MANAGE_EXTERNAL_STORAGE allow`
+4. To run on Android (emulator or device), run:
+   ```shell
+   pnpm mobile android
+   ```
    - Run the following commands to access the logs from `sd-core`.
-     - `adb shell`
-     - Then `run-as com.spacedrive.app` to access the app's directory on device.
-     - Run `cd files/logs` and then select the logs with the timestamp of when you ran the app. Ex: `sd.log.2023-11-28`.
-       - You can view the logs using `cat [log-name]`. Ex: `cat sd.log.2023-11-28`.
-5. `pnpm mobile ios` (runs on iOS Emulator)
-   - `xcrun simctl launch --console booted com.spacedrive.app` allows you to view the console output of the iOS app from `tracing`. However, the application must be built in `debug` mode for this.
-6. `pnpm mobile start` (runs the metro bundler only)
+   ```shell
+   adb logcat | grep -i com.spacedrive.app
+   ```
+5. To run on iOS (runs on iOS Emulator), run:
+   ```shell
+   pnpm mobile ios
+   ```
+   - The following command allows you to view the console output of the iOS app from `tracing`. However, the application must be built in `debug` mode for this.
+   ```shell
+   xcrun simctl launch --console booted com.spacedrive.app
+   ```
+6. To run the UI only (runs the metro bundler only):
+   ```shell
+   pnpm mobile start
+   ```
 
 ### Troubleshooting
 

docs/developers/prerequisites/welcome.mdx

@@ -1,5 +1,5 @@
 ---
-index: 0
+index: -1
 ---
 
 # Spacedrive Developers

docs/product/guides/cli.mdx

@@ -19,8 +19,14 @@ Spacedrive is available as a command-line interface (CLI) tool. The CLI is a pow
 ```bash
 # Launch Spacedrive
 spacedrive -d
+```
+
+```bash
 # View help menu
 spacedrive --help
+```
+
+```bash
 # View version and build information
 spacedrive --info
 ```
@@ -32,12 +38,24 @@ At least one identifier such as `--name`, `--path` or `--id` is required for eac
 ```bash
 # List all Locations
 spacedrive location list
+```
+
+```bash
 # Add a Location
 spacedrive location add /path/to/folder --name "Location Name"
+```
+
+```bash
 # Remove a Location by name
 spacedrive location remove --name "Location Name"
+```
+
+```bash
 # Remove a Location by path
 spacedrive location remove --path /local/path/to/location
+```
+
+```bash
 # Rescan a Location
 spacedrive location rescan --id 4
 spacedrive location rescan --id 4 --full # Full rescan

docs/product/guides/importing-photos.mdx

@@ -18,6 +18,6 @@ An importer tool will be shipped in an upcoming release, which will not only imp
 
 In an upcoming release we will ship a dedicated interface for importing media from removable storage, with the option to exclude already imported media. It will default to your preferences for photo storage and place the new media in a designated folder.
 
-## Google and Apple Photosß
+## Google and Apple Photos
 
 We are working on this, but it is not available yet. Please check our [roadmap](/roadmap) for updates.