@sp-days-framework/docusaurus-plugin-interactive-tasks 1.0.5-rc2 → 1.1.0-beta1

package/docs/example-advanced-usage.mdx

@@ -0,0 +1,308 @@
+---
+task_section_name: "Interactive Demo 2"
+sidebar_position: 3.2
+sidebar_label: "Advanced Usage"
+sidebar_custom_props:
+  section: "Examples"
+  section_position: 3
+---
+
+import { useState } from 'react';
+
+# Advanced Usage Example
+
+Discover how to leverage advanced Docusaurus markdown features within interactive tasks to create rich, engaging learning experiences.
+
+<TaskProgression path="." />
+
+---
+
+::::task[Add Syntax Highlighting to Code Blocks]
+
+Practice adding syntax-highlighted code blocks to your documentation:
+
+1. Create a code block using triple backticks (```)
+2. Add the language identifier immediately after the opening backticks
+3. Write your code inside the block
+4. Close with triple backticks
+
+**Bash example:**
+```bash
+docker run -d -p 8080:80 nginx
+npm install express
+```
+
+**YAML example:**
+```yaml
+version: '3.8'
+services:
+  web:
+    image: nginx:latest
+    ports:
+      - "8080:80"
+```
+
+**JSON example:**
+```json
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "dependencies": {
+    "react": "^18.0.0"
+  }
+}
+```
+
+:::hint
+Docusaurus supports 30+ languages out of the box. Check the [Prism language list](https://prismjs.com/#supported-languages) for all available options. You can add more languages in `docusaurus.config.ts` - see the [Docusaurus documentation](https://docusaurus.io/docs/markdown-features/code-blocks#supported-languages).
+:::
+
+::::
+
+---
+
+::::task[Add File Names to Code Blocks]
+
+Add descriptive file names to your code blocks for better context:
+
+1. After the language identifier, add a space and `title="filename.ext"`
+2. The filename will appear as a header above the code block
+3. This helps readers know exactly where code should be placed
+
+```json title="tsconfig.json"
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "strict": true,
+    "strictNullChecks": true,
+    "skipLibCheck": true
+  }
+}
+```
+
+:::hint
+Use this feature to show exactly where code should be placed in a project structure. It's especially helpful in tutorials with multiple files.
+:::
+
+::::
+
+---
+
+::::task[Highlight Important Code Lines]
+
+Learn two methods for highlighting specific lines in code blocks:
+
+**Method 1: Inline comments** (best when actively developing)
+
+Use `highlight-next-line`, `highlight-start`, and `highlight-end` comments to mark important lines:
+
+```js
+function HighlightSomeText(highlight) {
+  if (highlight) {
+    // highlight-next-line
+    return 'This text is highlighted!';
+  }
+
+  return 'Nothing highlighted';
+}
+
+function HighlightMoreText(highlight) {
+  // highlight-start
+  if (highlight) {
+    return 'This range is highlighted!';
+  }
+  // highlight-end
+
+  return 'Nothing highlighted';
+}
+```
+
+**Method 2: Meta string** (cleaner for published docs)
+
+Add line numbers after the language identifier. Separate multiple lines with commas or use ranges:
+
+```jsx {1,4-6,11}
+import React from 'react';
+
+function MyComponent(props) {
+  if (props.isBar) {
+    return <div>Bar</div>;
+  }
+
+  return <div>Foo</div>;
+}
+
+export default MyComponent;
+```
+
+:::hint
+
+Supported commenting syntax:
+
+| Style      | Syntax                   |
+| ---------- | ------------------------ |
+| C-style    | `/* ... */` and `// ...` |
+| JSX-style  | `{/* ... */}`            |
+| Bash-style | `# ...`                  |
+| HTML-style | `<!-- ... -->`           |
+
+Choose inline comments when actively developing, and meta strings for final published documentation.
+
+:::
+
+::::
+
+---
+
+:::::task[Nest Admonitions in Tasks]
+
+Practice nesting admonitions inside tasks by using the correct number of colons:
+
+1. Task containers use 4+ colons: `::::task`
+2. Hints/solutions use 3+ colons: `:::hint`
+3. Nested admonitions also use 3+ colons: `:::note`
+4. For deeper nesting inside hints/solutions, use 4+ colons for the admonition
+
+**Rule:** Parent containers always need **more colons** than their children to prevent the parser from prematurely closing containers.
+
+:::note
+
+This is a note at the task level (3 colons).
+
+:::
+
+:::warning
+
+This is a warning at the task level (3 colons).
+
+:::
+
+::::hint
+
+This hint contains a nested admonition (4 colons for hint, since it needs to contain a 3-colon admonition):
+
+:::note
+
+This note is nested inside the hint (3 colons).
+
+:::
+
+::::
+
+:::::
+
+---
+
+::::task[Use React Components in Tasks]
+
+Import and use React components within your task content to create interactive experiences:
+
+1. Import React and any hooks you need at the top of the file: `import { useState } from 'react';`
+2. Define your component using `export const`
+3. Use the component anywhere in your MDX content
+
+**Example - Interactive Counter:**
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <div style={{ 
+      padding: '1rem', 
+      border: '2px solid var(--ifm-color-primary)', 
+      borderRadius: '8px',
+      textAlign: 'center',
+      margin: '1rem 0'
+    }}>
+      <p style={{ fontSize: '1.5rem', margin: '0.5rem 0' }}>
+        Count: <strong>{count}</strong>
+      </p>
+      <button 
+        onClick={() => setCount(count + 1)}
+        style={{ 
+          marginRight: '0.5rem',
+          padding: '0.5rem 1rem',
+          fontSize: '1rem',
+          cursor: 'pointer'
+        }}
+      >
+        Increment
+      </button>
+      <button 
+        onClick={() => setCount(0)}
+        style={{ 
+          padding: '0.5rem 1rem',
+          fontSize: '1rem',
+          cursor: 'pointer'
+        }}
+      >
+        Reset
+      </button>
+    </div>
+  );
+};
+
+<Counter />
+
+:::hint
+
+Tasks support all Docusaurus MDX features, including:
+- React component imports and usage (useState, useEffect, etc.)
+- Tabs, admonitions, and other built-in components
+- Custom CSS and styling with theme-aware variables
+- Interactive JavaScript functionality
+
+This makes tasks perfect for interactive tutorials and hands-on learning experiences!
+
+:::
+
+:::solution
+
+Here is the React code running in the task:
+
+```ts
+import { useState } from 'react';
+
+export const Counter = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <div style={{ 
+      padding: '1rem', 
+      border: '2px solid var(--ifm-color-primary)', 
+      borderRadius: '8px',
+      textAlign: 'center',
+      margin: '1rem 0'
+    }}>
+      <p style={{ fontSize: '1.5rem', margin: '0.5rem 0' }}>
+        Count: <strong>{count}</strong>
+      </p>
+      <button 
+        onClick={() => setCount(count + 1)}
+        style={{ 
+          marginRight: '0.5rem',
+          padding: '0.5rem 1rem',
+          fontSize: '1rem',
+          cursor: 'pointer'
+        }}
+      >
+        Increment
+      </button>
+      <button 
+        onClick={() => setCount(0)}
+        style={{ 
+          padding: '0.5rem 1rem',
+          fontSize: '1rem',
+          cursor: 'pointer'
+        }}
+      >
+        Reset
+      </button>
+    </div>
+  );
+};
+
+<Counter />
+```
+
+:::
+
+::::

