Meta Tag Generator
Run ID: 69c94f2ca17964d77e86d8ed•2026-03-29SEO
PantheraHive BOS
BOS Dashboard

Step 1 of 2: Meta Tag Generation - Optimized Titles, Descriptions & Open Graph Tags

This deliverable provides a comprehensive generation of optimized meta titles, meta descriptions, and Open Graph (OG) tags. These elements are crucial for improving your website's visibility in search engine results (SEO) and enhancing its presentation when shared on social media platforms.

Workflow Description: Generate optimized meta titles, descriptions, and Open Graph tags for multiple pages.

1. Introduction: The Power of Optimized Meta & Open Graph Tags

In today's digital landscape, how your website appears to search engines and social media users is paramount.

While specific page content and target keywords are essential for truly bespoke optimization, this output provides a detailed framework and examples based on common website page types. We will also outline the principles used for optimization and the next steps to apply this to your specific pages.

2. Core Principles for Optimization

The following principles guide the generation of effective meta and Open Graph tags:

* Meta Title: ~50-60 characters (pixels vary)

* Meta Description: ~150-160 characters (pixels vary)

* Open Graph Title: Up to 60-70 characters (can be longer than meta title for social)

* Open Graph Description: Up to 200-300 characters (can be longer than meta description for social)

3. Generated Meta Tag Examples (Hypothetical Pages)

To demonstrate the output, we've generated tags for a hypothetical e-commerce business specializing in "Sustainable Outdoor Gear." We've included a variety of common page types.

Note:

3.1. Homepage

html • 1,206 chars
<!-- Meta Tags for SEO -->
<title>Top 5 Sustainable Camping Tips for Beginners | [Your Brand Name] Blog</title>
<meta name="description" content="Learn how to camp responsibly with our top 5 sustainable camping tips for beginners. Embrace eco-friendly practices and leave no trace with [Your Brand Name].">

<!-- Open Graph Tags for Social Sharing -->
<meta property="og:title" content="Master Sustainable Camping: Top 5 Eco-Friendly Tips for Beginners | [Your Brand Name]">
<meta property="og:description" content="Ready for your first eco-conscious camping trip? Our guide covers essential sustainable practices to help you enjoy nature responsibly.">
<meta property="og:image" content="[Image URL of a beautiful, clean campsite or a person demonstrating an eco-friendly camping practice]">
<meta property="og:url" content="https://www.[Your Website URL]/blog/sustainable-camping-tips">
<meta property="og:type" content="article">
<meta property="article:published_time" content="2023-10-27T10:00:00Z"> <!-- Replace with actual publish date -->
<meta property="article:author" content="[Your Brand Name] Team"> <!-- Replace with author name -->
<meta property="og:site_name" content="[Your Brand Name]">
Sandboxed live preview

4. Actionable Next Steps for Implementation

To fully leverage this generation for your website, please provide the following information for each page you wish to optimize:

  1. Page URL: The full URL of the page.
  2. Page Title (H1/Main Heading): The primary heading on the page, as it appears to users.
  3. Brief Page Summary: 2-3 sentences describing the core content and purpose of the page.
  4. Target Primary Keyword: The single most important keyword you want this page to rank for.
  5. Target Secondary Keywords (Optional): 2-3 additional relevant keywords.
  6. Key Selling Points/Unique Value Proposition (for product/service pages): What makes this page's offering stand out?
  7. Preferred Call-to-Action (for product/service pages): E.g., "Shop Now," "Learn More," "Get a Quote."
  8. Suggested og:image URL (or description of ideal image): A high-quality, visually appealing image relevant to the page content, ideally with a 1200x630 pixel aspect ratio for optimal social display.

Once we receive this information, we will generate tailored, optimized meta titles, descriptions, and Open Graph tags specific to each of your pages, ensuring maximum impact for SEO and social sharing.

5. Important Considerations

  • Regular Review: SEO and social media best practices evolve. It's advisable to review and update your meta and OG tags periodically (e.g., annually, or after significant content changes).
  • A/B Testing: For critical pages, consider A/B testing different meta descriptions or OG titles to see which ones perform best in terms of CTR and engagement.
  • Twitter Cards: While not explicitly generated here, Twitter Cards often use Open Graph tags as a fallback. For specific Twitter-only optimizations, dedicated Twitter Card tags can be added.
  • Schema Markup: For advanced SEO, consider implementing Schema Markup (structured data) in addition to meta tags. This helps search engines understand your content more deeply and can lead to rich snippets in SERPs.

