diff --git a/.vitepress/inlined-scripts/restorePreference.js b/.vitepress/inlined-scripts/restorePreference.js index d4aab609..5e18b50f 100644 --- a/.vitepress/inlined-scripts/restorePreference.js +++ b/.vitepress/inlined-scripts/restorePreference.js @@ -8,6 +8,6 @@ restore('vue-docs-prefer-composition', 'prefer-composition', true) restore('vue-docs-prefer-sfc', 'prefer-sfc', true) - window.__VUE_BANNER_ID__ = 'vueconf2025' - restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed') + // window.__VUE_BANNER_ID__ = '' + // restore(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'banner-dismissed') })() diff --git a/.vitepress/theme/components/Banner.vue b/.vitepress/theme/components/Banner.vue index a41d0822..6730fcd4 100644 --- a/.vitepress/theme/components/Banner.vue +++ b/.vitepress/theme/components/Banner.vue @@ -22,31 +22,16 @@ function dismiss() { @@ -65,12 +50,12 @@ html:not(.banner-dismissed) { font-weight: 600; color: #fff; background-color: var(--vt-c-green); - background: #0f172a; - display: flex; - justify-content: center; - align-items: center; - - + background: linear-gradient( + 90deg, + rgba(66, 184, 131, 1) 0%, + rgba(39, 179, 137, 1) 19%, + rgba(100, 126, 255, 1) 100% + ); } .banner-dismissed .banner { @@ -85,7 +70,7 @@ button { position: absolute; right: 0; top: 0; - padding: 10px 10px; + padding: 5px; } .close { @@ -94,61 +79,10 @@ button { fill: #fff; transform: rotate(45deg); } - -.vt-banner-text { - color: #fff; - font-size: 16px; -} - -.vt-text-primary { - color: #75c05e; -} - -.vt-primary-action { - background: #75c05e; - color: #121c1a; - padding: 8px 15px; - border-radius: 5px; - font-size: 14px; - text-decoration: none; - margin: 0 10px; - font-weight: bold; -} - -.vt-primary-action:hover { - text-decoration: none; - background: #c4d141; -} - -@media (max-width: 1280px) { - .banner .vt-banner-text { - font-size: 14px; - } - - -} - -@media (max-width: 780px) { - .vt-tagline { - display: none; - } - .vt-primary-action { - margin: 0 10px; - padding: 5px 5px; - } - - .vt-time-now { - display: none; - } -} - -@media (max-width: 560px) { - - .vt-place { +/* +@media (max-width: 720px) { + a > span { display: none; } - .vt-date { - display: none; - } -} +} */ diff --git a/.vitepress/theme/components/ScrimbaLink.vue b/.vitepress/theme/components/ScrimbaLink.vue new file mode 100644 index 00000000..757f3f34 --- /dev/null +++ b/.vitepress/theme/components/ScrimbaLink.vue @@ -0,0 +1,59 @@ + + + diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts index 9ea1fb93..e2d8379a 100644 --- a/.vitepress/theme/index.ts +++ b/.vitepress/theme/index.ts @@ -10,14 +10,15 @@ import { } from './components/preferences' import SponsorsAside from './components/SponsorsAside.vue' import VueSchoolLink from './components/VueSchoolLink.vue' -import Banner from './components/Banner.vue' +import ScrimbaLink from './components/ScrimbaLink.vue' +// import Banner from './components/Banner.vue' // import TextAd from './components/TextAd.vue' export default Object.assign({}, VPTheme, { Layout: () => { // @ts-ignore return h(VPTheme.Layout, null, { - banner: () => h(Banner), + // banner: () => h(Banner), 'sidebar-top': () => h(PreferenceSwitch), 'sidebar-bottom': () => h(SecurityUpdateBtn), 'aside-mid': () => h(SponsorsAside) @@ -28,6 +29,7 @@ export default Object.assign({}, VPTheme, { app.provide('prefer-sfc', preferSFC) app.provide('filter-headers', filterHeadersByPreference) app.component('VueSchoolLink', VueSchoolLink) + app.component('ScrimbaLink', ScrimbaLink) // app.component('TextAd', TextAd) } }) diff --git a/src/api/composition-api-lifecycle.md b/src/api/composition-api-lifecycle.md index ed55c00d..17370cd8 100644 --- a/src/api/composition-api-lifecycle.md +++ b/src/api/composition-api-lifecycle.md @@ -210,7 +210,7 @@ Rejestruje funkcje, która ma zostać wywołana, gdy zostanie przechwycony błą W produkcji, 3. argument (`info`) będzie skróconym kodem zamiast pełnego ciągu informacyjnego. Mapowanie kodu do ciągu można znaleźć w [Odniesienie do kodu błędu produkcyjnego](/error-reference/#runtime-errors). ::: - Możesz zmodyfikować stan komponentu w `errorCaptured()`, aby wyświetlić użytkownikowi stan błędu. Ważne jest jednak, aby stan błędu nie renderował oryginalnej zawartości, która spowodowała błąd; w przeciwnym razie komponent zostanie wrzucony do nieskończonej pętli renderowania. + Możesz zmodyfikować stan komponentu w `onErrorCaptured()`, aby wyświetlić użytkownikowi stan błędu. Ważne jest jednak, aby stan błędu nie renderował oryginalnej zawartości, która spowodowała błąd; w przeciwnym razie komponent zostanie wrzucony do nieskończonej pętli renderowania. Funkcja może zwrócić `false`, aby zatrzymać dalsze rozprzestrzenianie się błędu. Zobacz szczegóły propagacji błędu poniżej. diff --git a/src/guide/components/v-model.md b/src/guide/components/v-model.md index 152ce02a..d39339aa 100644 --- a/src/guide/components/v-model.md +++ b/src/guide/components/v-model.md @@ -1,5 +1,9 @@ # v-model w komponentach {#component-v-model} + + Obejrzyj interaktywną lekcję w Scrimba + + ## Podstawowe użycie {#basic-usage} `v-model` może być używany w komponencie do implementacji dwukierunkowego wiązania danych. diff --git a/src/guide/essentials/component-basics.md b/src/guide/essentials/component-basics.md index 335926d1..b62812ee 100644 --- a/src/guide/essentials/component-basics.md +++ b/src/guide/essentials/component-basics.md @@ -1,5 +1,9 @@ # Podstawy komponentów {#components-basics} + + Objerzyj interaktywną lekcję w Scrimba + + Komponenty pozwalają nam podzielić interfejs użytkownika na niezależne części wielokrotnego użytku oraz myśleć o każdej z nich w izolacji. Często aplikacja jest organizowana w strukturę komponentów zagnieżdżonych w drzewie: ![Drzewo komponentów](./images/components.png) diff --git a/src/guide/essentials/template-syntax.md b/src/guide/essentials/template-syntax.md index 1b833ced..b579f23a 100644 --- a/src/guide/essentials/template-syntax.md +++ b/src/guide/essentials/template-syntax.md @@ -1,5 +1,9 @@ # Składnia szablonów {#template-syntax} + + Objerzyj interaktywną lekcję w Scrimba + + Vue wykorzystuje składnię szablonów opartą na HTML, która pozwala deklaratywnie powiązać renderowany DOM z danymi bazowej instancji komponentu. Wszystkie szablony Vue są składniowo poprawnym kodem HTML, który może być analizowany przez przeglądarki i parsery HTML zgodne ze specyfikacją. "Pod spodem" Vue kompiluje szablony do wysoko zoptymalizowanego kodu JavaScript. W połączeniu z systemem reaktywności Vue inteligentnie określa minimalną liczbę komponentów do ponownego renderowania i stosuje minimalne manipulacje DOM przy zmianie stanu aplikacji. diff --git a/src/guide/quick-start.md b/src/guide/quick-start.md index c123a172..543409b3 100644 --- a/src/guide/quick-start.md +++ b/src/guide/quick-start.md @@ -16,6 +16,8 @@ import { VTCodeGroup, VTCodeGroupTab } from '@vue/theme' - Jeśli znasz już Node.js i koncepcję narzędzi do kompilacji, możesz również wypróbować pełną konfigurację kompilacji bezpośrednio w przeglądarce na [StackBlitz](https://vite.new/vue). +- Aby posłuchać o rekomendowanej konfiguracji, obejrz ten interaktywny poradnik w [Scrimba](http://scrimba.com/links/vue-quickstart), który pokaże Ci jak uruchomić, edytować i zdeployować swoją pierwszą aplikację Vue. + ## Tworzenie aplikacji Vue {#creating-a-vue-application} :::tip Wymagania wstępne diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md index 08f73040..53a08e4e 100644 --- a/src/guide/typescript/composition-api.md +++ b/src/guide/typescript/composition-api.md @@ -1,5 +1,9 @@ # TypeScript z Composition API {#typescript-with-composition-api} + + Obejrzy interaktywną lekcję w Scrimba + + > Ta strona zakłada, że przeczytałeś już ogólne informacje o [Używaniu Vue z TypeScript](./overview). ## Typowanie Propsów Komponentu {#typing-component-props}