Skip to content

Commit 52897c1

Browse files
antonreshetovantonreshetov
authored
docs: move website from separate repo into docs/website (#716)
- Migrate VitePress site from masscode.io repo - Remove snippets section (content and nav) - Replace sass with native CSS nesting - Remove element-plus, codemirror dependencies - Add generate-assets script to build download links from package.json version - Add GitHub Actions workflow for deploy via rsync - Add docs:dev, docs:build, docs:preview scripts
1 parent 7ab5634 commit 52897c1

47 files changed

Lines changed: 3619 additions & 0 deletions

Some content is hidden

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

‎.github/workflows/deploy-docs.yml‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
name: Deploy Docs
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
paths:
8+
- 'docs/website/**'
9+
workflow_dispatch:
10+
11+
jobs:
12+
deploy:
13+
name: Build & Deploy
14+
runs-on: ubuntu-latest
15+
16+
steps:
17+
- name: Checkout code
18+
uses: actions/checkout@v4
19+
20+
- name: Setup pnpm
21+
uses: pnpm/action-setup@v4
22+
with:
23+
version: latest
24+
25+
- name: Setup Node.js
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version: 20.16.0
29+
cache: pnpm
30+
cache-dependency-path: docs/website/pnpm-lock.yaml
31+
32+
- name: Install dependencies
33+
run: pnpm --dir docs/website install
34+
35+
- name: Build docs
36+
run: pnpm docs:build
37+
env:
38+
VITE_GA: ${{ secrets.VITE_GA }}
39+
40+
- name: Deploy to server
41+
uses: burnett01/rsync-deployments@7.0.2
42+
with:
43+
switches: -rlptzv --delete
44+
path: docs/website/.vitepress/dist/
45+
remote_path: /var/www/masscode.io/public/
46+
remote_host: ${{ secrets.DEPLOY_HOST }}
47+
remote_user: ${{ secrets.DEPLOY_USER }}
48+
remote_key: ${{ secrets.DEPLOY_SSH_KEY }}

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,8 @@ components.d.ts
99
auto-imports.d.ts
1010
.github/*-instructions.md
1111
.env
12+
.env.*
1213
docs/superpowers
14+
docs/website/.vitepress/cache
15+
docs/website/.vitepress/dist
16+

‎docs/website/.vitepress/_data/assets.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"version": "4.7.1",
3+
"mac": "https://github.com/massCodeIO/massCode/releases/download/v4.7.1/massCode-4.7.1.dmg",
4+
"macM1": "https://github.com/massCodeIO/massCode/releases/download/v4.7.1/massCode-4.7.1-arm64.dmg",
5+
"win": "https://github.com/massCodeIO/massCode/releases/download/v4.7.1/massCode-4.7.1-x64.exe",
6+
"winPortable": "https://github.com/massCodeIO/massCode/releases/download/v4.7.1/massCode-4.7.1-x64-portable.exe",
7+
"linux": "https://github.com/massCodeIO/massCode/releases/download/v4.7.1/massCode-4.7.1.AppImage"
8+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script setup lang="ts">
2+
import TheFeatures from './features/TheFeatures.vue'
3+
import SponsorsGroup from './sponsors/SponsorsGroup.vue'
4+
</script>
5+
6+
<template>
7+
<div class="home">
8+
<section id="features">
9+
<TheFeatures />
10+
</section>
11+
<section id="sponsors">
12+
<SponsorsGroup
13+
title="Special"
14+
tier="special"
15+
/>
16+
</section>
17+
</div>
18+
</template>
19+
20+
<style scoped>
21+
section {
22+
max-width: 1152px;
23+
margin: 0 auto;
24+
25+
+ section {
26+
margin-top: 24px;
27+
}
28+
}
29+
</style>

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup lang="ts">
2+
interface Props {
3+
title: string
4+
}
5+
6+
defineProps<Props>()
7+
</script>
8+
9+
<template>
10+
<div class="features-item">
11+
<div class="title">
12+
{{ title }}
13+
</div>
14+
<div class="body">
15+
<slot />
16+
</div>
17+
</div>
18+
</template>
19+
20+
<style scoped>
21+
.features-item {
22+
background-color: var(--vp-c-bg-soft);
23+
border-radius: 12px;
24+
padding: 24px;
25+
26+
.title {
27+
line-height: 24px;
28+
font-size: 16px;
29+
font-weight: 600;
30+
}
31+
32+
.body {
33+
padding-top: 8px;
34+
line-height: 24px;
35+
font-size: 14px;
36+
font-weight: 500;
37+
color: var(--vp-c-text-2);
38+
}
39+
}
40+
</style>

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

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<script setup lang="ts">
2+
import FeaturesItem from './FeaturesItem.vue'
3+
</script>
4+
5+
<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
14+
<AppLink href="https://github.com/codemirror/codemirror5">
15+
CodeMirror
16+
</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>
51+
</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.
55+
</FeaturesItem>
56+
<FeaturesItem title="Mindmap">
57+
Generate mind maps from Markdown. Fast, intuitive, and ideal for
58+
structuring and visualizing ideas.
59+
</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.
85+
</FeaturesItem>
86+
<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>
103+
</FeaturesItem>
104+
<FeaturesItem title="Beautiful Screenshots">
105+
Export snippets as polished images with customizable themes and
106+
backgrounds.
107+
</FeaturesItem>
108+
<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.
112+
</FeaturesItem>
113+
</div>
114+
</template>
115+
116+
<style scoped>
117+
.features {
118+
padding: 24px 0;
119+
display: grid;
120+
grid-template-columns: repeat(3, 1fr);
121+
gap: 24px;
122+
}
123+
</style>

‎docs/website/.vitepress/components/global/AppLink.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
4+
interface Props {
5+
href: string
6+
}
7+
8+
const props = defineProps<Props>()
9+
10+
const isExternal = computed(() => props.href && /^[a-z]+:/.test(props.href))
11+
12+
const component = computed(() => {
13+
if (props.tag)
14+
return props.tag
15+
16+
return props.href ? 'a' : 'button'
17+
})
18+
</script>
19+
20+
<template>
21+
<span class="app-link">
22+
<component
23+
:is="component"
24+
class="app-link"
25+
:href="href"
26+
:target="isExternal ? '_blank' : null"
27+
:rel="isExternal ? 'noopener noreferrer' : null"
28+
>
29+
<slot />
30+
<template v-if="isExternal">
31+
<svg
32+
xmlns="http://www.w3.org/2000/svg"
33+
aria-hidden="true"
34+
focusable="false"
35+
viewBox="0 0 24 24"
36+
class="icon"
37+
data-v-e3f91ec3=""
38+
>
39+
<path
40+
d="M0 0h24v24H0V0z"
41+
fill="none"
42+
/>
43+
<path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" />
44+
</svg>
45+
</template>
46+
</component>
47+
</span>
48+
</template>
49+
50+
<style>
51+
.app-link {
52+
display: inline-flex;
53+
54+
a {
55+
color: var(--vp-c-brand);
56+
text-decoration: none;
57+
58+
&:hover {
59+
color: var(--vp-button-brand-hover-bg);
60+
}
61+
}
62+
63+
.icon {
64+
width: 12px;
65+
fill: var(--vp-c-gray-light-2);
66+
}
67+
}
68+
69+
.vp-doc.custom-block a {
70+
color: inherit;
71+
}
72+
</style>

‎docs/website/.vitepress/components/global/AppVersion.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
interface Props {
3+
text: string
4+
}
5+
6+
defineProps<Props>()
7+
</script>
8+
9+
<template>
10+
<div class="app-version">
11+
{{ text }}
12+
</div>
13+
</template>
14+
15+
<style>
16+
.app-version {
17+
display: inline-flex;
18+
padding: 0 6px;
19+
background: rgb(236, 236, 30);
20+
font-size: 12px;
21+
font-family: var(--font-code);
22+
border-radius: 3px;
23+
}
24+
25+
html.dark {
26+
.app-version {
27+
background: rgb(180, 180, 24);
28+
color: black;
29+
}
30+
}
31+
</style>

0 commit comments

Comments
 (0)