package/docs/example-basic-usage.mdx

@@ -0,0 +1,132 @@
+---
+task_section_name: "Interactive Demo 1"
+sidebar_position: 3.1
+sidebar_label: "Basic Usage"
+sidebar_custom_props:
+  section: "Examples"
+  section_position: 3
+---
+
+# Basic Usage Example
+
+See interactive tasks in action with real-world examples. This page demonstrates how tasks work in a documentation environment.
+
+<TaskProgression path="."/>
+
+---
+
+::::task[Install the Plugin]
+
+Follow these steps to add Interactive Tasks to your Docusaurus project:
+
+1. Open your terminal in the project root directory
+2. Run the installation command for your package manager
+3. Verify the package appears in your `package.json` dependencies
+
+
+:::hint
+
+If you created your project with `@sp-days-framework/create-sp-days`, this plugin is already installed and you can skip this task.
+
+:::
+
+::::
+
+---
+
+::::task[Configure Docusaurus]
+
+Add the plugin and remark plugin to your Docusaurus configuration:
+
+1. Open `docusaurus.config.js` in your project root
+2. Add the plugin to the `plugins` array
+3. Add the remark plugin to your preset's docs configuration
+4. Save the file
+
+:::solution
+
+The plugin needs to be registered in two places: the `plugins` array for the main functionality, and the `remarkPlugins` array to transform task directives in your markdown files.
+
+**Verify Configuration:**
+
+- The file should have both entries as shown below
+- No syntax errors when running `npm run start`
+
+Add to your `docusaurus.config.js`:
+
+```js title="docusaurus.config.js"
+module.exports = {
+  plugins: ["@sp-days-framework/docusaurus-plugin-interactive-tasks"],
+
+  presets: [
+    [
+      "classic",
+      {
+        docs: {
+          remarkPlugins: [
+            require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
+              .remarkTaskDirective,
+          ],
+        },
+      },
+    ],
+  ],
+};
+```
+
+:::
+
+::::
+
+---
+
+::::task[Add Progress Tracking]
+
+Display task completion progress on your documentation pages:
+
+1. Import the `TaskProgression` component in your MDX file
+2. Add the component where you want to show progress
+3. Provide the path to the document you want to track
+
+Add to your MDX file:
+
+```mdx
+import TaskProgression from "@theme/TaskProgression";
+
+<TaskProgression path="." />
+```
+
+Reference other pages:
+
+```mdx
+<TaskProgression path="/docs/tutorial/first-task" />
+<TaskProgression path="../module-02/introduction" />
+```
+
+:::hint
+
+Use `path="."` to reference the current page, or provide an absolute/relative path to track other pages. The component shows a visual progress bar and completion count.
+
+:::
+
+::::
+
+---
+
+::::task[Test Auto-Collapse Feature]
+
+Learn how the auto-collapse feature helps you focus on incomplete tasks:
+
+1. Complete at least one task on this page by clicking "Mark as Done"
+2. Look for the collapse icon button in the navbar
+3. Click the collapse icon to enable auto-collapse mode
+4. Observe how completed tasks automatically collapse
+5. Click the collapse icon again to disable the feature
+
+:::hint
+
+The auto-collapse setting is saved to your browser's localStorage and syncs across all tabs. This feature is especially useful when working through long tutorial pages with many tasks.
+
+:::
+
+::::

