Add support for code blocks from GitHub gists

README.md

@@ -1,7 +1,22 @@
-# KNEWHUB
+# KnewHub
 
 [![Test Coverage](https://api.codeclimate.com/v1/badges/da7cb86882e3074c32d8/test_coverage)](https://codeclimate.com/github/knewplay/knewhub/test_coverage)
 
 An open learning platform for STEM.
 
+## Author Guide
+
+Authors use Markdown to write articles on KnewHub. In addition to regular Markdown syntax, the following custom syntax is supported:
+- Code blocks from separate code files in the repository where the Markdown file lives
+    + Syntax: `[codefile <relative_path>]`
+    + Example: `[codefile ./code-files/code-example.c]`
+- Code blocks from GitHub gists
+    + Syntax: `[codegist <gist_url>]`
+    + Example: `[codegist https://gist.github.com/jp524/2d00cbf0a9976db406e4369b31e25460]`
+- Collapsing elements (HTML details and summary tags)
+    + Syntax: `[details Hint]content[/details]`
+    + Example: `[details Click Here to Display Content]Content[/details]`
+
+## Development
+
 [Deployment Guide](./deployment-guide.md)

app/lib/request_path.rb

@@ -8,7 +8,7 @@ def self.define_base_url
     request_path = Thread.current[:request].fullpath
     match_data = request_path.match(%r{(.+/)(.+)})
     folder_path = match_data[1]
-    # Route GET /collections/:owner/:name/pages/*path uses CollectionsController#show action
+    # Route GET /collections/:author_username/:owner/:name/pages/*path uses CollectionsController#show action
     # The request route is modified to find where the corresponding file is stored
     folder_path.gsub(%r{(/collections/)}, '/repos/').gsub(%r{(/pages/)}, '/')
   end

config/initializers/custom_render.rb

@@ -1,4 +1,4 @@
-# Custom renderer that sets a custom class for code blocks
+# Custom renderer for Markdown files
 require 'rouge/plugins/redcarpet'
 
 class CustomRender < Redcarpet::Render::HTML
@@ -26,24 +26,35 @@ def header(text, header_level)
   private
 
   def process_custom_tags(text)
-    if (t = text.match(/(\[codefile )(.+)(\])/)) # [codefile <relative_path>]
+    # [codefile <relative_path>]
+    if (t = text.match(/(\[codefile )(.+)(\])/))
       process_codefile(t[2])
-    elsif (t = text.match(%r{(\[details )(.+)(\])(.+)(\[/details\])})) # [details Hint]content[/details]
+    # [codegist <gist_url>]
+    elsif (t = text.match(/(\[codegist )(.+)(\])/)) 
+      process_codegist(t[2])
+    # [details Hint]content[/details]
+    elsif (t = text.match(%r{(\[details )(.+)(\])(.+)(\[/details\])}))
       process_details(t[2], t[4])
     else
       "<p>#{text}</p>"
     end
   end
 
+  # Allow code blocks to be created from a separate file in the same repository
   def process_codefile(relative_path)
     absolute_path = Rails.root.to_s + RequestPath.define_base_url + relative_path
-    data = File.read(absolute_path)
-    <<~CODE
-      <pre class='code-block'>
-      <p>File: #{relative_path}</p>
-      <code>#{data}</code>
-      </pre>
-    CODE
+    code = File.read(absolute_path)
+    extension = File.extname(relative_path)
+    language = extension.delete_prefix(".")
+
+    block_code(code, language)
+  end
+
+  # Allow code from GitHub gists to be displayed
+  def process_codegist(gist_url)
+    <<~SCRIPT
+      <script src="#{gist_url}.js"></script>
+    SCRIPT
   end
 
   def process_details(title, content)

spec/fixtures/systems/collections/chapter-2/chapter-2-article-1.md

@@ -7,6 +7,8 @@ keywords: [one, two]
 
 [codefile ./code-files/code-example.c]
 
+[codegist https://gist.github.com/jp524/2d00cbf0a9976db406e4369b31e25460]
+
 ## Amplectitur atque mutabile
 
 Lorem markdownum cuspis verbis aut saepe munus, illa poenas vallibus *inque

spec/systems/collections/show_spec.rb

@@ -38,8 +38,21 @@
     it 'displays embedded code files' do
       visit '/collections/author/repo_owner/markdown-templates/pages/chapter-2/chapter-2-article-1'
 
-      assert_selector 'p', text: 'File: ./code-files/code-example.c'
-      assert_selector 'code', text: "void main() {\n  hello world\n}"
+      assert_selector 'code'
+      assert_selector 'pre', class: 'c'
+      assert_selector 'span', text: 'void'
+      assert_selector 'span', text: 'main'
+    end
+
+    it 'displays embedded code gists' do
+      visit '/collections/author/repo_owner/markdown-templates/pages/chapter-2/chapter-2-article-1'
+
+      expect(page).to have_css(
+        "script[src='https://gist.github.com/jp524/2d00cbf0a9976db406e4369b31e25460.js']",
+        visible: :hidden
+      )
+      assert_selector 'div', class: 'gist'
+      assert_selector 'a', text: 'test.rb'
     end
 
     it 'displays front matter' do