feat(website): Custom Download URLs v0 (#747)

* feat(website): v0 of blueprint download urls

* feat: correct head title

Author: EPMatt

pnpm-lock.yaml

@@ -1,9 +1,11 @@
 import { Config } from '@docusaurus/types'
 import { themes as prismThemes } from 'prism-react-renderer'
 import path from 'path'
+import blueprintDownloaderPlugin from './src/plugins/blueprint-downloader-plugin/blueprint-downloader-plugin.js'
 
 // Create a custom plugin for webpack configuration
 // the purpose of this plugin is to allow the use of the @blueprints alias
+// and to copy blueprint files as static assets
 function webpackConfigPlugin() {
   return {
     name: 'webpack-config-plugin',
@@ -111,7 +113,7 @@ const config: Config = {
       },
     ],
   ],
-  plugins: [webpackConfigPlugin],
+  plugins: [webpackConfigPlugin, blueprintDownloaderPlugin],
 }
 
 export default config

website/docusaurus.config.ts

@@ -15,9 +15,11 @@ interface BlueprintImportCardProps {
 
 function BlueprintImportCard({ category, id }: BlueprintImportCardProps) {
   const [copy, setCopy] = useState(false)
-  const url = `https://github.com/EPMatt/awesome-ha-blueprints/blob/main/blueprints/${category}/${id}/${id}.yaml`
+  // New custom URL format that will redirect to the GitHub URL
+  const blueprintUrl = `https://epmatt.github.io/awesome-ha-blueprints/blueprints/${category}/${id}?version=latest`
+
   const copyToClipboard = async () => {
-    await navigator.clipboard.writeText(url)
+    await navigator.clipboard.writeText(blueprintUrl)
     setCopy(true)
   }
   return (
@@ -32,7 +34,7 @@ function BlueprintImportCard({ category, id }: BlueprintImportCardProps) {
             <p>
               <a
                 href={`https://my.home-assistant.io/redirect/blueprint_import/?blueprint_url=${escape(
-                  url,
+                  blueprintUrl,
                 )}`}
                 target='_blank'
                 rel='noreferrer'

website/src/components/blueprints_docs/BlueprintImportCard.tsx

@@ -0,0 +1,78 @@
+import fs from 'fs'
+import path from 'path'
+import glob from 'glob'
+
+/**
+ * Docusaurus plugin that generates routes for all blueprints
+ * Routes follow the pattern: category/id
+ */
+export default function blueprintRoutesPlugin(context) {
+  return {
+    name: 'blueprint-routes-plugin',
+
+    async loadContent() {
+      const { siteDir } = context
+      const blueprintsDir = path.resolve(siteDir, '../blueprints')
+
+      const blueprintFiles = glob.sync('**/*.yaml', {
+        cwd: blueprintsDir,
+        absolute: true,
+      })
+
+      const blueprints = []
+
+      for (const file of blueprintFiles) {
+        try {
+          // Extract category and id from file path
+          const relativePath = path.relative(blueprintsDir, file)
+          const pathParts = relativePath.split(path.sep)
+
+          // The first directory is the category
+          const category = pathParts[0]
+
+          // The second directory is the blueprint ID
+          const id = pathParts[1]
+
+          // Skip if not in the expected directory structure
+          if (!category || !id) continue
+
+          // Read blueprint content - only get the raw content
+          const rawContent = fs.readFileSync(file, 'utf8')
+
+          // Add blueprint metadata
+          blueprints.push({
+            id,
+            category,
+            path: relativePath,
+            filePath: file,
+            rawContent,
+          })
+        } catch (error) {
+          console.error(`Error processing blueprint file ${file}:`, error)
+        }
+      }
+
+      return blueprints
+    },
+
+    async contentLoaded({ content, actions }) {
+      const { addRoute } = actions
+
+      // For each blueprint, create a route
+      for (const blueprint of content) {
+        // Add download route for this blueprint
+        addRoute({
+          path: `/awesome-ha-blueprints/blueprints/${blueprint.category}/${blueprint.id}`,
+          component:
+            '../src/plugins/blueprint-downloader-plugin/download-blueprint.tsx',
+          exact: true,
+          // extra props
+          category: blueprint.category,
+          id: blueprint.id,
+        })
+      }
+
+      console.log('Blueprint download routes created')
+    },
+  }
+}

website/src/plugins/blueprint-downloader-plugin/blueprint-downloader-plugin.js

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react'
+// @ts-expect-error no types for this
+import { useLocation } from '@docusaurus/router'
+// @ts-expect-error no types for this
+import Head from '@docusaurus/Head'
+
+export default function DownloadBlueprint(props: {
+  route: { category: string; id: string }
+}) {
+  const location = useLocation()
+  const category = props.route.category
+  const id = props.route.id
+
+  useEffect(() => {
+    // Get query parameters
+    const searchParams = new URLSearchParams(location.search)
+    const version = searchParams.get('version') || 'latest'
+    // Sanitize version - only allow 0-9, dot and a-z
+    // eslint-disable-next-line
+    const sanitizedVersion = version.replace(/[^0-9a-z.]/gi, '')
+
+    if (category && id) {
+      // Redirect to GitHub repository
+      const githubUrl = `https://raw.githubusercontent.com/EPMatt/awesome-ha-blueprints/main/blueprints/${category}/${id}/${id}.yaml`
+      window.location.href = githubUrl
+    } else {
+      console.error(
+        'Invalid blueprint id parameter format. Expected format: category/id',
+      )
+    }
+  }, [location])
+
+  return (
+    <>
+      <Head>
+        <title>
+          Download {category}/{id}
+        </title>
+      </Head>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '50vh',
+          fontSize: '20px',
+        }}
+      >
+        <p>Downloading blueprint...</p>
+      </div>
+    </>
+  )
+}