package/docs/index.mdx

@@ -0,0 +1,92 @@
+---
+title: Interactive Tasks
+hide_title: true
+sidebar_position: 0
+sidebar_label: "📦 Interactive Tasks"
+---
+
+import LogoDocusaurus from './logo-docusaurus.svg';
+
+<div align="center">
+  <div style={{ display: 'flex', justifyContent: 'center', margin: '1rem' }}>
+    <LogoDocusaurus width="110" height="110"/>
+  </div>
+  <div align="center">
+    # Interactive Tasks
+  </div>
+  <div align="center">
+    <p>
+      *A Docusaurus plugin that transforms documentation into interactive learning experiences!*
+    </p>
+    <h4>
+      <a href="./interactive-tasks/install">🔧 Setup</a> · 
+      <a href="https://www.npmjs.com/package/@sp-days-framework/docusaurus-plugin-interactive-tasks">📦 NPM Package</a> · 
+      <a href="https://github.com/helse-sorost/sp-days-framework">💻 Source Code</a>
+    </h4>
+  </div>
+</div>
+
+---
+
+## Features
+
+- **Interactive Tasks** - Collapsible task components with completion tracking
+- **Hints, Solutions & Expected Outputs** - Optional toggleable hints, solutions, and expected outputs for each task
+- **Auto-Numbering** - Automatic task numbering per page
+- **Persistent Progress** - Completion status saved to localStorage
+- **Progress Tracking** - Visual progress indicators in sidebar and task progression components
+- **Sidebar Badges** - Automatic completion badges (e.g., "2/5") in sidebar navigation
+- **Auto-Collapse Toggle** - Navbar button to enable/disable auto-collapsing of completed tasks
+
+## Getting Started
+
+Create interactive tasks using simple markdown directives:
+
+````mdx
+::::task[Install the Plugin]
+
+Install the Interactive Tasks plugin using npm or yarn.
+
+:::hint
+Use npm install or yarn add to install the package.
+:::
+
+:::solution
+```bash
+npm install @sp-days-framework/docusaurus-plugin-interactive-tasks
+```
+:::
+
+::::
+````
+
+<div style={{ position: 'relative', marginTop: '2rem', display: 'flex', justifyContent: 'center' }}>
+  <div style={{ position: 'absolute', left: '50%', marginTop: '4px', transform: 'translateX(-50%)', fontWeight: 500, color: 'var(--ifm-color-emphasis-600)' }}>
+    Preview
+  </div>
+  <div id="preview-task-example" style={{ borderRadius: '12px', padding: '2rem 2rem 0rem 2rem', background: 'var(--ifm-color-emphasis-200)' }}>
+    <style>{`
+      #preview-task-example h3 {
+        display: none !important;
+      }
+    `}</style>
+    ::::task-example[Install the Plugin]
+
+    Install the Interactive Tasks plugin using npm or yarn.
+
+    :::hint
+    Use npm install or yarn add to install the package.
+    :::
+
+    :::solution
+    ```bash
+    npm install @sp-days-framework/docusaurus-plugin-interactive-tasks
+    ```
+    :::
+
+    ::::
+  </div>
+</div>
+<br/>
+
+Tasks are automatically numbered, track completion in localStorage, and sync across browser tabs. See [Install](install.mdx) for installation and configuration.

