mirror of
https://github.com/anyproto/docs.git
synced 2025-06-08 05:47:05 +09:00
GITBOOK-583: 0.46.0 + Getting Started
This commit is contained in:
Filip Bozicevic
gitbook-bot
parent
2934fe73b6
commit
abd61b0074
446 changed files with 1580 additions and 1588 deletions
35
advanced/feature-list-by-platform/README.md
Normal file
35
advanced/feature-list-by-platform/README.md
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
# Features
|
||||
|
||||
### App Comparison
|
||||
|
||||
For a comparison between Anytype and Notion, check out our article:
|
||||
|
||||
{% embed url="https://blog.anytype.io/notion-alternative/" %}
|
||||
|
||||
Or if you are wondering what are the differences between Evernote and Anytype, check out this other article from our blog:
|
||||
|
||||
{% embed url="https://blog.anytype.io/evernote-alternative/" %}
|
||||
|
||||
### Requested Features
|
||||
|
||||
{% embed url="https://github.com/orgs/anyproto/projects/1/views/1" %}
|
||||
|
||||
* API and plugins
|
||||
* Formulas
|
||||
* Reminders and notifications
|
||||
* AI assistant
|
||||
* Transclusion
|
||||
* Whiteboard / canvas
|
||||
* Web app
|
||||
* Tags as an Object
|
||||
|
||||
#### Implemented
|
||||
|
||||
* Calendar - [0.36.0](https://community.anytype.io/t/anytype-desktop-0-36-0-released/12198)
|
||||
* Webclipper - 0.39.0 ([Chrome](https://chromewebstore.google.com/detail/anytype-web-clipper/jbnammhjiplhpjfncnlejjjejghimdkf?hl=en))
|
||||
* [Collaboration](../../getting-started/collaboration.md) - [0.40.0](https://community.anytype.io/t/anytype-desktop-0-40-0-multiplayer-released/20219)
|
||||
* [Inline Latex](../../getting-started/object-editor/blocks.md#inline-latex) - [0.42.0](https://community.anytype.io/t/anytype-desktop-0-42-0-released/22993#p-83725-inline-latex-scientist-5)
|
||||
* [#simple-formulas-calculations](other-features.md#simple-formulas-calculations "mention") - [0.44.0](https://community.anytype.io/t/anytype-desktop-0-44-0-released/25865)
|
||||
* [Dates](dates.md) as an Object - [0.44.0](https://community.anytype.io/t/anytype-desktop-0-44-0-released/25865)
|
||||
* RTL - [0.45.0](https://community.anytype.io/t/anytype-desktop-0-45-0-released/26702)
|
||||
* [Web Publishing](../../web-publish.md) - [0.45.0](https://community.anytype.io/t/anytype-desktop-0-45-0-released/26702)
|
||||
197
advanced/feature-list-by-platform/custom-css.md
Normal file
197
advanced/feature-list-by-platform/custom-css.md
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
# Custom CSS
|
||||
|
||||
Original shared by [LavaC](https://community.anytype.io/u/LavaC) on our community forum:
|
||||
|
||||
{% embed url="https://community.anytype.io/t/tutorial-of-custom-css/14234" %}
|
||||
|
||||
For assistance with this CSS guide or CSS in general, please comment in the original topic linked above.
|
||||
|
||||
### Where <a href="#where-1" id="where-1"></a>
|
||||
|
||||
To enable the Custom CSS style sheet, go to `Menu > File > Apply Custom CSS`.
|
||||
|
||||
<figure><img src="../../.gitbook/assets/image (5) (1).png" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
To edit the custom CSS file, go to `Menu > File > Open > Custom CSS`.
|
||||
|
||||
<figure><img src="../../.gitbook/assets/image (4) (1).png" alt="" width="375"><figcaption></figcaption></figure>
|
||||
|
||||
### How <a href="#how-2" id="how-2"></a>
|
||||
|
||||
In order to take into beginners, many methods in this article are not best practices. If you understand CSS, you can likely skip most of the contents.
|
||||
|
||||
#### Theme color <a href="#theme-color-3" id="theme-color-3"></a>
|
||||
|
||||
When developing software, styles variables are usually set first as a baseline. Anytype is the same. If you want to change to your own style, generally start from here.
|
||||
|
||||
These variables are usually under the `:root` selector, we can see these in Dev tools.
|
||||
|
||||
<figure><img src="https://community-static.anytype.io/optimized/2X/8/8c798a22e6bddd7bd190043a2ec7c226fcf5cf24_2_690x408.png" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
For example, `--color-text-primary` seems to be the color variable for the darkest black text, so we can write it this way in the custom.css file:
|
||||
|
||||
<figure><img src="https://community-static.anytype.io/original/2X/b/bbefbe5a417032384cde12b1e80e4b2f480ded68.png" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
After saving, you can refresh Anytype by pressing `(Command/Ctrl) + r`.
|
||||
|
||||
> Of course, you can also directly modify and view the effects in Dev tools.
|
||||
|
||||
At this point, we can see that the red I just wrote overrode the default value, so my text has all turned red.
|
||||
|
||||
<figure><img src="https://community-static.anytype.io/optimized/2X/0/0e16feda708cfeee241bc7128caa3f802a09c66d_2_690x384.png" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
Below is part of the custom.css I modified referring to [Solarized 18](https://en.wikipedia.org/wiki/Solarized), which is actually like a word filling game, change these variables more to see where they take effect, and then you’ll know what to modify next.
|
||||
|
||||
<figure><img src="https://community-static.anytype.io/optimized/2X/0/0a67ca485d41ba2d1e72dd5b30b5cae7f489f82e_2_690x394.jpeg" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-text-primary: #002b36;
|
||||
--color-text-secondary: #586e75;
|
||||
--color-text-tertiary: #839496;
|
||||
--color-text-inversion: #eee8d5;
|
||||
--color-shape-primary: #586e75;
|
||||
--color-shape-secondary: #eee8d5;
|
||||
--color-shape-tertiary: #eee8d5;
|
||||
--color-shape-highlight-medium: rgba(79, 79, 79, 0.08);
|
||||
--color-shape-highlight-light: rgba(79, 79, 79, 0.04);
|
||||
--color-control-accent: #252525;
|
||||
--color-control-active: #b6b6b6;
|
||||
--color-control-inactive: #dcdcdc;
|
||||
--color-control-bg: #fff;
|
||||
--color-bg-primary: #fdf6e3;
|
||||
--color-bg-loader: rgba(255,255,255,0.7);
|
||||
--color-system-accent-100: #ffb522;
|
||||
--color-system-accent-50: #ffd15b;
|
||||
--color-system-accent-25: #ffee94;
|
||||
--color-system-selection: rgba(24, 163, 241, 0.15);
|
||||
--color-system-drop-zone: rgba(255, 187, 44, 0.25);
|
||||
--color-yellow: #ecd91b;
|
||||
--color-orange: #ffb522;
|
||||
--color-red: #f55522;
|
||||
--color-pink: #e51ca0;
|
||||
--color-purple: #ab50cc;
|
||||
--color-blue: #3e58eb;
|
||||
--color-ice: #2aa7ee;
|
||||
--color-teal: #0fc8ba;
|
||||
--color-lime: #5dd400;
|
||||
--color-green: #66B395;
|
||||
}
|
||||
```
|
||||
|
||||
#### Fonts <a href="#fonts-4" id="fonts-4"></a>
|
||||
|
||||
The attribute related to fonts in CSS is called [font-family 3](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family). In order to ensure that all text applies the same font, we generally put the styles on the `body` tag.
|
||||
|
||||
```css
|
||||
body {
|
||||
font-family: "霞鹜文楷", "jetBrainsMono";
|
||||
}
|
||||
```
|
||||
|
||||
Of course, the premise for it to take effect is that you have this font on your computer, if not, you can install this font on your computer or choose to import the font online.
|
||||
|
||||
{% hint style="info" %}
|
||||
|
||||
{% endhint %}
|
||||
|
||||
<details>
|
||||
|
||||
<summary>Import font online</summary>
|
||||
|
||||
[<img src="https://community-static.anytype.io/optimized/2X/d/d1348ecf28fafeb4c079d5cd9ba343b30ee6f9d2_2_690x494.png" alt="image" data-size="original">](https://community-static.anytype.io/original/2X/d/d1348ecf28fafeb4c079d5cd9ba343b30ee6f9d2.png)\
|
||||
[](https://community-static.anytype.io/original/2X/a/aaf23f71f95b30839021c2489a9153cc46f2b8be.png)\
|
||||
[](https://community-static.anytype.io/original/2X/d/d29da78fce6ac4d052c0b030fd322fab4fef2a1a.png)\
|
||||
[](https://community-static.anytype.io/original/2X/8/87c8c15932c29ee8bd91d58928d2958209db39e3.png)\
|
||||
[](https://community-static.anytype.io/original/2X/6/690391b23293397bb0844789dee9d500300a3028.png)
|
||||
|
||||
</details>
|
||||
|
||||
#### Dark Mode <a href="#dark-mode-5" id="dark-mode-5"></a>
|
||||
|
||||
The styles in dark mode need to be wrapped within the `html.themeDark`.
|
||||
|
||||
```css
|
||||
/* Default applies to light mode */
|
||||
.blocks {
|
||||
.block.blockText.textCallout>.wrapContent{
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
html.themeDark {
|
||||
/* Applies to Dark mode */
|
||||
--color-text-primary: red;
|
||||
.blocks {
|
||||
.block.blockText.textCallout>.wrapContent{
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
#### Other elements <a href="#other-elements-6" id="other-elements-6"></a>
|
||||
|
||||
If you want to modify a particular element, you can use the Dev tools function in the upper left corner, and then select the element you want to modify, at which time you can see the styles related to it in the **Styles** column.
|
||||
|
||||
<figure><img src="https://community-static.anytype.io/optimized/2X/3/3d111c1232f10345c8584f5a2cf15ec36cba8864_2_690x460.png" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
You can try directly modifying the values inside to see what effects it would produce.
|
||||
|
||||
<figure><img src="https://community-static.anytype.io/optimized/2X/6/6ec5d48153fd5abfd34274a2c9cfb736de865a14_2_690x283.png" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
If you think the effects are not bad, you can copy all this content to your custom.css stylesheet to save.
|
||||
|
||||
<figure><img src="https://community-static.anytype.io/original/2X/8/8c83f1c7406a1a651cac26da10c6429bd59f2dcb.png" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
#### Change Icons <a href="#change-icons-7" id="change-icons-7"></a>
|
||||
|
||||
The icons in Anytype are implemented using SVG.
|
||||
|
||||
<details>
|
||||
|
||||
<summary>For example the relation icons</summary>
|
||||
|
||||
[<img src="https://community-static.anytype.io/optimized/2X/6/6d596177b0b332db51cd793630c415891538f8f7_2_672x500.png" alt="image" data-size="original">](https://community-static.anytype.io/original/2X/6/6d596177b0b332db51cd793630c415891538f8f7.png)
|
||||
|
||||
The text starting with `data:image/svg...` is the Base64 data converted from SVG.\
|
||||
You can decrypt this data on a dedicated [website 1](https://base64.guru/converter/decode/image/svg) to get the SVG image.
|
||||
|
||||
</details>
|
||||
|
||||
If you want to customize your own icon, you can convert SVG to Base64 format, which can be achieved on a dedicated [website](https://base64.guru/converter/encode/image/svg).
|
||||
|
||||
As for the source of SVG icons, I recommend using this [website 4](https://pictogrammers.com/libraries/).
|
||||
|
||||
> It is best not to choose SVG that is too complicated, otherwise the resulting Base64 text will be too long.
|
||||
|
||||
After obtaining the corresponding Base64 text and replacing it, we have successfully replaced it.
|
||||
|
||||
```css
|
||||
.header .icon.relation {
|
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvb......);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
**If you think the original icon is very good and just want to change the color, there is also a way to achieve it, but it will be a bit complicated.**
|
||||
|
||||
```css
|
||||
.header .icon.relation {
|
||||
// The content of the url in the next line is the content of the `background-image` attribute of this icon.
|
||||
mask-image: url(data:image/svg+xml;base64,.......);
|
||||
mask-repeat: no-repeat;
|
||||
background: red; // the color you want
|
||||
}
|
||||
```
|
||||
|
||||
If you have used PS, you should be able to guess that this is a similar mask function, but unfortunately the final result is not very smooth.\
|
||||
|
||||
|
||||
<figure><img src="https://community-static.anytype.io/original/2X/7/72dbdcf71ef643f5873aa7ea1ea814bf282dfec5.png" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
### Examples
|
||||
|
||||
{% embed url="https://community.anytype.io/t/anytype-mist-light-dark-a-brand-new-anytype-theme/16329" %}
|
||||
9
advanced/feature-list-by-platform/dates.md
Normal file
9
advanced/feature-list-by-platform/dates.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
# Dates
|
||||
|
||||
You can open any date as a separate object and view the entire context related to that date.
|
||||
|
||||
<figure><img src="../../.gitbook/assets/image (3) (1) (1).png" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
This includes [mentions (@date)](../../getting-started/object-editor/linking-objects.md#date-mentions), automatically created dates and custom date properties.
|
||||
|
||||
Date is also accessible from properties, layouts, graph, calendar view and more.
|
||||
25
advanced/feature-list-by-platform/graph.md
Normal file
25
advanced/feature-list-by-platform/graph.md
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
description: Finally a dive into your graph of objects.
|
||||
---
|
||||
|
||||
# Graph
|
||||
|
||||
{% hint style="warning" %}
|
||||
Available on desktop only.
|
||||
{% endhint %}
|
||||
|
||||
From anywhere in the app, you'll see the graph icon at the top and next to your sidebar:
|
||||
|
||||
<figure><img src="../../.gitbook/assets/image (105).png" alt="" width="375"><figcaption></figcaption></figure>
|
||||
|
||||
In the Graph you can see which Objects are connected together, and the direction everything flows.
|
||||
|
||||
<figure><img src="../../.gitbook/assets/image (108).png" alt="" width="563"><figcaption></figcaption></figure>
|
||||
|
||||
On the top right of the screen in your Graph, you can **search** and optimize some settings. 
|
||||
|
||||
Toggle appearances for title, arrows, and icons. 
|
||||
|
||||
Optimize viewing links, Properties, and unlinked objects. **If you are missing some objects, check to show unlinked objects.**
|
||||
|
||||
<figure><img src="../../.gitbook/assets/image (84) (1).png" alt="" width="383"><figcaption></figcaption></figure>
|
||||
50
advanced/feature-list-by-platform/other-features.md
Normal file
50
advanced/feature-list-by-platform/other-features.md
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
# Other Features
|
||||
|
||||
{% hint style="warning" %}
|
||||
All of these feature are available on desktop only.
|
||||
{% endhint %}
|
||||
|
||||
### Custom Storage Location
|
||||
|
||||
When creating a Vault, it’s now possible to select the storage location on your hard drive. If your Vault has already been created, you can also change the location and retrieve the data from the network. To do so, first logout, then tap the settings wheel on the black login screen.
|
||||
|
||||
<figure><img src="../../.gitbook/assets/Custome Storage Location.gif" alt="" width="563"><figcaption></figcaption></figure>
|
||||
|
||||
{% hint style="danger" %}
|
||||
Please be cautious when using local-only mode, as your data can only be transferred to a second device via peer-to-peer (P2P) connection.
|
||||
{% endhint %}
|
||||
|
||||
#### External drives and cloud providers
|
||||
|
||||
To store your data on an external drive, you just need to mount the drive first, and then follow the steps from [#custom-storage-location](other-features.md#custom-storage-location "mention").
|
||||
|
||||
We don't recommend using cloud providers like Google Drive or iCloud since you might end up with sync conflicts / issues.
|
||||
|
||||
### Inline Latex
|
||||
|
||||
You can easily add mathematical notation right into your text by wrapping your formulas with `$` symbols, making it possible to include complex equations and formulas!
|
||||
|
||||
<figure><img src="../../.gitbook/assets/image (92).png" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
### Simple Formulas 
|
||||
|
||||
You can count objects in the Grid view and perform simple math and aggregation functions with all types of properties.
|
||||
|
||||
<figure><img src="../../.gitbook/assets/image (2) (1) (1) (1).png" alt="" width="563"><figcaption></figcaption></figure>
|
||||
|
||||
### Embed Blocks
|
||||
|
||||
<figure><img src="../../.gitbook/assets/image (12).png" alt="" width="563"><figcaption></figcaption></figure>
|
||||
|
||||
Simply type /embed in the editor to pull up a menu of currently supported embeds.
|
||||
|
||||
Some examples include: Mermaid diagrams, Youtube videos, Miro boards, Google Maps, and several more.
|
||||
|
||||
Some file types can also be embedded: audio, video, image and pdf.
|
||||
|
||||
### Inline Queries / Collections
|
||||
|
||||
<figure><img src="../../.gitbook/assets/image (107).png" alt="" width="563"><figcaption></figcaption></figure>
|
||||
|
||||
We’ve added a new block type - inline query. You can create an inline query using command: `/inline`.\
|
||||
Once created, select an existing query as a source, or create a new one. Any changes you make to the inline query icon, or name will be synced with the source set. Meanwhile, views will not synced, but copied, which means you can tweak views to your current needs without worrying that your source query will be impacted.
|
||||
29
advanced/feature-list-by-platform/raycast-extension-macos.md
Normal file
29
advanced/feature-list-by-platform/raycast-extension-macos.md
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
# Raycast Extension (macOS)
|
||||
|
||||
Our long-awaited API is beginning to take shape! The first step is Raycast integration, allowing you to create, read, and delete Spaces, Objects, and Types, as well as search across them, all from Raycast on macOS.
|
||||
|
||||
While this initial version focuses on a basic set of features, we’re laying the groundwork for an open API that will eventually support bulk import and export, NoCode tools, and more integrations. We’re excited to see what you’ll build!
|
||||
|
||||
[Install the Raycast Extension here](https://www.raycast.com/any/anytype)
|
||||
|
||||
<figure><img src="../../.gitbook/assets/raycast_2x.png" alt=""><figcaption></figcaption></figure>
|
||||
|
||||
### Updates
|
||||
|
||||
We've introduced several enhancements based on your requests and feedback, plus Anytype for Raycast is now an AI Extension – search through spaces and objects using natural language or create new ones just by instructing <kbd>@anytype</kbd>.
|
||||
|
||||
* Improved Pinning & Navigation: Pin objects, types, members and spaces for quicker access. Objects of a certain Type now appear below their templates for better organization.
|
||||
* Better Collection Management: Create objects directly within collections and browse collection items with ease.
|
||||
* Customization & Visibility: Choose <kbd>Open Object in Anytype</kbd> as the default action, show custom properties in the Detail sidebar, toggle metadata in object details and apply templates when creating new objects.
|
||||
|
||||
<figure><img src="../../.gitbook/assets/Screenshot 2025-03-17 at 11.43.00 AM.png" alt="" width="563"><figcaption></figcaption></figure>
|
||||
|
||||
### Privacy
|
||||
|
||||
Our API runs locally on your machine, works without internet connection and requires authentication for a client (eg. raycast extension) to retrieve & access data.
|
||||
|
||||
To accomplish this, Raycast initially pairs with the app through the 4 digit pop-up. This notifies you about giving the extension limited access to your account.
|
||||
|
||||
The API key is stored in encrypted local storage of the extension and will be used to fetch data from the app (to display spaces, objects etc.).
|
||||
|
||||
Therefore, no other applications than the authorized ones can access your data through the API.
|
||||
Loading…
Add table
Add a link
Reference in a new issue