[GinR] Yaml view

yaml is converted to json in js and then shown with the json editor

pkg/markup/markup.go

@@ -33,6 +33,12 @@ func IsJSON(name string) bool {
 	return strings.HasSuffix(name, ".json")
 }
 
+// Is YAML return whethe a filename looks like it could be  a yaml file
+func IsYAML(name string) bool {
+	return strings.HasSuffix(name, ".yml")
+}
+
+
 const (
 	ISSUE_NAME_STYLE_NUMERIC      = "numeric"
 	ISSUE_NAME_STYLE_ALPHANUMERIC = "alphanumeric"
@@ -318,6 +324,7 @@ const (
 	ORG_MODE         Type = "orgmode"
 	IPYTHON_NOTEBOOK Type = "ipynb"
 	JSON             Type = "json"
+	YAML             Type = "yaml"
 )
 
 // Detect returns best guess of a markup type based on file name.
@@ -331,6 +338,8 @@ func Detect(filename string) Type {
 		return IPYTHON_NOTEBOOK
 	case IsJSON(filename):
 		return JSON
+	case IsYAML(filename):
+		return YAML
 	default:
 		return UNRECOGNIZED
 	}

routes/repo/view.go

@@ -278,6 +278,9 @@ func renderFile(c *context.Context, entry *git.TreeEntry, treeLink, rawLink stri
 		case markup.JSON:
 			c.Data["IsJSON"] = true
 			c.Data["FileContent"] = string(buf)
+		case markup.YAML:
+			c.Data["IsYAML"] = true
+			c.Data["FileContent"] = string(buf)
 		case markup.UNRECOGNIZED:
 			if tool.IsOdmlFile(buf) {
 				c.Data["IsOdML"] = true

templates/base/head.tmpl

@@ -71,6 +71,12 @@
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.11.0/jsoneditor.min.css"/>
 		{{end}}
 
+		{{if .IsYAML}}
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.11.0/jsoneditor.min.js"></script>
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.11.0/jsoneditor.min.css"/>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/yamljs/0.3.0/yaml.min.js"></script>
+		{{end}}
+
 		{{if .RequireSimpleMDE}}
 		<link rel="stylesheet" href="{{AppSubURL}}/plugins/simplemde-1.10.1/simplemde.min.css">
 		<script src="{{AppSubURL}}/plugins/simplemde-1.10.1/simplemde.min.js"></script>

templates/repo/view_file.tmpl

@@ -35,8 +35,8 @@
 			</div>
 		{{end}}
 	</h4>
-	<div class="{{if .IsJSON}}{{else}}ui attached table segment{{end}}">
-		<div id="{{if not .IsJSON}}{{if .IsIPythonNotebook}}ipython-notebook{{end}}" class="file-view {{if .IsMarkdown}}markdown{{else if .IsIPythonNotebook}}ipython-notebook{{else if .IsIPythonNotebook}}ipython-notebook{{else if .ReadmeInList}}plain-text{{else if and .IsTextFile}}code-view{{end}} has-emoji{{end}}">
+	<div class="{{if or .IsJSON .IsYAML}}{{else}}ui attached table segment{{end}}">
+		<div id="{{if not (or .IsJSON .IsYAML)}}{{if .IsIPythonNotebook}}ipython-notebook{{end}}" class="file-view {{if .IsMarkdown}}markdown{{else if .IsIPythonNotebook}}ipython-notebook{{else if .IsIPythonNotebook}}ipython-notebook{{else if .ReadmeInList}}plain-text{{else if and .IsTextFile}}code-view{{end}} has-emoji{{end}}">
 			{{if .IsMarkdown}}
 				{{if .FileContent}}{{.FileContent | Str2html}}{{end}}
 			{{else if .IsOdML}}
@@ -81,6 +81,20 @@
 				// get json
 				var json = editor.get();
 			</script>
+			{{else if .IsYAML}}
+			<div id="jsoneditor"></div>
+			<script>
+				// create the editor
+				var container = document.getElementById("jsoneditor");
+				var options = {mode:"view"};
+				var editor = new JSONEditor(container, options);
+				// set json
+				var json = YAML.parse({{.FileContent}})
+				editor.set(json);
+
+				// get json
+				var json = editor.get();
+			</script>
 			{{else if .IsIPythonNotebook}}
 				<script>
 					var rendered = null;