Add Docs

README.md

@@ -43,15 +43,17 @@ integrating them with other knowledge and notes.
 ````markdown
 ## Project Euler Statistics
 
-```euler-stats
-progress: true
-solved: true
-graph: true
+```euler-stats-profile
+account=Artem_Korsakov
 ```
 ````
 
 This code block will display your progress, a list of solved problems, and a progress graph.
 
+![Profile Artem_Korsakov](https://projecteuler.net/profile/Artem_Korsakov.png)
+
+For more detailed information, please refer to [the documentation]().
+
 ### Installation:
 
 1. Go to Obsidian settings.

docs/euler-stats-profile.md

@@ -0,0 +1,76 @@
+# How to Display Profile Status?
+
+This guide explains how to display the status of a user profile using the `euler-stats-profile` syntax. Follow the instructions below to retrieve and display profile information.
+
+---
+
+## Displaying a Profile Status
+
+To retrieve and display the status of a specific profile, use the following format:
+
+````
+```euler-stats-profile
+account=Artem_Korsakov
+```
+````
+
+This will generate an image displaying the profile status:
+
+![Profile Artem_Korsakov](https://projecteuler.net/profile/Artem_Korsakov.png)
+
+---
+
+## Displaying a Different Profile
+
+If you want to display the status of another profile, simply replace the `account` value with the desired username. For example:
+
+````
+```euler-stats-profile
+account=fonkost
+```
+````
+
+This will display the following image:
+
+![Profile fonkost](https://projecteuler.net/profile/fonkost.png)
+
+---
+
+## Handling Non-Existent Profiles
+
+If the specified profile does not exist, the system will still attempt to display an image. For example:
+
+````
+```euler-stats-profile
+account=non_existent_account
+```
+````
+
+This will result in the following image being displayed:
+
+![Profile non_existent_account](https://projecteuler.net/profile/non_existent_account.png)
+
+---
+
+## Handling Incorrect Configuration
+
+If the `account` parameter is missing or incorrectly configured, an error message will be displayed. For example:
+
+````
+```euler-stats-profile
+invalid=Artem_Korsakov
+```
+````
+
+This will generate the following error message:
+
+**The "account=" parameter is not set or is set incorrectly!**
+
+---
+
+## Summary
+
+- Use the `account` parameter to specify the profile you want to display.
+- Ensure the `account` parameter is correctly formatted to avoid errors.
+- If the profile does not exist, an image will still be generated, but it may not contain valid data.
+- Always check for configuration errors if the expected output is not displayed.

docs/index.md

@@ -0,0 +1,55 @@
+# Project Euler Stats Plugin Documentation
+
+Welcome to the official documentation for the **Project Euler Stats** plugin for Obsidian! This plugin allows you to seamlessly integrate and display Project Euler profile statistics directly within your Obsidian notes. Whether you're tracking your own progress or sharing achievements with others, this plugin makes it easy to visualize Project Euler data.
+
+---
+
+## Features
+
+- **Display Profile Status**: Show Project Euler profile statistics, including solved problems and progress, using a simple syntax.
+- **Customizable**: Easily specify different profiles to display their respective statistics.
+- **Error Handling**: Clear error messages for invalid configurations or non-existent profiles.
+
+---
+
+## Getting Started
+
+To start using the **Project Euler Stats** plugin, follow these steps:
+
+1. **Install the Plugin**: Ensure the plugin is installed and enabled in your Obsidian settings.
+2. **Syntax Overview**: Use the `euler-stats-profile` code block to display profile statistics.
+3. **Examples**: Refer to the examples below to understand how to use the plugin effectively.
+
+---
+
+## Documentation
+
+Explore the following sections to learn more about using the plugin:
+
+- **[How to Display Profile Status?](euler-stats-profile.md)**: Learn how to retrieve and display Project Euler profile statistics in your notes.
+
+---
+
+## Example Usage
+
+Here’s an example of how to display the status of a Project Euler profile:
+
+````
+```euler-stats-profile
+account=Artem_Korsakov
+```
+````
+
+This will generate an image displaying the profile status:
+
+![Profile Artem_Korsakov](https://projecteuler.net/profile/Artem_Korsakov.png)
+
+---
+
+## Support and Feedback
+
+If you encounter any issues or have suggestions for improving the plugin, please reach out to the developer or submit feedback through the appropriate channels. Your input is highly valued!
+
+---
+
+Happy coding and tracking your Project Euler progress with Obsidian! 🚀

main.ts

@@ -9,15 +9,6 @@ export default class ProjectEulerStatsPlugin extends Plugin {
 
 		await this.loadSettings();
 
-		this.addCommand({
-			id: 'add-project-euler-profile',
-			name: 'Add Project Euler profile',
-			editorCallback: (editor: Editor, view: MarkdownView) => {
-				console.log(editor.getSelection());
-				editor.replaceSelection('![Profile](https://projecteuler.net/profile/' + this.settings.account + '.png)');
-			}
-		});
-
 		this.addSettingTab(new ProjectEulerStatsSettingTab(this.app, this));
 
 		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
@@ -25,6 +16,20 @@ export default class ProjectEulerStatsPlugin extends Plugin {
 		});
 
 		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
+
+		this.registerMarkdownCodeBlockProcessor('euler-stats-profile', (source, el, ctx) => {
+			const matchingLine = source.split('\n').find((line) => line.startsWith("account="));
+
+            if (matchingLine) {
+              const account = matchingLine.split("=")[1].trim();
+              const imgElement = el.createEl('img');
+              imgElement.src = 'https://projecteuler.net/profile/' + account + '.png';
+              imgElement.alt = 'Profile ' + account;
+            } else {
+              const divElement = el.createEl('div');
+              divElement.textContent = 'The "account=" parameter is not set or is set incorrectly!';
+            }
+        });
 	}
 
 	onunload() {