Content improvements and added download template button

laravelcompany · Dec 25, 2024 · a4566a5 · a4566a5
1 parent fff57c5
commit a4566a5
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 15 deletions.
diff --git a/backend/supervisord.pid b/backend/supervisord.pid
@@ -0,0 +1 @@
+1
diff --git a/frontend/src/components/Header.astro b/frontend/src/components/Header.astro
@@ -9,16 +9,16 @@ import { SkipLinks } from 'accessible-astro-components'
       <a title="laravel mail package" href="/">Home</a>
     </li>
     <li class="menu-item">
-      <a title="demo laravel mail" href="/try">Try</a>
+      <a title="try laravel mail platform agency" href="/try">Try</a>
     </li>
     <li class="menu-item">
-      <a title="buy laravel mail" href="/buy">Buy</a>
+      <a title="buy laravel mail platform" href="/buy">Buy</a>
     </li>
     <li class="menu-item">
       <a title="free laravel mail templates" href="/templates">Templates</a>
     </li>
     <li class="menu-item">
-      <a title="free laravel mail templates" href="/contact">Contact</a>
+      <a title="free laravel mail templates agency" href="/contact">Contact</a>
     </li>
   </Navigation>
 </header>

diff --git a/frontend/src/components/Navigation.astro b/frontend/src/components/Navigation.astro
@@ -8,7 +8,9 @@ import { Image } from 'astro:assets'
 <div id="main-navigation" class="is-desktop py-8">
   <div class="container">
     <a href="/"  title="Laravel Mail" class="flex items-center gap-2 !no-underline">
-      <span class="font-bold">Laravel Mail</span>
+      <span class="font-bold">
+        <h1>Laravel Mail Platform</h1>
+      </span>
     </a>
     <div class="wrapper">
       <nav class="desktop-menu" aria-label="Main navigation desktop">

diff --git a/frontend/src/components/SiteMeta.astro b/frontend/src/components/SiteMeta.astro
@@ -3,23 +3,46 @@ import { ViewTransitions } from 'astro:transitions'
 
 const { title, description, url, image, author, subtitle } = Astro.props
 
+// Get the current URL parts
+const currentPath = Astro.url.pathname;
+const siteUrl = Astro.site?.toString() || 'https://yoursite.com'; // Add your default site URL here
+
+// Safely construct the canonical URL
+let canonicalURL;
+try {
+    // Remove trailing slash from site URL and leading slash from pathname to avoid double slashes
+    const baseUrl = siteUrl.replace(/\/$/, '');
+    const path = currentPath.replace(/^\//, '');
+    canonicalURL = `${baseUrl}/${path}`;
+} catch (error) {
+    console.error('Error constructing canonical URL:', error);
+    canonicalURL = siteUrl; // Fallback to base site URL
+}
 ---
 
 <!-- general meta -->
 <meta name="title" content={`${title} - ${subtitle}`} />
 <meta name="description" content={description} />
 <meta name="author" content={author} />
 
+<!-- canonical URL -->
+<link rel="canonical" href={canonicalURL} />
+<meta name="robots" content="index, follow" />
+
 <!-- open graph -->
 <meta property="og:title" content={`${title} - ${subtitle}`} />
 <meta property="og:description" content={description} />
 <meta property="og:type" content="website" />
-<meta property="og:url" content={url} />
+<meta property="og:url" content={canonicalURL} />
 <meta property="og:image" content={Astro.site ? `${Astro.site}${image}` : image} />
 
 <!-- twitter card -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content={`${title} - ${subtitle}`} />
+<meta name="twitter:description" content={description} />
+<meta name="twitter:image" content={Astro.site ? `${Astro.site}${image}` : image} />
 
 <!-- page title -->
 <title>{title} - {subtitle}</title>
 
-<ViewTransitions></ViewTransitions>
+<ViewTransitions />
diff --git a/frontend/src/pages/templates/[slug].astro b/frontend/src/pages/templates/[slug].astro
@@ -5,16 +5,13 @@ import db from '../../data/data.json';
 // Get the slug from the URL params.
 const { slug } = Astro.params;
 
-console.log(slug);
-
 // Find the matching template from the data.
 const template = db.data.find(template => template.slug === slug);
-console.log(template);
-const data = await fetch('http://0.0.0.0:11001/templates/' + template.slug ).then((response) =>
+const data = await fetch('http://0.0.0.0:11001/templates/' + template.slug).then((response) =>
   response.text()
 );
 
-
+// Instead of creating a Blob URL server-side, we'll handle the download client-side
 ---
 
 <DefaultLayout title={'Free laravel mail template - ' + template.name}>
@@ -30,7 +27,7 @@ const data = await fetch('http://0.0.0.0:11001/templates/' + template.slug ).the
         />
       </div>
 
-      <div class="mt-8 p-8  shadow-md rounded-lg">
+      <div class="mt-8 p-8 shadow-md rounded-lg">
         <p class="text-lg text-gray-600">
           <strong>Description:</strong> {template.description} 
         </p>
@@ -48,8 +45,43 @@ const data = await fetch('http://0.0.0.0:11001/templates/' + template.slug ).the
           5 stars: {template.votes['5'] || 0}
         </p>
       </div>
-      <iframe srcdoc={data} style="width: 100vw; height:65vh;margin-top:20px;" class="shadow-md rounded-lg" />
-
+
+      <iframe srcdoc={data} style="width: 100vw; height:65vh;margin-top:20px;" class="shadow-md rounded-lg"></iframe>
+
+      <div class="mt-10 text-2xl text-center">
+        <button 
+          id="downloadBtn"
+          class="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600"
+          data-template={data}
+          data-filename={template.slug + '.html'}
+        >
+          Download HTML Source Code
+        </button>
+      </div>
     </div>
   </section>
-</DefaultLayout>
+</DefaultLayout>
+
+<script>
+  // Handle download on the client side
+  document.getElementById('downloadBtn')?.addEventListener('click', function(e) {
+    const button = e.target as HTMLButtonElement;
+    const templateData = button.dataset.template;
+    const filename = button.dataset.filename;
+
+    if (templateData && filename) {
+      const blob = new Blob([templateData], { type: 'text/html' });
+      const url = URL.createObjectURL(blob);
+
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+
+      // Clean up
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    }
+  });
+</script>