docs: redesign website documentation for v5

docs/website/.vitepress/components/TheHome.vue

@@ -19,11 +19,20 @@ import SponsorsGroup from './sponsors/SponsorsGroup.vue'
 
 <style scoped>
 section {
+  box-sizing: border-box;
+  width: 100%;
   max-width: 1152px;
   margin: 0 auto;
+  padding-inline: 24px;
 
   + section {
     margin-top: 24px;
   }
 }
+
+@media (max-width: 767px) {
+  section {
+    padding-inline: 16px;
+  }
+}
 </style>

docs/website/.vitepress/components/features/FeaturesItem.vue

@@ -21,7 +21,7 @@ defineProps<Props>()
 .features-item {
   background-color: var(--vp-c-bg-soft);
   border-radius: 12px;
-  padding: 24px;
+  padding: 20px;
 
   .title {
     line-height: 24px;
@@ -37,4 +37,10 @@ defineProps<Props>()
     color: var(--vp-c-text-2);
   }
 }
+
+@media (min-width: 768px) {
+  .features-item {
+    padding: 24px;
+  }
+}
 </style>

docs/website/.vitepress/components/features/TheFeatures.vue

@@ -3,121 +3,98 @@ import FeaturesItem from './FeaturesItem.vue'
 </script>
 
 <template>
-  <div class="features">
-    <FeaturesItem title="Organization">
-      Organize your snippets with multi-level folders and tags. Each snippet can
-      contain multiple fragments (tabs), giving you fine-grained control over
-      structure and grouping.
-    </FeaturesItem>
-    <FeaturesItem title="Editor">
-      Built on
+  <div class="spaces">
+    <FeaturesItem title="Code Snippets">
+      Build a reusable code library across projects and languages. Organize
+      snippets with folders, tags, and fragments, then edit them with
       <AppLink href="https://github.com/codemirror/codemirror5">
         CodeMirror
       </AppLink>
-      with <code>.tmLanguage</code> grammars for syntax highlighting.
-      <ul>
-        <li>
-          Supports over
-          <AppLink
-            href="https://github.com/github/linguist/blob/master/vendor/README.md"
-          >
-            600 grammars
-          </AppLink>, with 160+ available out of the box.
-        </li>
-        <li>
-          Integrated
-          <AppLink href="https://prettier.io">
-            Prettier
-          </AppLink> for clean,
-          consistent code formatting.
-        </li>
-      </ul>
-    </FeaturesItem>
-    <FeaturesItem title="Real-time HTML & CSS Preview">
-      Write and instantly preview HTML and CSS snippets. Perfect for
-      prototyping, testing ideas, or quick visual checks.
-    </FeaturesItem>
-    <FeaturesItem title="Markdown">
-      Full Markdown support with syntax highlighting, tables, lists, and more.
-      <ul>
-        <li>
-          Integrated
-          <AppLink href="https://mermaid-js.github.io/mermaid/#">
-            Mermaid
-          </AppLink>
-          for dynamic diagrams and charts.
-        </li>
-      </ul>
+      , format them with
+      <AppLink href="https://prettier.io">
+        Prettier
+      </AppLink>
+      , preview HTML & CSS in real time, inspect JSON visually, and export
+      polished screenshots when you need to share code.
     </FeaturesItem>
-    <FeaturesItem title="Presentation Mode">
-      Turn a sequence of snippets into a presentation. Useful for classrooms,
-      team meetings, conference talks, or simply walking through your own notes.
+    <FeaturesItem title="Notes">
+      Keep technical notes, docs, and drafts next to your snippets. Write in
+      Markdown with live preview, folders, tags, Mermaid diagrams, mindmaps
+      generated from headings, and fullscreen presentation mode for sharing your
+      work.
     </FeaturesItem>
-    <FeaturesItem title="Mindmap">
-      Generate mind maps from Markdown. Fast, intuitive, and ideal for
-      structuring and visualizing ideas.
+    <FeaturesItem title="Math Notebook">
+      Do the quick calculations that usually break your flow. Natural-language
+      math handles inputs like <code>time in Tokyo</code>,
+      <code>density of honey</code>, and
+      <code>$500 invested $1,500 returned</code> for currencies, time zones,
+      unit conversion, finance, and date math.
     </FeaturesItem>
