Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add latest blog hint #267

Merged
merged 1 commit into from
Dec 14, 2022
Merged

feat: add latest blog hint #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
34 changes: 16 additions & 18 deletions src/components/RepoInputer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -72,11 +74,6 @@
</button>
</div>
</div>
<!-- embed chart guide dialog -->
<EmbedChartGuideDialog
v-if="state.showEmbedChartGuideDialog"
@close="state.showEmbedChartGuideDialog = false"
/>
</div>
</template>

Expand All @@ -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);
Expand All @@ -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,
Expand Down
22 changes: 22 additions & 0 deletions src/components/StarChartViewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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>
Expand All @@ -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";
Expand All @@ -130,6 +150,7 @@ interface State {
isGeneratingImage: boolean;
showSetTokenDialog: boolean;
showGenEmbedCodeDialog: boolean;
showEmbedChartGuideDialog: boolean;
}

const state = reactive<State>({
Expand All @@ -139,6 +160,7 @@ const state = reactive<State>({
isGeneratingImage: false,
showSetTokenDialog: false,
showGenEmbedCodeDialog: false,
showEmbedChartGuideDialog: false,
});
const store = useAppStore();

Expand Down