portosaurus 1.18.15 → 2.0.0

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-    <img src="./src/img/icon.png" width=150>
+    <img src="./src/assets/img/icon.svg" width=150>
     <h1>Portosaurus</h1>
     <p>Complete portfolio cum personal website solution for your digital personality.</p>
 </div>
@@ -10,14 +10,13 @@
 
 - **📝 Full-featured Portfolio Site** — Showcase your work, skills, experience, social identity.
 - **🎨 Beautiful UI** — Responsive design with Catppuccin color scheme.
+- **🛠️ Highly Configurable** — Extensive customization options in a central config file
 - **🖼️ Project Showcase** — Interactive project cards with support for featured projects, project status badges, and tags
-- **📚 Knowledge Base** — Integrated notes system with custom icons and categorization
-- **✏️ Blog Platform** — Built-in blogging capabilities.
+- **📚 Knowledge Base** — Integrated notes vault with many usefull utilities
+- **✏️ Blog Platform** — Built-in blogging platform.
 - **📋 Task Tracking** — Track your plans with priority levels and completion status
-- **🛠️ Highly Configurable** — Extensive customization options in a central config file
 - **🔍 Powerful Search** — Integrated search functionality for notes and blog content
 - **📱 Mobile-Friendly** — Fully responsive design works on all devices
-- **🚀 Auto Deployment** — Ready for GitHub Pages or any static hosting
 
 <br/>
 
@@ -47,11 +46,11 @@ Navigate to your project and start the development server:
 ```bash
 cd my-portfolio
 
-# With npm
-npm run dev
-
 # With Bun
 bun run dev
+
+# With npm
+npm run dev
 ```
 
 Your site will be available at `http://localhost:3000`.
@@ -73,10 +72,9 @@ Your site will be available at `http://localhost:3000`.
 
 A portosaurus project can be deployed to any static hosting provider like:
 
+- Cloudflare Pages
 - Netlify
 - Vercel
-- Cloudflare Pages
-- Other static providers
 
 To generate the static site for production:
 
