testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Website: put all components inside app (#18547)

Browse Source
This commit is contained in:
fisker Cheung authored and GitHub committed 2025-12-30 17:10:45 +08:00
1 parent 26321b02f8
commit f3b0a5eea1
12 files changed
+183 -129
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.vscode/settings.example.json
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
{
"[javascript][typescript][javascriptreact][typescriptreact][json][jsonc][json5][markdown][yaml][css][html]": {
"[javascript][typescript][javascriptreact][typescriptreact][json][jsonc][json5][markdown][yaml][css][html][vue]": {
"editor.defaultFormatter": "prettier.prettier-vscode",
"editor.formatOnSave": true,
},
website/index.html
-26
View File
@@ -44,34 +44,8 @@
</head>
<body>
<header>
<a href="/" class="logo-wrapper">
<img class="logo" src="/icon.png" alt="" />
<h1>Prettier <span id="version"></span></h1>
</a>
<span class="links">
<a
class="github-button"
href="https://github.com/prettier/prettier"
data-show-count="true"
aria-label="Star prettier on GitHub"
>
GitHub
</a>
</span>
</header>
<div id="root" class="playground-container"></div>
<script type="module" src="./playground/index.jsx"></script>
<script
async
defer
src="https://buttons.github.io/buttons.js"
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
</body>
</html>
website/package.json
+1
View File
@@ -32,6 +32,7 @@
"clipboard": "2.0.11",
"clsx": "2.1.1",
"cm6-graphql": "0.2.1",
"github-buttons": "2.29.1",
"graphql": "16.12.0",
"lz-string": "1.5.0",
"prism-react-renderer": "2.4.1",
website/playground/VersionLink.jsx
-32
View File
@@ -1,32 +0,0 @@
import { Teleport } from "vue";
export default function VersionLink({ version }) {
const match = version.match(/^pr-(\d+)$/);
let href;
if (match) {
href = `pull/${match[1]}`;
} else if (/\.0$/.test(version)) {
href = `releases/tag/${version}`;
} else {
href = `blob/main/CHANGELOG.md#${version.replaceAll(".", "")}`;
}
const formattedVersion = match ? `PR #${match[1]}` : `v${version}`;
document.title = `Prettier ${formattedVersion}`;
return (
<Teleport to="#version">
<a
href={`https://github.com/prettier/prettier/${href}`}
target="_blank"
rel="noreferrer noopener"
>
{formattedVersion}
</a>
</Teleport>
);
}
VersionLink.props = {
version: { type: String, required: true },
};
website/playground/github-button.vue
+25
View File
@@ -0,0 +1,25 @@
<script setup>
import { render } from "github-buttons";
import { useTemplateRef, onMounted } from "vue";
const anchorRef = useTemplateRef("anchor");
onMounted(() => {
const anchor = anchorRef.value;
render(anchor, function (el) {
anchor.parentNode.replaceChild(el, anchor);
});
});
</script>
<template>
<a
ref="anchor"
class="github-button"
href="https://github.com/prettier/prettier"
data-show-count="true"
aria-label="Star prettier on GitHub"
>
GitHub
</a>
</template>
website/playground/header.vue
+48
View File
@@ -0,0 +1,48 @@
<script setup>
import GithubButton from "./github-button.vue";
import ThemeToggle from "./theme-toggle.vue";
import VersionLink from "./version-link.vue";
const logo = "/icon.png";
defineProps({
version: { type: String, required: true },
});
</script>
<template>
<header>
<a href="/" class="logo-wrapper">
<img class="logo" :src="logo" alt="" />
<h1>Prettier <VersionLink :version></VersionLink></h1>
</a>
<span class="links">
<GithubButton
href="https://github.com/prettier/prettier"
dataShowCount="true"
class="github-button"
aria-label="Star prettier on GitHub"
>GitHub</GithubButton
>
<ThemeToggle></ThemeToggle>
</span>
</header>
</template>
<style>
.links {
display: flex;
gap: 8px;
font-size: 16px;
align-items: flex-end;
}
.links > * {
display: flex;
}
.github-button span {
display: flex;
}
</style>
website/playground/index.jsx
+2 -51
View File
@@ -1,52 +1,11 @@
import "./install-service-worker.js";
import { createApp, onMounted, reactive } from "vue";
import { useTheme } from "./composables/use-theme.js";
import Header from "./header.vue";
import Playground from "./Playground.jsx";
import { fixPrettierVersion } from "./utilities.js";
import VersionLink from "./VersionLink.jsx";
import WorkerApi from "./WorkerApi.js";
function ThemeToggle() {
const { theme, toggleTheme } = useTheme();
return (
<button
onClick={toggleTheme}
class="btn"
aria-label={`Switch to ${theme.value === "dark" ? "light" : "dark"} theme`}
>
{theme.value === "dark" ? (
<svg
class="theme-icon"
viewBox="0 0 24 24"
width="14"
height="14"
aria-hidden="true"
>
<path
fill="currentColor"
d="M9.37 5.51a7.4 7.4 0 009.12 9.12A7 7 0 119.37 5.51M12 3a9 9 0 108.9 7.64 5.39 5.39 0 01-9.8-3.14 5.4 5.4 0 012.26-4.4Q12.69 3 12 3"
/>
</svg>
) : (
<svg
class="theme-icon"
viewBox="0 0 24 24"
width="14"
height="14"
aria-hidden="true"
>
<path
fill="currentColor"
d="M12 9a1 1 0 0 1 0 6 1 1 0 0 1 0-6m0-2a5 5 0 1 0 0 10 5 5 0 0 0 0-10M2 13h2a1 1 0 0 0 0-2H2a1 1 0 0 0 0 2m18 0h2a1 1 0 0 0 0-2h-2a1 1 0 0 0 0 2M11 2v2a1 1 0 0 0 2 0V2a1 1 0 0 0-2 0m0 18v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-2 0M5.99 4.58a1 1 0 1 0-1.41 1.41l1.06 1.06a1 1 0 1 0 1.41-1.41zm12.37 12.37a1 1 0 1 0-1.41 1.41l1.06 1.06a1 1 0 1 0 1.41-1.41zm1.06-10.96a1 1 0 1 0-1.41-1.41l-1.06 1.06a1 1 0 1 0 1.41 1.41zM7.05 18.36a1 1 0 1 0-1.41-1.41l-1.06 1.06a1 1 0 1 0 1.41 1.41z"
/>
</svg>
)}
</button>
);
}
const App = {
name: "App",
setup() {
@@ -72,7 +31,7 @@ const App = {
return (
<>
<VersionLink version={version} />
<Header version={version}></Header>
<Playground
worker={worker}
availableOptions={availableOptions}
@@ -100,14 +59,6 @@ function augmentOption(option) {
return option;
}
const linksContainer = document.querySelector(".links");
if (linksContainer) {
const themeToggleContainer = document.createElement("div");
linksContainer.appendChild(themeToggleContainer);
const themeToggleRoot = createApp(ThemeToggle);
themeToggleRoot.mount(themeToggleContainer);
}
const container = document.getElementById("root");
const root = createApp(App);
root.mount(container);
website/playground/playground.css
-15
View File
@@ -88,21 +88,6 @@ header h1 {
margin: 0;
}
#version {
font-size: 0.5em;
line-height: 0;
opacity: 0.5;
}
.links {
display: flex;
gap: 8px;
font-size: 16px;
align-items: center;
}
.links > * {
display: flex;
}
.theme-icon {
padding-block: 2px;
}
website/playground/theme-toggle.vue
+40
View File
@@ -0,0 +1,40 @@
<script setup>
import { useTheme } from "./composables/use-theme.js";
const { theme, toggleTheme } = useTheme();
</script>
<template>
<button
@click="toggleTheme"
class="btn"
:aria-label="`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`"
>
<svg
class="theme-icon"
viewBox="0 0 24 24"
width="14"
height="14"
aria-hidden="true"
v-if="theme === 'dark'"
>
<path
fill="currentColor"
d="M9.37 5.51a7.4 7.4 0 009.12 9.12A7 7 0 119.37 5.51M12 3a9 9 0 108.9 7.64 5.39 5.39 0 01-9.8-3.14 5.4 5.4 0 012.26-4.4Q12.69 3 12 3"
/>
</svg>
<svg
v-if="theme === 'light'"
class="theme-icon"
viewBox="0 0 24 24"
width="14"
height="14"
aria-hidden="true"
>
<path
fill="currentColor"
d="M12 9a1 1 0 0 1 0 6 1 1 0 0 1 0-6m0-2a5 5 0 1 0 0 10 5 5 0 0 0 0-10M2 13h2a1 1 0 0 0 0-2H2a1 1 0 0 0 0 2m18 0h2a1 1 0 0 0 0-2h-2a1 1 0 0 0 0 2M11 2v2a1 1 0 0 0 2 0V2a1 1 0 0 0-2 0m0 18v2a1 1 0 0 0 2 0v-2a1 1 0 0 0-2 0M5.99 4.58a1 1 0 1 0-1.41 1.41l1.06 1.06a1 1 0 1 0 1.41-1.41zm12.37 12.37a1 1 0 1 0-1.41 1.41l1.06 1.06a1 1 0 1 0 1.41-1.41zm1.06-10.96a1 1 0 1 0-1.41-1.41l-1.06 1.06a1 1 0 1 0 1.41 1.41zM7.05 18.36a1 1 0 1 0-1.41-1.41l-1.06 1.06a1 1 0 1 0 1.41 1.41z"
/>
</svg>
</button>
</template>
website/playground/version-link.vue
+51
View File
@@ -0,0 +1,51 @@
<script setup>
import { computed, watch, onMounted } from "vue";
const props = defineProps({
version: { type: String, required: true },
});
const versionData = computed(() => {
const match = props.version.match(/^pr-(\d+)$/);
let href;
if (match) {
href = `pull/${match[1]}`;
} else if (/\.0$/.test(props.version)) {
href = `releases/tag/${props.version}`;
} else {
href = `blob/main/CHANGELOG.md#${props.version.replaceAll(".", "")}`;
}
return {
href,
formattedVersion: match ? `PR #${match[1]}` : `v${props.version}`,
};
});
const updateTitle = () => {
document.title = `Prettier ${versionData.value.formattedVersion}`;
};
watch(() => props.version, updateTitle);
onMounted(updateTitle);
</script>
<template>
<a
:href="`https://github.com/prettier/prettier/${versionData.href}`"
target="_blank"
rel="noreferrer noopener"
class="version"
>
{{ versionData.formattedVersion }}
</a>
</template>
<style>
.version {
font-size: 0.5em;
line-height: 0;
opacity: 0.5;
}
</style>
website/vite.config.mjs
+7 -4
View File
@@ -9,10 +9,13 @@ import packageJson from "./package.json" with { type: "json" };
const IS_PRODUCTION = process.env.NODE_ENV === "production";
const IS_CI = Boolean(process.env.CI);
const OUT_DIRECTORY = "./static/playground/";
const DEPENDENCIES_EXCLUDE_FROM_CDN = new Set([
"cm6-graphql",
"@docusaurus/preset-classic",
]);
const DEPENDENCIES_EXCLUDE_FROM_CDN = new Set(
[
IS_PRODUCTION ? undefined : "vue",
"cm6-graphql",
"@docusaurus/preset-classic",
].filter(Boolean),
);
export default defineConfig(async () => ({
base: IS_PRODUCTION ? "/playground/" : undefined,
website/yarn.lock
+8
View File
@@ -7968,6 +7968,13 @@ __metadata:
languageName: node
linkType: hard
"github-buttons@npm:2.29.1":
version: 2.29.1
resolution: "github-buttons@npm:2.29.1"
checksum: 10/ca7c2ad1714e68041f41d09d5ce5f35219ff5a54490158586b112e193ccaa557bb0a8bee95de8fc054879d08cc8b4985bde88dde01d8d5ca4208dd6b938615c1
languageName: node
linkType: hard
"github-slugger@npm:^1.5.0":
version: 1.5.0
resolution: "github-slugger@npm:1.5.0"
@@ -12876,6 +12883,7 @@ __metadata:
clsx: "npm:2.1.1"
cm6-graphql: "npm:0.2.1"
concurrently: "npm:9.2.1"
github-buttons: "npm:2.29.1"
graphql: "npm:16.12.0"
lz-string: "npm:1.5.0"
prism-react-renderer: "npm:2.4.1"