From 16da584ebd016c0b7b0ceb8aa70943f158fba5b9 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 20 Aug 2020 17:38:47 +0200
Subject: [PATCH] show error message when demo is missing

---
 docs/src/components/Demo/index.vue  | 45 ++++++++++++++++-------------
 docs/src/components/Demo/style.scss |  6 ++++
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index 4d99d5d9..1f3bb2d1 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -1,27 +1,32 @@
 <template>
   <div class="demo">
-    <div class="demo__preview" v-if="mainFile">
-      <component :is="mainFile" v-if="mode === 'vue'" />
-      <react-renderer :component="mainFile" v-if="mode === 'react'" />
-    </div>
-    <div class="demo__source">
-      <div class="demo__tabs" v-if="showFileNames">
-        <button
-          class="demo__tab"
-          :class="{ 'is-active': currentIndex === index}"
-          v-for="(file, index) in files"
-          :key="index"
-          @click="currentIndex = index"
-        >
-          {{ file.name }}
-        </button>
+    <template v-if="mainFile">
+      <div class="demo__preview">
+        <component :is="mainFile" v-if="mode === 'vue'" />
+        <react-renderer :component="mainFile" v-if="mode === 'react'" />
       </div>
-      <div class="demo__code" v-if="activeFile" :key="activeFile.path">
-        <prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
+      <div class="demo__source">
+        <div class="demo__tabs" v-if="showFileNames">
+          <button
+            class="demo__tab"
+            :class="{ 'is-active': currentIndex === index}"
+            v-for="(file, index) in files"
+            :key="index"
+            @click="currentIndex = index"
+          >
+            {{ file.name }}
+          </button>
+        </div>
+        <div class="demo__code" v-if="activeFile" :key="activeFile.path">
+          <prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
+        </div>
       </div>
-    </div>
-    <div class="demo__link">
-      <a :href="githubUrl" target="_blank">Edit on GitHub</a>
+      <div class="demo__link">
+        <a :href="githubUrl" target="_blank">Edit on GitHub</a>
+      </div>
+    </template>
+    <div v-else class="demo__error">
+      Could not find a demo called “{{ this.name }}”.
     </div>
   </div>
 </template>
diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index f5a43b88..78fb02e6 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -52,4 +52,10 @@
   &__link {
     padding: 1rem 1.5rem;
   }
+
+  &__error {
+    padding: 1rem 1.5rem;
+    color: $colorRed;
+    background-color: rgba($colorRed, 0.1);
+  }
 }
\ No newline at end of file