This concludes Step 1 of 2. We look forward to your input to proceed with the tailored meta tag generation for your specific pages.

gemini Output

Meta Tag Generation: Optimized Titles, Descriptions, and Open Graph Tags

This deliverable provides a comprehensive set of optimized meta titles, meta descriptions, and Open Graph (OG) tags for key pages of your website. These tags are crucial for improving your search engine visibility (SEO), enhancing click-through rates from search results, and ensuring compelling presentation when your content is shared on social media platforms.

The generated tags are designed to be concise, keyword-rich, and engaging, adhering to current best practices and character limits for optimal performance.

General Best Practices & Recommendations

Before diving into the specific tags, please consider these general guidelines for optimal performance:

  • Character Limits are Guidelines: While we've adhered to common character limits, search engines and social platforms may occasionally display slightly more or less. Focus on conveying your core message within the recommended ranges.
  • Keyword Integration: We've strategically included relevant keywords in titles and descriptions to help search engines understand your page's content and match it with user queries.
  • Uniqueness: Each page's meta title and description should be unique to accurately reflect its content and avoid duplicate content penalties from search engines.
  • Call to Action (CTA): Meta descriptions often benefit from a soft CTA (e.g., "Learn more," "Discover our solutions," "Get a quote") to encourage clicks.
  • Open Graph Image Quality: Ensure your og:image URLs point to high-quality, visually appealing images that are relevant to the page content. Recommended dimensions are typically 1200x630 pixels for optimal display across platforms.
  • Canonical URLs: Ensure the og:url tag points to the canonical (preferred) version of your page's URL to prevent duplicate content issues.
  • Regular Review: SEO and social media best practices evolve. We recommend periodically reviewing and updating your meta tags to maintain relevance and performance.

Generated Meta Tags for Key Pages

