Skip to content

Commit d44a8e2

Browse files
AslemammadAmirSa12
Aslemammad
and
AmirSa12
authored
chore: new architecture for the ui (#369)
Co-authored-by: AmirSa12 <amirhosseinpr184@gmail.com>
1 parent 6bb5cab commit d44a8e2

18 files changed

Lines changed: 1121 additions & 202 deletions

File tree

‎packages/app/app/assets/css/main.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,3 +117,7 @@ details {
117117
summary {
118118
@apply cursor-pointer;
119119
}
120+
121+
code > pre {
122+
@apply rounded-lg overflow-x-scroll bg-transparent! text-sm;
123+
}

‎packages/app/app/components/Commits.vue‎

Lines changed: 45 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<script lang="ts" setup>
22
import type { RendererObject } from "marked";
3+
import bash from "@shikijs/langs/bash";
4+
import githubDark from "@shikijs/themes/github-dark";
5+
import githubLight from "@shikijs/themes/github-light";
36
import { marked } from "marked";
7+
import { createHighlighterCoreSync, type HighlighterCore } from "shiki/core";
8+
import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
49
510
const props = defineProps<{
611
owner: string;
@@ -42,16 +47,47 @@ const selectedCommit = shallowRef<
4247
// Markdown
4348
4449
// Add target to links
45-
const renderer: RendererObject = {
46-
link(originalLink) {
47-
const link = marked.Renderer.prototype.link.call(this, originalLink);
48-
return link.replace("<a", "<a target='_blank' rel='noreferrer' ");
49-
},
50-
};
51-
marked.use({ renderer });
5250
53-
// Pagination
51+
const colorMode = useColorMode();
52+
let shiki: HighlighterCore;
53+
54+
onBeforeMount(async () => {
55+
// if (typeof window === 'undefined') {
56+
// const { loadWasm } = await import('shiki')
57+
// // @ts-expect-error ignore error
58+
// await loadWasm(import(/* @vite-ignore */ 'shiki/onig.wasm'))
59+
// }
60+
61+
shiki = createHighlighterCoreSync({
62+
themes: [githubDark, githubLight],
63+
langs: [bash],
64+
engine: createJavaScriptRegexEngine(),
65+
});
66+
67+
const renderer: RendererObject = {
68+
link(originalLink) {
69+
const link = marked.Renderer.prototype.link.call(this, originalLink);
70+
return link.replace(
71+
"<a",
72+
"<a target='_blank' rel='noreferrer' class='text-primary underline'",
73+
);
74+
},
75+
code({ text }) {
76+
return `<code class="language-bash">${shiki.codeToHtml(text, {
77+
theme: colorMode.preference === "dark" ? "github-dark" : "github-light",
78+
lang: "bash",
79+
})}</code>`;
80+
},
81+
};
5482
83+
marked.use({ renderer });
84+
});
85+
86+
onBeforeUnmount(() => {
87+
shiki?.dispose();
88+
});
89+
90+
// Pagination
5591
const fetching = ref(false);
5692
const fetchMoreForceDisabled = ref(!commitsWithRelease.value.length);
5793
@@ -218,7 +254,7 @@ async function fetchMore() {
218254
</div>
219255

220256
<div
221-
class="max-w-full p-4 border border-gray-100 dark:border-gray-800 rounded-lg prose dark:prose-invert"
257+
class="max-w-full p-4 overflow-x-scroll border border-gray-100 dark:border-gray-800 rounded-lg prose dark:prose-invert flex flex-col gap-2"
222258
v-html="marked(selectedCommit.release.text)"
223259
/>
224260
</div>

‎packages/app/app/components/RepoSearch.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,20 @@ const examples = [
1414
name: "vite",
1515
avatar: "https://avatars.githubusercontent.com/u/65625612?v=4",
1616
},
17+
{
18+
owner: "rolldown",
19+
name: "rolldown",
20+
avatar: "https://avatars.githubusercontent.com/u/94954945?s=200&v=4",
21+
},
1722
{
1823
owner: "vuejs",
1924
name: "core",
2025
avatar: "https://avatars.githubusercontent.com/u/6128107?v=4",
2126
},
2227
{
23-
owner: "QwikDev",
24-
name: "qwik",
25-
avatar: "https://avatars.githubusercontent.com/u/138123704?v=4",
28+
owner: "sveltejs",
29+
name: "svelte",
30+
avatar: "https://avatars.githubusercontent.com/u/23617963?s=200&v=4",
2631
},
2732
{
2833
owner: "Tresjs",

‎packages/app/app/layouts/default.vue‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,22 +22,12 @@ const route = useRoute();
2222
<ClientOnly>
2323
<UButton
2424
aria-label="Toggle theme"
25-
:icon="
26-
colorMode.preference === 'dark'
27-
? 'ph-moon'
28-
: colorMode.preference === 'light'
29-
? 'ph-sun'
30-
: 'ph-moon-stars'
31-
"
25+
:icon="colorMode.preference === 'light' ? 'ph-sun' : 'ph-moon-stars'"
3226
color="neutral"
3327
variant="link"
3428
@click="
3529
colorMode.preference =
36-
colorMode.preference === 'dark'
37-
? 'system'
38-
: colorMode.preference === 'system'
39-
? 'light'
40-
: 'dark'
30+
colorMode.preference === 'dark' ? 'light' : 'dark'
4131
"
4232
/>
4333
<template #fallback>

packages/app/app/pages/view/[owner]/[repo].vue renamed to packages/app/app/pages/~/[owner]/[repo].vue

File renamed without changes.

‎packages/app/e2e.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ beforeAll(async () => {
3434
server = await app.listen(3300);
3535

3636
await ezSpawn.async(
37-
"pnpm cross-env TEST=true pnpm --filter=app run build",
37+
"pnpm cross-env TEST=true NITRO_GH_BASE_URL=http://localhost:3300 pnpm --filter=app run build",
3838
[],
3939
{
4040
stdio: "inherit",

‎packages/app/nuxt.config.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import process from "node:process";
2-
import ncb from "nitro-cloudflare-dev";
1+
// import ncb from "nitro-cloudflare-dev";
32
import { resolve } from "pathe";
43

54
// https://nuxt.com/docs/api/configuration/nuxt-config
65
export default defineNuxtConfig({
6+
sourcemap: true,
77
compatibilityDate: "2024-07-30",
88

99
// https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4
1010
future: { compatibilityVersion: 4 },
1111

1212
// https://nuxt.com/modules
13-
modules: ["@nuxt/eslint", "@nuxt/ui", "@vueuse/nuxt"],
13+
modules: ["@nuxt/eslint", "@nuxt/ui", "@vueuse/nuxt", "nitro-cloudflare-dev"],
1414

1515
css: ["~/assets/css/main.css"],
1616

@@ -28,7 +28,6 @@ export default defineNuxtConfig({
2828
preset: "cloudflare-pages",
2929
sourceMap: "inline",
3030
compatibilityDate: "2024-09-19",
31-
modules: [ncb],
3231
externals: {
3332
inline: [
3433
"@octokit",
@@ -47,14 +46,15 @@ export default defineNuxtConfig({
4746
},
4847

4948
runtimeConfig: {
50-
appId: process.env.NITRO_APP_ID || "",
51-
webhookSecret: process.env.NITRO_WEBHOOK_SECRET || "",
52-
privateKey: process.env.NITRO_PRIVATE_KEY || "",
53-
rmStaleKey: process.env.NITRO_RM_STALE_KEY || "",
54-
githubToken:
55-
process.env.GITHUB_TOKEN || process.env.NITRO_GITHUB_TOKEN || "",
56-
ghBaseUrl: process.env.NITRO_GH_BASE_URL || "https://api.github.com",
57-
test: process.env.NITRO_TEST || "",
49+
nitro: {
50+
envPrefix: "NITRO_",
51+
},
52+
appId: "",
53+
webhookSecret: "",
54+
privateKey: "",
55+
rmStaleKey: "",
56+
ghBaseUrl: "https://api.github.com",
57+
test: "",
5858
},
5959

6060
hooks: {
@@ -68,7 +68,7 @@ export default defineNuxtConfig({
6868
handler: clientRenderer,
6969
});
7070
nitro.options.handlers.unshift({
71-
route: "/view/**",
71+
route: "/~/**",
7272
handler: clientRenderer,
7373
});
7474
},

‎packages/app/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"dependencies": {
1919
"@iconify-json/ph": "^1.1.14",
2020
"@nuxt/ui": "^3.0.0-alpha.10",
21+
"@nuxtjs/mdc": "0.17.0",
2122
"@octokit/app": "^15.1.1",
2223
"@octokit/graphql": "^8.1.1",
2324
"@octokit/plugin-paginate-rest": "^11.3.6",
@@ -26,8 +27,10 @@
2627
"@vueuse/nuxt": "^12.2.0",
2728
"marked": "^15.0.4",
2829
"nuxt": "^3.15.0",
30+
"nuxt-shiki": "0.3.0",
2931
"octokit": "^4.0.2",
3032
"query-registry": "^3.0.1",
33+
"unstorage": "^1.16.0",
3134
"vue": "^3.5.13",
3235
"vue-router": "^4.4.3",
3336
"zod": "^3.23.8"

‎packages/app/server/api/repo/commits.get.ts‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { z } from "zod";
2-
import { useGithubREST } from "../../../server/utils/octokit";
32

43
const querySchema = z.object({
54
owner: z.string(),
@@ -14,12 +13,19 @@ export default defineEventHandler(async (event) => {
1413
const query = await getValidatedQuery(event, (data) =>
1514
querySchema.parse(data),
1615
);
17-
const octokit = useGithubREST(event);
16+
const installation = await useOctokitInstallation(
17+
event,
18+
query.owner,
19+
query.repo,
20+
);
1821

19-
const { data: repo } = await octokit.request("GET /repos/{owner}/{repo}", {
20-
owner: query.owner,
21-
repo: query.repo,
22-
});
22+
const { data: repo } = await installation.request(
23+
"GET /repos/{owner}/{repo}",
24+
{
25+
owner: query.owner,
26+
repo: query.repo,
27+
},
28+
);
2329

2430
const defaultBranch = repo.default_branch;
2531

@@ -30,7 +36,7 @@ export default defineEventHandler(async (event) => {
3036
: 1;
3137
const per_page = Number.parseInt(query.per_page);
3238

33-
const { data: commits } = await octokit.request(
39+
const { data: commits } = await installation.request(
3440
"GET /repos/{owner}/{repo}/commits",
3541
{
3642
owner: query.owner,
@@ -44,7 +50,7 @@ export default defineEventHandler(async (event) => {
4450
const commitsWithStatuses = await Promise.all(
4551
commits.map(async (commit) => {
4652
try {
47-
const { data: checkRuns } = await octokit.request(
53+
const { data: checkRuns } = await installation.request(
4854
"GET /repos/{owner}/{repo}/commits/{ref}/check-runs",
4955
{
5056
owner: query.owner,

‎packages/app/server/api/repo/index.get.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import type { H3Event } from "h3";
22
import { z } from "zod";
3-
import { useGithubREST } from "../../../server/utils/octokit";
43

54
const querySchema = z.object({
65
owner: z.string(),
76
repo: z.string(),
87
});
98

109
const getRepoInfo = defineCachedFunction(
11-
async (owner: string, repo: string, event?: H3Event) => {
10+
async (owner: string, repo: string, event: H3Event) => {
1211
try {
13-
const octokit = useGithubREST(event);
12+
const installation = await useOctokitInstallation(event, owner, repo);
1413

15-
const { data } = await octokit.request("GET /repos/{owner}/{repo}", {
14+
const { data } = await installation.request("GET /repos/{owner}/{repo}", {
1615
owner,
1716
repo,
1817
});

0 commit comments

Comments
 (0)