-    <FeaturesItem
-      title="Developer Tools"
-      style="grid-column: 1 / 3"
-    >
-      Handy built-in utilities for everyday dev tasks:
-      <ul>
-        <li>
-          <strong>Text Tools</strong>: Case Converter, Slug Generator, URL
-          Parser
-        </li>
-        <li>
-          <strong>Crypto & Security</strong>: Hash/HMAC, Password Generator,
-          UUID
-        </li>
-        <li>
-          <strong>Encoders/Decoders</strong>: URL, Base64, JSON ⇄ TOML/XML/YAML,
-          Text ⇄ ASCII/Binary/Unicode, Color Converter
-        </li>
-      </ul>
-    </FeaturesItem>
-
-    <FeaturesItem title="JSON Visualizer">
-      Visualize and explore your JSON data with an interactive graph view.
-      Perfect for quickly inspecting complex responses, APIs, or configuration
-      files.
+    <FeaturesItem title="Developer Tools">
+      Handle the small developer tasks that usually send you to a browser tab.
+      Convert, encode, hash, and generate data right inside massCode with tools
+      for JSON, Base64, URLs, colors, passwords, UUIDs, and more.
     </FeaturesItem>
+  </div>
+  <div class="extras">
     <FeaturesItem title="Integrations">
-      Extend your workflow with:
-      <ul>
-        <li>
-          <AppLink
-            href="https://marketplace.visualstudio.com/items?itemName=AntonReshetov.masscode-assistant"
-          >
-            VS Code Extension
-          </AppLink>: zen mode snippet search, instant insertion, and save selected code
-          as snippets.
-        </li>
-        <li>
-          <AppLink href="https://www.raycast.com/antonreshetov/masscode">
-            Raycast Extension
-          </AppLink>: quick snippet access directly from Raycast.
-        </li>
-      </ul>
+      Bring your snippet library into the tools you already use.
+      <AppLink
+        href="https://marketplace.visualstudio.com/items?itemName=AntonReshetov.masscode-assistant"
+      >
+        VS Code Extension
+      </AppLink>
+      for searching and inserting snippets, and
+      <AppLink href="https://www.raycast.com/antonreshetov/masscode">
+        Raycast Extension
+      </AppLink>
+      for quick access from anywhere.
     </FeaturesItem>
-    <FeaturesItem title="Beautiful Screenshots">
-      Export snippets as polished images with customizable themes and
-      backgrounds.
+    <FeaturesItem title="Open & Local">
+      Keep your data on your machine and in your control. Notes and snippets are
+      stored as plain Markdown files, so syncing with iCloud, Dropbox, or Git
+      stays simple and portable.
     </FeaturesItem>
     <FeaturesItem title="Localization">
-      massCode is available in Čeština, Deutsch, Ελληνικά, English, Español,
-      French, 日本語, Português (Brasil), Română, Русский, Türkçe, Українська,
-      中文 (简体), 中文 (繁體) & 中文 (繁體 香港特別行政區) languages.
+      Use massCode in the language you are most comfortable with. The app is
+      available in 15 languages, including English, Deutsch, Español, Français,
+      Русский, 日本語, and 中文.
     </FeaturesItem>
   </div>
 </template>
 
 <style scoped>
