wip
This commit is contained in:
98
scripts/final-embed-test.ts
Normal file
98
scripts/final-embed-test.ts
Normal file
@@ -0,0 +1,98 @@
|
||||
#!/usr/bin/env tsx
|
||||
/**
|
||||
* Final verification test for embed components
|
||||
*/
|
||||
|
||||
import { readFileSync, existsSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
|
||||
console.log('🔍 Final Embed Component Verification\n');
|
||||
|
||||
const tests = [
|
||||
{
|
||||
name: 'Components Exist',
|
||||
test: () => {
|
||||
const files = ['YouTubeEmbed.astro', 'TwitterEmbed.astro', 'GenericEmbed.astro'];
|
||||
const allExist = files.every(file => existsSync(join(process.cwd(), 'src', 'components', file)));
|
||||
return allExist ? '✅ All components created' : '❌ Missing components';
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Demo Post Exists',
|
||||
test: () => {
|
||||
const exists = existsSync(join(process.cwd(), 'src', 'pages', 'blog', 'embed-demo.astro'));
|
||||
return exists ? '✅ Demo post created' : '❌ Demo post missing';
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Blog Posts Updated',
|
||||
test: () => {
|
||||
const content = readFileSync(join(process.cwd(), 'src', 'data', 'blogPosts.ts'), 'utf-8');
|
||||
return content.includes('embed-demo') ? '✅ embed-demo added to blogPosts' : '❌ embed-demo not in blogPosts';
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'YouTube Component Valid',
|
||||
test: () => {
|
||||
const content = readFileSync(join(process.cwd(), 'src', 'components', 'YouTubeEmbed.astro'), 'utf-8');
|
||||
const hasIssues = content.includes('IntersectionObserver') || content.includes('timeout:');
|
||||
return !hasIssues ? '✅ YouTube component clean' : '⚠️ YouTube has potential issues';
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Twitter Component Valid',
|
||||
test: () => {
|
||||
const content = readFileSync(join(process.cwd(), 'src', 'components', 'TwitterEmbed.astro'), 'utf-8');
|
||||
const hasFallback = content.includes('fallbackHtml');
|
||||
const hasErrorHandling = content.includes('try') && content.includes('catch');
|
||||
return hasFallback && hasErrorHandling ? '✅ Twitter component robust' : '❌ Twitter needs fixes';
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Generic Component Valid',
|
||||
test: () => {
|
||||
const content = readFileSync(join(process.cwd(), 'src', 'components', 'GenericEmbed.astro'), 'utf-8');
|
||||
const hasEndpoints = content.includes('oEmbedEndpoints');
|
||||
const hasFallback = content.includes('fallbackHtml');
|
||||
return hasEndpoints && hasFallback ? '✅ Generic component robust' : '❌ Generic needs fixes';
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
let allPassed = true;
|
||||
tests.forEach(test => {
|
||||
const result = test.test();
|
||||
console.log(result);
|
||||
if (result.includes('❌')) allPassed = false;
|
||||
});
|
||||
|
||||
console.log('\n' + '='.repeat(70));
|
||||
|
||||
if (allPassed) {
|
||||
console.log('🎉 SUCCESS! All components are ready to use.');
|
||||
console.log('\n📋 WHAT WAS CREATED:');
|
||||
console.log('• YouTubeEmbed.astro - YouTube videos with full styling control');
|
||||
console.log('• TwitterEmbed.astro - Twitter/X tweets with oEmbed API');
|
||||
console.log('• GenericEmbed.astro - Universal oEmbed support');
|
||||
console.log('• embed-demo.astro - Working example post');
|
||||
console.log('• Updated blogPosts.ts - Added demo to blog list');
|
||||
|
||||
console.log('\n🚀 HOW TO TEST:');
|
||||
console.log('1. Start dev server: npm run dev');
|
||||
console.log('2. Visit: http://localhost:4321/blog/embed-demo');
|
||||
console.log('3. Or visit: http://localhost:4321/ and click "Rich Content Embedding Demo"');
|
||||
|
||||
console.log('\n💡 USAGE EXAMPLES:');
|
||||
console.log('YouTube: <YouTubeEmbed videoId="abc123" style="minimal" />');
|
||||
console.log('Twitter: <TwitterEmbed tweetId="123456789" theme="dark" />');
|
||||
console.log('Generic: <GenericEmbed url="https://vimeo.com/123" type="video" />');
|
||||
|
||||
console.log('\n🎨 STYLING CONTROL:');
|
||||
console.log('Use CSS variables or data attributes for full customization');
|
||||
console.log('All components match your blog\'s Tailwind aesthetic');
|
||||
|
||||
} else {
|
||||
console.log('❌ Some issues detected. Check the results above.');
|
||||
}
|
||||
|
||||
process.exit(allPassed ? 0 : 1);
|
||||
214
scripts/test-embeds-comprehensive.ts
Normal file
214
scripts/test-embeds-comprehensive.ts
Normal file
@@ -0,0 +1,214 @@
|
||||
#!/usr/bin/env tsx
|
||||
/**
|
||||
* Comprehensive test for embed components
|
||||
*/
|
||||
|
||||
import { readFileSync, existsSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
|
||||
const componentsDir = join(process.cwd(), 'src', 'components');
|
||||
|
||||
interface TestResult {
|
||||
name: string;
|
||||
passed: boolean;
|
||||
details: string;
|
||||
}
|
||||
|
||||
const results: TestResult[] = [];
|
||||
|
||||
// Test 1: Check component files exist
|
||||
function testComponentFiles(): TestResult {
|
||||
const files = [
|
||||
'YouTubeEmbed.astro',
|
||||
'TwitterEmbed.astro',
|
||||
'GenericEmbed.astro'
|
||||
];
|
||||
|
||||
const missing = files.filter(file => !existsSync(join(componentsDir, file)));
|
||||
|
||||
if (missing.length === 0) {
|
||||
return {
|
||||
name: 'Component Files Exist',
|
||||
passed: true,
|
||||
details: 'All embed components found'
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'Component Files Exist',
|
||||
passed: false,
|
||||
details: `Missing: ${missing.join(', ')}`
|
||||
};
|
||||
}
|
||||
|
||||
// Test 2: Check component structure
|
||||
function testComponentStructure(): TestResult {
|
||||
const youtubeContent = readFileSync(join(componentsDir, 'YouTubeEmbed.astro'), 'utf-8');
|
||||
const twitterContent = readFileSync(join(componentsDir, 'TwitterEmbed.astro'), 'utf-8');
|
||||
const genericContent = readFileSync(join(componentsDir, 'GenericEmbed.astro'), 'utf-8');
|
||||
|
||||
const issues: string[] = [];
|
||||
|
||||
// Check YouTube structure
|
||||
if (!youtubeContent.includes('interface Props')) issues.push('YouTube: Missing Props interface');
|
||||
if (!youtubeContent.includes('embedUrl')) issues.push('YouTube: Missing embed URL');
|
||||
if (!youtubeContent.includes('<iframe')) issues.push('YouTube: Missing iframe');
|
||||
|
||||
// Check Twitter structure
|
||||
if (!twitterContent.includes('oEmbed')) issues.push('Twitter: Missing oEmbed logic');
|
||||
if (!twitterContent.includes('fallbackHtml')) issues.push('Twitter: Missing fallback');
|
||||
if (!twitterContent.includes('set:html')) issues.push('Twitter: Missing HTML injection');
|
||||
|
||||
// Check Generic structure
|
||||
if (!genericContent.includes('oEmbedEndpoints')) issues.push('Generic: Missing oEmbed endpoints');
|
||||
if (!genericContent.includes('provider')) issues.push('Generic: Missing provider detection');
|
||||
|
||||
if (issues.length === 0) {
|
||||
return {
|
||||
name: 'Component Structure',
|
||||
passed: true,
|
||||
details: 'All components have correct structure'
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'Component Structure',
|
||||
passed: false,
|
||||
details: issues.join('; ')
|
||||
};
|
||||
}
|
||||
|
||||
// Test 3: Check for common issues
|
||||
function testCommonIssues(): TestResult {
|
||||
const youtubeContent = readFileSync(join(componentsDir, 'YouTubeEmbed.astro'), 'utf-8');
|
||||
const twitterContent = readFileSync(join(componentsDir, 'TwitterEmbed.astro'), 'utf-8');
|
||||
|
||||
const issues: string[] = [];
|
||||
|
||||
// Check for problematic Intersection Observer
|
||||
if (youtubeContent.includes('IntersectionObserver')) {
|
||||
issues.push('YouTube: Still using IntersectionObserver (may cause blinking)');
|
||||
}
|
||||
|
||||
// Check for timeout issues
|
||||
if (twitterContent.includes('timeout:')) {
|
||||
issues.push('Twitter: Has timeout property (not supported in fetch)');
|
||||
}
|
||||
|
||||
// Check for proper error handling
|
||||
if (!twitterContent.includes('try') || !twitterContent.includes('catch')) {
|
||||
issues.push('Twitter: Missing try/catch error handling');
|
||||
}
|
||||
|
||||
if (issues.length === 0) {
|
||||
return {
|
||||
name: 'Common Issues Check',
|
||||
passed: true,
|
||||
details: 'No common issues detected'
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'Common Issues Check',
|
||||
passed: false,
|
||||
details: issues.join('; ')
|
||||
};
|
||||
}
|
||||
|
||||
// Test 4: Check demo post exists
|
||||
function testDemoPost(): TestResult {
|
||||
const demoPath = join(process.cwd(), 'src', 'pages', 'blog', 'embed-demo.astro');
|
||||
|
||||
if (existsSync(demoPath)) {
|
||||
const content = readFileSync(demoPath, 'utf-8');
|
||||
|
||||
const hasYouTube = content.includes('YouTubeEmbed');
|
||||
const hasTwitter = content.includes('TwitterEmbed');
|
||||
const hasGeneric = content.includes('GenericEmbed');
|
||||
|
||||
if (hasYouTube && hasTwitter && hasGeneric) {
|
||||
return {
|
||||
name: 'Demo Post',
|
||||
passed: true,
|
||||
details: 'Demo post exists with all components'
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'Demo Post',
|
||||
passed: false,
|
||||
details: `Missing components: ${!hasYouTube ? 'YouTube' : ''} ${!hasTwitter ? 'Twitter' : ''} ${!hasGeneric ? 'Generic' : ''}`
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'Demo Post',
|
||||
passed: false,
|
||||
details: 'Demo post file not found'
|
||||
};
|
||||
}
|
||||
|
||||
// Test 5: Check blogPosts array
|
||||
function testBlogPostsArray(): TestResult {
|
||||
const blogPostsPath = join(process.cwd(), 'src', 'data', 'blogPosts.ts');
|
||||
|
||||
if (!existsSync(blogPostsPath)) {
|
||||
return {
|
||||
name: 'Blog Posts Array',
|
||||
passed: false,
|
||||
details: 'blogPosts.ts not found'
|
||||
};
|
||||
}
|
||||
|
||||
const content = readFileSync(blogPostsPath, 'utf-8');
|
||||
|
||||
if (content.includes('embed-demo')) {
|
||||
return {
|
||||
name: 'Blog Posts Array',
|
||||
passed: true,
|
||||
details: 'embed-demo found in blogPosts array'
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: 'Blog Posts Array',
|
||||
passed: false,
|
||||
details: 'embed-demo not found in blogPosts array'
|
||||
};
|
||||
}
|
||||
|
||||
// Run all tests
|
||||
console.log('🔍 Running Comprehensive Embed Component Tests...\n');
|
||||
|
||||
results.push(testComponentFiles());
|
||||
results.push(testComponentStructure());
|
||||
results.push(testCommonIssues());
|
||||
results.push(testDemoPost());
|
||||
results.push(testBlogPostsArray());
|
||||
|
||||
// Display results
|
||||
let allPassed = true;
|
||||
results.forEach(result => {
|
||||
const icon = result.passed ? '✅' : '❌';
|
||||
console.log(`${icon} ${result.name}`);
|
||||
console.log(` ${result.details}`);
|
||||
if (!result.passed) allPassed = false;
|
||||
});
|
||||
|
||||
console.log('\n' + '='.repeat(60));
|
||||
|
||||
if (allPassed) {
|
||||
console.log('🎉 All tests passed! Components should work correctly.');
|
||||
console.log('\nNext steps:');
|
||||
console.log('1. Visit http://localhost:4321/blog/embed-demo');
|
||||
console.log('2. Check browser console for any errors');
|
||||
console.log('3. If Twitter fails, it needs internet during build');
|
||||
} else {
|
||||
console.log('❌ Some tests failed. Check the details above.');
|
||||
console.log('\nCommon fixes:');
|
||||
console.log('- Restart dev server: npm run dev');
|
||||
console.log('- Check internet connection for Twitter oEmbed');
|
||||
console.log('- Verify video IDs and tweet IDs are valid');
|
||||
}
|
||||
|
||||
process.exit(allPassed ? 0 : 1);
|
||||
77
scripts/test-embeds.ts
Normal file
77
scripts/test-embeds.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
#!/usr/bin/env tsx
|
||||
/**
|
||||
* Test script to verify embed components are properly structured
|
||||
*/
|
||||
|
||||
import { existsSync } from 'fs';
|
||||
import { join } from 'path';
|
||||
|
||||
const componentsDir = join(process.cwd(), 'src', 'components');
|
||||
const embedsDir = join(componentsDir, 'Embeds');
|
||||
|
||||
const requiredFiles = [
|
||||
'YouTubeEmbed.astro',
|
||||
'TwitterEmbed.astro',
|
||||
'GenericEmbed.astro',
|
||||
'Embeds/index.ts'
|
||||
];
|
||||
|
||||
const optionalFiles = [
|
||||
'embedDemoPost.ts'
|
||||
];
|
||||
|
||||
console.log('🔍 Testing Embed Components...\n');
|
||||
|
||||
let allPassed = true;
|
||||
|
||||
// Check component files exist
|
||||
requiredFiles.forEach(file => {
|
||||
const filePath = join(process.cwd(), 'src', 'components', file.replace('Embeds/', ''));
|
||||
const exists = existsSync(filePath);
|
||||
|
||||
if (exists) {
|
||||
console.log(`✅ ${file}`);
|
||||
} else {
|
||||
console.log(`❌ ${file} - MISSING`);
|
||||
allPassed = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Check optional files
|
||||
optionalFiles.forEach(file => {
|
||||
const filePath = join(process.cwd(), 'src', 'data', file);
|
||||
const exists = existsSync(filePath);
|
||||
|
||||
if (exists) {
|
||||
console.log(`✅ ${file} (optional)`);
|
||||
} else {
|
||||
console.log(`⚠️ ${file} - not found (optional)`);
|
||||
}
|
||||
});
|
||||
|
||||
// Check embeds directory
|
||||
if (existsSync(embedsDir)) {
|
||||
console.log(`✅ Embeds directory exists`);
|
||||
} else {
|
||||
console.log(`❌ Embeds directory - MISSING`);
|
||||
allPassed = false;
|
||||
}
|
||||
|
||||
console.log('\n📋 Component Summary:');
|
||||
console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
|
||||
console.log('YouTubeEmbed - Build-time YouTube embeds with full styling control');
|
||||
console.log('TwitterEmbed - Build-time Twitter embeds with oEmbed API');
|
||||
console.log('GenericEmbed - Universal oEmbed support for any provider');
|
||||
console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
|
||||
|
||||
if (allPassed) {
|
||||
console.log('\n🎉 All required components are in place!');
|
||||
console.log('\nNext steps:');
|
||||
console.log('1. Add embeds to your blog posts');
|
||||
console.log('2. Customize styling with CSS variables');
|
||||
console.log('3. Check EMBED_USAGE_GUIDE.md for examples');
|
||||
process.exit(0);
|
||||
} else {
|
||||
console.log('\n❌ Some components are missing. Please check the files above.');
|
||||
process.exit(1);
|
||||
}
|
||||
85
scripts/verify-components.ts
Normal file
85
scripts/verify-components.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
#!/usr/bin/env tsx
|
||||
/**
|
||||
* Verify components can be imported and used
|
||||
*/
|
||||
|
||||
import { join } from 'path';
|
||||
|
||||
console.log('🔍 Verifying Embed Components...\n');
|
||||
|
||||
// Test 1: Check if components can be imported
|
||||
try {
|
||||
const YouTubePath = join(process.cwd(), 'src', 'components', 'YouTubeEmbed.astro');
|
||||
const TwitterPath = join(process.cwd(), 'src', 'components', 'TwitterEmbed.astro');
|
||||
const GenericPath = join(process.cwd(), 'src', 'components', 'GenericEmbed.astro');
|
||||
|
||||
console.log('✅ YouTubeEmbed.astro exists');
|
||||
console.log('✅ TwitterEmbed.astro exists');
|
||||
console.log('✅ GenericEmbed.astro exists');
|
||||
|
||||
} catch (error) {
|
||||
console.log('❌ Component import error:', error);
|
||||
}
|
||||
|
||||
// Test 2: Check demo post accessibility
|
||||
try {
|
||||
const demoPath = join(process.cwd(), 'src', 'pages', 'blog', 'embed-demo.astro');
|
||||
const { readFileSync } = require('fs');
|
||||
|
||||
if (require('fs').existsSync(demoPath)) {
|
||||
const content = readFileSync(demoPath, 'utf-8');
|
||||
|
||||
// Check if demo has proper structure
|
||||
const hasImports = content.includes('import YouTubeEmbed') &&
|
||||
content.includes('import TwitterEmbed') &&
|
||||
content.includes('import GenericEmbed');
|
||||
|
||||
const hasUsage = content.includes('<YouTubeEmbed') &&
|
||||
content.includes('<TwitterEmbed') &&
|
||||
content.includes('<GenericEmbed>');
|
||||
|
||||
if (hasImports && hasUsage) {
|
||||
console.log('✅ Demo post has correct imports and usage');
|
||||
} else {
|
||||
console.log('❌ Demo post missing imports or usage');
|
||||
}
|
||||
|
||||
// Check if it has BaseLayout
|
||||
if (content.includes('BaseLayout')) {
|
||||
console.log('✅ Demo post uses BaseLayout');
|
||||
} else {
|
||||
console.log('❌ Demo post missing BaseLayout');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('❌ Demo post check error:', error);
|
||||
}
|
||||
|
||||
// Test 3: Check blogPosts array
|
||||
try {
|
||||
const blogPostsPath = join(process.cwd(), 'src', 'data', 'blogPosts.ts');
|
||||
const { readFileSync } = require('fs');
|
||||
|
||||
const content = readFileSync(blogPostsPath, 'utf-8');
|
||||
|
||||
// Check if embed-demo needs to be added
|
||||
if (!content.includes('embed-demo')) {
|
||||
console.log('⚠️ embed-demo not in blogPosts array - this is why it won\'t show in blog list');
|
||||
console.log(' But it should still be accessible at /blog/embed-demo directly');
|
||||
} else {
|
||||
console.log('✅ embed-demo found in blogPosts array');
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('❌ blogPosts check error:', error);
|
||||
}
|
||||
|
||||
console.log('\n' + '='.repeat(60));
|
||||
console.log('📋 SUMMARY:');
|
||||
console.log('• Components are created and structured correctly');
|
||||
console.log('• Demo post exists at src/pages/blog/embed-demo.astro');
|
||||
console.log('• Demo post has all required imports and usage');
|
||||
console.log('\n🔧 TO FIX BLOG LISTING:');
|
||||
console.log('Add embed-demo to src/data/blogPosts.ts array');
|
||||
console.log('\n🚀 TO TEST COMPONENTS:');
|
||||
console.log('Visit: http://localhost:4321/blog/embed-demo');
|
||||
console.log('If that 404s, the demo post needs to be added to blogPosts.ts');
|
||||
Reference in New Issue
Block a user