{"id":30066335,"url":"https://github.com/ejfox/docgrind","last_synced_at":"2026-02-11T01:03:14.544Z","repository":{"id":307846684,"uuid":"1030873273","full_name":"ejfox/docgrind","owner":"ejfox","description":"grind through javascript documentation. build muscle memory. ship better code.","archived":false,"fork":false,"pushed_at":"2025-08-02T14:27:33.000Z","size":3862,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-02T16:26:47.516Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ejfox.png","metadata":{"files":{"readme":"README-MDN.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-02T14:08:48.000Z","updated_at":"2025-08-02T14:27:36.000Z","dependencies_parsed_at":"2025-08-02T16:37:03.588Z","dependency_job_id":null,"html_url":"https://github.com/ejfox/docgrind","commit_stats":null,"previous_names":["ejfox/docgrind"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ejfox/docgrind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fdocgrind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fdocgrind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fdocgrind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fdocgrind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ejfox","download_url":"https://codeload.github.com/ejfox/docgrind/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fdocgrind/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269383673,"owners_count":24408267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-08T07:29:45.603Z","updated_at":"2026-02-11T01:03:14.525Z","avatar_url":"https://github.com/ejfox.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MDN Content Fetcher System\n\nA robust and comprehensive system for integrating MDN (Mozilla Developer Network) JavaScript documentation into your Nuxt 3 application. This system provides intelligent content fetching, caching, navigation, and search capabilities.\n\n## Features\n\n- **🔄 Content Fetching**: Automated fetching from MDN GitHub repository\n- **🚀 Intelligent Caching**: Multi-level caching with TTL and LRU eviction\n- **🧭 Navigation System**: Hierarchical chapter navigation with breadcrumbs\n- **🔍 Advanced Search**: Full-text search with filtering and suggestions\n- **⚡ Performance**: Optimized for large content collections\n- **📱 Responsive**: Mobile-friendly components and UI\n- **🎨 Customizable**: Flexible configuration and theming\n- **🔒 Error Handling**: Comprehensive error handling and retry logic\n\n## Installation\n\n1. **Install Dependencies**\n```bash\nnpm install @nuxt/content @octokit/rest gray-matter markdown-it fuse.js\nnpm install -D @types/markdown-it\n```\n\n2. **Environment Variables**\nCreate a `.env` file with your GitHub token (optional but recommended for higher rate limits):\n```env\nGITHUB_TOKEN=your_github_token_here\n```\n\n3. **Configuration**\nThe system is pre-configured in `nuxt.config.ts` with sensible defaults.\n\n## Usage\n\n### Basic Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cMDNErrorHandler \n      :loading=\"loading\" \n      :error=\"error\"\n      :on-retry=\"initialize\"\n    \u003e\n      \u003cdiv v-if=\"contentTree\"\u003e\n        \u003cMDNContentTree \n          :tree=\"contentTree\"\n          :max-depth=\"3\"\n          :show-descriptions=\"true\"\n        /\u003e\n      \u003c/div\u003e\n    \u003c/MDNErrorHandler\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { useMDNContent } from '~/composables/useMDNContent';\n\nconst { contentTree, loading, error, initialize } = useMDNContent();\n\nonMounted(() =\u003e {\n  initialize();\n});\n\u003c/script\u003e\n```\n\n### Content Fetching\n\n```javascript\nconst { fetchContent } = useMDNContent();\n\n// Fetch specific content\nconst content = await fetchContent('/guide/introduction');\n\n// Fetch with options\nconst content = await fetchContent('/reference/global_objects/array', {\n  useCache: true,\n  cacheExpiry: 3600000 // 1 hour\n});\n```\n\n### Search Functionality\n\n```javascript\nconst { search, searchResults } = useMDNSearch();\n\n// Basic search\nawait search('Promise');\n\n// Advanced search with filters\nawait search('async', {\n  filters: {\n    pageType: ['guide', 'reference'],\n    tags: ['javascript', 'async']\n  },\n  limit: 20\n});\n```\n\n### Navigation\n\n```javascript\nconst { \n  getBreadcrumbs, \n  getNextChapter, \n  getPreviousChapter \n} = useMDNContent();\n\n// Get breadcrumbs for current page\nconst breadcrumbs = getBreadcrumbs('/guide/functions');\n\n// Get next/previous chapters\nconst nextChapter = getNextChapter('/guide/functions');\nconst prevChapter = getPreviousChapter('/guide/functions');\n```\n\n## Components\n\n### MDNErrorHandler\n\nHandles loading states, errors, and retry logic:\n\n```vue\n\u003cMDNErrorHandler \n  :loading=\"loading\" \n  :error=\"error\"\n  :on-retry=\"retryFunction\"\n  :on-clear-error=\"clearError\"\n  :show-retry-button=\"true\"\n\u003e\n  \u003cYourContent /\u003e\n\u003c/MDNErrorHandler\u003e\n```\n\n### MDNLoadingState\n\nCustomizable loading indicator:\n\n```vue\n\u003cMDNLoadingState\n  title=\"Loading Content\"\n  message=\"Fetching documentation...\"\n  :progress=\"75\"\n  :steps=\"loadingSteps\"\n  :current-step=\"2\"\n  size=\"large\"\n  variant=\"primary\"\n/\u003e\n```\n\n### MDNContentTree\n\nInteractive content tree navigation:\n\n```vue\n\u003cMDNContentTree\n  :tree=\"contentTree\"\n  :max-depth=\"3\"\n  :show-descriptions=\"true\"\n  :show-tags=\"true\"\n  :show-counts=\"true\"\n  :default-expanded=\"false\"\n  @node-select=\"handleNodeSelect\"\n/\u003e\n```\n\n## Composables\n\n### useMDNContent()\n\nMain composable for content management:\n\n```javascript\nconst {\n  // State\n  content,\n  contentTree,\n  loading,\n  error,\n  \n  // Methods\n  fetchContent,\n  fetchContentTree,\n  initialize,\n  clearCache,\n  getContentStats\n} = useMDNContent();\n```\n\n### useMDNSearch()\n\nSearch functionality:\n\n```javascript\nconst {\n  // State\n  query,\n  results,\n  suggestions,\n  \n  // Methods\n  search,\n  getSuggestions,\n  clearSearch,\n  setFilters\n} = useMDNSearch();\n```\n\n## Configuration\n\n### Nuxt Config\n\n```typescript\nexport default defineNuxtConfig({\n  modules: ['@nuxt/content'],\n  content: {\n    sources: {\n      mdn: {\n        driver: 'github',\n        repo: 'mdn/content',\n        branch: 'main',\n        prefix: '/mdn',\n        dir: 'files/en-us/web/javascript'\n      }\n    }\n  },\n  runtimeConfig: {\n    githubToken: process.env.GITHUB_TOKEN,\n    public: {\n      mdnCacheExpiry: 1000 * 60 * 60 * 24 // 24 hours\n    }\n  }\n});\n```\n\n### Cache Configuration\n\n```javascript\nconst cache = getMDNCache({\n  maxSize: 1000,\n  defaultTTL: 3600000, // 1 hour\n  cleanupInterval: 300000, // 5 minutes\n  compressionEnabled: true\n});\n```\n\n## Architecture\n\n### Core Components\n\n- **MDNFetcher**: GitHub API integration and content parsing\n- **MDNContentCache**: Intelligent caching with LRU eviction\n- **MDNNavigationManager**: Hierarchical navigation management\n- **Composables**: Vue 3 composables for reactive state management\n\n### Data Flow\n\n1. **Content Request** → MDNFetcher checks cache\n2. **Cache Miss** → Fetch from GitHub API\n3. **Parse Content** → Extract frontmatter and markdown\n4. **Cache Result** → Store with TTL\n5. **Return Content** → Deliver to component\n\n### Caching Strategy\n\n- **L1 Cache**: In-memory cache for frequently accessed content\n- **L2 Cache**: Browser storage for persistent caching\n- **TTL-based**: Automatic expiration and cleanup\n- **LRU Eviction**: Least recently used items removed first\n\n## Error Handling\n\nThe system includes comprehensive error handling:\n\n- **Network Errors**: Retry with exponential backoff\n- **Rate Limiting**: Automatic retry with delay\n- **Content Not Found**: Graceful fallback\n- **Parse Errors**: Detailed error reporting\n\n## Performance\n\n- **Lazy Loading**: Content loaded on demand\n- **Prefetching**: Related content preloaded\n- **Tree Shaking**: Only used components bundled\n- **Compression**: Content compressed in cache\n\n## TypeScript Support\n\nFull TypeScript support with comprehensive type definitions:\n\n```typescript\ninterface MDNContent {\n  title: string;\n  description?: string;\n  frontmatter: MDNFrontmatter;\n  body: string;\n  // ... more properties\n}\n```\n\n## Browser Compatibility\n\n- Modern browsers with ES2018+ support\n- Vue 3 and Nuxt 3 compatibility\n- Progressive enhancement for older browsers\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Add tests if applicable\n5. Submit a pull request\n\n## License\n\nThis system is designed to work with MDN Web Docs content, which is licensed under CC-BY-SA 2.5.\n\n## Support\n\nFor issues and questions:\n- Check the error messages and suggestions\n- Review the TypeScript types for API documentation\n- Examine the example components for usage patterns\n\n## Changelog\n\n### v1.0.0\n- Initial release with core functionality\n- Content fetching and caching\n- Navigation and search\n- Error handling and loading states\n- Full TypeScript support","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejfox%2Fdocgrind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fejfox%2Fdocgrind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejfox%2Fdocgrind/lists"}