-.features {
-  padding: 24px 0;
+.spaces {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  padding: 24px 0 8px;
+}
+
+.extras {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  padding: 8px 0 24px;
+}
+
+@media (min-width: 768px) {
+  .spaces {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 24px;
+    padding: 24px 0 12px;
+  }
+
+  .extras {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 24px;
+    padding: 12px 0 24px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .extras {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }
 </style>

docs/website/.vitepress/components/sponsors/SponsorsGroup.vue

@@ -150,4 +150,12 @@ onMounted(async () => {
 .dark .sponsors-item:hover img {
   filter: none;
 }
+
+@media (max-width: 767px) {
+  .sponsors:not(.sidebar) {
+    .body {
+      grid-template-columns: 1fr;
+    }
+  }
+}
 </style>

docs/website/.vitepress/config.mts

@@ -1,8 +1,8 @@
 import { defineConfig } from 'vitepress'
 import { version } from './_data/assets.json'
 
-const description = 'Code snippets manager for developers, developed using web technologies.'
-const ogDescription = 'A free and open source code snippets manager for developers'
+const description = 'Free, open-source developer workspace with code snippets, markdown notes, math notebook, and built-in dev tools.'
+const ogDescription = 'Free, open-source developer workspace: code snippets, notes, math notebook, and 20+ dev tools. All data stored locally.'
 const ogImage = 'https://masscode.io/og-image.png'
 const ogTitle = 'massCode'
 const ogUrl = 'https://masscode.io'
@@ -41,37 +41,49 @@ export default defineConfig({
     sidebar: {
       '/documentation/': [
         {
-          text: 'Essentials',
+          text: 'General',
           items: [
-            { text: 'Layout', link: '/documentation/' },
-            { text: 'Library', link: '/documentation/library' },
-            { text: 'Folders', link: '/documentation/folders' },
-            { text: 'Tags', link: '/documentation/tags' },
-            { text: 'Snippets', link: '/documentation/snippets' },
-            { text: 'Fragments', link: '/documentation/fragments' },
-            { text: 'Description', link: '/documentation/description' },
-            { text: 'Search', link: '/documentation/search' },
+            { text: 'Overview', link: '/documentation/' },
             { text: 'Storage', link: '/documentation/storage' },
             { text: 'Sync', link: '/documentation/sync' },
             { text: 'Themes', link: '/documentation/themes' },
           ],
         },
         {
-          text: 'Markdown',
+          text: 'Code',
           items: [
-            { text: 'Markdown', link: '/documentation/markdown.md' },
+            { text: 'Library', link: '/documentation/code/library' },
+            { text: 'Folders', link: '/documentation/code/folders' },
+            { text: 'Tags', link: '/documentation/code/tags' },
+            { text: 'Snippets', link: '/documentation/code/snippets' },
+            { text: 'Fragments', link: '/documentation/code/fragments' },
+            { text: 'Description', link: '/documentation/code/description' },
+            { text: 'Search', link: '/documentation/code/search' },
+          ],
+        },
+        {
+          text: 'Notes',
+          items: [
+            { text: 'Notes', link: '/documentation/notes/' },
+            { text: 'Library', link: '/documentation/notes/library' },
+            { text: 'Folders', link: '/documentation/notes/folders' },
+            { text: 'Tags', link: '/documentation/notes/tags' },
+            { text: 'Mermaid', link: '/documentation/notes/mermaid' },
+            { text: 'Mindmap', link: '/documentation/notes/mindmap' },
+            { text: 'Presentation', link: '/documentation/notes/presentation' },
+            { text: 'Search', link: '/documentation/notes/search' },
           ],
         },
         {
           text: 'Math',
           items: [
-            { text: 'Math Notebook', link: '/documentation/math-notebook.md' },
+            { text: 'Math Notebook', link: '/documentation/math/' },
           ],
         },
         {
           text: 'Tools',
           items: [
-            { text: 'Developers Tools', link: '/documentation/devtools.md' },
+            { text: 'Developer Tools', link: '/documentation/tools/' },
           ],
         },
       ],

docs/website/documentation/code/description.md

@@ -0,0 +1,9 @@
+# Description
+
+Descriptions give extra context when the code alone is not enough. Use them for usage notes, caveats, links, or a short explanation of what the snippet does.
+
+Each snippet has a dedicated **"Description"** area. By default, the field stays hidden until the snippet has a description.
+
+## Adding Description
+
+Select **"File"** > **"Add Description"** from the menu bar.

docs/website/documentation/code/folders.md

@@ -0,0 +1,41 @@
+# Folders
+
+Folders help you organize snippets by project, topic, language, or any structure that fits your workflow. When you select a folder in the sidebar, massCode shows snippets from that folder and all of its subfolders in the second column.
+
+## Adding a Folder
+
+Use one of these methods:
+
+- Select **"File"** > **"New Folder"** from the menu bar.
+- Click the **"+"** button next to **"FOLDERS"** in the library.
+- Press <kbd>Shift+Cmd+N</kbd> on macOS or <kbd>Shift+Ctrl+N</kbd> on Windows or Linux.
+
+## Moving to Folder
+
+Drag one folder onto another to create a nested folder structure.
+
+## Renaming and Deleting
+
+Right-click the folder and choose **"Rename"** or **"Delete"**.
+
+::: warning
+Deleting a folder moves all its snippets and subfolders to **"Inbox"**.
+:::
+
+## Set the Default Folder Language
+
+Set a default language when most snippets in a folder use the same syntax.
+
+Right-click the folder and choose **"Default Language"**.
+
+## Setting a Custom Icon
+
+<AppVersion text=">=3.7" />
+
+Custom icons help large libraries stay easier to scan.
+
+Right-click the folder and choose **"Set Custom Icon"**.
+
+::: info
+To set the default icon, click the **Reset** button in the icon selection dialog window.
+:::

docs/website/documentation/code/fragments.md

@@ -0,0 +1,19 @@
+# Fragments
+
+Fragments are tabs inside a snippet. Use them when one snippet needs multiple related versions, files, or languages in one place.
+
+## Adding a Fragment
+
+Use one of these methods:
+
+- Select **"File"** > **"New Fragment"** from the menu bar
+- Click **"+"** button on the top right corner of the editor.
+- Press <kbd>Cmd+T</kbd> on macOS or <kbd>Ctrl+T</kbd> on Windows or Linux.
+
+## Renaming and Deleting
+
+Right-click the fragment tab and choose **"Rename"** or **"Delete"**.
+
+::: warning
+Deleting a fragment removes it permanently.
+:::