style: format code with prettier

pull/261/head
Eduardo San Martin Morote 4 years ago
parent f8b4aa5baa
commit 9bc5c5c631

@ -20,4 +20,5 @@ features:
details: VitePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2019-present Evan You
---
```

@ -29,7 +29,7 @@ If your site is deployed to a non-root URL, you will need to set the `base` opti
With a base URL, to reference an image in `public`, you'd have to use URLs like `/bar/image.png`. But this is brittle if you ever decide to change the base. To help with that, VitePress provides a built-in helper `$withBase` (injected onto Vue's prototype) that generates the correct path:
```html
<img :src="$withBase('/foo.png')" alt="foo">
<img :src="$withBase('/foo.png')" alt="foo" />
```
Note you can use the above syntax not only in theme components, but in your Markdown files as well.

@ -9,7 +9,7 @@ Without any configuration, the page is pretty minimal, and the user has no way t
│ │ └─ config.js
│ └─ index.md
└─ package.json
````
```
The essential file for configuring a VitePress site is `.vitepress/config.js`, which should export a JavaScript object:

@ -11,7 +11,7 @@ You can develop your custom theme by adding the `.vitepress/theme/index.js` file
│ │ └─ config.js
│ └─ index.md
└─ package.json
````
```
In `.vitepress/theme/index.js`, you must export theme object and register your own theme layout. Let's say you have your own `Layout` component like this.

@ -63,6 +63,7 @@ head:
- name: keywords
content: super duper SEO
---
```
### navbar

@ -85,5 +85,5 @@ The content value of the `<meta name= "description" content= "...">` for the cur
Helper method to generate correct path by prepending the `base` path configured in `.vitepress/config.js`. It's useful when you want to link to [public files with base path](./assets#public-files).
```html
<img :src="$withBase('/foo.png')" alt="foo">
<img :src="$withBase('/foo.png')" alt="foo" />
```

