feat: add getting started instruction and loading code status

Author: ydcjeff

src/components/Footer.vue

@@ -10,7 +10,7 @@
  </footer>
 </template>
 
-<style>
+<style scoped>
 .footer-and-badge {
  border-top: 1px solid var(--c-white-dark);
  text-align: center;

src/components/Instruction.vue

@@ -0,0 +1,62 @@
+<template>
+ <div class="preview">
+ <h2>Choose a template on the left to get started.</h2>
+ <span class="iconify animate-bounce" data-icon="carbon:arrow-left"></span>
+ </div>
+</template>
+
+<style scoped>
+.preview {
+ max-width: 75%;
+ margin: 25% auto;
+ text-align: center;
+ color: #a1a1aa;
+}
+.iconify {
+ vertical-align: middle;
+ width: 10%;
+ height: 10%;
+}
+@media (max-width: 768px) {
+ .iconify {
+ width: 20%;
+ height: 20%;
+ }
+}
+/* copied from https://windicss.org/utilities/behaviors.html#animation */
+/* adjusted with translateX */
+@keyframes bounce {
+ 0%,
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+ }
+ 50% {
+ -webkit-transform: translateX(-25%);
+ transform: translateX(-25%);
+ -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ }
+}
+@-webkit-keyframes bounce {
+ 0%,
+ 100% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+ }
+ 50% {
+ -webkit-transform: translateX(-25%);
+ transform: translateX(-25%);
+ -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ }
+}
+.animate-bounce {
+ -webkit-animation: bounce 1s infinite;
+ animation: bounce 1s infinite;
+}
+</style>

src/components/PaneRight.vue

@@ -1,32 +1,41 @@
 <template>
- <div class="right-pane-tabs" v-if="tabs">
- <div
- v-for="tab in tabs"
- :key="tab"
- class="right-pane-tab"
- :class="{ active: currentTab === tab }"
- @click="currentTab = tab"
- >
- <span class="iconify" :data-icon="getFileType(tab)"></span>
- {{ tab }}
+ <div v-if="tabs">
+ <div class="right-pane-tabs">
+ <div
+ v-for="tab in tabs"
+ :key="tab"
+ class="right-pane-tab"
+ :class="{ active: currentTab === tab }"
+ @click="currentTab = tab"
+ >
+ <span class="iconify" :data-icon="getFileType(tab)"></span>
+ {{ tab }}
+ </div>
+ </div>
+ <div class="right-pane-contexts" v-if="store.code[currentTab]">
+ <KeepAlive>
+ <CodeBlock :lang="getLang" :code="formattedCode()" />
+ </KeepAlive>
+ </div>
+ <div v-else class="loading-code">
+ <h2>Loading Code...</h2>
  </div>
  </div>
- <div class="right-pane-contexts" v-if="store.code[currentTab]">
- <KeepAlive>
- <CodeBlock :lang="getLang" :code="formattedCode()" />
- </KeepAlive>
+ <div v-else>
+ <Instruction />
  </div>
 </template>
 
 <script>
 import CodeBlock from './CodeBlock.vue'
+import Instruction from './Instruction.vue'
 import { store } from '../store'
 import { computed, ref } from 'vue'
 import templates from '../templates/templates.json'
 import '@iconify/iconify'
 
 export default {
- components: { CodeBlock },
+ components: { CodeBlock, Instruction },
  setup() {
  const currentTab = ref('README.md')
  const tabs = computed(() => {
@@ -94,4 +103,10 @@ export default {
  padding: 0;
  }
 }
+.loading-code {
+ max-width: 75%;
+ margin: 25% auto;
+ text-align: center;
+ color: #a1a1aa;
+}
 </style>