[ENG-1507] More documentation (#2058)

* start

* docs

* mhm

* docs

* roadmap beep beep

* x

* mobile image

* added stuff

* updates

* updates

* well yes

* integrity and longevity

* correction

* Update apps/landing/posts/drag-and-drop.mdx

Co-authored-by: pr <[email protected]>

* just 10k more downloads in the time its taking me to finish this pr

* op

* docs: fix general wording

* docs: add URL to docs and set date to when 0.2.4 was released

* docs: add url to roadmap

* Remove languages for which we don't have a translation yet

* auto format

* Checkout pnpm-lock.yaml from main

---------

Co-authored-by: pr <[email protected]>
Co-authored-by: jake <[email protected]>
Co-authored-by: Vítor Vasconcellos <[email protected]>

apps/landing/posts/drag-and-drop.mdx

@@ -0,0 +1,68 @@
+---
+author: Jamie Pine
+title: Introducing Spacedrive Alpha v0.2 - Drag & drop, AI Labels, Advanced Search, 11 Languages, Tabs, and Spacedrop!
+tags: [News, Updates, Release]
+date: 2024-02-15
+image: images/spacedrive-feb-2024-release.png
+imageAlt: Spacedrive Feb 2024 Release Image
+---
+
+It's been an exciting couple of months since we launched Spacedrive. We're thrilled to share that we've hit **149,000** unique installations, with an average runtime of **54 minutes**. The enthusiasm and feedback from our community have been incredible, and your requests for new features have not gone unnoticed.
+
+Our team has been working tirelessly to turn your most-wanted features into reality. Let's take a look at what's new in v0.2...
+
+## 🫳 Drag and drop
+
+<Video url="/videos/Spacedrive_DragAndDrop.webm" />
+
+The Explorer is the most intricate user interface we have ever designed. Now, with drag and drop, it is one big step closer to having everything you need from a file explorer. In an upcoming release, we'll be adding support for dragging files and folders into and out of Spacedrive from the OS.
+
+## ✨ AI Labeling
+
+<Video url="/videos/Spacedrive_ImageLabler.webm" />
+
+Our first of many AI powered features to come, we create labels for images using a lightweight object detection model running on-device. Currenly the Yolo model family offers limited labels and are not very accurate, but we will make more models available in following updates, such as the [Recognize Anything Model](https://github.com/xinyu1205/recognize-anything).
+
+## Advanced search
+
+We've added a new search bar to the top of the Explorer, which allows you to search for files and folders by name, content, and metadata. You can also use the search bar to filter by file type, date, and more.
+
+## Tabs
+
+<Video url="/videos/Spacedrive_Tabs.webm" />
+
+You can open multiple tabs in the Explorer, and switch between them using the tab bar at the top of the window.
+
+## Now in 11 languages!
+
+We've expanded our language options to include English, Chinese (Simplified and Traditional), German, French, Dutch, Italian, Russian, Spanish, and Turkish. Some translations were created with AI assistance, so feel free to submit corrections on [GitHub](https://github.com/spacedriveapp/spacedrive).
+
+## Updated roadmap
+
+![Spacedrive Roadmap](/images/roadmap.jpg)
+
+We've updated our roadmap to reflect the progress we've made since launch, and to give you a better idea of what's coming next. From today, we are aiming for a monthly major release cycle, with minor releases in between. Check out the [Roadmap →](/roadmap)
+
+## And so much more...
+
+We've also shipped these major features since the launch:
+
+- Multi-select in the Explorer
+- A bar for Quick View to view surrounding media
+- CPU usage control slider
+- Improved virtual filesystem
+- Way. More. Docs. [See Docs →](/docs/product/getting-started/introduction)
+
+## Up Next?
+
+We've got big plans for the next major release:
+
+- **Connect devices**:
+ One of the biggest technologies we've been tackling is multi-device connections and database sync. This has been a cornerstone of Spacedrive from the start, but yet to make it into production. So, we're speeding up the process by introducing an encrypted, cloud-assisted sync instead of peer-to-peer sync using CRDTs, which we will ship later.
+- **iOS and Android**:
+ ![Spacedrive Mobile App Design Preview](/images/mobile_design_preview.jpg)
+ With sync in place, we'll be releasing the alpha versions of our mobile apps for iOS and Android, if you are already a user of Spacedrive you're invited to join, we'll reach out via email with an invite.
+- **Column View**:
+ A hugely demanded explorer view, for good reason. Column view is the most popular view for managing files, but also the hardest to engineer! Along with column view will come upgraded list view, with tree support.
+
+This blog post marks the first of regular updates from the Spacedrive team. We'll be sharing our progress, new features, and more once a month. If you have any questions or feedback, please reach out to us on [Twitter](https://twitter.com/spacedriveapp) or [Discord](https://discord.gg/3YjJUZ6).

apps/landing/src/app/blog/[slug]/page.tsx

@@ -43,33 +43,36 @@ export default function Page({ params }: Props) {
  const MDXContent = useMDXComponent(post.body.code);
 
  return (
- <div className="lg:prose-xs container prose m-auto mb-20 max-w-4xl p-4 pt-14 dark:prose-invert">
+ <div className="lg:prose-xs container prose m-auto mb-20 max-w-4xl p-5 pt-14 dark:prose-invert">
  <>
  <figure>
  <Image
  src={post.image}
  alt={post.imageAlt ?? ''}
- className="mt-8 rounded-xl"
+ className=" mt-8 rounded-xl will-change-transform fade-in"
  height={400}
  width={900}
  />
  </figure>
- <section className="-mx-8 flex flex-wrap gap-4 rounded-xl px-8">
+ <section className="flex flex-wrap gap-4 rounded-xl px-4 ">
  <div className="w-full grow">
- <h1 className="m-0 text-2xl leading-snug sm:text-4xl sm:leading-normal">
+ <h1 className="animation-delay-1 m-0 text-2xl leading-snug will-change-transform fade-in sm:text-4xl sm:leading-normal">
  {post.title}
  </h1>
- <p className="m-0 mt-2">
+ <p className="animation-delay-2 m-0 mt-2 will-change-transform fade-in">
  by <b>{post.author}</b> &middot; {dayjs(post.date).format('MM/DD/YYYY')}
  </p>
  </div>
- <div className="flex flex-wrap gap-2">
+ <div className="animation-delay-3 flex flex-wrap gap-2 will-change-transform fade-in">
  {post.tags.map((tag) => (
  <BlogTag key={tag} name={tag} />
  ))}
  </div>
  </section>
- <article id="content" className="text-lg">
+ <article
+ id="content"
+ className="animation-delay-4 px-4 text-lg will-change-transform fade-in"
+ >
  <MDXContent components={BlogMDXComponents} />
  </article>
  </>

apps/landing/src/app/blog/page.tsx

@@ -27,10 +27,10 @@ export default function Page() {
  <Image
  src={post.image}
  alt={post.imageAlt ?? ''}
- className="inset-0 -z-10 m-0 w-full rounded-t-xl object-cover md:h-96"
+ className="inset-0 -z-10 m-0 w-full rounded-t-xl object-cover"
  // NOTE: Ideally we need to follow this specific ratio for our blog images
  height={400}
- width={800}
+ width={900}
  />
  )}
  <div className="p-8">

apps/landing/src/app/roadmap/items.ts

@@ -33,7 +33,7 @@ export const items = [
  completed: true,
  title: 'Self hosting',
  description:
- 'Spacedrive can be deployed as a service, behaving as just another device powering your personal cloud.'
+ 'Spacedrive can be deployed as a service via Docker, behaving as just another device powering your personal cloud.'
  },
  {
  completed: true,
@@ -44,47 +44,107 @@ export const items = [
  {
  completed: true,
  title: 'Search',
- description: 'Deep search into your filesystem with a keybind, including offline locations.'
+ description:
+ 'Instantly search your library, including offline locations. Use advanced filters to refine and save searches for later.'
+ },
+ {
+ completed: true,
+ title: 'Quick View',
+ description:
+ 'View images, videos and documents in a full screen modal with nested inspector and context switcher.'
  },
  {
  completed: true,
  title: 'Media View',
  description: 'Turn any directory into a camera roll including media from subdirectories'
  },
  {
- when: '0.1.0 Alpha',
- subtext: 'Oct 2023',
- title: 'Key manager',
+ completed: true,
+ title: 'Spacedrop',
+ description: 'Drop files between devices and contacts on a keybind like AirDrop.'
+ },
+ {
+ completed: true,
+ title: 'AI labeling for images',
  description:
- 'View, mount, unmount and hide keys. Mounted keys can be used to instantly encrypt and decrypt any files on your node.'
+ 'Automatically label images with objects, with a model loader to support future models and upgrading to more powerful models for various jobs.'
  },
  {
- when: '0.2.0',
- title: 'Spacedrop',
- description: 'Drop files between devices and contacts on a keybind like AirDrop.'
+ title: 'Drag & drop',
+ completed: true,
+ description: 'Drag and drop files between devices and drives.'
  },
  {
- title: 'Realtime library synchronization',
- description: 'Automatically synchronized libraries across devices via P2P connections.'
+ when: '0.2 Alpha',
+ subtext: 'January 2024',
+ title: 'Column View',
+ description: 'View files in the beloved column layout with a nested inspector, with trees!.'
  },
  {
- when: '0.3.0',
- title: 'Cloud integration',
+ title: 'Command Palette',
  description:
- 'Index & backup to Apple Photos, Google Drive, Dropbox, OneDrive & Mega + easy API for the community to add more.'
+ 'Quickly navigate to any file or folder from anywhere in the app, along with AI search!'
+ },
+ {
+ title: 'File converter',
+ description: 'Convert image and video between common formats from the context menu.'
  },
  {
- title: 'Media encoder',
+ title: 'Folder sync',
  description:
- 'Encode video and audio into various formats, use Tags to automate. Built with FFmpeg.'
+ 'Configure replication or bidirectional sync between folders on any device or drive.'
+ },
+ {
+ title: 'Advanced media analysis',
+ description: 'Transcribe audio, identify faces, video scenes and more.'
+ },
+ {
+ when: '0.3 Alpha',
+ subtext: 'Febuary 2024',
+ title: 'Connect devices & sync',
+ description: 'Automatically synchronized libraries across all your devices.'
+ },
+ {
+ title: 'Mobile app testflight',
+ description: 'Access your library on the go, with a mobile app for iOS and Android.'
+ },
+ {
+ title: 'Spacedrive in every language, i18n',
+ description: 'Spacedrive will be available in every language.'
+ },
+ {
+ title: 'Key manager',
+ description:
+ 'View, mount, unmount and hide keys. Mounted keys can be used to instantly encrypt and decrypt any files on your node.'
+ },
+ {
+ title: 'Comments',
+ description:
+ 'Add comments to files and folders, with support for XY coordinates for photos and timestamp for videos.'
+ },
+ {
+ when: '0.4 Alpha',
+ subtext: 'March 2024',
+ title: 'Third-party cloud integrations',
+ description:
+ 'Filesystem integrations with iCloud, Google Drive, Dropbox, OneDrive & Mega + easy API for the community to add more.'
+ },
+ {
+ title: 'Spacedrive Cloud',
+ description:
+ 'Backup and sync from anywhere with a Spacedrive Cloud account. Paid plans for additional storage and cloud features.'
  },
  {
  title: 'Hosted Spaces',
  description: 'Host select Spaces on our cloud to share with friends or publish on the web.'
  },
  {
- when: '0.6.0 Beta',
- subtext: 'Q3 2023',
+ title: 'iOS & Android Release',
+ description: 'Spacedrive will be available on the App Store and Google Play Store.'
+ },
+ {
+ when: '0.5 Beta',
+ subtext: 'April 2024',
  title: 'Extensions',
  description:
  'Build tools on top of Spacedrive, extend functionality and integrate third party services. Extension directory on spacedrive.com/extensions.'
@@ -94,9 +154,14 @@ export const items = [
  description:
  'Effortlessly manage & encrypt sensitive files. Encrypt individual files or create flexible-size vaults.'
  },
+ {
+ title: 'Security Audit',
+ description:
+ 'We will hire a third party security firm to audit the codebase and ensure the highest level of security.'
+ },
  {
  when: 'Release',
- subtext: 'Q4 2023',
+ subtext: 'Q4 2024',
  title: 'Timeline',
  description:
  'View a linear timeline of content, travel to any time and see media represented visually.'

apps/landing/src/app/roadmap/page.tsx

@@ -26,18 +26,23 @@ export default function Page() {
  <Fragment key={i}>
  {/* Using span so i can use the group-last-of-type selector */}
  <span className="group flex max-w-[10rem] items-start justify-end gap-4 first:items-start">
- <div className="flex flex-col items-end">
+ <div
+ className={clsx(
+ 'flex flex-col items-end',
+ i === 0 ? '-translate-y-1/4' : '-translate-y-1/2'
+ )}
+ >
+ {item?.subtext && (
+ <span className="text-sm text-gray-300">{item?.subtext}</span>
+ )}
  <h3
  className={
- `m-0 hidden text-right lg:block ` +
- (i === 0 ? '-translate-y-1/4' : '-translate-y-1/2')
+ `m-0 hidden text-right lg:block `
+ // (i === 0 ? '-translate-y-1/4' : '-translate-y-1/2')
  }
  >
  {item.when}
  </h3>
- {item?.subtext && (
- <span className="text-sm text-gray-300">{item?.subtext}</span>
- )}
  </div>
  <div className="flex h-full w-2 group-first:mt-2 group-first:rounded-t-full group-last-of-type:rounded-b-full lg:items-center">
  <div
@@ -49,7 +54,7 @@ export default function Page() {
  {item?.when !== undefined ? (
  <div
  className={clsx(
- 'absolute z-20 mt-5 h-4 w-4 -translate-x-1/4 -translate-y-1/2 rounded-full border-2 border-gray-200 group-first:mt-0 group-first:self-start lg:mt-0',
+ 'absolute z-20 mt-5 size-4 -translate-x-1/4 -translate-y-1/2 rounded-full border-2 border-gray-200 group-first:mt-0 group-first:self-start lg:mt-0',
  items[i - 1]?.completed || i === 0
  ? 'z-10 bg-primary-500'
  : 'bg-gray-550'

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Video = ({ url }: { url: string }) => {
+ return (
+ <div style={{ maxWidth: '100%' }}>
+ <video
+ loop
+ autoPlay
+ muted
+ style={{ width: '100%', height: 'auto', borderRadius: 10, overflow: 'hidden' }}
+ >
+ <source src={url} type="video/mp4" />
+ Your browser does not support the video tag.
+ </video>
+ </div>
+ );
+};
+
+export default Video;

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

@@ -3,6 +3,7 @@ import NextImage, { ImageProps } from 'next/image';
 import { env } from '~/env';
 
 import Notice from './Notice';
+import Video from './Video';
 
 const Image = (props: ImageProps) => (
  <NextImage
@@ -14,7 +15,8 @@ const Image = (props: ImageProps) => (
 
 export const BlogMDXComponents = {
  img: Image, // we remap 'img' to 'Image'
- Image
+ Image,
+ Video
 } as MDXComponents;
 
-export const DocMDXComponents = { img: Image, Image, Notice } as MDXComponents;
+export const DocMDXComponents = { img: Image, Image, Notice, Video } as MDXComponents;

docs/company/about/integrity.mdx

@@ -0,0 +1,23 @@
+### Spacedrive Integrity and Innovation Pledge
+
+**Date:** February 21, 2024
+
+To preserve the essence and foundational principles of Spacedrive, we establish the following commitments, ensuring that Spacedrive remains an exemplar of innovation, integrity, and user sovereignty in data management:
+
+1. **Immutable Open Source Principle:** Spacedrive will perpetually exist as an open-source project. This core principle is inviolable, ensuring that no future executive, purchaser, or external party can deviate from this path. This commitment is to be integrally included in any terms of transition or sale, safeguarding Spacedrive's open-source nature for eternity.
+
+2. **Local-First and AI Empowerment:** Spacedrive champions a local-first approach, prioritizing the privacy and speed of local computations and storage. Complementing this, Spacedrive commits to leveraging local AI models, enhancing user experience and functionality without compromising privacy or autonomy.
+
+3. **Leadership and Continuity:** In unforeseen circumstances where Jamie Pine cannot continue his role, Joseph Jacks will assume operational leadership or designate a new CEO. This ensures continuity, preserving the vision and operational excellence of Spacedrive.
+
+4. **Mission-Centric Development:** Spacedrive is unwavering in its mission to deliver unparalleled software and hardware solutions for personal data preservation and protection. This guiding principle informs all strategic decisions and innovations.
+
+5. **Absolute Privacy and Ethical Standards:** Under no circumstances will Spacedrive engage in the sale of user data to third parties. Spacedrive upholds the highest standards of data privacy and ethics, ensuring user data remains confidential and secure.
+
+6. **User-Driven Innovation:** Spacedrive is committed to continual improvement, inspired by the needs and feedback of our community. We pledge to engage with users actively, incorporating their insights into our development process to create solutions that genuinely meet their needs.
+
+7. **Transparency and Accountability:** Spacedrive is dedicated to transparency in all its operations and development processes. We commit to clear, honest communication about our practices, changes, and policies, ensuring users are well-informed and empowered.
+
+8. **Community Collaboration and Openness:** Recognizing the strength of the open-source community, Spacedrive is committed to fostering a collaborative ecosystem. We pledge to contribute back to the community, share knowledge, and collaborate with others to advance our shared goals of open, secure, and accessible data management solutions.
+
+These pledges are set forth to ensure that Spacedrive remains a beacon of trust, innovation, and dedication to the sovereignty and security of personal data for all users, now and in the future.