@ -56,6 +56,7 @@ Outbound links automatically get `target="_blank" rel="noopener noreferrer"`:
title: Blogging Like a Hacker
lang: en-US
---
```
This data will be available to the rest of the page, along with all custom and theming components.
@ -202,9 +203,7 @@ export default {
```html
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
</li>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
```

@ -24,7 +24,7 @@ There're couple of things that are improved from VuePress....
### It Uses Vue 3
Leverages Vue 3's improved template static analysis to stringify static content as much as possible. Static content is sent as string literals instead of JavaScript render function code the JS payload is therefore *much* cheaper to parse, and hydration also becomes faster.
Leverages Vue 3's improved template static analysis to stringify static content as much as possible. Static content is sent as string literals instead of JavaScript render function code the JS payload is therefore _much_ cheaper to parse, and hydration also becomes faster.
Note the optimization is applied while still allowing the user to freely mix Vue components inside markdown content the compiler does the static/dynamic separation for you automatically and you never need to think about it.

@ -6,7 +6,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, [link to Vue.js](https://vuejs.org) quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Ut enim ad minim veniam, **strong opinion** quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur *and emphasize* adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, **strong opinion** quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur _and emphasize_ adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
## Lists
@ -22,9 +22,9 @@ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu
1. Ordered item 1
1. Nested ordered item A
2. Nested ordered item A
2. Ordered item 2
3. Ordered item 3
1. Nested ordered item A
1. Ordered item 2
1. Ordered item 3
## Code Block and Block Quote

@ -34,12 +34,12 @@ watch(open, (value) => {
color: #eeeeee;
overflow: hidden;
cursor: pointer;
background-color: rgba(0, 0, 0, .85);
transition: all .15s ease;
background-color: rgba(0, 0, 0, 0.85);
transition: all 0.15s ease;
}
.debug:hover {
background-color: rgba(0, 0, 0, .75);
background-color: rgba(0, 0, 0, 0.75);
}
.debug.open {
@ -60,7 +60,7 @@ watch(open, (value) => {
}
.debug.open:hover {
background-color: rgba(0, 0, 0, .85);
background-color: rgba(0, 0, 0, 0.85);
}
.title {
@ -72,7 +72,7 @@ watch(open, (value) => {
.block {
margin: 2px 0 0;
border-top: 1px solid rgba(255, 255, 255, .16);
border-top: 1px solid rgba(255, 255, 255, 0.16);
padding: 8px 16px;
font-family: Hack, monospace;
font-size: 13px;

@ -86,15 +86,15 @@ const Home = defineAsyncComponent(() => import('./components/Home.vue'))
const NoopComponent = () => null
const CarbonAds = __CARBON__ ? defineAsyncComponent(
() => import('./components/CarbonAds.vue')
) : NoopComponent
const BuySellAds = __BSA__ ? defineAsyncComponent(
() => import('./components/BuySellAds.vue')
) : NoopComponent
const AlgoliaSearchBox = __ALGOLIA__ ? defineAsyncComponent(
() => import('./components/AlgoliaSearchBox.vue')
) : NoopComponent
const CarbonAds = __CARBON__
? defineAsyncComponent(() => import('./components/CarbonAds.vue'))
: NoopComponent
const BuySellAds = __BSA__
? defineAsyncComponent(() => import('./components/BuySellAds.vue'))
: NoopComponent
const AlgoliaSearchBox = __ALGOLIA__
? defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue'))
: NoopComponent
// generic state
const route = useRoute()

@ -41,7 +41,9 @@ onMounted(() => {
document.head.appendChild(s)
s.onload = () => { load() }
s.onload = () => {
load()
}
} else {
load()
}
@ -62,7 +64,7 @@ function load() {
.buy-sell-ads {
margin: 0 auto;
padding-top: 2rem;
font-size: .85rem;
font-size: 0.85rem;
}
.bsa-cpc {
@ -111,7 +113,7 @@ function load() {
margin-left: 36px;
padding: 0 8px;
line-height: 22px;
font-size: .85em;
font-size: 0.85em;
font-weight: 500;
color: #1c90f3;
content: 'Sponsored';

@ -1,6 +1,12 @@
<template>
<div class="edit-link">
<a v-if="url" class="link" :href="url" target="_blank" rel="noopener noreferrer">
<a
v-if="url"
class="link"
:href="url"
target="_blank"
rel="noopener noreferrer"
>
{{ text }} <OutboundLink class="icon" />
</a>
</div>

@ -3,7 +3,11 @@
<div class="wrapper">
<div class="container">
<div class="features">
<section v-for="(feature, index) in features" :key="index" class="feature">
<section
v-for="(feature, index) in features"
:key="index"
class="feature"
>
<h2 class="title" v-if="feature.title">{{ feature.title }}</h2>
<p class="details" v-if="feature.details">{{ feature.details }}</p>
</section>

@ -38,7 +38,7 @@
margin: 0;
text-align: center;
line-height: 1.4;
font-size: .9rem;
font-size: 0.9rem;
color: var(--c-text-light);
}
</style>

@ -1,7 +1,11 @@
<template>
<header v-if="showHero" class="home-hero">
<figure v-if="$frontmatter.heroImage" class="figure">
<img class="image" :src="$withBase($frontmatter.heroImage)" :alt="$frontmatter.heroAlt" />
<img
class="image"
:src="$withBase($frontmatter.heroImage)"
:alt="$frontmatter.heroAlt"
/>
</figure>
<h1 v-if="hasHeroText" id="main-title" class="title">{{ heroText }}</h1>
@ -30,10 +34,12 @@ const site = useSiteDataByRoute()
const data = useFrontmatter()
const showHero = computed(() => {
return data.value.heroImage
|| hasHeroText.value
|| hasTagline.value
|| hasAction.value
return (
data.value.heroImage ||
hasHeroText.value ||
hasTagline.value ||
hasAction.value
)
})
const hasHeroText = computed(() => data.value.heroText !== null)
@ -43,7 +49,9 @@ const hasTagline = computed(() => data.value.tagline !== null)
const tagline = computed(() => data.value.tagline || site.value.description)
const hasAction = computed(() => data.value.actionLink && data.value.actionText)
const hasAltAction = computed(() => data.value.altActionLink && data.value.altActionText)
const hasAltAction = computed(
() => data.value.altActionLink && data.value.altActionText
)
</script>
<style scoped>

@ -34,14 +34,14 @@ defineEmit(['toggle'])
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--c-divider);
padding: .7rem 1.5rem .7rem 4rem;
padding: 0.7rem 1.5rem 0.7rem 4rem;
height: var(--header-height);
background-color: #ffffff;
}
@media (min-width: 720px) {
.nav-bar {
padding: .7rem 1.5rem;
padding: 0.7rem 1.5rem;
}
}

@ -26,7 +26,7 @@
}
.logo {
margin-right: .75rem;
margin-right: 0.75rem;
height: 1.3rem;
vertical-align: bottom;
}

@ -27,7 +27,12 @@ const route = useRoute()
const open = ref(false)
watch(() => route.path, () => { open.value = false })
watch(
() => route.path,
() => {
open.value = false
}
)
function toggle() {
open.value = !open.value
@ -82,7 +87,7 @@ function toggle() {
border-bottom: 2px solid transparent;
padding: 0;
line-height: 24px;
font-size: .9rem;
font-size: 0.9rem;
font-weight: 500;
}
}

@ -13,7 +13,7 @@ import { useNavLink } from '../composables/navLink'
import OutboundLink from './icons/OutboundLink.vue'
const props = defineProps<{
item: DefaultTheme.NavItemWithLink,
item: DefaultTheme.NavItemWithLink
}>()
const propsRefs = toRefs(props)

@ -36,7 +36,7 @@ const links = computed(() => site.value.themeConfig.nav)
<style scoped>
.nav-links {
padding: .75rem 0;
padding: 0.75rem 0;
border-bottom: 1px solid var(--c-divider);
}

@ -1,5 +1,7 @@
<template functional>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z" />
<path
d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"
/>
</svg>
</template>

@ -1,5 +1,7 @@
<template functional>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z" />
<path
d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"
/>
</svg>
</template>

@ -1,9 +1,9 @@
code {
margin: 0;
border-radius: 3px;
padding: .25rem .5rem;
padding: 0.25rem 0.5rem;
font-family: var(--code-font-family);
font-size: .85em;
font-size: 0.85em;
color: var(--c-text-light);
background-color: var(--code-inline-bg-color);
}
@ -89,7 +89,7 @@ li > div[class*='language-'] {
}
.highlight-lines .highlighted {
background-color: rgba(0, 0, 0, .66);
background-color: rgba(0, 0, 0, 0.66);
}
/* Line numbers mode */
@ -104,7 +104,7 @@ div[class*='language-'].line-numbers-mode {
bottom: 0;
left: 0;
z-index: 3;
border-right: 1px solid rgba(0, 0, 0, .5);
border-right: 1px solid rgba(0, 0, 0, 0.5);
padding: 1.25rem 0;
width: 3.5rem;
text-align: center;
@ -118,10 +118,10 @@ div[class*='language-'].line-numbers-mode {
[class*='language-']:before {
position: absolute;
top: .6em;
top: 0.6em;
right: 1em;
z-index: 2;
font-size: .8rem;
font-size: 0.8rem;
color: #888;
}

@ -2,8 +2,8 @@
.custom-block.warning,
.custom-block.danger {
margin: 1rem 0;
border-left: .5rem solid;
padding: .1rem 1.5rem;
border-left: 0.5rem solid;
padding: 0.1rem 1.5rem;
overflow-x: auto;
}
@ -15,7 +15,7 @@
.custom-block.warning {
border-color: #e7c000;
color: #6b5900;
background-color: rgba(255, 229, 100, .3);
background-color: rgba(255, 229, 100, 0.3);
}
.custom-block.warning .custom-block-title {
@ -65,6 +65,6 @@
}
.custom-block-title {
margin-bottom: -.4rem;
margin-bottom: -0.4rem;
font-weight: 600;
}

@ -83,7 +83,7 @@ h2 {
margin-top: 2.25rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid var(--c-divider);
padding-bottom: .3rem;
padding-bottom: 0.3rem;
line-height: 1.25;
font-size: 1.65rem;
/* overflow-x: auto; */
@ -112,7 +112,7 @@ ul {
a,
area,
button,
[role="button"],
[role='button'],
input,
label,
select,
@ -132,10 +132,10 @@ a:hover {
a.header-anchor {
float: left;
margin-top: .125em;
margin-left: -.87em;
padding-right: .23em;
font-size: .85em;
margin-top: 0.125em;
margin-left: -0.87em;
padding-right: 0.23em;
font-size: 0.85em;
opacity: 0;
}

@ -7,7 +7,7 @@
.sidebar-link-item {
display: block;
margin: 0;
border-left: .25rem solid transparent;
border-left: 0.25rem solid transparent;
color: var(--c-text);
}
@ -21,7 +21,7 @@ a.sidebar-link-item.active {
}
.sidebar > .sidebar-links {
padding: .75rem 0 5rem;
padding: 0.75rem 0 5rem;
}
@media (min-width: 720px) {
@ -31,7 +31,7 @@ a.sidebar-link-item.active {
}
.sidebar > .sidebar-links > .sidebar-link + .sidebar-link {
padding-top: .5rem;
padding-top: 0.5rem;
}
@media (min-width: 720px) {
@ -41,7 +41,7 @@ a.sidebar-link-item.active {
}
.sidebar > .sidebar-links > .sidebar-link > .sidebar-link-item {
padding: .35rem 1.5rem .35rem 1.25rem;
padding: 0.35rem 1.5rem 0.35rem 1.25rem;
font-size: 1.1rem;
font-weight: 700;
}
@ -51,47 +51,57 @@ a.sidebar-link-item.active {
font-weight: 600;
}
.sidebar > .sidebar-links > .sidebar-link > .sidebar-links > .sidebar-link > .sidebar-link-item {
.sidebar
> .sidebar-links
> .sidebar-link
> .sidebar-links
> .sidebar-link
> .sidebar-link-item {
display: block;
padding: .35rem 1.5rem .35rem 2rem;
padding: 0.35rem 1.5rem 0.35rem 2rem;
line-height: 1.4;
font-size: 1rem;
font-weight: 400;
}
.sidebar > .sidebar-links > .sidebar-link > .sidebar-links > .sidebar-link > a.sidebar-link-item.active {
.sidebar
> .sidebar-links
> .sidebar-link
> .sidebar-links
> .sidebar-link
> a.sidebar-link-item.active {
border-left-color: var(--c-brand);
font-weight: 600;
}
.sidebar >
.sidebar-links >
.sidebar-link >
.sidebar-links >
.sidebar-link >
.sidebar-links >
.sidebar-link >
.sidebar-link-item {
.sidebar
> .sidebar-links
> .sidebar-link
> .sidebar-links
> .sidebar-link
> .sidebar-links
> .sidebar-link
> .sidebar-link-item {
display: block;
padding: .3rem 1.5rem .3rem 3rem;
padding: 0.3rem 1.5rem 0.3rem 3rem;
line-height: 1.4;
font-size: .9rem;
font-size: 0.9rem;
font-weight: 400;
}
.sidebar >
.sidebar-links >
.sidebar-link >
.sidebar-links >
.sidebar-link >
.sidebar-links >
.sidebar-link >
.sidebar-links >
.sidebar-link >
.sidebar-link-item {
.sidebar
> .sidebar-links
> .sidebar-link
> .sidebar-links
> .sidebar-link
> .sidebar-links
> .sidebar-link
> .sidebar-links
> .sidebar-link
> .sidebar-link-item {
display: block;
padding: .3rem 1.5rem .3rem 4rem;
padding: 0.3rem 1.5rem 0.3rem 4rem;
line-height: 1.4;
font-size: .9rem;
font-size: 0.9rem;
font-weight: 400;
}

@ -1,6 +1,5 @@
/** Base Styles */
:root {
/**
* Colors
* --------------------------------------------------------------------- */
@ -8,8 +7,8 @@
--c-white: #ffffff;
--c-black: #000000;
--c-divider-light: rgba(60, 60, 67, .12);
--c-divider-dark: rgba(84, 84, 88, .48);
--c-divider-light: rgba(60, 60, 67, 0.12);
--c-divider-dark: rgba(84, 84, 88, 0.48);
--c-text-light-1: #2c3e50;
--c-text-light-2: #476582;
@ -22,8 +21,11 @@
* Typography
* --------------------------------------------------------------------- */
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--font-family-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
--font-family-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
/**
* Z Indexes
@ -39,11 +41,11 @@
* Shadows
* --------------------------------------------------------------------- */
--shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);
--shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);
--shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);
--shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);
--shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16);
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
--shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
--shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
--shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
/**
* Sizes
@ -54,7 +56,6 @@
/** Fallback Styles */
:root {
--c-divider: var(--c-divider-light);
--c-text: var(--c-text-light-1);
@ -66,7 +67,6 @@
--code-line-height: 24px;
--code-font-family: var(--font-family-mono);
--code-font-size: 14px;
--code-inline-bg-color: rgba(27, 31, 35, .05);
--code-inline-bg-color: rgba(27, 31, 35, 0.05);
--code-bg-color: #282c34;
}

@ -14,8 +14,5 @@
"vitepress": ["index.ts"]
}
},
"include": [
".",
"../../types/shared.d.ts",
]
"include": [".", "../../types/shared.d.ts"]
}

@ -11,8 +11,5 @@
"/@types/*": ["../../types/*"]
}
},
"include": [
".",
"../../types/shared.d.ts"
]
"include": [".", "../../types/shared.d.ts"]
}

@ -6,8 +6,5 @@
"/@types/*": ["../../types/*"]
}
},
"include": [
".",
"../../types/shared.d.ts"
]
"include": [".", "../../types/shared.d.ts"]
}

Loading…
Cancel
Save