Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8f07d98

Browse files
Merge branch 'obsidian-comparison' into dev
2 parents e4b21f4 + 205a046 commit 8f07d98

File tree

14 files changed

+345
-31
lines changed

14 files changed

+345
-31
lines changed

‎apps/client/auto-imports.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ declare global {
6666
const useCssVars: typeof import('vue')['useCssVars']
6767
const useDialogPluginComponent: typeof import('quasar')['useDialogPluginComponent']
6868
const useLink: typeof import('vue-router')['useLink']
69-
const useMeta: typeof import('quasar')['useMeta']
69+
const useMeta: typeof import('src/code/utils/use-meta')['useMeta']
7070
const useQuasar: typeof import('quasar')['useQuasar']
7171
const useRoute: typeof import('vue-router')['useRoute']
7272
const useRouter: typeof import('vue-router')['useRouter']

‎apps/client/index.html

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,6 @@
1616
/>
1717

1818
<!-- Primary Meta Tags -->
19-
<meta
20-
name="description"
21-
content="DeepNotes is an open source, end-to-end encrypted infinite canvas tool with deep page nesting and realtime collaboration. Create mind maps, diagrams, kanban boards, and more."
22-
/>
2319
<meta
2420
name="keywords"
2521
content="deepnotes, deep notes, infinite canvas, nested, mind map, note-taking, visual, spatial, end-to-end encrypted, collaborative, realtime collaboration, realtime collaboration, open source"
@@ -44,18 +40,6 @@
4440
property="og:type"
4541
content="website"
4642
/>
47-
<meta
48-
property="og:url"
49-
content="https://deepnotes.app/"
50-
/>
51-
<meta
52-
property="og:title"
53-
content="DeepNotes - Deeply-Nested Infinite Canvases"
54-
/>
55-
<meta
56-
property="og:description"
57-
content="DeepNotes is an open source, end-to-end encrypted infinite canvas tool with deep page nesting and realtime collaboration."
58-
/>
5943
<meta
6044
property="og:image"
6145
content="/meta-image.png"
@@ -66,18 +50,6 @@
6650
property="twitter:card"
6751
content="summary_large_image"
6852
/>
69-
<meta
70-
property="twitter:url"
71-
content="https://deepnotes.app/"
72-
/>
73-
<meta
74-
property="twitter:title"
75-
content="DeepNotes - Deeply-Nested Infinite Canvases"
76-
/>
77-
<meta
78-
property="twitter:description"
79-
content="DeepNotes is an open source, end-to-end encrypted infinite canvas tool with deep page nesting and realtime collaboration."
80-
/>
8153
<meta
8254
property="twitter:image"
8355
content="/meta-image.png"

‎apps/client/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@deepnotes/client",
3-
"description": "DeepNotes",
3+
"description": "DeepNotes is an open source, end-to-end encrypted infinite canvas tool with deep page nesting and realtime collaboration. Create mind maps, diagrams, kanban boards, and more.",
44
"homepage": "https://deepnotes.app",
55
"version": "1.0.22",
66
"author": "Gustavo Toyota <gustavottoyota@gmail.com>",

‎apps/client/quasar.config.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,13 +162,14 @@ module.exports = configure(function (ctx) {
162162
],
163163
'src/code/helpers': ['router', 'route', '$quasar'],
164164

165+
'src/code/utils/use-meta': ['useMeta'],
166+
165167
'src/components/CustomDialog.vue': [['default', 'CustomDialog']],
166168

167169
quasar: [
168170
'useQuasar',
169171
'Notify',
170172
'Cookies',
171-
'useMeta',
172173
'Dialog',
173174
'useDialogPluginComponent',
174175
],

‎apps/client/src/App.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ import { isCtrlDown } from './code/utils/misc';
1111
1212
useMeta(() => ({
1313
title: 'DeepNotes - Deeply-Nested Infinite Canvases',
14+
15+
meta: {
16+
description: {
17+
name: 'description',
18+
content:
19+
'DeepNotes is an open source, end-to-end encrypted infinite canvas tool with deep page nesting and realtime collaboration. Create mind maps, diagrams, kanban boards, and more.',
20+
},
21+
},
1422
}));
1523
1624
onMounted(() => {

‎apps/client/src/code/utils/use-meta.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { isString } from 'lodash';
2+
import { useMeta as _useMeta } from 'quasar';
3+
import type { MetaOptions } from 'quasar/dist/types/meta';
4+
5+
export function useMeta(options: MetaOptions | (() => MetaOptions)) {
6+
const optionsFunc = typeof options === 'function' ? options : () => options;
7+
8+
const route = useRoute();
9+
10+
_useMeta(() => {
11+
const optionsObj = optionsFunc();
12+
13+
optionsObj.meta ??= {};
14+
15+
optionsObj.meta['og:url'] = {
16+
name: 'og:url',
17+
content: `https://deepnotes.app${route.fullPath}`,
18+
};
19+
optionsObj.meta['twitter:url'] = {
20+
name: 'twitter:url',
21+
content: `https://deepnotes.app${route.fullPath}`,
22+
};
23+
24+
if (isString(optionsObj.title)) {
25+
optionsObj.meta['og:title'] = {
26+
name: 'og:title',
27+
content: optionsObj.title,
28+
};
29+
optionsObj.meta['twitter:title'] = {
30+
name: 'twitter:title',
31+
content: optionsObj.title,
32+
};
33+
}
34+
35+
if (isString(optionsObj.meta?.description?.content)) {
36+
optionsObj.meta['og:description'] = {
37+
name: 'og:description',
38+
content: optionsObj.meta.description.content,
39+
};
40+
optionsObj.meta['twitter:description'] = {
41+
name: 'twitter:description',
42+
content: optionsObj.meta.description.content,
43+
};
44+
}
45+
46+
return optionsObj;
47+
});
48+
}
Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
<template>
2+
<q-page style="font-size: 16px; margin-top: 150px; margin-bottom: 150px">
3+
<ResponsiveContainer style="max-width: 1000px">
4+
<h1 style="font-size: 32px; font-weight: bold">
5+
Comparing Obsidian and DeepNotes
6+
</h1>
7+
8+
<Gap style="height: 52px" />
9+
10+
<div style="max-width: 600px">
11+
<p>
12+
<b>Obsidian</b> is a note-taking application first released by Shida
13+
Li and Erica Xu in 2020 that works with Markdown files. It is similar
14+
to DeepNotes, especially after the introduction of Obsidian Canvas in
15+
2022.
16+
</p>
17+
18+
<p>
19+
Both are designed for deep interlinking and nesting of notes. But,
20+
while Obsidian focuses on customizability, DeepNotes is more
21+
opinionated in its approach.
22+
</p>
23+
24+
<p>Here is a detailed comparison of their features:</p>
25+
26+
<Gap style="height: 72px" />
27+
</div>
28+
29+
✅ Win <InlineGap style="width: 4px" /> ✴️ Neutral
30+
<InlineGap style="width: 4px" /> ❌ Loss
31+
32+
<Gap style="height: 12px" />
33+
34+
<table>
35+
<tr>
36+
<th style="width: 200px">Features</th>
37+
<th style="width: 400px">Obsidian</th>
38+
<th style="width: 400px">DeepNotes</th>
39+
</tr>
40+
41+
<tr>
42+
<td style="font-weight: bold">Open source</td>
43+
<td>❌ Obsidian is not open source.</td>
44+
<td>
45+
✅ DeepNotes is fully open source. Its code is available
46+
<a
47+
href="https://github.com/DeepNotesApp/DeepNotes"
48+
target="_blank"
49+
>
50+
here</a
51+
>.
52+
</td>
53+
</tr>
54+
55+
<tr>
56+
<td style="font-weight: bold">Extensibility</td>
57+
<td>✅ Obsidian has support for extensibility through plugins.</td>
58+
<td>❌ DeepNotes doesn't support extensions.</td>
59+
</tr>
60+
61+
<tr>
62+
<td style="font-weight: bold">Canvas flexibility</td>
63+
<td>
64+
❌ Notes that can be colored and linked with arrows, but can't be
65+
nested or collapsed. (With plugins maybe?)
66+
</td>
67+
<td>
68+
✅ DeepNotes offers very flexible notes as a differentiator. Each
69+
note can have a head and a body, and can also be nested, collapsed,
70+
colored and linked with arrows.
71+
</td>
72+
</tr>
73+
74+
<tr>
75+
<td style="font-weight: bold">Page navigation</td>
76+
<td>
77+
✴️ Obsidian allows to navigate through its pages using the file
78+
system, links between pages, or through file search.
79+
</td>
80+
<td>
81+
✴️ One of the differentiators of DeepNotes is its unique page
82+
navigation system, which keeps track of the last path taken to reach
83+
each page. This allows the user to automatically build their page
84+
hierarchy by simply creating and navigating through their pages.
85+
</td>
86+
</tr>
87+
88+
<tr>
89+
<td style="font-weight: bold">
90+
WYSIWYG<br />(What You See Is What You Get)
91+
</td>
92+
<td>
93+
❌ Obsidian Canvas isn't WYSIWYG (With plugins maybe?). What you see
94+
during editing differs from the final visual product. Obsidian
95+
(non-canvas) is WYSIWYG though.
96+
</td>
97+
<td>
98+
✅ DeepNotes is WYSIWYG. What you see during editing is the final
99+
visual product.
100+
</td>
101+
</tr>
102+
103+
<tr>
104+
<td style="font-weight: bold">Offline editing</td>
105+
<td>✅ Obsidian supports note editing while offline.</td>
106+
<td>
107+
❌ DeepNotes currently doesn't support note editing while offline.
108+
This is due to technical challenges regarding data synchronization.
109+
</td>
110+
</tr>
111+
112+
<tr>
113+
<td style="font-weight: bold">Realtime collaboration</td>
114+
<td>
115+
❌ Obsidian doesn't support realtime collaboration. The closest
116+
thing available is file syncing, but you must be careful with
117+
conflicts and data loss. Syncing takes a few seconds to complete.
118+
</td>
119+
<td>
120+
✅ DeepNotes supports true realtime collaboration. Users editing the
121+
same page can see each other's names and what they're doing.
122+
</td>
123+
</tr>
124+
125+
<tr>
126+
<td style="font-weight: bold">Text search</td>
127+
<td>
128+
✅ Obsidian offers high performance text search across all pages,
129+
possible thanks to its offline-first approach.
130+
</td>
131+
<td>
132+
❌ DeepNotes currently only offers text search within the current
133+
page.
134+
</td>
135+
</tr>
136+
137+
<tr>
138+
<td style="font-weight: bold">Pricing</td>
139+
<td>
140+
✴️ Obsidian is free for the base product. It offers two paid
141+
add-ons: Obsidian Sync and Obsidian Publish, each separately costing
142+
8ドル/year or 10ドル/month.
143+
</td>
144+
<td>
145+
✴️ DeepNotes offers 50 personal pages for free. It has a Pro plan,
146+
which costs 3ドル.99/year or 4ドル.99/month, and offers unlimited pages
147+
and collaborative groups.
148+
</td>
149+
</tr>
150+
151+
<tr>
152+
<td style="font-weight: bold">Security</td>
153+
<td>
154+
✅ Obsidian offers end-to-end encryption through Obsidian Sync.
155+
</td>
156+
<td>✅ DeepNotes offers end-to-end encryption by default.</td>
157+
</tr>
158+
159+
<tr>
160+
<td style="font-weight: bold">Publishing</td>
161+
<td>✅ Obsidian supports publishing through Obsidian Publish.</td>
162+
<td>
163+
✅ DeepNotes supports publishing through public groups, which are
164+
included in the Pro plan.
165+
</td>
166+
</tr>
167+
168+
<tr>
169+
<td style="font-weight: bold">Graph view</td>
170+
<td>✅ Obsidian offers a graph view displaying all of its pages.</td>
171+
<td>❌ DeepNotes doesn't offer a graph view.</td>
172+
</tr>
173+
174+
<tr>
175+
<td style="font-weight: bold">Themes</td>
176+
<td>
177+
✅ Obsidian supports light and dark themes by default. It also
178+
supports themes created by the community.
179+
</td>
180+
<td>❌ DeepNotes offers only a dark theme for now.</td>
181+
</tr>
182+
</table>
183+
184+
<Gap style="height: 48px" />
185+
186+
<h2 style="font-size: 28px; font-weight: bold">Conclusion</h2>
187+
188+
<Gap style="height: 16px" />
189+
190+
<div style="max-width: 600px">
191+
<p>
192+
Obsidian and DeepNotes are both great note-taking and personal
193+
knowledge management apps. Each is really good at what it does.
194+
Obsidian is great at managing and linking information utilizing
195+
Markdown files, canvases, and its plugin ecosystem, while DeepNotes
196+
has a canvas-first approach, and innovates with its page navigation
197+
system and extremely flexible notes.
198+
</p>
199+
200+
<p>
201+
Ultimately, the choice between Obsidian and DeepNotes boils down to
202+
personal preference and the specific features that align with your
203+
workflow and note-taking style.
204+
</p>
205+
206+
<Gap style="height: 42px" />
207+
208+
<p>
209+
If you'd like to see it in action, you can
210+
<router-link :to="{ name: 'register' }"
211+
>try DeepNotes for free</router-link
212+
>.
213+
</p>
214+
</div>
215+
</ResponsiveContainer>
216+
</q-page>
217+
</template>
218+
219+
<script setup lang="ts">
220+
const description =
221+
'A detailed comparison of Obsidian and DeepNotes, two note-taking apps with a focus on deep interlinking and nesting of notes.';
222+
223+
useMeta(() => ({
224+
title: 'Comparing Obsidian and DeepNotes',
225+
226+
meta: {
227+
description: { name: 'description', content: description },
228+
},
229+
}));
230+
</script>
231+
232+
<style lang="scss" scoped>
233+
table {
234+
border-collapse: collapse;
235+
236+
width: 100%;
237+
238+
th,
239+
td {
240+
padding: 5px 8px;
241+
border: 1px solid rgba(255, 255, 255, 0.2);
242+
243+
vertical-align: top;
244+
}
245+
}
246+
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /