Skip to content

Commit e4366b0

Browse files
antonreshetovantonreshetov
authored
docs: redesign website documentation for v5 (#717)
* docs: restructure documentation by spaces, add Notes and update Math - Reorganize sidebar by spaces: General, Code, Notes, Math, Tools - Add Notes Space documentation (Obsidian-like editor) - Extend Math Notebook docs: currencies, timezones, finance, cooking, video/timecode, workdays, rounding, fractions, conditions, and more - Update storage.md: remove SQLite as engine, keep migration only - Update sync.md: simplify to markdown vault only - Update devtools.md: add Generators category - Update home page: reflect spaces architecture, remove snippet collection - Remove markdown.md from Code space (moved to Notes) - Replace all tables with code blocks in math docs for consistency - Add keyboard shortcuts across all space docs - Add align-arrows.mjs utility script * docs: improve website copy and split Notes into separate pages - Rewrite meta descriptions to reflect full product scope - Fix grammar and copy across Code documentation - Split Notes into separate pages with sidebar nav - Add notes mentions to Storage and Sync pages - Clean up Math docs, simplify Tools intro - Fix donate page typo, grammar, tone and CTAs - Add trust line to download page * feat: update preview image * docs: improve Notes documentation formatting and structure * docs: rewrite documentation tone and structure * docs: improve homepage features copy * docs: improve homepage features layout * docs: add Mermaid notes documentation * docs: expand JSON visualizer documentation * docs: update donate label position * feat: new logo
1 parent c7b647b commit e4366b0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1251
-795
lines changed

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,20 @@ import SponsorsGroup from './sponsors/SponsorsGroup.vue'
1919

2020
<style scoped>
2121
section {
22+
box-sizing: border-box;
23+
width: 100%;
2224
max-width: 1152px;
2325
margin: 0 auto;
26+
padding-inline: 24px;
2427
2528
+ section {
2629
margin-top: 24px;
2730
}
2831
}
32+
33+
@media (max-width: 767px) {
34+
section {
35+
padding-inline: 16px;
36+
}
37+
}
2938
</style>

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ defineProps<Props>()
2121
.features-item {
2222
background-color: var(--vp-c-bg-soft);
2323
border-radius: 12px;
24-
padding: 24px;
24+
padding: 20px;
2525
2626
.title {
2727
line-height: 24px;
@@ -37,4 +37,10 @@ defineProps<Props>()
3737
color: var(--vp-c-text-2);
3838
}
3939
}
40+
41+
@media (min-width: 768px) {
42+
.features-item {
43+
padding: 24px;
44+
}
45+
}
4046
</style>

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

Lines changed: 76 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -3,121 +3,98 @@ import FeaturesItem from './FeaturesItem.vue'
33
</script>
44

55
<template>
6-
<div class="features">
7-
<FeaturesItem title="Organization">
8-
Organize your snippets with multi-level folders and tags. Each snippet can
9-
contain multiple fragments (tabs), giving you fine-grained control over
10-
structure and grouping.
11-
</FeaturesItem>
12-
<FeaturesItem title="Editor">
13-
Built on
6+
<div class="spaces">
7+
<FeaturesItem title="Code Snippets">
8+
Build a reusable code library across projects and languages. Organize
9+
snippets with folders, tags, and fragments, then edit them with
1410
<AppLink href="https://github.com/codemirror/codemirror5">
1511
CodeMirror
1612
</AppLink>
17-
with <code>.tmLanguage</code> grammars for syntax highlighting.
18-
<ul>
19-
<li>
20-
Supports over
21-
<AppLink
22-
href="https://github.com/github/linguist/blob/master/vendor/README.md"
23-
>
24-
600 grammars
25-
</AppLink>, with 160+ available out of the box.
26-
</li>
27-
<li>
28-
Integrated
29-
<AppLink href="https://prettier.io">
30-
Prettier
31-
</AppLink> for clean,
32-
consistent code formatting.
33-
</li>
34-
</ul>
35-
</FeaturesItem>
36-
<FeaturesItem title="Real-time HTML & CSS Preview">
37-
Write and instantly preview HTML and CSS snippets. Perfect for
38-
prototyping, testing ideas, or quick visual checks.
39-
</FeaturesItem>
40-
<FeaturesItem title="Markdown">
41-
Full Markdown support with syntax highlighting, tables, lists, and more.
42-
<ul>
43-
<li>
44-
Integrated
45-
<AppLink href="https://mermaid-js.github.io/mermaid/#">
46-
Mermaid
47-
</AppLink>
48-
for dynamic diagrams and charts.
49-
</li>
50-
</ul>
13+
, format them with
14+
<AppLink href="https://prettier.io">
15+
Prettier
16+
</AppLink>
17+
, preview HTML & CSS in real time, inspect JSON visually, and export
18+
polished screenshots when you need to share code.
5119
</FeaturesItem>
52-
<FeaturesItem title="Presentation Mode">
53-
Turn a sequence of snippets into a presentation. Useful for classrooms,
54-
team meetings, conference talks, or simply walking through your own notes.
20+
<FeaturesItem title="Notes">
21+
Keep technical notes, docs, and drafts next to your snippets. Write in
22+
Markdown with live preview, folders, tags, Mermaid diagrams, mindmaps
23+
generated from headings, and fullscreen presentation mode for sharing your
24+
work.
5525
</FeaturesItem>
56-
<FeaturesItem title="Mindmap">
57-
Generate mind maps from Markdown. Fast, intuitive, and ideal for
58-
structuring and visualizing ideas.
26+
<FeaturesItem title="Math Notebook">
27+
Do the quick calculations that usually break your flow. Natural-language
28+
math handles inputs like <code>time in Tokyo</code>,
29+
<code>density of honey</code>, and
30+
<code>$500 invested $1,500 returned</code> for currencies, time zones,
31+
unit conversion, finance, and date math.
5932
</FeaturesItem>
60-
<FeaturesItem
61-
title="Developer Tools"
62-
style="grid-column: 1 / 3"
63-
>
64-
Handy built-in utilities for everyday dev tasks:
65-
<ul>
66-
<li>
67-
<strong>Text Tools</strong>: Case Converter, Slug Generator, URL
68-
Parser
69-
</li>
70-
<li>
71-
<strong>Crypto & Security</strong>: Hash/HMAC, Password Generator,
72-
UUID
73-
</li>
74-
<li>
75-
<strong>Encoders/Decoders</strong>: URL, Base64, JSON ⇄ TOML/XML/YAML,
76-
Text ⇄ ASCII/Binary/Unicode, Color Converter
77-
</li>
78-
</ul>
79-
</FeaturesItem>
80-
81-
<FeaturesItem title="JSON Visualizer">
82-
Visualize and explore your JSON data with an interactive graph view.
83-
Perfect for quickly inspecting complex responses, APIs, or configuration
84-
files.
33+
<FeaturesItem title="Developer Tools">
34+
Handle the small developer tasks that usually send you to a browser tab.
35+
Convert, encode, hash, and generate data right inside massCode with tools
36+
for JSON, Base64, URLs, colors, passwords, UUIDs, and more.
8537
</FeaturesItem>
38+
</div>
39+
<div class="extras">
8640
<FeaturesItem title="Integrations">
87-
Extend your workflow with:
88-
<ul>
89-
<li>
90-
<AppLink
91-
href="https://marketplace.visualstudio.com/items?itemName=AntonReshetov.masscode-assistant"
92-
>
93-
VS Code Extension
94-
</AppLink>: zen mode snippet search, instant insertion, and save selected code
95-
as snippets.
96-
</li>
97-
<li>
98-
<AppLink href="https://www.raycast.com/antonreshetov/masscode">
99-
Raycast Extension
100-
</AppLink>: quick snippet access directly from Raycast.
101-
</li>
102-
</ul>
41+
Bring your snippet library into the tools you already use.
42+
<AppLink
43+
href="https://marketplace.visualstudio.com/items?itemName=AntonReshetov.masscode-assistant"
44+
>
45+
VS Code Extension
46+
</AppLink>
47+
for searching and inserting snippets, and
48+
<AppLink href="https://www.raycast.com/antonreshetov/masscode">
49+
Raycast Extension
50+
</AppLink>
51+
for quick access from anywhere.
10352
</FeaturesItem>
104-
<FeaturesItem title="Beautiful Screenshots">
105-
Export snippets as polished images with customizable themes and
106-
backgrounds.
53+
<FeaturesItem title="Open & Local">
54+
Keep your data on your machine and in your control. Notes and snippets are
55+
stored as plain Markdown files, so syncing with iCloud, Dropbox, or Git
56+
stays simple and portable.
10757
</FeaturesItem>
10858
<FeaturesItem title="Localization">
109-
massCode is available in Čeština, Deutsch, Ελληνικά, English, Español,
110-
French, 日本語, Português (Brasil), Română, Русский, Türkçe, Українська,
111-
中文 (简体), 中文 (繁體) & 中文 (繁體 香港特別行政區) languages.
59+
Use massCode in the language you are most comfortable with. The app is
60+
available in 15 languages, including English, Deutsch, Español, Français,
61+
Русский, 日本語, and 中文.
11262
</FeaturesItem>
11363
</div>
11464
</template>
11565

11666
<style scoped>
117-
.features {
118-
padding: 24px 0;
67+
.spaces {
11968
display: grid;
120-
grid-template-columns: repeat(3, 1fr);
121-
gap: 24px;
69+
grid-template-columns: 1fr;
70+
gap: 16px;
71+
padding: 24px 0 8px;
72+
}
73+
74+
.extras {
75+
display: grid;
76+
grid-template-columns: 1fr;
77+
gap: 16px;
78+
padding: 8px 0 24px;
79+
}
80+
81+
@media (min-width: 768px) {
82+
.spaces {
83+
grid-template-columns: repeat(2, minmax(0, 1fr));
84+
gap: 24px;
85+
padding: 24px 0 12px;
86+
}
87+
88+
.extras {
89+
grid-template-columns: repeat(2, minmax(0, 1fr));
90+
gap: 24px;
91+
padding: 12px 0 24px;
92+
}
93+
}
94+
95+
@media (min-width: 1024px) {
96+
.extras {
97+
grid-template-columns: repeat(3, minmax(0, 1fr));
98+
}
12299
}
123100
</style>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,4 +150,12 @@ onMounted(async () => {
150150
.dark .sponsors-item:hover img {
151151
filter: none;
152152
}
153+
154+
@media (max-width: 767px) {
155+
.sponsors:not(.sidebar) {
156+
.body {
157+
grid-template-columns: 1fr;
158+
}
159+
}
160+
}
153161
</style>

‎docs/website/.vitepress/config.mts‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { defineConfig } from 'vitepress'
22
import { version } from './_data/assets.json'
33

4-
const description = 'Code snippets manager for developers, developed using web technologies.'
5-
const ogDescription = 'A free and open source code snippets manager for developers'
4+
const description = 'Free, open-source developer workspace with code snippets, markdown notes, math notebook, and built-in dev tools.'
5+
const ogDescription = 'Free, open-source developer workspace: code snippets, notes, math notebook, and 20+ dev tools. All data stored locally.'
66
const ogImage = 'https://masscode.io/og-image.png'
77
const ogTitle = 'massCode'
88
const ogUrl = 'https://masscode.io'
@@ -41,37 +41,49 @@ export default defineConfig({
4141
sidebar: {
4242
'/documentation/': [
4343
{
44-
text: 'Essentials',
44+
text: 'General',
4545
items: [
46-
{ text: 'Layout', link: '/documentation/' },
47-
{ text: 'Library', link: '/documentation/library' },
48-
{ text: 'Folders', link: '/documentation/folders' },
49-
{ text: 'Tags', link: '/documentation/tags' },
50-
{ text: 'Snippets', link: '/documentation/snippets' },
51-
{ text: 'Fragments', link: '/documentation/fragments' },
52-
{ text: 'Description', link: '/documentation/description' },
53-
{ text: 'Search', link: '/documentation/search' },
46+
{ text: 'Overview', link: '/documentation/' },
5447
{ text: 'Storage', link: '/documentation/storage' },
5548
{ text: 'Sync', link: '/documentation/sync' },
5649
{ text: 'Themes', link: '/documentation/themes' },
5750
],
5851
},
5952
{
60-
text: 'Markdown',
53+
text: 'Code',
6154
items: [
62-
{ text: 'Markdown', link: '/documentation/markdown.md' },
55+
{ text: 'Library', link: '/documentation/code/library' },
56+
{ text: 'Folders', link: '/documentation/code/folders' },
57+
{ text: 'Tags', link: '/documentation/code/tags' },
58+
{ text: 'Snippets', link: '/documentation/code/snippets' },
59+
{ text: 'Fragments', link: '/documentation/code/fragments' },
60+
{ text: 'Description', link: '/documentation/code/description' },
61+
{ text: 'Search', link: '/documentation/code/search' },
62+
],
63+
},
64+
{
65+
text: 'Notes',
66+
items: [
67+
{ text: 'Notes', link: '/documentation/notes/' },
68+
{ text: 'Library', link: '/documentation/notes/library' },
69+
{ text: 'Folders', link: '/documentation/notes/folders' },
70+
{ text: 'Tags', link: '/documentation/notes/tags' },
71+
{ text: 'Mermaid', link: '/documentation/notes/mermaid' },
72+
{ text: 'Mindmap', link: '/documentation/notes/mindmap' },
73+
{ text: 'Presentation', link: '/documentation/notes/presentation' },
74+
{ text: 'Search', link: '/documentation/notes/search' },
6375
],
6476
},
6577
{
6678
text: 'Math',
6779
items: [
68-
{ text: 'Math Notebook', link: '/documentation/math-notebook.md' },
80+
{ text: 'Math Notebook', link: '/documentation/math/' },
6981
],
7082
},
7183
{
7284
text: 'Tools',
7385
items: [
74-
{ text: 'Developers Tools', link: '/documentation/devtools.md' },
86+
{ text: 'Developer Tools', link: '/documentation/tools/' },
7587
],
7688
},
7789
],

‎docs/website/documentation/code/description.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Description
2+
3+
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.
4+
5+
Each snippet has a dedicated **"Description"** area. By default, the field stays hidden until the snippet has a description.
6+
7+
## Adding Description
8+
9+
Select **"File"** > **"Add Description"** from the menu bar.

‎docs/website/documentation/code/folders.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Folders
2+
3+
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.
4+
5+
## Adding a Folder
6+
7+
Use one of these methods:
8+
9+
- Select **"File"** > **"New Folder"** from the menu bar.
10+
- Click the **"+"** button next to **"FOLDERS"** in the library.
11+
- Press <kbd>Shift+Cmd+N</kbd> on macOS or <kbd>Shift+Ctrl+N</kbd> on Windows or Linux.
12+
13+
## Moving to Folder
14+
15+
Drag one folder onto another to create a nested folder structure.
16+
17+
## Renaming and Deleting
18+
19+
Right-click the folder and choose **"Rename"** or **"Delete"**.
20+
21+
::: warning
22+
Deleting a folder moves all its snippets and subfolders to **"Inbox"**.
23+
:::
24+
25+
## Set the Default Folder Language
26+
27+
Set a default language when most snippets in a folder use the same syntax.
28+
29+
Right-click the folder and choose **"Default Language"**.
30+
31+
## Setting a Custom Icon
32+
33+
<AppVersion text=">=3.7" />
34+
35+
Custom icons help large libraries stay easier to scan.
36+
37+
Right-click the folder and choose **"Set Custom Icon"**.
38+
39+
::: info
40+
To set the default icon, click the **Reset** button in the icon selection dialog window.
41+
:::

‎docs/website/documentation/code/fragments.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Fragments
2+
3+
Fragments are tabs inside a snippet. Use them when one snippet needs multiple related versions, files, or languages in one place.
4+
5+
## Adding a Fragment
6+
7+
Use one of these methods:
8+
9+
- Select **"File"** > **"New Fragment"** from the menu bar
10+
- Click **"+"** button on the top right corner of the editor.
11+
- Press <kbd>Cmd+T</kbd> on macOS or <kbd>Ctrl+T</kbd> on Windows or Linux.
12+
13+
## Renaming and Deleting
14+
15+
Right-click the fragment tab and choose **"Rename"** or **"Delete"**.
16+
17+
::: warning
18+
Deleting a fragment removes it permanently.
19+
:::

0 commit comments

Comments
 (0)