mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2025-09-08 23:18:43 +00:00
added better markdown view pages and enabled subscription button to know when your logged in
This commit is contained in:
Keep Creating Online
52
views/about.html
Normal file
52
views/about.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!-- views/about.html -->
|
||||
<section class="mb-8">
|
||||
<!--
|
||||
This container uses a white background and dark text,
|
||||
overriding your global “body { color: … }” rule
|
||||
-->
|
||||
<div class="bg-white p-6 rounded-lg shadow-md text-gray-900">
|
||||
<h2 class="text-2xl font-bold mb-4 text-gray-700">About BitVid</h2>
|
||||
|
||||
<!--
|
||||
The .markdown-body class ensures the Markdown styling
|
||||
from your markdown.css can be applied here.
|
||||
-->
|
||||
<div id="markdown-container" class="markdown-body">
|
||||
<p class="text-gray-500">Loading content...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(async () => {
|
||||
try {
|
||||
const response = await fetch("content/about.md");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load about.md");
|
||||
}
|
||||
const markdownText = await response.text();
|
||||
|
||||
// Convert the markdown to HTML (requires "marked" loaded globally)
|
||||
const html = marked.parse(markdownText);
|
||||
|
||||
// Insert the HTML into the container
|
||||
const container = document.getElementById("markdown-container");
|
||||
if (container) {
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// (Optional) Highlight code blocks if "hljs" is available globally
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
hljs.highlightBlock(block);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Error loading About content:", err);
|
||||
const container = document.getElementById("markdown-container");
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<p class="text-red-500">Error loading content. Please try again later.</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
53
views/community-guidelines.html
Normal file
53
views/community-guidelines.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!-- views/community-guidelines.html -->
|
||||
<section class="mb-8">
|
||||
<!--
|
||||
This card has a white background and shadow, similar to your other partials.
|
||||
We also add text-gray-900 to override the global body text color.
|
||||
-->
|
||||
<div class="bg-white p-6 rounded-lg shadow-md text-gray-900">
|
||||
<h2 class="text-2xl font-bold mb-4 text-gray-700">Community Guidelines</h2>
|
||||
|
||||
<!--
|
||||
The .markdown-body class can use your markdown.css
|
||||
so headings, paragraphs, etc. are styled nicely.
|
||||
-->
|
||||
<div id="markdown-container" class="markdown-body">
|
||||
<p class="text-gray-500">Loading content...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(async () => {
|
||||
try {
|
||||
// Fetch the markdown file (change path if needed)
|
||||
const response = await fetch("content/community-guidelines.md");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load community-guidelines.md");
|
||||
}
|
||||
const markdownText = await response.text();
|
||||
|
||||
// Convert to HTML with Marked (make sure Marked is loaded globally in index.html)
|
||||
const html = marked.parse(markdownText);
|
||||
|
||||
// Insert into the container
|
||||
const container = document.getElementById("markdown-container");
|
||||
if (container) {
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// Optionally highlight code blocks if highlight.js is available globally
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
hljs.highlightBlock(block);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Error loading community guidelines:", err);
|
||||
const container = document.getElementById("markdown-container");
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<p class="text-red-500">Error loading content. Please try again later.</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
48
views/getting-started.html
Normal file
48
views/getting-started.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!-- views/getting-started.html -->
|
||||
<section class="mb-8">
|
||||
<!-- White background, shadow, and dark text to override global site color -->
|
||||
<div class="bg-white p-6 rounded-lg shadow-md text-gray-900">
|
||||
<h2 class="text-2xl font-bold mb-4 text-gray-700">Getting Started</h2>
|
||||
|
||||
<!-- .markdown-body references your markdown.css to style headings, paragraphs, etc. -->
|
||||
<div id="markdown-container" class="markdown-body">
|
||||
<p class="text-gray-500">Loading content...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(async () => {
|
||||
try {
|
||||
// Fetch the Markdown file
|
||||
const response = await fetch("content/getting-started.md");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load getting-started.md");
|
||||
}
|
||||
|
||||
const markdownText = await response.text();
|
||||
|
||||
// Convert to HTML with Marked (assuming marked is globally available)
|
||||
const html = marked.parse(markdownText);
|
||||
|
||||
// Insert into #markdown-container
|
||||
const container = document.getElementById("markdown-container");
|
||||
if (container) {
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// Optional: highlight code blocks if highlight.js is loaded globally
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
hljs.highlightBlock(block);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Error loading 'Getting Started' content:", err);
|
||||
const container = document.getElementById("markdown-container");
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<p class="text-red-500">Error loading content. Please try again later.</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
52
views/ipns.html
Normal file
52
views/ipns.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!-- views/ipns.html -->
|
||||
<section class="mb-8">
|
||||
<!--
|
||||
Added "text-gray-900" here to ensure we override
|
||||
any global white text color that might be inherited.
|
||||
-->
|
||||
<div class="bg-white p-6 rounded-lg shadow-md text-gray-900">
|
||||
<h2 class="text-2xl font-bold mb-4 text-gray-700">IPNS Gateways</h2>
|
||||
|
||||
<!--
|
||||
"markdown-body" can be any class name; it’s just so markdown.css
|
||||
can style headings, lists, etc.
|
||||
-->
|
||||
<div id="markdown-container" class="markdown-body">
|
||||
<p class="text-gray-500">Loading content...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(async () => {
|
||||
try {
|
||||
const response = await fetch("content/ipns.md");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load IPNS markdown file.");
|
||||
}
|
||||
const markdownText = await response.text();
|
||||
|
||||
// Convert to HTML with Marked (make sure "marked" is loaded globally)
|
||||
const html = marked.parse(markdownText);
|
||||
|
||||
// Insert final HTML into #markdown-container
|
||||
const container = document.getElementById("markdown-container");
|
||||
if (container) {
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// Optional: highlight code blocks (requires "hljs" loaded globally)
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
hljs.highlightBlock(block);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Error loading IPNS content:", err);
|
||||
const container = document.getElementById("markdown-container");
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<p class="text-red-500">Error loading content. Please try again later.</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
47
views/roadmap.html
Normal file
47
views/roadmap.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!-- views/roadmap.html -->
|
||||
<section class="mb-8">
|
||||
<!-- White card, dark text to override global site color -->
|
||||
<div class="bg-white p-6 rounded-lg shadow-md text-gray-900">
|
||||
<h2 class="text-2xl font-bold mb-4 text-gray-700">Roadmap</h2>
|
||||
|
||||
<!-- .markdown-body uses your markdown.css rules for headings, etc. -->
|
||||
<div id="markdown-container" class="markdown-body">
|
||||
<p class="text-gray-500">Loading content...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(async () => {
|
||||
try {
|
||||
// Fetch your roadmap markdown
|
||||
const response = await fetch("content/roadmap.md");
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load roadmap.md");
|
||||
}
|
||||
const markdownText = await response.text();
|
||||
|
||||
// Convert markdown to HTML (marked must be globally available)
|
||||
const html = marked.parse(markdownText);
|
||||
|
||||
// Insert into the container
|
||||
const container = document.getElementById("markdown-container");
|
||||
if (container) {
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// Optional: highlight code blocks if highlight.js is globally available
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
hljs.highlightBlock(block);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Error loading roadmap:", err);
|
||||
const container = document.getElementById("markdown-container");
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<p class="text-red-500">Error loading content. Please try again later.</p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user