Skip to content

Commit 47129ce

Browse files
aklinker1aklinker1
authored
docs: Vitepress Docs Site (#71)
1 parent 6fdfe52 commit 47129ce

35 files changed

+1423
-1207
lines changed

‎.github/workflows/docs.yml

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,14 @@ jobs:
2727
- name: Install dependencies
2828
run: pnpm install
2929

30-
- name: Build VuePress site
31-
run: pnpm build
32-
working-directory: packages/docs
30+
- name: Build VitePress site
31+
run: pnpm docs:build
3332

3433
- name: Deploy to GitHub Pages
3534
uses: crazy-max/ghaction-github-pages@v2
3635
with:
3736
target_branch: gh-pages
38-
build_dir: packages/docs/.vuepress/dist
37+
build_dir: docs/.vitepress/dist
3938
fqdn: vite-plugin-web-extension.aklinker1.io
4039
env:
4140
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ dist
22
node_modules
33
*.log
44
.DS_Store
5+
/docs/.vitepress/cache

‎docs/.vitepress/config.ts

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import { defineConfig } from "vitepress";
2+
3+
const ogDescription = "Modern Chrome Extension Development";
4+
const ogTitle = "Vite Plugin Web Extension";
5+
const ogUrl = "https://vite-plugin-web-extension.aklinker1.io";
6+
const ogImage =
7+
"https://github.com/aklinker1/vite-plugin-web-extension/raw/main/.github/assets/social-banner.png";
8+
9+
const helpSidebar = {
10+
text: "Help",
11+
items: [
12+
{
13+
text: "Migrate to V2",
14+
link: "/guide/migration-v2",
15+
},
16+
// {
17+
// text: "Blog",
18+
// link: "/blog/",
19+
// },
20+
],
21+
};
22+
23+
export default defineConfig({
24+
title: "Vite Plugin Web Extension",
25+
description: "Modern chrome extension devlopment",
26+
27+
head: [
28+
["link", { rel: "icon", type: "image/svg+xml", href: "/logo.svg" }],
29+
["meta", { property: "og:type", content: "website" }],
30+
["meta", { property: "og:title", content: ogTitle }],
31+
["meta", { property: "og:image", content: ogImage }],
32+
["meta", { property: "og:url", content: ogUrl }],
33+
["meta", { property: "og:description", content: ogDescription }],
34+
["meta", { name: "twitter:card", content: "summary_large_image" }],
35+
["meta", { name: "twitter:site", content: "@vite_js" }],
36+
["meta", { name: "theme-color", content: "#646cff" }],
37+
[
38+
"script",
39+
{
40+
async: "",
41+
defer: "",
42+
"data-website-id": "3843019e-a8cb-4609-8e58-a61d69b1c02b",
43+
src: "https://stats.aklinker1.io/umami.js",
44+
},
45+
],
46+
],
47+
48+
themeConfig: {
49+
logo: "/logo.svg",
50+
51+
editLink: {
52+
pattern:
53+
"https://github.com/aklinker1/vite-plugin-web-extension/edit/main/docs/:path",
54+
text: "Suggest changes to this page",
55+
},
56+
57+
socialLinks: [
58+
{
59+
icon: "github",
60+
link: "https://github.com/aklinker1/vite-plugin-web-extension",
61+
},
62+
],
63+
64+
footer: {
65+
message: `Released under the MIT License.`,
66+
copyright: "Copyright © 2021-present Aaron Klinker",
67+
},
68+
69+
nav: [
70+
{ text: "Guide", link: "/guide/" },
71+
{ text: "Config", link: "/config/plugin-options" },
72+
{
73+
text: "v2",
74+
items: [
75+
{ text: "v2", link: "/" },
76+
{
77+
text: "v1",
78+
link: "https://v1.vite-plugin-web-extension.aklinker1.io/",
79+
},
80+
],
81+
},
82+
],
83+
84+
sidebar: {
85+
"/guide/": [
86+
{
87+
text: "Guide",
88+
items: [
89+
{ text: "Installation", link: "/guide/" },
90+
{ text: "Development Cycle", link: "/guide/development" },
91+
{
92+
text: "Building for Production",
93+
link: "/guide/building-for-production",
94+
},
95+
{
96+
text: "Frontend Frameworks",
97+
link: "/guide/frontend-frameworks",
98+
},
99+
{
100+
text: "Support Multiple Browsers",
101+
link: "/guide/supporting-multiple-browsers",
102+
},
103+
{
104+
text: "Configure Browser Startup",
105+
link: "/guide/configure-browser-startup",
106+
},
107+
{
108+
text: "Localization",
109+
link: "/guide/localization",
110+
},
111+
],
112+
},
113+
helpSidebar,
114+
],
115+
"/config/": [
116+
{
117+
text: "Config",
118+
items: [{ text: "Plugin Options", link: "/config/plugin-options" }],
119+
},
120+
helpSidebar,
121+
],
122+
},
123+
},
124+
});

‎docs/.vitepress/theme/components/GetStarted.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
## Create a New Project
2+
3+
To get started, bootstrap a project from scratch!
4+
5+
::: code-group
6+
7+
```bash [PNPM]
8+
pnpm create vite-plugin-web-extension
9+
```
10+
11+
```bash [YARN]
12+
yarn create vite-plugin-web-extension
13+
```
14+
15+
```bash [NPM]
16+
npm create vite-plugin-web-extension
17+
```
18+
19+
:::

‎docs/.vitepress/theme/components/GetStarted.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="GetStarted">
3+
<div class="container vp-doc">
4+
<IndexGetStarted />
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script setup>
10+
import IndexGetStarted from "./GetStarted.md";
11+
12+
console.log(IndexGetStarted);
13+
</script>
14+
15+
<style scoped>
16+
.GetStarted {
17+
position: relative;
18+
padding: 0 24px;
19+
}
20+
@media (min-width: 640px) {
21+
.GetStarted {
22+
padding: 0 48px;
23+
}
24+
}
25+
@media (min-width: 960px) {
26+
.GetStarted {
27+
padding: 0 64px;
28+
}
29+
}
30+
.container {
31+
margin: 0 auto;
32+
max-width: 1152px;
33+
}
34+
</style>

‎docs/.vitepress/theme/index.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Theme from "vitepress/theme";
2+
import { h } from "vue";
3+
import GetStarted from "./components/GetStarted.vue";
4+
import "./styles/vars.css";
5+
6+
export default {
7+
...Theme,
8+
Layout() {
9+
return h(Theme.Layout, null, {
10+
"home-features-after": () => h(GetStarted),
11+
});
12+
},
13+
};

‎docs/.vitepress/theme/styles/vars.css

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/**
2+
* Colors
3+
* -------------------------------------------------------------------------- */
4+
5+
:root {
6+
--vp-c-brand: #646cff;
7+
--vp-c-brand-light: #747bff;
8+
--vp-c-brand-lighter: #9499ff;
9+
--vp-c-brand-lightest: #bcc0ff;
10+
--vp-c-brand-dark: #535bf2;
11+
--vp-c-brand-darker: #454ce1;
12+
--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
13+
}
14+
15+
/**
16+
* Component: Button
17+
* -------------------------------------------------------------------------- */
18+
19+
:root {
20+
--vp-button-brand-border: var(--vp-c-brand-light);
21+
--vp-button-brand-text: var(--vp-c-white);
22+
--vp-button-brand-bg: var(--vp-c-brand);
23+
--vp-button-brand-hover-border: var(--vp-c-brand-light);
24+
--vp-button-brand-hover-text: var(--vp-c-white);
25+
--vp-button-brand-hover-bg: var(--vp-c-brand-light);
26+
--vp-button-brand-active-border: var(--vp-c-brand-light);
27+
--vp-button-brand-active-text: var(--vp-c-white);
28+
--vp-button-brand-active-bg: var(--vp-button-brand-bg);
29+
}
30+
31+
/**
32+
* Component: Home
33+
* -------------------------------------------------------------------------- */
34+
35+
:root {
36+
--vp-home-hero-name-color: transparent;
37+
--vp-home-hero-name-background: -webkit-linear-gradient(
38+
120deg,
39+
#bd34fe 30%,
40+
#41d1ff
41+
);
42+
43+
--vp-home-hero-image-background-image: linear-gradient(
44+
-45deg,
45+
#bd34fe 50%,
46+
#47caff 50%
47+
);
48+
--vp-home-hero-image-filter: blur(40px);
49+
}
50+
51+
@media (min-width: 640px) {
52+
:root {
53+
--vp-home-hero-image-filter: blur(56px);
54+
}
55+
}
56+
57+
@media (min-width: 960px) {
58+
:root {
59+
--vp-home-hero-image-filter: blur(72px);
60+
}
61+
}
62+
63+
/**
64+
* Component: Custom Block
65+
* -------------------------------------------------------------------------- */
66+
67+
:root {
68+
--vp-custom-block-tip-border: var(--vp-c-brand);
69+
--vp-custom-block-tip-text: var(--vp-c-brand-darker);
70+
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
71+
}
72+
73+
.dark {
74+
--vp-custom-block-tip-border: var(--vp-c-brand);
75+
--vp-custom-block-tip-text: var(--vp-c-brand-lightest);
76+
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
77+
}
78+
79+
/**
80+
* Component: Algolia
81+
* -------------------------------------------------------------------------- */
82+
83+
.DocSearch {
84+
--docsearch-primary-color: var(--vp-c-brand) !important;
85+
}
86+
87+
/**
88+
* VitePress: Custom fix
89+
* -------------------------------------------------------------------------- */
90+
91+
/*
92+
Use lighter colors for links in dark mode for a11y.
93+
Also specify some classes twice to have higher specificity
94+
over scoped class data attribute.
95+
*/
96+
.dark .vp-doc a,
97+
.dark .vp-doc a > code,
98+
.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
99+
.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
100+
.dark .link.link:hover,
101+
.dark .link.link.active,
102+
.dark .edit-link-button.edit-link-button,
103+
.dark .pager-link .title {
104+
color: var(--vp-c-brand-lighter);
105+
}
106+
107+
.dark .vp-doc a:hover,
108+
.dark .vp-doc a > code:hover {
109+
color: var(--vp-c-brand-lightest);
110+
opacity: 1;
111+
}
112+
113+
/* Transition by color instead of opacity */
114+
.dark .vp-doc .custom-block a {
115+
transition: color 0.25s;
116+
}
117+

‎docs/blog/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Blog
2+
3+
Nothing here! Come back later :smile:

0 commit comments

Comments
 (0)