UNPKG

create-remark-deflist-revisited

Version:

Remark plugin for demonstrating nested definition lists in action. Create a skeleton project with @verikami/remark-deflist-revisited – interactive template selection.

48 lines (42 loc) 14.2 kB
import { writeFile, mkdir } from "node:fs/promises"; import { join, dirname } from "node:path"; const files = { ".gitignore": "# build output\ndist/\n\n# generated types\n.astro/\n\n# dependencies\nnode_modules/\n\n# logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\n\n# environment variables\n.env\n.env.production\n\n# macOS-specific files\n.DS_Store\n\n# jetbrains setting folder\n.idea/\n", "LICENSE": "MIT License\n\nCopyright (c) 2025 °// veriKami °// Weronika Kami\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n", "README.md": "# Remark Deflist Revisited °// Astro Example\n\n[![GH][GH Badge]][GH]\n[![NPM][NPM Badge]][NPM]\n[![JSR][JSR Badge]][JSR]\n[![Downloads][Downloads Badge]][Downloads]\n[![Socket][Socket Badge]][Socket]\n\n**[Astro]** integration of the **`@verikami/remark-deflist-revisited`** module, demonstrating enhanced definition lists processing in markdown within Astro projects with full SSR/SSG capabilities.\n\n**[Remark Deflist Revisited][module]** is a **[Remark]** plugin. A wrapper around **`remark-deflist`** with improved support for nested definition lists. It preserves all the original functionality and performs additional processing. \n\n## Overview\n\nThis project provides an Astro integration example showcasing how to use **`remark-deflist-revisited`** in modern static site generation and server-side rendering environments. **[Simple][+:simple]**, **[Express.js][+:express]** and **[Cloudflare Worker][+:worker]** examples are also available.\n\n## Features\n\n- **Astro Integration** → Seamless integration with Astro's markdown pipeline\n- **Enhanced Definition Lists** → Support for complex nested structures\n- **SSG/SSR Support** → Works with both static and server rendering\n- **Beautiful Styling** → Professional CSS styling with gradient background\n- **Zero Config** → Easy setup with minimal configuration\n- **TypeScript Ready** → Full TypeScript support\n\n## Quick Start\n\n### Prerequisites\n\n- Node.js 20 or higher\n- npm, pnpm or yarn\n\n### Installation\n\n```bash\n## Create a new Astro project\nツ npm create astro@latest\n\n## Install the remark-deflist-revisited plugin\nツ npm install @verikami/remark-deflist-revisited\n```\n\n### Configuration\n\nAdd the plugin to your `astro.config.mjs`\n\n```javascript\nimport { defineConfig } from \"astro/config\";\nimport remarkDeflist from \"@verikami/remark-deflist-revisited\";\n\nexport default defineConfig({\n markdown: {\n remarkPlugins: [\n remarkDeflist\n ]\n }\n});\n```\n\n### Usage in Markdown Files\n\nCreate `.md` or `.mdx` files in your `src/pages` directory:\n\n```markdown\n---\ntitle: \"Sample Page with Definition Lists\"\nlayout: \"../layouts/Layout.astro\"\n---\n\n# Advanced Definition Lists\n\nMain Term\n: This is the definition of the main term\n: This is another definition paragraph\n\nNested Term\n: Primary definition\n - Nested list item 1\n - Nested list item 2\n: Secondary definition with **bold text**\n```\n\n## Advanced Usage\n\n### Custom Markdown Processing\n\nFor advanced use cases, you can process markdown programmatically:\n\n```javascript\n//: src/utils/markdown.js\nimport { remark } from \"remark\";\nimport html from \"remark-html\";\nimport deflist from \"@verikami/remark-deflist-revisited\";\n\nexport async function processMarkdown(content) {\n const result = await remark()\n .use(deflist)\n .use(html)\n .process(content);\n \n return result.toString();\n}\n```\n\n### Using in Astro Components\n\n```astro\n---\n//: src/components/MarkdownContent.astro\nimport { processMarkdown } from \"../utils/markdown.js\";\n\nconst markdownContent = `\n# Dynamic Content\n\nDynamic Term\n: This content is processed at build time\n: Supports **formatting** and nested lists\n`;\n\nconst htmlContent = await processMarkdown(markdownContent);\n---\n\n<div set:html={htmlContent} />\n```\n\n## Development\n\n### Local Development\n\n```bash\n## Start development server\nツ npm run dev\n\n## Build for production\nツ npm run build\n\n## Preview production build\nツ npm run preview\n```\n\n### Custom Styling\n\nAdd custom styles to your layout component:\n\n```astro\n---\n//: src/layouts/Layout.astro\n---\n<html lang=\"en\">\n <head>\n <style>\n /* Custom definition list styles */\n dl {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 2rem;\n border-radius: 10px;\n margin: 2rem 0;\n }\n dt {\n font-weight: bold;\n color: white;\n margin-bottom: 0.5rem;\n }\n dd {\n margin-left: 2rem;\n color: #f0f0f0;\n margin-bottom: 0.5rem;\n }\n </style>\n </head>\n <body>\n <slot />\n </body>\n</html>\n```\n\n### TypeScript Support\n\nFor TypeScript projects, add type definitions:\n\n```typescript\n//: src/types/remark-deflist-revisited.d.ts\ndeclare module \"@verikami/remark-deflist-revisited\" {\n import { Plugin } from \"unified\";\n const deflist: Plugin;\n export default deflist;\n}\n```\n\n## Comparison with Other Implementations\n\n| Feature | Express.js | Astro Integration | Cloudflare Worker |\n|-----------------|--------------|---------------------|-------------------|\n| **Rendering** | Server-side | SSG/SSR | Edge |\n| **Build Time** | Runtime | Pre-built at deploy | Runtime |\n| **Performance** | Good | Excellent (static) | Excellent (edge) |\n| **Complexity** | Medium | Low | Low |\n| **Use Case** | Dynamic apps | Documentation sites | API endpoints |\n\n## Project Structure\n\n```\n.\n├── src/\n│ ├── components/ # Astro/React/Vue components\n│ ├── layouts/ # Layout components\n│ │ └── Layout.astro # Main layout\n│ └── pages/ # Markdown/MDX pages\n│ ├── index.astro # Home page\n│ └── demo.md # Demo page with definition lists\n├── public/ # Static assets\n├── astro.config.mjs # Astro configuration\n├── package.json # Dependencies and scripts\n└── README.md # This file\n```\n\n## Dependencies\n\n### Core Dependencies\n\n- `astro` → Modern static site generator\n- `@verikami/remark-deflist-revisited` → Enhanced definition lists\n\n### Optional Dependencies\n\n- `@astrojs/mdx` → MDX support\n- `@astrojs/react` → React component support\n- `@astrojs/vue` → Vue component support\n\n## Benefits for Astro Projects\n\n- **Performance**: Leverages Astro's island architecture\n- **SEO Friendly**: Pre-rendered content for better search visibility\n- **Developer Experience**: Hot reload and excellent tooling\n- **Flexibility**: Combine with React, Vue, Svelte components\n- **Zero JS**: Outputs minimal JavaScript by default\n\n## License\n\nThis project is Open Source and available under the MIT License \n2025 © MIT °// [veriKami] °// [Weronika Kami]\n\n[veriKami]: https://verikami.com\n[Weronika Kami]: https://linkedin.com/in/verikami\n\n[module]: https://github.com/veriKami/remark-deflist-revisited\n[+:simple]: https://github.com/veriKami/remark-deflist-revisited-simple\n[+:express]: https://github.com/veriKami/remark-deflist-revisited-express\n[+:worker]: https://github.com/veriKami/remark-deflist-revisited-worker\n[+:astro]: https://github.com/veriKami/remark-deflist-revisited-astro\n\n[Remark]: https://remark.js.org\n[Astro]: https://astro.build\n\n[GH Badge]: https://img.shields.io/badge/GitHub-Repository-blue?logo=github\n[GH]: https://github.com/veriKami/remark-deflist-revisited\n\n[NPM Badge]: https://img.shields.io/npm/v/@verikami/remark-deflist-revisited?logo=npm&logoColor=white&labelColor=red&color=black\n[NPM]: https://www.npmjs.com/package/@verikami/remark-deflist-revisited\n\n[JSR Badge]: https://jsr.io/badges/@verikami/remark-deflist-revisited\n[JSR]: https://jsr.io/@verikami/remark-deflist-revisited\n\n[Downloads Badge]: https://img.shields.io/npm/dm/@verikami/remark-deflist-revisited.svg\n[Downloads]: https://www.npmjs.com/package/@verikami/remark-deflist-revisited\n\n[Socket Badge]: https://badge.socket.dev/npm/package/@verikami/remark-deflist-revisited\n[Socket]: https://socket.dev/npm/package/@verikami/remark-deflist-revisited\n", "astro.config.mjs": "//: astro.config.mjs\n//: -----------------------------------------\nimport { defineConfig } from \"astro/config\";\nimport remarkDeflistRevisited from \"@verikami/remark-deflist-revisited\";\n\nexport default defineConfig({\n compressHTML: false,\n markdown: {\n remarkPlugins: [\n remarkDeflistRevisited\n ]\n }\n});\n", "package.json": "{\n \"name\": \"remark-deflist-revisited-astro\",\n \"version\": \"0.1.0\",\n \"description\": \"Astro example for @verikami/remark-deflist-revisited\",\n \"keywords\": [\n \"remark\",\n \"remark-plugin\",\n \"remark-deflist\",\n \"markdown\",\n \"markdown-plugin\",\n \"definition-list\",\n \"deflist\",\n \"parser\",\n \"veriKami\"\n ],\n \"author\": \"veriKami <verikami@gmail.com> (https://verikami.com/)\",\n \"license\": \"MIT\",\n \"repository\": \"github:veriKami/remark-deflist-revisited-astro\",\n \"homepage\": \"https://github.com/veriKami/remark-deflist-revisited-astro#readme\",\n \"type\": \"module\",\n \"engines\": {\n \"node\": \">=20.0.0\"\n },\n \"scripts\": {\n \"dev\": \"astro dev\",\n \"build\": \"astro build\",\n \"preview\": \"astro preview\",\n \"astro\": \"astro\"\n },\n \"dependencies\": {\n \"@verikami/remark-deflist-revisited\": \"^0.6.4\",\n \"astro\": \"^5.14.1\"\n }\n}\n", "public/style.css": "body {\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n line-height: 1.6;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: #333;\n}\n.container {\n background: white;\n border-radius: 12px;\n padding: 30px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\nh1,\nh2 { color: #667eea; margin-top: 0; }\ndl { margin: 20px 0; }\ndt {\n font-weight: bold;\n margin: 20px 0 0;\n color: #667eea;\n font-size: 1.1em;\n}\ndd {\n margin: 5px 0 0 40px;\n color: #666;\n}\nul { margin: 0 10px; }\nli { margin: 0; }\n", "src/layouts/Layout.astro": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width\" />\n <title>Remark Deflist Revisited °// Astro Example</title>\n <meta name=\"author\" content=\"veriKami °// Weronika Kami\" />\n <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />\n </head>\n <body>\n <div class=\"container\">\n <slot />\n <hr style=\"margin: 40px 0; border: none; border-top: 1px solid #ddd;\">\n <p style=\"text-align: center; color: #888; font-size: 0.9em;\">\n Created by <a href=\"https://verikami.com\" target=\"_blank\">veriKami</a> °//\n <a href=\"https://linkedin.com/in/verikami\" target=\"_blank\">Weronika Kami</a> °//\n <a href=\"https://www.npmjs.com/package/@verikami/remark-deflist-revisited\"\n target=\"_blank\">remark-deflist-revisited</a>\n </p>\n </div>\n </body>\n</html>\n", "src/pages/index.md": "---\nlayout: \"../layouts/Layout.astro\"\ntitle: \"Remark Deflist Revisited °// Astro Example\"\n---\n\n# Remark Deflist Revisited °// Astro Example\n\nNode.js\n: JavaScript runtime built on Chrome's V8 engine\n: Uses an event-driven, non-blocking I/O model\n\nRemark Deflist Revisited\n: Compatible with Bun, Deno and Cloudflare Workers\n: Enhanced definition lists support\n: Supports nested lists\n\nMarkdown\n: Lightweight markup language\n: Easy to write and read\n\n## Features\n\nNested Lists\n: Support for complex structures\n: - Item A\n - Item B\n - Item C\n\nCompatibility\n: Works with modern runtimes\n: - Node.js\n - Cloudflare Workers\n - Deno\n - Bun\n", "tsconfig.json": "{\n \"extends\": \"astro/tsconfigs/strict\",\n \"include\": [\".astro/types.d.ts\", \"**/*\"],\n \"exclude\": [\"dist\"]\n}\n" }; async function ensureDir(dir) { try { await mkdir(dir, { recursive: true }); } catch (err) { if (err.code !== "EEXIST") throw err; } } async function generate(target = ".", $ = true) { if ($) console.log("\n🚺 CREATING PROJECT\n"); for (const [filePath, content] of Object.entries(files)) { const fullPath = join(target, filePath); await ensureDir(dirname(fullPath)); await writeFile(fullPath, content); if ($) console.log(" 📄", filePath) else console.log(" ↳ Created:", filePath) } if ($) console.log("\n✅ PROJECT READY"); } if (import.meta.url.endsWith(process.argv[1])) { if (!process.argv[2]) { console.log("\nUSAGE: node pack/bundle.astro.js <path>"); console.log("USING (default): remark-deflist-revisited-astro"); } const target = process.argv[2] || "remark-deflist-revisited-astro"; const $ = process.argv[3] === "false" ? false : true; generate(target, $).catch(console.error); } export default generate;