গিটহাবের রিডমগুলির পূর্বরূপ দেখতে আমি স্থানীয়ভাবে হোস্ট করা এইচটিএমএল ফাইল ব্যবহার করি।
আমি বেশ কয়েকটি বিদ্যমান বিকল্পের দিকে নজর রেখেছি, তবে নিম্নলিখিত প্রয়োজনীয়তাগুলি পূরণ করতে আমার নিজের রোল করার সিদ্ধান্ত নিয়েছি:
- ফাইল
- স্থানীয়ভাবে হোস্ট করা (ইন্ট্রানেট) ইউআরএল
- কোনও ব্রাউজার এক্সটেনশন প্রয়োজন
- স্থানীয়ভাবে হোস্ট করা সার্ভার-সাইড প্রসেসিং নেই (উদাহরণস্বরূপ, পিএইচপি নেই)
- লাইটওয়েট (উদাহরণস্বরূপ, jQuery নেই)
- উচ্চ বিশ্বস্ততা: মার্কডাউন এবং একই সিএসএস রেন্ডার করতে গিটহাব ব্যবহার করুন
আমি আমার গিটহাব সংগ্রহস্থলের স্থানীয় কপিগুলি "গিথুব" ডিরেক্টরিতে ভাইবোন ডিরেক্টরিতে রাখি।
প্রতিটি রেপো ডিরেক্টরিতে একটি README.md ফাইল থাকে:
.../github/
repo-a/
README.md
repo-b/
README.md
etc.
গিথুব ডিরেক্টরিটিতে "পূর্বরূপ" HTML ফাইল রয়েছে:
.../github/
readme.html
একটি রিডমি পূর্বরূপ দেখতে, আমি গিথুব / রিডমেএইচটিএমএল ব্রাউজ করছি, ক্যোরি স্ট্রিংয়ে রেপো উল্লেখ করে:
http://localhost/github/readme.html?repo-a
বিকল্পভাবে, আপনি README.md হিসাবে একই ডিরেক্টরিতে readme.html অনুলিপি করতে পারেন এবং কোয়েরি স্ট্রিং বাদ দিতে পারেন:
http://localhost/github/repo-a/readme.html
যদি রিডমিএইচটিএমএল README.md এর মতো একই ডিরেক্টরিতে থাকে তবে আপনাকে এইচটিটিপি-র মাধ্যমেও রিডমিএইচটিএমএল পরিবেশন করতে হবে না: আপনি কেবল এটি সরাসরি আপনার ফাইল সিস্টেম থেকে খুলতে পারেন।
এইচটিএমএল ফাইল একটি README.md ফাইলে মার্কডাউন রেন্ডার করতে গিটহাব এপিআই ব্যবহার করে । একটি হার সীমা আছে : লেখার সময়, প্রতি ঘন্টা 60 অনুরোধ ।
উইন্ডোজ on এ ক্রোম, আইই এবং ফায়ারফক্সের বর্তমান উত্পাদনের সংস্করণগুলিতে আমার জন্য কাজ করে।
উৎস
এইচটিএমএল ফাইল (readme.html) এখানে:
<!DOCTYPE html>
<!--
Preview a GitHub README.md.
Either:
- Copy this file to a directory that contains repo directories,
and then specify a repo name in the query string.
For example:
http://localhost/github/readme.html?myrepo
or
- Copy this file to the directory that contains a README.md,
and then browse to this file without specifying a query string.
For example:
http://localhost/github/myrepo/readme.html
(or just open this file in your browser directly from
your file system, without HTTP)
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="author" content="Graham Hannington"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>GitHub readme preview</title>
<link rel="stylesheet" type="text/css" href="http://primercss.io/docs.css"/>
<script type="text/javascript">
//<![CDATA[
var HTTP_STATUS_OK = 200;
var URL_API_GITHUB_RENDER_MARKDOWN = "https://api.github.com/markdown/raw";
var README_FILE_NAME = "README.md";
var readmeURL;
var queryString = location.search.substring(1);
if (queryString.length > 0) {
readmeURL = queryString + "/" + README_FILE_NAME;
} else {
readmeURL = README_FILE_NAME;
}
// Get Markdown, then render it as HTML
function getThenRenderMarkdown(markdownURL) {
var xhr = new XMLHttpRequest();
xhr.open("GET", markdownURL, true);
xhr.responseType = "text";
xhr.onload = function(e) {
if (this.status == HTTP_STATUS_OK) {
// Response text contains Markdown
renderMarkdown(this.responseText);
}
}
xhr.send();
}
// Use the GitHub API to render Markdown as HTML
function renderMarkdown(markdown) {
var xhr = new XMLHttpRequest();
xhr.open("POST", URL_API_GITHUB_RENDER_MARKDOWN, true);
xhr.responseType = "html";
xhr.onload = function(e) {
if (this.status == HTTP_STATUS_OK) {
document.getElementById("readme").innerHTML = this.response;
}
}
xhr.send(markdown);
}
window.onload = function() {
getThenRenderMarkdown(readmeURL);
}
//]]>
</script>
</head>
<body>
<header class="masthead">
<div class="container">
<span class="masthead-logo"><span class="mega-octicon
octicon-mark-github"></span>GitHub readme preview</span>
</div>
</header>
<div class="container">
<div id="readme" class="markdown-body">
<p>Rendering markdown, please wait...</p>
</div>
<footer class="footer">Rendering by
<a href="https://developer.github.com/v3/markdown/">GitHub</a>,
styling by <a href="http://primercss.io/">Primer</a>.</footer>
</div>
</body>
</html>
বিকাশকারী নোট
- সাধারণত, আমি আমার কোডটি একটি আইআইএফইতে আবদ্ধ করি, তবে এই ক্ষেত্রে, আমি প্রয়োজনটি দেখিনি, এবং ভেবেছিলাম যে আমি এটি সংক্ষিপ্ত রেখেছি
- আমি ব্যাকলেভল আইই সমর্থন করে বিরক্ত করি না
- সংক্ষিপ্ততার জন্য, আমি ত্রুটি পরিচালনার কোড বাদ দিয়েছি (আপনি কি আমাকে বিশ্বাস করেন ?!)
- আমি জাভাস্ক্রিপ্ট প্রোগ্রামিং টিপস স্বাগত জানাই
ধারনা
- আমি এই এইচটিএমএল ফাইলটির জন্য একটি গিটহাব সংগ্রহস্থল তৈরি করার কথা ভাবছি এবং ফাইলটি জিএইচ-পৃষ্ঠাগুলিতে রেখে দিচ্ছি, যাতে গিটহাব এটি "সাধারণ" ওয়েব পৃষ্ঠা হিসাবে পরিবেশন করে। README (বা অন্য কোনও মার্কডাউন ফাইল) - - এর ক্যুরিয় স্ট্রিং হিসাবে একটি সম্পূর্ণ ইউআরএল গ্রহণ করার জন্য আমি ফাইলটি টুইট করতে চাই। আমি জানতে আগ্রহী যে গিটহাবের দ্বারা হোস্ট করা গিটিহাব এপিআই অনুরোধ সীমাটিকে ছাড়িয়ে যাবে কিনা এবং আমি ক্রস-ডোমেন ইস্যুতে দৌড়ব কিনা (এইচটিএমএল পৃষ্ঠার জন্য ডোমেনের চেয়ে আলাদা ডোমেইন থেকে মার্কডাউন পাওয়ার জন্য একটি অ্যাজাক্স অনুরোধ ব্যবহার করে) ।
আসল সংস্করণ (অবনমিত)
আমি কৌতূহল মূল্যের জন্য মূল সংস্করণটির এই রেকর্ডটি সংরক্ষণ করেছি। এই সংস্করণে নিম্নলিখিত সমস্যাগুলি রয়েছে যা বর্তমান সংস্করণে সমাধান করা হয়েছে:
- এটি ডাউনলোড করতে কিছু সম্পর্কিত ফাইলের প্রয়োজন
- এটি README.md হিসাবে একই ডিরেক্টরিতে ফেলে দেওয়া সমর্থন করে নি
- এর এইচটিএমএল ছিল আরও ভঙ্গুর; গিটহাবের পরিবর্তনের জন্য আরও সংবেদনশীল
গিথুব ডিরেক্টরিটিতে "পূর্বরূপ" HTML ফাইল এবং সম্পর্কিত ফাইল রয়েছে:
.../github/
readme-preview.html
github.css
github2.css
octicons.eot
octicons.svg
octicons.woff
আমি গিটহাব থেকে সিএসএস এবং অষ্টিকন ফন্ট ফাইলগুলি ডাউনলোড করেছি:
https://assets-cdn.github.com/assets/github- ... .css
https://assets-cdn.github.com/assets/github2- ... .css
https://github.com/static/fonts/octicons/octicons.* (eot, woff, svg)
আসল নামগুলিতে হেক্স ডিজিটের দীর্ঘ স্ট্রিং বাদ দিতে আমি সিএসএস ফাইলগুলির নাম পরিবর্তন করেছি।
অষ্টিকোন ফন্ট ফাইলগুলির স্থানীয় অনুলিপিগুলি উল্লেখ করতে আমি গিথুব.এস.এস সম্পাদনা করেছি।
আমি একটি গিটহাব পৃষ্ঠার এইচটিএমএল পরীক্ষা করেছি, এবং যুক্তিসঙ্গত বিশ্বস্ততা প্রদানের জন্য রিডমেজ সামগ্রীতে আশেপাশের যথেষ্ট পরিমাণে HTML গঠন পুনরুত্পাদন করেছি; উদাহরণস্বরূপ, সীমাবদ্ধ প্রস্থ।
গিডহাব সিএসএস, অষ্টিকন ফন্ট এবং রিডমি সামগ্রীর জন্য এইচটিএমএল "ধারক" লক্ষ্যগুলি সরিয়ে নিয়েছে: আমাকে পর্যায়ক্রমে নতুন সংস্করণগুলি ডাউনলোড করতে হবে।
আমি বিভিন্ন গিটহাব প্রকল্পের সিএসএস ব্যবহার করে খেলি। উদাহরণ স্বরূপ:
<link rel="stylesheet" type="text/css"
href="http://rawgit.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css">
তবে শেষ পর্যন্ত গিটহাব থেকেই সিএসএস ব্যবহার করার সিদ্ধান্ত নিয়েছে।
উৎস
এইচটিএমএল ফাইল (রিডমি-প্রিভিউ html) এখানে রয়েছে:
<!DOCTYPE html>
<!-- Preview a GitHub README.md.
Copy this file to a directory that contains repo directories.
Specify a repo name in the query string. For example:
http://localhost/github/readme-preview.html?myrepo
-->
<html>
<head>
<title>Preview GitHub readme</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<!-- Downloaded copies of the CSS files served by GitHub.
In github.css, the @font-face for font-family:'octicons'
has been edited to refer to local copies of the font files -->
<link rel="stylesheet" type="text/css" href="github.css"/>
<link rel="stylesheet" type="text/css" href="github2.css"/>
<style>
body {
margin-top: 1em;
}
</style>
<script type="text/javascript">
//<![CDATA[
var HTTP_STATUS_OK = 200;
var URL_API_GITHUB_RENDER_MARKDOWN = "https://api.github.com/markdown/raw";
var README_FILE_NAME = "README.md";
var repo = location.search.substring(1);
// Get Markdown, then render it as HTML
function getThenRenderMarkdown() {
var xhr = new XMLHttpRequest();
xhr.open("GET", repo + "/" + README_FILE_NAME, true);
xhr.responseType = "text";
xhr.onload = function(e) {
if (this.status == HTTP_STATUS_OK) {
// Response text contains Markdown
renderMarkdown(this.responseText);
}
}
xhr.send();
}
// Use the GitHub API to render Markdown as HTML
function renderMarkdown(markdown) {
var xhr = new XMLHttpRequest();
xhr.open("POST", URL_API_GITHUB_RENDER_MARKDOWN, true);
xhr.responseType = "html";
xhr.onload = function(e) {
if (this.status == HTTP_STATUS_OK) {
document.getElementById("readme-content").innerHTML = this.response;
}
}
xhr.send(markdown);
}
window.onload = getThenRenderMarkdown;
//]]>
</script>
</head>
<body>
<!-- The following HTML structure was copied from live GitHub page on 2015-12-01,
except for the "readme-content" id of the article element,
which was coined for this preview page.-->
<div class="main-content" role="main">
<div class="container repo-container new-discussion-timeline experiment-repo-nav">
<div class="repository-content">
<div id="readme" class="boxed-group flush clearfix announce instapaper_body md">
<h3><span class="octicon octicon-book"></span>README.md</h3>
<article class="markdown-body entry-content"
itemprop="mainContentOfPage"
id="readme-content"><p>Rendering markdown...</p></article>
</div>
</div>
</div>
</div>
</body>
</html>