Below are the optimized meta tags for your primary website pages. Please replace placeholder URLs (e.g., https://www.yourdomain.com/) and image paths (/images/) with your actual website information.

1. Homepage

Page Focus: Introduction to PantheraTech Solutions, highlighting core AI-powered business solutions.

  • Meta Title:

    <title>PantheraTech Solutions | AI-Powered Business Transformation</title>

* Length: 59 characters

* Purpose: Clearly states the company name and primary value proposition, optimized for search engines.

  • Meta Description:

    <meta name="description" content="Unlock your business potential with PantheraTech's AI solutions. Specializing in machine learning, data analytics & digital transformation." />

* Length: 157 characters

* Purpose: Provides a concise summary of offerings, includes relevant keywords, and encourages clicks.

  • Open Graph Tags (for Social Media):

    <meta property="og:title" content="PantheraTech Solutions | AI-Powered Business Transformation" />
    <meta property="og:description" content="Empowering businesses with cutting-edge AI, machine learning, and data analytics for sustainable growth and innovation." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.yourdomain.com/" />
    <meta property="og:image" content="https://www.yourdomain.com/images/og-home.jpg" />
    <meta property="og:site_name" content="PantheraTech Solutions" />

* og:title: Compelling title for social shares.

* og:description: Engaging description for social media, slightly expanded for more context.

* og:type: Specifies the content is a general website.

* og:url: The canonical URL of your homepage.

* og:image: A visually appealing image representing your brand/homepage.

* og:site_name: Your company's brand name.

2. Services Page

Page Focus: Detailing the range of AI consulting, development, and data analytics services offered.

  • Meta Title:

    <title>AI Business Solutions & Consulting | PantheraTech Services</title>

* Length: 58 characters

* Purpose: Clearly outlines the page's focus on AI services and consulting, including the company name.

  • Meta Description:

    <meta name="description" content="Explore PantheraTech's comprehensive AI services: custom AI development, data analytics, ML integration, and expert consulting." />

* Length: 157 characters

* Purpose: Summarizes key service offerings, using relevant keywords for search visibility.

  • Open Graph Tags (for Social Media):

    <meta property="og:title" content="Our AI Services | Custom AI Development & Consulting" />
    <meta property="og:description" content="Discover how PantheraTech's tailored AI, machine learning, and data solutions can transform your business operations and drive efficiency." />
    <meta property="og:type" content="service" />
    <meta property="og:url" content="https://www.yourdomain.com/services/" />
    <meta property="og:image" content="https://www.yourdomain.com/images/og-services.jpg" />
    <meta property="og:site_name" content="PantheraTech Solutions" />

* og:title: Focuses on service types for social sharing.

* og:description: Highlights the transformative power of your services.

* og:type: Indicates the content is a service offering.

* og:url: The canonical URL of your services page.

* og:image: An image representing your services or technology.

* og:site_name: Your company's brand name.

3. About Us Page

Page Focus: Company mission, values, history, and the team behind PantheraTech Solutions.

  • Meta Title:

    <title>About PantheraTech Solutions | Our Mission & Values</title>

* Length: 53 characters

* Purpose: Clearly states the page's content, emphasizing company identity.

  • Meta Description:

    <meta name="description" content="Learn about PantheraTech's mission to drive innovation through AI, our core values, and the expert team behind our success." />

* Length: 149 characters

* Purpose: Invites users to explore the company's story and ethos.

  • Open Graph Tags (for Social Media):

    <meta property="og:title" content="About Us | Driving Innovation with AI at PantheraTech" />
    <meta property="og:description" content="PantheraTech Solutions: Our journey, vision, and unwavering commitment to excellence in AI-powered business transformation." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.yourdomain.com/about/" />
    <meta property="og:image" content="https://www.yourdomain.com/images/og-about.jpg" />
    <meta property="og:site_name" content="PantheraTech Solutions" />

* og:title: Highlights innovation and company name for social shares.

* og:description: Emphasizes the company's narrative and commitment.

* og:type: General website type.

* og:url: The canonical URL of your about page.

* og:image: A team photo, company logo, or image representing your values.

* og:site_name: Your company's brand name.

4. Contact Us Page

Page Focus: Providing contact information, a contact form, and ways to get in touch with PantheraTech.

  • Meta Title:

    <title>Contact PantheraTech Solutions | Get in Touch for AI Help</title>

* Length: 58 characters

* Purpose: Direct and action-oriented, inviting users to connect for AI-related inquiries.

  • Meta Description:

    <meta name="description" content="Have questions about AI solutions? Contact PantheraTech for expert support, partnership inquiries, or a free consultation today!" />

* Length: 158 characters

* Purpose: Clearly states the purpose of the page and offers a call to action.

  • Open Graph Tags (for Social Media):

    <meta property="og:title" content="Contact Us | PantheraTech Solutions" />
    <meta property="og:description" content="Reach out to PantheraTech's team for inquiries about AI services, technical support, or to schedule a no-obligation consultation." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.yourdomain.com/contact/" />
    <meta property="og:image" content="https://www.yourdomain.com/images/og-contact.jpg" />
    <meta property="og:site_name" content="PantheraTech Solutions" />

* og:title: Simple and direct for social sharing.

* og:description: Provides clear reasons to contact and encourages interaction.

* og:type: General website type.

* og:url: The canonical URL of your contact page.

* og:image: An image representing communication or customer service.

* og:site_name: Your company's brand name.

Implementation Instructions

To implement these meta tags on your website, you will need to add them within the <head> section of each respective HTML page.

Example for a Single Page (e.g., Homepage):


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
meta_tag_generator.html
Download source file
Copy all content
Full output as text
Download ZIP
IDE-ready project ZIP
Copy share link
Permanent URL for this run
Get Embed Code
Embed this result on any website
Print / Save PDF
Use browser print dialog
\n\n\n"); var hasSrcMain=Object.keys(extracted).some(function(k){return k.indexOf("src/main")>=0;}); if(!hasSrcMain) zip.file(folder+"src/main."+ext,"import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n \n)\n"); var hasSrcApp=Object.keys(extracted).some(function(k){return k==="src/App."+ext||k==="App."+ext;}); if(!hasSrcApp) zip.file(folder+"src/App."+ext,"import React from 'react'\nimport './App.css'\n\nfunction App(){\n return(\n
\n
\n

"+slugTitle(pn)+"

\n

Built with PantheraHive BOS

\n
\n
\n )\n}\nexport default App\n"); zip.file(folder+"src/index.css","*{margin:0;padding:0;box-sizing:border-box}\nbody{font-family:system-ui,-apple-system,sans-serif;background:#f0f2f5;color:#1a1a2e}\n.app{min-height:100vh;display:flex;flex-direction:column}\n.app-header{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px}\nh1{font-size:2.5rem;font-weight:700}\n"); zip.file(folder+"src/App.css",""); zip.file(folder+"src/components/.gitkeep",""); zip.file(folder+"src/pages/.gitkeep",""); zip.file(folder+"src/hooks/.gitkeep",""); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\nnpm run dev\n\`\`\`\n\n## Build\n\`\`\`bash\nnpm run build\n\`\`\`\n\n## Open in IDE\nOpen the project folder in VS Code or WebStorm.\n"); zip.file(folder+".gitignore","node_modules/\ndist/\n.env\n.DS_Store\n*.local\n"); } /* --- Vue (Vite + Composition API + TypeScript) --- */ function buildVue(zip,folder,app,code,panelTxt){ var pn=pkgName(app); var C=cc(pn); var extracted=extractCode(panelTxt); zip.file(folder+"package.json",'{\n "name": "'+pn+'",\n "version": "0.0.0",\n "type": "module",\n "scripts": {\n "dev": "vite",\n "build": "vue-tsc -b && vite build",\n "preview": "vite preview"\n },\n "dependencies": {\n "vue": "^3.5.13",\n "vue-router": "^4.4.5",\n "pinia": "^2.3.0",\n "axios": "^1.7.9"\n },\n "devDependencies": {\n "@vitejs/plugin-vue": "^5.2.1",\n "typescript": "~5.7.3",\n "vite": "^6.0.5",\n "vue-tsc": "^2.2.0"\n }\n}\n'); zip.file(folder+"vite.config.ts","import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport { resolve } from 'path'\n\nexport default defineConfig({\n plugins: [vue()],\n resolve: { alias: { '@': resolve(__dirname,'src') } }\n})\n"); zip.file(folder+"tsconfig.json",'{"files":[],"references":[{"path":"./tsconfig.app.json"},{"path":"./tsconfig.node.json"}]}\n'); zip.file(folder+"tsconfig.app.json",'{\n "compilerOptions":{\n "target":"ES2020","useDefineForClassFields":true,"module":"ESNext","lib":["ES2020","DOM","DOM.Iterable"],\n "skipLibCheck":true,"moduleResolution":"bundler","allowImportingTsExtensions":true,\n "isolatedModules":true,"moduleDetection":"force","noEmit":true,"jsxImportSource":"vue",\n "strict":true,"paths":{"@/*":["./src/*"]}\n },\n "include":["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"]\n}\n'); zip.file(folder+"env.d.ts","/// \n"); zip.file(folder+"index.html","\n\n\n \n \n "+slugTitle(pn)+"\n\n\n
\n \n\n\n"); var hasMain=Object.keys(extracted).some(function(k){return k==="src/main.ts"||k==="main.ts";}); if(!hasMain) zip.file(folder+"src/main.ts","import { createApp } from 'vue'\nimport { createPinia } from 'pinia'\nimport App from './App.vue'\nimport './assets/main.css'\n\nconst app = createApp(App)\napp.use(createPinia())\napp.mount('#app')\n"); var hasApp=Object.keys(extracted).some(function(k){return k.indexOf("App.vue")>=0;}); if(!hasApp) zip.file(folder+"src/App.vue","\n\n\n\n\n"); zip.file(folder+"src/assets/main.css","*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#fff;color:#213547}\n"); zip.file(folder+"src/components/.gitkeep",""); zip.file(folder+"src/views/.gitkeep",""); zip.file(folder+"src/stores/.gitkeep",""); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\nnpm run dev\n\`\`\`\n\n## Build\n\`\`\`bash\nnpm run build\n\`\`\`\n\nOpen in VS Code or WebStorm.\n"); zip.file(folder+".gitignore","node_modules/\ndist/\n.env\n.DS_Store\n*.local\n"); } /* --- Angular (v19 standalone) --- */ function buildAngular(zip,folder,app,code,panelTxt){ var pn=pkgName(app); var C=cc(pn); var sel=pn.replace(/_/g,"-"); var extracted=extractCode(panelTxt); zip.file(folder+"package.json",'{\n "name": "'+pn+'",\n "version": "0.0.0",\n "scripts": {\n "ng": "ng",\n "start": "ng serve",\n "build": "ng build",\n "test": "ng test"\n },\n "dependencies": {\n "@angular/animations": "^19.0.0",\n "@angular/common": "^19.0.0",\n "@angular/compiler": "^19.0.0",\n "@angular/core": "^19.0.0",\n "@angular/forms": "^19.0.0",\n "@angular/platform-browser": "^19.0.0",\n "@angular/platform-browser-dynamic": "^19.0.0",\n "@angular/router": "^19.0.0",\n "rxjs": "~7.8.0",\n "tslib": "^2.3.0",\n "zone.js": "~0.15.0"\n },\n "devDependencies": {\n "@angular-devkit/build-angular": "^19.0.0",\n "@angular/cli": "^19.0.0",\n "@angular/compiler-cli": "^19.0.0",\n "typescript": "~5.6.0"\n }\n}\n'); zip.file(folder+"angular.json",'{\n "$schema": "./node_modules/@angular/cli/lib/config/schema.json",\n "version": 1,\n "newProjectRoot": "projects",\n "projects": {\n "'+pn+'": {\n "projectType": "application",\n "root": "",\n "sourceRoot": "src",\n "prefix": "app",\n "architect": {\n "build": {\n "builder": "@angular-devkit/build-angular:application",\n "options": {\n "outputPath": "dist/'+pn+'",\n "index": "src/index.html",\n "browser": "src/main.ts",\n "tsConfig": "tsconfig.app.json",\n "styles": ["src/styles.css"],\n "scripts": []\n }\n },\n "serve": {"builder":"@angular-devkit/build-angular:dev-server","configurations":{"production":{"buildTarget":"'+pn+':build:production"},"development":{"buildTarget":"'+pn+':build:development"}},"defaultConfiguration":"development"}\n }\n }\n }\n}\n'); zip.file(folder+"tsconfig.json",'{\n "compileOnSave": false,\n "compilerOptions": {"baseUrl":"./","outDir":"./dist/out-tsc","forceConsistentCasingInFileNames":true,"strict":true,"noImplicitOverride":true,"noPropertyAccessFromIndexSignature":true,"noImplicitReturns":true,"noFallthroughCasesInSwitch":true,"paths":{"@/*":["src/*"]},"skipLibCheck":true,"esModuleInterop":true,"sourceMap":true,"declaration":false,"experimentalDecorators":true,"moduleResolution":"bundler","importHelpers":true,"target":"ES2022","module":"ES2022","useDefineForClassFields":false,"lib":["ES2022","dom"]},\n "references":[{"path":"./tsconfig.app.json"}]\n}\n'); zip.file(folder+"tsconfig.app.json",'{\n "extends":"./tsconfig.json",\n "compilerOptions":{"outDir":"./dist/out-tsc","types":[]},\n "files":["src/main.ts"],\n "include":["src/**/*.d.ts"]\n}\n'); zip.file(folder+"src/index.html","\n\n\n \n "+slugTitle(pn)+"\n \n \n \n\n\n \n\n\n"); zip.file(folder+"src/main.ts","import { bootstrapApplication } from '@angular/platform-browser';\nimport { appConfig } from './app/app.config';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, appConfig)\n .catch(err => console.error(err));\n"); zip.file(folder+"src/styles.css","* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { font-family: system-ui, -apple-system, sans-serif; background: #f9fafb; color: #111827; }\n"); var hasComp=Object.keys(extracted).some(function(k){return k.indexOf("app.component")>=0;}); if(!hasComp){ zip.file(folder+"src/app/app.component.ts","import { Component } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [RouterOutlet],\n templateUrl: './app.component.html',\n styleUrl: './app.component.css'\n})\nexport class AppComponent {\n title = '"+pn+"';\n}\n"); zip.file(folder+"src/app/app.component.html","
\n
\n

"+slugTitle(pn)+"

\n

Built with PantheraHive BOS

\n
\n \n
\n"); zip.file(folder+"src/app/app.component.css",".app-header{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px}h1{font-size:2.5rem;font-weight:700;color:#6366f1}\n"); } zip.file(folder+"src/app/app.config.ts","import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { provideRouter } from '@angular/router';\nimport { routes } from './app.routes';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideZoneChangeDetection({ eventCoalescing: true }),\n provideRouter(routes)\n ]\n};\n"); zip.file(folder+"src/app/app.routes.ts","import { Routes } from '@angular/router';\n\nexport const routes: Routes = [];\n"); Object.keys(extracted).forEach(function(p){ var fp=p.startsWith("src/")?p:"src/"+p; zip.file(folder+fp,extracted[p]); }); zip.file(folder+"README.md","# "+slugTitle(pn)+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\nng serve\n# or: npm start\n\`\`\`\n\n## Build\n\`\`\`bash\nng build\n\`\`\`\n\nOpen in VS Code with Angular Language Service extension.\n"); zip.file(folder+".gitignore","node_modules/\ndist/\n.env\n.DS_Store\n*.local\n.angular/\n"); } /* --- Python --- */ function buildPython(zip,folder,app,code){ var title=slugTitle(app); var pn=pkgName(app); var src=code.replace(/^\`\`\`[\w]*\n?/m,"").replace(/\n?\`\`\`$/m,"").trim(); var reqMap={"numpy":"numpy","pandas":"pandas","sklearn":"scikit-learn","tensorflow":"tensorflow","torch":"torch","flask":"flask","fastapi":"fastapi","uvicorn":"uvicorn","requests":"requests","sqlalchemy":"sqlalchemy","pydantic":"pydantic","dotenv":"python-dotenv","PIL":"Pillow","cv2":"opencv-python","matplotlib":"matplotlib","seaborn":"seaborn","scipy":"scipy"}; var reqs=[]; Object.keys(reqMap).forEach(function(k){if(src.indexOf("import "+k)>=0||src.indexOf("from "+k)>=0)reqs.push(reqMap[k]);}); var reqsTxt=reqs.length?reqs.join("\n"):"# add dependencies here\n"; zip.file(folder+"main.py",src||"# "+title+"\n# Generated by PantheraHive BOS\n\nprint(title+\" loaded\")\n"); zip.file(folder+"requirements.txt",reqsTxt); zip.file(folder+".env.example","# Environment variables\n"); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\npython3 -m venv .venv\nsource .venv/bin/activate\npip install -r requirements.txt\n\`\`\`\n\n## Run\n\`\`\`bash\npython main.py\n\`\`\`\n"); zip.file(folder+".gitignore",".venv/\n__pycache__/\n*.pyc\n.env\n.DS_Store\n"); } /* --- Node.js --- */ function buildNode(zip,folder,app,code){ var title=slugTitle(app); var pn=pkgName(app); var src=code.replace(/^\`\`\`[\w]*\n?/m,"").replace(/\n?\`\`\`$/m,"").trim(); var depMap={"mongoose":"^8.0.0","dotenv":"^16.4.5","axios":"^1.7.9","cors":"^2.8.5","bcryptjs":"^2.4.3","jsonwebtoken":"^9.0.2","socket.io":"^4.7.4","uuid":"^9.0.1","zod":"^3.22.4","express":"^4.18.2"}; var deps={}; Object.keys(depMap).forEach(function(k){if(src.indexOf(k)>=0)deps[k]=depMap[k];}); if(!deps["express"])deps["express"]="^4.18.2"; var pkgJson=JSON.stringify({"name":pn,"version":"1.0.0","main":"src/index.js","scripts":{"start":"node src/index.js","dev":"nodemon src/index.js"},"dependencies":deps,"devDependencies":{"nodemon":"^3.0.3"}},null,2)+"\n"; zip.file(folder+"package.json",pkgJson); var fallback="const express=require(\"express\");\nconst app=express();\napp.use(express.json());\n\napp.get(\"/\",(req,res)=>{\n res.json({message:\""+title+" API\"});\n});\n\nconst PORT=process.env.PORT||3000;\napp.listen(PORT,()=>console.log(\"Server on port \"+PORT));\n"; zip.file(folder+"src/index.js",src||fallback); zip.file(folder+".env.example","PORT=3000\n"); zip.file(folder+".gitignore","node_modules/\n.env\n.DS_Store\n"); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\n## Setup\n\`\`\`bash\nnpm install\n\`\`\`\n\n## Run\n\`\`\`bash\nnpm run dev\n\`\`\`\n"); } /* --- Vanilla HTML --- */ function buildVanillaHtml(zip,folder,app,code){ var title=slugTitle(app); var isFullDoc=code.trim().toLowerCase().indexOf("=0||code.trim().toLowerCase().indexOf("=0; var indexHtml=isFullDoc?code:"\n\n\n\n\n"+title+"\n\n\n\n"+code+"\n\n\n\n"; zip.file(folder+"index.html",indexHtml); zip.file(folder+"style.css","/* "+title+" — styles */\n*{margin:0;padding:0;box-sizing:border-box}\nbody{font-family:system-ui,-apple-system,sans-serif;background:#fff;color:#1a1a2e}\n"); zip.file(folder+"script.js","/* "+title+" — scripts */\n"); zip.file(folder+"assets/.gitkeep",""); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\n## Open\nDouble-click \`index.html\` in your browser.\n\nOr serve locally:\n\`\`\`bash\nnpx serve .\n# or\npython3 -m http.server 3000\n\`\`\`\n"); zip.file(folder+".gitignore",".DS_Store\nnode_modules/\n.env\n"); } /* ===== MAIN ===== */ var sc=document.createElement("script"); sc.src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"; sc.onerror=function(){ if(lbl)lbl.textContent="Download ZIP"; alert("JSZip load failed — check connection."); }; sc.onload=function(){ var zip=new JSZip(); var base=(_phFname||"output").replace(/\.[^.]+$/,""); var app=base.toLowerCase().replace(/[^a-z0-9]+/g,"_").replace(/^_+|_+$/g,"")||"my_app"; var folder=app+"/"; var vc=document.getElementById("panel-content"); var panelTxt=vc?(vc.innerText||vc.textContent||""):""; var lang=detectLang(_phCode,panelTxt); if(_phIsHtml){ buildVanillaHtml(zip,folder,app,_phCode); } else if(lang==="flutter"){ buildFlutter(zip,folder,app,_phCode,panelTxt); } else if(lang==="react-native"){ buildReactNative(zip,folder,app,_phCode,panelTxt); } else if(lang==="swift"){ buildSwift(zip,folder,app,_phCode,panelTxt); } else if(lang==="kotlin"){ buildKotlin(zip,folder,app,_phCode,panelTxt); } else if(lang==="react"){ buildReact(zip,folder,app,_phCode,panelTxt); } else if(lang==="vue"){ buildVue(zip,folder,app,_phCode,panelTxt); } else if(lang==="angular"){ buildAngular(zip,folder,app,_phCode,panelTxt); } else if(lang==="python"){ buildPython(zip,folder,app,_phCode); } else if(lang==="node"){ buildNode(zip,folder,app,_phCode); } else { /* Document/content workflow */ var title=app.replace(/_/g," "); var md=_phAll||_phCode||panelTxt||"No content"; zip.file(folder+app+".md",md); var h=""+title+""; h+="

"+title+"

"; var hc=md.replace(/&/g,"&").replace(//g,">"); hc=hc.replace(/^### (.+)$/gm,"

$1

"); hc=hc.replace(/^## (.+)$/gm,"

$1

"); hc=hc.replace(/^# (.+)$/gm,"

$1

"); hc=hc.replace(/\*\*(.+?)\*\*/g,"$1"); hc=hc.replace(/\n{2,}/g,"

"); h+="

"+hc+"

Generated by PantheraHive BOS
"; zip.file(folder+app+".html",h); zip.file(folder+"README.md","# "+title+"\n\nGenerated by PantheraHive BOS.\n\nFiles:\n- "+app+".md (Markdown)\n- "+app+".html (styled HTML)\n"); } zip.generateAsync({type:"blob"}).then(function(blob){ var a=document.createElement("a"); a.href=URL.createObjectURL(blob); a.download=app+".zip"; a.click(); URL.revokeObjectURL(a.href); if(lbl)lbl.textContent="Download ZIP"; }); }; document.head.appendChild(sc); } function phShare(){navigator.clipboard.writeText(window.location.href).then(function(){var el=document.getElementById("ph-share-lbl");if(el){el.textContent="Link copied!";setTimeout(function(){el.textContent="Copy share link";},2500);}});}function phEmbed(){var runId=window.location.pathname.split("/").pop().replace(".html","");var embedUrl="https://pantherahive.com/embed/"+runId;var code='';navigator.clipboard.writeText(code).then(function(){var el=document.getElementById("ph-embed-lbl");if(el){el.textContent="Embed code copied!";setTimeout(function(){el.textContent="Get Embed Code";},2500);}});}

Created with Panthera Hive

← BOS Dashboard • My Library