diff --git a/README.md b/README.md index 14e3767..e9c82b1 100644 --- a/README.md +++ b/README.md @@ -1,40 +1,26 @@

- Logo + Nimiq Developer Center Logo -

-Nimiq's Developer Center -

-The Official documentation for the Nimiq ecosystem.
-Build and learn anything with Nimiq. - -🚧 Work in progress 🚧 +Guides, resources and tips on how to create with Nimiq.
Start building the future now!

- Nimiq 2.0 - Nimiq UI + Nimiq Albatross + Nimiq Albatross Web Client

-

-Do you have any question? Ask us! -

-

- Nimiq website | Discord | Telegram -

+### Do you have any question? Ask us! + +[Discord](https://discord.gg/cMHemg8) | [Telegram](https://t.me/joinchat/AAAAAEJW-ozFwo7Er9jpHw) | [Issue](/issues/new) ## Contributing Feel free to contribute if you want to improve any part of the docs. PRs all welcome! -### Do you have any question? - -- Join our [Telegram](https://t.me/joinchat/AAAAAEJW-ozFwo7Er9jpHw) or [Discord](https://discord.gg/cMHemg8) -- Open an [issue](/issues/new) - ## Set up ```bash @@ -43,121 +29,3 @@ cd nimiq-developer-center pnpm install # Install pnpm first if you don't have it -> https://pnpm.io/installation pnpm dev # Start dev server ``` - -## Writing Docs - -After starting the server, you can start modifying the docs. The docs are written in Markdown, Frontmatter and Vue Components. - -### Sidebar - -The sidebar is defined in the [config.ts](/.vitepress/config.ts) file. You can see the options [here](https://vitepress.vuejs.org/guide/basic-config.html#config-file). - -To reduce the amount of code we have to use to display the sidebar options, we have created some functions in the [sidebar.ts](/.vitepress/theme/utils/sidebar.ts) file. - -#### Sidebar Header Section - -It will create an element with the text and icon passed as parameters. - -```ts -SidebarSectionHeader({ text: 'Protocol', icon: 'nodes', prefix: 'About the' }) -``` - -### Markdown - -Learn about basic Markdown syntax [here](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax). - -You can learn more about the Markdown syntax used in Vitepress [here](./markdown-examples.md). - -#### Using custom banners - -You can use custom banners to highlight important information using the following syntax: - -
-Click to see syntax - -```md -::: info -This is an info box. -::: - -::: tip -This is a tip. -::: - -::: warning -This is a warning. -::: - -::: danger -This is a dangerous warning. -::: - -::: details -This is a details block. -::: - -::: goal -Getting started by building a minimal... -::: -``` - -
- -### Frontmatter - -Learn about Frontmatter [here](https://jekyllrb.com/docs/front-matter/). Frontmatter is used mainly for: - -- Vitepress-specific to the page configuration. See options [here](https://vitepress.dev/reference/frontmatter-config#frontmatter-config) for more info. -- Adding arrays of [Custom Vue Components](#custom-vue-components) to the markdown files. - -### Custom Vue Components - -> [!WARNING] -> Only developers with knowledge of Vue.js should modify these components. If you need to use it, just copy and paste the code from the docs 🙂 - -#### Cards - -> [!NOTE] -> Usually, you might want to use the [Links](#links) component instead of this one. - -This component is used to create a single card. It receives a JSON object defined by the type `Card` which you can see in the [Card.vue](/.vitepress/theme/components/Card.vue) file. - -#### Links - -This component is used to create a grid of cards with links to other pages. It receives a list of cards which should be defined in the frontmatter section. - -You can see an example in the [Home Page](/index.md). - -#### Tags - -A simple component to display a list of tag(s). It receives a list of tags which should be defined in the frontmatter section. You can use it like: - -```md - - -``` - -The list of valid tags is defined in the [Tags.vue](/.vitepress/theme/components/Tags.vue) file. - -## Configuration - -### Sidebar and Navigation - -The sidebar and the navigation can be editted from the [config.ts](/.vitepress/config.ts) file. You can see the options [here](https://vitepress.vuejs.org/guide/basic-config.html#config-file). - -> [!NOTE] -> Some options we use HTML for the text property instead of raw text. This allows us to implement a custom design for the sidebar and navigation. - -## UnoCSS - -We are using UnoCSS with [Attributify preset](https://unocss.dev/presets/attributify) and the [Icons preset](https://unocss.dev/presets/icons) which allow us to have the [icons](assets/icons) and then we can use them like: - -```html -
-``` - -### Why not just use TailwindCSS? - -Basically, TailwindCSS scan - -For more details, this [post](https://antfu.me/posts/windicss-and-tailwind-jit) is recommended. diff --git a/public/nimiq-dev-center-banner.png b/public/nimiq-dev-center-banner.png new file mode 100644 index 0000000..fe935fa Binary files /dev/null and b/public/nimiq-dev-center-banner.png differ