1 files changed, 52 insertions, 0 deletions
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
new file mode 100644
index 00000000000..2200754cbef
--- /dev/null
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -0,0 +1,52 @@
+<script>
+import Store from '../stores/repo_store';
+
+export default {
+  data: () => Store,
+  mounted() {
+    this.highlightFile();
+  },
+  computed: {
+    html() {
+      return this.activeFile.html;
+    },
+  },
+
+  methods: {
+    highlightFile() {
+      $(this.$el).find('.file-content').syntaxHighlight();
+    },
+  },
+
+  watch: {
+    html() {
+      this.$nextTick(() => {
+        this.highlightFile();
+      });
+    },
+  },
+};
+</script>
+
+<template>
+<div>
+  <div
+    v-if="!activeFile.render_error"
+    v-html="activeFile.html">
+  </div>
+  <div
+    v-else-if="activeFile.tooLarge"
+    class="vertical-center render-error">
+    <p class="text-center">
+      The source could not be displayed because it is too large. You can <a :href="activeFile.raw_path">download</a> it instead.
+    </p>
+  </div>
+  <div
+    v-else
+    class="vertical-center render-error">
+    <p class="text-center">
+      The source could not be displayed because a rendering error occured. You can <a :href="activeFile.raw_path">download</a> it instead.
+    </p>
+  </div>
+</div>
+</template>