package/docs/install.mdx

@@ -0,0 +1,121 @@
+---
+sidebar_position: 1.1
+sidebar_custom_props:
+  section: "Setup"
+  section_position: 1
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+# Installation
+
+:::tip[Already Included]
+If you're using `@sp-days-framework/create-sp-days`, the Interactive Tasks plugin is already installed and configured. You can start creating tasks right away!
+:::
+
+Install the plugin using your preferred package manager:
+
+<Tabs>
+  <TabItem value="npm" label="npm" default>
+    ```bash
+    npm install @sp-days-framework/docusaurus-plugin-interactive-tasks
+    ```
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+    ```bash
+    yarn add @sp-days-framework/docusaurus-plugin-interactive-tasks
+    ```
+  </TabItem>
+</Tabs>
+
+Add the plugin to your plugins array and the remark plugin to your docs configuration:
+
+```js title="docusaurus.config.js" {2,9-11}
+module.exports = {
+  plugins: ["@sp-days-framework/docusaurus-plugin-interactive-tasks"],
+
+  presets: [
+    [
+      "classic",
+      {
+        docs: {
+          beforeDefaultRemarkPlugins: [
+            require("@sp-days-framework/docusaurus-plugin-interactive-tasks")
+              .remarkTaskDirective,
+          ],
+        },
+      },
+    ],
+  ],
+};
+```
+
+### Frontmatter Options
+
+Customize task badge appearance for individual pages:
+
+```mdx title="docs/my-module.mdx"
+---
+title: My Module
+sidebar_task_hide_progress: false
+sidebar_task_disable_icon: false
+sidebar_task_badge_colors:
+  completed:
+    lightmode: "#4caf50"
+    darkmode: "#66bb6a"
+  incomplete:
+    lightmode: "#2196f3"
+    darkmode: "#42a5f5"
+  font:
+    lightmode: "#ffffff"
+    darkmode: "#000000"
+---
+
+# My Module Content
+```
+
+### Category Sidebar Configuration
+
+Customize task badges for entire categories using `_category_.yml` or `_category_.json`:
+
+<Tabs>
+  <TabItem value="yaml" label="YAML" default>
+    ```yaml title="docs/module-01/_category_.yml"
+    label: "Module 1"
+    position: 1
+    customProps:
+      sidebar_task_badge_colors:
+        completed:
+          lightmode: "#4caf50"
+          darkmode: "#66bb6a"
+        incomplete:
+          lightmode: "#2196f3"
+          darkmode: "#42a5f5"
+      sidebar_task_disable_icon: false
+    ```
+  </TabItem>
+  <TabItem value="json" label="JSON">
+    ```json title="docs/module-02/_category_.json"
+    {
+      "label": "Module 2",
+      "position": 2,
+      "customProps": {
+        "sidebar_task_hide_progress": false,
+        "sidebar_task_badge_colors": {
+          "completed": {
+            "lightmode": "#4caf50",
+            "darkmode": "#66bb6a"
+          },
+          "incomplete": {
+            "lightmode": "#2196f3",
+            "darkmode": "#42a5f5"
+          }
+        }
+      }
+    }
+    ```
+  </TabItem>
+</Tabs>
+
+See [Advanced Configuration](./advanced-configuration.mdx) for all available options.

