Spaces:
Configuration error
Configuration error
File size: 5,871 Bytes
063009d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Instructions</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
.markdown-content {
font-family: 'Inter', sans-serif;
line-height: 1.6;
}
.markdown-content h1 {
@apply text-3xl font-bold mb-4 mt-8 text-indigo-700 border-b-2 border-indigo-200 pb-2;
}
.markdown-content h2 {
@apply text-2xl font-semibold mb-3 mt-6 text-indigo-600;
}
.markdown-content p {
@apply mb-4 text-gray-700;
}
.markdown-content code {
@apply bg-gray-100 px-2 py-1 rounded text-sm font-mono text-gray-800;
}
.markdown-content pre {
@apply bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
}
.markdown-content ul {
@apply list-disc pl-5 mb-4;
}
.markdown-content ol {
@apply list-decimal pl-5 mb-4;
}
.markdown-content blockquote {
@apply border-l-4 border-indigo-300 pl-4 italic text-gray-600 my-4;
}
</style>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-12 max-w-4xl">
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="p-6 md:p-8">
<div class="flex items-center justify-between mb-8">
<h1 class="text-3xl font-bold text-gray-800 flex items-center">
<i data-feather="file-text" class="mr-3 text-indigo-500"></i>
Project Instructions
</h1>
<div class="flex space-x-2">
<button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition">
<i data-feather="edit-2" class="text-gray-600"></i>
</button>
<button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition">
<i data-feather="download" class="text-gray-600"></i>
</button>
</div>
</div>
<div class="markdown-content">
<!-- Start of markdown content -->
<h1>Project Development Guidelines</h1>
<p>Welcome to the project! Here are the essential guidelines for development:</p>
<h2>1. Code Structure</h2>
<ul>
<li>Follow the MVC pattern for better organization</li>
<li>Keep components modular and reusable</li>
<li>Use meaningful file and folder names</li>
</ul>
<h2>2. Styling Standards</h2>
<p>We're using TailwindCSS for styling. Please adhere to:</p>
<pre><code>// Good example
<div class="flex justify-between items-center p-4 bg-white rounded-lg shadow">
Content here
</div></code></pre>
<h2>3. JavaScript Best Practices</h2>
<blockquote>
"Write code as if the person who ends up maintaining your code is a violent psychopath who knows where you live."
</blockquote>
<ol>
<li>Use ES6+ features</li>
<li>Implement proper error handling</li>
<li>Document complex functions</li>
</ol>
<h2>4. Testing Requirements</h2>
<p>All features must include:</p>
<ul>
<li>Unit tests for business logic</li>
<li>Integration tests for API calls</li>
<li>End-to-end tests for critical user flows</li>
</ul>
<h2>5. Deployment Process</h2>
<pre><code># Deployment commands
npm run build
npm run test
npm run deploy</code></pre>
<h2>6. Collaboration Rules</h2>
<p>Remember to:</p>
<ul>
<li>Create feature branches</li>
<li>Submit PRs for review</li>
<li>Resolve merge conflicts properly</li>
</ul>
<!-- End of markdown content -->
</div>
<div class="mt-8 pt-6 border-t border-gray-200">
<div class="flex items-center">
<div class="flex-shrink-0">
<i data-feather="alert-circle" class="text-yellow-500"></i>
</div>
<div class="ml-3">
<p class="text-sm text-gray-600">
Please review these guidelines before starting any work on the project.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
feather.replace();
document.addEventListener('DOMContentLoaded', function() {
// Any initialization code can go here
});
</script>
</body>
</html>
|