feat: add latest blog hint (#267)

star-history · Dec 14, 2022 · 3f1fbf5 · 3f1fbf5
1 parent 21ce21c
commit 3f1fbf5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -31,8 +31,7 @@
     <link rel="shortcut icon" href="/icon.png" />
     <link
       rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
-      integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
+      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
       crossorigin
     />
     <title>GitHub Star History</title>

diff --git a/src/components/RepoInputer.vue b/src/components/RepoInputer.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="w-full px-3 shrink-0 flex flex-col justify-start items-center">
     <div
-      class="mt-4 flex flex-row justify-center items-center flex-wrap"
-      :style="`visibility: ${store.repos.length > 0 ? 'visible' : 'hidden'}`"
+      class="w-auto mx-auto mt-6 mb-2 flex flex-row justify-center items-center flex-wrap"
+      :class="state.latestBlog ?? 'invisible'"
     >
-      <div class="text-gray-700 text-sm">
-        <span class="text-lg">👉</span> Add this <b>LIVE chart</b> to your
-        GitHub README
-      </div>
       <span
-        class="ml-3 px-2 py-1 text-sm cursor-pointer rounded bg-green-600 text-white shadow hover:bg-green-700"
-        @click="state.showEmbedChartGuideDialog = true"
-        >Show me How</span
+        class="px-2 -mt-px leading-7 rounded mr-2 text-sm bg-green-100 text-green-600 font-medium"
+        >What's new</span
+      >
+      <a
+        class="text-gray-700 hover:underline"
+        :href="`/blog/${state.latestBlog?.slug}`"
       >
+        {{ state.latestBlog?.title }}
+        <i class="fas fa-chevron-right mr-1 text-gray-500 text-sm"></i>
+      </a>
     </div>
     <div
       class="w-auto sm:w-full grow max-w-3xl 2xl:max-w-4xl mt-4 flex flex-row justify-center items-center shadow-inner border border-solid border-dark rounded"
@@ -72,11 +74,6 @@
         </button>
       </div>
     </div>
-    <!-- embed chart guide dialog -->
-    <EmbedChartGuideDialog
-      v-if="state.showEmbedChartGuideDialog"
-      @close="state.showEmbedChartGuideDialog = false"
-    />
   </div>
 </template>
 
@@ -86,22 +83,20 @@ import { head } from "lodash";
 import { GITHUB_REPO_URL_REG } from "../helpers/consts";
 import toast from "../helpers/toast";
 import useAppStore from "../store";
-import EmbedChartGuideDialog from "./EmbedChartGuideDialog.vue";
 
 interface State {
   repo: string;
   repos: {
     name: string;
     visible: boolean;
   }[];
-  showEmbedChartGuideDialog: boolean;
+  latestBlog?: Blog;
 }
 
 const store = useAppStore();
 const state = reactive<State>({
   repo: "",
   repos: [],
-  showEmbedChartGuideDialog: false,
 });
 
 const inputElRef = ref<HTMLInputElement | null>(null);
@@ -110,7 +105,10 @@ const isFetching = computed(() => {
   return store.isFetching;
 });
 
-onMounted(() => {
+onMounted(async () => {
+  const res = await fetch("/blog/data.json");
+  const blogList = (await res.json()) as Blog[];
+  state.latestBlog = head(blogList);
   state.repos = store.repos.map((r) => {
     return {
       name: r,

diff --git a/src/components/StarChartViewer.vue b/src/components/StarChartViewer.vue
@@ -33,6 +33,20 @@
       :chart-mode="chartMode"
     />
   </div>
+  <div
+    v-if="state.chartData"
+    class="w-auto mx-auto my-2 flex flex-row justify-center items-center flex-wrap px-4 py-2 border rounded-full shadow"
+  >
+    <div class="text-gray-700 text-sm">
+      <span class="text-lg">👉</span> Add this <b>LIVE chart</b> to your GitHub
+      README
+    </div>
+    <span
+      class="ml-3 px-2 py-1 text-sm cursor-pointer rounded bg-green-600 text-white shadow hover:bg-green-700"
+      @click="state.showEmbedChartGuideDialog = true"
+      >Show me How</span
+    >
+  </div>
   <div
     v-if="state.chartData"
     class="relative mt-4 mb-8 w-full px-3 mx-auto max-w-4xl flex flex-row flex-wrap justify-between items-center"
@@ -97,6 +111,11 @@
     v-if="state.showGenEmbedCodeDialog"
     @close="handleGenEmbedCodeDialogClose"
   />
+  <!-- embed chart guide dialog -->
+  <EmbedChartGuideDialog
+    v-if="state.showEmbedChartGuideDialog"
+    @close="state.showEmbedChartGuideDialog = false"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -113,6 +132,7 @@ import StarXYChart from "./Charts/StarXYChart.vue";
 import TokenSettingDialog from "./TokenSettingDialog.vue";
 import GenerateEmbedCodeDialog from "./GenerateEmbedCodeDialog.vue";
 import EmbedMarkdownSection from "./EmbedMarkdownSection.vue";
+import EmbedChartGuideDialog from "./EmbedChartGuideDialog.vue";
 
 interface State {
   chartMode: "Date" | "Timeline";
@@ -130,6 +150,7 @@ interface State {
   isGeneratingImage: boolean;
   showSetTokenDialog: boolean;
   showGenEmbedCodeDialog: boolean;
+  showEmbedChartGuideDialog: boolean;
 }
 
 const state = reactive<State>({
@@ -139,6 +160,7 @@ const state = reactive<State>({
   isGeneratingImage: false,
   showSetTokenDialog: false,
   showGenEmbedCodeDialog: false,
+  showEmbedChartGuideDialog: false,
 });
 const store = useAppStore();