package/docs/logo-docusaurus.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="218" viewBox="0 0 256 218">
+	<path fill="#fff" d="M126.031 45.949h110.277v44.636H126.031z" />
+	<path fill="#3ecc5f" d="M26.256 191.672c-9.712 0-18.173-5.287-22.715-13.128A26.1 26.1 0 0 0 0 191.672c0 14.501 11.755 26.256 26.256 26.256h26.257v-26.256z" />
+	<path fill="#3ecc5f" d="m144.385 53.006l91.923-5.744V34.133c0-14.501-11.756-26.256-26.256-26.256H91.898l-3.282-5.685c-1.46-2.527-5.106-2.527-6.564 0L78.77 7.877l-3.282-5.685c-1.46-2.527-5.106-2.527-6.564 0l-3.282 5.685l-3.282-5.685c-1.46-2.527-5.106-2.527-6.564 0l-3.283 5.685l-.085.004l-5.438-5.437c-2.062-2.062-5.583-1.12-6.34 1.7l-1.795 6.7l-6.818-1.828c-2.818-.754-5.397 1.824-4.64 4.643l1.826 6.817l-6.7 1.795c-2.818.756-3.762 4.278-1.7 6.34l5.437 5.438l-.003.084l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.564l5.686 3.283l-5.686 3.282c-2.526 1.458-2.526 5.105 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.458-2.526 5.105 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.565l5.686 3.282l-5.686 3.282c-2.526 1.458-2.526 5.105 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.458-2.526 5.105 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.564l5.686 3.282l-5.686 3.282c-2.526 1.459-2.526 5.106 0 6.565l5.686 3.282l-5.686 3.282c-2.526 1.458-2.526 5.105 0 6.564l5.686 3.282c0 14.501 11.755 26.256 26.256 26.256h157.539c14.5 0 26.256-11.755 26.256-26.256V86.646l-91.923-5.745c-7.365-.46-13.102-6.568-13.102-13.947c0-7.38 5.737-13.487 13.102-13.948" />
+	<path fill="#3ecc5f" d="M183.795 217.928h39.384v-52.513h-39.384z" />
+	<path fill="#44d860" d="M249.436 185.108c-.288 0-.562.048-.839.084c-.05-.197-.097-.395-.152-.592a6.563 6.563 0 0 0-2.527-12.62c-1.494 0-2.856.52-3.96 1.36a35 35 0 0 0-.44-.442a6.5 6.5 0 0 0 1.328-3.92a6.563 6.563 0 0 0-12.602-2.573c-.195-.055-.39-.1-.584-.15c.035-.278.084-.552.084-.84a6.563 6.563 0 0 0-6.565-6.564a6.563 6.563 0 0 0-6.564 6.564c0 .288.049.562.084.84c-.194.05-.39.095-.584.15a6.563 6.563 0 0 0-12.602 2.572c0 1.477.505 2.824 1.328 3.921c-4.88 4.769-7.918 11.413-7.918 18.774c0 14.501 11.755 26.256 26.256 26.256c12.26 0 22.528-8.415 25.418-19.776c.277.035.551.084.839.084a6.563 6.563 0 0 0 6.564-6.564a6.563 6.563 0 0 0-6.564-6.564" />
+	<path fill="#3ecc5f" d="M196.923 139.159h39.385v-26.256h-39.385z" />
+	<path fill="#44d860" d="M249.436 129.313a3.282 3.282 0 1 0 0-6.564c-.143 0-.281.025-.419.042c-.026-.099-.048-.197-.076-.296a3.283 3.283 0 0 0-1.264-6.31c-.747 0-1.429.258-1.98.68a9 9 0 0 0-.22-.22a3.25 3.25 0 0 0 .664-1.962a3.282 3.282 0 0 0-6.302-1.286a13 13 0 0 0-3.531-.494c-7.25 0-13.129 5.878-13.129 13.128s5.88 13.128 13.129 13.128c1.226 0 2.406-.181 3.531-.495a3.282 3.282 0 0 0 6.302-1.285c0-.74-.252-1.414-.665-1.962q.113-.108.221-.22c.551.421 1.233.68 1.98.68a3.282 3.282 0 0 0 1.264-6.31c.028-.098.05-.198.076-.296c.138.017.276.042.419.042" />
+	<path d="M78.77 50.544a3.28 3.28 0 0 1-3.283-3.282c0-5.43-4.416-9.847-9.846-9.847s-9.846 4.417-9.846 9.847a3.282 3.282 0 1 1-6.564 0c0-9.05 7.36-16.41 16.41-16.41s16.41 7.36 16.41 16.41a3.28 3.28 0 0 1-3.282 3.282" />
+	<path fill="#ffff50" d="M131.282 217.928h78.77c14.5 0 26.256-11.755 26.256-26.256V99.774h-78.77c-14.501 0-26.256 11.755-26.256 26.257z" />
+	<path d="M216.641 140.472h-65.692a1.312 1.312 0 1 1 0-2.626h65.692a1.312 1.312 0 1 1 0 2.626m0 26.256h-65.692a1.312 1.312 0 1 1 0-2.625h65.692a1.312 1.312 0 1 1 0 2.625m0 26.257h-65.692a1.312 1.312 0 1 1 0-2.626h65.692a1.312 1.312 0 1 1 0 2.626m0-65.398h-65.692a1.312 1.312 0 1 1 0-2.626h65.692a1.312 1.312 0 1 1 0 2.626m0 26.013h-65.692a1.312 1.312 0 1 1 0-2.626h65.692a1.312 1.312 0 1 1 0 2.626m0 26.256h-65.692a1.312 1.312 0 1 1 0-2.625h65.692a1.312 1.312 0 1 1 0 2.625m19.667-121.289c-.016 0-.03-.008-.045-.007c-4.057.138-5.976 4.196-7.67 7.776c-1.766 3.74-3.133 6.174-5.373 6.1c-2.48-.089-3.898-2.89-5.4-5.856c-1.724-3.404-3.694-7.266-7.828-7.122c-3.999.137-5.925 3.668-7.623 6.783c-1.808 3.32-3.038 5.337-5.41 5.244c-2.53-.092-3.875-2.37-5.43-5.006c-1.735-2.935-3.74-6.236-7.793-6.123c-3.93.135-5.862 3.131-7.566 5.776c-1.802 2.797-3.065 4.5-5.468 4.4c-2.59-.094-3.928-1.983-5.476-4.171c-1.738-2.46-3.697-5.242-7.739-5.107c-3.844.131-5.775 2.585-7.478 4.75c-1.617 2.053-2.88 3.678-5.551 3.576a1.314 1.314 0 0 0-.095 2.626c3.96.132 5.967-2.365 7.709-4.578c1.545-1.964 2.879-3.66 5.505-3.748c2.528-.108 3.714 1.463 5.507 3.997c1.703 2.408 3.635 5.139 7.524 5.279c4.073.137 6.033-2.908 7.769-5.602c1.552-2.408 2.89-4.486 5.448-4.574c2.354-.088 3.635 1.773 5.442 4.833c1.702 2.884 3.631 6.152 7.597 6.296c4.103.142 6.084-3.44 7.81-6.61c1.495-2.741 2.907-5.331 5.407-5.417c2.354-.055 3.582 2.094 5.397 5.685c1.697 3.352 3.62 7.148 7.648 7.294q.111.004.222.004c4.022 0 5.93-4.037 7.62-7.607c1.496-3.164 2.911-6.145 5.34-6.266z" />
+	<path fill="#3ecc5f" d="M105.026 217.928h52.512v-52.513h-52.512z" />
+	<path fill="#44d860" d="M183.795 185.108c-.288 0-.562.048-.839.084c-.05-.197-.097-.395-.152-.592a6.563 6.563 0 0 0-2.527-12.62c-1.494 0-2.856.52-3.96 1.36a35 35 0 0 0-.44-.442a6.5 6.5 0 0 0 1.328-3.92a6.563 6.563 0 0 0-12.602-2.573c-.195-.055-.39-.1-.584-.15c.035-.278.084-.552.084-.84a6.563 6.563 0 0 0-6.565-6.564a6.563 6.563 0 0 0-6.564 6.564c0 .288.049.562.084.84c-.194.05-.39.095-.584.15a6.563 6.563 0 0 0-12.602 2.572c0 1.477.505 2.824 1.328 3.921c-4.88 4.769-7.918 11.413-7.918 18.774c0 14.501 11.755 26.256 26.256 26.256c12.26 0 22.528-8.415 25.418-19.776c.277.035.551.084.839.084a6.563 6.563 0 0 0 6.564-6.564a6.563 6.563 0 0 0-6.564-6.564" />
+	<path fill="#3ecc5f" d="M105.026 139.159h52.512v-26.256h-52.512z" />
+	<path fill="#44d860" d="M170.667 129.313a3.282 3.282 0 1 0 0-6.564c-.143 0-.281.025-.42.042q-.036-.148-.075-.296a3.283 3.283 0 0 0-1.265-6.31c-.747 0-1.428.258-1.98.68a9 9 0 0 0-.22-.22a3.25 3.25 0 0 0 .664-1.962a3.282 3.282 0 0 0-6.301-1.286a13 13 0 0 0-3.532-.494c-7.249 0-13.128 5.878-13.128 13.128s5.88 13.128 13.128 13.128a13 13 0 0 0 3.532-.495a3.282 3.282 0 0 0 6.301-1.285a3.25 3.25 0 0 0-.664-1.962q.113-.108.22-.22c.552.421 1.233.68 1.98.68a3.282 3.282 0 0 0 1.265-6.31l.076-.296c.138.017.276.042.419.042" />
+	<path d="M183.795 32.492c-.21 0-.433-.026-.643-.065a3.3 3.3 0 0 1-.617-.184a3.4 3.4 0 0 1-.566-.302a5 5 0 0 1-.5-.407c-.142-.158-.287-.315-.405-.499a3.5 3.5 0 0 1-.303-.564a3.4 3.4 0 0 1-.248-1.26c0-.21.026-.434.065-.644s.105-.407.183-.617c.08-.197.185-.38.303-.565c.118-.17.263-.34.406-.498c.159-.145.328-.29.499-.407a3.2 3.2 0 0 1 1.183-.486a3 3 0 0 1 1.286 0c.209.04.42.105.617.184c.196.078.38.183.565.302c.17.118.34.262.499.407c.144.157.288.328.407.498c.118.184.223.368.301.565c.08.21.145.407.184.617c.038.21.066.433.066.643a3.33 3.33 0 0 1-.958 2.324a5 5 0 0 1-.5.407a3.4 3.4 0 0 1-.564.302a3.4 3.4 0 0 1-.617.184c-.21.04-.433.065-.643.065m26.256-1.641a3.35 3.35 0 0 1-2.325-.958a5 5 0 0 1-.405-.499a3.5 3.5 0 0 1-.304-.564a3.4 3.4 0 0 1-.248-1.26c0-.867.355-1.707.957-2.324c.16-.145.328-.29.5-.407a3.2 3.2 0 0 1 1.182-.486c.42-.092.866-.092 1.287 0c.208.04.42.105.617.184c.195.078.38.183.564.302c.17.118.34.262.499.407c.603.617.958 1.457.958 2.323a3.4 3.4 0 0 1-.249 1.261c-.092.196-.184.38-.302.564c-.118.17-.263.341-.407.499a5 5 0 0 1-.499.407a3.4 3.4 0 0 1-.564.302a3.4 3.4 0 0 1-.617.184c-.21.039-.434.065-.644.065" />
+</svg>