Update style guide to include new import methods and add ability to import from a URL

Author: Blargian

contribute/style-guide.md

@@ -112,12 +112,44 @@ SELECT * FROM system.contributors;
 \```
 ```
 
+Note: in the snippet above `\` is used only for formatting purposes in this guide.
+You should not include it when you write markdown.
+
 Code blocks:
 - Should always have a language defined immediately next to the opening 3
   backticks, without any space.
 - Have a title (optional) such as 'Query' or 'Response'
 - Use language `response` if it is for the result of a query.
 
+#### Importing code from files or URLs
+
+There are a few additional parameters you can include on a code block if you want
+to import code.
+
+To import from a file use `file=`:
+
+```text
+\```python file=code_snippets/integrations/example.py
+Code will be inserted here
+\```
+```
+
+When `yarn build` is run, the code from the file will be inserted as text into
+the code block.
+
+To import from a url use `url=`:
+
+```text
+\```python url=https://raw.githubusercontent.com/ClickHouse/clickhouse-connect/refs/heads/main/examples/pandas_examples.py
+Code will be inserted here
+\```
+```
+
+You should commit the code inserted to the snippet as we want people (or LLMs) 
+reading the markdown to be able to see the code. The advantage of importing code
+to snippets this way is that you can test your snippets externally or store them
+wherever you want.
+
 ### Highlighting
 
 You can highlight lines in a code block using the following keywords:

plugins/code-import-plugin.js

@@ -1,6 +1,26 @@
 const fs = require('fs');
 const path = require('path');
 const glob = require('glob');
+const https = require('https');
+const http = require('http');
+
+// Helper function to fetch content from URL
+function fetchUrl(url) {
+  return new Promise((resolve, reject) => {
+    const client = url.startsWith('https:') ? https : http;
+    
+    client.get(url, (res) => {
+      if (res.statusCode !== 200) {
+        reject(new Error(`HTTP ${res.statusCode}: ${res.statusMessage}`));
+        return;
+      }
+      
+      let data = '';
+      res.on('data', chunk => data += chunk);
+      res.on('end', () => resolve(data));
+    }).on('error', reject);
+  });
+}
 
 function codeImportPlugin(context, options) {
   return {
@@ -22,24 +42,44 @@ function codeImportPlugin(context, options) {
           let content = fs.readFileSync(filePath, 'utf8');
           let modified = false;
 
-          // Process code blocks with file= syntax
-          content = content.replace(/```(\w+)?\s*(file=[^\s\n]+)([^\n]*)\n([^`]*?)```/g, (match, lang, fileParam, additionalMeta, existingContent) => {
+          // Process code blocks with file= or url= syntax
+          const fileUrlRegex = /```(\w+)?\s*((?:file|url)=[^\s\n]+)([^\n]*)\n([^`]*?)```/g;
+          const matches = [...content.matchAll(fileUrlRegex)];
+          
+          for (const match of matches) {
+            const [fullMatch, lang, param, additionalMeta, existingContent] = match;
+            
             try {
-              const importPath = fileParam.replace('file=', '');
-              const absoluteImportPath = path.resolve(context.siteDir, importPath);
-              const importedContent = fs.readFileSync(absoluteImportPath, 'utf8');
-              modified = true;
+              let importedContent;
+              
+              if (param.startsWith('file=')) {
+                // Handle file import
+                const importPath = param.replace('file=', '');
+                const absoluteImportPath = path.resolve(context.siteDir, importPath);
+                importedContent = fs.readFileSync(absoluteImportPath, 'utf8');
+              } else if (param.startsWith('url=')) {
+                // Handle URL import
+                const url = param.replace('url=', '');
+                try {
+                  importedContent = await fetchUrl(url);
+                } catch (urlError) {
+                  console.warn(`Could not fetch URL ${url} in ${filePath}: ${urlError.message}`);
+                  continue; // Skip this replacement if URL fetch fails
+                }
+              }
 
-              // Preserve the complete metadata including file= and any additional parameters
-              const fullMeta = `${fileParam}${additionalMeta}`;
+              // Preserve the complete metadata
+              const fullMeta = `${param}${additionalMeta}`;
               const metaStr = fullMeta ? ` ${fullMeta}` : '';
+              const replacement = `\`\`\`${lang || ''}${metaStr}\n${importedContent}\`\`\``;
+              
+              content = content.replace(fullMatch, replacement);
+              modified = true;
 
-              return `\`\`\`${lang || ''}${metaStr}\n${importedContent}\`\`\``;
             } catch (error) {
-              console.warn(`Could not import file ${importPath} in ${filePath}: ${error.message}`);
-              return match; // Return original if import fails
+              console.warn(`Could not process ${param} in ${filePath}: ${error.message}`);
             }
-          });
+          }
 
           if (modified) {
             processedFiles.push({