@@ -119,6 +117,19 @@ module.exports = {
 };
 ```
 
+## Development
+
+### Setup Environment
+
+0. Fork This Repo
+1. Clone forked repo: `git clone https://github.com/yourUserName/portosaurus.git`
+2. Install Mise, visit [official guide](https://mise.jdx.dev/installing-mise.html)
+3. Install Dependencies: `mise install`
+4. Make changes
+5. Stage & commit: `mise commit`
+6. Push Changes: `git push`
+7. Open PR: `mise pr`
+
 <br>
 
 ## 📄 Credits
@@ -130,4 +141,5 @@ module.exports = {
 - [Hugo Profile](https://hugo-profile.netlify.app/) - Design inspiration.
 - [Catppuccin](https://github.com/catppuccin/catppuccin) - Color scheme that inspired the site's palette.
 - [Deepseek R1](https://www.deepseek.com/) hosted using [Ollama](https://ollama.com/library/deepseek-r1) - prism.js theme & project card component.
+- [Inkscape](https://inkscape.org/) - Icon drawing.
 - Countless Internet forum posts - Filling me with information.

package/bin/portosaurus.mjs

@@ -0,0 +1,357 @@
+#!/usr/bin/env bun
+
+import { Command } from "commander";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { spawn, execSync } from "child_process";
+
+import { logger } from "../src/core/logger.mjs";
+import {
+  detectPackageManager,
+  getInstallCommand,
+  findDocusaurusBin,
+} from "../src/core/packageManager.mjs";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const portosaurusRoot = path.resolve(__dirname, "..");
+
+const packageJson = JSON.parse(
+  fs.readFileSync(path.resolve(portosaurusRoot, "package.json"), "utf8"),
+);
+
+const program = new Command();
+
+program
+  .name("portosaurus")
+  .description("CLI for Portosaurus — The complete portfolio solution")
+  .version(packageJson.version, "-v, --version", "output the current version");
+
+// ─── Helpers ────────────────────────────────────────────────
+
+/**
+ * Write the ephemeral .portosaurus/docusaurus.config.mjs shim.
+ * This tiny file imports the user's config.js and passes it
+ * to the portosaurus config generator using absolute paths.
+ */
+function writeConfigShim(projectRoot) {
+  const dotDir = path.join(projectRoot, ".docusaurus", "portosaurus");
+  fs.mkdirSync(dotDir, { recursive: true });
+
+  const configJsAbsolute = path
+    .join(projectRoot, "config.js")
+    .replace(/\\/g, "/");
+  const createDocuConfAbsolute = path
+    .resolve(portosaurusRoot, "src/core/createDocuConf.mjs")
+    .replace(/\\/g, "/");
+
+  // Docusaurus 3 supports ESM and async config functions.
+  const shimContent = `// Auto-generated by Portosaurus CLI — do not edit
+/** @type {import('@docusaurus/types').Config} */
+export default async function getConfig() {
+  const { createDocuConf } = await import("file://${createDocuConfAbsolute}");
+  const { usrConf } = await import("file://${configJsAbsolute}");
+  return createDocuConf(usrConf, "${projectRoot.replace(/\\/g, "/")}");
+}
+`;
+
+  const shimPath = path.join(dotDir, "docusaurus.config.js");
+  fs.writeFileSync(shimPath, shimContent);
+  logger.debug(`Config shim written to ${shimPath}`);
+
+  return shimPath;
+}
+
+/**
+ * Validate that the current directory is a Portosaurus project.
+ */
+function validateProject(projectRoot) {
+  const configPath = path.join(projectRoot, "config.js");
+  if (!fs.existsSync(configPath)) {
+    console.log();
+    logger.error(
+      "config.js not found. Are you in a Portosaurus project directory?",
+    );
+    process.exit(1);
+  }
+}
+
+/**
+ * Ensure essential user content directories exist.
+ */
+function ensureContentDirs(projectRoot) {
+  for (const dir of ["notes", "blog", "static"]) {
+    fs.mkdirSync(path.join(projectRoot, dir), { recursive: true });
+  }
+
+  // Ensure notes has at least an index.mdx so Docusaurus doesn't error
+  const notesIndex = path.join(projectRoot, "notes", "index.mdx");
+  if (!fs.existsSync(notesIndex)) {
+    fs.writeFileSync(
+      notesIndex,
+      `---\nhide_table_of_contents: true\n---\n\nimport NoteCards from "@site/src/components/NoteIndex";\n\n# Notes\n\n<NoteCards />\n`,
+    );
+    logger.debug("Created default notes/index.mdx");
+  }
+}
+
+/**
+ * Spawn a Docusaurus command and wait for it to complete.
+ */
+function runDocusaurus(command, extraArgs, projectRoot, configPath) {
+  const {
+    command: cmd,
+    args: pmArgs,
+    packageManager,
+  } = findDocusaurusBin(projectRoot);
+
+  logger.info(`Running docusaurus ${command} (via ${packageManager})`);
+
+  // Use the dynamically detected package manager command instead of hardcoding
+  const spawnCommand = cmd;
+  const finalArgs = [
+    ...pmArgs,
+    command,
+    projectRoot,
+    "--config",
+    configPath,
+    ...extraArgs,
+  ];
+
+  const child = spawn(spawnCommand, finalArgs, {
+    stdio: "inherit",
+    cwd: projectRoot,
+    env: { ...process.env, FORCE_COLOR: "true" },
+  });
+
+  return new Promise((resolve, reject) => {
+    child.on("error", (err) => {
+      logger.error(`Failed to run docusaurus ${command}: ${err.message}`);
+      reject(err);
+    });
+    child.on("close", (code) => {
+      if (code === 0) resolve();
+      else process.exit(code);
+    });
+  });
+}
+
+// ─── INIT COMMAND ───────────────────────────────────────────
+
+program
+  .command("init")
+  .description("Initialize a new Portosaurus project")
+  .argument("<project-name>", "Name of the project directory")
+  .option("--no-install", "Skip dependency installation")
+  .option("--no-github-pages", "Skip GitHub Pages deployment setup")
+  .action(async (projectName, options) => {
+    const projectPath = path.resolve(process.cwd(), projectName);
+
+    if (fs.existsSync(projectPath)) {
+      logger.error(`Directory "${projectName}" already exists.`);
+      process.exit(1);
+    }
+
+    logger.info(`Creating new Portosaurus project in ${projectName}...`);
+
+    try {
+      fs.mkdirSync(projectPath, { recursive: true });
+
+      // Copy template files if they exist
+      const templatePath = path.resolve(portosaurusRoot, "src/template");
+      if (fs.existsSync(templatePath)) {
+        copyDirSync(templatePath, projectPath);
+      }
+
+      // Ensure content directories
+      for (const dir of ["blog", "notes", "static"]) {
+        fs.mkdirSync(path.join(projectPath, dir), { recursive: true });
+      }
+
+      // Create a minimal config.js if the template didn't provide one
+      const configDest = path.join(projectPath, "config.js");
+      if (!fs.existsSync(configDest)) {
+        fs.writeFileSync(
+          configDest,
+          `exports.usrConf = {\n  dark_mode: true,\n  site_url: "auto",\n  site_path: "auto",\n\n  hero_section: {\n    title: "${projectName}",\n    profession: "Your Profession",\n    description: "Short description about you.",\n  },\n};\n`,
+        );
+      }
+
+      // Create package.json
+      const pkg = {
+        name: projectName,
+        version: "0.0.1",
+        private: true,
+        scripts: {
+          dev: "portosaurus dev",
+          start: "portosaurus start",
+          build: "portosaurus build",
+          serve: "portosaurus serve",
+        },
+        dependencies: {
+          portosaurus: `^${packageJson.version}`,
+        },
+      };
+      fs.writeFileSync(
+        path.join(projectPath, "package.json"),
+        JSON.stringify(pkg, null, 2),
+      );
+
+      // Create .gitignore
+      fs.writeFileSync(
+        path.join(projectPath, ".gitignore"),
+        `node_modules/\nbuild/\n.docusaurus/\n.cache-loader/\n`,
+      );
+
+      // Git init
+      try {
+        execSync("git init", { cwd: projectPath, stdio: "ignore" });
+      } catch {
+        logger.warn("Failed to initialize git repository.");
+      }
+
+      // GitHub Pages setup
+      if (options.githubPages === false) {
+        const ghDir = path.join(projectPath, ".github");
+        if (fs.existsSync(ghDir)) {
+          fs.rmSync(ghDir, { recursive: true, force: true });
+          logger.info("Skipped GitHub Pages setup.");
+        }
+      } else {
+        fs.writeFileSync(path.join(projectPath, "static", ".nojekyll"), "");
+        logger.success("GitHub Pages deployment configured.");
+        logger.tip(
+          "Enable GitHub Pages: Settings > Pages > Source: GitHub Actions",
+        );
+      }
+
+      logger.success(`Created ${projectName} at ${projectPath}`);
+
+      // Install dependencies
+      const pm = detectPackageManager(projectPath) || "npm";
+      const installCmd = getInstallCommand(pm);
+      const runCmd = pm === "npm" ? "npm run" : `${pm} run`;
+
+      if (options.install !== false) {
+        logger.info(`Running ${installCmd}...`);
+        try {
+          execSync(installCmd, { cwd: projectPath, stdio: "inherit" });
+          logger.success("Dependencies installed!");
+        } catch {
+          logger.error("Failed to install dependencies.");
+        }
+      }
+
+      logger.tip("You can now run:");
+      logger.info(`  cd ${projectName}`);
+      logger.info(`  ${runCmd} dev`);
+    } catch (error) {
+      logger.error(`Failed to initialize project: ${error.message}`);
+      process.exit(1);
+    }
+  });
+
+// ─── DEV / START COMMAND ────────────────────────────────────
+
+program
+  .command("start [extraArgs...]")
+  .alias("dev")
+  .description("Start the development server")
+  .allowUnknownOption()
+  .action(async function (extraArgs) {
+    const projectRoot = process.cwd();
+    validateProject(projectRoot);
+    ensureContentDirs(projectRoot);
+
+    logger.info("Starting development server...");
+    try {
+      const configPath = writeConfigShim(projectRoot);
+      runDocusaurus("start", extraArgs || [], projectRoot, configPath);
+    } catch (error) {
+      logger.error(`Failed to start: ${error.message}`);
+      process.exit(1);
+    }
+  });
+
+// ─── BUILD COMMAND ──────────────────────────────────────────
+
+program
+  .command("build [extraArgs...]")
+  .description("Build the static site")
+  .allowUnknownOption()
+  .action(async function (extraArgs) {
+    const projectRoot = process.cwd();
+    validateProject(projectRoot);
+    ensureContentDirs(projectRoot);
+
+    logger.info("Building Portosaurus site...");
+    try {
+      const configPath = writeConfigShim(projectRoot);
+      const buildDir = path.join(projectRoot, "build");
+      const args = ["--out-dir", buildDir, ...(extraArgs || [])];
+
+      await runDocusaurus("build", args, projectRoot, configPath);
+
+      // Create .nojekyll for GitHub Pages compatibility
+      if (fs.existsSync(buildDir)) {
+        fs.writeFileSync(path.join(buildDir, ".nojekyll"), "");
+        logger.info("Created .nojekyll");
+      }
+
+      logger.success("Build completed successfully!");
+      logger.info(`Output directory: ${buildDir}`);
+    } catch (error) {
+      logger.error(`Failed to build: ${error.message}`);
+      process.exit(1);
+    }
+  });
+
+// ─── SERVE COMMAND ──────────────────────────────────────────
+
+program
+  .command("serve")
+  .description("Serve the built static site locally")
+  .action(async () => {
+    const projectRoot = process.cwd();
+    validateProject(projectRoot);
+
+    const buildDir = path.join(projectRoot, "build");
+    if (!fs.existsSync(buildDir)) {
+      logger.error("Build directory not found. Run 'portosaurus build' first.");
+      process.exit(1);
+    }
+
+    logger.info("Serving Portosaurus site...");
+    try {
+      const configPath = writeConfigShim(projectRoot);
+      await runDocusaurus(
+        "serve",
+        ["--dir", buildDir],
+        projectRoot,
+        configPath,
+      );
+    } catch (error) {
+      logger.error(`Failed to serve: ${error.message}`);
+      process.exit(1);
+    }
+  });
+
+// ─── Utility ────────────────────────────────────────────────
+
+/**
+ * Recursively copy a directory.
+ */
+function copyDirSync(src, dest) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      copyDirSync(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+program.parse();

package/package.json

@@ -1,71 +1,64 @@
 {
   "name": "portosaurus",
-  "version": "1.18.15",
-  "author": "soymadip",
-  "license": "GPL-3.0-only",
-  "description": "Complete portfolio cum personal website solution for your digital personality.",
-  "homepage": "https://github.com/soymadip/portosaurus#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/soymadip/portosaurus.git"
-  },
-  "bugs": {
-    "url": "https://github.com/soymadip/portosaurus/issues"
-  },
-  "keywords": [
-    "portfolio",
-    "docusaurus",
-    "cli",
-    "static-site-generator",
-    "documentation",
-    "blog"
-  ],
-  "type": "module",
-  "imports": {
-    "#config/*": "./src/config/*",
-    "#utils/*": "./src/utils/*.js",
-    "#css/*": "./src/css/*.css",
-    "#pages/*": "./src/internal/src/pages/*.js",
-    "#components/*": "./src/components/*",
-    "#internal/*": "./src/internal/src/*"
-  },
-  "exports": {
-    "./components/*": "./src/components/*",
-    "./utils/*": "./src/utils/*.js",
-    "./config/*": "./src/config/*.js",
-    "./css/*": "./src/css/*.css",
-    "./pages/*": "./src/pages/*.js"
-  },
+  "version": "2.0.0",
+  "private": false,
   "bin": {
-    "portosaurus": "bin/portosaurus.js"
+    "portosaurus": "bin/portosaurus.mjs"
   },
   "files": [
     "bin/",
-    "src/internal/",
-    "src/template/",
-    "src/utils/",
+    "src/components/",
     "src/config/",
+    "src/core/",
     "src/css/",
-    "src/img",
     "src/pages/",
-    "src/components/"
+    "src/theme/",
+    "src/template/",
+    "src/assets/"
   ],
+  "scripts": {
+    "dev": "$npm_execpath bin/portosaurus.mjs dev",
+    "build": "$npm_execpath bin/portosaurus.mjs build",
+    "serve": "$npm_execpath bin/portosaurus.mjs serve"
+  },
   "dependencies": {
-    "@docusaurus/core": "^3.9.2",
-    "@docusaurus/preset-classic": "^3.9.2",
-    "@easyops-cn/docusaurus-search-local": "^0.52.3",
-    "chalk": "^5.6.2",
+    "@docusaurus/core": "^3.10.0",
+    "@docusaurus/preset-classic": "^3.10.0",
+    "@easyops-cn/docusaurus-search-local": "^0.52.1",
+    "@mdx-js/react": "^3.1.1",
+    "chalk": "^5.4.1",
     "clsx": "^2.1.1",
-    "commander": "^12.1.0",
-    "favicons": "^7.2.0",
-    "fs-extra": "^11.3.3",
+    "commander": "^13.1.0",
+    "favicons": "7.2.0",
+    "framer-motion": "^12.38.0",
     "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
     "prism-react-renderer": "^2.4.1",
-    "prompts": "^2.4.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-icons": "^5.5.0",
-    "react-slick": "^0.30.3",
+    "react-pdf": "^10.4.1",
+    "react-rnd": "^10.5.3",
+    "react-slick": "^0.31.0",
+    "sharp": "^0.34.4",
     "slick-carousel": "^1.8.1"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "^3.10.0",
+    "@docusaurus/types": "^3.10.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=20.0"
   }
 }

package/src/assets/img/svg/icon-blog.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg stroke="#fab387" fill="#2e8555" stroke-width="0" viewBox="0 0 448 512" color="#fab387" style="color:#fab387" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M162.4 196c4.8-4.9 6.2-5.1 36.4-5.1 27.2 0 28.1.1 32.1 2.1 5.8 2.9 8.3 7 8.3 13.6 0 5.9-2.4 10-7.6 13.4-2.8 1.8-4.5 1.9-31.1 2.1-16.4.1-29.5-.2-31.5-.8-10.3-2.9-14.1-17.7-6.6-25.3zm61.4 94.5c-53.9 0-55.8.2-60.2 4.1-3.5 3.1-5.7 9.4-5.1 13.9.7 4.7 4.8 10.1 9.2 12 2.2 1 14.1 1.7 56.3 1.2l47.9-.6 9.2-1.5c9-5.1 10.5-17.4 3.1-24.4-5.3-4.7-5-4.7-60.4-4.7zm223.4 130.1c-3.5 28.4-23 50.4-51.1 57.5-7.2 1.8-9.7 1.9-172.9 1.8-157.8 0-165.9-.1-172-1.8-8.4-2.2-15.6-5.5-22.3-10-5.6-3.8-13.9-11.8-17-16.4-3.8-5.6-8.2-15.3-10-22C.1 423 0 420.3 0 256.3 0 93.2 0 89.7 1.8 82.6 8.1 57.9 27.7 39 53 33.4c7.3-1.6 332.1-1.9 340-.3 21.2 4.3 37.9 17.1 47.6 36.4 7.7 15.3 7-1.5 7.3 180.6.2 115.8 0 164.5-.7 170.5zm-85.4-185.2c-1.1-5-4.2-9.6-7.7-11.5-1.1-.6-8-1.3-15.5-1.7-12.4-.6-13.8-.8-17.8-3.1-6.2-3.6-7.9-7.6-8-18.3 0-20.4-8.5-39.4-25.3-56.5-12-12.2-25.3-20.5-40.6-25.1-3.6-1.1-11.8-1.5-39.2-1.8-42.9-.5-52.5.4-67.1 6.2-27 10.7-46.3 33.4-53.4 62.4-1.3 5.4-1.6 14.2-1.9 64.3-.4 62.8 0 72.1 4 84.5 9.7 30.7 37.1 53.4 64.6 58.4 9.2 1.7 122.2 2.1 133.7.5 20.1-2.7 35.9-10.8 50.7-25.9 10.7-10.9 17.4-22.8 21.8-38.5 3.2-10.9 2.9-88.4 1.7-93.9z"></path></svg>

package/src/assets/img/svg/icon-close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 6L6 18M6 6l12 12" />
+</svg>

package/src/assets/img/svg/icon-dock.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2" />
+  <path d="M15 3v18" />
+</svg>

package/src/assets/img/svg/icon-link.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+  <polyline points="15 3 21 3 21 9" />
+  <line x1="10" y1="14" x2="21" y2="3" />
+</svg>

package/src/assets/img/svg/icon-note.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg stroke="#fab387" fill="#2e8555" stroke-width="0" viewBox="0 0 448 512" color="#fab387" style="color:#fab387" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M162.4 196c4.8-4.9 6.2-5.1 36.4-5.1 27.2 0 28.1.1 32.1 2.1 5.8 2.9 8.3 7 8.3 13.6 0 5.9-2.4 10-7.6 13.4-2.8 1.8-4.5 1.9-31.1 2.1-16.4.1-29.5-.2-31.5-.8-10.3-2.9-14.1-17.7-6.6-25.3zm61.4 94.5c-53.9 0-55.8.2-60.2 4.1-3.5 3.1-5.7 9.4-5.1 13.9.7 4.7 4.8 10.1 9.2 12 2.2 1 14.1 1.7 56.3 1.2l47.9-.6 9.2-1.5c9-5.1 10.5-17.4 3.1-24.4-5.3-4.7-5-4.7-60.4-4.7zm223.4 130.1c-3.5 28.4-23 50.4-51.1 57.5-7.2 1.8-9.7 1.9-172.9 1.8-157.8 0-165.9-.1-172-1.8-8.4-2.2-15.6-5.5-22.3-10-5.6-3.8-13.9-11.8-17-16.4-3.8-5.6-8.2-15.3-10-22C.1 423 0 420.3 0 256.3 0 93.2 0 89.7 1.8 82.6 8.1 57.9 27.7 39 53 33.4c7.3-1.6 332.1-1.9 340-.3 21.2 4.3 37.9 17.1 47.6 36.4 7.7 15.3 7-1.5 7.3 180.6.2 115.8 0 164.5-.7 170.5zm-85.4-185.2c-1.1-5-4.2-9.6-7.7-11.5-1.1-.6-8-1.3-15.5-1.7-12.4-.6-13.8-.8-17.8-3.1-6.2-3.6-7.9-7.6-8-18.3 0-20.4-8.5-39.4-25.3-56.5-12-12.2-25.3-20.5-40.6-25.1-3.6-1.1-11.8-1.5-39.2-1.8-42.9-.5-52.5.4-67.1 6.2-27 10.7-46.3 33.4-53.4 62.4-1.3 5.4-1.6 14.2-1.9 64.3-.4 62.8 0 72.1 4 84.5 9.7 30.7 37.1 53.4 64.6 58.4 9.2 1.7 122.2 2.1 133.7.5 20.1-2.7 35.9-10.8 50.7-25.9 10.7-10.9 17.4-22.8 21.8-38.5 3.2-10.9 2.9-88.4 1.7-93.9z"></path></svg>

package/src/assets/img/svg/icon-popup.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 509 511.54"><path fill-rule="nonzero" d="M447.19 347.03c0-17.06 13.85-30.91 30.91-30.91 17.05 0 30.9 13.85 30.9 30.91v87.82c0 21.08-8.63 40.29-22.51 54.18-13.88 13.88-33.09 22.51-54.18 22.51H76.69c-21.09 0-40.3-8.63-54.18-22.51C8.63 475.14 0 455.93 0 434.85V76.69c0-21.09 8.63-40.3 22.51-54.18C36.39 8.63 55.6 0 76.69 0h86.98c17.06 0 30.9 13.85 30.9 30.9 0 17.06-13.84 30.91-30.9 30.91H76.69c-4.07 0-7.82 1.69-10.51 4.37-2.68 2.69-4.37 6.44-4.37 10.51v358.16c0 4.06 1.69 7.82 4.37 10.5 2.69 2.68 6.44 4.38 10.51 4.38h355.62c4.07 0 7.82-1.7 10.51-4.38 2.68-2.68 4.37-6.44 4.37-10.5v-87.82zm0-243.56L308.15 244.28c-11.91 12.12-31.45 12.28-43.56.37-12.11-11.91-12.28-31.45-.37-43.56L401.77 61.81H309.7c-17.06 0-30.9-13.85-30.9-30.91 0-17.05 13.84-30.9 30.9-30.9h168.4C495.15 0 509 13.85 509 30.9v165.04c0 17.06-13.85 30.9-30.9 30.9-17.06 0-30.91-13.84-30.91-30.9v-92.47z"/></svg>

package/src/assets/img/svg/icon-save.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+  <polyline points="7 10 12 15 17 10" />
+  <line x1="12" y1="15" x2="12" y2="3" />
+</svg>