diff --git a/astro.config.ts b/astro.config.ts index a866567bae4bf..72f18b7b6fbb3 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -8,7 +8,6 @@ import remarkSmartypants from 'remark-smartypants'; import { sitemap } from './integrations/sitemap'; import { rehypeAutolink } from './plugins/rehype-autolink'; -import { rehypeOptimizeStatic } from './plugins/rehype-optimize-static'; import { rehypeTasklistEnhancer } from './plugins/rehype-tasklist-enhancer'; import { remarkFallbackLang } from './plugins/remark-fallback-lang'; @@ -83,8 +82,6 @@ export default defineConfig({ ...rehypeAutolink(), // Tweak GFM task list syntax rehypeTasklistEnhancer(), - // Collapse static parts of the hast to html - rehypeOptimizeStatic, ], }, image: { diff --git a/package.json b/package.json index 6242220c5ca0d..888688662d17a 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "@types/node": "^18.6.4", "@typescript-eslint/eslint-plugin": "^5.46.1", "@typescript-eslint/parser": "^5.46.1", - "astro": "^4.6.3", + "astro": "^4.8.6", "astro-auto-import": "^0.4.2", "astro-eslint-parser": "^0.16.0", "astro-og-canvas": "^0.5.0", @@ -83,7 +83,7 @@ "dependencies": { "@astrojs/check": "^0.4.1", "@astrojs/sitemap": "^3.1.3", - "@astrojs/starlight": "0.21.1", + "@astrojs/starlight": "0.23.1", "@docsearch/js": "^3.5.2", "@fontsource/ibm-plex-mono": "^4.5.10", "@lunariajs/core": "^0.0.32", diff --git a/plugins/rehype-optimize-static.ts b/plugins/rehype-optimize-static.ts deleted file mode 100644 index b3553831cbeaa..0000000000000 --- a/plugins/rehype-optimize-static.ts +++ /dev/null @@ -1,79 +0,0 @@ -import type { Root } from 'hast'; -import { toHtml } from 'hast-util-to-html'; -import type { Transformer } from 'unified'; -import { walk } from 'unist-util-walker'; - -// accessing untyped hast and mdx types -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type Node = any; - -const headingRe = /h([0-6])/; - -/** - * For MDX only, collapse static subtrees of the hast into `set:html`. Subtrees - * do not include any MDX elements or headings (for `rehypeHeadingIds` to work). - * This optimization reduces the JS output as more content are represented as a - * string instead, which also reduces the AST size that Rollup holds in memory. - */ -export function rehypeOptimizeStatic(): Transformer { - return (tree: Node) => { - // All possible elements that could be the root of a subtree - const allPossibleElements = new Set(); - // The current collapsible element stack while traversing the tree - const elementStack: Node[] = []; - - walk(tree, { - enter(node) { - // @ts-expect-error test tagName naively - const isHeading = node.tagName && headingRe.test(node.tagName); - // For nodes that can't be optimized, eliminate all elements in the - // `elementStack` from the `allPossibleElements` set. - if (node.type.startsWith('mdx') || isHeading) { - for (const el of elementStack) { - allPossibleElements.delete(el); - } - } - // If is heading node, skip it and its children. This prevents the content - // from being optimized, as the content is used to generate the heading text. - if (isHeading) { - this.skip(); - return; - } - // For possible subtree root nodes, record them - if (node.type === 'element' || node.type === 'mdxJsxFlowElement') { - elementStack.push(node); - allPossibleElements.add(node); - } - }, - leave(node, parent) { - // Similar as above, but pop the `elementStack` - if (node.type === 'element' || node.type === 'mdxJsxFlowElement') { - elementStack.pop(); - // Many possible elements could be part of a subtree, in order to find - // the root, we check the parent of the element we're popping. If the - // parent exists in `allPossibleElements`, then we're definitely not - // the root, so remove ourselves. This will work retroactively as we - // climb back up the tree. - if (allPossibleElements.has(parent)) { - allPossibleElements.delete(node); - } - } - }, - }); - - // For all possible subtree roots, collapse them into `set:html` and - // strip of their children - for (const el of allPossibleElements) { - if (el.type === 'mdxJsxFlowElement') { - el.attributes.push({ - type: 'mdxJsxAttribute', - name: 'set:html', - value: toHtml(el.children), - }); - } else { - el.properties['set:html'] = toHtml(el.children); - } - el.children = []; - } - }; -} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5047828076ec2..a95397c69a6ff 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,8 +12,8 @@ dependencies: specifier: ^3.1.3 version: 3.1.3 '@astrojs/starlight': - specifier: 0.21.1 - version: 0.21.1(astro@4.6.3) + specifier: 0.23.1 + version: 0.23.1(astro@4.8.6) '@docsearch/js': specifier: ^3.5.2 version: 3.5.2(@algolia/client-search@4.23.3)(search-insights@2.13.0) @@ -83,17 +83,17 @@ devDependencies: specifier: ^5.46.1 version: 5.46.1(eslint@8.29.0)(typescript@5.0.2) astro: - specifier: ^4.6.3 - version: 4.6.3(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) + specifier: ^4.8.6 + version: 4.8.6(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) astro-auto-import: specifier: ^0.4.2 - version: 0.4.2(astro@4.6.3) + version: 0.4.2(astro@4.8.6) astro-eslint-parser: specifier: ^0.16.0 version: 0.16.0 astro-og-canvas: specifier: ^0.5.0 - version: 0.5.0(astro@4.6.3) + version: 0.5.0(astro@4.8.6) bcp-47-normalize: specifier: ^2.1.0 version: 2.1.0 @@ -436,8 +436,8 @@ packages: /@astrojs/compiler@2.5.1: resolution: {integrity: sha512-o2hKiFJXZOm1Gov+RGXSWnKlnb/UF7KRTx/Y2uazYe3+MrLY+sqLN+yB4EH2bElc0l1K9cDb4mZSejuq563rGQ==} - /@astrojs/compiler@2.7.1: - resolution: {integrity: sha512-/POejAYuj8WEw7ZI0J8JBvevjfp9jQ9Wmu/Bg52RiNwGXkMV7JnYpsenVfHvvf1G7R5sXHGKlTcxlQWhoUTiGQ==} + /@astrojs/compiler@2.8.0: + resolution: {integrity: sha512-yrpD1WRGqsJwANaDIdtHo+YVjvIOFAjC83lu5qENIgrafwZcJgSXDuwVMXOgok4tFzpeKLsFQ6c3FoUdloLWBQ==} /@astrojs/internal-helpers@0.4.0: resolution: {integrity: sha512-6B13lz5n6BrbTqCTwhXjJXuR1sqiX/H6rTxzlXx+lN1NnV4jgnq/KJldCQaUWJzPL5SiWahQyinxAbxQtwgPHA==} @@ -478,31 +478,6 @@ packages: - typescript dev: false - /@astrojs/markdown-remark@5.0.0: - resolution: {integrity: sha512-QBXbxXZamVRoqCNN2gjDXa7qYPUkJZq7KYFfg3DX7rze3QL6xiz4N+Wg202dNPRaIkQa16BV6D8+EHibQFubRg==} - dependencies: - '@astrojs/prism': 3.0.0 - github-slugger: 2.0.0 - hast-util-from-html: 2.0.1 - hast-util-to-text: 4.0.0 - import-meta-resolve: 4.0.0 - mdast-util-definitions: 6.0.0 - rehype-raw: 7.0.0 - rehype-stringify: 10.0.0 - remark-gfm: 4.0.0 - remark-parse: 11.0.0 - remark-rehype: 11.1.0 - remark-smartypants: 2.0.0 - shiki: 1.2.4 - unified: 11.0.4 - unist-util-remove-position: 5.0.0 - unist-util-visit: 5.0.0 - unist-util-visit-parents: 6.0.1 - vfile: 6.0.1 - transitivePeerDependencies: - - supports-color - dev: false - /@astrojs/markdown-remark@5.1.0: resolution: {integrity: sha512-S6Z3K2hOB7MfjeDoHsotnP/q2UsnEDB8NlNAaCjMDsGBZfTUbWxyLW3CaphEWw08f6KLZi2ibK9yC3BaMhh2NQ==} dependencies: @@ -518,7 +493,7 @@ packages: remark-parse: 11.0.0 remark-rehype: 11.1.0 remark-smartypants: 2.0.0 - shiki: 1.2.4 + shiki: 1.5.2 unified: 11.0.4 unist-util-remove-position: 5.0.0 unist-util-visit: 5.0.0 @@ -527,17 +502,17 @@ packages: transitivePeerDependencies: - supports-color - /@astrojs/mdx@2.2.3(astro@4.6.3): - resolution: {integrity: sha512-7ptlBNLyznPK8rbvgq6/DogxaldPiUaIXY+pkQtzJwwLpZo/mAb1CWXiqnh01VADpB5SFnDqYwDrzs+WMvmkbA==} - engines: {node: '>=18.14.1'} + /@astrojs/mdx@3.0.0(astro@4.8.6): + resolution: {integrity: sha512-t1x+fmRA7w/AUWEhvWsMjw8op29mkzkpLN+AfsrtIAnGCf5y3NhcDwamKBvHDUTw/SdM3dn0JMi+JGaGnocDmw==} + engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0} peerDependencies: - astro: ^4.0.0 + astro: ^4.8.0 dependencies: - '@astrojs/markdown-remark': 5.0.0 - '@mdx-js/mdx': 3.0.0 - acorn: 8.11.2 - astro: 4.6.3(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) - es-module-lexer: 1.4.1 + '@astrojs/markdown-remark': 5.1.0 + '@mdx-js/mdx': 3.0.1 + acorn: 8.11.3 + astro: 4.8.6(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) + es-module-lexer: 1.5.2 estree-util-visit: 2.0.0 github-slugger: 2.0.0 gray-matter: 4.0.3 @@ -545,7 +520,7 @@ packages: kleur: 4.1.5 rehype-raw: 7.0.0 remark-gfm: 4.0.0 - remark-smartypants: 2.0.0 + remark-smartypants: 3.0.1 source-map: 0.7.4 unist-util-visit: 5.0.0 vfile: 6.0.1 @@ -553,13 +528,6 @@ packages: - supports-color dev: false - /@astrojs/prism@3.0.0: - resolution: {integrity: sha512-g61lZupWq1bYbcBnYZqdjndShr/J3l/oFobBKPA3+qMat146zce3nz2kdO4giGbhYDt4gYdhmoBz0vZJ4sIurQ==} - engines: {node: '>=18.14.1'} - dependencies: - prismjs: 1.29.0 - dev: false - /@astrojs/prism@3.1.0: resolution: {integrity: sha512-Z9IYjuXSArkAUx3N6xj6+Bnvx8OdUSHA8YoOgyepp3+zJmtVYJIl/I18GozdJVW1p5u/CNpl3Km7/gwTJK85cw==} engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0} @@ -573,18 +541,18 @@ packages: zod: 3.22.4 dev: false - /@astrojs/starlight@0.21.1(astro@4.6.3): - resolution: {integrity: sha512-nQ5EwKnB3eI8jxQrbgzZJJcyxeIiL3GzsAhl//1fE541MlD+PKy53v1PsYPi/RILdjt1Pg39rf1fkJC/rhXRgw==} + /@astrojs/starlight@0.23.1(astro@4.8.6): + resolution: {integrity: sha512-BMVRpM4suTq4K2plzcISs/t5W3Xw2fHGWhSmF7lg90nps595yHp3j4gFpeukRrynwEhoNu0Bds1zgOBebC3Egg==} peerDependencies: - astro: ^4.2.7 + astro: ^4.8.6 dependencies: - '@astrojs/mdx': 2.2.3(astro@4.6.3) + '@astrojs/mdx': 3.0.0(astro@4.8.6) '@astrojs/sitemap': 3.1.3 '@pagefind/default-ui': 1.0.3 '@types/hast': 3.0.3 '@types/mdast': 4.0.3 - astro: 4.6.3(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) - astro-expressive-code: 0.33.4(astro@4.6.3) + astro: 4.8.6(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) + astro-expressive-code: 0.35.3(astro@4.8.6) bcp-47: 2.1.0 hast-util-from-html: 2.0.1 hast-util-select: 6.0.2 @@ -594,9 +562,9 @@ packages: mdast-util-to-markdown: 2.1.0 pagefind: 1.0.3 rehype: 13.0.1 + rehype-format: 5.0.0 remark-directive: 3.0.0 unified: 11.0.4 - unist-util-remove: 4.0.0 unist-util-visit: 5.0.0 vfile: 6.0.1 transitivePeerDependencies: @@ -663,20 +631,20 @@ packages: - supports-color dev: true - /@babel/core@7.24.3: - resolution: {integrity: sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==} + /@babel/core@7.24.5: + resolution: {integrity: sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==} engines: {node: '>=6.9.0'} dependencies: '@ampproject/remapping': 2.2.1 '@babel/code-frame': 7.24.2 - '@babel/generator': 7.24.1 + '@babel/generator': 7.24.5 '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3) - '@babel/helpers': 7.24.1 - '@babel/parser': 7.24.1 + '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5) + '@babel/helpers': 7.24.5 + '@babel/parser': 7.24.5 '@babel/template': 7.24.0 - '@babel/traverse': 7.24.1 - '@babel/types': 7.24.0 + '@babel/traverse': 7.24.5 + '@babel/types': 7.24.5 convert-source-map: 2.0.0 debug: 4.3.4 gensync: 1.0.0-beta.2 @@ -695,11 +663,11 @@ packages: jsesc: 2.5.2 dev: true - /@babel/generator@7.24.1: - resolution: {integrity: sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==} + /@babel/generator@7.24.5: + resolution: {integrity: sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.24.0 + '@babel/types': 7.24.5 '@jridgewell/gen-mapping': 0.3.5 '@jridgewell/trace-mapping': 0.3.25 jsesc: 2.5.2 @@ -708,7 +676,7 @@ packages: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.24.0 + '@babel/types': 7.24.5 /@babel/helper-compilation-targets@7.22.15: resolution: {integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==} @@ -754,6 +722,12 @@ packages: dependencies: '@babel/types': 7.23.5 + /@babel/helper-module-imports@7.24.3: + resolution: {integrity: sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.24.5 + /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.5): resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==} engines: {node: '>=6.9.0'} @@ -768,43 +742,69 @@ packages: '@babel/helper-validator-identifier': 7.22.20 dev: true - /@babel/helper-module-transforms@7.23.3(@babel/core@7.24.3): - resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==} + /@babel/helper-module-transforms@7.24.5(@babel/core@7.24.5): + resolution: {integrity: sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.5 '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-simple-access': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - '@babel/helper-validator-identifier': 7.22.20 + '@babel/helper-module-imports': 7.24.3 + '@babel/helper-simple-access': 7.24.5 + '@babel/helper-split-export-declaration': 7.24.5 + '@babel/helper-validator-identifier': 7.24.5 /@babel/helper-plugin-utils@7.22.5: resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==} engines: {node: '>=6.9.0'} + /@babel/helper-plugin-utils@7.24.5: + resolution: {integrity: sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==} + engines: {node: '>=6.9.0'} + /@babel/helper-simple-access@7.22.5: resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.23.5 + dev: true + + /@babel/helper-simple-access@7.24.5: + resolution: {integrity: sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.24.5 /@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.23.5 + dev: true + + /@babel/helper-split-export-declaration@7.24.5: + resolution: {integrity: sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.24.5 /@babel/helper-string-parser@7.23.4: resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==} engines: {node: '>=6.9.0'} + /@babel/helper-string-parser@7.24.1: + resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==} + engines: {node: '>=6.9.0'} + /@babel/helper-validator-identifier@7.22.20: resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==} engines: {node: '>=6.9.0'} + /@babel/helper-validator-identifier@7.24.5: + resolution: {integrity: sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==} + engines: {node: '>=6.9.0'} + /@babel/helper-validator-option@7.22.15: resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==} engines: {node: '>=6.9.0'} @@ -825,13 +825,13 @@ packages: - supports-color dev: true - /@babel/helpers@7.24.1: - resolution: {integrity: sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==} + /@babel/helpers@7.24.5: + resolution: {integrity: sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==} engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.24.0 - '@babel/traverse': 7.24.1 - '@babel/types': 7.24.0 + '@babel/traverse': 7.24.5 + '@babel/types': 7.24.5 transitivePeerDependencies: - supports-color @@ -859,34 +859,34 @@ packages: dependencies: '@babel/types': 7.23.5 - /@babel/parser@7.24.1: - resolution: {integrity: sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==} + /@babel/parser@7.24.5: + resolution: {integrity: sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==} engines: {node: '>=6.0.0'} hasBin: true dependencies: - '@babel/types': 7.24.0 + '@babel/types': 7.24.5 - /@babel/plugin-syntax-jsx@7.22.5(@babel/core@7.24.3): - resolution: {integrity: sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==} + /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.5): + resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.24.3 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.5 + '@babel/helper-plugin-utils': 7.24.5 - /@babel/plugin-transform-react-jsx@7.22.15(@babel/core@7.24.3): - resolution: {integrity: sha512-oKckg2eZFa8771O/5vi7XeTvmM6+O9cxZu+kanTU7tD4sin5nO/G8jGJhq8Hvt2Z0kUoEDRayuZLaUlYl8QuGA==} + /@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.5): + resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.24.3 + '@babel/core': 7.24.5 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-module-imports': 7.22.15 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.24.3) - '@babel/types': 7.24.0 + '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.5) + '@babel/types': 7.24.5 /@babel/template@7.22.15: resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==} @@ -901,8 +901,8 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.24.2 - '@babel/parser': 7.24.1 - '@babel/types': 7.24.0 + '@babel/parser': 7.24.5 + '@babel/types': 7.24.5 /@babel/traverse@7.23.5: resolution: {integrity: sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==} @@ -922,18 +922,18 @@ packages: - supports-color dev: true - /@babel/traverse@7.24.1: - resolution: {integrity: sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==} + /@babel/traverse@7.24.5: + resolution: {integrity: sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==} engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.24.2 - '@babel/generator': 7.24.1 + '@babel/generator': 7.24.5 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-function-name': 7.23.0 '@babel/helper-hoist-variables': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - '@babel/parser': 7.24.1 - '@babel/types': 7.24.0 + '@babel/helper-split-export-declaration': 7.24.5 + '@babel/parser': 7.24.5 + '@babel/types': 7.24.5 debug: 4.3.4 globals: 11.12.0 transitivePeerDependencies: @@ -947,12 +947,12 @@ packages: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 - /@babel/types@7.24.0: - resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==} + /@babel/types@7.24.5: + resolution: {integrity: sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-string-parser': 7.23.4 - '@babel/helper-validator-identifier': 7.22.20 + '@babel/helper-string-parser': 7.24.1 + '@babel/helper-validator-identifier': 7.24.5 to-fast-properties: 2.0.0 /@clack/core@0.3.4: @@ -962,9 +962,9 @@ packages: sisteransi: 1.0.5 dev: false - /@ctrl/tinycolor@3.6.0: - resolution: {integrity: sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==} - engines: {node: '>=10'} + /@ctrl/tinycolor@4.1.0: + resolution: {integrity: sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==} + engines: {node: '>=14'} dev: false /@docsearch/css@3.5.2: @@ -1025,6 +1025,13 @@ packages: resolution: {integrity: sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA==} dev: false + /@emnapi/runtime@1.1.1: + resolution: {integrity: sha512-3bfqkzuR1KLx57nZfjr2NLnFOobvyS0aTszaEGCGqmYMVDRaGvgIZbjGSV/MHSSmLgQ/b9JFHQ5xm5WRZYd+XQ==} + requiresBuild: true + dependencies: + tslib: 2.6.0 + optional: true + /@esbuild/aix-ppc64@0.20.2: resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==} engines: {node: '>=12'} @@ -1033,11 +1040,11 @@ packages: requiresBuild: true optional: true - /@esbuild/android-arm64@0.19.8: - resolution: {integrity: sha512-B8JbS61bEunhfx8kasogFENgQfr/dIp+ggYXwTqdbMAgGDhRa3AaPpQMuQU0rNxDLECj6FhDzk1cF9WHMVwrtA==} + /@esbuild/aix-ppc64@0.21.3: + resolution: {integrity: sha512-yTgnwQpFVYfvvo4SvRFB0SwrW8YjOxEoT7wfMT7Ol5v7v5LDNvSGo67aExmxOb87nQNeWPVvaGBNfQ7BXcrZ9w==} engines: {node: '>=12'} - cpu: [arm64] - os: [android] + cpu: [ppc64] + os: [aix] requiresBuild: true optional: true @@ -1049,21 +1056,21 @@ packages: requiresBuild: true optional: true - /@esbuild/android-arm@0.15.18: - resolution: {integrity: sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==} + /@esbuild/android-arm64@0.21.3: + resolution: {integrity: sha512-c+ty9necz3zB1Y+d/N+mC6KVVkGUUOcm4ZmT5i/Fk5arOaY3i6CA3P5wo/7+XzV8cb4GrI/Zjp8NuOQ9Lfsosw==} engines: {node: '>=12'} - cpu: [arm] + cpu: [arm64] os: [android] requiresBuild: true - dev: true optional: true - /@esbuild/android-arm@0.19.8: - resolution: {integrity: sha512-31E2lxlGM1KEfivQl8Yf5aYU/mflz9g06H6S15ITUFQueMFtFjESRMoDSkvMo8thYvLBax+VKTPlpnx+sPicOA==} + /@esbuild/android-arm@0.15.18: + resolution: {integrity: sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==} engines: {node: '>=12'} cpu: [arm] os: [android] requiresBuild: true + dev: true optional: true /@esbuild/android-arm@0.20.2: @@ -1074,10 +1081,10 @@ packages: requiresBuild: true optional: true - /@esbuild/android-x64@0.19.8: - resolution: {integrity: sha512-rdqqYfRIn4jWOp+lzQttYMa2Xar3OK9Yt2fhOhzFXqg0rVWEfSclJvZq5fZslnz6ypHvVf3CT7qyf0A5pM682A==} + /@esbuild/android-arm@0.21.3: + resolution: {integrity: sha512-bviJOLMgurLJtF1/mAoJLxDZDL6oU5/ztMHnJQRejbJrSc9FFu0QoUoFhvi6qSKJEw9y5oGyvr9fuDtzJ30rNQ==} engines: {node: '>=12'} - cpu: [x64] + cpu: [arm] os: [android] requiresBuild: true optional: true @@ -1090,11 +1097,11 @@ packages: requiresBuild: true optional: true - /@esbuild/darwin-arm64@0.19.8: - resolution: {integrity: sha512-RQw9DemMbIq35Bprbboyf8SmOr4UXsRVxJ97LgB55VKKeJOOdvsIPy0nFyF2l8U+h4PtBx/1kRf0BelOYCiQcw==} + /@esbuild/android-x64@0.21.3: + resolution: {integrity: sha512-JReHfYCRK3FVX4Ra+y5EBH1b9e16TV2OxrPAvzMsGeES0X2Ndm9ImQRI4Ket757vhc5XBOuGperw63upesclRw==} engines: {node: '>=12'} - cpu: [arm64] - os: [darwin] + cpu: [x64] + os: [android] requiresBuild: true optional: true @@ -1106,10 +1113,10 @@ packages: requiresBuild: true optional: true - /@esbuild/darwin-x64@0.19.8: - resolution: {integrity: sha512-3sur80OT9YdeZwIVgERAysAbwncom7b4bCI2XKLjMfPymTud7e/oY4y+ci1XVp5TfQp/bppn7xLw1n/oSQY3/Q==} + /@esbuild/darwin-arm64@0.21.3: + resolution: {integrity: sha512-U3fuQ0xNiAkXOmQ6w5dKpEvXQRSpHOnbw7gEfHCRXPeTKW9sBzVck6C5Yneb8LfJm0l6le4NQfkNPnWMSlTFUQ==} engines: {node: '>=12'} - cpu: [x64] + cpu: [arm64] os: [darwin] requiresBuild: true optional: true @@ -1122,11 +1129,11 @@ packages: requiresBuild: true optional: true - /@esbuild/freebsd-arm64@0.19.8: - resolution: {integrity: sha512-WAnPJSDattvS/XtPCTj1tPoTxERjcTpH6HsMr6ujTT+X6rylVe8ggxk8pVxzf5U1wh5sPODpawNicF5ta/9Tmw==} + /@esbuild/darwin-x64@0.21.3: + resolution: {integrity: sha512-3m1CEB7F07s19wmaMNI2KANLcnaqryJxO1fXHUV5j1rWn+wMxdUYoPyO2TnAbfRZdi7ADRwJClmOwgT13qlP3Q==} engines: {node: '>=12'} - cpu: [arm64] - os: [freebsd] + cpu: [x64] + os: [darwin] requiresBuild: true optional: true @@ -1138,10 +1145,10 @@ packages: requiresBuild: true optional: true - /@esbuild/freebsd-x64@0.19.8: - resolution: {integrity: sha512-ICvZyOplIjmmhjd6mxi+zxSdpPTKFfyPPQMQTK/w+8eNK6WV01AjIztJALDtwNNfFhfZLux0tZLC+U9nSyA5Zg==} + /@esbuild/freebsd-arm64@0.21.3: + resolution: {integrity: sha512-fsNAAl5pU6wmKHq91cHWQT0Fz0vtyE1JauMzKotrwqIKAswwP5cpHUCxZNSTuA/JlqtScq20/5KZ+TxQdovU/g==} engines: {node: '>=12'} - cpu: [x64] + cpu: [arm64] os: [freebsd] requiresBuild: true optional: true @@ -1154,11 +1161,11 @@ packages: requiresBuild: true optional: true - /@esbuild/linux-arm64@0.19.8: - resolution: {integrity: sha512-z1zMZivxDLHWnyGOctT9JP70h0beY54xDDDJt4VpTX+iwA77IFsE1vCXWmprajJGa+ZYSqkSbRQ4eyLCpCmiCQ==} + /@esbuild/freebsd-x64@0.21.3: + resolution: {integrity: sha512-tci+UJ4zP5EGF4rp8XlZIdq1q1a/1h9XuronfxTMCNBslpCtmk97Q/5qqy1Mu4zIc0yswN/yP/BLX+NTUC1bXA==} engines: {node: '>=12'} - cpu: [arm64] - os: [linux] + cpu: [x64] + os: [freebsd] requiresBuild: true optional: true @@ -1170,10 +1177,10 @@ packages: requiresBuild: true optional: true - /@esbuild/linux-arm@0.19.8: - resolution: {integrity: sha512-H4vmI5PYqSvosPaTJuEppU9oz1dq2A7Mr2vyg5TF9Ga+3+MGgBdGzcyBP7qK9MrwFQZlvNyJrvz6GuCaj3OukQ==} + /@esbuild/linux-arm64@0.21.3: + resolution: {integrity: sha512-vvG6R5g5ieB4eCJBQevyDMb31LMHthLpXTc2IGkFnPWS/GzIFDnaYFp558O+XybTmYrVjxnryru7QRleJvmZ6Q==} engines: {node: '>=12'} - cpu: [arm] + cpu: [arm64] os: [linux] requiresBuild: true optional: true @@ -1186,10 +1193,10 @@ packages: requiresBuild: true optional: true - /@esbuild/linux-ia32@0.19.8: - resolution: {integrity: sha512-1a8suQiFJmZz1khm/rDglOc8lavtzEMRo0v6WhPgxkrjcU0LkHj+TwBrALwoz/OtMExvsqbbMI0ChyelKabSvQ==} + /@esbuild/linux-arm@0.21.3: + resolution: {integrity: sha512-f6kz2QpSuyHHg01cDawj0vkyMwuIvN62UAguQfnNVzbge2uWLhA7TCXOn83DT0ZvyJmBI943MItgTovUob36SQ==} engines: {node: '>=12'} - cpu: [ia32] + cpu: [arm] os: [linux] requiresBuild: true optional: true @@ -1202,21 +1209,21 @@ packages: requiresBuild: true optional: true - /@esbuild/linux-loong64@0.15.18: - resolution: {integrity: sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==} + /@esbuild/linux-ia32@0.21.3: + resolution: {integrity: sha512-HjCWhH7K96Na+66TacDLJmOI9R8iDWDDiqe17C7znGvvE4sW1ECt9ly0AJ3dJH62jHyVqW9xpxZEU1jKdt+29A==} engines: {node: '>=12'} - cpu: [loong64] + cpu: [ia32] os: [linux] requiresBuild: true - dev: true optional: true - /@esbuild/linux-loong64@0.19.8: - resolution: {integrity: sha512-fHZWS2JJxnXt1uYJsDv9+b60WCc2RlvVAy1F76qOLtXRO+H4mjt3Tr6MJ5l7Q78X8KgCFudnTuiQRBhULUyBKQ==} + /@esbuild/linux-loong64@0.15.18: + resolution: {integrity: sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==} engines: {node: '>=12'} cpu: [loong64] os: [linux] requiresBuild: true + dev: true optional: true /@esbuild/linux-loong64@0.20.2: @@ -1227,10 +1234,10 @@ packages: requiresBuild: true optional: true - /@esbuild/linux-mips64el@0.19.8: - resolution: {integrity: sha512-Wy/z0EL5qZYLX66dVnEg9riiwls5IYnziwuju2oUiuxVc+/edvqXa04qNtbrs0Ukatg5HEzqT94Zs7J207dN5Q==} + /@esbuild/linux-loong64@0.21.3: + resolution: {integrity: sha512-BGpimEccmHBZRcAhdlRIxMp7x9PyJxUtj7apL2IuoG9VxvU/l/v1z015nFs7Si7tXUwEsvjc1rOJdZCn4QTU+Q==} engines: {node: '>=12'} - cpu: [mips64el] + cpu: [loong64] os: [linux] requiresBuild: true optional: true @@ -1243,10 +1250,10 @@ packages: requiresBuild: true optional: true - /@esbuild/linux-ppc64@0.19.8: - resolution: {integrity: sha512-ETaW6245wK23YIEufhMQ3HSeHO7NgsLx8gygBVldRHKhOlD1oNeNy/P67mIh1zPn2Hr2HLieQrt6tWrVwuqrxg==} + /@esbuild/linux-mips64el@0.21.3: + resolution: {integrity: sha512-5rMOWkp7FQGtAH3QJddP4w3s47iT20hwftqdm7b+loe95o8JU8ro3qZbhgMRy0VuFU0DizymF1pBKkn3YHWtsw==} engines: {node: '>=12'} - cpu: [ppc64] + cpu: [mips64el] os: [linux] requiresBuild: true optional: true @@ -1259,10 +1266,10 @@ packages: requiresBuild: true optional: true - /@esbuild/linux-riscv64@0.19.8: - resolution: {integrity: sha512-T2DRQk55SgoleTP+DtPlMrxi/5r9AeFgkhkZ/B0ap99zmxtxdOixOMI570VjdRCs9pE4Wdkz7JYrsPvsl7eESg==} + /@esbuild/linux-ppc64@0.21.3: + resolution: {integrity: sha512-h0zj1ldel89V5sjPLo5H1SyMzp4VrgN1tPkN29TmjvO1/r0MuMRwJxL8QY05SmfsZRs6TF0c/IDH3u7XYYmbAg==} engines: {node: '>=12'} - cpu: [riscv64] + cpu: [ppc64] os: [linux] requiresBuild: true optional: true @@ -1275,10 +1282,10 @@ packages: requiresBuild: true optional: true - /@esbuild/linux-s390x@0.19.8: - resolution: {integrity: sha512-NPxbdmmo3Bk7mbNeHmcCd7R7fptJaczPYBaELk6NcXxy7HLNyWwCyDJ/Xx+/YcNH7Im5dHdx9gZ5xIwyliQCbg==} + /@esbuild/linux-riscv64@0.21.3: + resolution: {integrity: sha512-dkAKcTsTJ+CRX6bnO17qDJbLoW37npd5gSNtSzjYQr0svghLJYGYB0NF1SNcU1vDcjXLYS5pO4qOW4YbFama4A==} engines: {node: '>=12'} - cpu: [s390x] + cpu: [riscv64] os: [linux] requiresBuild: true optional: true @@ -1291,10 +1298,10 @@ packages: requiresBuild: true optional: true - /@esbuild/linux-x64@0.19.8: - resolution: {integrity: sha512-lytMAVOM3b1gPypL2TRmZ5rnXl7+6IIk8uB3eLsV1JwcizuolblXRrc5ShPrO9ls/b+RTp+E6gbsuLWHWi2zGg==} + /@esbuild/linux-s390x@0.21.3: + resolution: {integrity: sha512-vnD1YUkovEdnZWEuMmy2X2JmzsHQqPpZElXx6dxENcIwTu+Cu5ERax6+Ke1QsE814Zf3c6rxCfwQdCTQ7tPuXA==} engines: {node: '>=12'} - cpu: [x64] + cpu: [s390x] os: [linux] requiresBuild: true optional: true @@ -1307,11 +1314,11 @@ packages: requiresBuild: true optional: true - /@esbuild/netbsd-x64@0.19.8: - resolution: {integrity: sha512-hvWVo2VsXz/8NVt1UhLzxwAfo5sioj92uo0bCfLibB0xlOmimU/DeAEsQILlBQvkhrGjamP0/el5HU76HAitGw==} + /@esbuild/linux-x64@0.21.3: + resolution: {integrity: sha512-IOXOIm9WaK7plL2gMhsWJd+l2bfrhfilv0uPTptoRoSb2p09RghhQQp9YY6ZJhk/kqmeRt6siRdMSLLwzuT0KQ==} engines: {node: '>=12'} cpu: [x64] - os: [netbsd] + os: [linux] requiresBuild: true optional: true @@ -1323,11 +1330,11 @@ packages: requiresBuild: true optional: true - /@esbuild/openbsd-x64@0.19.8: - resolution: {integrity: sha512-/7Y7u77rdvmGTxR83PgaSvSBJCC2L3Kb1M/+dmSIvRvQPXXCuC97QAwMugBNG0yGcbEGfFBH7ojPzAOxfGNkwQ==} + /@esbuild/netbsd-x64@0.21.3: + resolution: {integrity: sha512-uTgCwsvQ5+vCQnqM//EfDSuomo2LhdWhFPS8VL8xKf+PKTCrcT/2kPPoWMTs22aB63MLdGMJiE3f1PHvCDmUOw==} engines: {node: '>=12'} cpu: [x64] - os: [openbsd] + os: [netbsd] requiresBuild: true optional: true @@ -1339,11 +1346,11 @@ packages: requiresBuild: true optional: true - /@esbuild/sunos-x64@0.19.8: - resolution: {integrity: sha512-9Lc4s7Oi98GqFA4HzA/W2JHIYfnXbUYgekUP/Sm4BG9sfLjyv6GKKHKKVs83SMicBF2JwAX6A1PuOLMqpD001w==} + /@esbuild/openbsd-x64@0.21.3: + resolution: {integrity: sha512-vNAkR17Ub2MgEud2Wag/OE4HTSI6zlb291UYzHez/psiKarp0J8PKGDnAhMBcHFoOHMXHfExzmjMojJNbAStrQ==} engines: {node: '>=12'} cpu: [x64] - os: [sunos] + os: [openbsd] requiresBuild: true optional: true @@ -1355,11 +1362,11 @@ packages: requiresBuild: true optional: true - /@esbuild/win32-arm64@0.19.8: - resolution: {integrity: sha512-rq6WzBGjSzihI9deW3fC2Gqiak68+b7qo5/3kmB6Gvbh/NYPA0sJhrnp7wgV4bNwjqM+R2AApXGxMO7ZoGhIJg==} + /@esbuild/sunos-x64@0.21.3: + resolution: {integrity: sha512-W8H9jlGiSBomkgmouaRoTXo49j4w4Kfbl6I1bIdO/vT0+0u4f20ko3ELzV3hPI6XV6JNBVX+8BC+ajHkvffIJA==} engines: {node: '>=12'} - cpu: [arm64] - os: [win32] + cpu: [x64] + os: [sunos] requiresBuild: true optional: true @@ -1371,10 +1378,10 @@ packages: requiresBuild: true optional: true - /@esbuild/win32-ia32@0.19.8: - resolution: {integrity: sha512-AIAbverbg5jMvJznYiGhrd3sumfwWs8572mIJL5NQjJa06P8KfCPWZQ0NwZbPQnbQi9OWSZhFVSUWjjIrn4hSw==} + /@esbuild/win32-arm64@0.21.3: + resolution: {integrity: sha512-EjEomwyLSCg8Ag3LDILIqYCZAq/y3diJ04PnqGRgq8/4O3VNlXyMd54j/saShaN4h5o5mivOjAzmU6C3X4v0xw==} engines: {node: '>=12'} - cpu: [ia32] + cpu: [arm64] os: [win32] requiresBuild: true optional: true @@ -1387,10 +1394,10 @@ packages: requiresBuild: true optional: true - /@esbuild/win32-x64@0.19.8: - resolution: {integrity: sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==} + /@esbuild/win32-ia32@0.21.3: + resolution: {integrity: sha512-WGiE/GgbsEwR33++5rzjiYsKyHywE8QSZPF7Rfx9EBfK3Qn3xyR6IjyCr5Uk38Kg8fG4/2phN7sXp4NPWd3fcw==} engines: {node: '>=12'} - cpu: [x64] + cpu: [ia32] os: [win32] requiresBuild: true optional: true @@ -1403,6 +1410,14 @@ packages: requiresBuild: true optional: true + /@esbuild/win32-x64@0.21.3: + resolution: {integrity: sha512-xRxC0jaJWDLYvcUvjQmHCJSfMrgmUuvsoXgDeU/wTorQ1ngDdUBuFtgY3W1Pc5sprGAvZBtWdJX7RPg/iZZUqA==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + optional: true + /@eslint/eslintrc@1.3.3: resolution: {integrity: sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1420,36 +1435,37 @@ packages: - supports-color dev: true - /@expressive-code/core@0.33.4: - resolution: {integrity: sha512-IywACrwcR/7cIPBQ1qG/RsgvNp85/CAX6okxR0Niztrd7rh4IcEhAsz51jX/NPNnhU9yPynTT+mLdM1URqrnvw==} + /@expressive-code/core@0.35.3: + resolution: {integrity: sha512-SYamcarAjufYhbuK/kfvJSvAXLsfnM7DKc78R7Dq4B73R5bKQK2m5zR0l57tXr4yp2C5Z8lu5xZncdwWxcmPdg==} dependencies: - '@ctrl/tinycolor': 3.6.0 - hast-util-to-html: 8.0.4 - hastscript: 7.2.0 - postcss: 8.4.35 - postcss-nested: 6.0.1(postcss@8.4.35) + '@ctrl/tinycolor': 4.1.0 + hast-util-select: 6.0.2 + hast-util-to-html: 9.0.1 + hast-util-to-text: 4.0.2 + hastscript: 9.0.0 + postcss: 8.4.38 + postcss-nested: 6.0.1(postcss@8.4.38) + unist-util-visit: 5.0.0 + unist-util-visit-parents: 6.0.1 dev: false - /@expressive-code/plugin-frames@0.33.4: - resolution: {integrity: sha512-6HE5f8dAPjzmhs7yZJHVyH+w/UwVpktjlTvrUumrytHo6hidGlkB5lptWJlSAd9JXzev5BQEb4xrqQ0xQqO5+A==} + /@expressive-code/plugin-frames@0.35.3: + resolution: {integrity: sha512-QYytMq6IsaHgTofQ5b6d+CnbxkqLdikSF2hC+IL/ZZwPYHYZoUlmjIwmJZhY4/hHqJGELrtZsyVdlt06RntgmA==} dependencies: - '@expressive-code/core': 0.33.4 - hastscript: 7.2.0 + '@expressive-code/core': 0.35.3 dev: false - /@expressive-code/plugin-shiki@0.33.4: - resolution: {integrity: sha512-XnDchHqCGk046hgQnu83t9+SDrRjsvpvUEBiI0wl4RljVDr1E0yllx0y6C1yEuKfFfasib6BxX/PkItgQdi/0Q==} + /@expressive-code/plugin-shiki@0.35.3: + resolution: {integrity: sha512-aFQBPepv0zhVXqJFAvfQ4vXYv/meJKiqmEEKSxdjAfwXllIV49PDlnGEXmbGYjR4hUQQjbfDgzAbrbfePc3YVQ==} dependencies: - '@expressive-code/core': 0.33.4 - shiki: 1.2.4 + '@expressive-code/core': 0.35.3 + shiki: 1.5.2 dev: false - /@expressive-code/plugin-text-markers@0.33.4: - resolution: {integrity: sha512-hl3E+8iZJMYGDaKsN4bOPOEBb9QeFjg+zQkOJRtjJgsmIYmaZpoQTzTg/JMduE8PLNsD30nAMwG/AbjN/klwZQ==} + /@expressive-code/plugin-text-markers@0.35.3: + resolution: {integrity: sha512-gDdnQrfDRXw5Y+PKHJDkpAUdf2pthYOthGcgy3JB8GOTQ3EL1h+755Ct/bGc4MR6jn+dgnQP47uHMWQaccvN6Q==} dependencies: - '@expressive-code/core': 0.33.4 - hastscript: 7.2.0 - unist-util-visit-parents: 5.1.3 + '@expressive-code/core': 0.35.3 dev: false /@fontsource/ibm-plex-mono@4.5.10: @@ -1476,6 +1492,175 @@ packages: resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} dev: true + /@img/sharp-darwin-arm64@0.33.4: + resolution: {integrity: sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==} + engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + optionalDependencies: + '@img/sharp-libvips-darwin-arm64': 1.0.2 + optional: true + + /@img/sharp-darwin-x64@0.33.4: + resolution: {integrity: sha512-0l7yRObwtTi82Z6ebVI2PnHT8EB2NxBgpK2MiKJZJ7cz32R4lxd001ecMhzzsZig3Yv9oclvqqdV93jo9hy+Dw==} + engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [x64] + os: [darwin] + requiresBuild: true + optionalDependencies: + '@img/sharp-libvips-darwin-x64': 1.0.2 + optional: true + + /@img/sharp-libvips-darwin-arm64@1.0.2: + resolution: {integrity: sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==} + engines: {macos: '>=11', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + optional: true + + /@img/sharp-libvips-darwin-x64@1.0.2: + resolution: {integrity: sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==} + engines: {macos: '>=10.13', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [x64] + os: [darwin] + requiresBuild: true + optional: true + + /@img/sharp-libvips-linux-arm64@1.0.2: + resolution: {integrity: sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==} + engines: {glibc: '>=2.26', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + optional: true + + /@img/sharp-libvips-linux-arm@1.0.2: + resolution: {integrity: sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==} + engines: {glibc: '>=2.28', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + optional: true + + /@img/sharp-libvips-linux-s390x@1.0.2: + resolution: {integrity: sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==} + engines: {glibc: '>=2.28', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [s390x] + os: [linux] + requiresBuild: true + optional: true + + /@img/sharp-libvips-linux-x64@1.0.2: + resolution: {integrity: sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==} + engines: {glibc: '>=2.26', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + optional: true + + /@img/sharp-libvips-linuxmusl-arm64@1.0.2: + resolution: {integrity: sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==} + engines: {musl: '>=1.2.2', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + optional: true + + /@img/sharp-libvips-linuxmusl-x64@1.0.2: + resolution: {integrity: sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==} + engines: {musl: '>=1.2.2', npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + optional: true + + /@img/sharp-linux-arm64@0.33.4: + resolution: {integrity: sha512-2800clwVg1ZQtxwSoTlHvtm9ObgAax7V6MTAB/hDT945Tfyy3hVkmiHpeLPCKYqYR1Gcmv1uDZ3a4OFwkdBL7Q==} + engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + optionalDependencies: + '@img/sharp-libvips-linux-arm64': 1.0.2 + optional: true + + /@img/sharp-linux-arm@0.33.4: + resolution: {integrity: sha512-RUgBD1c0+gCYZGCCe6mMdTiOFS0Zc/XrN0fYd6hISIKcDUbAW5NtSQW9g/powkrXYm6Vzwd6y+fqmExDuCdHNQ==} + engines: {glibc: '>=2.28', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [arm] + os: [linux] + requiresBuild: true + optionalDependencies: + '@img/sharp-libvips-linux-arm': 1.0.2 + optional: true + + /@img/sharp-linux-s390x@0.33.4: + resolution: {integrity: sha512-h3RAL3siQoyzSoH36tUeS0PDmb5wINKGYzcLB5C6DIiAn2F3udeFAum+gj8IbA/82+8RGCTn7XW8WTFnqag4tQ==} + engines: {glibc: '>=2.31', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [s390x] + os: [linux] + requiresBuild: true + optionalDependencies: + '@img/sharp-libvips-linux-s390x': 1.0.2 + optional: true + + /@img/sharp-linux-x64@0.33.4: + resolution: {integrity: sha512-GoR++s0XW9DGVi8SUGQ/U4AeIzLdNjHka6jidVwapQ/JebGVQIpi52OdyxCNVRE++n1FCLzjDovJNozif7w/Aw==} + engines: {glibc: '>=2.26', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + optionalDependencies: + '@img/sharp-libvips-linux-x64': 1.0.2 + optional: true + + /@img/sharp-linuxmusl-arm64@0.33.4: + resolution: {integrity: sha512-nhr1yC3BlVrKDTl6cO12gTpXMl4ITBUZieehFvMntlCXFzH2bvKG76tBL2Y/OqhupZt81pR7R+Q5YhJxW0rGgQ==} + engines: {musl: '>=1.2.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [arm64] + os: [linux] + requiresBuild: true + optionalDependencies: + '@img/sharp-libvips-linuxmusl-arm64': 1.0.2 + optional: true + + /@img/sharp-linuxmusl-x64@0.33.4: + resolution: {integrity: sha512-uCPTku0zwqDmZEOi4ILyGdmW76tH7dm8kKlOIV1XC5cLyJ71ENAAqarOHQh0RLfpIpbV5KOpXzdU6XkJtS0daw==} + engines: {musl: '>=1.2.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [x64] + os: [linux] + requiresBuild: true + optionalDependencies: + '@img/sharp-libvips-linuxmusl-x64': 1.0.2 + optional: true + + /@img/sharp-wasm32@0.33.4: + resolution: {integrity: sha512-Bmmauh4sXUsUqkleQahpdNXKvo+wa1V9KhT2pDA4VJGKwnKMJXiSTGphn0gnJrlooda0QxCtXc6RX1XAU6hMnQ==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [wasm32] + requiresBuild: true + dependencies: + '@emnapi/runtime': 1.1.1 + optional: true + + /@img/sharp-win32-ia32@0.33.4: + resolution: {integrity: sha512-99SJ91XzUhYHbx7uhK3+9Lf7+LjwMGQZMDlO/E/YVJ7Nc3lyDFZPGhjwiYdctoH2BOzW9+TnfqcaMKt0jHLdqw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [ia32] + os: [win32] + requiresBuild: true + optional: true + + /@img/sharp-win32-x64@0.33.4: + resolution: {integrity: sha512-3QLocdTRVIrFNye5YocZl+KKpYKP+fksi1QhmOArgx7GyhIbQp/WrJRu176jm8IxromS7RIkzMiMINVdBtC8Aw==} + engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0', yarn: '>=3.2.0'} + cpu: [x64] + os: [win32] + requiresBuild: true + optional: true + /@jridgewell/gen-mapping@0.3.3: resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==} engines: {node: '>=6.0.0'} @@ -1550,8 +1735,8 @@ packages: - supports-color dev: false - /@mdx-js/mdx@3.0.0: - resolution: {integrity: sha512-Icm0TBKBLYqroYbNW3BPnzMGn+7mwpQOK310aZ7+fkCtiU3aqv2cdcX+nd0Ydo3wI5Rx8bX2Z2QmGb/XcAClCw==} + /@mdx-js/mdx@3.0.1: + resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==} dependencies: '@types/estree': 1.0.5 '@types/estree-jsx': 1.0.0 @@ -1759,8 +1944,8 @@ packages: requiresBuild: true optional: true - /@shikijs/core@1.2.4: - resolution: {integrity: sha512-ClaUWpt8oTzjcF0MM1P81AeWyzc1sNSJlAjMG80CbwqbFqXSNz+NpQVUC0icobt3sZn43Sn27M4pHD/Jmp3zHw==} + /@shikijs/core@1.5.2: + resolution: {integrity: sha512-wSAOgaz48GmhILFElMCeQypSZmj6Ru6DttOOtl3KNkdJ17ApQuGNCfzpk4cClasVrnIu45++2DBwG4LNMQAfaA==} /@ts-morph/common@0.16.0: resolution: {integrity: sha512-SgJpzkTgZKLKqQniCjLaE3c2L2sdL7UShvmTmPBejAKd2OKV/yfMpQ2IWpAuA+VY5wy7PkSUaEObIqEK6afFuw==} @@ -1780,8 +1965,8 @@ packages: /@types/babel__core@7.20.5: resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} dependencies: - '@babel/parser': 7.24.1 - '@babel/types': 7.24.0 + '@babel/parser': 7.24.5 + '@babel/types': 7.24.5 '@types/babel__generator': 7.6.4 '@types/babel__template': 7.4.1 '@types/babel__traverse': 7.20.1 @@ -1789,25 +1974,25 @@ packages: /@types/babel__generator@7.6.4: resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==} dependencies: - '@babel/types': 7.24.0 + '@babel/types': 7.24.5 /@types/babel__template@7.4.1: resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==} dependencies: - '@babel/parser': 7.24.1 - '@babel/types': 7.24.0 + '@babel/parser': 7.24.5 + '@babel/types': 7.24.5 /@types/babel__traverse@7.20.1: resolution: {integrity: sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==} dependencies: - '@babel/types': 7.24.0 + '@babel/types': 7.24.5 /@types/canvas-confetti@1.6.0: resolution: {integrity: sha512-Yq6rIccwcco0TLD5SMUrIM7Fk7Fe/C0jmNRxJJCLtAF6gebDkPuUjK5EHedxecm69Pi/aA+It39Ux4OHmFhjRw==} dev: true - /@types/cookie@0.5.4: - resolution: {integrity: sha512-7z/eR6O859gyWIAjuvBWFzNURmf2oPBmJlfVWkwehU5nzIyjwBsTh7WMmEEV4JFnHuQ3ex4oyTvfKzcyJVDBNA==} + /@types/cookie@0.6.0: + resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} /@types/debug@4.1.7: resolution: {integrity: sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==} @@ -1823,12 +2008,6 @@ packages: /@types/estree@1.0.5: resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} - /@types/hast@2.3.4: - resolution: {integrity: sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==} - dependencies: - '@types/unist': 3.0.0 - dev: false - /@types/hast@3.0.3: resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==} dependencies: @@ -1872,7 +2051,13 @@ packages: /@types/nlcst@1.0.0: resolution: {integrity: sha512-3TGCfOcy8R8mMQ4CNSNOe3PG66HttvjcLzCoOpvXvDtfWOTi+uT/rxeOKm/qEwbM4SNe1O/PjdiBK2YcTjU4OQ==} dependencies: - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 + + /@types/nlcst@2.0.3: + resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==} + dependencies: + '@types/unist': 3.0.2 + dev: false /@types/node@17.0.45: resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==} @@ -1881,10 +2066,6 @@ packages: /@types/node@18.6.4: resolution: {integrity: sha512-I4BD3L+6AWiUobfxZ49DlU43gtI+FTHSv9pE2Zekg6KjMpre4ByusaljW3vYSLJrvQ1ck1hUaeVu8HVlY3vzHg==} - /@types/parse5@6.0.3: - resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==} - dev: false - /@types/retry@0.12.1: resolution: {integrity: sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==} dev: true @@ -2128,11 +2309,26 @@ packages: acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: acorn: 8.11.2 + dev: true + + /acorn-jsx@5.3.2(acorn@8.11.3): + resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} + peerDependencies: + acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + dependencies: + acorn: 8.11.3 + dev: false /acorn@8.11.2: resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==} engines: {node: '>=0.4.0'} hasBin: true + dev: true + + /acorn@8.11.3: + resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==} + engines: {node: '>=0.4.0'} + hasBin: true /ajv@6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} @@ -2251,6 +2447,10 @@ packages: /array-iterate@1.1.4: resolution: {integrity: sha512-sNRaPGh9nnmdC8Zf+pT3UqP8rnWj5Hf9wiFGsX3wUQ2yVSIhO2ShFwCoceIPpB41QF6i2OEmrHmCo36xronCVA==} + /array-iterate@2.0.1: + resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==} + dev: false + /array-union@2.1.0: resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==} engines: {node: '>=8'} @@ -2281,7 +2481,7 @@ packages: hasBin: true dev: false - /astro-auto-import@0.4.2(astro@4.6.3): + /astro-auto-import@0.4.2(astro@4.8.6): resolution: {integrity: sha512-ZgWZQ58+EhbEym1+aoUnNyECOy0wsG5uRUs+rVp/7BzHtj1V76J2qkhjaTWLplgNb+8WrzhvTQNxytmXRCW+Ow==} engines: {node: '>=16.0.0'} peerDependencies: @@ -2289,7 +2489,7 @@ packages: dependencies: '@types/node': 18.6.4 acorn: 8.11.2 - astro: 4.6.3(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) + astro: 4.8.6(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) dev: true /astro-eslint-parser@0.16.0: @@ -2323,98 +2523,97 @@ packages: - supports-color dev: true - /astro-expressive-code@0.33.4(astro@4.6.3): - resolution: {integrity: sha512-PtXLjd89WBA1WsDYlt3V1LZs9Pa8FFoXilaGDSyfxtbYJ2OPHjWh2JJvCiXmfXmY3HkPJ2oW9Jjo6om5vUlVcg==} + /astro-expressive-code@0.35.3(astro@4.8.6): + resolution: {integrity: sha512-f1L1m3J3EzZHDEox6TXmuKo5fTSbaNxE/HU0S0UQmvlCowtOKnU/LOsoDwsbQSYGKz+fdLRPsCjFMiKqEoyfcw==} peerDependencies: - astro: ^3.3.0 || ^4.0.0-beta + astro: ^4.0.0-beta || ^3.3.0 dependencies: - astro: 4.6.3(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) - hast-util-to-html: 8.0.4 - remark-expressive-code: 0.33.4 + astro: 4.8.6(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) + rehype-expressive-code: 0.35.3 dev: false - /astro-og-canvas@0.5.0(astro@4.6.3): + /astro-og-canvas@0.5.0(astro@4.8.6): resolution: {integrity: sha512-nrwZpFL9d6tVJRKV5OLZa3xSSh+Cbaaoay/R9jAgHCrJ79WNyN2rgRT/+wtP1O/bCQ+wVP3GC3mBQN7vogImvg==} engines: {node: '>=18.14.1'} peerDependencies: astro: ^3.0.0 || ^4.0.0 dependencies: - astro: 4.6.3(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) + astro: 4.8.6(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2) canvaskit-wasm: 0.39.1 deterministic-object-hash: 2.0.2 entities: 4.5.0 dev: true - /astro@4.6.3(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2): - resolution: {integrity: sha512-p2zs1Gac+ysdc/yFCoc8pOXTZE5L9foAtmqUzUVL22WX68bYTRovd03GRs7J1MDpwzsl9kJtlK20ROpjyIFpNw==} + /astro@4.8.6(@types/node@18.6.4)(sass@1.54.3)(typescript@5.0.2): + resolution: {integrity: sha512-psHIfK+e+bMPhRwghV9yCGH/uc1jvY4DHmDZdoEepax9yA7kzYH0wt3dpkqlcrO2zxl5jzSC3DmqZfkD6wnW9A==} engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0, npm: '>=9.6.5', pnpm: '>=7.1.0'} hasBin: true dependencies: - '@astrojs/compiler': 2.7.1 + '@astrojs/compiler': 2.8.0 '@astrojs/internal-helpers': 0.4.0 '@astrojs/markdown-remark': 5.1.0 '@astrojs/telemetry': 3.1.0 - '@babel/core': 7.24.3 - '@babel/generator': 7.24.1 - '@babel/parser': 7.24.1 - '@babel/plugin-transform-react-jsx': 7.22.15(@babel/core@7.24.3) - '@babel/traverse': 7.24.1 - '@babel/types': 7.24.0 + '@babel/core': 7.24.5 + '@babel/generator': 7.24.5 + '@babel/parser': 7.24.5 + '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.5) + '@babel/traverse': 7.24.5 + '@babel/types': 7.24.5 '@types/babel__core': 7.20.5 - '@types/cookie': 0.5.4 - acorn: 8.11.2 + '@types/cookie': 0.6.0 + acorn: 8.11.3 aria-query: 5.3.0 axobject-query: 4.0.0 boxen: 7.1.1 - chokidar: 3.5.3 + chokidar: 3.6.0 ci-info: 4.0.0 - clsx: 2.0.0 + clsx: 2.1.1 common-ancestor-path: 1.0.1 cookie: 0.6.0 cssesc: 3.0.0 debug: 4.3.4 deterministic-object-hash: 2.0.2 - devalue: 4.3.2 - diff: 5.1.0 + devalue: 5.0.0 + diff: 5.2.0 dlv: 1.1.3 dset: 3.1.3 - es-module-lexer: 1.4.1 - esbuild: 0.19.8 + es-module-lexer: 1.5.2 + esbuild: 0.21.3 estree-walker: 3.0.3 execa: 8.0.1 fast-glob: 3.3.2 - flattie: 1.1.0 + flattie: 1.1.1 github-slugger: 2.0.0 gray-matter: 4.0.3 html-escaper: 3.0.3 http-cache-semantics: 4.1.1 js-yaml: 4.1.0 kleur: 4.1.5 - magic-string: 0.30.3 - mime: 3.0.0 - ora: 7.0.1 + magic-string: 0.30.10 + mrmime: 2.0.0 + ora: 8.0.1 p-limit: 5.0.0 p-queue: 8.0.1 - path-to-regexp: 6.2.1 - preferred-pm: 3.1.2 + path-to-regexp: 6.2.2 + preferred-pm: 3.1.3 prompts: 2.4.2 rehype: 13.0.1 - resolve: 1.22.4 - semver: 7.5.4 - shiki: 1.2.4 - string-width: 7.0.0 + resolve: 1.22.8 + semver: 7.6.2 + shiki: 1.5.2 + string-width: 7.1.0 strip-ansi: 7.1.0 - tsconfck: 3.0.0(typescript@5.0.2) + tsconfck: 3.0.3(typescript@5.0.2) unist-util-visit: 5.0.0 vfile: 6.0.1 - vite: 5.2.2(@types/node@18.6.4)(sass@1.54.3) - vitefu: 0.2.5(vite@5.2.2) + vite: 5.2.11(@types/node@18.6.4)(sass@1.54.3) + vitefu: 0.2.5(vite@5.2.11) which-pm: 2.1.1 yargs-parser: 21.1.1 - zod: 3.22.4 - zod-to-json-schema: 3.22.4(zod@3.22.4) + zod: 3.23.8 + zod-to-json-schema: 3.23.0(zod@3.23.8) optionalDependencies: - sharp: 0.32.6 + sharp: 0.33.4 transitivePeerDependencies: - '@types/node' - less @@ -2458,6 +2657,7 @@ packages: /b4a@1.6.4: resolution: {integrity: sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==} + dev: false /bail@2.0.2: resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==} @@ -2470,6 +2670,7 @@ packages: /base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} + dev: false /bcp-47-match@2.0.2: resolution: {integrity: sha512-zy5swVXwQ25ttElhoN9Dgnqm6VFlMkeDNljvHSGqGNr4zClUosdFzxD+fQHJVmx3g3KY+r//wV/fmBHsa1ErnA==} @@ -2503,13 +2704,7 @@ packages: buffer: 5.7.1 inherits: 2.0.4 readable-stream: 3.6.2 - - /bl@5.1.0: - resolution: {integrity: sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==} - dependencies: - buffer: 6.0.3 - inherits: 2.0.4 - readable-stream: 3.6.2 + dev: false /bluebird@3.7.2: resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==} @@ -2582,12 +2777,7 @@ packages: dependencies: base64-js: 1.5.1 ieee754: 1.2.1 - - /buffer@6.0.3: - resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==} - dependencies: - base64-js: 1.5.1 - ieee754: 1.2.1 + dev: false /bundle-name@3.0.0: resolution: {integrity: sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==} @@ -2680,8 +2870,22 @@ packages: /character-reference-invalid@2.0.1: resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==} - /chokidar@3.5.3: - resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} + /chokidar@3.5.3: + resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} + engines: {node: '>= 8.10.0'} + dependencies: + anymatch: 3.1.3 + braces: 3.0.2 + glob-parent: 5.1.2 + is-binary-path: 2.1.0 + is-glob: 4.0.3 + normalize-path: 3.0.0 + readdirp: 3.6.0 + optionalDependencies: + fsevents: 2.3.3 + + /chokidar@3.6.0: + resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} dependencies: anymatch: 3.1.3 @@ -2696,6 +2900,7 @@ packages: /chownr@1.1.4: resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==} + dev: false /ci-info@4.0.0: resolution: {integrity: sha512-TdHqgGf9odd8SXNuxtUBVx8Nv+qZOejE6qyqiy5NtbYYQOeFa6zmHkxlPzmaLxWWHsU6nJmB7AETdVPi+2NBUg==} @@ -2711,8 +2916,8 @@ packages: dependencies: restore-cursor: 4.0.0 - /cli-spinners@2.9.0: - resolution: {integrity: sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==} + /cli-spinners@2.9.2: + resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==} engines: {node: '>=6'} /cliui@8.0.1: @@ -2724,8 +2929,8 @@ packages: wrap-ansi: 7.0.0 dev: false - /clsx@2.0.0: - resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} + /clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} /code-block-writer@11.0.3: @@ -2836,6 +3041,7 @@ packages: engines: {node: '>=10'} dependencies: mimic-response: 3.1.0 + dev: false /dedent-js@1.0.1: resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==} @@ -2844,6 +3050,7 @@ packages: /deep-extend@0.6.0: resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==} engines: {node: '>=4.0.0'} + dev: false /deep-is@0.1.4: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} @@ -2887,6 +3094,13 @@ packages: /detect-libc@2.0.2: resolution: {integrity: sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==} engines: {node: '>=8'} + dev: false + + /detect-libc@2.0.3: + resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==} + engines: {node: '>=8'} + requiresBuild: true + optional: true /deterministic-object-hash@2.0.2: resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==} @@ -2894,16 +3108,16 @@ packages: dependencies: base-64: 1.0.0 - /devalue@4.3.2: - resolution: {integrity: sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==} + /devalue@5.0.0: + resolution: {integrity: sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==} /devlop@1.1.0: resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} dependencies: dequal: 2.0.3 - /diff@5.1.0: - resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==} + /diff@5.2.0: + resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==} engines: {node: '>=0.3.1'} /dir-glob@3.0.1: @@ -3005,6 +3219,7 @@ packages: resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==} dependencies: once: 1.4.0 + dev: false /entities@2.1.0: resolution: {integrity: sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==} @@ -3062,8 +3277,8 @@ packages: which-typed-array: 1.1.9 dev: true - /es-module-lexer@1.4.1: - resolution: {integrity: sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==} + /es-module-lexer@1.5.2: + resolution: {integrity: sha512-l60ETUTmLqbVbVHv1J4/qj+M8nq7AwMzEcg3kmJDt9dCNrTk+yHcYFf/Kw75pMDwd9mPcIGCG5LcS20SxYRzFA==} /es-set-tostringtag@2.0.1: resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==} @@ -3299,35 +3514,6 @@ packages: esbuild-windows-arm64: 0.15.18 dev: true - /esbuild@0.19.8: - resolution: {integrity: sha512-l7iffQpT2OrZfH2rXIp7/FkmaeZM0vxbxN9KfiCwGYuZqzMg/JdvX26R31Zxn/Pxvsrg3Y9N6XTcnknqDyyv4w==} - engines: {node: '>=12'} - hasBin: true - requiresBuild: true - optionalDependencies: - '@esbuild/android-arm': 0.19.8 - '@esbuild/android-arm64': 0.19.8 - '@esbuild/android-x64': 0.19.8 - '@esbuild/darwin-arm64': 0.19.8 - '@esbuild/darwin-x64': 0.19.8 - '@esbuild/freebsd-arm64': 0.19.8 - '@esbuild/freebsd-x64': 0.19.8 - '@esbuild/linux-arm': 0.19.8 - '@esbuild/linux-arm64': 0.19.8 - '@esbuild/linux-ia32': 0.19.8 - '@esbuild/linux-loong64': 0.19.8 - '@esbuild/linux-mips64el': 0.19.8 - '@esbuild/linux-ppc64': 0.19.8 - '@esbuild/linux-riscv64': 0.19.8 - '@esbuild/linux-s390x': 0.19.8 - '@esbuild/linux-x64': 0.19.8 - '@esbuild/netbsd-x64': 0.19.8 - '@esbuild/openbsd-x64': 0.19.8 - '@esbuild/sunos-x64': 0.19.8 - '@esbuild/win32-arm64': 0.19.8 - '@esbuild/win32-ia32': 0.19.8 - '@esbuild/win32-x64': 0.19.8 - /esbuild@0.20.2: resolution: {integrity: sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==} engines: {node: '>=12'} @@ -3358,6 +3544,36 @@ packages: '@esbuild/win32-ia32': 0.20.2 '@esbuild/win32-x64': 0.20.2 + /esbuild@0.21.3: + resolution: {integrity: sha512-Kgq0/ZsAPzKrbOjCQcjoSmPoWhlcVnGAUo7jvaLHoxW1Drto0KGkR1xBNg2Cp43b9ImvxmPEJZ9xkfcnqPsfBw==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@esbuild/aix-ppc64': 0.21.3 + '@esbuild/android-arm': 0.21.3 + '@esbuild/android-arm64': 0.21.3 + '@esbuild/android-x64': 0.21.3 + '@esbuild/darwin-arm64': 0.21.3 + '@esbuild/darwin-x64': 0.21.3 + '@esbuild/freebsd-arm64': 0.21.3 + '@esbuild/freebsd-x64': 0.21.3 + '@esbuild/linux-arm': 0.21.3 + '@esbuild/linux-arm64': 0.21.3 + '@esbuild/linux-ia32': 0.21.3 + '@esbuild/linux-loong64': 0.21.3 + '@esbuild/linux-mips64el': 0.21.3 + '@esbuild/linux-ppc64': 0.21.3 + '@esbuild/linux-riscv64': 0.21.3 + '@esbuild/linux-s390x': 0.21.3 + '@esbuild/linux-x64': 0.21.3 + '@esbuild/netbsd-x64': 0.21.3 + '@esbuild/openbsd-x64': 0.21.3 + '@esbuild/sunos-x64': 0.21.3 + '@esbuild/win32-arm64': 0.21.3 + '@esbuild/win32-ia32': 0.21.3 + '@esbuild/win32-x64': 0.21.3 + /escalade@3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'} @@ -3641,14 +3857,15 @@ packages: /expand-template@2.0.3: resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==} engines: {node: '>=6'} + dev: false - /expressive-code@0.33.4: - resolution: {integrity: sha512-vb6DLHjG+jbLJGTvOUhxagsru7oUiBrQEsL9+hcWJvlxIqQ5mRFqjamQS9kCIhXXbfYWiYI7/wfTGxQxuHxsZQ==} + /expressive-code@0.35.3: + resolution: {integrity: sha512-XjWWUCxS4uQjPoRM98R7SNWWIYlFEaOeHm1piWv+c7coHCekuWno81thsc3g/UJ+DajNtOEsIQIAAcsBQZ8LMg==} dependencies: - '@expressive-code/core': 0.33.4 - '@expressive-code/plugin-frames': 0.33.4 - '@expressive-code/plugin-shiki': 0.33.4 - '@expressive-code/plugin-text-markers': 0.33.4 + '@expressive-code/core': 0.35.3 + '@expressive-code/plugin-frames': 0.35.3 + '@expressive-code/plugin-shiki': 0.35.3 + '@expressive-code/plugin-text-markers': 0.35.3 dev: false /extend-shallow@2.0.1: @@ -3666,6 +3883,7 @@ packages: /fast-fifo@1.3.2: resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==} + dev: false /fast-glob@3.3.2: resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} @@ -3751,8 +3969,8 @@ packages: resolution: {integrity: sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==} dev: true - /flattie@1.1.0: - resolution: {integrity: sha512-xU99gDEnciIwJdGcBmNHnzTJ/w5AT+VFJOu6sTB6WM8diOYNA3Sa+K1DiEBQ7XH4QikQq3iFW1U+jRVcotQnBw==} + /flattie@1.1.1: + resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==} engines: {node: '>=8'} /for-each@0.3.3: @@ -3770,6 +3988,7 @@ packages: /fs-constants@1.0.0: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} + dev: false /fs-then-native@2.0.0: resolution: {integrity: sha512-X712jAOaWXkemQCAmWeg5rOT2i+KOpWz1Z/txk/cW0qlOu2oQ9H61vc5w3X/iyuUEfq/OyaFJ78/cZAQD1/bgA==} @@ -3848,6 +4067,7 @@ packages: /github-from-package@0.0.0: resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==} + dev: false /github-slugger@2.0.0: resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==} @@ -3969,16 +4189,11 @@ packages: dependencies: function-bind: 1.1.1 - /hast-to-hyperscript@10.0.1: - resolution: {integrity: sha512-dhIVGoKCQVewFi+vz3Vt567E4ejMppS1haBRL6TEmeLeJVB1i/FJIIg/e6s1Bwn0g5qtYojHEKvyGA+OZuyifw==} + /hast-util-embedded@3.0.0: + resolution: {integrity: sha512-naH8sld4Pe2ep03qqULEtvYr7EjrLK2QHY8KJR6RJkTUjPGObe1vnx585uzem2hGra+s1q08DZZpfgDVYRbaXA==} dependencies: - '@types/unist': 2.0.8 - comma-separated-tokens: 2.0.3 - property-information: 6.2.0 - space-separated-tokens: 2.0.2 - style-to-object: 0.3.0 - unist-util-is: 5.2.1 - web-namespaces: 2.0.1 + '@types/hast': 3.0.3 + hast-util-is-element: 3.0.0 dev: false /hast-util-from-html@2.0.1: @@ -3991,24 +4206,11 @@ packages: vfile: 6.0.1 vfile-message: 4.0.2 - /hast-util-from-parse5@7.1.0: - resolution: {integrity: sha512-m8yhANIAccpU4K6+121KpPP55sSl9/samzQSQGpb0mTExcNh2WlvjtMwSWFhg6uqD4Rr6Nfa8N6TMypQM51rzQ==} - dependencies: - '@types/hast': 2.3.4 - '@types/parse5': 6.0.3 - '@types/unist': 2.0.8 - hastscript: 7.2.0 - property-information: 6.2.0 - vfile: 5.3.7 - vfile-location: 4.0.1 - web-namespaces: 2.0.1 - dev: false - /hast-util-from-parse5@8.0.1: resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==} dependencies: '@types/hast': 3.0.3 - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 devlop: 1.1.0 hastscript: 8.0.0 property-information: 6.2.0 @@ -4027,43 +4229,37 @@ packages: '@types/hast': 3.0.3 dev: false - /hast-util-is-element@3.0.0: - resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} + /hast-util-is-body-ok-link@3.0.0: + resolution: {integrity: sha512-VFHY5bo2nY8HiV6nir2ynmEB1XkxzuUffhEGeVx7orbu/B1KaGyeGgMZldvMVx5xWrDlLLG/kQ6YkJAMkBEx0w==} dependencies: '@types/hast': 3.0.3 + dev: false - /hast-util-parse-selector@3.1.1: - resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==} + /hast-util-is-element@3.0.0: + resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==} dependencies: - '@types/hast': 2.3.4 - dev: false + '@types/hast': 3.0.3 /hast-util-parse-selector@4.0.0: resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==} dependencies: '@types/hast': 3.0.3 - /hast-util-raw@7.2.1: - resolution: {integrity: sha512-wgtppqXVdXzkDXDFclLLdAyVUJSKMYYi6LWIAbA8oFqEdwksYIcPGM3RkKV1Dfn5GElvxhaOCs0jmCOMayxd3A==} + /hast-util-phrasing@3.0.1: + resolution: {integrity: sha512-6h60VfI3uBQUxHqTyMymMZnEbNl1XmEGtOxxKYL7stY2o601COo62AWAYBQR9lZbYXYSBoxag8UpPRXK+9fqSQ==} dependencies: - '@types/hast': 2.3.4 - '@types/parse5': 6.0.3 - hast-util-from-parse5: 7.1.0 - hast-util-to-parse5: 7.0.0 - html-void-elements: 2.0.1 - parse5: 6.0.1 - unist-util-position: 4.0.3 - unist-util-visit: 4.1.2 - vfile: 5.3.7 - web-namespaces: 2.0.1 - zwitch: 2.0.4 + '@types/hast': 3.0.3 + hast-util-embedded: 3.0.0 + hast-util-has-property: 3.0.0 + hast-util-is-body-ok-link: 3.0.0 + hast-util-is-element: 3.0.0 dev: false /hast-util-raw@9.0.1: resolution: {integrity: sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==} dependencies: '@types/hast': 3.0.3 - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 '@ungap/structured-clone': 1.2.0 hast-util-from-parse5: 8.0.1 hast-util-to-parse5: 8.0.0 @@ -4119,22 +4315,6 @@ packages: - supports-color dev: false - /hast-util-to-html@8.0.4: - resolution: {integrity: sha512-4tpQTUOr9BMjtYyNlt0P50mH7xj0Ks2xpo8M943Vykljf99HW6EzulIoJP1N3eKOSScEHzyzi9dm7/cn0RfGwA==} - dependencies: - '@types/hast': 2.3.4 - '@types/unist': 2.0.8 - ccount: 2.0.1 - comma-separated-tokens: 2.0.3 - hast-util-raw: 7.2.1 - hast-util-whitespace: 2.0.0 - html-void-elements: 2.0.1 - property-information: 6.2.0 - space-separated-tokens: 2.0.2 - stringify-entities: 4.0.4 - zwitch: 2.0.4 - dev: false - /hast-util-to-html@9.0.1: resolution: {integrity: sha512-hZOofyZANbyWo+9RP75xIDV/gq+OUKx+T46IlwERnKmfpwp81XBFbT9mi26ws+SJchA4RVUQwIBJpqEOBhMzEQ==} dependencies: @@ -4173,17 +4353,6 @@ packages: - supports-color dev: false - /hast-util-to-parse5@7.0.0: - resolution: {integrity: sha512-YHiS6aTaZ3N0Q3nxaY/Tj98D6kM8QX5Q8xqgg8G45zR7PvWnPGPP0vcKCgb/moIydEJ/QWczVrX0JODCVeoV7A==} - dependencies: - '@types/hast': 2.3.4 - '@types/parse5': 6.0.3 - hast-to-hyperscript: 10.0.1 - property-information: 6.2.0 - web-namespaces: 2.0.1 - zwitch: 2.0.4 - dev: false - /hast-util-to-parse5@8.0.0: resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==} dependencies: @@ -4208,8 +4377,13 @@ packages: hast-util-is-element: 3.0.0 unist-util-find-after: 5.0.0 - /hast-util-whitespace@2.0.0: - resolution: {integrity: sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==} + /hast-util-to-text@4.0.2: + resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==} + dependencies: + '@types/hast': 3.0.3 + '@types/unist': 3.0.2 + hast-util-is-element: 3.0.0 + unist-util-find-after: 5.0.0 dev: false /hast-util-whitespace@3.0.0: @@ -4217,35 +4391,35 @@ packages: dependencies: '@types/hast': 3.0.3 - /hastscript@7.2.0: - resolution: {integrity: sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==} + /hastscript@8.0.0: + resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} dependencies: - '@types/hast': 2.3.4 + '@types/hast': 3.0.3 comma-separated-tokens: 2.0.3 - hast-util-parse-selector: 3.1.1 + hast-util-parse-selector: 4.0.0 property-information: 6.2.0 space-separated-tokens: 2.0.2 - dev: false - /hastscript@8.0.0: - resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} + /hastscript@9.0.0: + resolution: {integrity: sha512-jzaLBGavEDKHrc5EfFImKN7nZKKBdSLIdGvCwDZ9TfzbF2ffXiov8CKE445L2Z1Ek2t/m4SKQ2j6Ipv7NyUolw==} dependencies: '@types/hast': 3.0.3 comma-separated-tokens: 2.0.3 hast-util-parse-selector: 4.0.0 property-information: 6.2.0 space-separated-tokens: 2.0.2 + dev: false /html-escaper@3.0.3: resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} - /html-void-elements@2.0.1: - resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==} - dev: false - /html-void-elements@3.0.0: resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} + /html-whitespace-sensitive-tag-names@3.0.0: + resolution: {integrity: sha512-KlClZ3/Qy5UgvpvVvDomGhnQhNWH5INE8GwvSIQ9CWt1K0zbbXrl7eN5bWaafOZgtmO3jMPwUqmrmEwinhPq1w==} + dev: false + /htmlparser2@7.2.0: resolution: {integrity: sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==} dependencies: @@ -4274,6 +4448,7 @@ packages: /ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} + dev: false /ignore@5.2.0: resolution: {integrity: sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==} @@ -4310,6 +4485,7 @@ packages: /ini@1.3.8: resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==} + dev: false /inline-style-parser@0.1.1: resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==} @@ -4519,6 +4695,10 @@ packages: resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==} engines: {node: '>=12'} + /is-unicode-supported@2.0.0: + resolution: {integrity: sha512-FRdAyx5lusK1iHG0TWpVtk9+1i+GjrzRffhDg4ovQ7mcidMQ6mj+MhKPmvh7Xwyv5gIS06ns49CA7Sqg7lC22Q==} + engines: {node: '>=18'} + /is-weakref@1.0.2: resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==} dependencies: @@ -4699,9 +4879,9 @@ packages: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} dev: false - /log-symbols@5.1.0: - resolution: {integrity: sha512-l0x2DvrW294C9uDCoQe1VSU4gf529FkSZ6leBl4TiqZH/e+0R7hSfHQBNut2mNygDgHwvYHfFLn6Oxb3VWj2rA==} - engines: {node: '>=12'} + /log-symbols@6.0.0: + resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==} + engines: {node: '>=18'} dependencies: chalk: 5.3.0 is-unicode-supported: 1.3.0 @@ -4734,9 +4914,8 @@ packages: dependencies: yallist: 4.0.0 - /magic-string@0.30.3: - resolution: {integrity: sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==} - engines: {node: '>=12'} + /magic-string@0.30.10: + resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==} dependencies: '@jridgewell/sourcemap-codec': 1.4.15 @@ -4786,7 +4965,7 @@ packages: resolution: {integrity: sha512-JUpYOqKI4mM3sZcNxmF/ox04XYFFkNwr0CFlrQIkCwbvH0xzMCqkMqAde9wRd80VAhaUrwFwKm2nxretdT1h7Q==} dependencies: '@types/mdast': 4.0.3 - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 devlop: 1.1.0 mdast-util-from-markdown: 2.0.0 mdast-util-to-markdown: 2.1.0 @@ -4965,7 +5144,7 @@ packages: resolution: {integrity: sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==} dependencies: '@types/mdast': 4.0.3 - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 longest-streak: 3.1.0 mdast-util-phrasing: 4.0.0 mdast-util-to-string: 4.0.0 @@ -5136,8 +5315,8 @@ packages: /micromark-extension-mdxjs@3.0.0: resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==} dependencies: - acorn: 8.11.2 - acorn-jsx: 5.3.2(acorn@8.11.2) + acorn: 8.11.3 + acorn-jsx: 5.3.2(acorn@8.11.3) micromark-extension-mdx-expression: 3.0.0 micromark-extension-mdx-jsx: 3.0.0 micromark-extension-mdx-md: 2.0.0 @@ -5313,11 +5492,6 @@ packages: braces: 3.0.2 picomatch: 2.3.1 - /mime@3.0.0: - resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==} - engines: {node: '>=10.0.0'} - hasBin: true - /mimic-fn@2.1.0: resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==} engines: {node: '>=6'} @@ -5329,6 +5503,7 @@ packages: /mimic-response@3.1.0: resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==} engines: {node: '>=10'} + dev: false /minimatch@3.1.2: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} @@ -5344,9 +5519,11 @@ packages: /minimist@1.2.8: resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} + dev: false /mkdirp-classic@0.5.3: resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==} + dev: false /mkdirp2@1.0.5: resolution: {integrity: sha512-xOE9xbICroUDmG1ye2h4bZ8WBie9EGmACaco8K8cx6RlkJJrxGIqjGqztAI+NMhexXBcdGbSEzI6N3EJPevxZw==} @@ -5357,6 +5534,10 @@ packages: engines: {node: '>=10'} hasBin: true + /mrmime@2.0.0: + resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==} + engines: {node: '>=10'} + /ms@2.1.2: resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} @@ -5371,6 +5552,7 @@ packages: /napi-build-utils@1.0.2: resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==} + dev: false /natural-compare-lite@1.4.0: resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==} @@ -5388,14 +5570,22 @@ packages: dependencies: '@types/nlcst': 1.0.0 + /nlcst-to-string@4.0.0: + resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==} + dependencies: + '@types/nlcst': 2.0.3 + dev: false + /node-abi@3.54.0: resolution: {integrity: sha512-p7eGEiQil0YUV3ItH4/tBb781L5impVmmx2E9FRKF7d18XXzp4PGT2tdYMFY6wQqgxD0IwNZOiSJ0/K0fSi/OA==} engines: {node: '>=10'} dependencies: semver: 7.5.4 + dev: false /node-addon-api@6.1.0: resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==} + dev: false /node-domexception@1.0.0: resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==} @@ -5557,18 +5747,18 @@ packages: word-wrap: 1.2.3 dev: true - /ora@7.0.1: - resolution: {integrity: sha512-0TUxTiFJWv+JnjWm4o9yvuskpEJLXTcng8MJuKd+SzAzp2o+OP3HWqNhB4OdJRt1Vsd9/mR0oyaEYlOnL7XIRw==} - engines: {node: '>=16'} + /ora@8.0.1: + resolution: {integrity: sha512-ANIvzobt1rls2BDny5fWZ3ZVKyD6nscLvfFRpQgfWsythlcsVUC9kL0zq6j2Z5z9wwp1kd7wpsD/T9qNPVLCaQ==} + engines: {node: '>=18'} dependencies: chalk: 5.3.0 cli-cursor: 4.0.0 - cli-spinners: 2.9.0 + cli-spinners: 2.9.2 is-interactive: 2.0.0 - is-unicode-supported: 1.3.0 - log-symbols: 5.1.0 - stdin-discarder: 0.1.0 - string-width: 6.1.0 + is-unicode-supported: 2.0.0 + log-symbols: 6.0.0 + stdin-discarder: 0.2.2 + string-width: 7.1.0 strip-ansi: 7.1.0 /organize-imports-cli@0.10.0: @@ -5691,14 +5881,21 @@ packages: unist-util-modify-children: 2.0.0 unist-util-visit-children: 1.1.4 + /parse-latin@7.0.0: + resolution: {integrity: sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==} + dependencies: + '@types/nlcst': 2.0.3 + '@types/unist': 3.0.2 + nlcst-to-string: 4.0.0 + unist-util-modify-children: 4.0.0 + unist-util-visit-children: 3.0.0 + vfile: 6.0.1 + dev: false + /parse-numeric-range@1.3.0: resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==} dev: true - /parse5@6.0.1: - resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==} - dev: false - /parse5@7.1.2: resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==} dependencies: @@ -5728,6 +5925,10 @@ packages: /path-to-regexp@6.2.1: resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==} + dev: false + + /path-to-regexp@6.2.2: + resolution: {integrity: sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==} /path-type@4.0.0: resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==} @@ -5759,13 +5960,13 @@ packages: dependencies: find-up: 4.1.0 - /postcss-nested@6.0.1(postcss@8.4.35): + /postcss-nested@6.0.1(postcss@8.4.38): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 dependencies: - postcss: 8.4.35 + postcss: 8.4.38 postcss-selector-parser: 6.0.13 dev: false @@ -5782,18 +5983,9 @@ packages: dependencies: nanoid: 3.3.7 picocolors: 1.0.0 - source-map-js: 1.0.2 + source-map-js: 1.2.0 dev: true - /postcss@8.4.35: - resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==} - engines: {node: ^10 || ^12 || >=14} - dependencies: - nanoid: 3.3.7 - picocolors: 1.0.0 - source-map-js: 1.0.2 - dev: false - /postcss@8.4.38: resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} engines: {node: ^10 || ^12 || >=14} @@ -5823,9 +6015,10 @@ packages: simple-get: 4.0.1 tar-fs: 2.1.1 tunnel-agent: 0.6.0 + dev: false - /preferred-pm@3.1.2: - resolution: {integrity: sha512-nk7dKrcW8hfCZ4H6klWcdRknBOXWzNQByJ0oJyX97BOupsYD+FzLS4hflgEu/uPUEHZCuRfMxzCBsuWd7OzT8Q==} + /preferred-pm@3.1.3: + resolution: {integrity: sha512-MkXsENfftWSRpzCzImcp4FRsCc3y1opwB73CfCNWyzMqArju2CrlMHlqB7VexKiPEOjGMbttv1r9fSCn5S610w==} engines: {node: '>=10'} dependencies: find-up: 5.0.0 @@ -5882,6 +6075,7 @@ packages: dependencies: end-of-stream: 1.4.4 once: 1.4.0 + dev: false /punycode@2.1.1: resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==} @@ -5893,6 +6087,7 @@ packages: /queue-tick@1.0.1: resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==} + dev: false /rc@1.2.8: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} @@ -5902,6 +6097,7 @@ packages: ini: 1.3.8 minimist: 1.2.8 strip-json-comments: 2.0.1 + dev: false /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -5914,6 +6110,7 @@ packages: inherits: 2.0.4 string_decoder: 1.3.0 util-deprecate: 1.0.2 + dev: false /readdirp@3.6.0: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} @@ -5946,6 +6143,35 @@ packages: unist-util-visit: 5.0.0 dev: false + /rehype-expressive-code@0.35.3: + resolution: {integrity: sha512-kj43Rg+WzYUs8RRr6XyBr60pnrIZEgbmn9yJoV6qka1UDpcx7r8icn6Q2uSAgaLtlEUy+HCPgQJraOZrA53LOQ==} + dependencies: + expressive-code: 0.35.3 + dev: false + + /rehype-format@5.0.0: + resolution: {integrity: sha512-kM4II8krCHmUhxrlvzFSptvaWh280Fr7UGNJU5DCMuvmAwGCNmGfi9CvFAQK6JDjsNoRMWQStglK3zKJH685Wg==} + dependencies: + '@types/hast': 3.0.3 + hast-util-embedded: 3.0.0 + hast-util-is-element: 3.0.0 + hast-util-phrasing: 3.0.1 + hast-util-whitespace: 3.0.0 + html-whitespace-sensitive-tag-names: 3.0.0 + rehype-minify-whitespace: 6.0.0 + unist-util-visit-parents: 6.0.1 + dev: false + + /rehype-minify-whitespace@6.0.0: + resolution: {integrity: sha512-i9It4YHR0Sf3GsnlR5jFUKXRr9oayvEk9GKQUkwZv6hs70OH9q3OCZrq9PpLvIGKt3W+JxBOxCidNVpH/6rWdA==} + dependencies: + '@types/hast': 3.0.3 + hast-util-embedded: 3.0.0 + hast-util-is-element: 3.0.0 + hast-util-whitespace: 3.0.0 + unist-util-is: 6.0.0 + dev: false + /rehype-parse@9.0.0: resolution: {integrity: sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==} dependencies: @@ -5995,14 +6221,6 @@ packages: transitivePeerDependencies: - supports-color - /remark-expressive-code@0.33.4: - resolution: {integrity: sha512-ucGzDknAY6LJKkcNSaYh9N0SEr1LDA0shageM1xa+4fu/o+7g6R1/ApF7d2c+cj1ERLvaF4OaUa87n5baY+MDA==} - dependencies: - expressive-code: 0.33.4 - hast-util-to-html: 8.0.4 - unist-util-visit: 4.1.2 - dev: false - /remark-gfm@4.0.0: resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==} dependencies: @@ -6051,6 +6269,16 @@ packages: retext-smartypants: 5.1.0 unist-util-visit: 4.1.2 + /remark-smartypants@3.0.1: + resolution: {integrity: sha512-qyshfCl2eLO0i0558e79ZJsfojC5wjnYLByjt0FmjJQN6aYwcRxpoj784LZJSoWCdnA2ubh5rLNGb8Uur/wDng==} + engines: {node: '>=16.0.0'} + dependencies: + retext: 9.0.0 + retext-smartypants: 6.1.0 + unified: 11.0.4 + unist-util-visit: 5.0.0 + dev: false + /remark-stringify@11.0.0: resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} dependencies: @@ -6089,8 +6317,8 @@ packages: engines: {node: '>=4'} dev: true - /resolve@1.22.4: - resolution: {integrity: sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==} + /resolve@1.22.8: + resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} hasBin: true dependencies: is-core-module: 2.13.0 @@ -6121,6 +6349,14 @@ packages: unherit: 3.0.0 unified: 10.1.2 + /retext-latin@4.0.0: + resolution: {integrity: sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA==} + dependencies: + '@types/nlcst': 2.0.3 + parse-latin: 7.0.0 + unified: 11.0.4 + dev: false + /retext-smartypants@5.1.0: resolution: {integrity: sha512-P+VS0YlE96T2MRAlFHaTUhPrq1Rls+1GCvIytBvbo7wcgmRxC9xHle0/whTYpRqWirV9WaUm5mXmh1dKnskGWQ==} dependencies: @@ -6129,6 +6365,14 @@ packages: unified: 10.1.2 unist-util-visit: 4.1.2 + /retext-smartypants@6.1.0: + resolution: {integrity: sha512-LDPXg95346bqFZnDMHo0S7Rq5p64+B+N8Vz733+wPMDtwb9rCOs9LIdIEhrUOU+TAywX9St+ocQWJt8wrzivcQ==} + dependencies: + '@types/nlcst': 2.0.3 + nlcst-to-string: 4.0.0 + unist-util-visit: 5.0.0 + dev: false + /retext-stringify@3.1.0: resolution: {integrity: sha512-767TLOaoXFXyOnjx/EggXlb37ZD2u4P1n0GJqVdpipqACsQP+20W+BNpMYrlJkq7hxffnFk+jc6mAK9qrbuB8w==} dependencies: @@ -6136,6 +6380,14 @@ packages: nlcst-to-string: 3.1.0 unified: 10.1.2 + /retext-stringify@4.0.0: + resolution: {integrity: sha512-rtfN/0o8kL1e+78+uxPTqu1Klt0yPzKuQ2BfWwwfgIUSayyzxpM1PJzkKt4V8803uB9qSy32MvI7Xep9khTpiA==} + dependencies: + '@types/nlcst': 2.0.3 + nlcst-to-string: 4.0.0 + unified: 11.0.4 + dev: false + /retext@8.1.0: resolution: {integrity: sha512-N9/Kq7YTn6ZpzfiGW45WfEGJqFf1IM1q8OsRa1CGzIebCJBNCANDRmOrholiDRGKo/We7ofKR4SEvcGAWEMD3Q==} dependencies: @@ -6144,6 +6396,15 @@ packages: retext-stringify: 3.1.0 unified: 10.1.2 + /retext@9.0.0: + resolution: {integrity: sha512-sbMDcpHCNjvlheSgMfEcVrZko3cDzdbe1x/e7G66dFp0Ff7Mldvi2uv6JkJQzdRcvLYE8CA8Oe8siQx8ZOgTcA==} + dependencies: + '@types/nlcst': 2.0.3 + retext-latin: 4.0.0 + retext-stringify: 4.0.0 + unified: 11.0.4 + dev: false + /retry@0.13.1: resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==} engines: {node: '>= 4'} @@ -6201,6 +6462,7 @@ packages: /safe-buffer@5.2.1: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} + dev: false /safe-regex-test@1.0.0: resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==} @@ -6255,6 +6517,11 @@ packages: dependencies: lru-cache: 6.0.0 + /semver@7.6.2: + resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==} + engines: {node: '>=10'} + hasBin: true + /sharp@0.32.6: resolution: {integrity: sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==} engines: {node: '>=14.15.0'} @@ -6268,6 +6535,37 @@ packages: simple-get: 4.0.1 tar-fs: 3.0.4 tunnel-agent: 0.6.0 + dev: false + + /sharp@0.33.4: + resolution: {integrity: sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==} + engines: {libvips: '>=8.15.2', node: ^18.17.0 || ^20.3.0 || >=21.0.0} + requiresBuild: true + dependencies: + color: 4.2.3 + detect-libc: 2.0.3 + semver: 7.6.2 + optionalDependencies: + '@img/sharp-darwin-arm64': 0.33.4 + '@img/sharp-darwin-x64': 0.33.4 + '@img/sharp-libvips-darwin-arm64': 1.0.2 + '@img/sharp-libvips-darwin-x64': 1.0.2 + '@img/sharp-libvips-linux-arm': 1.0.2 + '@img/sharp-libvips-linux-arm64': 1.0.2 + '@img/sharp-libvips-linux-s390x': 1.0.2 + '@img/sharp-libvips-linux-x64': 1.0.2 + '@img/sharp-libvips-linuxmusl-arm64': 1.0.2 + '@img/sharp-libvips-linuxmusl-x64': 1.0.2 + '@img/sharp-linux-arm': 0.33.4 + '@img/sharp-linux-arm64': 0.33.4 + '@img/sharp-linux-s390x': 0.33.4 + '@img/sharp-linux-x64': 0.33.4 + '@img/sharp-linuxmusl-arm64': 0.33.4 + '@img/sharp-linuxmusl-x64': 0.33.4 + '@img/sharp-wasm32': 0.33.4 + '@img/sharp-win32-ia32': 0.33.4 + '@img/sharp-win32-x64': 0.33.4 + optional: true /shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} @@ -6279,10 +6577,10 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} - /shiki@1.2.4: - resolution: {integrity: sha512-Q9n9jKiOjJCRPztA9POn3/uZXNySHDNKAsPNpmtHDcFyi6ZQhx5vQKZW3Nhrwn8TWW3RudSRk66zqY603EZDeg==} + /shiki@1.5.2: + resolution: {integrity: sha512-fpPbuSaatinmdGijE7VYUD3hxLozR3ZZ+iAx8Iy2X6REmJGyF5hQl94SgmiUNTospq346nXUVZx0035dyGvIVw==} dependencies: - '@shikijs/core': 1.2.4 + '@shikijs/core': 1.5.2 /side-channel@1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} @@ -6305,6 +6603,7 @@ packages: /simple-concat@1.0.1: resolution: {integrity: sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==} + dev: false /simple-get@4.0.1: resolution: {integrity: sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==} @@ -6312,6 +6611,7 @@ packages: decompress-response: 6.0.0 once: 1.4.0 simple-concat: 1.0.1 + dev: false /simple-git@3.21.0: resolution: {integrity: sha512-oTzw9248AF5bDTMk9MrxsRzEzivMlY+DWH0yWS4VYpMhNLhDWnN06pCtaUyPnqv/FpsdeNmRqmZugMABHRPdDA==} @@ -6371,11 +6671,9 @@ packages: /sprintf-js@1.0.3: resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} - /stdin-discarder@0.1.0: - resolution: {integrity: sha512-xhV7w8S+bUwlPTb4bAOUQhv8/cSS5offJuX8GQGq32ONF0ZtDWKfkdomM3HMRA+LhX6um/FZ0COqlwsjD53LeQ==} - engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} - dependencies: - bl: 5.1.0 + /stdin-discarder@0.2.2: + resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==} + engines: {node: '>=18'} /stream-connect@1.0.2: resolution: {integrity: sha512-68Kl+79cE0RGKemKkhxTSg8+6AGrqBt+cbZAXevg2iJ6Y3zX4JhA/sZeGzLpxW9cXhmqAcE7KnJCisUmIUfnFQ==} @@ -6394,6 +6692,7 @@ packages: dependencies: fast-fifo: 1.3.2 queue-tick: 1.0.1 + dev: false /string-width@4.2.3: resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} @@ -6411,16 +6710,8 @@ packages: emoji-regex: 9.2.2 strip-ansi: 7.1.0 - /string-width@6.1.0: - resolution: {integrity: sha512-k01swCJAgQmuADB0YIc+7TuatfNvTBVOoaUWJjTB9R4VJzR5vNWzf5t42ESVZFPS8xTySF7CAdV4t/aaIm3UnQ==} - engines: {node: '>=16'} - dependencies: - eastasianwidth: 0.2.0 - emoji-regex: 10.3.0 - strip-ansi: 7.1.0 - - /string-width@7.0.0: - resolution: {integrity: sha512-GPQHj7row82Hjo9hKZieKcHIhaAIKOJvFSIZXuCU9OASVZrMNUaZuz++SPVrBjnLsnk4k+z9f2EIypgxf2vNFw==} + /string-width@7.1.0: + resolution: {integrity: sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==} engines: {node: '>=18'} dependencies: emoji-regex: 10.3.0 @@ -6460,6 +6751,7 @@ packages: resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==} dependencies: safe-buffer: 5.2.1 + dev: false /stringify-entities@4.0.4: resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==} @@ -6504,12 +6796,6 @@ packages: resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} engines: {node: '>=8'} - /style-to-object@0.3.0: - resolution: {integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==} - dependencies: - inline-style-parser: 0.1.1 - dev: false - /style-to-object@0.4.1: resolution: {integrity: sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==} dependencies: @@ -6563,6 +6849,7 @@ packages: mkdirp-classic: 0.5.3 pump: 3.0.0 tar-stream: 2.2.0 + dev: false /tar-fs@3.0.4: resolution: {integrity: sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==} @@ -6570,6 +6857,7 @@ packages: mkdirp-classic: 0.5.3 pump: 3.0.0 tar-stream: 3.1.7 + dev: false /tar-stream@2.2.0: resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==} @@ -6580,6 +6868,7 @@ packages: fs-constants: 1.0.0 inherits: 2.0.4 readable-stream: 3.6.2 + dev: false /tar-stream@3.1.7: resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==} @@ -6587,6 +6876,7 @@ packages: b4a: 1.6.4 fast-fifo: 1.3.2 streamx: 2.15.6 + dev: false /temp-path@1.0.0: resolution: {integrity: sha512-TvmyH7kC6ZVTYkqCODjJIbgvu0FKiwQpZ4D1aknE7xpcDf/qEOB8KZEK5ef2pfbVoiBhNWs3yx4y+ESMtNYmlg==} @@ -6628,8 +6918,8 @@ packages: code-block-writer: 11.0.3 dev: true - /tsconfck@3.0.0(typescript@5.0.2): - resolution: {integrity: sha512-w3wnsIrJNi7avf4Zb0VjOoodoO0woEqGgZGQm+LHH9przdUI+XDKsWAXwxHA1DaRTjeuZNcregSzr7RaA8zG9A==} + /tsconfck@3.0.3(typescript@5.0.2): + resolution: {integrity: sha512-4t0noZX9t6GcPTfBAbIbbIU4pfpCwh0ueq3S4O/5qXI1VwK1outmxhe9dOiEWqMz3MW2LKgDTpqWV+37IWuVbA==} engines: {node: ^18 || >=20} hasBin: true peerDependencies: @@ -6655,7 +6945,6 @@ packages: /tslib@2.6.0: resolution: {integrity: sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==} - dev: true /tsm@2.3.0: resolution: {integrity: sha512-++0HFnmmR+gMpDtKTnW3XJ4yv9kVGi20n+NfyQWB9qwJvTaIWY9kBmzek2YUQK5APTQ/1DTrXmm4QtFPmW9Rzw==} @@ -6679,6 +6968,7 @@ packages: resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==} dependencies: safe-buffer: 5.2.1 + dev: false /tunnel@0.0.6: resolution: {integrity: sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==} @@ -6788,29 +7078,30 @@ packages: /unist-util-is@6.0.0: resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} dependencies: - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 /unist-util-modify-children@2.0.0: resolution: {integrity: sha512-HGrj7JQo9DwZt8XFsX8UD4gGqOsIlCih9opG6Y+N11XqkBGKzHo8cvDi+MfQQgiZ7zXRUiQREYHhjOBHERTMdg==} dependencies: array-iterate: 1.1.4 - /unist-util-position-from-estree@2.0.0: - resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==} + /unist-util-modify-children@4.0.0: + resolution: {integrity: sha512-+tdN5fGNddvsQdIzUF3Xx82CU9sMM+fA0dLgR9vOmT0oPT2jH+P1nd5lSqfCfXAw+93NhcXNY2qqvTUtE4cQkw==} dependencies: '@types/unist': 3.0.2 + array-iterate: 2.0.1 dev: false - /unist-util-position@4.0.3: - resolution: {integrity: sha512-p/5EMGIa1qwbXjA+QgcBXaPWjSnZfQ2Sc3yBEEfgPwsEmJd8Qh+DSk3LGnmOM4S1bY2C0AjmMnB8RuEYxpPwXQ==} + /unist-util-position-from-estree@2.0.0: + resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==} dependencies: - '@types/unist': 2.0.8 + '@types/unist': 3.0.2 dev: false /unist-util-position@5.0.0: resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==} dependencies: - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 /unist-util-remove-position@5.0.0: resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==} @@ -6824,6 +7115,7 @@ packages: '@types/unist': 3.0.0 unist-util-is: 6.0.0 unist-util-visit-parents: 6.0.1 + dev: true /unist-util-stringify-position@3.0.3: resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==} @@ -6833,11 +7125,17 @@ packages: /unist-util-stringify-position@4.0.0: resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==} dependencies: - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 /unist-util-visit-children@1.1.4: resolution: {integrity: sha512-sA/nXwYRCQVRwZU2/tQWUqJ9JSFM1X3x7JIOsIgSzrFHcfVt6NkzDtKzyxg2cZWkCwGF9CO8x4QNZRJRMK8FeQ==} + /unist-util-visit-children@3.0.0: + resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==} + dependencies: + '@types/unist': 3.0.2 + dev: false + /unist-util-visit-parents@5.1.3: resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==} dependencies: @@ -6847,7 +7145,7 @@ packages: /unist-util-visit-parents@6.0.1: resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} dependencies: - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 unist-util-is: 6.0.0 /unist-util-visit@4.1.2: @@ -6906,17 +7204,10 @@ packages: /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} - /vfile-location@4.0.1: - resolution: {integrity: sha512-JDxPlTbZrZCQXogGheBHjbRWjESSPEak770XwWPfw5mTc1v1nWGLB/apzZxsx8a0SJVfF8HK8ql8RD308vXRUw==} - dependencies: - '@types/unist': 2.0.8 - vfile: 5.3.7 - dev: false - /vfile-location@5.0.2: resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==} dependencies: - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 vfile: 6.0.1 /vfile-message@3.1.4: @@ -6928,7 +7219,7 @@ packages: /vfile-message@4.0.2: resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==} dependencies: - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 unist-util-stringify-position: 4.0.0 /vfile@5.3.7: @@ -6942,12 +7233,12 @@ packages: /vfile@6.0.1: resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==} dependencies: - '@types/unist': 3.0.0 + '@types/unist': 3.0.2 unist-util-stringify-position: 4.0.0 vfile-message: 4.0.2 - /vite@5.2.2(@types/node@18.6.4)(sass@1.54.3): - resolution: {integrity: sha512-FWZbz0oSdLq5snUI0b6sULbz58iXFXdvkZfZWR/F0ZJuKTSPO7v72QPXt6KqYeMFb0yytNp6kZosxJ96Nr/wDQ==} + /vite@5.2.11(@types/node@18.6.4)(sass@1.54.3): + resolution: {integrity: sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: @@ -6982,7 +7273,7 @@ packages: optionalDependencies: fsevents: 2.3.3 - /vitefu@0.2.5(vite@5.2.2): + /vitefu@0.2.5(vite@5.2.11): resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==} peerDependencies: vite: ^3.0.0 || ^4.0.0 || ^5.0.0 @@ -6990,7 +7281,7 @@ packages: vite: optional: true dependencies: - vite: 5.2.2(@types/node@18.6.4)(sass@1.54.3) + vite: 5.2.11(@types/node@18.6.4)(sass@1.54.3) /volar-service-css@0.0.17(@volar/language-service@1.11.1): resolution: {integrity: sha512-bEDJykygMzn2+a9ud6KwZZLli9eqarxApAXZuf2CqJJh6Trw1elmbBCo9SlPfqMrIhpFnwV0Sa+Xoc9x5WPeGw==} @@ -7279,15 +7570,19 @@ packages: resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} engines: {node: '>=12.20'} - /zod-to-json-schema@3.22.4(zod@3.22.4): - resolution: {integrity: sha512-2Ed5dJ+n/O3cU383xSY28cuVi0BCQhF8nYqWU5paEpl7fVdqdAmiLdqLyfblbNdfOFwFfi/mqU4O1pwc60iBhQ==} + /zod-to-json-schema@3.23.0(zod@3.23.8): + resolution: {integrity: sha512-az0uJ243PxsRIa2x1WmNE/pnuA05gUq/JB8Lwe1EDCCL/Fz9MgjYQ0fPlyc2Tcv6aF2ZA7WM5TWaRZVEFaAIag==} peerDependencies: - zod: ^3.22.4 + zod: ^3.23.3 dependencies: - zod: 3.22.4 + zod: 3.23.8 /zod@3.22.4: resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==} + dev: false + + /zod@3.23.8: + resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==} /zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} diff --git a/src/components/starlight/MarkdownContent.astro b/src/components/starlight/MarkdownContent.astro index 848878757aa30..d1d1d0dcf7743 100644 --- a/src/components/starlight/MarkdownContent.astro +++ b/src/components/starlight/MarkdownContent.astro @@ -61,66 +61,6 @@ const { entry } = Astro.props; - - diff --git a/src/components/tabs/UIFrameworkTabs.astro b/src/components/tabs/UIFrameworkTabs.astro index 31fe3becbb199..3ec496c54f08d 100644 --- a/src/components/tabs/UIFrameworkTabs.astro +++ b/src/components/tabs/UIFrameworkTabs.astro @@ -1,9 +1,8 @@ --- -import Tabs from './Tabs.astro'; -import { TabItem } from '@astrojs/starlight/components'; +import { Tabs, TabItem } from '@astrojs/starlight/components'; --- - + { Astro.slots.has('preact') && ( diff --git a/src/components/tutorial/Box.astro b/src/components/tutorial/Box.astro index 992fc65178854..bc5961c01ad0f 100644 --- a/src/components/tutorial/Box.astro +++ b/src/components/tutorial/Box.astro @@ -33,6 +33,7 @@ const { icon } = Astro.props; border: 1px solid var(--sl-color-purple); background-color: var(--sl-color-purple-low); color: var(--sl-color-purple-high); + margin-top: 2.5rem !important; } .highlight-box.check-list { @@ -55,4 +56,27 @@ const { icon } = Astro.props; :global(ol) { padding-left: 1.5rem; } + + .highlight-box :global(details) { + --sl-details-border-color: var(--sl-color-purple); + --sl-details-border-color--hover: var(--sl-color-purple-high); + } + + @media (max-width: 50em) { + .highlight-box::before { + width: 5rem; + height: 5rem; + } + } + + + diff --git a/src/content/docs/ar/guides/integrations-guide/sitemap.mdx b/src/content/docs/ar/guides/integrations-guide/sitemap.mdx new file mode 100644 index 0000000000000..406e47073dbb9 --- /dev/null +++ b/src/content/docs/ar/guides/integrations-guide/sitemap.mdx @@ -0,0 +1,400 @@ +--- +type: integration +title: '@astrojs/sitemap' +description: تعلم كيفية استخدام @Astrojs/Sitemap في مشروع Astro الخاص بك. +githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/sitemap/' +category: other +i18nReady: true +--- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; + +هذا **[الدمج من أسترو][astro-integration]** يولد sitemap استنادًا إلى صفحاتك عند إنشاء مشروع أسترو الخاص بك. + +## لماذا أسترو sitemap + +يعد SiteMap ملف XML الذي يحدد جميع الصفحات ومقاطع الفيديو والملفات على موقعك .محركات البحث مثل Google تقرأ هذا الملف لتمحيص موقعك بشكل أكثر كفاءة. [شاهد نصيحة Google الخاصة ب Sitemap](https://developers.google.com/search/docs/advanced/sitemaps/overview) لتعلم المزيد. + +يوصى بملف Sitemap للمواقع الكبيرة متعددة الصفحات.إذا لم تستخدم خريطة Sitemap ، فستظل معظم محركات البحث قادرة على إدراج صفحات موقعك ، ولكن خريطة Sitemap هي وسيلة رائعة لضمان أن موقعك صديق لمحركات البحث قدر الإمكان. + +باستخدام أسترو Sitemap ، لا داعي للقلق بشأن إنشاء ملف XML هذا بنفسك: سوف يمحص الدمج من أسترو ل Sitemap على طرقك )(routes) المولدة بشكل ثابت وإنشاء ملف Sitemap ، بما في ذلك [الطرق الدينامية](/ar/guides/routing/#dynamic-routes) مثل `[...slug]` أو `src/pages/[lang]/[version]/info.astro` المولدة عبر `()getStaticPaths`. + + هذا الدمج من أسترو لا يمكن أن يولد بيانات Sitemap للطرق الديناميكية [SSR mode](/en/basics/rendering-modes/#on-demand-rendered). + +## تثبيت + +يتضمن أسترو أمر `Astro Add` فيوجد إمكانية .[تثبيت عمليات التكامل يدويًا](#manual-install) يمكنك ذلك من تنصيب الدمج الرسمي. إذا كنت تفضل غير ذلك + +قم بتشغيل أحد الأوامر التالية في نافذة طرفية جديدة. + + + + ```sh + npx astro add sitemap + ``` + + + ```sh + pnpm astro add sitemap + ``` + + + ```sh + yarn astro add sitemap + ``` + + + +إذا واجهت أي مشكلات ، [لا تتردد في الإبلاغ عنها على Github](https://github.com/withastro/astro/issues) وجرب خطوات التثبيت اليدوية التالية: + +### تثبيت يدوي + +أولا ، قم بتثبيت ملف `astrojs/sitemap@` الحزمة باستخدام مدير الحزمة الخاص بك. + + + + ```sh + npm install @astrojs/sitemap + ``` + + + ```sh + pnpm add @astrojs/sitemap + ``` + + + ```sh + yarn add @astrojs/sitemap + ``` + + + +ثم قم بتطبيق الدمج على `*.astro.config` ملف باستخدام : + +```js ins={2} ins="sitemap()" +import { defineConfig } from 'astro/config'; +import sitemap from '@astrojs/sitemap'; + +export default defineConfig({ + // ... + integrations: [sitemap()], +}); +``` + +## الاستخدام + +`astrojs/sitemap@` يتطلب رابط الموقع أو الإستضافة لكي يعمل. أضف رابط الموقع لخاصية `site` على ملف `*.astro.config`. يجب أن يبدأ هذا ب `http:` أو `https:`. + +```js title="astro.config.mjs" "'https://stargazers.club'" +import { defineConfig } from 'astro/config'; +import sitemap from '@astrojs/sitemap'; + +export default defineConfig({ + // ... + site: 'https://stargazers.club', + integrations: [sitemap()], +}); +``` + +لاحظ أنه على عكس خيارات التكوين الأخرى ، `site` تم تعيينه في الجذر `defineConfig` المركب ، بدلاً من داخل `()sitemap`. + +الآن ، [إبني موقعك للإنتاج](/ar/reference/cli-reference/#astro-build) عبر `astro build`. ستجد كلاهما `sitemap-index.xml` و `sitemap-0.xml` في مجلد `dist/` (أو مجلد آخر من اختيارك عبر [دليل الإخراج](/ar/reference/configuration-reference/#outdir) إذا تم تعيينه). + +:::caution +إذا نسيت إضافة `site`, ستحصل على تحذير ودود عند البناء، و ملف `sitemap-index.xml` لن يتم إنشاؤه. +::: + +بعد التحقق من بناء خرائط Sitemap ، يمكنك إضافتها إلى موقعك عبر ال `` و ملف `robots.txt`. + +```html title="src/layouts/Layout.astro" ins={2} + + + +``` + +```txt ins={5} +# public/robots.txt +User-agent: * +Allow: / + +Sitemap: https:///sitemap-index.xml +``` + +لتوليد `robots.txt` بشكل ديناميكي ، أضف ملفًا اسمه `robots.txt.ts` كالتالي: + +```ts title="src/pages/robots.txt.ts" +import type { APIRoute } from 'astro'; + +const robotsTxt = ` +User-agent: * +Allow: / + +Sitemap: ${new URL('sitemap-index.xml', import.meta.env.SITE).href} +`.trim(); + +export const GET: APIRoute = () => { + return new Response(robotsTxt, { + headers: { + 'Content-Type': 'text/plain; charset=utf-8', + }, + }); +}; + +``` + +### مثال لملفات تم إنشاؤها لموقع ويب ذو صفحتين + +```xml title="sitemap-index.xml" + + + + https://stargazers.club/sitemap-0.xml + + +``` + +```xml title="sitemap-0.xml" + + + + https://stargazers.club/ + + + https://stargazers.club/second-page/ + + +``` + +## إعدادات + +لتعيين هذا الدمج، قم بتمرير مركب في `()sitemap` عند استدعاء الدالة في `astro.config.mjs`. + +```js title="astro.config.mjs" {6-8} +import { defineConfig } from 'astro/config'; +import sitemap from '@astrojs/sitemap'; + +export default defineConfig({ + integrations: [ + sitemap({ + // configuration options + }), + ], +}); +``` + +### انتقاء + +يتم تضمين جميع الصفحات في خريطة sitemap بشكل افتراضي.عن طريق إضافة مخصص `filter` الدالة ، يمكنك تصفية الصفحات المضمّنة بواسطة عنوان URL. + +```js title="astro.config.mjs" ins={8} +import { defineConfig } from 'astro/config'; +import sitemap from '@astrojs/sitemap'; + +export default defineConfig({ + site: 'https://stargazers.club', + integrations: [ + sitemap({ + filter: (page) => page !== 'https://stargazers.club/secret-vip-lounge/', + }), + ], +}); +``` + +سيتم استدعاء الوظيفة لكل صفحة على موقعك.ال `page` معلمة الوظيفة هي عنوان URL الكامل للصفحة قيد الدراسة حاليًا ، بما في ذلك مجال "الموقع" الخاص بك.إرجاع "صحيح" لتضمين الصفحة في خريطة sitemap الخاصة بك ، و "خطأ" لتركها. + +لتصفية صفحات متعددة ، أضف وسائط مع عناوين URL المستهدفة. + +```js title="astro.config.mjs" {8-12} +import { defineConfig } from 'astro/config'; +import sitemap from '@astrojs/sitemap'; + +export default defineConfig({ + site: 'https://stargazers.club', + integrations: [ + sitemap({ + filter: (page) => + page !== 'https://stargazers.club/secret-vip-lounge-1/' && + page !== 'https://stargazers.club/secret-vip-lounge-2/' && + page !== 'https://stargazers.club/secret-vip-lounge-3/' && + page !== 'https://stargazers.club/secret-vip-lounge-4/', + }), + ], +}); +``` + +### صفحات مخصصة + +في بعض الحالات ، قد تكون الصفحة جزءًا من موقعك المنشور ولكن ليس جزءًا من مشروع أسترو الخاص بك.إذا كنت ترغب في تضمين صفحة في sitemap الخاص بك *لم يتم* إنشاؤها بواسطة أسترو ، فيمكنك استخدام هذا الخيار. + +```js title="astro.config.mjs" ins={8} +import { defineConfig } from 'astro/config'; +import sitemap from '@astrojs/sitemap'; + +export default defineConfig({ + site: 'https://stargazers.club', + integrations: [ + sitemap({ + customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2'], + }), + ], +}); +``` + +### حدود البيانات + + العدد الأقصى للبيانات لكل ملف sitemap.القيمة الافتراضية هي 45000. يتم إنشاء فهرس Sitemap و Sitemap متعددة إذا كان لديك المزيد من البيانات.شاهد [شرح تقسيم خريطة Sitemap كبيرة](https://developers.google.com/search/docs/advanced/sitemaps/large-sitemaps). + +```js title="astro.config.mjs" ins={8} +import { defineConfig } from 'astro/config'; +import sitemap from '@astrojs/sitemap'; + +export default defineConfig({ + site: 'https://stargazers.club', + integrations: [ + sitemap({ + entryLimit: 10000, + }), + ], +}); +``` + +### تغيير التردد، آخر تحديث، والأولوية + +هذه الخيارات تتوافق مع العلامات ``، `` و `` في [خصوصيات sitemap xml.](https://www.sitemaps.org/protocol.html) + +لاحظ أن `changefreq` و `priority` يتم تجاهلها من طرف Google. + +:::note + بسبب قيود أسترو [API Integration](/ar/reference/integrations-reference/)، لا يمكن لهذا الدمج تحليل رمز مصدر صفحة معينة. يمكن لخيار التغيير هذا تعيين `changefreq` و` lastmod `و` priority `على أساس *مستوى الموقع* ؛راجع الخيار التالي *التسلسل* لكيفية تعيين هذه القيم على أساس صفحة. +::: + +```js title="astro.config.mjs" ins={8-10} +import { defineConfig } from 'astro/config'; +import sitemap from '@astrojs/sitemap'; + +export default defineConfig({ + site: 'https://stargazers.club', + integrations: [ + sitemap({ + changefreq: 'weekly', + priority: 0.7, + lastmod: new Date('2022-02-24'), + }), + ], +}); +``` + +### التسلسل + +هي دالة يتم استدعاؤها لكل إدخال في خريطة sitemap قبل الكتابة إلى قرص. يمكن أن تكون هذه الوظيفة متزامنة. + +يستقبل كمعلمة المركب `SitemapItem` الذي يمكن أن تكون له الخصائص التالية: + +* `url` (url الصفحة المطلقة). هذه هي الخاصية الوحيدة المضمونة `SitemapItem` في. +* `changefreq` +* `lastmod` (ISO تاريخ التنسيق،`String` النوع) +* `priority` +* `links`. + +هذه الخاصية `links` تحتوي على `LinkItem` قائمة الصفحات البديلة بما في ذلك الصفحة الأم. + +ال `LinkItem` يحتوي على حقلان: `url` (العنوان URL المؤهل بالكامل لإصدار هذه الصفحة للغة المحددة) و `lang` (رمز اللغة المدعوم الذي يستهدف هذا الإصدار من الصفحة). + +الدالة `التسلسل` يجب أن ترجع `SitemapItem`, غيرت أم لا. + +يوضح المثال أدناه القدرة على إضافة خصائص محددة على Sitemap بشكل فردي. + +```js title="astro.config.mjs" ins={8-18} +import { defineConfig } from 'astro/config'; +import sitemap from '@astrojs/sitemap'; + +export default defineConfig({ + site: 'https://stargazers.club', + integrations: [ + sitemap({ + serialize(item) { + if (/exclude-from-sitemap/.test(item.url)) { + return undefined; + } + if (/your-special-page/.test(item.url)) { + item.changefreq = 'daily'; + item.lastmod = new Date(); + item.priority = 0.9; + } + return item; + }, + }), + ], +}); +``` + +### عالمية اللغة + +لإنشاء sitemap بلغة محلية ،قم بتمرير مركب إلى خيار `i18n` . + +هذا المركب له خصائص مطلوبة: + +* `String`: `defaultLocale`. يجب أن توجد قيمتها كواحدة من مفاتيح `locales`. +* `Record`: `locales`, أزواج - key/value . يتم استخدام المفتاح للبحث عن جزء محلي في مسار الصفحة.القيمة هي سمة الغة ، فقط الأبجدية والواصلة الإنجليزية هي المسموح بها. + +[اقرأ المزيد عن سمات اللغة](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). + +[اقرأ المزيد عن محلية اللغة](https://developers.google.com/search/docs/advanced/crawling/localized-versions#all-method-guidelines). + +```js title="astro.config.mjs" ins={8-15} +import { defineConfig } from 'astro/config'; +import sitemap from '@astrojs/sitemap'; + +export default defineConfig({ + site: 'https://stargazers.club', + integrations: [ + sitemap({ + i18n: { + defaultLocale: 'en', // All urls that don't contain `es` or `fr` after `https://stargazers.club/` will be treated as default locale, i.e. `en` + locales: { + en: 'en-US', // The `defaultLocale` value must present in `locales` keys + es: 'es-ES', + fr: 'fr-CA', + }, + }, + }), + ], +}); +``` + +ال sitemap الناتج يبدو مثل هذا: + +```xml title="sitemap-0.xml" +... + + https://stargazers.club/ + + + + + + https://stargazers.club/es/ + + + + + + https://stargazers.club/fr/ + + + + + + https://stargazers.club/es/second-page/ + + + + +... +``` + +## أمثلة + +* يستخدم موقع أسترو الرسمي Astro Sitemap لإنشاء [خريطة sitemap](https://astro.build/sitemap-index.xml). +* [تصفح المشاريع التي تستخدم Astro sitemap على github](https://github.com/search?q=%22%40astrojs%2Fsitemap%22+path%3Apackage.json\&type=Code) لمزيد من الأمثلة! + +[astro-integration]: /ar/guides/integrations-guide/ diff --git a/src/content/docs/de/guides/typescript.mdx b/src/content/docs/de/guides/typescript.mdx index 0ebbd7973e183..32c8c4616a960 100644 --- a/src/content/docs/de/guides/typescript.mdx +++ b/src/content/docs/de/guides/typescript.mdx @@ -5,8 +5,7 @@ i18nReady: true --- import Since from '~/components/Since.astro' import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import Tabs from '~/components/tabs/Tabs.astro' -import { TabItem } from '@astrojs/starlight/components' +import { Tabs, TabItem } from '@astrojs/starlight/components' Astro wird mit integrierter Unterstützung für [TypeScript](https://www.typescriptlang.org/) ausgeliefert. Du kannst `.ts`- und `.tsx`-Dateien in dein Astro-Projekt importieren, TypeScript-Code direkt in deiner [Astro-Komponente](/de/basics/astro-components/#das-komponentenskript) schreiben und sogar eine [`astro.config.ts`](/de/guides/configuring-astro/#die-astro-konfigurationsdatei)-Datei verwenden, wenn du möchtest. @@ -88,7 +87,7 @@ Auf diese Weise vermeidest du Fälle, in denen der Astro-Bundler versucht, deine Du kannst TypeScript so konfigurieren, dass Typ-Importe in deiner `.tsconfig`-Datei erzwungen werden. - + Setze [`importsNotUsedAsValues`](https://www.typescriptlang.org/tsconfig#importsNotUsedAsValues) auf `"error"`. TypeScript prüft dann deine Importe und sagt dir, wann `import type` verwendet werden sollte. Diese Einstellung ist standardmäßig in unseren Vorlagen `strict` und `strictest` enthalten. diff --git a/src/content/docs/en/community-resources/content.mdx b/src/content/docs/en/community-resources/content.mdx index cebff964b91e2..bf747ba32a57d 100644 --- a/src/content/docs/en/community-resources/content.mdx +++ b/src/content/docs/en/community-resources/content.mdx @@ -26,6 +26,7 @@ Check out the following courses and tutorials to learn more about Astro. - [Understanding Astro (ebook)](https://www.ohansemmanuel.com/books/understanding-astro) by Ohans Emmanuel - [The Valley of Code - Astro](https://thevalleyofcode.com/astro) by Flavio Copes - [Learn Astro 3 from Scratch: Course for Beginners + Astro Application (SPANISH)](https://www.youtube.com/watch?v=RB5tR_nqUEw) by @midudev + - [Introduction to the Astro web framework](https://www.udemy.com/course/introduction-to-the-astro-web-framework/) (paid) by Tech Razor on Udemy ### Video Tutorials - [Astro Quick Start Course: Build an SSR Blog](https://www.youtube.com/watch?v=XoIHKO6AkoM) @@ -58,6 +59,7 @@ Have you written a recipe for Astro? [Edit this page](https://github.com/withast - [Use a dynamic filename when importing images](https://vaihe.com/blog/astro/astro-dynamic-image-prop/) - [Add an RSS feed to Astro using Storyblok's stories](https://straffesites.com/en/blog/rss-feed-astro-storyblok) - [How to Send Any Data to Your RSS Feed? A Guide with Astro + RSS](https://aritraroy.live/tutorial/blogs/2023/how-to-send-any-data-to-rss-feed/) +- [Adding RSS Feed Content and Fixing Markdown Image Paths in Astro](https://billyle.dev/posts/adding-rss-feed-content-and-fixing-markdown-image-paths-in-astro) ### Images - [Add blog post images to your Astro RSS Feed](https://webreaper.dev/posts/astro-rss-feed-blog-post-images/) - [Generate Open Graph images for an Astro blog](https://techsquidtv.com/blog/generating-open-graph-images-for-astro/) diff --git a/src/content/docs/en/community-resources/talks.mdx b/src/content/docs/en/community-resources/talks.mdx index 5f18b421bbb81..7dfba3475d4cc 100644 --- a/src/content/docs/en/community-resources/talks.mdx +++ b/src/content/docs/en/community-resources/talks.mdx @@ -32,6 +32,7 @@ Subscribe to [the Astro Community Events Google Calendar](https://calendar.googl - [Bringing React into your content sites with Astro](https://www.youtube.com/watch?v=Fouws8iKPKQ) by Matthew Phillips at Future Frontend 2023 - [All Things Astro](https://www.youtube.com/watch?v=WKXHFIulZ9g) by Elian Van Cutsem, React Day Berlin 2023 - [You Don't Know How to SSR](https://portal.gitnation.org/contents/you-dont-know-how-to-ssr) by Emanuele Stoppa, DevOps.js Conf 2024 +- [All Things Astro](https://www.youtube.com/watch?v=sALS6QrX9uA) by Elian Van Cutsem, DevWorld Conference 2024 ## Interviews and podcasts diff --git a/src/content/docs/en/guides/internationalization.mdx b/src/content/docs/en/guides/internationalization.mdx index fdd11a03d84a0..b543e2f53d673 100644 --- a/src/content/docs/en/guides/internationalization.mdx +++ b/src/content/docs/en/guides/internationalization.mdx @@ -178,7 +178,6 @@ Setting `prefixDefaultLocale: true` will also automatically set `redirectToDefau You can opt out of this behavior by [setting `redirectToDefaultLocale: false`](/en/reference/configuration-reference/#i18nroutingredirecttodefaultlocale). This allows you to have a site home page that exists outside of your configured locale folder structure. - ### `manual`

@@ -246,48 +245,48 @@ export const onRequest = sequence( ) ``` -## Custom locale paths +## `domains` -In addition to defining your site's supported `locales` as strings (e.g. "en", "pt-br"), Astro also allows you to map an arbitrary number of [browser-recognized language `codes`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language#syntax) to a custom URL `path`. While locales can be strings of any format as long as they correspond to your project folder structure, `codes` must follow the browser's accepted syntax. +

-Pass an object to the `locales` array with a `path` key to define a custom URL prefix, and `codes` to indicate the languages mapped to this URL. In this case, your `/[locale]/` folder name must match exactly the value of the `path` and your URLs will be generated using the `path` value. +This routing option allows you to customize your domains on a per-language basis for `server` rendered projects using the [`@astrojs/node`](/en/guides/integrations-guide/node/) or [`@astrojs/vercel`](/en/guides/integrations-guide/vercel/) adapter with a `site` configured. -This is useful if you support multiple variations of a language (e.g. `"fr"`, `"fr-BR"`, and `"fr-CA"`) and you want to have all these variations mapped under the same URL `/fr/`, or even customize it entirely (e.g. `/french/`): +Add `i18n.domains` to map any of your supported `locales` to custom URLs: -```js title="astro.config.mjs" del={5} ins={6-9} +```js title="astro.config.mjs" {3-7} ins={14-21} import { defineConfig } from "astro/config" export default defineConfig({ + site: "https://example.com", + output: "server", // required, with no prerendered pages + adapter: node({ + mode: 'standalone', + }), i18n: { defaultLocale: "en", - locales: ["es", "en", "fr"], - locales: ["es", "en", { - path: "french", // no slashes included - codes: ["fr", "fr-BR", "fr-CA"] - }], + locales: ["es", "en", "fr", "ja"], routing: { - prefixDefaultLocale: true + prefixDefaultLocale: false + }, + domains: { + fr: "https://fr.example.com", + es: "https://example.es" } } }) ``` -When using functions from the [`astro:i18n` virtual module](/en/reference/api-reference/#internationalization-astroi18n) to compute valid URL paths based on your configuration (e.g. `getRelativeLocaleUrl()`), [use the `path` as the value for `locale`](/en/reference/api-reference/#getlocalebypath). - -## Browser language detection - -Astro’s i18n routing allows you to access two properties for browser language detection in pages rendered on demand: `Astro.preferredLocale` and `Astro.preferredLocaleList`. All pages, including static prerendered pages, have access to `Astro.currentLocale`. - -These combine the browser's `Accept-Language` header, and your `locales` (strings or `codes`) to automatically respect your visitor's preferred languages. +All non-mapped `locales` will follow your `prefixDefaultLocales` configuration. However, even if this value is `false`, page files for your `defaultLocale` must also exist within a localized folder. For the configuration above, an `/en/` folder is required. -- [`Astro.preferredLocale`](/en/reference/api-reference/#astropreferredlocale): Astro can compute a **preferred locale** for your visitor if their browser's preferred locale is included in your `locales` array. This value is undefined if no such match exists. +With the above configuration: -- [`Astro.preferredLocaleList`](/en/reference/api-reference/#astropreferredlocalelist): An array of all locales that are both requested by the browser and supported by your website. This produces a list of all compatible languages between your site and your visitor. The value is `[]` if none of the browser's requested languages are found in your `locales` array. If the browser does not specify any preferred languages, then this value will be [`i18n.locales`]. - -- [`Astro.currentLocale`](/en/reference/api-reference/#astrocurrentlocale): The locale computed from the current URL, using the syntax specified in your `locales` configuration. If the URL does not contain a `/[locale]/` prefix, then the value will default to [`i18n.defaultLocale`](/en/reference/configuration-reference/#i18ndefaultlocale). +- The file `/fr/about.astro` will create the URL `https://fr.example.com/about`. +- The file `/es/about.astro` will create the URL `https://example.es/about`. +- The file `/ja/about.astro` will create the URL `https://example.com/ja/about`. +- The file `/en/about.astro` will create the URL `https://example.com/about`. -In order to successfully match your visitors' preferences, provide your `codes` using the same pattern [used by the browser](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language#syntax). +The above URLs will also be returned by the `getAbsoluteLocaleUrl()` and `getAbsoluteLocaleUrlList()` functions. -## Fallback +## `fallback` Astro's i18n routing allows you to configure a **fallback routing strategy**. When a page in one language doesn't exist (e.g. a page that is not yet translated), instead of displaying a 404 page, you can redirect a user from one locale to another on a per-language basis. This is useful when you do not yet have a page for every route, but you want to still provide some content to your visitors. @@ -308,49 +307,32 @@ export default defineConfig({ Astro will ensure that a page is built in `src/pages/fr` for every page that exists in `src/pages/es/`. If the page does not already exist, then a page with a redirect to the corresponding `es` route will be created. -## `domains` (experimental) +## Custom locale paths -

+In addition to defining your site's supported `locales` as strings (e.g. "en", "pt-br"), Astro also allows you to map an arbitrary number of [browser-recognized language `codes`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language#syntax) to a custom URL `path`. While locales can be strings of any format as long as they correspond to your project folder structure, `codes` must follow the browser's accepted syntax. -This routing option allows you to customize your domains on a per-language basis for `server` rendered projects using the [`@astrojs/node`](/en/guides/integrations-guide/node/) or [`@astrojs/vercel`](/en/guides/integrations-guide/vercel/) adapter with a `site` configured. +Pass an object to the `locales` array with a `path` key to define a custom URL prefix, and `codes` to indicate the languages mapped to this URL. In this case, your `/[locale]/` folder name must match exactly the value of the `path` and your URLs will be generated using the `path` value. -To enable this in your project, [configure i18n routing](#configure-i18n-routing) with your preferences if you have not already done so. Then, set the `experimental.i18nDomains` flag to `true` and add `i18n.domains` to map any of your supported `locales` to custom URLs: +This is useful if you support multiple variations of a language (e.g. `"fr"`, `"fr-BR"`, and `"fr-CA"`) and you want to have all these variations mapped under the same URL `/fr/`, or even customize it entirely (e.g. `/french/`): -```js title="astro.config.mjs" {3-7} ins={14-21} +```js title="astro.config.mjs" del={5} ins={6-9} import { defineConfig } from "astro/config" export default defineConfig({ - site: "https://example.com", - output: "server", // required, with no prerendered pages - adapter: node({ - mode: 'standalone', - }), i18n: { defaultLocale: "en", - locales: ["es", "en", "fr", "ja"], + locales: ["es", "en", "fr"], + locales: ["es", "en", { + path: "french", // no slashes included + codes: ["fr", "fr-BR", "fr-CA"] + }], routing: { - prefixDefaultLocale: false - }, - domains: { - fr: "https://fr.example.com", - es: "https://example.es" + prefixDefaultLocale: true } - }, - experimental: { - i18nDomains: true } }) ``` -All non-mapped `locales` will follow your `prefixDefaultLocales` configuration. However, even if this value is `false`, page files for your `defaultLocale` must also exist within a localized folder. For the configuration above, an `/en/` folder is required. - -With the above configuration: - -- The file `/fr/about.astro` will create the URL `https://fr.example.com/about`. -- The file `/es/about.astro` will create the URL `https://example.es/about`. -- The file `/ja/about.astro` will create the URL `https://example.com/ja/about`. -- The file `/en/about.astro` will create the URL `https://example.com/about`. - -The above URLs will also be returned by the `getAbsoluteLocaleUrl()` and `getAbsoluteLocaleUrlList()` functions. +When using functions from the [`astro:i18n` virtual module](/en/reference/api-reference/#internationalization-astroi18n) to compute valid URL paths based on your configuration (e.g. `getRelativeLocaleUrl()`), [use the `path` as the value for `locale`](/en/reference/api-reference/#getlocalebypath). #### Limitations @@ -366,5 +348,19 @@ Astro relies on the following headers in order to support the feature: Make sure that your server proxy/hosting platform is able to provide this information. Failing to retrieve these headers will result in a 404 (status code) page. +## Browser language detection + +Astro’s i18n routing allows you to access two properties for browser language detection in pages rendered on demand: `Astro.preferredLocale` and `Astro.preferredLocaleList`. All pages, including static prerendered pages, have access to `Astro.currentLocale`. + +These combine the browser's `Accept-Language` header, and your `locales` (strings or `codes`) to automatically respect your visitor's preferred languages. + +- [`Astro.preferredLocale`](/en/reference/api-reference/#astropreferredlocale): Astro can compute a **preferred locale** for your visitor if their browser's preferred locale is included in your `locales` array. This value is undefined if no such match exists. + +- [`Astro.preferredLocaleList`](/en/reference/api-reference/#astropreferredlocalelist): An array of all locales that are both requested by the browser and supported by your website. This produces a list of all compatible languages between your site and your visitor. The value is `[]` if none of the browser's requested languages are found in your `locales` array. If the browser does not specify any preferred languages, then this value will be [`i18n.locales`]. + +- [`Astro.currentLocale`](/en/reference/api-reference/#astrocurrentlocale): The locale computed from the current URL, using the syntax specified in your `locales` configuration. If the URL does not contain a `/[locale]/` prefix, then the value will default to [`i18n.defaultLocale`](/en/reference/configuration-reference/#i18ndefaultlocale). + +In order to successfully match your visitors' preferences, provide your `codes` using the same pattern [used by the browser](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language#syntax). + [`site`]: /en/reference/configuration-reference/#site [`i18n.locales`]: /en/reference/configuration-reference/#i18nlocales diff --git a/src/content/docs/en/guides/testing.mdx b/src/content/docs/en/guides/testing.mdx index 5d99c68c5102c..86801e6a956d3 100644 --- a/src/content/docs/en/guides/testing.mdx +++ b/src/content/docs/en/guides/testing.mdx @@ -5,12 +5,15 @@ i18nReady: true --- import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import Since from '~/components/Since.astro' Testing helps you write and maintain working Astro code. Astro supports many popular tools for unit tests, component tests, and end-to-end tests including Jest, Mocha, Jasmine, [Cypress](https://cypress.io) and [Playwright](https://playwright.dev). You can even install framework-specific testing libraries such as React Testing Library to test your UI framework components. Testing frameworks allow you to state **assertions** or **expectations** about how your code should behave in specific situations, then compare these to the actual behavior of your current code. -## Vitest +## Unit and integration tests + +### Vitest A Vite-native unit test framework with ESM, TypeScript and JSX support powered by esbuild. @@ -43,11 +46,156 @@ export default getViteConfig( See the [Astro + Vitest starter template](https://github.com/withastro/astro/tree/latest/examples/with-vitest) on GitHub. -## Cypress +#### Vitest and Container API + +

+ +You can natively test Astro components using the [container API](/en/reference/container-reference/). First, setup [`vitest` as explained above](#vitest), then create a `.test.js` file to test your component: + +```js title="example.test.js" +import { experimental_AstroContainer as AstroContainer } from 'astro/container'; +import { expect, test } from 'vitest'; +import Card from '../src/components/Card.astro'; + +test('Card with slots', async () => { + const container = await AstroContainer.create(); + const result = await container.renderToString(Card, { + slots: { + default: 'Card content', + }, + }); + + expect(result).toContain('This is a card'); + expect(result).toContain('Card content'); +}); +``` + +## End-to-end tests + +### Playwright + +Playwright is an end-to-end testing framework for modern web apps. Use the Playwright API in JavaScript or TypeScript to test your Astro code on all modern rendering engines including Chromium, WebKit, and Firefox. + +#### Installation + +You can get started and run your tests using the [VS Code Extension](https://playwright.dev/docs/getting-started-vscode). + +Alternatively, you can install Playwright within your Astro project using the package manager of your choice. Follow the CLI steps to choose JavaScript/TypeScript, name your test folder, and add an optional GitHub Actions workflow. + + + + ```shell + npm init playwright@latest + ``` + + + ```shell + pnpm dlx create-playwright + ``` + + + ```shell + yarn create playwright + ``` + + + +#### Create your first Playwright test + + +1. Choose a page to test. This example will test the example page `index.astro` below. + + ```html title="src/pages/index.astro" + --- + --- + + + Astro is awesome! + + + + + ``` + +2. Create a new folder and add the following test file in `src/test`. Copy and paste the following test into the file to verify that the page meta information is correct. Update the value of the page `` to match the page you are testing. + + ```jsx title="src/test/index.spec.ts" "Astro is awesome!" + import { test, expect } from '@playwright/test'; + + test('meta is correct', async ({ page }) => { + await page.goto("http://localhost:4321/"); + + await expect(page).toHaveTitle('Astro is awesome!'); + }); + ``` + + :::tip[Set a `baseUrl`] + You can set [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) in the `playwright.config.ts` configuration file to use `page.goto("/")` instead of `page.goto("http://localhost:4321/")` for a more convenient URL. + ::: +</Steps> + +#### Running your Playwright tests + +You can run a single test or several tests at once, testing one or multiple browsers. By default, your test results will be shown in the terminal. Optionally, you can open the HTML Test Reporter to show a full report and filter test results. + +<Steps> +1. To run our test from the previous example using the command line, use the `test` command. Optionally, include the file name to run just the single test: + + ```sh + npx playwright test index.spec.ts + ``` + +2. To see the full HTML Test Report, open it using the following command: + + ```sh + npx playwright show-report + ``` +</Steps> + +:::tip +Run your tests against your production code to more closely resemble your live, deployed site. +::: + +##### Advanced: Launching a development web server during the tests + +You can also have Playwright start your server when you run your testing script by using the [`webServer`](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests) option in the Playwright configuration file. + +Here is an example of the configuration and commands required when using npm: + +<Steps> +1. Add a test script to your `package.json` file in the project root, such as `"test:e2e": "playwright test"`. + +2. In `playwright.config.ts`, add the `webServer` object and update the command value to `npm run preview`. + + ```js title="playwright.config.ts" ins={4-9} "npm run preview" + import { defineConfig } from '@playwright/test'; + + export default defineConfig({ + webServer: { + command: 'npm run preview', + url: 'http://localhost:4321/', + timeout: 120 * 1000, + reuseExistingServer: !process.env.CI, + }, + use: { + baseURL: 'http://localhost:4321/', + }, + }); + ``` + +3. Run `npm run build`, then run `npm run test:e2e` to run the Playwright tests. +</Steps> + +More information about Playwright can be found in the links below: + +- [Getting started with Playwright](https://playwright.dev/docs/intro) +- [Use a development server](https://playwright.dev/docs/test-webserver#configuring-a-web-server) + +### Cypress Cypress is a front-end testing tool built for the modern web. Cypress enables you to write end-to-end tests for your Astro site. -### Installation +#### Installation You can install Cypress using the package manager of your choice. @@ -71,7 +219,7 @@ You can install Cypress using the package manager of your choice. </Fragment> </PackageManagerTabs> -### Configuration +#### Configuration In the root of your project, create a `cypress.config.js` file with the following content: @@ -85,7 +233,7 @@ export default defineConfig({ }) ``` -### Create your first Cypress test +#### Create your first Cypress test <Steps> 1. Choose a page to test. This example will test the example page `index.astro` below. @@ -120,7 +268,7 @@ export default defineConfig({ ::: </Steps> -### Running your Cypress tests +#### Running your Cypress tests Cypress can be run from the command line or from the Cypress App. The App provides a visual interface for running and debugging your tests. @@ -163,18 +311,18 @@ To check that your test really does work, you can change the following line in t Then run the test again. You should see a red "x" in the output confirming that your test failed. ::: -### Next steps +#### Next steps More information about Cypress can be found in the links below: - [Introduction to Cypress](https://docs.cypress.io/guides/basics/introduction-to-cypress) - [Testing Your App](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app) -## NightwatchJS +### NightwatchJS Nightwatch.js is a test automation framework with a powerful set of tools to write, run, and debug your tests across the web with built-in support for all major browsers and their mobile equivalents, as well as native mobile applications. -### Installation +#### Installation You can install NightwatchJS within your Astro project using the package manager of your choice. Follow the CLI steps to choose JavaScript/TypeScript, name your test folder, and select whether or not to include component testing and testing on mobile browsers. @@ -196,7 +344,7 @@ You can install NightwatchJS within your Astro project using the package manager </Fragment> </PackageManagerTabs> -### Create your first Nightwatch test +#### Create your first Nightwatch test <Steps> 1. Choose a page to test. This example will test the example page `index.astro` below. @@ -232,7 +380,7 @@ You can install NightwatchJS within your Astro project using the package manager ::: </Steps> -### Running your NightwatchJS tests +#### Running your NightwatchJS tests You can run a single test or several tests at once, testing one or multiple browsers. By default, your test results will be shown in the terminal. Optionally, you can open the HTML Test Reporter to show a full report and filter test results. @@ -264,122 +412,3 @@ More information about NightwatchJS can be found in the links below: - [Intro to Nightwatch](https://nightwatchjs.org/guide/overview/what-is-nightwatch.html) - [Testing with Nightwatch](https://nightwatchjs.org/guide/writing-tests/introduction.html) - -## Playwright - -Playwright is an end-to-end testing framework for modern web apps. Use the Playwright API in JavaScript or TypeScript to test your Astro code on all modern rendering engines including Chromium, WebKit, and Firefox. - -### Installation - -You can get started and run your tests using the [VS Code Extension](https://playwright.dev/docs/getting-started-vscode). - -Alternatively, you can install Playwright within your Astro project using the package manager of your choice. Follow the CLI steps to choose JavaScript/TypeScript, name your test folder, and add an optional GitHub Actions workflow. - -<PackageManagerTabs> - <Fragment slot="npm"> - ```shell - npm init playwright@latest - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - pnpm dlx create-playwright - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - yarn create playwright - ``` - </Fragment> -</PackageManagerTabs> - -### Create your first Playwright test - -<Steps> -1. Choose a page to test. This example will test the example page `index.astro` below. - - ```html title="src/pages/index.astro" - --- - --- - <html lang="en"> - <head> - <title>Astro is awesome! - - - - - ``` - -2. Create a new folder and add the following test file in `src/test`. Copy and paste the following test into the file to verify that the page meta information is correct. Update the value of the page `` to match the page you are testing. - - ```jsx title="src/test/index.spec.ts" "Astro is awesome!" - import { test, expect } from '@playwright/test'; - - test('meta is correct', async ({ page }) => { - await page.goto("http://localhost:4321/"); - - await expect(page).toHaveTitle('Astro is awesome!'); - }); - ``` - - :::tip[Set a `baseUrl`] - You can set [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url) in the `playwright.config.ts` configuration file to use `page.goto("/")` instead of `page.goto("http://localhost:4321/")` for a more convenient URL. - ::: -</Steps> - -### Running your Playwright tests - -You can run a single test or several tests at once, testing one or multiple browsers. By default, your test results will be shown in the terminal. Optionally, you can open the HTML Test Reporter to show a full report and filter test results. - -<Steps> -1. To run our test from the previous example using the command line, use the `test` command. Optionally, include the file name to run just the single test: - - ```sh - npx playwright test index.spec.ts - ``` - -2. To see the full HTML Test Report, open it using the following command: - - ```sh - npx playwright show-report - ``` -</Steps> - -:::tip -Run your tests against your production code to more closely resemble your live, deployed site. -::: - -#### Advanced: Launching a development web server during the tests - -You can also have Playwright start your server when you run your testing script by using the [`webServer`](https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests) option in the Playwright configuration file. - -Here is an example of the configuration and commands required when using npm: - -<Steps> -1. Add a test script to your `package.json` file in the project root, such as `"test:e2e": "playwright test"`. - -2. In `playwright.config.ts`, add the `webServer` object and update the command value to `npm run preview`. - - ```js title="playwright.config.ts" ins={4-9} "npm run preview" - import { defineConfig } from '@playwright/test'; - - export default defineConfig({ - webServer: { - command: 'npm run preview', - url: 'http://localhost:4321/', - timeout: 120 * 1000, - reuseExistingServer: !process.env.CI, - }, - use: { - baseURL: 'http://localhost:4321/', - }, - }); - ``` - -3. Run `npm run build`, then run `npm run test:e2e` to run the Playwright tests. -</Steps> - -More information about Playwright can be found in the links below: - -- [Getting started with Playwright](https://playwright.dev/docs/intro) -- [Use a development server](https://playwright.dev/docs/test-webserver#configuring-a-web-server) diff --git a/src/content/docs/en/reference/configuration-reference.mdx b/src/content/docs/en/reference/configuration-reference.mdx index 1fc536998d317..c970ef5dfae02 100644 --- a/src/content/docs/en/reference/configuration-reference.mdx +++ b/src/content/docs/en/reference/configuration-reference.mdx @@ -354,6 +354,45 @@ Using `'class'` is helpful when you want to ensure that element selectors within Using `'where'` gives you more control over specificity, but requires that you use higher-specificity selectors, layers, and other tools to control which selectors are applied. Using `'attribute'` is useful when you are manipulating the `class` attribute of elements and need to avoid conflicts between your own styling logic and Astro's application of styles. +### security + +<p> + +**Type:** `boolean`<br /> +**Default:** `{}`<br /> +<Since v="4.9.0" /> +</p> + +Enables security measures for an Astro website. + +These features only exist for pages rendered on demand (SSR) using `server` mode or pages that opt out of prerendering in `hybrid` mode. + +```js +// astro.config.mjs +export default defineConfig({ + output: "server", + security: { + checkOrigin: true + } +}) +``` + +#### security.checkOrigin + +<p> + +**Type:** `boolean`<br /> +**Default:** 'false'<br /> +<Since v="4.9.0" /> +</p> + +When enabled, performs a check that the "origin" header, automatically passed by all modern browsers, matches the URL sent by each `Request`. This is used to provide Cross-Site Request Forgery (CSRF) protection. + +The "origin" check is executed only for pages rendered on demand, and only for the requests `POST`, `PATCH`, `DELETE` and `PUT` with +one of the following `content-type` headers: `'application/x-www-form-urlencoded'`, `'multipart/form-data'`, `'text/plain'`. + +If the "origin" header doesn't match the `pathname` of the request, Astro will return a 403 status code and will not render the page. + ### vite <p> @@ -1438,75 +1477,6 @@ With `experimental.globalRoutingPriority` enabled (instead of Astro 4.0 default In the event of route collisions, where two routes of equal route priority attempt to build the same URL, Astro will log a warning identifying the conflicting routes. -### experimental.i18nDomains - -<p> - -**Type:** `boolean`<br /> -**Default:** `false`<br /> -<Since v="4.3.0" /> -</p> - -Enables domain support for the [experimental `domains` routing strategy](/en/guides/internationalization/#domains-experimental) which allows you to configure the URL pattern of one or more supported languages to use a custom domain (or sub-domain). - -When a locale is mapped to a domain, a `/[locale]/` path prefix will not be used. However, localized folders within `src/pages/` are still required, including for your configured `defaultLocale`. - -Any other locale not configured will default to a localized path-based URL according to your `prefixDefaultLocale` strategy (e.g. `https://example.com/[locale]/blog`). - -```js -//astro.config.mjs -export default defineConfig({ - site: "https://example.com", - output: "server", // required, with no prerendered pages - adapter: node({ - mode: 'standalone', - }), - i18n: { - defaultLocale: "en", - locales: ["en", "fr", "pt-br", "es"], - prefixDefaultLocale: false, - domains: { - fr: "https://fr.example.com", - es: "https://example.es", - }, - }, - experimental: { - i18nDomains: true, - }, -}); -``` - -Both page routes built and URLs returned by the `astro:i18n` helper functions [`getAbsoluteLocaleUrl()`](/en/reference/api-reference/#getabsolutelocaleurl) and [`getAbsoluteLocaleUrlList()`](/en/reference/api-reference/#getabsolutelocaleurllist) will use the options set in `i18n.domains`. - -See the [Internationalization Guide](/en/guides/internationalization/#domains-experimental) for more details, including the limitations of this experimental feature. - -### experimental.security - -<p> - -**Type:** `boolean`<br /> -**Default:** `false`<br /> -<Since v="4.6.0" /> -</p> - -Enables CSRF protection for Astro websites. - -The CSRF protection works only for pages rendered on demand (SSR) using `server` or `hybrid` mode. The pages must opt out of prerendering in `hybrid` mode. - -```js -// astro.config.mjs -export default defineConfig({ - output: "server", - experimental: { - security: { - csrfProtection: { - origin: true - } - } - } -}) -``` - ### experimental.rewriting <p> diff --git a/src/content/docs/en/reference/container-reference.mdx b/src/content/docs/en/reference/container-reference.mdx new file mode 100644 index 0000000000000..b675ed2e28496 --- /dev/null +++ b/src/content/docs/en/reference/container-reference.mdx @@ -0,0 +1,295 @@ +--- +title: Astro Container API (experimental) +i18nReady: false +--- +import Since from '~/components/Since.astro' + +<p><Since v="4.9.0" /></p> + +The Container API allows you to render Astro components in isolation. + +This experimental server-side API unlocks a variety of potential future uses, but is currently scoped to allow [testing of `.astro` component output](/en/guides/testing/#vitest-and-container-api). This API allows you to create a new container, and render an Astro component returning a string or a `Response`. + +This API is experimental and subject to breaking changes, even in [minor or patch releases](/en/upgrade-astro/#semantic-versioning). Please consult [the Astro CHANGELOG](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) for changes as they occur. This page will always be updated with the most current information for the latest version of Astro. + +## `create()` + +Creates a new instance of the container. + +```js +import { experimental_AstroContainer } from "astro/container"; + +const container = await experimental_AstroContainer.create(); +``` + +It accepts an object with the following options: + + +```ts +export type AstroContainerOptions = { + streaming?: boolean; + renderers?: AstroRenderer[]; +}; +``` + +#### `streaming` option + +**Type:** `boolean` + +Enables rendering components using [HTML streaming](/en/guides/server-side-rendering/#html-streaming). + +#### `renderers` option + +**Type:**: `AstroRenderer[]`; + +A list of client renderers required by the component. Use this if your `.astro` component renders any [UI framework components](/en/guides/framework-components/) using an official Astro integration (e.g. React, Vue, etc.). For each framework rendered, you must provide an object stating the integration package `name`, as well as both its `client` and `server` rendering script + +The following example provides the necessary object to render an Astro component that renders a React component: + +```js +const container = await experimental_AstroContainer.create({ + renderers: [ + { + name: "@astrojs/react", + client: "@astrojs/react/client.js", + server: "@astrojs/react/server.js" + } + ] +}) +const result = await container.renderToString(ReactWrapper); +``` + +## `renderToString()` + +This function renders a specified component inside a container. It takes an Astro component as an argument and it returns a string that represents the HTML/content rendered by the Astro component. + +```js +import { experimental_AstroContainer } from "astro/container"; +import Card from "../src/components/Card.astro"; + +const container = await experimental_AstroContainer.create(); +const result = await container.renderToString(Card); +``` + +Under the hood, this function calls [`renderToResponse`](#rendertoresponse) and calls `Response.text()`. + +It also accepts an object as a second argument that can contain a [number of options](#rendering-options). + +## `renderToResponse()` + +It renders a component, and it returns a `Response` object. + +```js +import { experimental_AstroContainer } from "astro/container"; +import Card from "../src/components/Card.astro"; + +const container = await experimental_AstroContainer.create(); +const result = await container.renderToResponse(Card); +``` + +It also accepts an object as a second argument that can contain a [number of options](#rendering-options). + +## Rendering options + +Both [`renderToResponse`](#rendertoresponse) and [`renderToString`](#rendertostring) accept an object as their second argument: + +```ts +export type ContainerRenderOptions = { + slots?: Record<string, any>; + request?: Request; + params?: Record<string, string | undefined>; + locals?: App.Locals; + routeType?: "page" | "endpoint"; + +}; +``` + +These optional values can be passed to the rendering function in order to provide additional information necessary for an Astro component to properly render. + +### `slots` + +**Type**: `Record<string, any>`; + +An option to pass content to be rendered with [`<slots>`](en/basics/astro-components/#slots). + +If your Astro component renders one default slot, pass an object with `default` as the key: + +```js name="Card.test.js" +import Card from "../src/components/Card.astro"; + +const result = await container.renderToString(Card, { + slots: { default: "Some value"} +}); +``` + +If your component renders named slots, use the slot names as the object keys: + +```astro name="Card.astro" +--- +--- +<div> + <slot name="header" /> + <slot name="footer" /> +</div> +``` + +```js name="Card.test.js" +import Card from "../src/components/Card.astro"; + +const result = await container.renderToString(Card, { + slots: { "header": "Header content", "footer": "Footer" } +}); +``` + +You can also render components in cascade: + +```astro name="Card.astro" +--- +--- +<div> + <slot name="header" /> + <slot name="footer" /> +</div> +``` + +```js name="Card.test.js" +import Card from "../src/components/Card.astro"; +import CardHeader from "../src/components/CardHeader.astro"; +import CardFooter from "../src/components/CardFooter.astro"; + +const result = await container.renderToString(Card, { + slots: { + "header": await container.renderToString(CardHeader), + "footer": await container.renderToString(CardFooter), + } +}); +``` + +### `request` option + +**Type**: `Request` + +An option to pass a `Request` with information about the path/URL the component will render. + +Use this option when your component needs to read information like `Astro.url` or `Astro.request`. + +You can also inject possible headers or cookies. + +```js file="Card.test.js" +import Card from "../src/components/Card.astro"; + +const result = await container.renderToString(Card, { + request: new Request("https://example.com/blog", { + headers: { + "X-some-secret-header": "test-value" + } + }) +}); +``` + +### `params` option + +**Type**: `Record<string, string | undefined>`; + +An object to pass information about the path parameter to an Astro component responsible for [generating dynamic routes](/en/guides/routing/#dynamic-routes). + +Use this option when your component needs a value for `Astro.params` in order to generate a single route dynamically. + +```astro name="Card.astro" +--- +const { locale, slug } = Astro.params; +--- +<div></div> +``` + +```js file="LocaleSlug.test.js" +import LocaleSlug from "../src/components/[locale]/[slug].astro"; + +const result = await container.renderToString(LocaleSlug, { + params: { + locale: "en", + slug: "getting-started" + } +}); +``` + +### `locals` options + +**Type**: `App.Locals` + +An option to pass information from [`Astro.locals`](/en/reference/api-reference/#astrolocals) for rendering your component. + +Use this option to when your component needs information stored during the lifecycle of a request in order to render, such as logged in status. + +```astro name="Card.astro" +--- +const { checkAuth } = Astro.locals; +const isAuthenticated = checkAuth(); +--- +{isAuthenticated ? <span>You're in</span> : <span>You're out</span> } +``` + +```js file="Card.test.js" +import Card from "../src/components/Card.astro"; + +test("User is in", async () => { + const result = await container.renderToString(Card, { + locals: { + checkAuth() { return true } + } + }); + + // assert result contains "You're in" +}) + + +test("User is out", async () => { + const result = await container.renderToString(Card, { + locals: { + checkAuth() { return false } + } + }); + + // assert result contains "You're out" +}) +``` + +### `routeType` option + +**Type**: `"page" | "endpoint"` + +An option available when using `renderToResponse` to specify that you are rendering an [endpoint](/en/guides/endpoints/): + +```js +container.renderToString(Endpoint, { routeType: "endpoint" }); +``` + +```js file="endpoint.test.js" +import * as Endpoint from "../src/pages/api/endpoint.js"; + +const response = await container.renderToResponse(Endpoint, { + routeType: "endpoint" +}); +const json = await response.json(); +``` + +To test your endpoint on methods such as `POST`, `PATCH`, etc., use the `request` option to call the correct function: + +```js file="endpoint.js" +export function GET() {} + +// need to test this +export function POST() {} +``` + +```js file="endpoint.test.js" ins={5-7} +import * as Endpoint from "../src/pages/api/endpoint.js"; + +const response = await container.renderToResponse(Endpoint, { + routeType: "endpoint", + request: new Request("https://example.com", { + method: "POST" // + }) +}); +const json = await response.json(); +``` diff --git a/src/content/docs/en/tutorial/3-components/1.mdx b/src/content/docs/en/tutorial/3-components/1.mdx index f55dbde77a819..6dd3780e5d366 100644 --- a/src/content/docs/en/tutorial/3-components/1.mdx +++ b/src/content/docs/en/tutorial/3-components/1.mdx @@ -52,9 +52,12 @@ To hold `.astro` files that will generate HTML but that will not become new page <Steps> 1. Go back to `index.astro` and import your new component inside the code fence: - ```astro title="src/pages/index.astro" + ```astro title="src/pages/index.astro" ins={2} --- import Navigation from '../components/Navigation.astro'; + import "../styles/global.css"; + + const pageTitle = "Home Page"; --- ``` diff --git a/src/content/docs/en/tutorial/4-layouts/1.mdx b/src/content/docs/en/tutorial/4-layouts/1.mdx index 5682274dd6849..e4083d1d0cc12 100644 --- a/src/content/docs/en/tutorial/4-layouts/1.mdx +++ b/src/content/docs/en/tutorial/4-layouts/1.mdx @@ -147,7 +147,7 @@ Don't forget to: - Let the layout be responsible for the HTML rendering of any common elements. -- Delete anything from each page that that page is no longer responsible for rendering, because it is being handled by the layout, including: +- Delete anything from each individual page that is now being handled by the layout, including: - HTML elements - Components and their imports diff --git a/src/content/docs/en/tutorial/5-astro-api/2.mdx b/src/content/docs/en/tutorial/5-astro-api/2.mdx index 5c7ff747ed0e9..585e73bc779b8 100644 --- a/src/content/docs/en/tutorial/5-astro-api/2.mdx +++ b/src/content/docs/en/tutorial/5-astro-api/2.mdx @@ -79,7 +79,7 @@ You can create entire sets of pages dynamically using `.astro` files that export {params: {tag: "blogging"}, props: {posts: allPosts}}, {params: {tag: "setbacks"}, props: {posts: allPosts}}, {params: {tag: "learning in public"}, props: {posts: allPosts}} - ] + ]; } const { tag } = Astro.params; diff --git a/src/content/docs/es/community-resources/content.mdx b/src/content/docs/es/community-resources/content.mdx index d946ca0498007..77843651f2f4f 100644 --- a/src/content/docs/es/community-resources/content.mdx +++ b/src/content/docs/es/community-resources/content.mdx @@ -58,6 +58,7 @@ Otras guías pueden explicar conceptos relacionados con un área de contenido, c - [Usa un nombre de archivo dinámico al importar imágenes](https://vaihe.com/blog/astro/astro-dynamic-image-prop/) - [Agrega un feed RSS a tu sitio Astro usando historias de Storyblok](https://straffesites.com/en/blog/rss-feed-astro-storyblok) - [¿Cómo enviar cualquier dato en tu feed RSS? Una guía con Astro + RSS](https://aritraroy.live/tutorial/blogs/2023/how-to-send-any-data-to-rss-feed/) +- [Agregando Contenido de RSS y Corrigiendo Rutas de Imágenes en Markdown en Astro](https://billyle.dev/posts/adding-rss-feed-content-and-fixing-markdown-image-paths-in-astro) ### Animation - [Usando GreenSock Animation Platform (GSAP) en Astro](https://www.launchfa.st/blog/gsap-astro) - [Usando GreenSock Animation Platform (GSAP) en Astro con View Transitions](https://www.launchfa.st/blog/gsap-astro-view-transitions) diff --git a/src/content/docs/es/editor-setup.mdx b/src/content/docs/es/editor-setup.mdx index eab663591cbd9..a6a9b1a0079d5 100644 --- a/src/content/docs/es/editor-setup.mdx +++ b/src/content/docs/es/editor-setup.mdx @@ -24,11 +24,14 @@ import ReadMore from '~/components/ReadMore.astro' <ReadMore>Aprende cómo [configurar TypeScript](/es/guides/typescript/) en tu proyecto de Astro.</ReadMore> +## Zed + +[Zed](https://zed.dev/) es un editor de código de código abierto que añadió soporte para Astro en la versión 0.123.2. Puedes instalar la [extensión de Astro](https://github.com/zed-industries/zed/tree/main/extensions/astro) en la pestaña de Extensiones de la IDE. Esta extensión incluye funciones como resaltado de sintaxis, autocompletado y formateo de código. + ### IDE de JetBrains El soporte inicial para Astro llegó a Webstorm 2023.1. Puedes instalar el plugin oficial a través de la [página de plugins de Jetbrains](https://plugins.jetbrains.com/plugin/20959-astro) o buscando "Astro" en la pestaña de Plugins y beneficiarte de las funciones tales como resaltado de sintaxis, formateo y autocompletado de código, con planes para agregar más funciones avanzadas en el futuro. También está disponible para las otras [IDEs de Jetbrains con soporte para Javascript](https://www.jetbrains.com/products/#lang=js&type=ide). - ## Otros editores de código Nuestra increíble comunidad mantiene extensiones para otros editores de código incluyendo: diff --git a/src/content/docs/es/getting-started.mdx b/src/content/docs/es/getting-started.mdx index 770c6135dbd67..d8ac35783449d 100644 --- a/src/content/docs/es/getting-started.mdx +++ b/src/content/docs/es/getting-started.mdx @@ -13,7 +13,7 @@ hero: title: Docs de Astro tagline: Guías, recursos y referencias de API para ayudarte a construir con Astro. actions: - - text: Empezar + - text: Instalar Astro icon: rocket link: /es/install/auto/ variant: primary @@ -64,4 +64,4 @@ import Discord from '~/components/Landing/Discord.astro' </ListCard> </CardGrid> -<Discord title="¿Tienes alguna pregunta o quieres participar?" cta="Únete a nuestro Discord"/> \ No newline at end of file +<Discord title="¿Tienes alguna pregunta o quieres participar?" cta="Únete a nuestro Discord"/> diff --git a/src/content/docs/es/guides/backend/google-firebase.mdx b/src/content/docs/es/guides/backend/google-firebase.mdx index c832d533db71d..82bca610c1fd8 100644 --- a/src/content/docs/es/guides/backend/google-firebase.mdx +++ b/src/content/docs/es/guides/backend/google-firebase.mdx @@ -219,7 +219,7 @@ export const GET: APIRoute = async ({ request, cookies, redirect }) => { expiresIn: fiveDays, }); - cookies.set("session", sessionCookie, { + cookies.set("__session", sessionCookie, { path: "/", }); @@ -227,6 +227,10 @@ export const GET: APIRoute = async ({ request, cookies, redirect }) => { }; ``` +:::caution +Firebase solo permiete el uso de [una cookie, y debe ser nombrada `__session`](https://firebase.google.com/docs/hosting/manage-cache#using_cookies). Cualquier otra cookie que el cliente envíe no será visible para tu aplicación. +::: + :::note Esta es una implementación básica del endpoint de inicio de sesión. Puedes agregar más lógica a este endpoint para adaptarlo a tus necesidades. ::: @@ -237,7 +241,7 @@ Esta es una implementación básica del endpoint de inicio de sesión. Puedes ag import type { APIRoute } from "astro"; export const GET: APIRoute = async ({ redirect, cookies }) => { - cookies.delete("session", { + cookies.delete("__session", { path: "/", }); return redirect("/signin"); @@ -355,8 +359,8 @@ import Layout from "../layouts/Layout.astro"; /* Verificar si el usuario está autenticado */ const auth = getAuth(app); -if (Astro.cookies.has("session")) { - const sessionCookie = Astro.cookies.get("session").value; +if (Astro.cookies.has("__session")) { + const sessionCookie = Astro.cookies.get("__session").value; const decodedCookie = await auth.verifySessionCookie(sessionCookie); if (decodedCookie) { return Astro.redirect("/dashboard"); @@ -432,10 +436,10 @@ import Layout from "../layouts/Layout.astro"; const auth = getAuth(app); /* Verificar la sesión actual */ -if (!Astro.cookies.has("session")) { +if (!Astro.cookies.has("__session")) { return Astro.redirect("/signin"); } -const sessionCookie = Astro.cookies.get("session").value; +const sessionCookie = Astro.cookies.get("__session").value; const decodedCookie = await auth.verifySessionCookie(sessionCookie); const user = await auth.getUser(decodedCookie.uid); @@ -473,8 +477,8 @@ import Layout from "../layouts/Layout.astro"; /* Verificar si el usuario está autenticado */ const auth = getAuth(app); -if (Astro.cookies.has("session")) { - const sessionCookie = Astro.cookies.get("session").value; +if (Astro.cookies.has("__session")) { + const sessionCookie = Astro.cookies.get("__session").value; const decodedCookie = await auth.verifySessionCookie(sessionCookie); if (decodedCookie) { return Astro.redirect("/dashboard"); diff --git a/src/content/docs/es/guides/backend/supabase.mdx b/src/content/docs/es/guides/backend/supabase.mdx index 325f779f53dd7..661661038403b 100644 --- a/src/content/docs/es/guides/backend/supabase.mdx +++ b/src/content/docs/es/guides/backend/supabase.mdx @@ -259,7 +259,7 @@ import Layout from "../layouts/Layout.astro"; <input type="email" name="email" id="email" /> <label for="password">Contraseña</label> <input type="password" name="password" id="password" /> - <button type="submit">Iniciar sesión</button> + <button type="submit">Registrarse</button> </form> </Layout> ``` diff --git a/src/content/docs/es/guides/cms/builderio.mdx b/src/content/docs/es/guides/cms/builderio.mdx index 31917ddbf197d..8aeb28a34f506 100644 --- a/src/content/docs/es/guides/cms/builderio.mdx +++ b/src/content/docs/es/guides/cms/builderio.mdx @@ -8,6 +8,7 @@ i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import { FileTree } from '@astrojs/starlight/components'; +import { Steps } from '@astrojs/starlight/components'; [Builder.io](https://www.builder.io/) es un CMS visual que admite la edición de contenido mediante arrastrar y soltar para la construcción de sitios web. @@ -140,11 +141,13 @@ En el ejemplo anterior, `<builder-component>` le dice a Builder dónde insertar #### Configuración de la nueva ruta como la URL de vista previa +<Steps> 1. Copia la URL completa de tu vista previa, incluyendo el protocolo, en tu portapapeles (por ejemplo, `https://{tu host}/builder-preview`). 2. Ve a la pestaña **Models** en tu espacio de Builder, selecciona el modelo que has creado y pega la URL del paso 1 en el campo **Preview URL**. Asegúrate de que la URL esté completa e incluya el protocolo, por ejemplo `https://`. 3. Haz clic en el botón **Save** en la esquina superior derecha. +</Steps> :::tip Cuando despliegues tu sitio, cambia la URL de vista previa para que coincida con tu URL de producción, por ejemplo `https://miIncreibleBlogAstro.com/builder-preview`. @@ -152,11 +155,13 @@ Cuando despliegues tu sitio, cambia la URL de vista previa para que coincida con #### Prueba de la configuración de la URL de vista previa +<Steps> 1. Asegúrate de que tu sitio esté en línea (por ejemplo, tu servidor de desarrollo está en ejecución) y que la ruta `/builder-preview` esté funcionando. 2. En tu espacio de Builder bajo la pestaña **Content**, haz clic en **New** para crear una nueva entrada de contenido para tu modelo `blogpost`. 3. En el editor de Builder que acabas de abrir, deberías poder ver la página `builder-preview.astro` con un gran botón **Add Block** en el medio. +</Steps> :::tip[Solución de problemas] @@ -172,13 +177,19 @@ Para más ideas, lee [la guía de solución de problemas de Builder](https://www ### Creación de una entrada de blog +<Steps> 1. En el editor visual de Builder, crea una nueva entrada de contenido con los siguientes valores: - **title:** '¡Primer articulo, woohoo!' - **slug:** 'primer-articulo-woohoo' + 2. Completa tu entrada usando el botón **Add Block** y agrega un campo de texto con algo de contenido para la entrada. + 3. En el campo de texto sobre el editor, dale un nombre a tu entrada. Así es como se listará en la aplicación de Builder. + 4. Cuando estés listo, haz clic en el botón **Publish** en la esquina superior derecha. + 5. Crea tantas entradas como desees, asegurándote de que todas las entradas de contenido contengan un `title` y un `slug` así como algo de contenido para la entrada. +</Steps> ### Mostrar una lista de entradas de blog @@ -208,7 +219,7 @@ const { results: posts } = await fetch( <body> <ul> { - posts.map(({ data: { slug, title } }) => ( + posts.flatMap(({ data: { slug, title } }) => ( <li> <a href={`/posts/${slug}`}>{title}</a> </li> @@ -328,15 +339,23 @@ Si tu proyecto está usando el modo estático predeterminado de Astro, necesitar ##### Netlify +<Steps> 1. Ve a tu panel de control del sitio, luego **Site Settings** y haz clic en **Build & deploy**. + 2. Bajo la pestaña **Continuous Deployment**, encuentra la sección **Build hooks** y haz clic en **Add build hook**. + 3. Proporciona un nombre para tu webhook y selecciona la rama en la que deseas desencadenar la compilación. Haz clic en **Save** y copia la URL generada. +</Steps> ##### Vercel +<Steps> 1. Ve a tu panel de control del proyecto y haz clic en **Settings**. + 2. Bajo la pestaña **Git**, encuentra la sección **Deploy Hooks** y haz clic en **Add deploy hook**. + 3. Proporciona un nombre para tu webhook y selecciona la rama en la que deseas desencadenar la compilación. Haz clic en **Add** y copia la URL generada. +</Steps> ##### Agregar un webhook a Builder @@ -344,9 +363,13 @@ Si tu proyecto está usando el modo estático predeterminado de Astro, necesitar Consulta [la guía de Builder sobre cómo agregar webhooks](https://www.builder.io/c/docs/webhooks) para obtener más información. ::: +<Steps> 1. En el panel de control de Builder, ve a tu modelo **`blogpost`**. Bajo **Show More Options**, selecciona **Edit Webhooks** en la parte inferior. + 2. Agrega un nuevo webhook haciendo clic en **Webhook**. Pega la URL generada por tu proveedor de alojamiento en el campo **Url**. + 3. Haz clic en **Show Advanced** debajo del campo de URL y activa la opción para seleccionar **Disable Payload**. Con el payload deshabilitado, Builder envía una solicitud POST más simple a tu proveedor de alojamiento, lo que puede ser útil a medida que tu sitio crece. Haz clic en **Done** para guardar esta selección. +</Steps> Con este webhook en su lugar, cada vez que hagas clic en el botón **Publish** en el editor de Builder, tu proveedor de alojamiento reconstruirá tu sitio - y Astro recuperará los datos recién publicados para ti. ¡No hay nada que hacer más que relajarse y publicar ese dulce contenido! diff --git a/src/content/docs/es/guides/cms/buttercms.mdx b/src/content/docs/es/guides/cms/buttercms.mdx index 32118d43d52af..97b091471aa48 100644 --- a/src/content/docs/es/guides/cms/buttercms.mdx +++ b/src/content/docs/es/guides/cms/buttercms.mdx @@ -7,8 +7,7 @@ stub: false i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' - - +import { Steps } from '@astrojs/starlight/components'; [ButterCMS](https://buttercms.com/) es un CMS headless y un motor de blogs que te permite publicar contenido estructurado para usarlo en tu proyecto. @@ -28,6 +27,7 @@ Para empezar, necesitarás lo siguiente: ### Configuración +<Steps> 1. Crea un archivo `.env` en la raíz de tu proyecto y agrega tu token de API como una variable de entorno: ```ini title=".env" @@ -64,6 +64,7 @@ Para empezar, necesitarás lo siguiente: export const butterClient = Butter(import.meta.env.BUTTER_TOKEN); ``` +</Steps> **Esto autentica el SDK usando tu token de API y lo exporta para ser usado en todo tu proyecto.** diff --git a/src/content/docs/es/guides/cms/contentful.mdx b/src/content/docs/es/guides/cms/contentful.mdx index 6fecc98bd21e4..825a1d57ff633 100644 --- a/src/content/docs/es/guides/cms/contentful.mdx +++ b/src/content/docs/es/guides/cms/contentful.mdx @@ -7,8 +7,7 @@ i18nReady: true --- import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' - - +import { Steps } from '@astrojs/starlight/components'; [Contentful](https://www.contentful.com/) es un CMS headless que te permite administrar contenido, integrar con otros servicios y publicar en múltiples plataformas. @@ -546,22 +545,26 @@ Si tu proyecto esta usando el modo estático por defecto de Astro, necesitarás ##### Netlify Para configurar un webhook en Netlify: - + +<Steps> 1. Ve a tu panel de control y haz clic en **Build & deploy**. 2. En la pestaña **Continuous Deployment**, encuentra la sección **Build hooks** y haz clic en **Add build hook**. 3. Proporciona un nombre para tu webhook y selecciona la rama en la que quieres que se ejecute la compilación. Haz clic en **Save** y copia la URL generada. +</Steps> ##### Vercel Para configurar un webhook en Vercel: - + +<Steps> 1. Ve a tu panel de control y haz clic en **Settings**. 2. En la pestaña **Git**, encuentra la sección **Deploy Hooks**. 3. Proporciona un nombre para tu webhook y selecciona la rama en la que quieres que se ejecute la compilación. Haz clic en **Add** y copia la URL generada. +</Steps> ##### Agregando un webhook a Contentful diff --git a/src/content/docs/es/guides/cms/cosmic.mdx b/src/content/docs/es/guides/cms/cosmic.mdx index 0f4e8f96aefa0..7fbdb54bf0fdf 100644 --- a/src/content/docs/es/guides/cms/cosmic.mdx +++ b/src/content/docs/es/guides/cms/cosmic.mdx @@ -8,6 +8,7 @@ i18nReady: true import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import Grid from '~/components/FluidGrid.astro' import Card from '~/components/ShowcaseCard.astro' +import { Steps } from '@astrojs/starlight/components'; [Cosmic](https://www.cosmicjs.com/) es un [CMS headless](https://www.cosmicjs.com/headless-cms) que ofrece un panel de administración para gestionar contenido y una API que puede integrarse con una variedad de herramientas frontend. @@ -53,6 +54,7 @@ PUBLIC_COSMIC_READ_KEY=TU_CLAVE_DE_LECTURA ## Obteniendo Datos de Cosmic +<Steps> 1. Crea un nuevo archivo llamado `cosmic.js`. Coloca este archivo dentro de la carpeta `src/lib` en tu proyecto. 2. Agrega el siguiente código para obtener datos de Cosmic usando el SDK y tus variables de entorno. @@ -109,6 +111,7 @@ PUBLIC_COSMIC_READ_KEY=TU_CLAVE_DE_LECTURA ``` [Mira el código fuente del componente Card](https://github.com/cosmicjs/simple-astro-blog/blob/main/src/components/Card.astro) +</Steps> ## Construyendo un Blog con Astro y Cosmic @@ -236,9 +239,13 @@ Para configurar un webhook en Netlify: Para configurar un webhook en Vercel: +<Steps> 1. Ve a tu panel de control del proyecto y haz clic en **Settings**. + 2. En la pestaña de **Git**, busca la sección de **Deploy Hooks**. + 3. Proporciona un nombre para tu webhook y la rama en la que deseas activar la compilación. Haz clic en **Add** y copia la URL generada. +</Steps> ## Temas diff --git a/src/content/docs/es/guides/cms/datocms.mdx b/src/content/docs/es/guides/cms/datocms.mdx index ffe47bd3e1837..663ee7cf8ab56 100644 --- a/src/content/docs/es/guides/cms/datocms.mdx +++ b/src/content/docs/es/guides/cms/datocms.mdx @@ -6,6 +6,7 @@ stub: false service: DatoCMS i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; [DatoCMS](https://datocms.com/) es un CMS headless basado en la web para gestionar contenido digital en tus sitios y aplicaciones. @@ -84,7 +85,6 @@ const data = json.data.home; --- <h1>{data.title}</h1> - ``` Esta consulta de GraphQL obtendrá el campo `title` en la página `home` de tu proyecto de DatoCMS. Cuando actualices tu navegador, deberías ver el título en tu página. @@ -171,7 +171,6 @@ const data = json.data.home; ``` - ## Publicando tu sitio Para desplegar tu sitio web, visita nuestras [guías de despliegue](/es/guides/deploy/) y sigue las instrucciones para tu proveedor de alojamiento preferido. @@ -184,17 +183,25 @@ Si tu proyecto está utilizando el modo estático predeterminado de Astro, neces Para configurar un webhook en Netlify: +<Steps> 1. Ve a tu panel de control del sitio y haz clic en **Build & deploy**. + 2. En la pestaña de **Continuous Deployment**, busca la sección de **Build hooks** y haz clic en **Add build hook**. + 3. Proporciona un nombre para tu webhook y selecciona la rama en la que deseas activar la compilación. Haz clic en **Save** y copia la URL generada. +</Steps> ### Vercel Para configurar un webhook en Vercel: +<Steps> 1. Ve a tu panel de control del proyecto y haz clic en **Settings**. + 2. En la pestaña de **Git**, busca la sección de **Deploy Hooks**. + 3. Proporciona un nombre para tu webhook y la rama en la que deseas activar la compilación. Haz clic en **Add** y copia la URL generada. +</Steps> ### Agregando un webhook a DatoCMS diff --git a/src/content/docs/es/guides/cms/decap-cms.mdx b/src/content/docs/es/guides/cms/decap-cms.mdx index c228cf2d62c20..66bc4418b46ce 100644 --- a/src/content/docs/es/guides/cms/decap-cms.mdx +++ b/src/content/docs/es/guides/cms/decap-cms.mdx @@ -8,6 +8,7 @@ i18nReady: true --- import Grid from '~/components/FluidGrid.astro' import Card from '~/components/ShowcaseCard.astro' +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components' import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' @@ -52,7 +53,9 @@ Hay dos opciones para añadir Decap a Astro: ## Configuración +<Steps> 1. Crea una carpeta de administración estática en `public/admin/` + 2. Agrega `config.yml` a `public/admin/`: <FileTree> - public @@ -77,7 +80,6 @@ Hay dos opciones para añadir Decap a Astro: ``` 4. Agregar la ruta `admin` para tu aplicación React. Este archivo puede ser `public/admin/index.html` junto con `config.yml` o, si prefieres utilizar una ruta de Astro, `src/pages/admin.astro`. - <FileTree> - public - admin @@ -105,6 +107,7 @@ Hay dos opciones para añadir Decap a Astro: media_folder: "src/assets/images" # Ubicación donde se almacenarán los archivos en el repositorio public_folder: "src/assets/images" # El atributo src para los medios cargados ``` +</Steps> Consulta la [documentación de configuración de Decap CMS](https://decapcms.org/docs/configure-decap-cms/) para obtener instrucciones y opciones completas. diff --git a/src/content/docs/es/guides/cms/hygraph.mdx b/src/content/docs/es/guides/cms/hygraph.mdx index 9bd9039b0ca8b..be044830cc12d 100644 --- a/src/content/docs/es/guides/cms/hygraph.mdx +++ b/src/content/docs/es/guides/cms/hygraph.mdx @@ -5,6 +5,7 @@ type: cms service: Hygraph i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; [Hygraph](https://hygraph.com/) es un gestor de contenido federado. Expone un endpoint de GraphQL para obtener contenido. @@ -110,13 +111,15 @@ const posts: Post[] = json.data.blogPosts; Para configurar un webhook en Netlify: +<Steps> 1. Despliega tu sitio en Netlify con [esta guía](/es/guides/deploy/netlify/). Recuerda agregar tu `HYGRAPH_ENDPOINT` a las variables de entorno. 2. Luego, ve al panel de control de tu proyecto de Hygraph y haz clic en **Apps**. 3. Ve al marketplace y busca Netlify y sigue las instrucciones proporcionadas. -3. Si todo salió bien, ahora puedes desplegar tu sitio web con un clic en la interfaz de Hygraph. +4. Si todo salió bien, ahora puedes desplegar tu sitio web con un clic en la interfaz de Hygraph. +</Steps> ## Recursos de la comunidad diff --git a/src/content/docs/es/guides/cms/keystatic.mdx b/src/content/docs/es/guides/cms/keystatic.mdx index 7deef084793df..b48702d71668a 100644 --- a/src/content/docs/es/guides/cms/keystatic.mdx +++ b/src/content/docs/es/guides/cms/keystatic.mdx @@ -5,6 +5,7 @@ type: cms service: Keystatic i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' @@ -157,13 +158,14 @@ Visita `http://127.0.0.1:4321/keystatic` en el navegador para ver la UI de admin ## Crear una nueva entrada +<Steps> 1. En el panel de control de administrador de Keystatic, haz clic en la colección "Posts". - 2. Usa el botón para crear una nueva entrada. Agrega el título "Mi primera entrada" y algo de contenido, luego guarda la entrada. +2. Usa el botón para crear una nueva entrada. Agrega el título "Mi primera entrada" y algo de contenido, luego guarda la entrada. - 3. Este post debería ser visible desde tu colección "Posts". Puedes ver y editar tus posts individuales desde esta página del panel de control. +3. Este post debería ser visible desde tu colección "Posts". Puedes ver y editar tus posts individuales desde esta página del panel de control. - 4. Regresa para ver tus archivos del proyecto Astro. Ahora encontrarás un nuevo archivo `.mdoc` dentro del directorio `src/content/posts` para esta nueva entrada: +4. Regresa para ver tus archivos del proyecto Astro. Ahora encontrarás un nuevo archivo `.mdoc` dentro del directorio `src/content/posts` para esta nueva entrada: <FileTree title="Estructura del proyecto"> - src/ @@ -182,6 +184,7 @@ Visita `http://127.0.0.1:4321/keystatic` en el navegador para ver la UI de admin Este es mi primer artículo. ¡Estoy **súper** emocionado! ``` +</Steps> ## Renderizar contenido de Keystatic diff --git a/src/content/docs/es/guides/cms/kontent-ai.mdx b/src/content/docs/es/guides/cms/kontent-ai.mdx index a0401e8663fc0..660530139d4cd 100644 --- a/src/content/docs/es/guides/cms/kontent-ai.mdx +++ b/src/content/docs/es/guides/cms/kontent-ai.mdx @@ -5,6 +5,7 @@ type: cms service: Kontent.ai i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' @@ -530,19 +531,27 @@ Si tu proyecto está usando el modo estático predeterminado de Astro, deberás Para configurar un webhook en Netlify: +<Steps> 1. Ve al panel de control de tu sitio y haz clic en **Build & deploy**. + 2. En la pestaña **Continuous Deployment**, encuentra la sección **Build hooks** y haz clic en **Add build hook**. + 3. Proporciona un nombre para tu webhook y selecciona la rama en la que deseas iniciar la compilación. Haz clic en **Save** y copia la URL generada. +</Steps> ##### Vercel Para configurar un webhook en Vercel: +<Steps> 1. Ve al panel de control de tu proyecto y haz clic en **Settings**. + 2. En la pestaña **Git**, encuentra la sección **Deploy Hooks**. + 3. Proporciona un nombre para tu webhook y la rama en la que deseas iniciar la compilación. Haz clic en **Add** y copia la URL generada. +</Steps> -Agregando un webhook a Kontent.ai +#### Agregando un webhook a Kontent.ai En la aplicación [Kontent.ai](https://kontent.ai/learn/docs/webhooks/javascript), ve a **Environment settings -> Webhooks**. Haz clic en **Create new webhook** y proporciona un nombre para tu nuevo webhook. Pega la URL que copiaste de Netlify o Vercel y selecciona qué eventos deben activar el webhook. De forma predeterminada, para reconstruir tu sitio cuando cambie el contenido publicado, solo necesitas los eventos **Publish** y **Unpublish** en **Delivery API triggers**. Cuando hayas terminado, haz clic en Save. diff --git a/src/content/docs/es/guides/cms/payload.mdx b/src/content/docs/es/guides/cms/payload.mdx index a5f73a33b9c2d..81af02d9ec375 100644 --- a/src/content/docs/es/guides/cms/payload.mdx +++ b/src/content/docs/es/guides/cms/payload.mdx @@ -6,6 +6,7 @@ stub: true service: Payload CMS i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [PayloadCMS](https://payloadcms.com/) es un sistema de gestión de contenido headless de código abierto que se puede utilizar para proporcionar contenido para tu proyecto Astro. @@ -13,7 +14,6 @@ i18nReady: true ### Prerequisitos - 1. **Un proyecto de Astro** - Si aún no tienes un proyecto de Astro, nuestra [guía de instalación](/es/install/auto/) te pondrá en marcha en poco tiempo. 2. **Una base de datos de MongoDB** - PayloadCMS te pedirá una cadena de conexión de MongoDB al crear un nuevo proyecto. Puede configurar uno localmente o usar [MongoDBAtlas](https://www.mongodb.com/) para alojar una base de datos en la web de forma gratuita. 3. **Una API REST de PayloadCMS** - Crea un proyecto de [PayloadCMS](https://payloadcms.com/docs/getting-started/installation) y conéctalo a tu base de datos MongoDB durante la configuración. @@ -29,7 +29,7 @@ Escoger cualquiera de las plantillas disponibles en este paso (como 'blog') gene Tu proyecto de plantilla Payload contendrá un archivo llamado Posts.ts en `src/collections/`. Si no escogiste una plantilla durante la instalación que creara una colección de contenido para ti, puedes crear una nueva colección de PayloadCMS agregando este archivo de configuración manualmente. El siguiente ejemplo muestra este archivo para una colección llamada `posts` que requiere los campos `title`, `content` y `slug`: -```astro title="src/collections/Posts.ts" +```ts title="src/collections/Posts.ts" import { CollectionConfig } from "payload/types"; const Posts: CollectionConfig = { @@ -63,6 +63,7 @@ const Posts: CollectionConfig = { export default Posts; ``` +<Steps> 1. Importa y agrega tanto `Users` (disponible en todos los proyectos de PayloadCMS) como cualquier otra colección (por ejemplo, `Posts`) a las colecciones disponibles en el archivo `payload.config.ts`. ```astro title="src/payload.config.ts" ins={4, 5, 12} @@ -114,6 +115,7 @@ export default Posts; "nextPage":null } ``` +</Steps> :::tip Por defecto, tanto Astro como PayloadCMS utilizarán el puerto 4321. Es posible que desees cambiar el puerto de PayloadCMS en el archivo `src/server.ts`. No olvides actualizar el `serverURL` en `src/payload.config.ts` también. @@ -214,9 +216,7 @@ export async function getStaticPaths() { Para desplegar tu sitio visita nuestra [guía de despliegue](/es/guides/deploy/) y sigue las instrucciones para tu proveedor de alojamiento preferido. - ## Recursos de la comunidad - Prueba esta [Plantilla de Payload CMS y Astro](https://github.com/Lambdo-Labs/payloadcms-astro-template). - Echa un vistazo a [Astroad](https://github.com/mooxl/astroad) para un fácil desarrollo y despliegue en VPS con Docker. - diff --git a/src/content/docs/es/guides/cms/preprcms.mdx b/src/content/docs/es/guides/cms/preprcms.mdx index 219d4e3131da1..98cf14ef4a2ed 100644 --- a/src/content/docs/es/guides/cms/preprcms.mdx +++ b/src/content/docs/es/guides/cms/preprcms.mdx @@ -6,6 +6,7 @@ service: Prepr CMS stub: true i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' @@ -32,8 +33,12 @@ PREPR_ENDPOINT=YOUR_PREPR_API_URL ``` Encontrarás tu valor `YOUR_PREPR_API_URL` en la configuración de tu cuenta Prepr: + +<Steps> 1. Ve a **Settings > Access tokens** para ver tus tokens de acceso de vista previa y producción. + 2. Usa el valor **API URL** del token de acceso **GraphQL Production** para solo recuperar elementos de contenido publicados para tu sitio de Astro. +</Steps> ### Configuración del endpoint de Prepr @@ -70,7 +75,10 @@ Tu directorio raíz ahora debería incluir estos archivos: Obtendrás tus datos de Prepr escribiendo consultas para interactuar con su API GraphQL. #### Crea una consulta GraphQL para recuperar tus artículos de blog: + +<Steps> 1. Crea una nueva carpeta `src/queries/` y agrega un archivo llamado `get-articles.js`. + 2. Agrega la siguiente consulta a este archivo para recuperar todos los artículos: ```js title="src/queries/get-articles.js" @@ -117,7 +125,7 @@ Obtendrás tus datos de Prepr escribiendo consultas para interactuar con su API </ul> </Layout> ``` - +</Steps> Tu directorio raíz ahora debería incluir estos archivos: @@ -136,6 +144,7 @@ Tu directorio raíz ahora debería incluir estos archivos: Para crear una página por cada publicación de blog, ejecutarás una nueva consulta GraphQL en una página `.astro` de [enrutamiento dinámico](/es/guides/routing/#modo-servidor-ssr). Esta consulta obtendrá un artículo específico por su slug y se creará una nueva página para cada publicación de blog individual. +<Steps> 1. Crea un archivo llamado `get-article-by-slug.js` en la carpeta `queries` y agrega lo siguiente para consultar un artículo específico por su slug y devolver datos como el `title` y `content` del artículo: ```js title="src/lib/queries/get-article-by-slug.js" @@ -163,10 +172,10 @@ Para crear una página por cada publicación de blog, ejecutarás una nueva cons export default GetArticleBySlug ``` -:::tip -Puedes crear y [probar consultas GraphQL](https://docs.prepr.io/reference/graphql/v1/test-queries) utilizando el [Apollo explorer](https://studio.apollographql.com/sandbox/explorer) en Prepr. Abre el API Explorer desde la página de elementos de contenido *Article* en Prepr. -El contenido del artículo se almacena en un *campo de contenido dinámico*. Consulta la documentación de GraphQL para obtener más detalles sobre [cómo obtener los datos dentro de este campo](https://docs.prepr.io/reference/graphql/v1/schema-field-types-dynamic-content-field). -::: + :::tip + Puedes crear y [probar consultas GraphQL](https://docs.prepr.io/reference/graphql/v1/test-queries) utilizando el [Apollo explorer](https://studio.apollographql.com/sandbox/explorer) en Prepr. Abre el API Explorer desde la página de elementos de contenido *Article* en Prepr. + El contenido del artículo se almacena en un *campo de contenido dinámico*. Consulta la documentación de GraphQL para obtener más detalles sobre [cómo obtener los datos dentro de este campo](https://docs.prepr.io/reference/graphql/v1/schema-field-types-dynamic-content-field). + ::: 2. Dentro de la carpeta `src/pages`, crea un archivo llamado `[…slug].astro`. Agrega el siguiente código para importar y ejecutar la consulta del paso anterior y mostrar el artículo recuperado: @@ -200,6 +209,7 @@ El contenido del artículo se almacena en un *campo de contenido dinámico*. Con </main> </Layout> ``` +</Steps> La carpeta raíz de tu proyecto ahora debería incluir estos archivos: diff --git a/src/content/docs/es/guides/cms/sitecore.mdx b/src/content/docs/es/guides/cms/sitecore.mdx index f3914237c76f4..9c0dd9c98ee03 100644 --- a/src/content/docs/es/guides/cms/sitecore.mdx +++ b/src/content/docs/es/guides/cms/sitecore.mdx @@ -6,17 +6,23 @@ stub: true service: Sitecore XM i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Sitecore Experience Manager (XM)](https://www.sitecore.com/products/experience-manager) es un sistema de gestión de contenidos de nivel empresarial construido sobre ASP.NET. ## Cómo empezar +<Steps> 1. [Crea un sitio web Sitecore Headless](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/create-a-headless-tenant-and-site.html) siguiendo la documentación oficial de Sitcore. + 2. Ejecuta el siguiente comando de inicialización del proyecto en tu terminal: - ```shell - npx @astro-sitecore-jss/create-astro-sitecore-jss@latest - ``` + + ```shell + npx @astro-sitecore-jss/create-astro-sitecore-jss@latest + ``` + 3. Sigue las instrucciones en la terminal para crear tu proyecto. +</Steps> ## Recursos de la comunidad diff --git a/src/content/docs/es/guides/cms/tina-cms.mdx b/src/content/docs/es/guides/cms/tina-cms.mdx index 1cd89a8eacdb3..1616a9eb62037 100644 --- a/src/content/docs/es/guides/cms/tina-cms.mdx +++ b/src/content/docs/es/guides/cms/tina-cms.mdx @@ -6,9 +6,10 @@ stub: false service: Tina CMS i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import Grid from '~/components/FluidGrid.astro' -import Card from '~/components/ShowcaseCard.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import Grid from '~/components/FluidGrid.astro'; +import Card from '~/components/ShowcaseCard.astro'; +import { Steps } from '@astrojs/starlight/components'; [Tina CMS](https://tina.io/) es un sistema de gestión de contenido sin servidor respaldado por Git. @@ -16,6 +17,7 @@ import Card from '~/components/ShowcaseCard.astro' Para empezar, necesitarás un proyecto Astro existente. +<Steps> 1. Ejecuta el siguiente comando para instalar Tina en tu proyecto Astro. <PackageManagerTabs> @@ -145,6 +147,7 @@ Para empezar, necesitarás un proyecto Astro existente. Aprende más sobre las colecciones Tina [en la documentación de Tina](https://tina.io/docs/reference/collections/). 5. En producción, TinaCMS puede hacer commit de los cambios directamente a tu repositorio de GitHub. Para configurar TinaCMS para producción, puedes elegir usar [Tina Cloud](https://tina.io/docs/tina-cloud/) o auto-hospedar la [Tina Data Layer](https://tina.io/docs/self-hosted/overview/). Puedes [leer más sobre el registro para Tina Cloud](https://app.tina.io/register) en la documentación de Tina. +</Steps> ## Recursos Oficiales diff --git a/src/content/docs/es/guides/data-fetching.mdx b/src/content/docs/es/guides/data-fetching.mdx index c0e27eb053837..c2a19602edc3b 100644 --- a/src/content/docs/es/guides/data-fetching.mdx +++ b/src/content/docs/es/guides/data-fetching.mdx @@ -8,7 +8,8 @@ Los archivos `.astro` pueden obtener datos remotos para ayudarte a generar tus p ## `fetch()` en Astro -Todos los [componentes de Astro](/es/basics/astro-components/) tienen acceso a la [función global `fetch()`](https://developer.mozilla.org/es/docs/Web/API/fetch) en su script de componente para hacer peticiones HTTP a APIs usando la URL completa (p.ej. https://example.com/api o `Astro.url + "/api"`). +Todos los [componentes de Astro](/es/basics/astro-components/) tienen acceso a la [función global `fetch()`](https://developer.mozilla.org/es/docs/Web/API/fetch) en su script de componente para hacer peticiones HTTP a APIs usando la URL completa (p.ej. https://example.com/api). +Adicionalmente, puedes construir una URL a las páginas y endpoints de tu proyecto que se renderizan bajo demanda en el servidor utilizando `new URL("/api", Astro.url)`. Esta llamada a fetch será ejecutada en el momento de la compilación, y los datos estarán disponibles para la plantilla del componente para generar HTML dinámico. Si el modo [SSR](/es/guides/server-side-rendering/) está habilitado, cualquier llamada a fetch será ejecutada en tiempo de ejecución. diff --git a/src/content/docs/es/guides/deploy/aws.mdx b/src/content/docs/es/guides/deploy/aws.mdx index ef89643c250d0..f43de68eddb06 100644 --- a/src/content/docs/es/guides/deploy/aws.mdx +++ b/src/content/docs/es/guides/deploy/aws.mdx @@ -4,7 +4,8 @@ description: Cómo desplegar tu proyecto de Astro en AWS. type: deploy i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; [AWS](https://aws.amazon.com/) es una plataforma integral de alojamiento, que puede ser usada para desplegar un proyecto de Astro. @@ -14,6 +15,7 @@ Desplegar tu proyecto en AWS requiere el uso de la [consola de AWS](https://aws. AWS Amplify es un conjunto de herramientas que permiten a los desarrolladores web y mobile crear aplicaciones completas en AWS de manera rápida y fácil. +<Steps> 1. Crea un nuevo proyecto en Amplify. 2. Conecta tu repositorio a Amplify. 3. Modifica los ajustes de compilación para adaptarlos al proceso de compilación de tu proyecto. @@ -83,6 +85,7 @@ AWS Amplify es un conjunto de herramientas que permiten a los desarrolladores we ``` </Fragment> </PackageManagerTabs> +</Steps> Amplify desplegará automáticamente tu proyecto y lo actualizará al subir los cambios a tu repositorio. @@ -90,6 +93,7 @@ Amplify desplegará automáticamente tu proyecto y lo actualizará al subir los S3 es el punto de partida de cualquier aplicación. Es donde se almacenan los archivos de tu proyecto. S3 cobra por el almacenamiento de archivos y la cantidad de solicitudes a estos archivos. Puedes encontrar más información sobre S3 en la [documentación de AWS](https://aws.amazon.com/s3/). +<Steps> 1. Crea un bucket en S3 con el nombre de tu proyecto. :::tip @@ -130,6 +134,7 @@ S3 es el punto de partida de cualquier aplicación. Es donde se almacenan los ar :::note Si estás desplegando una aplicación de una sola página (SPA), establece el documento de error a `index.html`. ::: +</Steps> ## S3 y CloudFront @@ -149,6 +154,7 @@ Cuando conectas CloudFront a un endpoint de sitio web estático de S3, dependes Hay muchas formas de configurar despliegue continuo en AWS. Una posibilidad si el código está alojado en GitHub es usar [GitHub Actions](https://github.com/features/actions) que desplegará tu proyecto cada vez que hagas un push. +<Steps> 1. Crea una nueva política en tu cuenta de AWS utilizando [IAM](https://aws.amazon.com/iam/) con los siguientes permisos. Esta política te permitirá cargar los nuevos archivos en tu bucket de S3 e invalidar los archivos antiguos de la distribución de CloudFront al desplegar. ```json @@ -215,6 +221,7 @@ Hay muchas formas de configurar despliegue continuo en AWS. Una posibilidad si e :::note El `BUCKET_ID` es el nombre del bucket de S3. El `DISTRIBUTION_ID` es el ID de la distribución de CloudFront. Puedes encontrar el ID de la distribución de CloudFront en **CloudFront > Distributions > ID** ::: +</Steps> ## Recursos de la comunidad diff --git a/src/content/docs/es/guides/deploy/buddy.mdx b/src/content/docs/es/guides/deploy/buddy.mdx index 8cda27c36e921..426cf214fb9ed 100644 --- a/src/content/docs/es/guides/deploy/buddy.mdx +++ b/src/content/docs/es/guides/deploy/buddy.mdx @@ -4,6 +4,7 @@ description: Cómo desplegar tu proyecto Astro usando Buddy. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Puedes desplegar tu proyecto Astro usando [Buddy](https://buddy.works/), una solución de CI/CD que puede construir tu proyecto y enviarlo a muchos destinos de despliegue diferentes, incluidos servidores FTP y proveedores de alojamiento en la nube. @@ -13,10 +14,15 @@ Buddy no alojará tu proyecto. Solo te ayudará a administrar el proceso de comp ## Cómo desplegar +<Steps> 1. [Crea una cuenta en **Buddy**](https://buddy.works/sign-up). + 2. Crea un nuevo proyecto y conéctalo con un repositorio Git (GitHub, GitLab, BitBucket, cualquier repositorio Git privado o puedes usar Buddy Git Hosting). + 3. Agrega una nueva pipeline. + 4. En la pipeline recién creada, agrega una action para **[Node.js](https://buddy.works/actions/node-js)**. + 5. En esta action agrega: ```bash @@ -25,5 +31,6 @@ Buddy no alojará tu proyecto. Solo te ayudará a administrar el proceso de comp ``` 6. Agrega una action de despliegue: hay muchas para elegir, puedes explorarlas en [el catálogo de acciones de Buddy](https://buddy.works/actions). Aunque tus configuraciones pueden diferir, recuerda configurar la **ruta de origen** en `dist`. -7. Presiona el botón **Run**. +7. Presiona el botón **Run**. +</Steps> diff --git a/src/content/docs/es/guides/deploy/cleavr.mdx b/src/content/docs/es/guides/deploy/cleavr.mdx index b5a272a9ffdbb..c872aae501ba1 100644 --- a/src/content/docs/es/guides/deploy/cleavr.mdx +++ b/src/content/docs/es/guides/deploy/cleavr.mdx @@ -4,6 +4,7 @@ description: Cómo desplegar tu proyecto de Astro a tu servidor VPS usando Cleav type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Puedes desplegar tu proyecto Astro en tu propio Servidor Privado Virtual (VPS) usando [Cleavr](https://cleavr.io/), una herramienta de gestión de despliegues de servidores y aplicaciones. @@ -20,6 +21,7 @@ Para comenzar, necesitarás: ## Agrega tu sitio +<Steps> 1. En Cleavr, navega al servidor al que quieres agregar tu proyecto Astro. 2. Selecciona **Add Site** y completa los detalles de tu aplicación, como el nombre de dominio. @@ -33,10 +35,11 @@ Para comenzar, necesitarás: - Establece **Artifact Folder** en `dist/server`. 6. Selecciona **Add** para agregar el sitio a tu servidor. - +</Steps> ## Configuración y despliegue +<Steps> 1. Una vez que se haya agregado tu nuevo sitio, haz clic en **Setup and deploy**. 2. Selecciona el **VC Profile**, **Repo** y **Branch** para tu proyecto de Astro. @@ -44,5 +47,6 @@ Para comenzar, necesitarás: 3. Realiza cualquier configuración adicional necesaria para tu proyecto. 4. Haz clic en la pestaña **Deployments** y luego haz clic en **Deploy**. +</Steps> ¡Felicitaciones, has desplegado tu aplicación de Astro! diff --git a/src/content/docs/es/guides/deploy/cloudflare.mdx b/src/content/docs/es/guides/deploy/cloudflare.mdx index 2a4c1d9043753..5131f26b08f34 100644 --- a/src/content/docs/es/guides/deploy/cloudflare.mdx +++ b/src/content/docs/es/guides/deploy/cloudflare.mdx @@ -4,7 +4,8 @@ description: Cómo desplegar tu proyecto de Astro usando Cloudflare Pages. type: deploy i18nReady: true --- -import ReadMore from '~/components/ReadMore.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; Puedes desplegar tu proyecto de Astro en [Cloudflare Pages](https://pages.cloudflare.com/), una plataforma para desarrolladores frontend para colaborar y desplegar sitios web estáticos (JAMstack) y con renderizado en el servidor (SSR). @@ -23,11 +24,17 @@ Para comenzar, necesitarás: ## Cómo desplegar un proyecto con Git +<Steps> 1. Crea un nuevo proyecto en Cloudflare Pages. + 2. Sube tu código a un repositorio de git remoto (GitHub, GitLab). + 3. Inicia sesión en el dashboard de Cloudflare y selecciona tu cuenta en **Inicio** > **Páginas**. + 4. Selecciona **Crear un proyecto** y la opción de **Conéctese a un Git**. + 5. Selecciona el proyecto de git que quieres desplegar y haz clic en **Comenzar la instalación** + 6. Usa los siguientes ajustes de compilación: - **Valor preestablecido del marco**: `Astro` @@ -35,13 +42,19 @@ Para comenzar, necesitarás: - **Crear directorio de salida:** `dist` 7. Haz clic en el botón **Guardar e implementar**. +</Steps> ## Cómo desplegar un proyecto usando Wrangler +<Steps> 1. Instala [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/). + 2. Accede en Wrangler con tu cuenta de Cloudflare usando `wrangler login`. + 3. Ejecuta tu comando de compilación. + 4. Despliega usando `npx wrangler pages deploy dist`. +</Steps> ```bash # Instala Wrangler CLI @@ -87,7 +100,7 @@ npx astro add cloudflare Si prefieres instalar el adaptador manualmente, sigue los siguientes pasos: - +<Steps> 1. Añadir el adaptador `@astrojs/cloudflare` a las dependencias de tu proyecto usando tu gestor de paquetes preferido. Si estás usando npm o no estás seguro, ejecuta esto en la terminal: @@ -106,6 +119,7 @@ Si prefieres instalar el adaptador manualmente, sigue los siguientes pasos: adapter: cloudflare() }); ``` +</Steps> <ReadMore>Aprende más sobre [SSR en Astro](/es/guides/server-side-rendering/).</ReadMore> diff --git a/src/content/docs/es/guides/deploy/deno.mdx b/src/content/docs/es/guides/deploy/deno.mdx index 38e05f55006ea..16c1f07110112 100644 --- a/src/content/docs/es/guides/deploy/deno.mdx +++ b/src/content/docs/es/guides/deploy/deno.mdx @@ -4,7 +4,8 @@ description: Cómo desplegar tu proyecto de Astro en la web utilizando Deno. type: deploy i18nReady: true --- -import ReadMore from '~/components/ReadMore.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; Puedes desplegar tu proyecto de Astro con renderizado en el servidor (SSR) en [Deno Deploy](https://deno.com/deploy), un sistema distribuido que ejecuta JavaScript, TypeScript y WebAssembly en el edge, alrededor del mundo. @@ -33,6 +34,7 @@ npx astro add deno Si prefieres instalar el adaptador manualmente, sigue los siguientes dos pasos: +<Steps> 1. Añadir [el adaptador `@astrojs/deno`][Deno adapter] a las dependencias de tu proyecto usando tu gestor de paquetes preferido. Si estás usando npm o no estás seguro, ejecuta esto en la terminal: ```bash @@ -73,6 +75,7 @@ Si prefieres instalar el adaptador manualmente, sigue los siguientes dos pasos: ```bash npm run preview ``` +</Steps> ## Cómo desplegar un sitio de Astro SSR @@ -82,6 +85,7 @@ Puedes desplegar en Deno Deploy a través de GitHub Actions o utilizando la CLI Si tu proyecto está almacenado en GitHub, la [página web de Deno Deploy](https://dash.deno.com/) te guiará en la configuración de GitHub Actions para desplegar tu proyecto de Astro. +<Steps> 1. Sube tu código a un repositorio público o privado de GitHub. 2. Inicia sesión en [Deno Deploy](https://dash.deno.com/) con tu cuenta de GitHub y haz clic en [New Project](https://dash.deno.com). @@ -125,9 +129,11 @@ Si tu proyecto está almacenado en GitHub, la [página web de Deno Deploy](https 5. Después de hacer commit de este archivo YAML, y de subir a GitHub en tu rama de despliegue configurada, ¡el despliegue comenzará automáticamente! Puedes seguir el progreso utilizando la pestaña "Actions" de tu repositorio de GitHub, o en [Deno Deploy](https://dash.deno.com). +</Steps> ### Despliegue con la CLI +<Steps> 1. Instala la [Deno Deploy CLI](https://docs.deno.com/deploy/manual/deployctl). ```bash @@ -171,6 +177,7 @@ Si tu proyecto está almacenado en GitHub, la [página web de Deno Deploy](https ```bash DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> npm run deno-deploy ``` +</Steps> <ReadMore>Lee más sobre [SSR en Astro](/es/guides/server-side-rendering/).</ReadMore> diff --git a/src/content/docs/es/guides/deploy/edgio.mdx b/src/content/docs/es/guides/deploy/edgio.mdx index 3f360e0af1e9a..b335e2b5d2021 100644 --- a/src/content/docs/es/guides/deploy/edgio.mdx +++ b/src/content/docs/es/guides/deploy/edgio.mdx @@ -4,6 +4,7 @@ description: Cómo desplegar tu sitio Astro en la web usando Edgio. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Puedes desplegar tu proyecto de Astro en [Edgio](https://www.edg.io/), una plataforma de CDN y edge para desplegar, proteger y acelerar sitios web y APIs. @@ -13,6 +14,7 @@ Puedes desplegar tu proyecto de Astro en [Edgio](https://www.edg.io/), una plata ## ¿Cómo desplegar? +<Steps> 1. Instala [la CLI de Edgio](https://docs.edg.io/guides/cli) globalmente desde la Terminal, si aún no lo has hecho. ```bash @@ -46,3 +48,4 @@ Puedes desplegar tu proyecto de Astro en [Edgio](https://www.edg.io/), una plata ```bash edgio deploy ``` +</Steps> \ No newline at end of file diff --git a/src/content/docs/es/guides/deploy/flightcontrol.mdx b/src/content/docs/es/guides/deploy/flightcontrol.mdx index e45d37c2fd49a..de6125ac4cf7b 100644 --- a/src/content/docs/es/guides/deploy/flightcontrol.mdx +++ b/src/content/docs/es/guides/deploy/flightcontrol.mdx @@ -4,19 +4,29 @@ description: Cómo desplegar tu proyecto de Astro en AWS con Flightcontrol type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Puedes desplegar tu proyecto de Astro utilizando [Flightcontrol](https://www.flightcontrol.dev?ref=astro), que proporciona despliegues totalmente automatizados en tu cuenta de AWS. Es compatible con sitios estáticos y SSR. -1. Crea una cuenta de Flightcontrol en [app.flightcontrol.dev/signup](https://app.flightcontrol.dev/signup?ref=astro) -2. Ve a [app.flightcontrol.dev/projects/new/1](https://app.flightcontrol.dev/projects/new/1) +# ¿Cómo desplegar? + +<Steps> +1. Crea una cuenta de Flightcontrol en [app.flightcontrol.dev/signup](https://app.flightcontrol.dev/signup?ref=astro). + +2. Ve a [app.flightcontrol.dev/projects/new/1](https://app.flightcontrol.dev/projects/new/1). + 3. Conecta tu cuenta de GitHub y selecciona tu repositorio. + 4. Selecciona el "Tipo de configuración" deseado: - `GUI` (toda la configuración administrada a través de flightcontrol dashboard) donde seleccionará el preajuste `Astro Static` o `Astro SSR` - `flightcontrol.json` (opción "infraestructura como código" donde toda la configuración está alojada en tu repositorio) donde seleccionará una configuración ejemplo de Astro, luego la agregará al repositorio como `flightcontrol.json`. + 5. Ajusta cualquier configuración según sea necesario. + 6. Haz clic en "Crear proyecto" y completa los pasos necesarios, como vincular su cuenta de AWS. +</Steps> ### Configuración SSR diff --git a/src/content/docs/es/guides/deploy/flyio.mdx b/src/content/docs/es/guides/deploy/flyio.mdx index 60a71ecffb9ea..b30729dbe6759 100644 --- a/src/content/docs/es/guides/deploy/flyio.mdx +++ b/src/content/docs/es/guides/deploy/flyio.mdx @@ -5,6 +5,7 @@ type: deploy i18nReady: true stub: true --- +import { Steps } from '@astrojs/starlight/components'; Puedes desplegar tu proyecto de Astro en [Fly.io](https://fly.io/), una plataforma para ejecutar aplicaciones full stack y bases de datos cerca de tus usuarios. @@ -20,10 +21,13 @@ Por defecto tu proyecto de Astro es un sitio estático. No necesitas ninguna con Para habilitar el renderizado bajo demanda en tu proyecto de Astro y desplegarlo en Fly.io, agrega [el adaptador de Node.js](/es/guides/integrations-guide/node/). -## Cómo desplegar +## ¿Cómo desplegar? +<Steps> 1. [Regístrate en Fly.io](https://fly.io/docs/getting-started/log-in-to-fly/#first-time-or-no-fly-account-sign-up-for-fly) si aún no lo has hecho. + 2. [Instala `flyctl`](https://fly.io/docs/hands-on/install-flyctl/), tu centro de comandos de aplicaciones Fly.io. + 3. Ejecuta el siguiente comando en tu terminal. ```bash @@ -31,6 +35,7 @@ Para habilitar el renderizado bajo demanda en tu proyecto de Astro y desplegarlo ``` `flyctl` detectará automáticamente Astro, configurará los ajustes correctos, construirá tu imagen y la desplegará en la plataforma Fly.io. +</Steps> ## Generando tu Dockerfile para Astro. diff --git a/src/content/docs/es/guides/deploy/github.mdx b/src/content/docs/es/guides/deploy/github.mdx index 3df56b87b0795..bfbda36d3e2e8 100644 --- a/src/content/docs/es/guides/deploy/github.mdx +++ b/src/content/docs/es/guides/deploy/github.mdx @@ -4,6 +4,7 @@ description: Cómo desplegar tu proyecto de Astro usando GitHub Pages. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Puedes usar [GitHub pages](https://pages.github.com/) para desplegar tu proyecto de Astro directamente desde un repositorio en [GitHub.com](https://github.com/). @@ -81,6 +82,7 @@ export default defineConfig({ ## Configurar una acción de GitHub +<Steps> 1. Crea un nuevo archivo en tu proyecto en `.github/workflows/deploy.yml` y pega el siguiente YAML. ```yaml title="deploy.yml" @@ -108,7 +110,7 @@ export default defineConfig({ uses: actions/checkout@v4 - name: Install, build, and upload your site uses: withastro/action@v2 - # con: + # with: # path: . # La ubicación raíz de tu proyecto de Astro dentro del repositorio. (opcional) # node-version: 20 # La versión específica de Node que debería usarse para construir tu sitio. Por defecto es 20. (opcional) # package-manager: pnpm@latest # El gestor de paquetes de Node que debería usarse para instalar dependencias y construir tu sitio. Detectado automáticamente basado en tu lockfile. (opcional) @@ -138,7 +140,7 @@ export default defineConfig({ 3. Elige **GitHub Actions** como el **Source** de tu sitio. 4. Haz commit del nuevo archivo de flujo de trabajo y haz push a GitHub. - +</Steps> ¡Tu sitio debería estar publicado ahora! Cuando hagas push a los cambios en el repositorio de tu proyecto de Astro, la acción de GitHub los desplegará automáticamente por ti. diff --git a/src/content/docs/es/guides/deploy/gitlab.mdx b/src/content/docs/es/guides/deploy/gitlab.mdx index b8904347755a8..97ff3e9c4a6c6 100644 --- a/src/content/docs/es/guides/deploy/gitlab.mdx +++ b/src/content/docs/es/guides/deploy/gitlab.mdx @@ -4,6 +4,7 @@ description: Cómo desplegar tu proyecto de Astro usando GitLab Pages. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Puedes usar [GitLab Pages](https://pages.gitlab.io/) para alojar un proyecto de Astro para tu proyecto, grupo, o cuenta de usuario en [GitLab](https://about.gitlab.com/). @@ -13,8 +14,11 @@ Puedes usar [GitLab Pages](https://pages.gitlab.io/) para alojar un proyecto de ## Cómo desplegar +<Steps> 1. Establece el `site` correcto en `astro.config.mjs`. + 2. Renombra el directorio `public/` a `static`. + 3. Establece `outDir:public` en `astro.config.mjs`. Este ajuste le indica a Astro que coloque la salida de archivos estáticos al compilar en una carpeta llamada `public`, la cual es requerida por GitLab Pages para los archivos expuestos. Si estás usando el [directorio `public/`](/es/basics/project-structure/#public) como fuente de archivos estáticos en tu proyecto de Astro, renombralo y usa ese nuevo nombre del directorio en `astro.config.mjs` para el valor de `publicDir`. @@ -57,3 +61,4 @@ Puedes usar [GitLab Pages](https://pages.gitlab.io/) para alojar un proyecto de # rama(s) a continuación - main ``` +</Steps> \ No newline at end of file diff --git a/src/content/docs/es/guides/deploy/google-cloud.mdx b/src/content/docs/es/guides/deploy/google-cloud.mdx index 0b6a1f8f50840..8e01975e29758 100644 --- a/src/content/docs/es/guides/deploy/google-cloud.mdx +++ b/src/content/docs/es/guides/deploy/google-cloud.mdx @@ -4,6 +4,7 @@ description: Cómo desplegar tu proyecto de Astro usando Google Cloud. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Google Cloud](https://cloud.google.com/?hl=es-419) es una plataforma integral de alojamiento, que puede ser usada para desplegar un proyecto de Astro. @@ -11,6 +12,7 @@ i18nReady: true ### Cloud Storage (solo estático) +<Steps> 1. [Crea un nuevo proyecto GCP](https://console.cloud.google.com/projectcreate), o selecciona uno que ya tengas. 2. Crea un nuevo bucket dentro de [Cloud Storage](https://cloud.google.com/storage?hl=es-419). @@ -22,6 +24,7 @@ i18nReady: true 5. Habilita el acceso público añadiendo un nuevo permiso a `allUsers` llamado `Storage Object Viewer`. 6. Edita la configuración de sitio y agrega el `ìndex.html` como punto de entrada y el `404.html` como página de error. +</Steps> ### Cloud Run (SSR y estático) @@ -29,11 +32,13 @@ Cloud Run es una plataforma sin servidor que te permite ejecutar un contenedor s #### Prepara el servicio +<Steps> 1. [Crea un nuevo proyecto GCP](https://console.cloud.google.com/projectcreate), o selecciona uno que ya tengas. 2. Asegúrate de que la [API de Cloud Run](https://console.cloud.google.com/apis/library/run.googleapis.com) esté habilitada. 3. Crea un nuevo servicio. +</Steps> #### Crea un Dockerfile y Compila el Contenedor @@ -63,7 +68,6 @@ Cambia los valores siguientes en los comandos anteriores para que coincidan con - `TARGET-IMAGE`: el nombre para la imagen cuando se almacena en el registro. - `TAG` es la versión asociada con la imagen. - [Lee más en la documentación de Google Cloud.](https://cloud.google.com/artifact-registry/docs/docker/pushing-and-pulling?hl=es-419) **Usando otra herramienta**: diff --git a/src/content/docs/es/guides/deploy/google-firebase.mdx b/src/content/docs/es/guides/deploy/google-firebase.mdx index 52e0158efe823..02bbf7be8dfa5 100644 --- a/src/content/docs/es/guides/deploy/google-firebase.mdx +++ b/src/content/docs/es/guides/deploy/google-firebase.mdx @@ -4,7 +4,8 @@ description: Cómo desplegar tu proyecto de Astro usando Firebase Hosting de Goo type: deploy i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; [Firebase Hosting](https://firebase.google.com/products/hosting) es un servicio provisto por la plataforma de desarrollo de Google [Firebase](https://firebase.google.com/), el cual puede ser usado para desplegar un proyecto de Astro. @@ -26,8 +27,9 @@ Para habilitar SSR en tu proyecto de Astro y desplegarlo en Firebase, agrega el Desplegar un sitio SSR de Astro en Firebase requiere el [plan Blaze](https://firebase.google.com/pricing) o superior. ::: -## Cómo desplegar +## ¿Cómo desplegar? +<Steps> 1. Instala la [CLI de Firebase](https://github.com/firebase/firebase-tools). Esta es una herramienta de línea de comandos que te permite interactuar con Firebase desde la terminal. <PackageManagerTabs> @@ -127,3 +129,4 @@ Desplegar un sitio SSR de Astro en Firebase requiere el [plan Blaze](https://fir ``` </Fragment> </PackageManagerTabs> +</Steps> \ No newline at end of file diff --git a/src/content/docs/es/guides/deploy/heroku.mdx b/src/content/docs/es/guides/deploy/heroku.mdx index 3adf8a60290c1..697dfcd5008b9 100644 --- a/src/content/docs/es/guides/deploy/heroku.mdx +++ b/src/content/docs/es/guides/deploy/heroku.mdx @@ -4,6 +4,7 @@ description: Cómo desplegar tu proyecto de Astro usando Heroku. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Heroku](https://www.heroku.com/) es una platform-as-a-service para construir, ejecutar, y administrar aplicaciones modernas en la nube. Puedes desplegar un proyecto de Astro en Heroku usando esta guía. @@ -11,8 +12,9 @@ i18nReady: true Las siguientes instrucciones usan [el paquete obsoleto `heroku-static-buildpack`](https://github.com/heroku/heroku-buildpack-static#warning-heroku-buildpack-static-is-deprecated). Por favor consulta la [documentación de Heroku para usar `heroku-buildpack-nginx`](https://github.com/dokku/heroku-buildpack-nginx) en su lugar. ::: -## Cómo desplegar +## ¿Cómo desplegar? +<Steps> 1. Instala la [CLI de Heroku](https://devcenter.heroku.com/articles/heroku-cli). 2. Crea una cuenta en [Heroku](https://signup.heroku.com/). @@ -57,3 +59,4 @@ Las siguientes instrucciones usan [el paquete obsoleto `heroku-static-buildpack` # abre una ventana del navegador para ver el dashboard de la CLI de Heroku $ heroku open ``` +</Steps> \ No newline at end of file diff --git a/src/content/docs/es/guides/deploy/kinsta.mdx b/src/content/docs/es/guides/deploy/kinsta.mdx index 66a15361e34fc..445e4d7fbe43e 100644 --- a/src/content/docs/es/guides/deploy/kinsta.mdx +++ b/src/content/docs/es/guides/deploy/kinsta.mdx @@ -4,6 +4,7 @@ description: Como desplegar tu projecto de Astro en el hosting de aplicaciones d type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Puedes usar el [Hosting de aplicaciones Kinsta](https://kinsta.com/application-hosting/) para deplegar tu projecto Astro a la nube. @@ -41,6 +42,7 @@ Aquí están las líneas necesarias en tu archivo `package.json`: ``` ### SSR + :::tip[¿Buscas un ejemplo?] ¡Echa un vistazo [al proyecto oficial de Kinsta Application Hosting Starter para Astro SSR](https://github.com/kinsta/hello-world-astro-ssr)! ::: @@ -84,15 +86,22 @@ Aqui están las líneas necesarias para tu archivo `astro.config.mjs`: }); ``` -## Cómo desplegar +## ¿Cómo desplegar? Una vez que el repositorio de GitHub de tu proyecto esté conectado, puedes activar despliegues manuales en la aplicación de Kinsta en el **Panel de administración de MyKinsta**. También puedes configurar despliegues automáticos en el panel de administración. ### Configurando una nueva aplicación en Kinsta +<Steps> 1. Dirigete al panel de administración de [Mi Kinsta](https://my.kinsta.com/). + 2. Vaya a la pestaña **Aplicaciones**. + 3. Conecta tu repositorio de GitHub. + 4. Presione el botón **Agregar servicio** > **Aplicación**. + 5. Siga los pasos del asistente. + 6. Tu aplicación está desplegada. +</Steps> \ No newline at end of file diff --git a/src/content/docs/es/guides/deploy/microsoft-azure.mdx b/src/content/docs/es/guides/deploy/microsoft-azure.mdx index d0c7454aa2ed2..ab3c933e84d86 100644 --- a/src/content/docs/es/guides/deploy/microsoft-azure.mdx +++ b/src/content/docs/es/guides/deploy/microsoft-azure.mdx @@ -4,6 +4,7 @@ description: Cómo desplegar tu proyecto de Astro usando Microsoft Azure type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Azure](https://azure.microsoft.com/) es una plataforma en la nube de Microsoft. Puedes desplegar tu proyecto de Astro con el servicio de [Aplicaciones Web Estáticas](https://aka.ms/staticwebapps) de Microsoft. @@ -19,15 +20,18 @@ Para seguir esta guía necesitarás: ## Cómo desplegar +<Steps> 1. Abre tu proyecto en VS Code. 2. Abre la extensión de Aplicaciones Web Estáticas, inicia sesión en Azure, y haz clic en el botón de **+** para crear una nueva Aplicación Web Estática. Se te pedirá que designes la clave de subscripción a usar. 3. Sigue el asistente iniciado por la extensión para darle a tu aplicación un nombre, seleccionar un framework preestablecido y designar la raíz de tu aplicación (usualmente `/`) y la ubicación de los archivos generados `/dist`. Astro no está enlistado en las plantillas integradas de Azure por lo que necesitarás elegir `custom`. El asistente creará y ejecutará una [GitHub Action](https://github.com/features/actions) en tu repositorio dentro del directorio `.github`. +</Steps> La GitHub Action desplegará tu aplicación (puedes ver el progreso en la pestaña de Actions en GitHub). Cuando se complete con éxito, puedes ver tu aplicación en la dirección mostrada en la ventana de progreso de la Extensión de SWA haciendo clic en el botón de **Browse Website** (esto aparecerá después de que la GitHub Action se haya ejecutado). ## Problemas Conocidos + La acción yaml de GitHub que es creada automáticamente asume el uso de node 14. Esto significa que la compilación de Astro fallará. Para resolver esto actualiza el package.json de tus proyectos con este snippet. ``` diff --git a/src/content/docs/es/guides/deploy/netlify.mdx b/src/content/docs/es/guides/deploy/netlify.mdx index 08bbcca0fffad..8c97cc4f8fc9b 100644 --- a/src/content/docs/es/guides/deploy/netlify.mdx +++ b/src/content/docs/es/guides/deploy/netlify.mdx @@ -124,7 +124,7 @@ También puedes crear un nuevo sitio en Netlify y vincularlo a tu repositorio de ### Establece una Versión de Node.js -Si estás usando una [build image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) antigua (Xenial) en Netlify, asegúrate que tu versión de Node.js esté configurada. Astro requiere `v18.14.1` o mayor. +Si estás usando una [build image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) antigua (Xenial) en Netlify, asegúrate que tu versión de Node.js esté configurada. Astro requiere `v18.17.1` o `v20.3.0` o mayor. Puedes [especificar tu versión de Node.js en Netlify](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript) usando: - Un archivo [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) en tu directorio raíz. diff --git a/src/content/docs/es/guides/deploy/render.mdx b/src/content/docs/es/guides/deploy/render.mdx index 1f02d85a57bd7..667c5fc4a999f 100644 --- a/src/content/docs/es/guides/deploy/render.mdx +++ b/src/content/docs/es/guides/deploy/render.mdx @@ -4,17 +4,23 @@ description: Cómo desplegar tu proyecto de Astro en Render type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Puedes desplegar tu proyecto de Astro en [Render](https://render.com/), un servicio para crear sitios web con certificados TLS gratuitos, una CDN global, protección DDoS, redes privadas y despliegues automáticos desde Git. ## Cómo desplegar -1. Crea una [cuenta de render.com](https://dashboard.render.com/) e inicia sesión +<Steps> +1. Crea una [cuenta de render.com](https://dashboard.render.com/) e inicia sesión. + 2. Haz clic en el botón **New +** en el dashboard y selecciona **Static Site** -3. Conecta tu repositorio de [GitHub](https://github.com/) o [GitLab](https://about.gitlab.com/) o, alternativamente, ingresa la URL pública del repositorio + +3. Conecta tu repositorio de [GitHub](https://github.com/) o [GitLab](https://about.gitlab.com/) o, alternativamente, ingresa la URL pública del repositorio. + 4. Asigna un nombre a tu sitio web, selecciona la rama y especifica el comando de compilación y el directorio de publicación - **build command:** `npm run build` - **publish directory:** `dist` - - **Environment variables (advanced)**: Por defecto, Render usa Node.js 14.17.0, pero Astro [requiere una versión superior](/es/install/auto/#prerrequisitos). Añade una variable de entorno con una **Variable key** de `NODE_VERSION` y un **Value** de `18.14.1` o superior para indicarle a Render que use una versión compatible de Node.js. Alternativamente, añade un archivo [`.node-version`](https://render.com/docs/node-version) o [`.nvmrc`](https://render.com/docs/node-version) a tu proyecto para especificar una versión de Node.js. -5. Haz clic en el botón **Create Static Site** + - **Environment variables (advanced)**: Por defecto, Render usa Node.js 14.17.0, pero Astro [requiere una versión superior](/es/install/auto/#prerrequisitos). Añade una variable de entorno con una **Variable key** de `NODE_VERSION` y un **Value** de `v18.17.1` o `v20.3.0` o superior para indicarle a Render que use una versión compatible de Node.js. Alternativamente, añade un archivo [`.node-version`](https://render.com/docs/node-version) o [`.nvmrc`](https://render.com/docs/node-version) a tu proyecto para especificar una versión de Node.js. +5. Haz clic en el botón **Create Static Site**. +</Steps> diff --git a/src/content/docs/es/guides/deploy/space.mdx b/src/content/docs/es/guides/deploy/space.mdx index 30999c02c5fae..c1157a6f3cfa4 100644 --- a/src/content/docs/es/guides/deploy/space.mdx +++ b/src/content/docs/es/guides/deploy/space.mdx @@ -5,7 +5,8 @@ type: deploy i18nReady: true --- import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro'; -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; [Deta Space](https://deta.space/developers) es una computadora personal que vive en la nube — una "nube personal". Puedes construir y ejecutar aplicaciones para ti mismo en tu propio "Espacio". Puedes publicar las aplicaciones que has construido y se ejecutarán para personas en todo el mundo. @@ -38,10 +39,14 @@ El CLI de Space intentará detectar automáticamente la configuración de tu apl ### Sitio estático Realiza los siguientes cambios en el archivo `Spacefile` en la raíz de tu proyecto generado por el CLI de Space: - + +<Steps> 1. Cambia el motor a `static`. + 2. Agrega el comando de construcción de Astro a la lista de `commands`. + 3. Sirve el directorio `dist` generado por Astro. +</Steps> ```yaml title="Spacefile" {6,8,9} # Documentación de Spacefile: https://deta.space/docs/en/build/reference/spacefile @@ -60,10 +65,15 @@ micros: Realiza los siguientes cambios en el archivo `Spacefile` en la raíz de tu proyecto generado por el CLI de Space: +<Steps> 1. Configura el motor `nodejs16`. + 2. Agrega el comando `build`. + 3. Incluye el directorio `dist` generado por Astro. + 4. Ejecuta el comando node. +</Steps> ```yaml title="Spacefile" {6,8,10,11} # Spacefile Docs: https://deta.space/docs/en/build/reference/spacefile diff --git a/src/content/docs/es/guides/deploy/sst.mdx b/src/content/docs/es/guides/deploy/sst.mdx index 2edcee915bafe..d095c1bac8450 100644 --- a/src/content/docs/es/guides/deploy/sst.mdx +++ b/src/content/docs/es/guides/deploy/sst.mdx @@ -4,6 +4,7 @@ description: Cómo desplegar tu sitio Astro en AWS con SST type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Puedes desplegar un proyecto de Astro usando [SST](https://sst.dev), un framework de código abierto para desplegar aplicaciones completamente serverless en AWS con soporte SSG y SSR. @@ -11,17 +12,20 @@ Además, puedes usar cualquier construcción SST adicional como Cron Jobs, Bucke ## Inicio rápido +<Steps> 1. Crea un proyecto de Astro. -2. Ejecuta `npx create-sst` +2. Ejecuta `npx create-sst`. 3. Debería detectar que estás usando Astro y pedirte confirmación. -4. Una vez que estés listo para el despliegue, puedes ejecutar `npx sst deploy --stage=production` +4. Una vez que estés listo para el despliegue, puedes ejecutar `npx sst deploy --stage=production`. +</Steps> También puedes ver [un vídeo tutorial de este proceso](https://www.youtube.com/watch?v=AFP3ZHxO7Gg) que te guiará a través de los pasos. ### Constructs SST + Para usar cualquier [construct SST](https://docs.sst.dev/) adicional, añádelos a tu `sst.config.ts`. ```ts {2} {4} title="sst.config.ts" diff --git a/src/content/docs/es/guides/deploy/stormkit.mdx b/src/content/docs/es/guides/deploy/stormkit.mdx index 6aa6cfc4eaef9..f5f90f2f78e06 100644 --- a/src/content/docs/es/guides/deploy/stormkit.mdx +++ b/src/content/docs/es/guides/deploy/stormkit.mdx @@ -4,13 +4,14 @@ description: Despliega tu sitio de Astro en Stormkit type: deploy i18nReady: true --- - import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; Puedes desplegar tu proyecto de Astro en [Stormkit](https://stormkit.io/), una plataforma de despliegues para sitios web estáticos, aplicaciones de una página (SPAs) y funciones serverless. -## Comó desplegar +## ¿Cómo desplegar? +<Steps> 1. [Inicia sesión en Stormkit](https://app.stormkit.io/auth). 2. Utilizando la interfaz de usuario, importa tu proyecto de Astro desde uno de los tres proveedores de Git admitidos (GitHub, GitLab o Bitbucket). @@ -20,5 +21,6 @@ Puedes desplegar tu proyecto de Astro en [Stormkit](https://stormkit.io/), una p 4. Verifica el comando de construcción en tu [configuración de Stormkit](https://stormkit.io/docs/deployments/configuration). Por defecto, Stormkit CI ejecutará `npm run build` pero puedes especificar un comando de construcción personalizado en esta página. 5. Haz clic en el botón "Deploy Now" para desplegar tu sitio. +</Steps> <ReadMore>Lee más en la [Documentación de Stormkit](https://stormkit.io/docs).</ReadMore> diff --git a/src/content/docs/es/guides/deploy/surge.mdx b/src/content/docs/es/guides/deploy/surge.mdx index 846c3baab1388..5aba5504941a6 100644 --- a/src/content/docs/es/guides/deploy/surge.mdx +++ b/src/content/docs/es/guides/deploy/surge.mdx @@ -4,11 +4,13 @@ description: Cómo desplegar tu proyecto de Astro usando surge.sh type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Puedes desplegar tu proyecto de Astro en [Surge](https://surge.sh/), una plataforma diseñada para desarrolladores front-end para publicar sitios web usando solo un comando. -## Cómo desplegar +## ¿Cómo desplegar? +<Steps> 1. Instala [la CLI de Surge](https://www.npmjs.com/package/surge) de forma global desde la Terminal, si aún no lo has hecho. ```shell @@ -28,3 +30,4 @@ Puedes desplegar tu proyecto de Astro en [Surge](https://surge.sh/), una platafo ``` Puedes usar un [dominio personalizado](http://surge.sh/help/adding-a-custom-domain) al hacer despliegues ejecutando `surge dist tudominio.com`. +</Steps> \ No newline at end of file diff --git a/src/content/docs/es/guides/deploy/vercel.mdx b/src/content/docs/es/guides/deploy/vercel.mdx index 6eac31d5b16de..a2909c93b6ecb 100644 --- a/src/content/docs/es/guides/deploy/vercel.mdx +++ b/src/content/docs/es/guides/deploy/vercel.mdx @@ -84,8 +84,4 @@ Una vez que tu proyecto ha sido importado y desplegado, todos los envíos subsec Puedes usar `vercel.json` para sobrescribir el comportamiento predeterminado de Vercel y para configurar ajustes adicionales. Por ejemplo, es posible que desees adjuntar encabezados a las respuestas HTTP de tus despliegues. -<ReadMore>Aprende más sobre la [configuración de Vercel](https://vercel.com/docs/configuration).</ReadMore> - -### Actualizando a Astro 2.0 - -La versión v2.0 de Astro deja de dar soporte a Node 14, así que asegúrate de que tu proyecto esté usando **Node `18.14.1` o posterior**. Puedes [definir la versión de Node.js](https://vercel.com/changelog/node-js-version-now-customizable-in-the-project-settings) que se utilizará durante el paso de compilación y las funciones serverless desde la página General en la configuración del proyecto. +<ReadMore>Aprende más sobre la [configuración de Vercel](https://vercel.com/docs/configuration).</ReadMore> \ No newline at end of file diff --git a/src/content/docs/es/guides/deploy/zeabur.mdx b/src/content/docs/es/guides/deploy/zeabur.mdx index 6b9894c09f96c..5a47fa1260253 100644 --- a/src/content/docs/es/guides/deploy/zeabur.mdx +++ b/src/content/docs/es/guides/deploy/zeabur.mdx @@ -4,6 +4,8 @@ description: Cómo desplegar tu sitio de Astro en la web en Zeabur. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; + [Zeabur](https://zeabur.com) ofrece alojamiento para aplicaciones web full-stack. Los sitios Astro se pueden alojar tanto como SSR o salida estática. Esta guía incluye instrucciones para desplegar en Zeabur a través de la UI del sitio web. @@ -18,6 +20,7 @@ Astro genera un sitio estático de forma predeterminada. No es necesario ninguna Para habilitar SSR en tu proyecto de Astro y desplegar en Zeabur: +<Steps> 1. Instala [El adaptador `@zeabur/astro-adapter`](https://www.npmjs.com/package/@zeabur/astro-adapter) a las dependencias de tu proyecto utilizando tu gestor de paquetes preferido. Si estás utilizando npm o no estás seguro, ejecuta esto en la terminal: ```bash @@ -35,11 +38,13 @@ Para habilitar SSR en tu proyecto de Astro y desplegar en Zeabur: adapter: zeabur(), }); ``` +</Steps> -## Como desplegar +## ¿Cómo desplegar? Puedes desplegar tu sitio Astro en Zeabur si el proyecto está almacenado en GitHub. +<Steps> 1. Haz clic en <kbd>Create new project</kbd> en el [panel de Zeabur](https://dash.zeabur.com). 2. Configura la instalación de GitHub e importa el repositorio. @@ -47,6 +52,7 @@ Puedes desplegar tu sitio Astro en Zeabur si el proyecto está almacenado en Git 3. Zeabur detectará automáticamente que tu proyecto es un proyecto de Astro y lo construirá usando el comando `astro build`. 4. Una vez que se complete la compilación, puedes vincular un dominio a tu sitio y visitarlo. +</Steps> Después de que tu proyecto haya sido importado y desplegado, todas las siguientes confirmaciones a las ramas generarán nuevas compilaciones. diff --git a/src/content/docs/es/guides/deploy/zerops.mdx b/src/content/docs/es/guides/deploy/zerops.mdx new file mode 100644 index 0000000000000..6ec4e86679812 --- /dev/null +++ b/src/content/docs/es/guides/deploy/zerops.mdx @@ -0,0 +1,164 @@ +--- +title: Despliega tu sitio de Astro en Zerops +description: Cómo desplegar tu sitio de Astro en la web usando Zerops. +type: deploy +i18nReady: true +--- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; + +[Zerops](https://zerops.io/) es una plataforma en la nube centrada en el desarrollo que se puede utilizar para desplegar un sitio Astro SSR. + +Esta guía te guiará a través del despliegue de un proyecto de Astro utilizando el adaptador Node.js en Zerops. + +## Prerrequisitos + +- **Un proyecto de Astro usando el [adaptador SSR `@astrojs/node`](/es/guides/integrations-guide/node/)** +- **Una cuenta de Zerops** - Si aún no tienes una, puedes [crear una cuenta de Zerops](https://zerops.io/) de forma gratuita. + +:::tip[Comienza desde una plantilla] +¡El [ejemplo de aplicación Zerops x Astro - Node.js](https://github.com/zeropsio/recipe-astro-nodejs) se puede importar directamente en tu [Panel de Zerops](https://app.zerops.io/dashboard/projects) y desplegar en un solo clic! + +```yaml +project: + name: astro +services: + - hostname: astronode + type: nodejs@20 + buildFromGit: https://github.com/zeropsio/recipe-astro-nodejs + ports: + - port: 4321 + httpSupport: true + enableSubdomainAccess: true + minContainers: 1 +``` +::: + +## Crear un proyecto de Node.js en Zerops + +Puedes crear un servicio Node.js para tu sitio Astro a través del [asistente `project add` de Zerops](https://app.zerops.io/dashboard/project-add) o importando un sitio Astro usando `.yaml`. + +La siguiente estructura YAML configurará un proyecto llamado `my-astro-sites` con un servicio Node.js v20 llamado `hellothere`. Un proyecto de Zerops puede contener muchas aplicaciones Astro. + +```yaml +project: + name: my-astro-sites +services: + - hostname: hellothere + type: nodejs@20 + ports: + - port: 4321 + httpSupport: true + minContainers: 1 +``` + + +## Construir y desplegar tu aplicación en Zerops + +Ahora que has preparado un servicio Node.js en Zerops, necesitarás crear un archivo `zerops.yml` en la raíz de tu proyecto para activar el proceso de compilación y despliegue en Zerops. + +El siguiente ejemplo muestra la configuración de las operaciones de construcción y ejecución necesarias para el proyecto de ejemplo con el nombre de host `hellothere`: + + <PackageManagerTabs> + <Fragment slot="npm"> + ```yaml title="zerops.yml" + zerops: + - setup: hellothere + build: + base: nodejs@20 + buildCommands: + - npm i + - npm run build + deploy: + - dist + - package.json + - node_modules + cache: + - node_modules + - package-lock.json + run: + start: node dist/server/entry.mjs + envVariables: + HOST: 0.0.0.0 + NODE_ENV: production + ``` + </Fragment> + <Fragment slot="pnpm"> + ```yaml title="zerops.yml" + zerops: + - setup: hellothere + build: + base: nodejs@20 + buildCommands: + - pnpm i + - pnpm run build + deploy: + - dist + - package.json + - node_modules + cache: + - node_modules + - pnpm-lock.json + run: + start: node dist/server/entry.mjs + envVariables: + HOST: 0.0.0.0 + NODE_ENV: production + ``` + </Fragment> + <Fragment slot="yarn"> + ```yaml title="zerops.yml" + zerops: + - setup: astronode + build: + base: nodejs@20 + buildCommands: + - yarn + - yarn build + deploy: + - dist + - package.json + - node_modules + cache: + - node_modules + - yarn.lock + run: + start: node dist/server/entry.mjs + envVariables: + HOST: 0.0.0.0 + NODE_ENV: production + ``` + </Fragment> + </PackageManagerTabs> + +### Desencadenar el pipeline usando GitHub / GitLab +Para configurar el despliegue continuo en una rama o en un nuevo lanzamiento, ve a los detalles del servicio Node.js y conecta tu servicio de Zerops con un repositorio de GitHub o GitLab. + + +### Desencadenar el pipeline usando Zerops CLI (zcli) + +<Steps> +1. Instala la CLI de Zerops. + ```shell + # Para descargar el binario de zcli directamente, + # usa https://github.com/zeropsio/zcli/releases + npm i -g @zerops/zcli + ``` + +2. Abre [`Settings > Access Token Management`](https://app.zerops.io/settings/token-management) en la aplicación de Zerops y genera un nuevo token de acceso. + +3. Inicia sesión usando tu token de acceso con el siguiente comando: + ```shell + zcli login <token> + ``` + +4. Navega a la raíz de tu aplicación (donde se encuentra `zerops.yml`) y ejecuta el siguiente comando para desencadenar el despliegue: + ```shell + zcli push + ``` +</Steps> + +## Recursos + +- [Desplegando Astro a Zerops en 3 minutos](https://medium.com/@arjunaditya/how-to-deploy-astro-to-zerops-4230816a62b4) +- [Guía detallada para crear un servicio Node.js en Zerops](https://docs.zerops.io/nodejs/how-to/create) diff --git a/src/content/docs/es/guides/ecommerce.mdx b/src/content/docs/es/guides/ecommerce.mdx index 30e630a7ef339..0bb025a9b7a44 100644 --- a/src/content/docs/es/guides/ecommerce.mdx +++ b/src/content/docs/es/guides/ecommerce.mdx @@ -3,8 +3,9 @@ title: Comercio electrónico description: Una introducción para agregar opciones de comercio electrónico a tu sitio de Astro i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import ReadMore from '~/components/ReadMore.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; +import ReadMore from '~/components/ReadMore.astro'; Con Astro, puedes construir varias opciones de comercio electrónico, desde enlaces de pago hasta páginas de pago alojadas para construir una tienda completa utilizando una API de servicios de pago. @@ -22,11 +23,13 @@ La sencilla [biblioteca para JavaScript de Lemon.js](https://docs.lemonsqueezy.c El siguiente es un ejemplo de cómo agregar un elemento "Comprar ahora" de Lemon Squeezy a una página de Astro. Al hacer clic en este enlace se abrirá un proceso de pago y permitirá al visitante completar una compra única. +<Steps> 1. Agrega la siguiente etiqueta `<script>` al `head` o `body` de tu página: ```html title="src/pages/my-product-page.astro" <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script> ``` + 2. Crea una etiqueta de anclaje en la página que enlace a la URL de tu producto. Incluye la clase `lemonsqueezy-button` para abrir una superposición de pago al hacer clic. ```html title="src/pages/my-product-page.astro" @@ -34,6 +37,7 @@ El siguiente es un ejemplo de cómo agregar un elemento "Comprar ahora" de Lemon Comprar ahora </a> ``` +</Steps> #### Lemon.js @@ -53,6 +57,7 @@ El siguiente es un ejemplo de cómo agregar un elemento "Comprar ahora" de Paddl Después de que tu dominio de enlace de pago predeterminado (tu propio sitio web) sea aprobado por Paddle, puedes convertir cualquier elemento de tu página en un disparador para una superposición de pago utilizando atributos de datos HTML. +<Steps> 1. Agrega las siguientes dos etiquetas `<script>` al `head` o `body` de tu página: ```html title="src/pages/my-product-page.astro" @@ -63,11 +68,13 @@ Después de que tu dominio de enlace de pago predeterminado (tu propio sitio web }); </script> ``` + 2. Convierte cualquier elemento de tu página en un botón de pago de Paddle agregando la clase `paddle_button`: ```html title="src/pages/my-product-page.astro" <a href='#' class='paddle_button'>Comprar ahora</a> ``` + 3. Agrega un atributo `data-items` para especificar el `priceID` y la `quantity` de tu producto en Paddle. También puedes pasar opcionalmente [atributos de datos HTML](https://developer.paddle.com/paddlejs/html-data-attributes) adicionales para prellenar datos, manejar el éxito del pago, o dar estilo a tu botón y superposición de pago: ```html title="src/pages/my-product-page.astro" @@ -88,6 +95,7 @@ Después de que tu dominio de enlace de pago predeterminado (tu propio sitio web Comprar ahora </a> ``` +</Steps> #### Paddle.js @@ -116,6 +124,7 @@ El siguiente es un ejemplo de cómo configurar un pago de Snipcart y agregar ele <ReadMore>Para leer las instrucciones completas, incluyendo la configuración de tu tienda Snipcart, por favor ve [la documentación de instalación de Snipcart](https://docs.snipcart.com/v3/setup/installation).</ReadMore> +<Steps> 1. Agrega el script [como se muestra en las instrucciones de instalación de Snipcart](https://docs.snipcart.com/v3/setup/installation) en tu página después del elemento `<body>`. ```html title="src/pages/my-product-page.astro" <body></body> @@ -169,6 +178,7 @@ El siguiente es un ejemplo de cómo configurar un pago de Snipcart y agregar ele ```html title="src/pages/my-product-page.astro" <button class="snipcart-checkout">Haz clic aquí para pagar</button> ``` +</Steps> #### Snipcart JavaScript SDK diff --git a/src/content/docs/es/guides/images.mdx b/src/content/docs/es/guides/images.mdx index 0db12258c8034..47cc4d7f319f1 100644 --- a/src/content/docs/es/guides/images.mdx +++ b/src/content/docs/es/guides/images.mdx @@ -490,7 +490,7 @@ Alternativamente, si el CDN proporciona un SDK de Node.js, puedes utilizarlo en ## Imágenes en archivos Markdown -Utiliza la sintaxis estándar de Markdown `![alt](src)` en tus archivos `.md`. Esta sintaxis funciona con la [API de servicio de imagenes](/es/reference/image-service-reference/) de Astro para optimizar tus imágenes locales y las imágenes remotas autorizadas. +Utiliza la sintaxis estándar de Markdown `![alt](src)` en tus archivos `.md`. Esta sintaxis funciona con la [API de servicio de imagenes](/es/reference/image-service-reference/) de Astro para optimizar tus imágenes locales almacenadas en `src/`. Las imágenes remotas y las imágenes almacenadas en la carpeta `public/` no son optimizadas. ```md <!-- src/pages/post-1.md --> diff --git a/src/content/docs/es/guides/integrations-guide/lit.mdx b/src/content/docs/es/guides/integrations-guide/lit.mdx index 60e9ccc18f4c6..5d15d4c4fd892 100644 --- a/src/content/docs/es/guides/integrations-guide/lit.mdx +++ b/src/content/docs/es/guides/integrations-guide/lit.mdx @@ -127,6 +127,34 @@ import { MyElement } from '../components/my-element.js'; Lit requiere que los globales del navegador, como `HTMLElement` y `customElements`, estén presentes. Por esta razón, el renderizador de Lit simula estos globales en el servidor para que Lit pueda funcionar. Es *posible* que te encuentres con bibliotecas que funcionen incorrectamente debido a esto. ::: +### Decoradores Experimentales + +Para utilizar los [decoradores experimentales en Lit](https://lit.dev/docs/components/decorators/), agrega las siguientes lineas en tu archivo `tsconfig.json`: + +```json title="tsconfig.json" add={3} +{ + "compilerOptions": { + "experimentalDecorators": true, + } +} +``` + +Esto te permite utilizar los decoradores experimentales como `@customElement` y `@state` para registrar un elemento personalizado y definir una propiedad de estado en tu componente Lit: + +```ts title="src/components/my-element.ts" +import { LitElement, html } from "lit"; +import { customElement, state } from "lit/decorators.js"; + +@customElement("my-element") +export class MyElement extends LitElement { + @state() name = "my-element"; + + override render() { + return html`<p>¡Hola Mundo! Desde ${this.name}</p>`; + } +} +``` + ### Polyfills y Hidratación El renderizador maneja automáticamente la adición de los polifills adecuados para brindar soporte en navegadores que no tienen Declarative Shadow DOM. El polifill tiene un tamaño aproximado de *1.5kB*. Si el navegador admite Declarative Shadow DOM, se cargan menos de 250 bytes (para detectar la compatibilidad con la función). diff --git a/src/content/docs/es/guides/integrations-guide/markdoc.mdx b/src/content/docs/es/guides/integrations-guide/markdoc.mdx index 21eb267caf0b9..739c8be295e4f 100644 --- a/src/content/docs/es/guides/integrations-guide/markdoc.mdx +++ b/src/content/docs/es/guides/integrations-guide/markdoc.mdx @@ -8,6 +8,7 @@ i18nReady: true --- import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; import ReadMore from '~/components/ReadMore.astro'; Esta **[integración de Astro][astro-integration]** permite el uso de [Markdoc](https://markdoc.dev/) para crear componentes, páginas y entradas de colecciones de contenido. @@ -423,6 +424,7 @@ El componente `<Image />` de Astro no puede usarse directamente en Markdoc. Sin Para anular el nodo de imagen predeterminado, puedes configurar un componente `.astro` para ser renderizado en lugar de un `<img>` estándar. +<Steps> 1. Construye un componente personalizado `MarkdocImage.astro` para pasar las propiedades `src` y `alt` requeridas de tu imagen al componente `<Image />`: ```astro title="src/components/MarkdocImage.astro" @@ -479,6 +481,7 @@ Para anular el nodo de imagen predeterminado, puedes configurar un componente `. <!-- <img> sin optimizar --> ![Una foto de un perro](https://example.com/dog.jpg) ``` +</Steps> #### Crear una etiqueta de imagen personalizada de Markdoc @@ -486,6 +489,7 @@ Una etiqueta `image` de Markdoc te permite establecer atributos adicionales en t Los siguientes pasos crearán una etiqueta de imagen personalizada de Markdoc para mostrar un elemento `<figure>` con una leyenda, usando el componente `<Image />` de Astro para optimizar la imagen. +<Steps> 1. Crea un componente `MarkdocFigure.astro` para recibir las props necesarias y renderizar una imagen con una leyenda: ```astro title="src/components/MarkdocFigure.astro" @@ -527,7 +531,7 @@ Los siguientes pasos crearán una etiqueta de imagen personalizada de Markdoc pa ```md {% image src="./astro-logo.png" alt="Logo de Astro" width="100" height="100" caption="a caption!" %} ``` - +</Steps> ## Configuración avanzada de Markdoc diff --git a/src/content/docs/es/guides/integrations-guide/mdx.mdx b/src/content/docs/es/guides/integrations-guide/mdx.mdx index 8fecae79508de..9b55caf275d84 100644 --- a/src/content/docs/es/guides/integrations-guide/mdx.mdx +++ b/src/content/docs/es/guides/integrations-guide/mdx.mdx @@ -8,6 +8,7 @@ i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import ReadMore from '~/components/ReadMore.astro' +import Since from '~/components/Since.astro' Esta **[integración de Astro][astro-integration]** permite el uso de componentes [MDX](https://mdxjs.com/) y te permite crear páginas como archivos `.mdx`. @@ -194,7 +195,7 @@ Sugerimos [utilizar AST Explorer](https://astexplorer.net/) para experimentar co ### `optimize` -* **Tipo:** `boolean | { customComponentNames?: string[] }` +* **Tipo:** `boolean | { ignoreElementNames?: string[] }` Esta es una configuración opcional para optimizar la salida de MDX y acelerar las compilaciones y el renderizado mediante un plugin interno de rehype. Esto puede ser útil si tienes muchos archivos MDX y notas que las compilaciones son lentas. Sin embargo, esta opción puede generar HTML no escapado, por lo que asegúrate de que las partes interactivas de tu sitio sigan funcionando correctamente después de habilitarla. @@ -213,11 +214,14 @@ export default defineConfig({ }); ``` -#### `customComponentNames` +#### `ignoreElementNames` * **Tipo:** `string[]` -Una propiedad opcional de `optimize` para evitar que el optimizador de MDX maneje cualquier [componente personalizado pasado al contenido de MDX importado a través de la prop `components`](/es/guides/markdown-content/#componentes-personalizados-con-mdx-importado). +<p><Since pkg="@astrojs/mdx" v="3.0.0" /></p> +Anteriormente conocido como `customComponentNames`. + +Una propiedad opcional de `optimize` para prevenir que el optimizador MDX maneje ciertos nombres de elementos, como [componentes personalizados pasados al contenido MDX importado a través de la propiedad components](/es/guides/markdown-content/#configuración-de-markdown-y-mdx) Deberás excluir estos componentes de la optimización, ya que el optimizador convierte el contenido en una cadena estática de forma anticipada, lo cual romperá los componentes personalizados que necesitan ser renderizados de forma dinámica. @@ -231,7 +235,7 @@ import Heading from '../Heading.astro'; <Content components={{ ...components, h1: Heading }} /> ``` -Para configurar la optimización de esto utilizando la propiedad `customComponentNames`, especifica un arreglo de nombres de elementos HTML que deben tratarse como componentes personalizados: +Para configurar la optimización de esto utilizando la propiedad `ignoreElementNames`, especifica un arreglo de nombres de elementos HTML que deben tratarse como componentes personalizados: ```js title="astro.config.mjs" import { defineConfig } from 'astro/config'; @@ -242,8 +246,7 @@ export default defineConfig({ mdx({ optimize: { // Evita que el optimizador maneje los elementos `h1` - // Estos serán tratados como componentes personalizados - customComponentNames: ['h1'], + ignoreElementNames: ['h1'], }, }), ], diff --git a/src/content/docs/es/guides/integrations-guide/preact.mdx b/src/content/docs/es/guides/integrations-guide/preact.mdx index cd173c2f8238d..0c8a0f660094e 100644 --- a/src/content/docs/es/guides/integrations-guide/preact.mdx +++ b/src/content/docs/es/guides/integrations-guide/preact.mdx @@ -8,6 +8,7 @@ i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import Since from '~/components/Since.astro'; Esta **[integración de Astro][astro-integration]** habilita el renderizado del lado del servidor y la hidratación del lado del cliente para tus componentes de [Preact](https://preactjs.com/). @@ -151,6 +152,22 @@ Consulta las documentaciónes de [`pnpm` overrides](https://pnpm.io/package_json Actualmente, la opción `compat` solo funciona para las bibliotecas de React que exportan código como ESM. Si ocurre un error durante la compilación, intenta agregar la biblioteca a `vite.ssr.noExternal: ['the-react-library']` en tu archivo `astro.config.mjs`. ::: +### devtools + +<p><Since pkg="@astrojs/preact" v="3.3.0" /></p> + +Puedes habilitar las [herramientas de desarrollo de Preact](https://preactjs.github.io/preact-devtools/) en desarrollo pasando un objeto con `devtools: true` a la configuración de tu integración `preact()`: + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; +import preact from '@astrojs/preact'; + +export default defineConfig({ + // ... + integrations: [preact({ devtools: true })], +}); +``` + ## Opciones ### Combinando múltiples frameworks JSX diff --git a/src/content/docs/es/guides/markdown-content.mdx b/src/content/docs/es/guides/markdown-content.mdx index 6b67978a0a46c..0886e540e049d 100644 --- a/src/content/docs/es/guides/markdown-content.mdx +++ b/src/content/docs/es/guides/markdown-content.mdx @@ -409,7 +409,7 @@ export default defineConfig({ markdown: { // Aplicado a archivos .md y .mdx remarkPlugins: [remarkToc], - rehypePlugins: [rehypeAccessibleEmojis], + rehypePlugins: [rehypeAccessibleEmojis], }, }); ``` diff --git a/src/content/docs/fr/reference/cli-reference.mdx b/src/content/docs/fr/reference/cli-reference.mdx index 91d1c4064a473..c9782d947de94 100644 --- a/src/content/docs/fr/reference/cli-reference.mdx +++ b/src/content/docs/fr/reference/cli-reference.mdx @@ -226,6 +226,30 @@ Utilisez ces options pour personnaliser le comportement d'une commande. La commande surveillera toute modification apportée aux fichiers `.astro` et signalera toute erreur. +#### `--root <path-to-dir>` + +Spécifie un autre répertoire racine à vérifier. Par défaut, le répertoire de travail actuel est utilisé. + +#### `--tsconfig <path-to-file>` + +Spécifie un fichier `tsconfig.json` ou `jsconfig.json` à utiliser manuellement. S'il n'est pas fourni, Astro essaiera de trouver une configuration, ou déduira automatiquement la configuration du projet. + +#### `--minimumFailingSeverity <error|warning|hint>` + +Spécifie la gravité minimale nécessaire pour sortir avec un code d'erreur. La valeur par défaut est `error`. + +Par exemple, l'exécution de `astro check --minimumFailingSeverity warning` entraînera la sortie de la commande avec une erreur si des avertissements sont détectés. + +#### `--minimumSeverity <error|warning|hint>` + +Spécifie la gravité minimale à afficher. La valeur par défaut est `hint`. + +Par exemple, l'exécution de `astro check --minimumSeverity warning` montrera les erreurs et les avertissements, mais pas les indices. + +#### `--preserveWatchOutput` + +Spécifie qu'il ne faut pas effacer la sortie entre les contrôles lorsqu'on est en mode de surveillance. + <ReadMore>En savoir plus sur le [support de TypeScript dans Astro](/fr/guides/typescript/).</ReadMore> ## `astro sync` diff --git a/src/content/docs/fr/reference/error-reference.mdx b/src/content/docs/fr/reference/error-reference.mdx index 7f44f8c531870..cf98dde134334 100644 --- a/src/content/docs/fr/reference/error-reference.mdx +++ b/src/content/docs/fr/reference/error-reference.mdx @@ -76,7 +76,7 @@ La référence suivante est une liste complète des erreurs que vous pouvez renc - [**MissingIndexForInternationalization**](/fr/reference/errors/missing-index-for-internationalization/)<br/>Page d'index non trouvée. - [**IncorrectStrategyForI18n**](/fr/reference/errors/incorrect-strategy-for-i18n/)<br/>Vous ne pouvez pas utiliser la fonction actuelle avec la stratégie actuelle. - [**NoPrerenderedRoutesWithDomains**](/fr/reference/errors/no-prerendered-routes-with-domains/)<br/>Les itinéraires pré-rendus ne sont pas pris en charge lorsque les domaines d'internationalisation sont activés. -- [**MissingMiddlewareForInternationalization**](/fr/reference/errors/missing-middleware-for-internationalization/)<br/>Permet le routage manuel de l'internationalisation sans avoir recours à un middleware. +- [**MissingMiddlewareForInternationalization**](/fr/reference/errors/missing-middleware-for-internationalization/)<br/>Routage manuel de l'internationalisation activé sans avoir fourni de middleware. - [**CantRenderPage**](/fr/reference/errors/cant-render-page/)<br/>Astro ne peut pas rendre la route. - [**UnhandledRejection**](/fr/reference/errors/unhandled-rejection/)<br/>Rejet non géré - [**i18nNotEnabled**](/fr/reference/errors/i18n-not-enabled/)<br/>i18n non activé diff --git a/src/content/docs/fr/reference/errors/incorrect-strategy-for-i18n.mdx b/src/content/docs/fr/reference/errors/incorrect-strategy-for-i18n.mdx new file mode 100644 index 0000000000000..3b6026fc6e3f3 --- /dev/null +++ b/src/content/docs/fr/reference/errors/incorrect-strategy-for-i18n.mdx @@ -0,0 +1,15 @@ +--- +title: Vous ne pouvez pas utiliser la fonction actuelle avec la stratégie actuelle. +i18nReady: true +githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts +--- + +> **MissingMiddlewareForInternationalization**: The function `FUNCTION_NAME` can only be used when the `i18n.routing.strategy` is set to `"manual"`. + +## Qu'est-ce qui n'a pas fonctionné ? +Certaines fonctions d'internationalisation ne sont disponibles que lorsque le routage i18n d'Astro est désactivé par le paramètre de configuration `i18n.routing: "manual"`. + +**Voir aussi:** +- [routage `i18n`](/fr/guides/internationalization/#routing) + + diff --git a/src/content/docs/fr/reference/errors/missing-middleware-for-internationalization.mdx b/src/content/docs/fr/reference/errors/missing-middleware-for-internationalization.mdx new file mode 100644 index 0000000000000..bcb72a612bc00 --- /dev/null +++ b/src/content/docs/fr/reference/errors/missing-middleware-for-internationalization.mdx @@ -0,0 +1,12 @@ +--- +title: Routage manuel de l'internationalisation activé sans avoir fourni de middleware. +i18nReady: true +githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts +--- + +> **MissingMiddlewareForInternationalization**: Your configuration setting `i18n.routing: 'manual'` requires you to provide your own i18n `middleware` file. + +Votre paramètre de configuration `i18n.routing: 'manual'` exige que vous fournissiez votre propre fichier `middleware` i18n. + +## Qu'est-ce qui n'a pas fonctionné ? +Astro génère une erreur si l'utilisateur active le routage manuel, mais n'a pas de fichier middleware. diff --git a/src/content/docs/fr/reference/errors/route-not-found.mdx b/src/content/docs/fr/reference/errors/route-not-found.mdx new file mode 100644 index 0000000000000..d5ae0327a3c8a --- /dev/null +++ b/src/content/docs/fr/reference/errors/route-not-found.mdx @@ -0,0 +1,13 @@ +--- +title: Route introuvable. +i18nReady: true +githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts +--- + +> **RouteNotFound**: Astro could not find a route that matches the one you requested. + +## Qu'est-ce qui n'a pas fonctionné ? +Astro n'a pas trouvé la route correspondante à celle fournie par l'utilisateur. + + + diff --git a/src/content/docs/hi/editor-setup.mdx b/src/content/docs/hi/editor-setup.mdx index 0eadf2b8f2beb..129b597aeed9d 100644 --- a/src/content/docs/hi/editor-setup.mdx +++ b/src/content/docs/hi/editor-setup.mdx @@ -23,6 +23,10 @@ Astro किसी भी कोड एडिटर के साथ काम <ReadMore>देखें कि अपने Astro परियोजना में [Typescript कैसे सेट](/hi/guides/typescript/) करें।</ReadMore> +## Zed + +[Zed](https://zed.dev/) एक ओपन-स्त्रोत कोड एडिटर है जिसने संस्करण 0.123.2 में Astro के लिए समर्थन जोड़ा गया है। आप [Astro एक्सटेंशन]((https://github.com/zed-industries/zed/tree/main/extensions/astro)) को Zed के IDE एक्सटेंशन टैब में से इंस्टॉल कर सकते हैं। इस एक्सटेंशन में सिंटैक्स हाइलाइटिंग, कोड पूर्णता और फ़ॉर्मेटिंग जैसी सुविधाएं शामिल हैं। + ## JetBrains IDEs Astro के लिए प्रारंभिक समर्थन WebStorm 2023.1 में आया। आप [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) के माध्यम से या IDE के प्लगइन्स टैब में "Astro" खोजकर आधिकारिक प्लगइन इंस्टॉल कर सकते हैं। इस प्लगइन में सिंटैक्स हाइलाइटिंग, कोड पूर्णता एवं फ़ॉर्मेटिंग जैसी सुविधाएं शामिल हैं, एवं भविष्य में और भी उन्नत सुविधाएं जोड़ने की योजना है। यह [JavaScript समर्थन के साथ अन्य सभी JetBrains IDE](https://www.jetbrains.com/products/#lang=js&type=ide) के लिए भी उपलब्ध है। diff --git a/src/content/docs/hi/getting-started.mdx b/src/content/docs/hi/getting-started.mdx index 9c710d7946202..1b1a6c5df46c0 100644 --- a/src/content/docs/hi/getting-started.mdx +++ b/src/content/docs/hi/getting-started.mdx @@ -7,13 +7,12 @@ editUrl: false next: false banner: content: | - <a href="https://astro.build/blog/astro-4/">Astro संस्करण 4.0 यहाँ है!</a> - क्या आप अपग्रेड करने के लिए तैयार हैं? <a href="/hi/guides/upgrade-to/v4/">हमारी अपग्रेड मार्गदर्शिका पढ़ें</a>. + 28 मई को Montreal में <a href="https://lu.ma/astro-together-meetup-2024/">Astro एक साथ</a> में हमारे और 100+ Astro डेवलपर्स से जुड़ें! hero: title: Astro दस्तावेज़ tagline: Astro के साथ निर्माण में आपकी सहायता के लिए मार्गदर्शिकाएँ, संसाधन और API संदर्भ। actions: - - text: शुरू हो जाओ + - text: Astro इंस्टॉल करे icon: rocket link: /hi/install/auto/ variant: primary diff --git a/src/content/docs/hi/install/auto.mdx b/src/content/docs/hi/install/auto.mdx index 1e3aa722154bf..07adbf0bb3ee5 100644 --- a/src/content/docs/hi/install/auto.mdx +++ b/src/content/docs/hi/install/auto.mdx @@ -13,7 +13,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' ::: #### आवश्यक निर्भरताएँ -- **Node.js** - `v18.14.1` या उससे उच्चतर। +- **Node.js** - `v18.17.1` या `v20.3.0` या उससे उच्चतर। (`v19` समर्थित नहीं है।) - **टेक्स्ट एडीटर** - हम अपने [आधिकारिक Astro एक्सटेंशन](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) के साथ [VS Code](https://code.visualstudio.com/) की अनुशंसा करते हैं। - **टर्मिनल** - Astro का उपयोग उसके कमांड-लाइन इंटरफ़ेस(CLI) के माध्यम से किया जाता है। diff --git a/src/content/docs/hi/install/manual.mdx b/src/content/docs/hi/install/manual.mdx index 5390fe28da66f..ce019338cd41d 100644 --- a/src/content/docs/hi/install/manual.mdx +++ b/src/content/docs/hi/install/manual.mdx @@ -16,7 +16,7 @@ import ReadMore from '~/components/ReadMore.astro' #### आवश्यक निर्भरताएँ -- **Node.js** - `v18.14.1` या उससे उच्चतर। +- **Node.js** - `v18.17.1` या `v20.3.0` या उससे उच्चतर। (`v19` समर्थित नहीं है।) - **टेक्स्ट एडीटर** - हम अपने [आधिकारिक Astro एक्सटेंशन](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) के साथ [VS Code](https://code.visualstudio.com/) की अनुशंसा करते हैं। - **टर्मिनल** - Astro का उपयोग उसके कमांड-लाइन इंटरफ़ेस(CLI) के माध्यम से किया जाता है। diff --git a/src/content/docs/it/basics/astro-components.mdx b/src/content/docs/it/basics/astro-components.mdx index 5050e219559cb..60589d38b79c4 100644 --- a/src/content/docs/it/basics/astro-components.mdx +++ b/src/content/docs/it/basics/astro-components.mdx @@ -386,4 +386,3 @@ Un [elemento `<slot />`](/it/basics/astro-components/#slot) all'interno di un co import ReadMore from '~/components/ReadMore.astro'; <ReadMore>Scopri come utilizzare i [componenti di framework UI](/it/guides/framework-components/) nel tuo progetto Astro.</ReadMore> - diff --git a/src/content/docs/it/basics/astro-syntax.mdx b/src/content/docs/it/basics/astro-syntax.mdx index 86f0565417698..0244f7d7f3342 100644 --- a/src/content/docs/it/basics/astro-syntax.mdx +++ b/src/content/docs/it/basics/astro-syntax.mdx @@ -13,7 +13,7 @@ La sintassi del componente Astro è un superset di HTML. La sintassi è stata [p Puoi definire variabili JavaScript locali all'interno dello script del componente frontmatter tra i due separatori del codice (`---`) di un componente Astro. Puoi quindi inserire queste variabili nel modello HTML del componente utilizzando espressioni simili a JSX! -:::note[dinamico vs reattivo] +:::note[Dinamico vs reattivo] Utilizzando questo approccio, puoi includere valori **dinamici** calcolati nel frontmatter. Ma una volta inclusi, questi valori non sono **reattivi** e non cambieranno mai. I componenti Astro sono modelli che vengono eseguiti solo una volta, durante la fase di rendering. Vedi sotto per ulteriori esempi di [differenze tra Astro e JSX](#differenze-tra-astro-e-jsx). diff --git a/src/content/docs/it/basics/layouts.mdx b/src/content/docs/it/basics/layouts.mdx index 1efe609048aa4..d9371fa3b9c8c 100644 --- a/src/content/docs/it/basics/layouts.mdx +++ b/src/content/docs/it/basics/layouts.mdx @@ -187,11 +187,11 @@ Astro.props = { :::note Un layout Markdown/MDX avrà accesso a tutte le [proprietà esportate](/it/guides/markdown-content/#exported-properties) di tutti i suoi file da `Astro.props` **con alcune differenze fondamentali:** -* Le informazioni sull'intestazione (ad esempio gli elementi `h1 -> h6`) sono disponibili tramite l'array `headings`, anziché tramite la funzione `getHeadings()`. +* Le informazioni sull'intestazione (ad esempio gli elementi `h1 -> h6`) sono disponibili tramite l'array `headings`, anziché tramite la funzione `getHeadings()`. -* `file` e `url` sono *anche* disponibili come proprietà `frontmatter` nidificate (ad esempio `frontmatter.url` e `frontmatter.file`). +* `file` e `url` sono *anche* disponibili come proprietà `frontmatter` nidificate (ad esempio `frontmatter.url` e `frontmatter.file`). -* I valori definiti al di fuori di frontmatter (ad esempio le istruzioni `export` in MDX) non sono disponibili. Valuta invece la possibilità di [importare un layout](#importazione-manuale-dei-layout-mdx). +* I valori definiti al di fuori di frontmatter (ad esempio le istruzioni `export` in MDX) non sono disponibili. Valuta invece la possibilità di [importare un layout](#importazione-manuale-dei-layout-mdx). ::: ### Importazione manuale dei layout (MDX) diff --git a/src/content/docs/it/guides/astro-db.mdx b/src/content/docs/it/guides/astro-db.mdx index 9d2899b8ad051..15e1bb7d3894d 100644 --- a/src/content/docs/it/guides/astro-db.mdx +++ b/src/content/docs/it/guides/astro-db.mdx @@ -14,7 +14,7 @@ Astro DB è un database SQL completamente gestito progettato esclusivamente per ## Installazione -Aggiungi Astro DB a un nuovo o esistente progetto Astro (richiede `astro@4.5` o successivo) con l'integrazione [`@astrojs/db`](/it/guides/integrations-guide/db/) (`v0.8.0` o successivo). Astro include un comando integrato `astro add` per automatizzare questo processo di configurazione per te. +Aggiungi Astro DB a un nuovo o esistente progetto Astro (richiede `astro@4.5` o successivo) con l'integrazione [`@astrojs/db`](/it/guides/integrations-guide/db/) (`v0.8.1` o successivo). Astro include un comando integrato `astro add` per automatizzare questo processo di configurazione per te. <PackageManagerTabs> <Fragment slot="npm"> diff --git a/src/content/docs/it/guides/deploy/cloudflare.mdx b/src/content/docs/it/guides/deploy/cloudflare.mdx index dd7abcaa191e7..5fbb75b77b6cd 100644 --- a/src/content/docs/it/guides/deploy/cloudflare.mdx +++ b/src/content/docs/it/guides/deploy/cloudflare.mdx @@ -4,7 +4,8 @@ description: Come effettuare il deploy del tuo sito Astro sul web usando Cloudfl type: deploy i18nReady: true --- -import ReadMore from '~/components/ReadMore.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; Puoi effettuare il deploy del tuo progetto Astro su [Cloudflare Pages](https://pages.cloudflare.com/), una piattaforma per sviluppatori frontend che consente di collaborare e pubblicare siti web statici (JAMstack) e SSR. @@ -23,11 +24,17 @@ Per iniziare, avrai bisogno di: ## Come effettuare il deploy di un sito utilizzando Git +<Steps> 1. Configura un nuovo progetto su Cloudflare Pages. + 2. Esegui il push del tuo codice nel tuo repository Git (GitHub, GitLab). + 3. Accedi al pannello di controllo di Cloudflare e seleziona il tuo account in **Account Home** > **Pages**. + 4. Clicca su **Crea applicazione** e dopo sull'opzione **Esegui la connessione a Git**. + 5. Seleziona il progetto git che desideri pubblicare e clicca su **Inizia configurazione**. + 6. Utilizza le seguenti impostazioni per la build: - **Framework preimpostato**: `Astro` @@ -35,13 +42,19 @@ Per iniziare, avrai bisogno di: - **Directory di output della build**: `dist` 7. Clicca il pulsante **Salva e Distribuisci**. +</Steps> ## Come effettuare il deploy di un sito utilizzando Wrangler +<Steps> 1. Installa [Wrangler](https://developers.cloudflare.com/workers/wrangler/get-started/). + 2. Esegui il login con il tuo account Cloudflare utilizzando il comando `wrangler login`. + 3. Esegui il comando per avviare la build. + 4. Effettua il deploy utilizzando il comando `npx wrangler pages publish dist`. +</Steps> ```bash # Installa Wrangler CLI @@ -66,7 +79,6 @@ pnpm add wrangler --save-dev A questo punto è possibile aggiornare lo script di preview in modo da utilizzare wrangler, invece del comando di anteprima della CLI di Astro. - ```json title="package.json" "preview": "wrangler pages dev ./dist" ``` @@ -89,6 +101,7 @@ npx astro add cloudflare Se preferisci installare manualmente l'adattatore, segui questi due passaggi: +<Steps> 1. Aggiungi l'adattatore `@astrojs/cloudflare` alle dipendenze del tuo progetto utilizzando il tuo package manager preferito. Se stai utilizzando npm o non sei sicuro di quale tu stia utilizzando, esegui questo comando nel terminale: ```bash @@ -106,34 +119,22 @@ Se preferisci installare manualmente l'adattatore, segui questi due passaggi: adapter: cloudflare() }); ``` +</Steps> -### Modalità - -Attualmente sono supportate due modalità quando si utilizzano le Funzioni di Cloudflare Pages con l'adattatore [`@astrojs/cloudflare`](https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare#readme). - -1. **Modalità avanzata**: Questa modalità viene utilizzata quando si vuole eseguire una funzione in modalità `advanced`, che utilizza il file `_worker.js` in `dist`, o in modalità directory in cui le pagine compileranno il worker da una cartella `functions` nella cartella principale del progetto. - - Se nessuna modalità viene impostata, il valore predefinito è `"advanced"`. - -2. **Modalità directory**: Questa modalità viene utilizzata quando si desidera eseguire una funzione in modalità `directory`, il che significa che l'adattatore compilerà la parte lato client della tua app nello stesso modo, ma sposterà lo script del worker in una cartella `functions` nella cartella principale del progetto. L'adattatore metterà sempre un file `[[path]].js` in quella cartella, consentendoti di aggiungere plugin e middleware aggiuntivi per le pagine. +<ReadMore>Leggi di più su [SSR in Astro](/it/guides/server-side-rendering/).</ReadMore> - ```ts title="astro.config.mjs" "directory" - export default defineConfig({ - adapter: cloudflare({ mode: "directory" }), - }); - ``` -### Utilizzo delle funzioni di Cloudflare Pages +## Risoluzione dei problemi -Le [Funzioni di Pages](https://developers.cloudflare.com/pages/platform/functions/) ti consentono di eseguire codice lato server per abilitare funzionalità dinamiche senza dover usare un server dedicato. +### Idratazione lato client -Per iniziare, crea una cartella `/functions` nella cartella principale del tuo progetto. Scrivendo i file delle tue Funzioni in questa cartella verrà automaticamente generato un worker con funzionalità personalizzate. Per saperne di più sulla scrittura delle Funzioni, consulta la [documentazione sulle Funzioni di Cloudflare Pages](https://developers.cloudflare.com/pages/platform/functions/). +L'idratazione lato client potrebbe fallire a causa dell'impostazione Auto Minify di Cloudflare. Se vedi `Hydration completed but contains mismatches` nella console, assicurati di disabilitare Auto Minify nelle impostazioni di Cloudflare. -<ReadMore>Leggi di più su [SSR in Astro](/it/guides/server-side-rendering/).</ReadMore> +### API di runtime Node.js -## Risoluzione dei problemi +Se stai costruendo un progetto che utilizza il rendering on-demand con [l'adattatore SSR di Cloudflare](/it/guides/integrations-guide/cloudflare/) e il server non riesce a compilare con un messaggio di errore come `[Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.`: -Se incontri errori, verifica che la versione di `node` che stai utilizzando sul tuo pc (`node -v`) corrisponda alla versione che stai specificando nella variabile d'ambiente. +- Questo significa che un pacchetto o un'importazione che stai utilizzando nell'ambiente lato server non è compatibile con le [API di runtime di Cloudflare](https://developers.cloudflare.com/workers/runtime-apis/nodejs/). -Cloudflare richiede [Node v16.13](https://miniflare.dev/get-started/cli#installation), che è una versione più recente rispetto al requisito minimo di Astro out-of-the-box, quindi assicurati di utilizzare almeno la versione v16.13. +- Se stai importando direttamente un'API di runtime Node.js, consulta la documentazione di Astro sulla [compatibilità Node.js](/it/guides/integrations-guide/cloudflare/#nodejs-compatibility) di Cloudflare per ulteriori passaggi su come risolvere questo problema. -L'hydration lato client potrebbe non riuscire a causa dell'impostazione di Auto Minify di Cloudflare. Se vedi `Hydration completed but contains mismatches` nella console, assicurati di disabilitare Auto Minify nelle impostazioni di Cloudflare. +- Se stai importando un pacchetto che importa un'API di runtime Node.js, verifica con l'autore del pacchetto se supporta la sintassi di importazione `node:*`. Se non lo fanno, potresti dover trovare un pacchetto alternativo. diff --git a/src/content/docs/it/guides/fonts.mdx b/src/content/docs/it/guides/fonts.mdx index 12d3ca5ea7b9c..1c776192a3a4b 100644 --- a/src/content/docs/it/guides/fonts.mdx +++ b/src/content/docs/it/guides/fonts.mdx @@ -6,7 +6,7 @@ description: >- i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; - +import { Steps } from '@astrojs/starlight/components' Questa guida ti mostrerà come aggiungere caratteri (web font) personalizzati al tuo progetto e come utilizzarli nei tuoi componenti. @@ -14,8 +14,9 @@ Questa guida ti mostrerà come aggiungere caratteri (web font) personalizzati al In questo esempio vedremo come aggiungere un carattere personalizzato utilizzando il file di caratteri `DistantGalaxy.woff`. +<Steps> 1. Aggiungi il file del carattere alla cartella `public/fonts/`. -1. Aggiungi lo statement `@font-face` al tuo CSS. Puoi aggiungerlo in un file `.css` globale che importerai in seguito, in un blocco `<style is:global>` o in un blocco `<style>` nel componente o nel layout specifico in cui vuoi utilizzare questo carattere. +2. Aggiungi lo statement `@font-face` al tuo CSS. Puoi aggiungerlo in un file `.css` globale che importerai in seguito, in un blocco `<style is:global>` o in un blocco `<style>` nel componente o nel layout specifico in cui vuoi utilizzare questo carattere. ```css /* Aggiungi il carattere personalizzato e indica al browser dove si trova. */ @@ -28,7 +29,7 @@ In questo esempio vedremo come aggiungere un carattere personalizzato utilizzand } ``` -1. Modifica il valore di `font-family` dello statement `@font-face` per modifcare lo stile degli elementi nel tuo componente o layout. In questo esempio, l'intestazione `<h1>` avrà un carattere personalizzato, mentre il paragrafo `<p>` no. +3. Modifica il valore di `font-family` dello statement `@font-face` per modifcare lo stile degli elementi nel tuo componente o layout. In questo esempio, l'intestazione `<h1>` avrà un carattere personalizzato, mentre il paragrafo `<p>` no. ```astro title="src/pages/example.astro" {9-11} --- @@ -44,13 +45,15 @@ In questo esempio vedremo come aggiungere un carattere personalizzato utilizzand } </style> ``` +</Steps> ## Aggiungere caratteri mediante Fontsource Il progetto [Fontsource](https://fontsource.org/) semplifica l'utilizzo di Google Fonts e di altri caratteri open source fornendo moduli npm che puoi installare in base ai caratteri che decidi di utilizzare. +<Steps> 1. Cerca il carattere che vuoi utilizzare nel [catalogo di Fontsource](https://fontsource.org/). In questo esempio useremo [Twinkle Star](https://fontsource.org/fonts/twinkle-star). -1. Installa il package relativo al carattere scelto. +2. Installa il package relativo al carattere scelto. <PackageManagerTabs> <Fragment slot="npm"> @@ -74,7 +77,7 @@ Il progetto [Fontsource](https://fontsource.org/) semplifica l'utilizzo di Googl Puoi trovare il nome del package da utilizzare nella sezione "Quick Installation" di ogni pagina del carattere sul sito di Fontsource. È indicato con `@fontsource/` seguito dal nome del carattere. ::: -1. Importa il package del carattere nel componente in cui vuoi utilizzarlo. Di solito ha senso farlo in un layout "comune" per assicurarsi che il carattere sia disponibile in tutto il sito. +3. Importa il package del carattere nel componente in cui vuoi utilizzarlo. Di solito ha senso farlo in un layout "comune" per assicurarsi che il carattere sia disponibile in tutto il sito. L'importazione aggiungerà automaticamente le regole `@font-face` necessarie per impostare il carattere. @@ -84,13 +87,14 @@ Il progetto [Fontsource](https://fontsource.org/) semplifica l'utilizzo di Googl --- ``` -1. Utilizza il nome del carattere come valore di `font-family`, come mostrato nell'esempio `body` sulla pagina di Fontsource. Questo funzionerà in qualunque punto del tuo progetto Astro in cui puoi scrivere CSS. +4. Utilizza il nome del carattere come valore di `font-family`, come mostrato nell'esempio `body` sulla pagina di Fontsource. Questo funzionerà in qualunque punto del tuo progetto Astro in cui puoi scrivere CSS. ```css h1 { font-family: "Twinkle Star", cursive; } ``` +</Steps> ## Aggiungere caratteri su Tailwind @@ -98,30 +102,33 @@ Se stai utilizzando l'[integrazione Tailwind](/it/guides/integrations-guide/tail Puoi aggiungere il tuo carattere su Tailwind seguendo questo passi: +<Steps> 1. Segui una delle guide menzionate sopra saltando l'ultimo passo (quello in cui si aggiunge `font-family` al CSS). -2. Aggiungi il nome del carattere a `tailwind.config.cjs`. +2. Aggiungi il nome del carattere a `tailwind.config.mjs`. Questo esempio aggiunge `Inter` allo stack di caratteri sans-serif, con i caratteri di fallback di default di Tailwind CSS. - ```js title="tailwind.config.cjs" ins={1,7-9} - const defaultTheme = require("tailwindcss/defaultTheme"); - - module.exports = { - // ... - theme: { - extend: { - fontFamily: { - sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans], - }, - }, - }, - // ... - }; + ```js title="tailwind.config.mjs" ins={1,8-10} + import defaultTheme from 'tailwindcss/defaultTheme' + + /** @type {import('tailwindcss').Config} */ + export default { + content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], + theme: { + extend: { + fontFamily: { + sans: ['Inter', ...defaultTheme.fontFamily.sans], + }, + }, + }, + plugins: [], + } ``` Ora, tutti i testi sans-serif (il default di Tailwind) nel tuo progetto utilizzeranno il carattere scelto. Inoltre, la classe `font-sans` applicherà il carattere Inter. +</Steps> -Per maggiori informazioni, consulta la [guida alla configurazione di caratteri personalizzati di Tailwind](https://tailwindcss.com/docs/font-family#font-families). +Per maggiori informazioni, consulta la [guida alla configurazione di caratteri personalizzati di Tailwind](https://tailwindcss.com/docs/font-family#using-custom-values). ## Risorse aggiuntive diff --git a/src/content/docs/it/guides/prefetch.mdx b/src/content/docs/it/guides/prefetch.mdx index 402036a700a4a..5bae3bcad6889 100644 --- a/src/content/docs/it/guides/prefetch.mdx +++ b/src/content/docs/it/guides/prefetch.mdx @@ -4,6 +4,8 @@ description: Precaricamento dei link per una navigazione più rapida tra le pagi i18nReady: true --- +import { Steps } from '@astrojs/starlight/components' + I tempi di caricamento delle pagine giocano un ruolo importante nell'usabilità e nel piacere generale di un sito. Il precaricamento opzionale di Astro porta i benefici di navigazioni tra pagine quasi istantanee alla tua applicazione a pagine multiple (MPA) mentre i tuoi visitatori interagiscono con il sito. ## Abilitare il precaricamento @@ -47,9 +49,8 @@ Puoi specificare una strategia per un singolo link passandolo all'attributo `dat Ogni strategia è ottimizzata per prefetchare solo quando necessario e risparmiare banda ai tuoi utenti. Per esempio: -- Se un visitatore sta usando la [modalità risparmio dati](https://developer.mozilla.org/it/docs/Web/API/NetworkInformation/saveData) o ha una [connessione lenta](https://developer.mozilla.org/it/docs/Web/API/NetworkInformation/effectiveType), il precaricamento passerà alla strategia `tap`. +- Se un visitatore sta usando la [modalità risparmio dati](https://developer.mozilla.org/en/docs/Web/API/NetworkInformation/saveData) o ha una [connessione lenta](https://developer.mozilla.org/en/docs/Web/API/NetworkInformation/effectiveType), il precaricamento passerà alla strategia `tap`. - Passare velocemente il mouse o scorrere sui link non li precaricherà. -- I link che usano le strategie `viewport` o `load` vengono precaricati con priorità inferiore per evitare di intasare la rete. ### Strategia di precaricamento predefinita @@ -104,18 +105,7 @@ Siccome alcune navigazioni potrebbero non apparire sempre come link `<a />`, puo </script> ``` -Puoi inoltre configurare la priorità del precaricamento passando l'opzione `with`: - -```js -// Precaricamento con `fetch()`, che ha una priorità più alta. -prefetch('/about', { with: 'fetch' }); - -// Precaricamento con `<link rel="prefetch">`, che ha una priorità inferiore -// e viene pianificato manualmente dal browser. (default) -prefetch('/about', { with: 'link' }); -``` - -L'API `prefetch()` include la stessa rilevazione di [modalità risparmio dati](https://developer.mozilla.org/it/docs/Web/API/NetworkInformation/saveData) e [connessione lenta](https://developer.mozilla.org/it/docs/Web/API/NetworkInformation/effectiveType) in modo che il precaricamento avvenga solo quando necessario. +L'API `prefetch()` include la stessa rilevazione di [modalità risparmio dati](https://developer.mozilla.org/en/docs/Web/API/NetworkInformation/saveData) e [connessione lenta](https://developer.mozilla.org/en/docs/Web/API/NetworkInformation/effectiveType) in modo che il precaricamento avvenga solo quando necessario. Per ignorare il rilevamento di connessioni lente, puoi usare l'opzione `ignoreSlowConnection`: @@ -152,10 +142,43 @@ export default defineConfig({ }); ``` +## Supporto dei browser + +Il prefetching di Astro utilizza [`<link rel="prefetch">`](https://developer.mozilla.org/en/docs/Web/HTML/Attributes/rel/prefetch) se supportato dal browser, altrimenti utilizza l'[`API fetch()`](https://developer.mozilla.org/en/docs/Web/API/Fetch_API) al suo posto. + +I browser più diffusi supportano il prefetching di Astro con alcune differenze minori: + +### Chrome + +Chrome supporta `<link rel="prefetch">`. Il prefetching funziona come previsto. + +### Firefox + +Firefox supporta `<link rel="prefetch">` ma potrebbe visualizzare errori o fallire completamente: + + - Senza un'intestazione cache esplicita (ad es. [`Cache-Control`](https://developer.mozilla.org/en/docs/Web/HTTP/Headers/Cache-Control) o [`Expires`](https://developer.mozilla.org/en/docs/Web/HTTP/Headers/Expires)), il prefetching genererà un errore `NS_BINDING_ABORTED`. +- Anche in caso di errore, se la risposta ha un'intestazione [`ETag`](https://developer.mozilla.org/en/docs/Web/HTTP/Headers/ETag) valida, verrà riutilizzata durante la navigazione. +- In caso contrario, se si verifica un errore senza altre intestazioni cache, il prefetch non funzionerà. + +### Safari + +Safari non supporta `<link rel="prefetch">` e ricadrà sull'[`API fetch()`](https://developer.mozilla.org/en/docs/Web/API/Fetch_API), che richiede l'impostazione delle intestazioni cache (ad es. [`Cache-Control`](https://developer.mozilla.org/en/docs/Web/HTTP/Headers/Cache-Control), [`Expires`](https://developer.mozilla.org/en/docs/Web/HTTP/Headers/Expires) e [`ETag`](https://developer.mozilla.org/en/docs/Web/HTTP/Headers/ETag)). In caso contrario, il prefetch non funzionerà. + +**Caso limite:** le intestazioni `ETag` non funzionano nelle finestre private. + +### Raccomandazioni + +Per supportare al meglio tutti i browser, assicurati che le tue pagine abbiano le intestazioni cache appropriate. + +Per le pagine statiche o prerenderizzate, l'intestazione `ETag` è spesso impostata automaticamente dalla piattaforma di distribuzione e dovrebbe funzionare senza problemi. + +Per le pagine dinamiche e server-side, imposta le intestazioni cache appropriate in base al contenuto della pagina. Visita la [documentazione MDN sull'HTTP caching](https://developer.mozilla.org/en/docs/Web/HTTP/Caching) per ulteriori informazioni. + ## Migrazione da `@astrojs/prefetch` L'integrazione `@astrojs/prefetch` è stata deprecata nella v3.5.0 e verrà rimossa completamente. Usa le seguenti istruzioni per passare al precaricamento integrato di Astro che sostituisce questa integrazione. +<Steps> 1. Rimuovi l'integrazione `@astrojs/prefetch` e abilita la configurazione `prefetch` in `astro.config.mjs`: ```js title="astro.config.mjs" ins={6} del={2,5} @@ -191,3 +214,4 @@ L'integrazione `@astrojs/prefetch` è stata deprecata nella v3.5.0 e verrà rimo ``` - L'opzione `throttles` di `@astrojs/prefetch` non è più necessaria poiché la nuova funzionalità di prefetch pianificherà e precaricherà in modo ottimale automaticamente. +</Steps> diff --git a/src/content/docs/ko/basics/astro-components.mdx b/src/content/docs/ko/basics/astro-components.mdx index 2c0cab0ca1994..912e1a977531e 100644 --- a/src/content/docs/ko/basics/astro-components.mdx +++ b/src/content/docs/ko/basics/astro-components.mdx @@ -10,7 +10,7 @@ Astro 컴포넌트는 매우 유연합니다. Astro 컴포넌트에는 헤더나 Astro 컴포넌트에 대해 알아야 할 가장 중요한 점은 **클라이언트에서 렌더링되지 않는다**는 것입니다. 기본적으로 빌드 시 HTML로 렌더링되며, [서버 측 렌더링 (SSR)](/ko/guides/server-side-rendering/)을 사용하는 경우에는 사용자의 요청을 받을 때마다 HTML로 렌더링 됩니다. 컴포넌트 프런트매터에 JavaScript 코드를 포함할 수 있으며, 모든 내용은 사용자의 브라우저로 전송되는 최종 페이지에서 제거됩니다. 그 결과, JavaScript가 추가되지 않아 사이트가 더 빨라집니다. -Astro 컴포넌트가 클라이언트 측에서 상호작용 해야하는 경우, Astro 컴포넌트에 [표준 HTML `<script>` 태그](/ko/guides/client-side-scripts/)를 추가하거나, [UI 프레임워크 컴포넌트](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션하기)를 사용할 수 있습니다. +Astro 컴포넌트가 클라이언트 측에서 상호작용 해야하는 경우, Astro 컴포넌트에 [표준 HTML `<script>` 태그](/ko/guides/client-side-scripts/)를 추가하거나, [UI 프레임워크 컴포넌트](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션)를 사용할 수 있습니다. ## 컴포넌트 구조 diff --git a/src/content/docs/ko/basics/astro-syntax.mdx b/src/content/docs/ko/basics/astro-syntax.mdx index 8596a40ee0738..72244b7c61b32 100644 --- a/src/content/docs/ko/basics/astro-syntax.mdx +++ b/src/content/docs/ko/basics/astro-syntax.mdx @@ -118,7 +118,7 @@ const Component = MyComponent; - **변수 이름은 대문자로 시작해야 합니다.** 예를 들어 `element` 대신 `Element`를 사용하세요. 그렇지 않으면 Astro는 변수 이름을 리터럴 HTML 태그로 렌더링하는 것을 시도합니다. -- **수화 지시어는 지원되지 않습니다.** [`client:*` 수화 지시어](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션하기)를 사용하면 Astro는 프로덕션을 위해 번들링할 컴포넌트를 알아야 하지만 동적 태그 패턴이 이를 알 수 없게 만듭니다. +- **수화 지시어는 지원되지 않습니다.** [`client:*` 수화 지시어](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션)를 사용하면 Astro는 프로덕션을 위해 번들링할 컴포넌트를 알아야 하지만 동적 태그 패턴이 이를 알 수 없게 만듭니다. ### 프래그먼트 diff --git a/src/content/docs/ko/community-resources/content.mdx b/src/content/docs/ko/community-resources/content.mdx index 826b5ea85a6f9..4bc8bd9fc4133 100644 --- a/src/content/docs/ko/community-resources/content.mdx +++ b/src/content/docs/ko/community-resources/content.mdx @@ -26,9 +26,9 @@ Astro에 대해 자세히 알아보려면 다음 강좌와 튜토리얼을 확 - [60분 만에 진행되는 Astro 집중 강좌](https://www.youtube.com/watch?v=NniT0vKyn-E) - @developedbyed - [Astro의 이해 (ebook)](https://www.ohansemmanuel.com/books/understanding-astro) - Ohans Emmanuel - [처음부터 Astro 3 배우기: 초보자를 위한 코스 + Astro 애플리케이션 (스페인어)](https://www.youtube.com/watch?v=RB5tR_nqUEw) - @midudev + - [Astro 웹 프레임워크 소개](https://www.udemy.com/course/introduction-to-the-astro-web-framework/) - Udemy의 Tech Razor (유료 강의) ### 동영상 튜토리얼 - - [Astro 빠른 시작 과정: SSR 블로그 구축](https://www.youtube.com/watch?v=XoIHKO6AkoM) - [Astro 3.x로 영화 애플리케이션을 만드는 방법](https://www.youtube.com/watch?v=Gvr4WhgfP0w) - [여러분은 콘텐츠 컬렉션을 실제로 이해하지 못했을 수도 있습니다...](https://www.youtube.com/watch?v=Fcw4c3wzm7I) @@ -64,6 +64,7 @@ Astro의 레시피를 작성해 보셨나요? [이 페이지를 편집](https:// - [이미지를 가져올 때 동적 파일 이름을 사용하세요](https://vaihe.com/blog/astro/astro-dynamic-image-prop/) - [Storyblok의 스토리를 사용하여 Astro에 RSS 피드 추가](https://straffesites.com/ko/blog/rss-feed-astro-storyblok) - [RSS 피드에 데이터를 보내는 방법은 무엇입니까? Astro + RSS 가이드](https://aritraroy.live/tutorial/blogs/2023/how-to-send-any-data-to-rss-feed/) +- [Astro에서 RSS 피드 콘텐츠 추가 및 Markdown 이미지 경로 수정](https://billyle.dev/posts/adding-rss-feed-content-and-fixing-markdown-image-paths-in-astro) ### 이미지 diff --git a/src/content/docs/ko/editor-setup.mdx b/src/content/docs/ko/editor-setup.mdx index cfd08132e8f0e..2a48425c6e2fc 100644 --- a/src/content/docs/ko/editor-setup.mdx +++ b/src/content/docs/ko/editor-setup.mdx @@ -25,6 +25,10 @@ import ReadMore from '~/components/ReadMore.astro'; <ReadMore>Astro 프로젝트에서 [TypeScript 설정](/ko/guides/typescript/)하는 방법을 알아보세요.</ReadMore> +## Zed + +[Zed](https://zed.dev/)는 버전 0.123.2에서 Astro에 대한 지원을 추가한 오픈 소스 코드 편집기입니다. IDE의 Extensions 탭에서 [Astro 확장](https://github.com/zed-industries/zed/tree/main/extensions/astro)을 설치할 수 있습니다. 이 확장에는 구문 강조, 코드 완성, 포매팅과 같은 기능이 포함되어 있습니다. + ## JetBrains IDEs Astro에 대한 초기 지원은 WebStorm 2023.1에서 시작되었습니다. [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) 또는 IDE의 Plugins 탭에서 "Astro"를 검색하여 공식 플러그인을 설치할 수 있습니다. 이 플러그인은 구문 강조, 코드 자동 완성, 포맷팅과 같은 기능을 포함하고 있으며 앞으로 더 많은 고급 기능을 추가할 계획입니다. 또한, [JavaScript를 지원하는 다른 모든 JetBrains IDE](https://www.jetbrains.com/products/#lang=js&type=ide)에서도 사용할 수 있습니다. diff --git a/src/content/docs/ko/getting-started.mdx b/src/content/docs/ko/getting-started.mdx index 0113c39503ba7..a846362f1f3da 100644 --- a/src/content/docs/ko/getting-started.mdx +++ b/src/content/docs/ko/getting-started.mdx @@ -13,7 +13,7 @@ hero: title: Astro 공식 문서 tagline: Astro를 사용하는 데 도움이 되는 안내서, 리소스, API 참조입니다. actions: - - text: 시작하기 + - text: Astro 설치 icon: rocket link: /ko/install/auto/ variant: primary diff --git a/src/content/docs/ko/guides/cms/apostrophecms.mdx b/src/content/docs/ko/guides/cms/apostrophecms.mdx index aa95899c5bef4..416a049f3b209 100644 --- a/src/content/docs/ko/guides/cms/apostrophecms.mdx +++ b/src/content/docs/ko/guides/cms/apostrophecms.mdx @@ -6,9 +6,460 @@ stub: true service: Apostrophe i18nReady: true --- +import { FileTree } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' [ApostropheCMS](https://apostrophecms.com/)는 Astro에서 페이지 편집을 지원하는 콘텐츠 관리 시스템입니다. -## 커뮤니티 자료 +## Astro와 통합 + +이 섹션에서는 [Apostrophe 통합](https://apostrophecms.com/extensions/astro-integration)을 사용하여 ApostropheCMS를 Astro에 연결합니다. + +### 전제 조건 + +시작하려면 다음이 필요합니다. + +1. [Node.js 어댑터](/ko/guides/integrations-guide/node/)가 설치되고 `output: 'server'`가 구성된 **주문형 렌더링된 Astro 프로젝트** - 아직 Astro 프로젝트가 없다면 [설치 가이드](/ko/install/auto/)를 참조하여 즉시 설치하여 실행할 수 있습니다. + +2. **`APOS_EXTERNAL_FRONT_KEY`라는 환경 변수가 구성된 ApostropheCMS 프로젝트** - 이 환경 변수는 임의의 문자열로 설정할 수 있습니다. 아직 ApostropheCMS 프로젝트가 없다면 [설치 가이드](https://docs.apostrophecms.org/guide/development-setup.html)를 통해 빠르게 설치할 수 있습니다. [Apostrophe CLI 도구](https://apostrophecms.com/extensions/apos-cli)를 사용하면 설치가 쉬워지므로 이를 사용하는 것을 권장합니다. + +### 프로젝트 통신 설정 + +Astro 프로젝트에는 둘 사이의 통신을 허용하기 위해 ApostropheCMS 프로젝트의 값과 동일한 값으로 설정된 `APOS_EXTERNAL_FRONT_KEY` 환경 변수가 있어야 합니다. 이 공유 키는 프런트엔드 (Astro)와 백엔드 (ApostropheCMS) 간 요청을 확인하는 수단으로 사용됩니다. + +다음 변수를 사용하여 Astro 프로젝트 루트에 `.env` 파일을 만듭니다. + +```ini title=".env" +APOS_EXTERNAL_FRONT_KEY='RandomStrongString' +``` + +이제 루트 디렉터리에 다음 새 파일이 포함되어야 합니다. + +<FileTree title="Project Structure"> +- src/ +- **.env** +- astro.config.mjs +- package.json +</FileTree> + +### 종속성 설치 + +Astro를 ApostropheCMS 프로젝트와 연결하려면 선호하는 패키지 관리자로 아래 명령을 사용하여 Astro 프로젝트에 공식 Apostrophe 통합을 설치하세요. + +<PackageManagerTabs> + <Fragment slot="npm"> + ```shell + npm install @apostrophecms/apostrophe-astro vite @astro/node + ``` + </Fragment> + <Fragment slot="pnpm"> + ```shell + pnpm add @apostrophecms/apostrophe-astro vite @astro/node + ``` + </Fragment> + <Fragment slot="yarn"> + ```shell + yarn add @apostrophecms/apostrophe-astro vite @astro/node + ``` + </Fragment> +</PackageManagerTabs> + +### Astro 구성 + +`apostrophe-astro` 통합 및 `astro.config.mjs` 파일의 `vite`를 모두 구성합니다. + +다음 예시는 ApostropheCMS [위젯](https://docs.apostrophecms.org/guide/core-widgets.html)과 [페이지 템플릿](https://docs.apostrophecms.org/guide/pages.html) 타입 및 Astro 프로젝트를 일치시키기 위해 Apostrophe 인스턴스의 기본 URL과 프로젝트의 폴더 경로를 제공합니다. 그리고 Vite의 서버 측 렌더링도 구성합니다. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; +import node from '@astrojs/node'; +import apostrophe from '@apostrophecms/apostrophe-astro'; +import { loadEnv } from 'vite'; + +const env = loadEnv("", process.cwd(), 'APOS'); + +export default defineConfig({ + output: 'server', + adapter: node({ + mode: 'standalone' + }), + integrations: [ + apostrophe({ + aposHost: 'http://localhost:3000', + widgetsMapping: './src/widgets', + templatesMapping: './src/templates' + }) + ], + vite: { + ssr: { + // @apostrophecms/apostrophe-astro 플러그인을 외부화하지 마세요. + // virtual: URL을 사용할 수 있어야 합니다. + noExternal: [ '@apostrophecms/apostrophe-astro' ], + }, + define: { + 'process.env.APOS_EXTERNAL_FRONT_KEY': JSON.stringify(env.APOS_EXTERNAL_FRONT_KEY), + 'process.env.APOS_HOST': JSON.stringify(env.APOS_HOST) + } + } +}); +``` + +전체 구성 옵션 및 설명은 [`apostrophe-astro` 문서](https://apostrophecms.com/extensions/astro-integration#configuration-astro)를 참조하세요. + +### ApostropheCMS 위젯을 Astro 컴포넌트에 연결 +ApostropheCMS 위젯은 레이아웃 열, 이미지, 텍스트 블록 등의 페이지에 추가할 수 있는 구조화된 콘텐츠 블록입니다. Apostrophe 프로젝트의 각 위젯에 대한 Astro 컴포넌트와 해당 컴포넌트를 Apostrophe 위젯에 매핑하는 파일을 생성해야 합니다. + +Astro 컴포넌트와 매핑 파일 `index.js`를 위한 새 폴더인 `src/widgets/`를 생성합니다. + +이 폴더에 있는 매핑된 컴포넌트는 `Astro.props`를 통해 위젯의 스키마 필드와 사용자 정의 props가 포함된 `widget` 속성을 받습니다. 그러면 이 값을 페이지 편집에 사용할 수 있습니다. + +다음 예시는 편집을 허용하기 위해 해당 ApostropheCMS 위젯의 콘텐츠에 액세스하는 `RichTextWidget.astro` 컴포넌트를 보여줍니다. + +```js title="src/widgets/RichTextWidget.astro" +--- +const { widget } = Astro.props; +const { content } = widget; +--- +<Fragment set:html={ content }></Fragment> +``` + +이미지 및 비디오와 같은 일부 표준 Apostrophe 위젯에는 기본적으로 편집 가능한 콘텐츠가 포함되어 있지 않기 때문에 **자리 표시자**가 필요합니다. 다음 예시에서는 조건부로 `src` 값을 위젯에서 전달된 `aposPlaceholder` 이미지의 값 (Astro 프로젝트의 대체 이미지) 또는 Apostrophe `attachment`를 사용하는 콘텐츠 관리자에 의해 선택된 이미지로 설정하는 표준 `ImageWidget.astro` 컴포넌트를 생성합니다. + + +```js title="src/widgets/ImageWidget.astro" +--- +const { widget } = Astro.props; +const placeholder = widget?.aposPlaceholder; +const src = placeholder ? + '/images/image-widget-placeholder.jpg' : + widget?._image[0]?.attachment?._urls['full']; +--- +<style> + .img-widget { + width: 100%; + } +</style> +<img class="img-widget" {src} /> +``` +더 많은 예시를 보려면 [`astro-frontend` 시작 프로젝트 위젯 예시](https://github.com/apostrophecms/astro-frontend/tree/main/src/widgets)를 참조하세요. + +각 `.astro` 컴포넌트는 `src/widgets/index.js`의 해당 핵심 Apostrophe 위젯에 매핑되어야 합니다. + +아래 예시에서는 이전 두 컴포넌트를 이 파일에 추가합니다. + +```js title="src/widgets/index.js" +import RichTextWidget from './RichTextWidget.astro'; +import ImageWidget from './ImageWidget.astro'; + +const widgetComponents = { + '@apostrophecms/rich-text': RichTextWidget, + '@apostrophecms/image': ImageWidget +}; + +export default widgetComponents; +``` + +표준, 프로 및 사용자 정의 프로젝트 수준 위젯의 명명 규칙은 [ApostropheCMS 문서](https://apostrophecms.com/extensions/astro-integration)를 참조하세요. + +이제 프로젝트 디렉터리는 다음과 같아야 합니다. + +<FileTree title="Project Structure"> +- src/ + - widgets/ + - **index.js** + - **ImageWidget.astro** + - **RichTextWidget.astro** +- .env +- astro.config.mjs +- package.json +</FileTree> + +### 페이지 타입 추가 + +위젯과 마찬가지로 ApostropheCMS 프로젝트의 모든 페이지 타입 템플릿에는 Astro 프로젝트에 해당 템플릿 컴포넌트가 있어야 합니다. Apostrophe 페이지 타입을 개별 컴포넌트에 매핑하는 파일도 필요합니다. + +Astro 컴포넌트와 매핑 파일 `index.js`를 위한 새 폴더인 `src/templates/`를 생성합니다. 이 폴더에 있는 매핑된 컴포넌트는 `Astro.props`를 통해 페이지의 스키마 필드와 사용자 정의 props를 포함하는 `page` 속성을 받습니다. 이러한 컴포넌트는 `AposArea` 컴포넌트에 액세스하여 Apostrophe areas을 렌더링할 수도 있습니다. + +다음 예시는 `main`이라는 영역 스키마 필드를 포함하여 해당 `home-page` ApostropheCMS 페이지 타입에서 페이지 템플릿을 렌더링하는 `HomePage.astro` 컴포넌트를 보여줍니다. + +```js title="src/templates/HomePage.astro" +--- +import AposArea from '@apostrophecms/apostrophe-astro/components/AposArea.astro'; +const { page, user, query } = Astro.props.aposData; +const { main } = page; +--- + +<section class="bp-content"> + <h1>{ page.title }</h1> + <AposArea area={main} /> +</section> +``` + +각 `.astro` 컴포넌트는 `src/templates/index.js`의 해당 핵심 Apostrophe 페이지 타입에 매핑되어야 합니다. + +아래 예시에서는 이전 `HomePage.astro` 컴포넌트를 이 파일에 추가합니다. + +```js title="src/templates/index.js" +import HomePage from './HomePage.astro'; + +const templateComponents = { + '@apostrophecms/home-page': HomePage +}; + +export default templateComponents; +``` + +특수 페이지 및 조각 페이지 타입을 포함한 템플릿 명명 규칙은 [ApostropheCMS 문서](https://apostrophecms.com/extensions/astro-integration/#how-apostrophe-template-names-work)를 참조하세요. + +이제 프로젝트 디렉터리는 다음과 같아야 합니다. + +<FileTree title="Project Structure"> +- src/ + - widgets/ + - index.js + - ImageWidget.astro + - RichTextWidget.astro + - templates/ + - **HomePage.astro** + - **index.js** +- .env +- astro.config.mjs +- package.json +</FileTree> + +### [...slug.astro] 컴포넌트 생성 및 Apostrophe 데이터 가져오기 + +Apostrophe는 새 콘텐츠와 페이지를 즉시 생성하는 것을 포함하여 URL을 콘텐츠에 연결하는 역할을 담당하므로 최상위 Astro 페이지 컴포넌트인 `[...slug].astro` 경로 하나만 필요합니다. + +다음 예시에서는 최소한의 `[...slug].astro` 컴포넌트를 보여줍니다. + +```js title="src/pages/[...slug].astro" +--- +import aposPageFetch from '@apostrophecms/apostrophe-astro/lib/aposPageFetch.js'; +import AposLayout from '@apostrophecms/apostrophe-astro/components/layouts/AposLayout.astro'; +import AposTemplate from '@apostrophecms/apostrophe-astro/components/AposTemplate.astro'; + +const aposData = await aposPageFetch(Astro.request); +const bodyClass = `myclass`; + +if (aposData.redirect) { + return Astro.redirect(aposData.url, aposData.status); +} +if (aposData.notFound) { + Astro.response.status = 404; +} +--- +<AposLayout title={aposData.page?.title} {aposData} {bodyClass}> + <Fragment slot="standardHead"> + <meta name="description" content={aposData.page?.seoDescription} /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <meta charset="UTF-8" /> + </Fragment> + <AposTemplate {aposData} slot="main"/> +</AposLayout> +``` + +`AposTemplate` 컴포넌트에서 사용 가능한 슬롯을 포함한 추가 템플릿 옵션은 [Apostrophecms 문서](https://apostrophecms.com/extensions/astro-integration#creating-the-slugastro-component-and-fetching-apostrophe-data)를 참조하세요. + +## Astro와 ApostropheCMS로 블로그 만들기 + +통합 설정이 완료되면 이제 Astro 및 ApostropheCMS를 사용하여 블로그를 만들 수 있습니다. 블로그에서는 모든 페이지에 포함될 수 있는 독립형 콘텐츠 타입인 Apostrophe 조각과 이러한 부분을 개별적으로 또는 집합적으로 표시하는 데 사용되는 특수 페이지 타입인 조각 페이지 타입을 사용합니다. + +### 전제 조건 + +1. **Apostrophe CLI 도구가 설치된 ApostropheCMS 프로젝트** - 새 프로젝트를 생성하거나 기존 프로젝트를 사용할 수 있습니다. 그러나 이 튜토리얼에서는 블로그 조각과 조각 페이지 타입을 만드는 방법만 보여줄 뿐입니다. 다른 기존 프로젝트 코드를 독립적으로 통합해야 합니다. CLI 도구가 설치되어 있지 않은 경우 [여기](https://docs.apostrophecms.org/guide/setting-up.html#the-apostrophe-cli-tool)에서 설치 지침을 얻을 수 있습니다. +2. **ApostropheCMS와 통합된 Astro 프로젝트** - 프로젝트를 처음부터 생성하려면 [Astro와 통합](#astro와-통합)에서 통합 설정 방법에 대한 지침을 참조하거나 [astro-frontend](https://github.com/apostrophecms/astro-frontend)를 사용하세요. + +### 블로그 조각 및 조각 페이지 타입 만들기 + +표시할 블로그 조각과 조각 페이지 타입을 만들려면 터미널에서 ApostropheCMS 프로젝트의 루트로 이동하세요. ApostropheCMS CLI 도구를 사용하여 다음 명령으로 새 조각 및 조각 페이지 타입을 만듭니다. + +```sh +apos add piece blog --page +``` + +그러면 프로젝트에 두 개의 새 모듈이 생성됩니다. 하나는 블로그 조각 타입용이고 다른 하나는 해당 조각 페이지 타입용입니다. 그런 다음, 코드 편집기에서 ApostropheCMS 프로젝트 루트에 있는 `app.js` 파일을 열고 새 모듈을 추가하세요. + +```js title="app.js" +require('apostrophe')({ + // 기타 구성 옵션 + modules: { + // 기타 프로젝트 모듈 + blog: {}, + 'blog-page': {} + } +}); +``` + +`blog-page` 모듈도 페이지 생성 모달에서 선택할 수 있도록 `@apostrophecms/page` 모듈 `types` 옵션 배열에 추가되어야 합니다. ApostropheCMS 프로젝트에서 `modules/@apostrophecms/page/index.js` 파일을 열고 `blog-page`를 추가하세요. + +```js title="modules/@apostrophecms/page/index.js" +module.exports = { + options: { + types: [ + { + name: '@apostrophecms/home-page', + label: 'Home' + }, + // 기타 프로젝트 페이지 + { + name: 'blog-page', + label: 'Blog' + } + ] + } +}; +``` + +### 블로그 스키마 생성 + +ApostropheCMS 프로젝트에서는 편집기에 콘텐츠 추가를 위한 입력 필드 세트가 제공됩니다. 다음은 콘텐츠 관리자가 여러 위젯 인스턴스를 추가할 수 있는 `authorName`, `publicationDate` 및 `content` 영역의 세 가지 입력 필드를 추가하는 간단한 블로그 게시물의 예시입니다. 이 경우 [통합 설정](#apostrophecms-위젯을-Astro-컴포넌트에-연결) 중 생성한 이미지 및 서식 있는 텍스트 위젯을 추가할 수 있도록 지정합니다. + +```js title="modules/blog/index.js" +module.exports = { + extend: '@apostrophecms/piece-type', + options: { + label: 'Blog', + // 필요한 경우 'pluralLabel' 옵션도 추가하세요. + }, + fields: { + add: { + authorName: { + type: 'string', + label: 'Author' + }, + publicationDate: { + type: 'date', + label: 'Publication date' + }, + content: { + type: 'area', + label: 'Content', + options: { + widgets: { + '@apostrophecms/rich-text': {}, + '@apostrophecms/image': {} + } + } + } + }, + group: { + basics: { + label: 'Basic', + fields: [ 'authorName', 'publicationDate', 'content' ] + } + } + } +}; +``` + +이 시점에서 ApostropheCMS 프로젝트의 모든 컴포넌트가 설정되었습니다. `npm run dev`를 사용하여 명령줄에서 로컬 사이트를 시작하고 선택한 문자열에 설정된 `APOS_EXTERNAL_FRONT_KEY` 환경 변수를 전달해야 합니다. + +```bash +APOS_EXTERNAL_FRONT_KEY='MyRandomString' npm run dev +``` + +### 블로그 게시물 표시 +모든 블로그 게시물이 포함된 페이지를 표시하려면 Astro 프로젝트의 `src/templates` 디렉터리에 `BlogIndex.astro` 컴포넌트 파일을 만들고 다음 코드를 추가하세요. + +이 컴포넌트는 `aposData` props에서 페이지와 조각 데이터를 모두 가져온 후, 여러분이 생성한 블로그 조각 스키마의 필드 뿐만 아니라 Apostrophe에 의해 각 조각에 추가된 `piece.title` 및 `piece._url`의 필드까지 사용하여 마크업을 생성합니다. + +```js title="src/templates/BlogIndex.astro" +--- +import dayjs from 'dayjs'; + +const { page, pieces } = Astro.props.aposData; +--- + +<section class="bp-content"> + <h1>{ page.title }</h1> + + <h2>Blog Posts</h2> + + {pieces.map(piece => ( + <h4> + Released On { dayjs(piece.publicationDate).format('MMMM D, YYYY') } + </h4> + <h3> + <a href={ piece._url }>{ piece.title }</a> + </h3> + <h4>{ piece.authorName }</h4> + ))} +</section> +``` + +개별 블로그 게시물을 표시하려면 다음 코드를 사용하여 Astro 프로젝트의 `src/templates` 폴더에 `BlogShow.astro` 파일을 생성합니다. + +이 컴포넌트는 `<AposArea>` 컴포넌트를 사용하여 `content` 영역에 추가된 모든 위젯과 동일한 이름의 필드에 입력된 `authorName` 및 `publicationDate` 콘텐츠를 표시합니다. + +```js title="src/templates/BlogShow.astro" +--- +import AposArea from '@apostrophecms/apostrophe-astro/components/AposArea.astro'; +import dayjs from 'dayjs'; + +const { page, piece } = Astro.props.aposData; +const { main } = piece; +--- + +<section class="bp-content"> + <h1>{ piece.title }</h1> + <h3>Created by: { piece.authorName } + <h4> + Released On { dayjs(piece.publicationDate).format('MMMM D, YYYY') } + </h4> + <AposArea area={content} /> +</section> +``` + +마지막으로 이러한 Astro 컴포넌트는 해당 ApostropheCMS 페이지 타입에 매핑되어야 합니다. Astro 프로젝트의 `src/templates/index.js` 파일을 열고 다음 코드를 포함하도록 수정합니다. + +```js title="src/templates/index.js" +import HomePage from './HomePage.astro'; +import BlogIndexPage from './BlogIndexPage.astro'; +import BlogShowPage from './BlogShowPage.astro'; + +const templateComponents = { + '@apostrophecms/home-page': HomePage, + '@apostrophecms/blog-page:index': BlogIndexPage, + '@apostrophecms/blog-page:show': BlogShowPage +}; + +export default templateComponents; +``` + +### 블로그 게시물 작성 + +사이트에 블로그 게시물을 추가하려면 ApostropheCMS 콘텐츠 및 관리 도구를 사용하여 해당 게시물을 만들고 적어도 하나의 색인 페이지를 게시하여 이를 표시하면 됩니다. + +Astro 개발 서버가 실행 중인 상태에서 브라우저 미리 보기의 [http://localhost:4321/login](http://localhost:4321/login)에 있는 로그인 페이지로 이동합니다. [ApostropheCMS 프로젝트 생성](https://docs.apostrophecms.org/guide/development-setup.html#creating-a-project) 중 추가된 자격 증명을 사용하여 관리자로 로그인합니다. ApostropheCMS 프로젝트는 계속 실행 중이어야 합니다. + +로그인하면 브라우저가 프로젝트 홈 페이지로 리디렉션되고 상단에 콘텐츠 편집 및 프로젝트 관리를 위한 관리 표시줄이 나타납니다. + +첫 번째 블로그 게시물을 추가하려면 관리 표시줄에서 `Blogs` 버튼을 클릭하여 블로그 조각 생성 모달을 엽니다. 오른쪽 상단 `New Blog` 버튼을 클릭하면 콘텐츠를 추가할 수 있는 편집 모달이 열립니다. `content` 영역 필드를 사용하면 원하는 만큼 이미지와 서식 있는 텍스트 위젯을 추가할 수 있습니다. + +이 단계를 반복하여 원하는 만큼 게시물을 추가할 수 있습니다. 새 게시물을 추가할 때마다 다음 단계를 따르세요. + +모든 게시물을 표시할 페이지를 게시하려면 관리 표시줄에서 `Pages` 버튼을 클릭하세요. 페이지 트리 모달에서 `New Page` 버튼을 클릭하세요. 오른쪽 열의 `Type` 드롭다운에서 `Blog`를 선택하세요. 페이지 제목을 추가한 다음 `Publish and View`를 클릭하세요. 이 작업은 한 번만 수행하면 됩니다. + +생성된 모든 새 블로그 게시물은 자동으로 이 페이지에 표시됩니다. 개별 블로그 게시물은 색인 페이지에 생성된 링크를 클릭하여 표시할 수 있습니다. + +개별 게시물의 `content` 영역은 게시물로 이동한 후 관리 표시줄에서 `edit`을 클릭하여 페이지에서 직접 편집할 수 있습니다. 다른 필드는 관리 표시줄에서 `Blogs` 메뉴 항목을 클릭하면 열리는 편집 모달을 사용하여 편집할 수 있습니다. + +### 사이트 배포 + +웹사이트를 배포하려면 Astro 및 ApostropheCMS 프로젝트를 모두 호스팅해야 합니다. + +Astro의 경우 [배포 가이드](/ko/guides/deploy/)를 방문하여 선호하는 호스팅 제공업체의 지침을 따르세요. + +ApostropheCMS 프로젝트의 경우 [호스팅 가이드](https://docs.apostrophecms.org/guide/hosting.html)에서 호스팅 유형에 대한 지침을 따르세요. 마지막으로 ApostropheCMS 사이트가 배포된 올바른 URL을 반영하기 위해 Astro 프로젝트에 `APOS_HOST` 환경 변수를 제공해야 합니다. + +## 공식 자료 - [ApostropheCMS의 Astro 통합](https://apostrophecms.com/extensions/astro-integration) - ApostropheCMS Astro 플러그인, ApostropheCMS와 Astro 모두를 위한 통합 가이드 및 스타터 프로젝트 +- [ApostropheCMS와 함께 사용할 샘플 Astro 프로젝트](https://github.com/apostrophecms/astro-frontend) - 여러 페이지와 Apostrophe 위젯이 이미 생성된 간단한 Astro 프로젝트 +- [Astro와 함께 사용할 수 있는 샘플 ApostropheCMS 스타터 키트](https://apostrophecms.com/starter-kits/astro-integration-starter-kit) - Astro와 함께 사용하기 위해 핵심 페이지 수정이 포함된 ApostropheCMS 프로젝트 + +## 커뮤니티 자료 +- [ApostropheCMS를 Astro와 통합, 파트1](https://apostrophecms.com/blog/how-to-integrate-astro-with-apostrophecms-pt-1) - Antonello Zaini +- [ApostropheCMS를 Astro와 통합, 파트2](https://apostrophecms.com/blog/how-to-integrate-astro-with-apostrophecms-pt-2) - Antonello Zaini +- [Show & Tell 라이브 | Astro & Apostrophe](https://youtu.be/cwJhtJhAhwA?si=6iUU9EjidfdnOdCh) \ No newline at end of file diff --git a/src/content/docs/ko/guides/cms/builderio.mdx b/src/content/docs/ko/guides/cms/builderio.mdx index 4b0423396c369..13c85b1f0dae7 100644 --- a/src/content/docs/ko/guides/cms/builderio.mdx +++ b/src/content/docs/ko/guides/cms/builderio.mdx @@ -9,6 +9,7 @@ i18nReady: true import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import { FileTree } from '@astrojs/starlight/components'; +import { Steps } from '@astrojs/starlight/components'; [Builder.io](https://www.builder.io/)는 웹사이트 구축을 위한 드래그 앤 드롭 콘텐츠 편집을 지원하는 시각적 CMS입니다. @@ -139,11 +140,13 @@ const builderModel = import.meta.env.BUILDER_BLOGPOST_MODEL; #### 새 경로를 미리보기 URL로 설정 +<Steps> 1. 프로토콜을 포함하여 미리보기의 전체 URL을 클립보드에 복사합니다 (예: `https://{yourhost}/builder-preview`). 2. Builder space의 **Models** 탭으로 이동하여 생성한 모델을 선택하고 1단계의 URL을 **Preview URL** 필드에 붙여넣습니다. URL이 완전하고 프로토콜 (예: `https://`)을 포함하는지 확인하세요. 3. 오른쪽 상단의 **Save** 버튼을 클릭하세요. +</Steps> :::tip 사이트를 배포할 때 미리보기 URL을 프로덕션 URL과 일치하도록 변경하세요 (예: `https://myAwesomeAstroBlog.com/builder-preview`). @@ -151,11 +154,13 @@ const builderModel = import.meta.env.BUILDER_BLOGPOST_MODEL; #### 미리보기 URL 설정 테스트 +<Steps> 1. 사이트가 활성화되어 있는지 (예: 개발 서버가 실행 중인지), 그리고 `/builder-preview` 경로가 작동하는지 확인하세요. 2. **Content** 탭 아래의 Builder space에서 **New**를 클릭하여 `blogpost` 모델에 대한 새 콘텐츠 항목을 만듭니다. 3. 방금 연 Builder 편집기에서 중간에 큰 **Add Block**이 있는 `builder-preview.astro` 페이지를 볼 수 있습니다. +</Steps> :::tip[문제해결] @@ -171,13 +176,19 @@ const builderModel = import.meta.env.BUILDER_BLOGPOST_MODEL; ### 블로그 게시물 작성하기 +<Steps> 1. Builder의 시각적 편집기에서 다음 값을 사용하여 새 콘텐츠 항목을 생성합니다. - **title:** 'First post, woohoo!' - **slug:** 'first-post-woohoo' + 2. **Add Block** 버튼을 사용하여 게시물을 완성하고 일부 게시물 콘텐츠가 포함된 텍스트 필드를 추가하세요. + 3. 편집기 위의 텍스트 필드에 항목 이름을 지정합니다. 이것이 Builder 앱에 나열되는 방식입니다. + 4. 준비가 되면 오른쪽 상단에 있는 **Publish** 버튼을 클릭하세요. + 5. 모든 콘텐츠 항목에 `title`, `slug` 및 일부 게시물 콘텐츠가 포함되어 있는지 확인하여 원하는 만큼 게시물을 만듭니다. +</Steps> ### 블로그 게시물 목록 표시하기 @@ -206,7 +217,7 @@ const { results: posts } = await fetch( <body> <ul> { - posts.map(({ data: { slug, title } }) => ( + posts.flatMap(({ data: { slug, title } }) => ( <li> <a href={`/posts/${slug}`}>{title}</a> </li> @@ -303,7 +314,7 @@ const { html: postHTML } = await fetch( <article> <Fragment set:html={postHTML} /> </article> - <footer>The is your footer</footer> + <footer>This is your footer</footer> </body> </html> ``` @@ -324,15 +335,23 @@ const { html: postHTML } = await fetch( ##### Netlify +<Steps> 1. 사이트 대시보드로 이동한 다음 **Site Settings**으로 이동하여 **Build & deploy**를 클릭합니다. + 2. **Continuous Deployment** 탭에서 **Build hooks** 섹션을 찾아 **Add build hook**를 클릭합니다. + 3. 웹후크의 이름을 제공하고 빌드를 트리거할 브랜치를 선택합니다. **Save**을 클릭하고 생성된 URL을 복사하세요. +</Steps> ##### Vercel +<Steps> 1. 프로젝트 대시보드로 이동하여 **Settings**을 클릭합니다. + 2. **Git** 탭에서 **Deploy Hooks** 섹션을 찾습니다. + 3. 빌드를 트리거할 웹후크와 브랜치의 이름을 제공합니다. **Add**를 클릭하고 생성된 URL을 복사합니다. +</Steps> ##### Builder에 웹후크 추가 diff --git a/src/content/docs/ko/guides/cms/buttercms.mdx b/src/content/docs/ko/guides/cms/buttercms.mdx index 41e1205241ead..4ec5811d0c204 100644 --- a/src/content/docs/ko/guides/cms/buttercms.mdx +++ b/src/content/docs/ko/guides/cms/buttercms.mdx @@ -7,6 +7,7 @@ stub: false i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' [ButterCMS](https://buttercms.com/)는 프로젝트에 사용할 구조화된 콘텐츠를 게시할 수 있는 헤드리스 CMS 및 블로그 엔진입니다. @@ -30,6 +31,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' ### 설정 +<Steps> 1. 프로젝트 루트에 `.env` 파일을 만들고 API 토큰을 환경 변수로 추가합니다. ```ini title=".env" @@ -67,6 +69,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' export const butterClient = Butter(import.meta.env.BUTTER_TOKEN); ``` +</Steps> **API 토큰을 사용하여 SDK를 인증하고 프로젝트 전체에서 사용할 수 있도록 내보냅니다.** diff --git a/src/content/docs/ko/guides/cms/contentful.mdx b/src/content/docs/ko/guides/cms/contentful.mdx index c3c94c1afb390..9a0976f0e60f4 100644 --- a/src/content/docs/ko/guides/cms/contentful.mdx +++ b/src/content/docs/ko/guides/cms/contentful.mdx @@ -7,7 +7,8 @@ i18nReady: true --- import { FileTree } from '@astrojs/starlight/components'; -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; [Contentful](https://www.contentful.com/)은 콘텐츠를 관리하고, 다른 서비스와 통합하고, 여러 플랫폼에 게시할 수 있는 헤드리스 CMS입니다. @@ -543,21 +544,25 @@ try { Netlify에서 웹후크를 설정하려면: +<Steps> 1. 사이트 대시보드로 이동하여 **Build & deploy**를 클릭합니다. 2. **Continuous Deployment** 탭에서 **Build hooks** 섹션을 찾아 **Add build hook**를 클릭합니다. 3. 웹후크의 이름을 제공하고 빌드를 트리거할 브랜치를 선택합니다. **Save**를 클릭하고 생성된 URL을 복사하세요. +</Steps> ##### Vercel Vercel에서 웹후크를 설정하려면 다음 안내를 따르세요. +<Steps> 1. 프로젝트 대시보드로 이동하여 **Settings**을 클릭합니다. 2. **Git** 탭에서 **Deploy Hooks** 섹션을 찾습니다. 3. 빌드를 트리거할 웹후크와 브랜치의 이름을 제공합니다. **Add**를 클릭하고 생성된 URL을 복사합니다. +</Steps> ##### Contentful에 웹후크 추가하기 diff --git a/src/content/docs/ko/guides/cms/cosmic.mdx b/src/content/docs/ko/guides/cms/cosmic.mdx index b4973a87d3e5a..8e190d8cb5f3f 100644 --- a/src/content/docs/ko/guides/cms/cosmic.mdx +++ b/src/content/docs/ko/guides/cms/cosmic.mdx @@ -6,9 +6,10 @@ service: Cosmic i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import Grid from '~/components/FluidGrid.astro' -import Card from '~/components/ShowcaseCard.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import Grid from '~/components/FluidGrid.astro'; +import Card from '~/components/ShowcaseCard.astro'; +import { Steps } from '@astrojs/starlight/components'; [Cosmic](https://www.cosmicjs.com/)은 콘텐츠를 관리하기 위한 관리 대시보드와 다양한 프런트엔드 도구와 통합할 수 있는 API를 제공하는 [헤드리스 CMS](https://www.cosmicjs.com/headless-cms)입니다. @@ -53,6 +54,7 @@ PUBLIC_COSMIC_READ_KEY=YOUR_READ_KEY ## Cosmic에서 데이터 가져오기 +<Steps> 1. `cosmic.js`라는 새 파일을 만듭니다. 이 파일을 프로젝트의 `src/lib` 폴더 안에 넣으세요. 2. SDK 및 환경 변수를 사용하여 Cosmic에서 데이터를 가져오려면 다음 코드를 추가합니다. @@ -110,6 +112,7 @@ PUBLIC_COSMIC_READ_KEY=YOUR_READ_KEY ``` [Card 컴포넌트의 소스 코드 보기](https://github.com/cosmicjs/simple-astro-blog/blob/main/src/components/Card.astro) +</Steps> ## Astro와 Cosmic으로 블로그 만들기 @@ -229,17 +232,25 @@ const { post } = Astro.props Netlify에서 웹후크를 설정하려면: +<Steps> 1. 사이트 대시보드로 이동하여 **Build & deploy**를 클릭합니다. + 2. **Continuous Deployment** 탭에서 **Build hooks** 섹션을 찾아 **Add build hook**를 클릭합니다. + 3. 웹후크의 이름을 제공하고 빌드를 트리거할 브랜치를 선택합니다. **Save**을 클릭하고 생성된 URL을 복사하세요. +</Steps> ##### Vercel Vercel에서 웹후크를 설정하려면 다음 안내를 따르세요. +<Steps> 1. 프로젝트 대시보드로 이동하여 **Settings**을 클릭합니다. + 2. **Git** 탭에서 **Deploy Hooks** 섹션을 찾습니다. + 3. 빌드를 트리거할 웹후크와 브랜치의 이름을 제공합니다. **Add**를 클릭하고 생성된 URL을 복사합니다. +</Steps> ## 테마 diff --git a/src/content/docs/ko/guides/cms/datocms.mdx b/src/content/docs/ko/guides/cms/datocms.mdx index 535358847a13e..a8c66f2760882 100644 --- a/src/content/docs/ko/guides/cms/datocms.mdx +++ b/src/content/docs/ko/guides/cms/datocms.mdx @@ -7,6 +7,7 @@ service: DatoCMS i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; [DatoCMS](https://datocms.com/)는 사이트와 앱의 디지털 콘텐츠를 관리하는 웹 기반 헤드리스 CMS입니다. @@ -184,17 +185,25 @@ const data = json.data.home; Netlify에서 웹후크를 설정하려면: +<Steps> 1. 사이트 대시보드로 이동하여 **Build & deploy**를 클릭합니다. + 2. **Continuous Deployment** 탭에서 **Build hooks** 섹션을 찾아 **Add build hook**를 클릭합니다. + 3. 웹후크의 이름을 제공하고 빌드를 트리거할 브랜치를 선택합니다. **Save**을 클릭하고 생성된 URL을 복사하세요. +</Steps> ### Vercel Vercel에서 웹후크를 설정하려면 다음 안내를 따르세요. +<Steps> 1. 프로젝트 대시보드로 이동하여 **Settings**을 클릭합니다. + 2. **Git** 탭에서 **Deploy Hooks** 섹션을 찾습니다. + 3. 빌드를 트리거할 웹후크와 브랜치의 이름을 제공합니다. **Add**를 클릭하고 생성된 URL을 복사합니다. +</Steps> ### DatoCMS에 웹후크 추가 diff --git a/src/content/docs/ko/guides/cms/decap-cms.mdx b/src/content/docs/ko/guides/cms/decap-cms.mdx index e954c72bbab93..8b154b3e4727e 100644 --- a/src/content/docs/ko/guides/cms/decap-cms.mdx +++ b/src/content/docs/ko/guides/cms/decap-cms.mdx @@ -7,10 +7,11 @@ service: Decap CMS i18nReady: false --- -import Grid from '~/components/FluidGrid.astro' -import Card from '~/components/ShowcaseCard.astro' -import { FileTree } from '@astrojs/starlight/components' -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import Grid from '~/components/FluidGrid.astro'; +import Card from '~/components/ShowcaseCard.astro'; +import { Steps } from '@astrojs/starlight/components'; +import { FileTree } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; [Decap CMS](https://www.decapcms.org/) (이전 Netlify CMS)는 오픈 소스 Git 기반 콘텐츠 관리 시스템입니다. @@ -55,13 +56,16 @@ Astro에 Decap을 추가하는 데는 두 가지 옵션이 있습니다. ## 구성 +<Steps> 1. `public/admin/`에 정적 어드민 폴더를 생성합니다. + 2. `public/admin/`에 `config.yml` 파일을 추가합니다. <FileTree> - public - admin - config.yml </FileTree> + 3. 콘텐츠 컬렉션에 대한 지원을 추가하려면 `config.yml`에서 각 스키마를 구성하세요. 다음 예시에서는 각 항목의 프런트매터 속성에 대한 `label`을 정의하여 `blog` 컬렉션을 구성합니다. ```yml title="/public/admin/config.yml" collections: @@ -107,6 +111,7 @@ Astro에 Decap을 추가하는 데는 두 가지 옵션이 있습니다. media_folder: "src/assets/images" # Repo에서 파일이 저장될 위치 public_folder: "src/assets/images" # 업로드된 미디어의 src 속성 ``` +</Steps> 전체 지침과 옵션은 [Decap CMS 구성 문서](https://decapcms.org/docs/configure-decap-cms/)를 참조하세요. diff --git a/src/content/docs/ko/guides/cms/hygraph.mdx b/src/content/docs/ko/guides/cms/hygraph.mdx index 26c37d5512fb6..a943a42ba85a5 100644 --- a/src/content/docs/ko/guides/cms/hygraph.mdx +++ b/src/content/docs/ko/guides/cms/hygraph.mdx @@ -6,6 +6,7 @@ service: Hygraph i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; [Hygraph](https://hygraph.com/)는 통합 콘텐츠 관리 플랫폼입니다. 콘텐츠를 가져오기 위한 GraphQL 엔드포인트를 노출합니다. @@ -111,6 +112,7 @@ const posts: Post[] = json.data.blogPosts; Netlify에서 웹후크을 설정하려면: +<Steps> 1. [이 가이드](/ko/guides/deploy/netlify/)를 사용하여 Netlify에 사이트를 배포하세요. 환경 변수에 `HYGRAPH_ENDPOINT`를 추가하는 것을 잊지 마세요. 2. 그런 다음 Hygraph 프로젝트 대시보드로 이동하여 **Apps**를 클릭하세요. @@ -118,6 +120,7 @@ Netlify에서 웹후크을 설정하려면: 3. 마켓플레이스로 이동하여 Netlify를 검색하고 제공된 지침을 따르세요. 4. 모든 것이 순조롭게 진행되었다면 이제 Hygraph 인터페이스에서 클릭 한 번으로 웹사이트를 배포할 수 있습니다. +</Steps> ## 커뮤니티 자료 diff --git a/src/content/docs/ko/guides/cms/keystatic.mdx b/src/content/docs/ko/guides/cms/keystatic.mdx index a53e2d3aff073..7a024832e6be6 100644 --- a/src/content/docs/ko/guides/cms/keystatic.mdx +++ b/src/content/docs/ko/guides/cms/keystatic.mdx @@ -6,6 +6,7 @@ service: Keystatic i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; @@ -158,6 +159,7 @@ Keystatic 관리 UI 대시보드를 시작하려면 Astro의 개발 서버를 ## 새 게시물 만들기 +<Steps> 1. Keystatic 관리 UI 대시보드에서 "“Posts”" 컬렉션을 클릭합니다. 2. 버튼을 이용하여 새 게시물을 작성하세요. "My First Post"라는 제목과 내용을 추가한 후 게시물을 저장하세요. @@ -165,7 +167,6 @@ Keystatic 관리 UI 대시보드를 시작하려면 Astro의 개발 서버를 3. 이제 이 게시물이 "Posts" 컬렉션에 표시됩니다. 이 대시보드 페이지에서 개별 게시물을 보고 편집할 수 있습니다. 4. Astro 프로젝트 파일을 보기 위해 돌아갑니다. 이제 이 새 게시물에 대한 `src/content/posts` 디렉터리에서 새로운 `.mdoc` 파일을 찾을 수 있습니다. - <FileTree title="Project Structure"> - src/ - content/ @@ -174,7 +175,6 @@ Keystatic 관리 UI 대시보드를 시작하려면 Astro의 개발 서버를 </FileTree> 5. 코드 편집기에서 해당 파일로 이동하여 입력한 Markdown 콘텐츠를 볼 수 있는지 확인합니다. 예를 들어: - ```markdown --- title: My First Post @@ -182,6 +182,7 @@ Keystatic 관리 UI 대시보드를 시작하려면 Astro의 개발 서버를 This is my very first post. I am **super** excited! ``` +</Steps> ## Keystatic 콘텐츠 렌더링 diff --git a/src/content/docs/ko/guides/cms/kontent-ai.mdx b/src/content/docs/ko/guides/cms/kontent-ai.mdx index 672df0c2b6fcf..c6775ce60dc53 100644 --- a/src/content/docs/ko/guides/cms/kontent-ai.mdx +++ b/src/content/docs/ko/guides/cms/kontent-ai.mdx @@ -6,6 +6,7 @@ service: Kontent.ai i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' @@ -530,19 +531,27 @@ try { Netlify에서 웹후크를 설정하려면: +<Steps> 1. 사이트 대시보드로 이동하여 **Build & deploy**를 클릭합니다. + 2. **Continuous Deployment** 탭에서 **Build hooks** 섹션을 찾아 **Add build hook**를 클릭합니다. + 3. 웹후크의 이름을 제공하고 빌드를 트리거할 브랜치를 선택합니다. **Save**을 클릭하고 생성된 URL을 복사하세요. +</Steps> ##### Vercel Vercel에서 웹후크를 설정하려면 다음 안내를 따르세요. +<Steps> 1. 프로젝트 대시보드로 이동하여 **Settings**을 클릭합니다. + 2. **Git** 탭에서 **Deploy Hooks** 섹션을 찾습니다. + 3. 빌드를 트리거할 웹후크와 브랜치의 이름을 제공합니다. **Add**를 클릭하고 생성된 URL을 복사합니다. +</Steps> -Kontent.ai에 웹후크 추가 +##### Kontent.ai에 웹후크 추가 [Kontent.ai 앱](https://kontent.ai/learn/docs/webhooks/javascript)에서 **Environment settings -> Webhooks**로 이동합니다. **Create new webhook**를 클릭하고 새 웹후크의 이름을 입력하세요. Netlify 또는 Vercel에서 복사한 URL을 붙여넣고 웹후크를 트리거할 이벤트를 선택하세요. 기본적으로 게시된 콘텐츠가 변경될 때 사이트를 다시 빌드하려면 **Delivery API triggers** 아래에 **Publish** 및 **Unpublish** 이벤트만 필요합니다. 완료되면 저장을 클릭하세요. diff --git a/src/content/docs/ko/guides/cms/payload.mdx b/src/content/docs/ko/guides/cms/payload.mdx index ed64c2cb42681..2cc2aea01441a 100644 --- a/src/content/docs/ko/guides/cms/payload.mdx +++ b/src/content/docs/ko/guides/cms/payload.mdx @@ -6,6 +6,7 @@ stub: true service: Payload CMS i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [PayloadCMS](https://payloadcms.com/)는 Astro 프로젝트에 콘텐츠를 제공하는 데 사용할 수 있는 헤드리스 오픈 소스 콘텐츠 관리 시스템입니다. @@ -13,7 +14,6 @@ i18nReady: true ### 전제 조건 - 1. **Astro 프로젝트** - 아직 Astro 프로젝트가 없다면 [설치 가이드](/ko/install/auto/)를 참조하여 바로 실행해 보세요. 2. **MongoDB 데이터베이스** - PayloadCMS는 새 프로젝트를 생성할 때 MongoDB 연결 문자열을 요청합니다. 로컬로 설정하거나 [MongoDBAtlas](https://www.mongodb.com/)를 사용하여 웹에서 무료로 데이터베이스를 호스팅할 수 있습니다. 3. **PayloadCMS REST API** - [PayloadCMS](https://payloadcms.com/docs/getting-started/installation) 프로젝트를 생성하고 설정 중에 MongoDB 데이터베이스에 연결합니다. @@ -28,8 +28,7 @@ PayloadCMS 설치 중에 템플릿을 사용할지 묻는 메시지가 표시됩 Payload 프로젝트 템플릿에는 `src/collections/`에 Posts.ts라는 파일이 포함됩니다. 설치 중에 콘텐츠 컬렉션을 생성하는 템플릿을 선택하지 않은 경우 이 구성 파일을 수동으로 추가하여 새 Payload CMS 컬렉션을 생성할 수 있습니다. 아래 예는 `title`, `content`, `slug` 필드가 필요한 `posts` 컬렉션에 대한 파일을 보여줍니다. - -```astro title="src/collections/Posts.ts" +```ts title="src/collections/Posts.ts" import { CollectionConfig } from "payload/types"; const Posts: CollectionConfig = { @@ -63,9 +62,10 @@ const Posts: CollectionConfig = { export default Posts; ``` +<Steps> 1. `Users` (모든 PayloadCMS 프로젝트에서 사용 가능)와 기타 컬렉션 (예: `Posts`)을 모두 가져와 `payload.config.ts` 파일의 사용 가능한 컬렉션에 추가합니다. - ```astro title="src/payload.config.ts" ins={4, 5, 12} + ```ts title="src/payload.config.ts" ins={4, 5, 12} import { buildConfig } from "payload/config"; import path from "path"; @@ -116,6 +116,7 @@ export default Posts; "nextPage":null } ``` +</Steps> :::tip 기본적으로 Astro와 PayloadCMS는 모두 포트 4321을 사용합니다. `src/server.ts` 파일에서 PayloadCMS 포트를 변경하고 싶을 수도 있습니다. `src/payload.config.ts` 파일에서도 `serverURL`을 업데이트하는 것을 잊지 마세요. @@ -216,7 +217,6 @@ export async function getStaticPaths() { 사이트를 배포하려면 [배포 가이드](/ko/guides/deploy/)를 방문하여 선호하는 호스팅 제공업체의 지침을 따르세요. - ## 커뮤니티 자료 - [Payload CMS & Astro 템플릿](https://github.com/Lambdo-Labs/payloadcms-astro-template)을 시도하세요. diff --git a/src/content/docs/ko/guides/cms/preprcms.mdx b/src/content/docs/ko/guides/cms/preprcms.mdx index a2251e27cb7e7..8768b293ba8e4 100644 --- a/src/content/docs/ko/guides/cms/preprcms.mdx +++ b/src/content/docs/ko/guides/cms/preprcms.mdx @@ -6,8 +6,9 @@ service: Prepr CMS stub: true i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; [Prepr CMS](https://www.prepr.io/)는 개인화 기능이 내장된 헤드리스 CMS입니다. @@ -32,8 +33,12 @@ PREPR_ENDPOINT=YOUR_PREPR_API_URL ``` Prepr 계정 설정에서 `YOUR_PREPR_API_URL` 값을 확인할 수 있습니다. + +<Steps> 1. **Settings > Access tokens**로 이동하여 미리보기 및 프로덕션 액세스 토큰을 모두 확인하세요. + 2. Astro 사이트에 게시된 콘텐츠 항목만 검색하려면 **GraphQL Production** 액세스 토큰의 **API URL** 값을 사용하세요. +</Steps> ### Prepr 엔드포인트 구성 @@ -70,7 +75,10 @@ export async function Prepr(query, variables) { GraphQL API와 상호 작용하는 쿼리를 작성하여 Prepr에서 데이터를 가져옵니다. #### GraphQL 쿼리를 생성하여 블로그 아티클을 검색합니다. + +<Steps> 1. `src/queries/`라는 새 폴더를 만들고 `get-articles.js`라는 파일을 추가합니다. + 2. 모든 아티클을 검색하려면 이 파일에 다음 쿼리를 추가합니다. ```js title="src/queries/get-articles.js" @@ -117,7 +125,7 @@ GraphQL API와 상호 작용하는 쿼리를 작성하여 Prepr에서 데이터 </ul> </Layout> ``` - +</Steps> 루트 디렉터리에는 다음과 같은 새 파일이 포함되어야 합니다. @@ -136,6 +144,7 @@ GraphQL API와 상호 작용하는 쿼리를 작성하여 Prepr에서 데이터 각 블로그 게시물에 대한 페이지를 생성하려면 [동적 라우팅](/ko/guides/routing/#서버-ssr-모드) `.astro` 페이지에서 새 GraphQL 쿼리를 실행합니다. 이 쿼리는 슬러그를 통해 특정 아티클을 가져오고 개별 블로그 게시물에 대해 새 페이지가 생성됩니다. +<Steps> 1. `queries` 폴더에 `get-article-by-slug.js`라는 파일을 만들고 다음을 추가하여 해당 슬러그로 특정 아티클을 쿼리하고 아티클의 `title` 및 `content`와 같은 데이터를 반환합니다. ```js title="src/lib/queries/get-article-by-slug.js" @@ -163,9 +172,9 @@ GraphQL API와 상호 작용하는 쿼리를 작성하여 Prepr에서 데이터 export default GetArticleBySlug ``` -:::tip -Prepr의 [Apollo explorer](https://studio.apollographql.com/sandbox/explorer)를 사용하여 [GraphQL 쿼리를 생성하고 테스트](https://docs.prepr.io/reference/graphql/v1/test-queries)할 수 있습니다. Prepr의 *Article* 콘텐츠 항목 페이지에서 API explorer를 엽니다. Article 콘텐츠는 *Dynamic content field*에 저장됩니다. [이 필드에서 데이터를 가져오는 방법](https://docs.prepr.io/reference/graphql/v1/schema-field-types-dynamic-content-field)에 대한 자세한 내용은 GraphQL 문서를 확인하세요. -::: + :::tip + Prepr의 [Apollo explorer](https://studio.apollographql.com/sandbox/explorer)를 사용하여 [GraphQL 쿼리를 생성하고 테스트](https://docs.prepr.io/reference/graphql/v1/test-queries)할 수 있습니다. Prepr의 *Article* 콘텐츠 항목 페이지에서 API explorer를 엽니다. Article 콘텐츠는 *Dynamic content field*에 저장됩니다. [이 필드에서 데이터를 가져오는 방법](https://docs.prepr.io/reference/graphql/v1/schema-field-types-dynamic-content-field)에 대한 자세한 내용은 GraphQL 문서를 확인하세요. + ::: 2. `src/pages` 폴더에 `[...slug].astro` 파일을 생성합니다. 다음 코드를 추가하여 이전 단계에서 쿼리를 가져와 실행하여 검색된 아티클을 표시합니다. @@ -201,6 +210,7 @@ Prepr의 [Apollo explorer](https://studio.apollographql.com/sandbox/explorer)를 </main> </Layout> ``` +</Steps> 이제 루트 디렉터리에 다음과 같은 새 파일이 포함되어야 합니다. diff --git a/src/content/docs/ko/guides/cms/sitecore.mdx b/src/content/docs/ko/guides/cms/sitecore.mdx index 6e00850320f9f..f6d9ac7962241 100644 --- a/src/content/docs/ko/guides/cms/sitecore.mdx +++ b/src/content/docs/ko/guides/cms/sitecore.mdx @@ -6,17 +6,22 @@ stub: true service: Sitecore XM i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Sitecore Experience Manager (XM)](https://www.sitecore.com/products/experience-manager)는 ASP.NET을 기반으로 구축된 엔터프라이즈급 콘텐츠 관리 시스템입니다. ## 시작하기 +<Steps> 1. Sitecore의 공식 문서에 따라 [Sitecore 헤드리스 웹사이트를 만드세요](https://doc.sitecore.com/xp/en/developers/sxa/103/sitecore-experience-accelerator/create-a-headless-tenant-and-site.html). + 2. 터미널에서 다음 프로젝트 초기 명령어를 실행하세요. - ```shell - npx @astro-sitecore-jss/create-astro-sitecore-jss@latest - ``` + ```shell + npx @astro-sitecore-jss/create-astro-sitecore-jss@latest + ``` + 3. 터미널의 지침에 따라 프로젝트를 생성하세요. +</Steps> ## 커뮤니티 자료 diff --git a/src/content/docs/ko/guides/cms/spinal.mdx b/src/content/docs/ko/guides/cms/spinal.mdx index 23bd109025ab5..ac5fe59165767 100644 --- a/src/content/docs/ko/guides/cms/spinal.mdx +++ b/src/content/docs/ko/guides/cms/spinal.mdx @@ -6,14 +6,19 @@ stub: true service: Spinal i18nReady: false --- +import { Steps } from '@astrojs/starlight/components'; [Spinal](https://spinalcms.com/cms-for-astro/)은 SaaS에 초점을 맞춘 상용 Git 기반 CMS입니다. ## 시작하기 +<Steps> 1. [Spinal 계정을 생성하세요](https://spinalcms.com/signup/). + 2. GitHub 계정을 Spinal에 연결하세요. + 3. 메시지가 나타나면 Astro 저장소를 선택하세요. +</Steps> 선택한 폴더의 모든 Markdown 콘텐츠를 Spinal 계정으로 가져오면 편집할 준비가 완료됩니다. diff --git a/src/content/docs/ko/guides/cms/storyblok.mdx b/src/content/docs/ko/guides/cms/storyblok.mdx index 9ee3acdb6452f..1e0e2b6f54683 100644 --- a/src/content/docs/ko/guides/cms/storyblok.mdx +++ b/src/content/docs/ko/guides/cms/storyblok.mdx @@ -7,6 +7,7 @@ stub: false i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' @@ -510,21 +511,25 @@ try { Netlify에서 웹후크을 설정하려면: +<Steps> 1. 사이트 대시보드로 이동하여 **Build & deploy**를 클릭합니다. 2. **Continuous Deployment** 탭에서 **Build hooks** 섹션을 찾아 **Add build hook**를 클릭합니다. 3. 웹후크의 이름을 제공하고 빌드를 트리거할 브랜치를 선택합니다. **Save**을 클릭하고 생성된 URL을 복사하세요. +</Steps> ##### Vercel Vercel에서 웹후크을 설정하려면 다음 안내를 따르세요. +<Steps> 1. 프로젝트 대시보드로 이동하여 **Settings**을 클릭합니다. 2. **Git** 탭에서 **Deploy Hooks** 섹션을 찾습니다. 3. 빌드를 트리거할 웹후크와 브랜치의 이름을 제공합니다. **Add**를 클릭하고 생성된 URL을 복사합니다. +</Steps> ##### Storyblok에 웹후크 추가하기 diff --git a/src/content/docs/ko/guides/cms/strapi.mdx b/src/content/docs/ko/guides/cms/strapi.mdx index f2c13ced47c1c..840de63205e84 100644 --- a/src/content/docs/ko/guides/cms/strapi.mdx +++ b/src/content/docs/ko/guides/cms/strapi.mdx @@ -7,6 +7,7 @@ stub: false i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; @@ -147,76 +148,78 @@ export default interface Article { ### 아티클 목록 표시 +<Steps> 1. 홈페이지 `src/pages/index.astro`를 업데이트하여 블로그 게시물 목록을 표시하세요. 각 게시물에는 설명과 해당 페이지에 대한 링크가 포함되어 있습니다. 2. 래퍼 함수와 인터페이스를 가져옵니다. 아티클을 가져와 목록을 반환하려면 다음 API 호출을 추가하세요. - ```astro title="src/pages/index.astro" - --- - import fetchApi from '../lib/strapi'; - import type Article from '../interfaces/article'; + ```astro title="src/pages/index.astro" + --- + import fetchApi from '../lib/strapi'; + import type Article from '../interfaces/article'; - const articles = await fetchApi<Article[]>({ - endpoint: 'articles', // 가져올 콘텐츠 타입 - wrappedByKey: 'data', // 응답을 해제할 key - }); - --- - ``` - - API 호출은 `http://localhost:1337/api/articles`에서 데이터를 요청하고 `articles` (데이터를 나타내는 json 객체 배열)를 반환합니다. - - ```json - [ - { - id: 1, - attributes: { - title: "What's inside a Black Hole", - description: "Maybe the answer is in this article, or not...", - content: "Well, we don't know yet...", - slug: "what-s-inside-a-black-hole", - createdAt: "2023-05-28T13:19:46.421Z", - updatedAt: "2023-05-28T13:19:46.421Z", - publishedAt: "2023-05-28T13:19:45.826Z" - } - }, - // ... - ] - ``` + const articles = await fetchApi<Article[]>({ + endpoint: 'articles', // 가져올 콘텐츠 타입 + wrappedByKey: 'data', // 응답을 해제할 key + }); + --- + ``` + + API 호출은 `http://localhost:1337/api/articles`에서 데이터를 요청하고 `articles` (데이터를 나타내는 json 객체 배열)를 반환합니다. + + ```json + [ + { + id: 1, + attributes: { + title: "What's inside a Black Hole", + description: "Maybe the answer is in this article, or not...", + content: "Well, we don't know yet...", + slug: "what-s-inside-a-black-hole", + createdAt: "2023-05-28T13:19:46.421Z", + updatedAt: "2023-05-28T13:19:46.421Z", + publishedAt: "2023-05-28T13:19:45.826Z" + } + }, + // ... + ] + ``` 3. API에서 반환된 `articles` 배열의 데이터를 사용하여 Strapi 블로그 게시물을 목록에 표시합니다. 이러한 게시물은 다음 단계에서 생성할 개별 페이지로 연결됩니다. - ```astro title="src/pages/index.astro" - --- - import fetchApi from '../lib/strapi'; - import type Article from '../interfaces/article'; + ```astro title="src/pages/index.astro" + --- + import fetchApi from '../lib/strapi'; + import type Article from '../interfaces/article'; - const articles = await fetchApi<Article[]>({ - endpoint: 'articles?populate=image', - wrappedByKey: 'data', - }); - --- - - <!DOCTYPE html> - <html lang="en"> - <head> - <title>Strapi & Astro - - - -
- -
- - - ``` + const articles = await fetchApi({ + endpoint: 'articles?populate=image', + wrappedByKey: 'data', + }); + --- + + + + + Strapi & Astro + + + +
+ +
+ + + ``` + ### 아티클 페이지 생성 @@ -399,21 +402,25 @@ try { Netlify에서 웹후크을 설정하려면: + 1. 사이트 대시보드로 이동하여 **Build & deploy**를 클릭합니다. 2. **Continuous Deployment** 탭에서 **Build hooks** 섹션을 찾아 **Add build hook**를 클릭합니다. 3. 웹후크의 이름을 제공하고 빌드를 트리거할 브랜치를 선택합니다. **Save**을 클릭하고 생성된 URL을 복사하세요. + ##### Vercel Vercel에서 웹후크을 설정하려면 다음 안내를 따르세요. + 1. 프로젝트 대시보드로 이동하여 **Settings**을 클릭합니다. 2. **Git** 탭에서 **Deploy Hooks** 섹션을 찾습니다. 3. 빌드를 트리거할 웹후크와 브랜치의 이름을 제공합니다. **Add**를 클릭하고 생성된 URL을 복사합니다. + ##### Strapi에 웹후크 추가하기 diff --git a/src/content/docs/ko/guides/cms/tina-cms.mdx b/src/content/docs/ko/guides/cms/tina-cms.mdx index 7f63ee9418b60..f0664e07ded67 100644 --- a/src/content/docs/ko/guides/cms/tina-cms.mdx +++ b/src/content/docs/ko/guides/cms/tina-cms.mdx @@ -7,9 +7,10 @@ service: Tina CMS i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import Grid from '~/components/FluidGrid.astro' -import Card from '~/components/ShowcaseCard.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import Grid from '~/components/FluidGrid.astro'; +import Card from '~/components/ShowcaseCard.astro'; +import { Steps } from '@astrojs/starlight/components'; [Tina CMS](https://tina.io/)는 Git 지원 헤드리스 콘텐츠 관리 시스템입니다. @@ -17,6 +18,7 @@ import Card from '~/components/ShowcaseCard.astro' 시작하려면 기존 Astro 프로젝트가 필요합니다. + 1. 다음 명령을 실행하여 Astro 프로젝트에 Tina를 설치합니다. @@ -146,6 +148,7 @@ import Card from '~/components/ShowcaseCard.astro' [Tina 문서](https://tina.io/docs/reference/collections/)에서 Tina 컬렉션에 대해 자세히 알아보세요. 5. 프로덕션 환경에서 TinaCMS는 변경 사항을 GitHub 저장소에 직접 커밋할 수 있습니다. 프로덕션을 위해 TinaCMS를 설정하려면 [Tina Cloud](https://tina.io/docs/tina-cloud/)를 사용하거나 [Tina Data Layer](https://tina.io/docs/self-hosted/overview/)를 자체 호스팅하도록 선택할 수 있습니다. Tina Docs에서 [Tina Cloud 등록에 대해 자세히 알아볼 수 있습니다](https://app.tina.io/register). + ## 공식 자료 diff --git a/src/content/docs/ko/guides/data-fetching.mdx b/src/content/docs/ko/guides/data-fetching.mdx index 79f4393cfb2ea..31d32b7d83719 100644 --- a/src/content/docs/ko/guides/data-fetching.mdx +++ b/src/content/docs/ko/guides/data-fetching.mdx @@ -8,7 +8,8 @@ i18nReady: true ## Astro의 `fetch()` 함수 -모든 Astro 컴포넌트는 스크립트에서 [전역 `fetch()` 함수](https://developer.mozilla.org/ko/docs/Web/API/fetch)를 사용할 수 있습니다. 이 함수는 전체 URL(예: https://example.com/api 또는 `Astro.url + "/api"`)을 사용해 API에 HTTP 요청을 보내기 위해 사용됩니다. +모든 Astro 컴포넌트는 스크립트에서 [전역 `fetch()` 함수](https://developer.mozilla.org/ko/docs/Web/API/fetch)를 사용할 수 있습니다. 이 함수는 전체 URL (예: https://example.com/api)을 사용해 API에 HTTP 요청을 보내기 위해 사용됩니다. +또한 `new URL("/api", Astro.url)`을 사용하여 서버에서 요청 시 렌더링되는 프로젝트 페이지 및 엔드포인트에 대한 URL을 구성할 수 있습니다. 이 fetch 호출은 빌드 시 실행되며, 가져온 데이터는 동적 HTML을 생성하기 위해 컴포넌트 템플릿에서 사용할 수 있습니다. [SSR](/ko/guides/server-side-rendering/) 모드가 활성화되면 모든 fetch 호출이 런타임에 실행됩니다. diff --git a/src/content/docs/ko/guides/deploy/aws.mdx b/src/content/docs/ko/guides/deploy/aws.mdx index 51f14fc247a0a..e2b773afb54dc 100644 --- a/src/content/docs/ko/guides/deploy/aws.mdx +++ b/src/content/docs/ko/guides/deploy/aws.mdx @@ -4,7 +4,8 @@ description: AWS를 사용하여 Astro 사이트를 웹에 배포하는 방법. type: deploy i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; [AWS](https://aws.amazon.com/)는 Astro 사이트를 배포하는 데 사용할 수 있는 모든 기능을 갖춘 웹 앱 호스팅 플랫폼입니다. @@ -15,8 +16,11 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' AWS Amplify는 프런트엔드 웹 및 모바일 개발자가 AWS에서 풀 스택 애플리케이션을 빠르고 쉽게 구축할 수 있도록 특별히 제작된 도구 및 기능 세트입니다. + 1. 새로운 Amplify 호스팅 프로젝트를 생성합니다. + 2. 저장소를 Amplify에 연결합니다. + 3. 프로젝트의 빌드 프로세스에 맞게 빌드 설정을 수정합니다. @@ -83,6 +87,7 @@ AWS Amplify는 프런트엔드 웹 및 모바일 개발자가 AWS에서 풀 스 ``` + Amplify는 커밋을 저장소에 푸시할 때 자동으로 웹 사이트를 배포하고 업데이트합니다. @@ -90,6 +95,7 @@ Amplify는 커밋을 저장소에 푸시할 때 자동으로 웹 사이트를 S3는 모든 애플리케이션의 시작점입니다. 여기에는 프로젝트 파일과 기타 자산이 저장됩니다. S3에서는 파일 저장 및 요청 수에 따라 요금을 청구합니다. [AWS 설명서](https://aws.amazon.com/s3/)에서 S3에 대한 자세한 내용을 확인할 수 있습니다. + 1. 프로젝트 이름으로 S3 버킷을 생성합니다. :::tip @@ -130,6 +136,7 @@ S3는 모든 애플리케이션의 시작점입니다. 여기에는 프로젝트 :::note 단일 페이지 애플리케이션 (SPA)을 배포하는 경우 오류 문서를 `index.html`로 설정하세요. ::: + ## CloudFront를 사용하는 S3 @@ -149,6 +156,7 @@ CloudFront를 S3 정적 웹 사이트 엔드포인트에 연결할 때 액세스 AWS에 대한 지속적 배포를 설정하는 방법에는 여러 가지가 있습니다. GitHub에 호스팅되는 코드의 한 가지 가능성은 커밋을 푸시할 때마다 [GitHub Actions](https://github.com/features/actions)를 사용하여 웹사이트를 배포하는 것입니다. + 1. 다음 권한과 함께 [IAM](https://aws.amazon.com/iam/)을 사용하여 AWS 계정에 새 정책을 생성합니다. 이 정책을 사용하면 빌드된 파일을 S3 버킷에 업로드하고 커밋을 푸시할 때 CloudFront 배포 파일을 무효화할 수 있습니다. ```json @@ -215,6 +223,7 @@ AWS에 대한 지속적 배포를 설정하는 방법에는 여러 가지가 있 :::note `BUCKET_ID`는 S3 버킷의 이름입니다. `DISTRIBUTION_ID`는 CloudFront 배포 ID입니다. **CloudFront > Distributions > ID**에서 CloudFront 배포 ID를 찾을 수 있습니다. ::: + ## 커뮤니티 자료 diff --git a/src/content/docs/ko/guides/deploy/buddy.mdx b/src/content/docs/ko/guides/deploy/buddy.mdx index 980c6d1cff5ac..580f0b24cf458 100644 --- a/src/content/docs/ko/guides/deploy/buddy.mdx +++ b/src/content/docs/ko/guides/deploy/buddy.mdx @@ -4,6 +4,7 @@ description: Buddy를 사용하여 Astro 사이트를 웹에 배포하는 방법 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; 사이트를 빌드하고 이를 FTP 서버 및 클라우드 호스팅 제공업체를 포함한 다양한 배포 대상에 푸시할 수 있는 CI/CD 솔루션인 [Buddy](https://buddy.works/)를 사용하여 Astro 프로젝트를 배포할 수 있습니다. @@ -13,10 +14,15 @@ Buddy 자체는 여러분의 사이트를 호스팅하지 않습니다. 대신, ## 배포 방법 + 1. [**Buddy** 계정을 생성하세요](https://buddy.works/sign-up). + 2. 새 프로젝트를 생성하고 이를 git 저장소 (GitHub, GitLab, BitBucket, 모든 개인 Git 저장소 또는 Buddy Git Hosting을 사용할 수 있음)와 연결합니다. + 3. 새 파이프라인을 추가합니다. + 4. 새로 생성된 파이프라인에 **[Node.js](https://buddy.works/actions/node-js)** 작업을 추가합니다. + 5. 이 작업에 다음을 추가합니다. ```bash @@ -25,4 +31,6 @@ Buddy 자체는 여러분의 사이트를 호스팅하지 않습니다. 대신, ``` 6. 배포 작업을 추가합니다. 선택할 수 있는 작업이 많으며 [Buddy의 작업 카탈로그](https://buddy.works/actions)에서 찾아볼 수 있습니다. 설정은 다를 수 있지만 **Source path**를 `dist`로 설정하는 것을 잊지 마세요. + 7. **Run** 버튼을 누릅니다. + diff --git a/src/content/docs/ko/guides/deploy/cleavr.mdx b/src/content/docs/ko/guides/deploy/cleavr.mdx index fd87a735ba1fb..906ee3bd90a10 100644 --- a/src/content/docs/ko/guides/deploy/cleavr.mdx +++ b/src/content/docs/ko/guides/deploy/cleavr.mdx @@ -4,6 +4,7 @@ description: Cleavr을 사용하여 Astro 사이트를 VPS 서버에 배포하 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; 서버 및 앱 배포 관리 도구인 [Cleavr](https://cleavr.io/)을 사용하여 Astro 프로젝트를 자체 VPS (Virtual Private Server)에 배포할 수 있습니다. @@ -20,6 +21,7 @@ i18nReady: true ## 사이트 추가 + 1. Cleavr에서 Astro 프로젝트를 추가하려는 서버로 이동합니다. 2. **Add Site**를 선택하고 도메인 이름 등 신청 세부정보를 입력합니다. @@ -33,9 +35,11 @@ i18nReady: true - **Artifact Folder**를 `dist/server`로 설정합니다. 6. **Add**를 선택하여 서버에 사이트를 추가합니다. + ## 설정 및 배포 + 1. 새 사이트가 추가되면 **Setup and deploy**를 클릭합니다. 2. Astro 프로젝트에 대한 **VC Profile**, **Repo** 및 **Branch**를 선택합니다. @@ -43,5 +47,6 @@ i18nReady: true 3. 프로젝트에 필요한 추가 구성을 만듭니다. 4. **Deployments** 탭을 클릭한 다음 **Deploy**를 클릭합니다. + 축하합니다. Astro 앱을 배포했습니다! diff --git a/src/content/docs/ko/guides/deploy/cloudflare.mdx b/src/content/docs/ko/guides/deploy/cloudflare.mdx index 90ea8bf2c1283..336c60c2e7a33 100644 --- a/src/content/docs/ko/guides/deploy/cloudflare.mdx +++ b/src/content/docs/ko/guides/deploy/cloudflare.mdx @@ -4,8 +4,8 @@ description: Cloudflare Pages를 사용하여 Astro 사이트를 웹에 배포 type: deploy i18nReady: true --- - -import ReadMore from '~/components/ReadMore.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; 프런트엔드 개발자가 정적 (JAMstack) 및 SSR 웹사이트를 공동 작업하고 배포할 수 있는 플랫폼인 [Cloudflare Pages](https://pages.cloudflare.com/)에 Astro 프로젝트를 배포할 수 있습니다. @@ -24,11 +24,17 @@ import ReadMore from '~/components/ReadMore.astro' ## Git으로 사이트를 배포하는 방법 + 1. Cloudflare Pages에서 새 프로젝트를 설정하세요. + 2. 코드를 Git 저장소 (GitHub, GitLab)에 푸시합니다. + 3. Cloudflare 대시보드에 로그인하고 **Account Home** > **Pages**에서 계정을 선택하세요. + 4. **Create a new Project**와 **Connect Git** 옵션을 선택합니다. + 5. 배포하려는 git 프로젝트를 선택하고 **Begin setup**을 클릭합니다. + 6. 다음 빌드 설정을 사용합니다. - **Framework preset**: `Astro` @@ -36,13 +42,19 @@ import ReadMore from '~/components/ReadMore.astro' - **Build output directory:** `dist` 7. **Save and Deploy** 버튼을 클릭합니다. + ## Wrangler를 사용하여 사이트를 배포하는 방법 + 1. [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/)를 설치합니다. + 2. `wrangler login`을 사용하여 Cloudflare 계정으로 Wrangler를 인증하세요. + 3. 빌드 명령을 실행합니다. + 4. `npx wrangler pages deploy dist`를 사용하여 배포합니다. + ```bash # Wrangler CLI 설치 @@ -89,6 +101,7 @@ npx astro add cloudflare 대신 어댑터를 수동으로 설치하려면 다음 두 단계를 완료하세요. + 1. 선호하는 패키지 관리자를 사용하여 프로젝트 종속성에 `@astrojs/cloudflare` 어댑터를 추가하세요. npm을 사용 중이거나 확실하지 않은 경우 터미널에서 다음을 실행하세요. ```bash @@ -106,6 +119,7 @@ npx astro add cloudflare adapter: cloudflare() }); ``` + [Astro의 SSR](/ko/guides/server-side-rendering/)에 대해 자세히 알아보세요. diff --git a/src/content/docs/ko/guides/deploy/deno.mdx b/src/content/docs/ko/guides/deploy/deno.mdx index ddf5e1fa844ac..4c0037e7de58b 100644 --- a/src/content/docs/ko/guides/deploy/deno.mdx +++ b/src/content/docs/ko/guides/deploy/deno.mdx @@ -4,8 +4,8 @@ description: Deno를 사용하여 Astro 사이트를 웹에 배포하는 방법. type: deploy i18nReady: true --- - -import ReadMore from '~/components/ReadMore.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; 전 세계 엣지에서 JavaScript, TypeScript 및 WebAssembly를 실행하는 분산 시스템인 [Deno Deploy](https://deno.com/deploy)에 서버 측 렌더링된 Astro 사이트를 배포할 수 있습니다. @@ -33,13 +33,14 @@ npx astro add deno 대신 어댑터를 수동으로 설치하려면 다음 두 단계를 완료하세요. + 1. 선호하는 패키지 관리자를 사용하여 프로젝트의 종속성에 [`@astrojs/deno` 어댑터][Deno adapter]를 설치합니다. npm을 사용 중이거나 확실하지 않은 경우 터미널에서 다음을 실행하세요. ```bash npm install @astrojs/deno ``` -1. `astro.config.mjs` 프로젝트 구성 파일을 아래 변경 사항으로 업데이트하세요. +2. `astro.config.mjs` 프로젝트 구성 파일을 아래 변경 사항으로 업데이트하세요. ```js ins={3,6-7} // astro.config.mjs @@ -73,6 +74,7 @@ npx astro add deno ```bash npm run preview ``` + ## SSR Astro 사이트를 배포하는 방법 @@ -82,13 +84,14 @@ GitHub Actions 또는 Deno Deploy의 CLI (명령줄 인터페이스)를 사용 프로젝트가 GitHub에 저장되어 있는 경우 [Deno Deploy 웹사이트](https://dash.deno.com/)에서 Astro 사이트를 배포하기 위한 GitHub Actions 설정 과정을 안내합니다. + 1. 공개 또는 비공개 GitHub 저장소에 코드를 푸시합니다. -1. GitHub 계정으로 [Deno Deploy](https://dash.deno.com/)에 로그인한 후 [New Project](https://dash.deno.com)를 클릭합니다. +2. GitHub 계정으로 [Deno Deploy](https://dash.deno.com/)에 로그인한 후 [New Project](https://dash.deno.com)를 클릭합니다. -1. 저장소와 배포할 브랜치를 선택하고 **GitHub Action** 모드를 선택합니다. (Astro 사이트에는 빌드 단계가 필요하며 자동 모드를 사용할 수 없습니다.) +3. 저장소와 배포할 브랜치를 선택하고 **GitHub Action** 모드를 선택합니다. (Astro 사이트에는 빌드 단계가 필요하며 자동 모드를 사용할 수 없습니다.) -1. Astro 프로젝트에서 `.github/workflows/deploy.yml`에 새 파일을 생성하고 아래 YAML에 붙여넣습니다. 이는 Astro 사이트에 필요한 추가 단계가 포함된 Deno Deploy에서 제공하는 YAML과 유사합니다. +4. Astro 프로젝트에서 `.github/workflows/deploy.yml`에 새 파일을 생성하고 아래 YAML에 붙여넣습니다. 이는 Astro 사이트에 필요한 추가 단계가 포함된 Deno Deploy에서 제공하는 YAML과 유사합니다. ```yaml name: Deploy @@ -122,27 +125,29 @@ GitHub Actions 또는 Deno Deploy의 CLI (명령줄 인터페이스)를 사용 root: dist ``` -1. 이 YAML 파일을 커밋하고 구성된 배포 브랜치에서 GitHub로 푸시하면 배포가 자동으로 시작됩니다! +5. 이 YAML 파일을 커밋하고 구성된 배포 브랜치에서 GitHub로 푸시하면 배포가 자동으로 시작됩니다! - GitHub 저장소 페이지 또는 [Deno Deploy](https://dash.deno.com)의 "Actions" 탭을 사용하여 진행 상황을 추적할 수 있습니다. + GitHub 저장소 페이지 또는 [Deno Deploy](https://dash.deno.com)의 "Actions" 탭을 사용하여 진행 상황을 추적할 수 있습니다. + ### CLI 배포 + 1. [Deno Deploy CLI](https://docs.deno.com/deploy/manual/deployctl)를 설치합니다. ```bash deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts ``` -1. Astro 빌드 단계를 실행합니다. +2. Astro 빌드 단계를 실행합니다. ```bash npm run build ``` -1. 배포하려면 `deployctl`을 실행합니다! +3. 배포하려면 `deployctl`을 실행합니다! - 아래 명령에서 ``을 [Personal Access Token](https://dash.deno.com/account#access-tokens)으로 바꾸고 ``를 Deno Deploy 프로젝트 이름으로 바꿉니다. + 아래 명령에서 ``을 [Personal Access Token](https://dash.deno.com/account#access-tokens)으로 바꾸고 ``를 Deno Deploy 프로젝트 이름으로 바꿉니다. ```bash DENO_DEPLOY_TOKEN= deployctl deploy --project= --no-static --include=./dist ./dist/server/entry.mjs @@ -150,7 +155,7 @@ GitHub Actions 또는 Deno Deploy의 CLI (명령줄 인터페이스)를 사용 [Deno Deploy](https://dash.deno.com)에서 모든 배포를 추적할 수 있습니다. -1. (선택 사항) 빌드를 단순화하고 하나의 명령으로 배포하려면 `package.json` 파일에 `deploy-deno` 스크립트를 추가하세요. +4. (선택 사항) 빌드를 단순화하고 하나의 명령으로 배포하려면 `package.json` 파일에 `deploy-deno` 스크립트를 추가하세요. ```json ins={9} // package.json @@ -171,6 +176,7 @@ GitHub Actions 또는 Deno Deploy의 CLI (명령줄 인터페이스)를 사용 ```bash DENO_DEPLOY_TOKEN= npm run deno-deploy ``` + [Astro의 SSR](/ko/guides/server-side-rendering/)에 대해 자세히 알아보세요. diff --git a/src/content/docs/ko/guides/deploy/edgio.mdx b/src/content/docs/ko/guides/deploy/edgio.mdx index 9f3ea3f73c7d3..33c3126d59b3a 100644 --- a/src/content/docs/ko/guides/deploy/edgio.mdx +++ b/src/content/docs/ko/guides/deploy/edgio.mdx @@ -4,6 +4,7 @@ description: Edgio를 사용하여 Astro 사이트를 웹에 배포하는 방법 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Astro 프로젝트를 에지 및 CDN 플랫폼인 [Edgio](https://www.edg.io/)에 배포하여 웹사이트와 API를 배포, 보호, 가속화할 수 있습니다. @@ -13,6 +14,7 @@ Astro 프로젝트를 에지 및 CDN 플랫폼인 [Edgio](https://www.edg.io/) ## 배포 방법 + 1. 아직 설치하지 않았다면 터미널에서 전역으로 [Edgio CLI](https://docs.edg.io/guides/cli)를 설치합니다. ```bash @@ -47,3 +49,4 @@ Astro 프로젝트를 에지 및 CDN 플랫폼인 [Edgio](https://www.edg.io/) ```bash edgio deploy ``` + \ No newline at end of file diff --git a/src/content/docs/ko/guides/deploy/flightcontrol.mdx b/src/content/docs/ko/guides/deploy/flightcontrol.mdx index 199cfa7f51f31..92a8e1d093d98 100644 --- a/src/content/docs/ko/guides/deploy/flightcontrol.mdx +++ b/src/content/docs/ko/guides/deploy/flightcontrol.mdx @@ -4,6 +4,7 @@ description: Flightcontrol을 사용하여 Astro 사이트를 AWS에 배포하 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; AWS 계정에 완전 자동화된 배포를 제공하는 [Flightcontrol](https://www.flightcontrol.dev?ref=astro)을 사용하여 Astro 사이트를 배포할 수 있습니다. @@ -11,14 +12,21 @@ AWS 계정에 완전 자동화된 배포를 제공하는 [Flightcontrol](https:/ ## 배포 방법 + 1. [app.flightcontrol.dev/signup](https://app.flightcontrol.dev/signup?ref=astro)에서 Flightcontrol 계정을 만듭니다. + 2. [app.flightcontrol.dev/projects/new/1](https://app.flightcontrol.dev/projects/new/1)로 이동합니다. + 3. GitHub 계정을 연결하고 저장소를 선택합니다. + 4. 원하는 "Config Type"을 선택합니다. - `Astro Static` 또는 `Astro SSR` 사전 설정을 선택할 수 있는 `GUI`(flightcontrol 대시보드를 통해 관리되는 모든 구성) - `flightcontrol.json` (모든 구성이 저장소에 있는 "infrastructure as code" 옵션) Astro 예시 구성을 선택한 다음 코드베이스에 `flightcontrol.json`으로 추가합니다. + 5. 필요에 따라 구성을 조정합니다. + 6. "Create Project"을 클릭하고 필요한 단계 (예: AWS 계정 연결)를 완료합니다. + ### SSR 설정 diff --git a/src/content/docs/ko/guides/deploy/flyio.mdx b/src/content/docs/ko/guides/deploy/flyio.mdx index 3da84f2b4ad9a..ddce158251a8e 100644 --- a/src/content/docs/ko/guides/deploy/flyio.mdx +++ b/src/content/docs/ko/guides/deploy/flyio.mdx @@ -5,6 +5,7 @@ type: deploy i18nReady: true stub: true --- +import { Steps } from '@astrojs/starlight/components'; Astro 프로젝트를 사용자 가까이에서 풀 스택 앱과 데이터베이스를 실행하기 위한 플랫폼인 [Fly.io](https://fly.io/)에 배포할 수 있습니다. @@ -22,15 +23,19 @@ Astro 프로젝트에서 주문형 렌더링을 활성화하고 Fly.io에 배포 ## 배포 방법 + 1. 가입하지 않았다면, [Fly.io에 가입합니다](https://fly.io/docs/getting-started/log-in-to-fly/#first-time-or-no-fly-account-sign-up-for-fly). + 2. Fly.io 앱 명령 센터인 [`flyctl`를 설치합니다](https://fly.io/docs/hands-on/install-flyctl/). + 3. 터미널에서 다음 명령을 실행합니다. ```bash fly launch ``` - `flyctl`은 자동으로 Astro를 감지하고, 올바른 설정을 구성하고, 이미지를 빌드하고, Fly.io 플랫폼에 배포합니다. + `flyctl`은 자동으로 Astro를 감지하고, 올바른 설정을 구성하고, 이미지를 빌드하고, Fly.io 플랫폼에 배포합니다. + ## Astro Dockerfile 생성 diff --git a/src/content/docs/ko/guides/deploy/github.mdx b/src/content/docs/ko/guides/deploy/github.mdx index 5798006b646d3..b1172940690d2 100644 --- a/src/content/docs/ko/guides/deploy/github.mdx +++ b/src/content/docs/ko/guides/deploy/github.mdx @@ -4,6 +4,7 @@ description: Github Pages를 사용하여 Astro 사이트를 웹에 배포하는 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Github Pages](https://pages.github.com/)를 사용하여 [GitHub.com](https://github.com/) 저장소에서 직접 Astro 웹사이트를 호스팅할 수 있습니다. @@ -82,6 +83,7 @@ export default defineConfig({ ## GitHub Action 구성 + 1. 프로젝트의 `.github/workflows/deploy.yml`에 새 파일을 만들고 아래 YAML에 붙여넣습니다. ```yaml title="deploy.yml" @@ -139,5 +141,6 @@ export default defineConfig({ 3. 사이트의 **Source**로 **GitHub Actions**를 선택합니다. 4. 새 워크플로 파일을 커밋하고 GitHub에 푸시합니다. + 이제 여러분의 사이트가 게시됩니다! Astro 프로젝트 저장소에 변경 사항을 푸시하면 GitHub Action이 자동으로 배포합니다. diff --git a/src/content/docs/ko/guides/deploy/gitlab.mdx b/src/content/docs/ko/guides/deploy/gitlab.mdx index 6a019c03ee65b..1e743d7ea9423 100644 --- a/src/content/docs/ko/guides/deploy/gitlab.mdx +++ b/src/content/docs/ko/guides/deploy/gitlab.mdx @@ -4,6 +4,7 @@ description: GitLab Pages를 사용하여 Astro 사이트를 웹에 배포하는 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [GitLab Pages](https://pages.gitlab.io/)를 사용하여 [GitLab](https://about.gitlab.com/) 프로젝트, 그룹 또는 사용자 계정을 위한 Astro 사이트를 호스팅할 수 있습니다. @@ -13,8 +14,11 @@ i18nReady: true ## 배포 방법 + 1. `astro.config.mjs` 파일에서 올바른 `site`를 설정하세요. + 2. `public/` 디렉터리의 이름을 `static`으로 바꿉니다. + 3. `astro.config.mjs` 파일에서 `outDir: public`을 설정합니다. 이 설정은 Astro가 공개된 파일을 위해 GitLab Pages에 요구하는 `public` 폴더에 정적 빌드 출력을 저장하도록 지시합니다. Astro 프로젝트에서 정적 파일의 소스로 [`public/` 디렉터리](/ko/basics/project-structure/#public)를 사용하고 있었다면 이름을 바꾸고 `publicDir` 값으로 `astro.config.mjs`의 새 폴더 이름을 사용합니다. @@ -56,3 +60,4 @@ i18nReady: true # 아래 브랜치에 푸시가 있는 경우에만 새 빌드를 트리거하고 배포합니다. - main ``` + \ No newline at end of file diff --git a/src/content/docs/ko/guides/deploy/google-cloud.mdx b/src/content/docs/ko/guides/deploy/google-cloud.mdx index 178b92e340b09..6a76ebabad50a 100644 --- a/src/content/docs/ko/guides/deploy/google-cloud.mdx +++ b/src/content/docs/ko/guides/deploy/google-cloud.mdx @@ -4,6 +4,7 @@ description: Google Cloud를 사용하여 Astro 사이트를 웹에 배포하는 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Google Cloud](https://cloud.google.com/)는 Astro 사이트를 배포하는 데 사용할 수 있는 모든 기능을 갖춘 웹 앱 호스팅 플랫폼입니다. @@ -11,6 +12,7 @@ i18nReady: true ### Cloud Storage (정적 전용) + 1. [새 GCP 프로젝트를 생성](https://console.cloud.google.com/projectcreate)하거나 이미 가지고 있는 프로젝트를 선택하세요. 2. [Cloud Storage](https://cloud.google.com/storage)에서 새 버킷을 생성합니다. @@ -22,6 +24,7 @@ i18nReady: true 5. `allUsers`에 `Storage Object Viewer`라는 새 권한을 추가하여 공개 액세스를 활성화합니다. 6. 웹사이트 구성을 편집하여 `index.html`을 엔트리포인트로 추가하고 `404.html`을 오류 페이지로 추가합니다. + ### Cloud Run (SSR 및 정적) @@ -29,11 +32,13 @@ Cloud Run은 인프라를 관리할 필요 없이 컨테이너를 실행할 수 #### 서비스 준비 + 1. [새 GCP 프로젝트를 생성](https://console.cloud.google.com/projectcreate)하거나 이미 가지고 있는 프로젝트를 선택하세요. 2. [Cloud Run API](https://console.cloud.google.com/apis/library/run.googleapis.com)가 활성화되어 있는지 확인하세요. 3. 새로운 서비스를 생성합니다. + #### Dockerfile 생성 및 컨테이너 빌드 @@ -79,4 +84,4 @@ Dockerfile을 로컬로 빌드하는 대신 Google Cloud에 원격으로 이미 :::note[공개 액세스가 필요합니까?] Cloud Run 권한 설정의 `allUsers` 그룹에 `Cloud Run Invoker` 권한을 추가하는 것을 잊지 마세요! -::: +::: \ No newline at end of file diff --git a/src/content/docs/ko/guides/deploy/google-firebase.mdx b/src/content/docs/ko/guides/deploy/google-firebase.mdx index ccea6b77c6041..c384e125ff002 100644 --- a/src/content/docs/ko/guides/deploy/google-firebase.mdx +++ b/src/content/docs/ko/guides/deploy/google-firebase.mdx @@ -4,8 +4,8 @@ description: Google의 Firebase Hosting을 사용하여 Astro 사이트를 웹 type: deploy i18nReady: true --- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; [Firebase Hosting](https://firebase.google.com/products/hosting)은 Google의 [Firebase](https://firebase.google.com/) 앱 개발 플랫폼에서 제공하는 서비스로, Astro 사이트 배포에 사용할 수 있습니다. @@ -29,6 +29,7 @@ SSR Astro 사이트를 Firebase에 배포하려면 [Blaze 요금제](https://fir ## 배포 방법 + 1. [Firebase CLI](https://github.com/firebase/firebase-tools)를 설치합니다. 이는 터미널에서 Firebase와 상호작용할 수 있는 명령줄 도구입니다. @@ -128,3 +129,4 @@ SSR Astro 사이트를 Firebase에 배포하려면 [Blaze 요금제](https://fir ``` + \ No newline at end of file diff --git a/src/content/docs/ko/guides/deploy/heroku.mdx b/src/content/docs/ko/guides/deploy/heroku.mdx index 1e0a08527a7b2..24f0e55000a8a 100644 --- a/src/content/docs/ko/guides/deploy/heroku.mdx +++ b/src/content/docs/ko/guides/deploy/heroku.mdx @@ -4,6 +4,7 @@ description: Heroku를 사용하여 Astro 사이트를 웹에 배포하는 방 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Heroku](https://www.heroku.com/)는 클라우드에서 최신 앱을 빌드, 실행, 관리하기 위한 서비스형 플랫폼입니다. 이 안내서를 통해 Astro 사이트를 Heroku에 배포할 수 있습니다. @@ -13,6 +14,7 @@ i18nReady: true ## 배포 방법 + 1. [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)를 설치합니다. 2. [가입](https://signup.heroku.com/)하여 Heroku 계정을 만듭니다. @@ -57,3 +59,4 @@ i18nReady: true # opens a browser to view the Dashboard version of Heroku CI $ heroku open ``` + \ No newline at end of file diff --git a/src/content/docs/ko/guides/deploy/kinsta.mdx b/src/content/docs/ko/guides/deploy/kinsta.mdx index 8f7974f07390e..d5d8c8299c417 100644 --- a/src/content/docs/ko/guides/deploy/kinsta.mdx +++ b/src/content/docs/ko/guides/deploy/kinsta.mdx @@ -4,6 +4,7 @@ description: Kinsta 애플리케이션 호스팅을 통해 Astro 사이트를 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Kinsta 애플리케이션 호스팅](https://kinsta.com/application-hosting/)을 사용하여 클라우드 호스팅에서 Astro 사이트를 호스팅할 수 있습니다. @@ -95,9 +96,16 @@ i18nReady: true ### 새로운 Kinsta 애플리케이션 구성 + 1. [My Kinsta](https://my.kinsta.com/) 관리자 패널로 이동합니다. + 2. **Applications** 탭으로 이동합니다. + 3. GitHub 저장소를 연결합니다. + 4. **Add service** > **Application** 버튼을 누릅니다. + 5. 마법사 단계를 따릅니다. + 6. 애플리케이션이 배포되었습니다. + diff --git a/src/content/docs/ko/guides/deploy/microsoft-azure.mdx b/src/content/docs/ko/guides/deploy/microsoft-azure.mdx index 6f9115b2d58c2..7f61744727d7e 100644 --- a/src/content/docs/ko/guides/deploy/microsoft-azure.mdx +++ b/src/content/docs/ko/guides/deploy/microsoft-azure.mdx @@ -4,6 +4,7 @@ description: Microsoft Azure를 사용하여 Astro 사이트를 웹에 배포하 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Azure](https://azure.microsoft.com/)는 Microsoft의 클라우드 플랫폼입니다. Microsoft Azure의 [Static Web Apps](https://aka.ms/staticwebapps) 서비스를 사용하여 Astro 사이트를 배포할 수 있습니다. @@ -19,11 +20,13 @@ i18nReady: true ## 배포 방법 + 1. VS Code에서 프로젝트를 엽니다. 2. Static Web Apps 확장을 열고 Azure에 로그인한 후 **+** 버튼을 클릭하여 새 Static Web App을 만듭니다. 사용할 구독 키를 지정하라는 메시지가 표시됩니다. 3. 확장 프로그램에서 시작하는 마법사를 따라 앱 이름을 지정하고, 프레임워크 사전 설정을 선택하고, 앱 루트 (보통 `/`)와 빌드된 파일 위치 (`/dist` 사용)를 지정합니다. Astro는 Azure의 기본 제공 템플릿에 포함되어 있지 않으므로 `custom`을 선택해야 합니다. 마법사가 실행되고 저장소의 `.github` 폴더에 [GitHub Action](https://github.com/features/actions)이 생성됩니다. (이 폴더가 아직 존재하지 않는 경우 자동으로 생성됩니다.) + GitHub Action이 앱을 배포합니다 (GitHub 저장소의 Actions 탭에서 진행 상황을 확인할 수 있습니다). 성공적으로 완료되면 **Browse Website** 버튼을 클릭하여 SWA Extension의 진행률 창에 표시된 주소에서 앱을 볼 수 있습니다 (GitHub Action이 실행된 후에 표시됨). diff --git a/src/content/docs/ko/guides/deploy/netlify.mdx b/src/content/docs/ko/guides/deploy/netlify.mdx index 2bd8859b3f4bd..232ad277ea20a 100644 --- a/src/content/docs/ko/guides/deploy/netlify.mdx +++ b/src/content/docs/ko/guides/deploy/netlify.mdx @@ -4,8 +4,8 @@ description: Astro 사이트를 Netlify의 웹에 배포하는 방법. type: deploy i18nReady: true --- - -import ReadMore from '~/components/ReadMore.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; [Netlify](https://netlify.com)는 웹 ​​애플리케이션과 정적 웹사이트를 위한 호스팅 및 서버리스 백엔드 서비스를 제공합니다. 모든 Astro 사이트는 Netlify에서 호스팅될 수 있습니다! @@ -31,13 +31,14 @@ npx astro add netlify 대신 어댑터를 수동으로 설치하려면 다음 두 단계를 완료하십시오. + 1. 선호하는 패키지 관리자를 사용하여 프로젝트의 종속성에 [`@astrojs/netlify` 어댑터](/ko/guides/integrations-guide/netlify/)를 설치합니다. npm을 사용 중이거나 확실하지 않은 경우 터미널에서 다음을 실행하세요. ```bash npm install @astrojs/netlify ``` -1. `astro.config.mjs` 프로젝트 구성 파일에 두 개의 새 줄을 추가합니다. +2. `astro.config.mjs` 프로젝트 구성 파일에 두 개의 새 줄을 추가합니다. ```js title="astro.config.mjs" ins={2, 5-6} import { defineConfig } from 'astro/config'; @@ -63,6 +64,7 @@ npx astro add netlify }), }); ``` + ## 배포 방법 @@ -72,6 +74,7 @@ npx astro add netlify 프로젝트가 GitHub, GitLab, BitBucket, Azure DevOps에 저장된 경우 Netlify 웹 사이트 UI를 사용하여 Astro 사이트를 배포할 수 있습니다. + 1. [Netlify dashboard](https://app.netlify.com/)에서 Add a new site를 클릭하세요. 2. Import an existing project를 선택하세요. @@ -83,7 +86,8 @@ npx astro add netlify - **Build Command:** `astro build` 또는 `npm run build` - **Publish directory:** `dist` - 배포 후에는 사이트 개요 페이지로 리디렉션됩니다. 여기에서 사이트 세부정보를 편집할 수 있습니다. + 배포 후에는 사이트 개요 페이지로 리디렉션됩니다. 여기에서 사이트 세부정보를 편집할 수 있습니다. + 소스 저장소에 대한 향후 변경 사항은 배포 구성에 따라 미리 보기 및 프로덕션 배포를 트리거합니다. @@ -105,6 +109,7 @@ npx astro add netlify [Netlify CLI](https://cli.netlify.com/)를 설치하고 사용하여 Netlify에 새 사이트를 만들고 Git 저장소를 연결할 수도 있습니다. + 1. Netlify의 CLI를 전역적으로 설치 ```bash @@ -112,7 +117,9 @@ npx astro add netlify ``` 2. `netlify login`을 실행하고 지침에 따라 Netlify에 로그인하고 권한을 부여하세요. + 3. `netlify init`을 실행하고 지침을 따르세요. + 4. 빌드 명령 (`astro build`)을 확인하세요. CLI는 빌드 설정 (`astro build`)과 배포 디렉터리 (`dist`)를 자동으로 감지하고 해당 설정을 사용하여 [`netlify.toml` 파일](#netlifytoml-파일)을 자동으로 생성하도록 제안합니다. @@ -120,12 +127,13 @@ npx astro add netlify 5. Git에 푸시하여 빌드 및 배포 CLI는 저장소에 배포 키를 추가합니다. 이는 `git push`를 할 때마다 Netlify에서 사이트가 자동으로 재빌드된다는 의미입니다. + Netlify가 제공하는 [Netlify CLI를 사용한 Astro 사이트 배포](https://www.netlify.com/blog/how-to-deploy-astro/#link-your-astro-project-and-deploy-using-the-netlify-cli)에 대한 자세한 내용 ### Node.js 버전 설정 -Netlify에서 레거시 [빌드 이미지](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial)를 사용하는 경우 Node.js 버전이 설정되어 있는지 확인하세요. Astro에는 `v18.14.1` 이상이 필요합니다. +Netlify에서 레거시 [빌드 이미지](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial)를 사용하는 경우 Node.js 버전이 설정되어 있는지 확인하세요. Astro에는 `v18.17.1` 또는 `v20.3.0` 이상이 필요합니다. 다음을 사용하여 [Netlify에서 Node.js 버전을 지정](https://docs.netlify.com/configure-builds/manage-dependent/#node-js-and-javascript)할 수 있습니다. - base 디렉터리에 있는 [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) 파일. diff --git a/src/content/docs/ko/guides/deploy/render.mdx b/src/content/docs/ko/guides/deploy/render.mdx index da16c3e3dd414..4e119f5658a53 100644 --- a/src/content/docs/ko/guides/deploy/render.mdx +++ b/src/content/docs/ko/guides/deploy/render.mdx @@ -4,16 +4,23 @@ description: Render를 사용하여 Astro 사이트를 웹에 배포하는 방 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; Astro 프로젝트를 [Render](https://render.com/)에 배포할 수 있습니다. 이 서비스는 무료 TLS 인증서, 글로벌 CDN, DDoS 보호, 개인 네트워크, Git의 자동 배포를 갖춘 웹사이트 구축 서비스입니다. ## 배포 방법 + 1. [render.com 계정](https://dashboard.render.com/)을 만들고 로그인합니다. + 2. 대시보드에서 **New +** 버튼을 클릭하고 **Static Site**를 선택합니다. + 3. [GitHub](https://github.com/) 또는 [GitLab](https://about.gitlab.com/) 저장소를 연결하거나 공개 저장소의 공개 URL을 입력합니다. + 4. 웹 사이트 이름을 지정하고 브랜치를 선택한 다음 빌드 명령과 게시 디렉터리를 지정합니다. - **빌드 명령:** `npm run build` - **게시 디렉터리:** `dist` - - **환경 변수 (고급)**: 기본적으로 Render는 Node.js 14.17.0을 사용하지만 Astro에서는 [더 높은 버전이 필요합니다](/ko/install/auto/#요구사항). Render에 호환되는 Node.js 버전을 사용하도록 지시하려면 **Variable key**가 `NODE_VERSION`이고 **Value**가 `18.14.1` 이상인 환경 변수를 추가하세요. 또는 Node.js 버전을 지정하기 위해 프로젝트에 [`.node-version`](https://render.com/docs/node-version)이나 [`.nvmrc`](https://render.com/docs/node-version) 파일을 추가하세요. + - **환경 변수 (고급)**: 기본적으로 Render는 Node.js 14.17.0을 사용하지만 Astro에서는 [더 높은 버전이 필요합니다](/ko/install/auto/#요구사항). Render에 호환되는 Node.js 버전을 사용하도록 지시하려면 **Variable key**가 `NODE_VERSION`이고 **Value**가 `v18.17.1` 또는 `v20.3.0` 이상인 환경 변수를 추가하세요. 또는 Node.js 버전을 지정하기 위해 프로젝트에 [`.node-version`](https://render.com/docs/node-version)이나 [`.nvmrc`](https://render.com/docs/node-version) 파일을 추가하세요. + 5. **Create Static Site** 버튼을 클릭하세요. + diff --git a/src/content/docs/ko/guides/deploy/space.mdx b/src/content/docs/ko/guides/deploy/space.mdx index a4629b3a51f53..1a1a6c4bd1d46 100644 --- a/src/content/docs/ko/guides/deploy/space.mdx +++ b/src/content/docs/ko/guides/deploy/space.mdx @@ -4,9 +4,9 @@ description: Space에 Astro 사이트를 구축하는 방법. type: deploy i18nReady: true --- - import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro'; -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; [Deta Space](https://deta.space/developers)는 클라우드, 즉 '개인용 클라우드'에 존재하는 개인용 컴퓨터입니다. 나만의 "Space"에서 직접 앱을 만들고 실행할 수 있습니다. 자신이 만든 앱을 게시하면 전 세계 사람들을 위해 실행될 수 있습니다. @@ -39,9 +39,13 @@ Space CLI는 앱 구성을 자동 감지하려고 시도합니다. 제안된 구 Space CLI에서 생성된 프로젝트 루트의 `Spacefile` 파일을 다음과 같이 변경합니다. + 1. engine을 `static`으로 변경합니다. + 2. `commands` 목록에 Astro의 빌드 명령을 추가합니다. + 3. Astro가 생성한 `dist` 디렉터리를 제공합니다. + ```yaml title="Spacefile" {6,8,9} # Spacefile 문서: https://deta.space/docs/en/build/reference/spacefile @@ -59,10 +63,15 @@ micros: Space CLI에서 생성된 프로젝트 루트의 `Spacefile` 파일을 다음과 같이 변경합니다. + 1. `nodejs16` 엔진을 구성합니다. + 2. `build` 명령을 추가합니다. + 3. Astro에서 생성된 `dist` 디렉터리를 포함합니다. + 4. node 명령을 실행합니다. + ```yaml title="Spacefile" {6,8,10,11} # Spacefile 문서: https://deta.space/docs/en/build/reference/spacefile diff --git a/src/content/docs/ko/guides/deploy/sst.mdx b/src/content/docs/ko/guides/deploy/sst.mdx index b1d4882f7cd4c..1078bad9b5b74 100644 --- a/src/content/docs/ko/guides/deploy/sst.mdx +++ b/src/content/docs/ko/guides/deploy/sst.mdx @@ -4,6 +4,7 @@ description: SST를 사용하여 Astro 사이트를 AWS에 배포하는 방법 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; SSG 및 SSR 지원을 통해 완전한 서버리스 애플리케이션을 AWS에 배포하기 위한 오픈 소스 프레임워크인 [SST](https://sst.dev)를 사용하여 Astro 사이트를 배포할 수 있습니다. @@ -11,6 +12,7 @@ SSG 및 SSR 지원을 통해 완전한 서버리스 애플리케이션을 AWS에 ## 빠른 시작 + 1. Astro 프로젝트를 생성합니다. 2. `npx create-sst`를 실행합니다. @@ -18,6 +20,7 @@ SSG 및 SSR 지원을 통해 완전한 서버리스 애플리케이션을 AWS에 3. Astro를 사용하고 있음을 감지하고 확인을 요청해야 합니다. 4. 배포 준비가 완료되면 `npx sst deploy --stage=production`을 실행할 수 있습니다. + 또한 단계를 안내하는 [이 프로세스를 안내하는 동영상](https://www.youtube.com/watch?v=AFP3ZHxO7Gg)을 시청하실 수도 있습니다. diff --git a/src/content/docs/ko/guides/deploy/stormkit.mdx b/src/content/docs/ko/guides/deploy/stormkit.mdx index 779a955b318ac..3943ac5b3a8a3 100644 --- a/src/content/docs/ko/guides/deploy/stormkit.mdx +++ b/src/content/docs/ko/guides/deploy/stormkit.mdx @@ -4,13 +4,14 @@ description: Astro 사이트를 Stormkit에 배포 type: deploy i18nReady: true --- - import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; Astro 프로젝트를 정적 웹사이트, 단일 페이지 애플리케이션 (SPA) 및 서버리스 함수를 위한 배포 플랫폼인 [Stormkit](https://stormkit.io/)에 배포할 수 있습니다. ## 배포 방법 + 1. [Stormkit에 로그인](https://app.stormkit.io/auth)합니다. 2. 사용자 인터페이스를 사용하여 지원되는 세 가지 Git 제공업체 (GitHub, GitLab 또는 Bitbucket) 중 하나에서 Astro 프로젝트를 가져옵니다. @@ -20,5 +21,6 @@ Astro 프로젝트를 정적 웹사이트, 단일 페이지 애플리케이션 ( 4. [Stormkit 구성](https://stormkit.io/docs/deployments/configuration)에서 빌드 명령을 확인하세요. 기본적으로 Stormkit CI는 `npm run build`를 실행하지만 이 페이지에서 사용자 지정 빌드 명령을 지정할 수 있습니다. 5. 사이트를 배포하려면 "Deploy Now" 버튼을 클릭하세요. + [Stormkit 문서](https://stormkit.io/docs)에서 자세히 알아보세요. diff --git a/src/content/docs/ko/guides/deploy/surge.mdx b/src/content/docs/ko/guides/deploy/surge.mdx index ffde8ec5d8eee..0eaffdb37f125 100644 --- a/src/content/docs/ko/guides/deploy/surge.mdx +++ b/src/content/docs/ko/guides/deploy/surge.mdx @@ -4,11 +4,13 @@ description: surge.sh를 사용하여 Astro 사이트를 웹에 배포하는 방 type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; 프런트엔드 개발자를 위해 설계된 단일 명령 웹 게시 플랫폼인 [Surge](https://surge.sh/)에 Astro 프로젝트를 배포할 수 있습니다. ## 배포 방법 + 1. [Surge CLI](https://www.npmjs.com/package/surge)를 아직 설치하지 않았다면 터미널에서 전역으로 설치하세요. ```shell @@ -28,3 +30,4 @@ i18nReady: true ``` `surge dist yourdomain.com`을 실행하여 배포할 때 [맞춤 도메인](http://surge.sh/help/adding-a-custom-domain)을 사용할 수 있습니다. + diff --git a/src/content/docs/ko/guides/deploy/vercel.mdx b/src/content/docs/ko/guides/deploy/vercel.mdx index 0872ffb38575b..5a649b2b9792d 100644 --- a/src/content/docs/ko/guides/deploy/vercel.mdx +++ b/src/content/docs/ko/guides/deploy/vercel.mdx @@ -4,7 +4,8 @@ description: Vercel을 사용하여 Astro 사이트를 웹에 배포하는 방 type: deploy i18nReady: true --- -import ReadMore from '~/components/ReadMore.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; [Vercel](http://vercel.com/)을 사용하면 구성 없이 Astro 사이트를 전세계 에지 네트워크에 배포할 수 있습니다. @@ -30,6 +31,7 @@ npx astro add vercel 어댑터를 수동으로 설치하려는 경우, 다음 두 단계를 완료하세요. + 1. 선호하는 패키지 관리자를 사용하여 프로젝트의 종속성에 [`@astrojs/vercel` 어댑터](/ko/guides/integrations-guide/vercel/)를 설치합니다. npm을 사용하거나 확실하지 않은 경우, 터미널에서 다음을 실행합니다. ```bash @@ -47,6 +49,7 @@ npx astro add vercel adapter: vercel(), }); ``` + ## 배포 방법 @@ -54,10 +57,15 @@ npx astro add vercel ### 웹사이트 UI 배포 + 1. 코드를 온라인 Git 저장소 (GitHub, GitLab, BitBucket)에 푸시합니다. + 2. Vercel로 [프로젝트를 가져옵니다](https://vercel.com/new). + 3. Vercel은 자동으로 Astro를 감지하고 적절한 설정을 구성합니다. + 4. 애플리케이션이 배포되었습니다! (예: [astro.vercel.app](https://astro.vercel.app/)) + 프로젝트를 가져와 배포된 후, 브랜치의 모든 후속 푸시는 [배포 미리보기](https://vercel.com/docs/concepts/deployments/preview-deployments)를 생성하고, 프로덕선 브랜치 (일반적으로 "main")에 대한 모든 변경 사항은 [프로덕션 배포](https://vercel.com/docs/concepts/deployments/environments#production)에 반영됩니다. @@ -66,6 +74,7 @@ npx astro add vercel ### CLI 배포 + 1. [Vercel CLI](https://vercel.com/cli)를 설치하고 `vercel`을 실행하여 배포합니다. ```bash @@ -74,16 +83,14 @@ npx astro add vercel ``` 2. Vercel은 자동으로 Astro를 감지하고 적절한 설정을 구성합니다. + 3. `Want to override the settings? [y/N]`라는 질문에 대한 답변으로 `N`을 선택합니다. -4. 애플리케이션이 배포되었습니다! (예: [astro.vercel.app](https://astro.vercel.app/)) +4. 애플리케이션이 배포되었습니다! (예: [astro.vercel.app](https://astro.vercel.app/)) + ### vercel.json을 이용한 프로젝트 구성 `vercel.json`을 사용하여 Vercel의 기본 동작을 재정의하고 추가 설정을 구성할 수 있습니다. 예를 들어, 배포의 HTTP 응답에 헤더를 첨부하려는 경우가 있을 수 있습니다. -[Vercel의 프로젝트 설정](https://vercel.com/docs/project-configuration)에 대해 더 알아보세요. - -### Astro 2.0으로 업그레이드 - -Astro v2.0은 Node 14 버전에 대한 지원을 중단하였으므로, 프로젝트가 **Node `18.14.1` 이상**을 사용하고 있는지 확인하세요. 프로젝트의 Settings 메뉴의 General 페이지에서 빌드 단계 및 서버리스 함수에서 사용되는 [Node.js 버전을 정의](https://vercel.com/changelog/node-js-version-now-customizable-in-the-project-settings)할 수 있습니다. +[Vercel의 프로젝트 설정](https://vercel.com/docs/project-configuration)에 대해 더 알아보세요. \ No newline at end of file diff --git a/src/content/docs/ko/guides/deploy/zeabur.mdx b/src/content/docs/ko/guides/deploy/zeabur.mdx index 759f1666db2cd..213900bb3b79e 100644 --- a/src/content/docs/ko/guides/deploy/zeabur.mdx +++ b/src/content/docs/ko/guides/deploy/zeabur.mdx @@ -4,6 +4,7 @@ description: Astro 사이트를 Zeabur의 웹에 배포하는 방법. type: deploy i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Zeabur](https://zeabur.com)는 풀 스택 웹 애플리케이션을 위한 호스팅을 제공합니다. Astro 사이트는 SSR 또는 정적 출력으로 호스팅될 수 있습니다. @@ -19,6 +20,7 @@ Astro는 기본적으로 정적 사이트를 출력합니다. 정적 Astro 사 Astro 프로젝트에서 SSR을 활성화하고 Zeabur에 배포하려면 다음 단계를 따르세요. + 1. 선호하는 패키지 관리자를 사용하여 프로젝트의 종속성에 [`@zeabur/astro-adapter` 어댑터](https://www.npmjs.com/package/@zeabur/astro-adapter)를 설치하세요. npm을 사용 중이거나 확실하지 않은 경우 터미널에서 다음을 실행하세요. ```bash @@ -36,11 +38,13 @@ Astro 프로젝트에서 SSR을 활성화하고 Zeabur에 배포하려면 다음 adapter: zeabur(), }); ``` + ## 배포 방법 프로젝트가 GitHub에 저장된 경우 Astro 사이트를 Zeabur에 배포할 수 있습니다. + 1. [Zeabur 대시보드](https://dash.zeabur.com)에서 Create new project를 클릭하세요. 2. GitHub 설치를 구성하고 저장소를 가져옵니다. @@ -48,6 +52,7 @@ Astro 프로젝트에서 SSR을 활성화하고 Zeabur에 배포하려면 다음 3. Zeabur는 여러분의 프로젝트가 Astro 프로젝트인지 자동으로 감지하고 `astro build` 명령을 사용하여 빌드합니다. 4. 빌드가 완료되면 도메인을 사이트에 바인딩하여 방문할 수 있습니다. + 프로젝트를 가져와 배포한 후 브랜치에 대하나 모든 추가 푸시는 새로운 빌드를 생성합니다. diff --git a/src/content/docs/ko/guides/ecommerce.mdx b/src/content/docs/ko/guides/ecommerce.mdx index f562788c0b599..8f5c61f0073d2 100644 --- a/src/content/docs/ko/guides/ecommerce.mdx +++ b/src/content/docs/ko/guides/ecommerce.mdx @@ -3,8 +3,9 @@ title: 전자 상거래 description: Astro 사이트에 전자상거래 옵션을 추가하는 방법 소개 i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import ReadMore from '~/components/ReadMore.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; +import ReadMore from '~/components/ReadMore.astro'; Astro를 사용하면 결제 링크부터 호스팅된 결제 페이지, 결제 서비스 API를 사용한 전체 매장 구축까지 다양한 전자상거래 옵션을 구축할 수 있습니다. @@ -22,11 +23,13 @@ Astro를 사용하면 결제 링크부터 호스팅된 결제 페이지, 결제 다음은 Astro 페이지에 Lemon Squeezy "Buy Now" 요소를 추가하는 예시입니다. 이 링크를 클릭하면 결제가 열리고 방문자가 단일 구매를 완료할 수 있습니다. + 1. 다음 ` ``` + 2. 제품 URL로 연결되는 페이지에 앵커 태그를 만듭니다. 클릭 시 결제 오버레이를 열려면 `lemonsqueezy-button` 클래스를 포함하세요. ```html title="src/pages/my-product-page.astro" @@ -34,6 +37,7 @@ Astro를 사용하면 결제 링크부터 호스팅된 결제 페이지, 결제 Buy Now ``` + #### Lemon.js @@ -53,6 +57,7 @@ Astro를 사용하면 결제 링크부터 호스팅된 결제 페이지, 결제 기본 결제 링크 도메인 (자신의 웹사이트)이 Paddle에 의해 승인되면 HTML 데이터 속성을 사용하여 페이지의 모든 요소를 결제 오버레이에 대한 트리거로 전환할 수 있습니다. + 1. 페이지의 `head` 또는 `body`에 다음 두 개의 ` ``` + 2. `paddle_button` 클래스를 추가하여 페이지의 모든 요소를 Paddle Checkout 버튼으로 전환하세요. ```html title="src/pages/my-product-page.astro" Buy Now ``` + 3. 제품의 Paddle `priceId` 및 `quantity`을 지정하려면 `data-items` 속성을 추가하세요. [지원되는 HTML 데이터 속성](https://developer.paddle.com/paddlejs/html-data-attributes)을 선택적으로 추가하여 데이터를 미리 채우거나 결제 성공을 처리하거나 버튼 및 결제 오버레이 스타일을 지정할 수도 있습니다. ```html title="src/pages/my-product-page.astro" @@ -88,6 +95,7 @@ Astro를 사용하면 결제 링크부터 호스팅된 결제 페이지, 결제 Buy now ``` + #### Paddle.js @@ -115,6 +123,7 @@ HTML 데이터 속성을 전달하는 대신 JavaScript를 사용하여 결제 Snipcart 스토어 설정을 포함한 전체 지침은 [Snipcart 설치 문서](https://docs.snipcart.com/v3/setup/installation)를 참조하세요. + 1. [Snipcart 설치 지침에 나와있는 대로](https://docs.snipcart.com/v3/setup/installation) 페이지의 `` 요소 뒤에 스크립트를 추가하세요. ```html title="src/pages/my-product-page.astro" @@ -169,6 +178,7 @@ HTML 데이터 속성을 전달하는 대신 JavaScript를 사용하여 결제 ```html title="src/pages/my-product-page.astro" ``` + #### Snipcart JavaScript SDK diff --git a/src/content/docs/ko/guides/framework-components.mdx b/src/content/docs/ko/guides/framework-components.mdx index 00f4d33a96dfe..22341f64d1718 100644 --- a/src/content/docs/ko/guides/framework-components.mdx +++ b/src/content/docs/ko/guides/framework-components.mdx @@ -10,7 +10,7 @@ import ReadMore from '~/components/ReadMore.astro' ## 공식 UI 프레임워크 통합 -Astro는 [React](https://ko.react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://ko.vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/), [Lit](https://lit.dev/) 공식 통합이 포함되어 있습니다. +Astro에는 [React](https://ko.react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://ko.vuejs.org/), [SolidJS](https://www.solidjs.com/), [AlpineJS](https://alpinejs.dev/), [Lit](https://lit.dev/) 공식 통합이 포함되어 있습니다. 통합 디렉터리에서 더 많은 [커뮤니티에서 관리하는 프레임워크 통합](https://astro.build/integrations/?search=&categories%5B%5D=frameworks) (예: Angular, Qwik, Elm)을 찾아보세요. @@ -18,19 +18,19 @@ Astro는 [React](https://ko.react.dev/), [Preact](https://preactjs.com/), [Svelt ## 통합 설치 -이러한 Astro 통합 중 하나 이상을 프로젝트에 설치하고 구성할 수 있습니다. +하나 이상의 Astro 통합을 프로젝트에 설치하고 구성할 수 있습니다. Astro 통합 설치 및 구성에 대한 자세한 내용은 [통합 안내서](/ko/guides/integrations-guide/)를 참조하세요. :::tip -선택한 프레임워크의 예시를 보고 싶으십니까? [astro.new](https://astro.new/latest/frameworks)를 방문하여 프레임워크 템플릿 중 하나를 선택하세요. +선택한 프레임워크의 예시를 보고 싶나요? [astro.new](https://astro.new/latest/frameworks)를 방문하여 프레임워크 템플릿 중 하나를 선택하세요. ::: -## 프레임워크 컴포넌트 사용하기 +## 프레임워크 컴포넌트 사용 -Astro 컴포넌트와 마찬가지로 자바스크립트 프레임워크 컴포넌트를 Astro 페이지, 레이아웃, 컴포넌트에서 사용할 수 있습니다! 모든 컴포넌트는 `/src/components`에 모아두거나 원하는 대로 구성할 수 있습니다. +Astro 컴포넌트와 마찬가지로 자바스크립트 프레임워크 컴포넌트를 Astro 페이지, 레이아웃, 컴포넌트에서 사용할 수 있습니다! 모든 컴포넌트는 `/src/components` 디렉터리에 모아두거나 원하는 대로 구성할 수 있습니다. -프레임워크 컴포넌트를 사용하려면 Astro 컴포넌트 스크립트에서 상대 경로를 지정하여 가져옵니다. 그리고 컴포넌트 템플릿에서 다른 컴포넌트, HTML 요소, JSX와 같은 표현식과 함께 사용합니다. +프레임워크 컴포넌트를 사용하기 위해 Astro 컴포넌트 스크립트에서 상대 경로를 지정하여 가져옵니다. 그리고 컴포넌트 템플릿에서 다른 컴포넌트, HTML 요소, JSX와 같은 표현식과 함께 사용합니다. ```astro title="src/pages/static-components.astro" ins={2,7} --- @@ -44,14 +44,13 @@ import MyReactComponent from '../components/MyReactComponent.jsx'; ``` -기본적으로 프레임워크 컴포넌트는 서버에서 정적 HTML로 렌더링 됩니다. 이는 비대화형 컴포넌트를 템플릿화하는데 유용하며, 필요하지 않은 자바스크립트를 클라이언트에 전송하는 것을 방지합니다. +기본적으로 프레임워크 컴포넌트는 서버에서 정적 HTML로 렌더링 됩니다. 이는 비대화형 컴포넌트를 템플릿으로 만드는데 유용하며, 필요하지 않은 자바스크립트를 클라이언트에 전송하는 것을 방지합니다. +## 인터랙티브 컴포넌트 하이드레이션 -## 인터랙티브 컴포넌트 하이드레이션하기 +프레임워크 컴포넌트는 [`client:*` 지시어](/ko/reference/directives-reference/#클라이언트-지시어)를 이용하여 대화형으로 만들 수 있습니다 (하이드레이션). 이는 컴포넌트의 자바스크립트가 브라우저로 전송되는 시기를 결정하는 컴포넌트 속성입니다. -프레임워크 컴포넌트는 [`client:*` 지시어](/ko/reference/directives-reference/#클라이언트-지시어)를 이용하여 대화형(하이드레이션)으로 만들 수 있습니다. 이는 컴포넌트의 자바스크립트가 브라우저로 전송되는 시기를 결정하는 컴포넌트 속성입니다. - -`client:only`를 제외한 모든 클라이언트 지시어를 사용하면 컴포넌트는 먼저 서버에서 렌더링 되어 정적 HTML을 생성합니다. 자바스크립트 컴포넌트는 지시어에 따라 브라우저로 전송됩니다. 이후 컴포넌트가 하이드레이트 되어 인터랙티브하게 됩니다. +`client:only`를 제외한 모든 클라이언트 지시어를 사용하면 컴포넌트는 먼저 서버에서 렌더링 되어 정적 HTML을 생성합니다. 자바스크립트 컴포넌트는 지시어에 따라 브라우저로 전송됩니다. 그러면 컴포넌트에 하이드레이션이 추가되어 인터랙티브 컴포넌트가 됩니다. ```astro title="src/pages/interactive-components.astro" /client:\S+/ --- @@ -70,10 +69,10 @@ import InteractiveModal from "../components/InteractiveModal.svelte" ``` -컴포넌트를 렌더링하는 데 필요한 자바스크립트 프레임워크(React, Svelte 등)는 컴포넌트 자체의 자바스크립트와 함께 브라우저로 전송됩니다. 페이지의 여러 컴포넌트가 동일한 프레임워크를 사용하는 경우, 프레임워크는 한 번만 전송됩니다. +컴포넌트를 렌더링하는 데 필요한 자바스크립트 프레임워크 (React, Svelte 등)는 컴포넌트 자체 자바스크립트와 함께 브라우저로 전송됩니다. 페이지의 여러 컴포넌트가 동일한 프레임워크를 사용하는 경우, 프레임워크는 한 번만 전송됩니다. :::note[접근성] -이 컴포넌트들을 Astro 에서 사용할 경우, 프레임워크별 접근성 패턴이 동일하게 작동해야 합니다. 접근성 관련 자바스크립트가 제대로 로드되고 실행되도록 클라이언트 지시어를 반드시 설정해야 합니다. +이러한 컴포넌트를 Astro 에서 사용하는 경우, 프레임워크별 접근성 패턴이 동일하게 작동해야 합니다. 접근성 관련 자바스크립트가 제대로 로드되고 실행되도록 클라이언트 지시어를 반드시 설정해야 합니다. ::: ### 사용 가능한 하이드레이션 지시어 @@ -82,13 +81,13 @@ UI 프레임워크 컴포넌트에서 사용할 수 있는 하이드레이션 하이드레이션 지시어에 대한 자세한 설명과 사용법은 [지시어 참조](/ko/reference/directives-reference/#클라이언트-지시어) 페이지를 참조하세요. -## 프레임워크 혼합하기 +## 프레임워크 혼합 -동일한 Astro 컴포넌트 내에서 여러 프레임워크에서 만든 컴포넌트를 가져와 렌더링할 수 있습니다. +동일한 Astro 컴포넌트에서 여러 프레임워크 컴포넌트를 가져와 렌더링할 수 있습니다. ```astro title="src/pages/mixing-frameworks.astro" --- -// 예: 한 페이지에 여러 프레임워크의 구성요소를 혼합하는 경우 +// 예시: 한 페이지에서 여러 프레임워크 컴포넌트 혼합 import MyReactComponent from '../components/MyReactComponent.jsx'; import MySvelteComponent from '../components/MySvelteComponent.svelte'; import MyVueComponent from '../components/MyVueComponent.vue'; @@ -101,10 +100,10 @@ import MyVueComponent from '../components/MyVueComponent.vue'; ``` :::caution -**Astro** 컴포넌트(`.astro`)만 여러 프레임워크의 컴포넌트를 포함할 수 있습니다. +오직 **Astro** 컴포넌트 (`.astro`)만이 여러 프레임워크 컴포넌트를 포함할 수 있습니다. ::: -## 프레임워크 컴포넌트에 Props 전달하기 +## 프레임워크 컴포넌트에 Props 전달 Astro 컴포넌트에서 프레임워크 컴포넌트로 props를 전달할 수 있습니다. @@ -120,15 +119,15 @@ import Counter from '../components/Counter.svelte'; ``` :::caution[함수를 props로 전달하기] -프레임워크 컴포넌트에 함수를 프로퍼티로 전달할 수 있지만, 이 함수는 서버 렌더링 중에만 작동합니다. 이 함수를 하이드레이션 컴포넌트(예: 이벤트 핸들러)에서 사용하려고 하면 오류가 발생합니다. +프레임워크 컴포넌트에 함수를 전달할 수 있지만, 이 함수는 서버 렌더링 중에만 작동합니다. 이 함수를 하이드레이션 컴포넌트 (예: 이벤트 핸들러)에서 사용하면 오류가 발생합니다. -이는 Astro 에서 함수를 직렬화(서버에서 클라이언트로 전송)할 수 없기 때문입니다. +이는 Astro 에서 함수를 직렬화 (서버에서 클라이언트로 전송)할 수 없기 때문입니다. ::: -## 프레임워크 컴포넌트에 자식 요소 전달하기 +## 프레임워크 컴포넌트에 자식 요소 전달 -Astro 컴포넌트에서는 프레임워크 컴포넌트에 자식 요소를 전달할 수 있습니다. 각 프레임워크마다 이러한 자식 요소를 참조하는 고유한 패턴이 있는데, React, Preact, Solid는 `children`이라는 특별한 속성을 사용하고, Svelte와 Vue는 ``라는 요소를 사용합니다. +Astro 컴포넌트에서 프레임워크 컴포넌트로 자식 요소를 전달할 수 있습니다. 각 프레임워크마다 이러한 자식 요소를 참조하는 고유한 패턴이 있는데, React, Preact, Solid는 `children`이라는 특별한 속성을 사용하고, Svelte와 Vue는 ``라는 요소를 사용합니다. ```astro title="src/pages/component-children.astro" {5} --- @@ -181,9 +180,9 @@ Svelte와 Vue에서 이러한 슬롯은 `` 요소에 `name` 속성을 붙 ``` -## 프레임워크 컴포넌트 중첩하기 +## 프레임워크 컴포넌트 중첩 -Astro 파일 내에서는 프레임워크 컴포넌트의 자식 요소도 하이드레이션된 컴포넌트로 만들 수 있습니다. 즉, 프레임워크의 모든 컴포넌트를 재귀적으로 중첩할 수 있습니다. +Astro 파일에서 프레임워크 컴포넌트의 자식 요소를 하이드레이션 컴포넌트로 만들 수 있습니다. 즉, 프레임워크의 모든 컴포넌트를 재귀적으로 중첩할 수 있습니다. ```astro title="src/pages/nested-components.astro" {10-11} --- @@ -202,20 +201,20 @@ import MySvelteButton from '../components/MySvelteButton.svelte'; ``` :::caution -프레임워크의 컴포넌트 자체(예: `.jsx`, `.svelte`)는 여러 프레임워크를 혼용할 수 없습니다. +프레임워크 컴포넌트 (예: `.jsx`, `.svelte`)는 여러 프레임워크를 혼용할 수 없습니다. ::: 이를 통해 원하는 자바스크립트 프레임워크로 전체 '앱'을 구축하고 상위 컴포넌트를 통해 Astro의 페이지로 렌더링할 수 있습니다. :::note -Astro 컴포넌트는 하이드레이션되는 프레임워크 컴포넌트를 포함하더라도 항상 정적 HTML로 렌더링 됩니다. 즉, Astro 컴포넌트에서 프레임워크 컴포넌트에 React의 'render props'를 전달하면, Astro 컴포넌트는 이 패턴이 요구하는 클라이언트 런타임 동작을 제공하지 못하기 때문에 작동하지 않습니다. 대신 이름을 가진 슬롯을 사용합니다. +Astro 컴포넌트는 하이드레이션 프레임워크 컴포넌트를 포함하더라도 항상 정적 HTML로 렌더링 됩니다. 즉, Astro 컴포넌트에서 프레임워크 컴포넌트에 React의 'render props'를 전달하면, Astro 컴포넌트는 이 패턴이 요구하는 클라이언트 런타임 동작을 제공하지 못하기 때문에 작동하지 않습니다. 대신 이름을 가진 슬롯을 사용합니다. ::: -## 프레임워크 컴포넌트 중 Astro 컴포넌트를 사용할 수 있나요? +## 프레임워크 컴포넌트에서 Astro 컴포넌트를 사용할 수 있나요? -UI 프레임워크 컴포넌트는 해당 프레임워크의 '아일랜드 (섬)'가 됩니다. 이러한 컴포넌트는 해당 프레임워크의 유효한 코드로서 자체 가져오기 또는 패키지를 사용하여 완전히 작성해야 하며, UI 프레임워크 컴포넌트(예: `.jsx` 또는 `.svelte`) 내에서 .astro 컴포넌트를 가져올 수 없습니다. +UI 프레임워크 컴포넌트는 해당 프레임워크의 '아일랜드'가 됩니다. 이러한 컴포넌트는 해당 프레임워크의 유효한 코드로서 자체 가져오기 또는 패키지를 사용하여 작성해야 하며, UI 프레임워크 컴포넌트 (예: `.jsx` 또는 `.svelte`)에서 .astro 컴포넌트를 가져올 수 없습니다. -하지만 [Astro의 `` 패턴](/ko/basics/astro-components/#슬롯)을 이용하여 Astro 컴포넌트가 생성한 정적 콘텐츠를 **.astro 컴포넌트 내에서** 프레임워크 컴포넌트에 자식 요소로 전달할 수 있습니다. +하지만 [Astro의 `` 패턴](/ko/basics/astro-components/#슬롯)을 사용하여 Astro 컴포넌트가 생성한 정적 콘텐츠를 **.astro 컴포넌트에서** 프레임워크 컴포넌트에 자식 요소로 전달할 수 있습니다. ```astro title="src/pages/astro-children.astro" {6} --- @@ -227,7 +226,7 @@ import MyAstroComponent from '../components/MyAstroComponent.astro'; ``` -## Astro 컴포넌트에 하이드레이션을 할 수 있나요? +## Astro 컴포넌트를 하이드레이션 할 수 있나요? `client:` 지시어를 사용하여 Astro 컴포넌트에 하이드레이션을 시도하면 오류가 발생합니다. diff --git a/src/content/docs/ko/guides/images.mdx b/src/content/docs/ko/guides/images.mdx index 242cdd4593ff8..b1599130c4038 100644 --- a/src/content/docs/ko/guides/images.mdx +++ b/src/content/docs/ko/guides/images.mdx @@ -489,7 +489,7 @@ export default defineConfig({ ## Markdown 파일의 이미지 -`.md` 파일에 표준 Markdown `![alt](src)` 구문을 사용하세요. 이 구문은 Astro의 [이미지 서비스 API](/ko/reference/image-service-reference/)와 함께 작동하여 로컬 이미지와 승인된 원격 이미지를 최적화합니다. +`.md` 파일에 표준 Markdown `![alt](src)` 구문을 사용하세요. 이 구문은 Astro의 [이미지 서비스 API](/ko/reference/image-service-reference/)와 함께 작동하여 `src/`에 저장된 로컬 이미지를 최적화합니다. 원격 이미지와 `public/` 폴더에 저장된 이미지는 최적화되지 않습니다. ```md @@ -635,7 +635,7 @@ export default function ReactImage() { 다른 Astro 컴포넌트와 마찬가지로 `` 컴포넌트는 **UI 프레임워크 컴포넌트에서 사용할 수 없습니다**. -그러나 ``에서 생성된 정적 콘텐츠를 `.astro` 파일 내 프레임워크 컴포넌트에 하위 항목으로 전달하거나 [명명된 ``](/ko/guides/framework-components/#프레임워크-컴포넌트-중-astro-컴포넌트를-사용할-수-있나요)을 사용하여 전달할 수 있습니다. +그러나 ``에서 생성된 정적 콘텐츠를 `.astro` 파일 내 프레임워크 컴포넌트에 하위 항목으로 전달하거나 [명명된 ``](/ko/guides/framework-components/#프레임워크-컴포넌트에서-astro-컴포넌트를-사용할-수-있나요)을 사용하여 전달할 수 있습니다. ```astro title="ImageWrapper.astro" --- diff --git a/src/content/docs/ko/guides/integrations-guide/lit.mdx b/src/content/docs/ko/guides/integrations-guide/lit.mdx index 5d275c91766d8..5c7099b466eba 100644 --- a/src/content/docs/ko/guides/integrations-guide/lit.mdx +++ b/src/content/docs/ko/guides/integrations-guide/lit.mdx @@ -127,6 +127,34 @@ import { MyElement } from '../components/my-element.js'; Lit에는 `HTMLElement` 및 `customElements`와 같은 브라우저 전역 항목이 있어야 합니다. 이러한 이유로 Lit 렌더러는 Lit가 실행될 수 있도록 이러한 전역 변수를 서버에 심습니다. 이로 인해 잘못 작동하는 라이브러리가 *실행될 수* 있습니다. ::: +### 실험적 Decorators + +[Lit의 실험적 Decorators](https://lit.dev/docs/components/decorators/)를 사용하려면 `tsconfig.json` 파일에 다음을 추가하세요. + +```json title="tsconfig.json" add={3} +{ + "compilerOptions": { + "experimentalDecorators": true, + } +} +``` + +이를 통해 `@customElement` 및 `@state`와 같은 실험적 Decorators를 사용하여 맞춤 속성을 등록하고 Lit 컴포넌트에 상태 속성을 정의할 수 있습니다. + +```ts title="src/components/my-element.ts" +import { LitElement, html } from "lit"; +import { customElement, state } from "lit/decorators.js"; + +@customElement("my-element") +export class MyElement extends LitElement { + @state() name = "my-element"; + + override render() { + return html`

Hello world! From ${this.name}

`; + } +} +``` + ### 폴리필 및 하이드레이션 렌더러는 Declarative Shadow DOM이 없는 브라우저에서 지원하기 위해 적절한 폴리필 추가를 자동으로 처리합니다. 폴리필은 약 *1.5kB*입니다. 브라우저가 Declarative Shadow DOM을 지원하는 경우 250바이트 미만이 로드됩니다 (기능 감지 지원을 위해). @@ -188,4 +216,4 @@ Astro는 Lit 컴포넌트용 IntelliSense를 지원하지 않습니다. [astro-integration]: /ko/guides/integrations-guide/ -[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용하기 +[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용 diff --git a/src/content/docs/ko/guides/integrations-guide/markdoc.mdx b/src/content/docs/ko/guides/integrations-guide/markdoc.mdx index 4880075273834..1bb226d7d46a0 100644 --- a/src/content/docs/ko/guides/integrations-guide/markdoc.mdx +++ b/src/content/docs/ko/guides/integrations-guide/markdoc.mdx @@ -6,9 +6,9 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int category: other i18nReady: true --- - import { FileTree } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; import ReadMore from '~/components/ReadMore.astro'; 이 **[Astro 통합][astro-integration]** 을 통해 [Markdoc](https://markdoc.dev/)을 사용하여 컴포넌트, 페이지 및 콘텐츠 컬렉션 항목을 생성할 수 있습니다. @@ -225,7 +225,7 @@ Use tags like this fancy "aside" to add some _flair_ to your docs. ### 클라이언트 측 UI 컴포넌트 사용 -태그와 노드는 `.astro` 파일로 제한됩니다. Markdoc에 클라이언트 측 UI 컴포넌트를 포함하려면 원하는 `client:` 지시어와 함께 [프레임워크 컴포넌트를 렌더링하는 래퍼 `.astro` 컴포넌트를 사용](/ko/guides/framework-components/#프레임워크-컴포넌트-중첩하기)하세요. +태그와 노드는 `.astro` 파일로 제한됩니다. Markdoc에 클라이언트 측 UI 컴포넌트를 포함하려면 원하는 `client:` 지시어와 함께 [프레임워크 컴포넌트를 렌더링하는 래퍼 `.astro` 컴포넌트를 사용](/ko/guides/framework-components/#프레임워크-컴포넌트-중첩)하세요. 이 예시는 React `Aside.tsx` 컴포넌트를 `ClientAside.astro` 컴포넌트로 래핑합니다. @@ -406,6 +406,7 @@ Astro의 `` 컴포넌트는 Markdoc에서 직접 사용할 수 없습 기본 이미지 노드를 재정의하려면 표준 `` 대신 렌더링되도록 `.astro` 컴포넌트를 구성할 수 있습니다. + 1. 사용자 정의 `MarkdocImage.astro` 컴포넌트를 구축하여 이미지의 필수 `src` 및 `alt` 속성을 `` 컴포넌트에 전달합니다. ```astro title="src/components/MarkdocImage.astro" @@ -462,6 +463,7 @@ Astro의 `` 컴포넌트는 Markdoc에서 직접 사용할 수 없습 ![A picture of a dog](https://example.com/dog.jpg) ``` + #### 사용자 정의 Markdoc 이미지 태그 생성 @@ -469,6 +471,7 @@ Markdoc `image` 태그를 사용하면 `![]()` 구문으로는 불가능한 이 다음 단계에서는 이미지를 최적화하기 위해 Astro `` 컴포넌트를 사용하여 캡션이 있는 `
` 요소를 표시하는 사용자 정의 Markdoc 이미지 태그를 생성합니다. + 1. 필요한 props을 받아 캡션이 포함된 이미지를 렌더링하려면 `MarkdocFigure.astro` 컴포넌트를 생성합니다. ```astro title="src/components/MarkdocFigure.astro" @@ -510,6 +513,7 @@ Markdoc `image` 태그를 사용하면 `![]()` 구문으로는 불가능한 이 ```md {% image src="./astro-logo.png" alt="Astro Logo" width="100" height="100" caption="a caption!" %} ``` + `markdoc.config.mjs|ts` 파일은 [태그](https://markdoc.dev/docs/tags) 및 [함수](https://markdoc.dev/docs/functions)를 포함한 [모든 Markdoc 구성 옵션](https://markdoc.dev/docs/config)을 허용합니다. diff --git a/src/content/docs/ko/guides/integrations-guide/mdx.mdx b/src/content/docs/ko/guides/integrations-guide/mdx.mdx index 4f4d51ec00863..05bd77172ae29 100644 --- a/src/content/docs/ko/guides/integrations-guide/mdx.mdx +++ b/src/content/docs/ko/guides/integrations-guide/mdx.mdx @@ -6,9 +6,9 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int category: other i18nReady: true --- - import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' import ReadMore from '~/components/ReadMore.astro' +import Since from '~/components/Since.astro' 이 **[Astro 통합][astro-integration]** 을 통해 [MDX](https://mdxjs.com/) 컴포넌트를 사용할 수 있으며 페이지를 `.mdx` 파일로 생성할 수 있습니다. @@ -197,7 +197,7 @@ export default defineConfig({ ### `optimize` -* **타입:** `boolean | { customComponentNames?: string[] }` +* **타입:** `boolean | { ignoreElementNames?: string[] }` 이는 내부 rehype 플러그인을 통해 더 빠른 빌드 및 렌더링을 위해 MDX 출력을 최적화하기 위한 선택적 구성 설정입니다. MDX 파일이 많고 빌드 속도가 느린 경우에 유용할 수 있습니다. 그러나 이 옵션은 일부 이스케이프 처리되지 않은 HTML을 생성할 수 있으므로 활성화한 후에도 사이트의 대화형 부분이 여전히 올바르게 작동하는지 확인하세요. @@ -217,11 +217,14 @@ export default defineConfig({ }); ``` -#### `customComponentNames` +#### `ignoreElementNames` * **타입:** `string[]` -MDX 최적화 프로그램이 [컴포넌트 prop을 통해 가져온 MDX 콘텐츠로 전달된 사용자 정의 컴포넌트](/ko/guides/markdown-content/#가져온-mdx가-있는-사용자-정의-컴포넌트)를 처리하지 못하도록 방지하는 `optimize`의 선택적 속성입니다. +

+이전에는 `customComponentNames`로 알려졌습니다. + +MDX 최적화 프로그램이 [컴포넌트 prop을 통해 가져온 MDX 콘텐츠에 전달된 사용자 정의 컴포넌트](/ko/guides/markdown-content/#가져온-mdx가-있는-사용자-정의-컴포넌트)와 같은 특정 요소 이름을 처리하지 못하도록 방지하는 `optimize`의 선택적 속성입니다. 최적화 프로그램이 콘텐츠를 정적 문자열로 변환하므로 동적으로 렌더링해야 하는 사용자 정의 컴포넌트가 중단되기 때문에 최적화에서 이러한 컴포넌트를 제외해야 합니다. @@ -236,7 +239,7 @@ import Heading from '../Heading.astro'; ``` -`customComponentNames` 속성을 사용하여 이에 대한 최적화를 구성하려면 맞춤 컴포넌트로 처리되어야 하는 HTML 요소 이름의 배열을 지정하세요. +`ignoreElementNames` 속성을 사용하여 이에 대한 최적화를 구성하려면 맞춤 컴포넌트로 처리되어야 하는 HTML 요소 이름의 배열을 지정하세요. ```js title="astro.config.mjs" import { defineConfig } from 'astro/config'; @@ -248,8 +251,7 @@ export default defineConfig({ mdx({ optimize: { // 최적화 프로그램이 'h1' 요소를 처리하지 못하도록 방지 - // 이는 맞춤 컴포넌트로 처리됩니다. - customComponentNames: ['h1'], + ignoreElementNames: ['h1'], }, }), ], diff --git a/src/content/docs/ko/guides/integrations-guide/preact.mdx b/src/content/docs/ko/guides/integrations-guide/preact.mdx index e1d8657ce8af3..bfc2a2ed22d92 100644 --- a/src/content/docs/ko/guides/integrations-guide/preact.mdx +++ b/src/content/docs/ko/guides/integrations-guide/preact.mdx @@ -8,6 +8,7 @@ i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import Since from '~/components/Since.astro'; 이 **[Astro 통합][astro-integration]** 을 통해 [Preact](https://preactjs.com/) 컴포넌트에 대한 서버 측 렌더링 및 클라이언트 측 하이드레이션이 가능해졌습니다. @@ -150,6 +151,22 @@ React 컴포넌트 라이브러리를 가져올 때 `react` 및 `react-dom` 종 현재 `compat` 옵션은 코드를 ESM으로 내보내는 React 라이브러리에서만 작동합니다. 빌드 시 오류가 발생하면 `astro.config.mjs` 파일의 `vite.ssr.noExternal: ['the-react-library']`에 라이브러리를 추가해 보세요. ::: +### devtools + +

+ +`devtools: true`가 포함된 객체를 `preact()` 통합 구성에 전달하여 개발 모드에서 [Preact devtools](https://preactjs.github.io/preact-devtools/)를 활성화할 수 있습니다. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; +import preact from '@astrojs/preact'; + +export default defineConfig({ + // ... + integrations: [preact({ devtools: true })], +}); +``` + ## 옵션 ### 여러 JSX 프레임워크 결합 @@ -193,4 +210,4 @@ export default defineConfig({ [astro-integration]: /ko/guides/integrations-guide/ -[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용하기 +[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용 diff --git a/src/content/docs/ko/guides/integrations-guide/react.mdx b/src/content/docs/ko/guides/integrations-guide/react.mdx index 3625798539972..ee0280eb19d42 100644 --- a/src/content/docs/ko/guides/integrations-guide/react.mdx +++ b/src/content/docs/ko/guides/integrations-guide/react.mdx @@ -153,7 +153,7 @@ import ReactComponent from './ReactComponent'; 예를 들어 특정 요소를 다른 위치에 배치할 수 있도록 하나 이상의 하위 요소가 전달될 것으로 *예상*하는 라이브러리를 사용하는 경우 이것이 차단 요인이 될 수 있습니다. -실험적 플래그 `experimentalReactChildren`을 설정하여 Astro에게 항상 자식을 React vnode로 React에 전달하도록 지시할 수 있습니다. 여기에는 약간의 런타임 비용이 있지만 호환성에 도움이 될 수 있습니다. +실험적 플래그 `experimentalReactChildren`을 설정하여 React의 자식 요소로 항상 React 가상 DOM 노드를 전달하도록 Astro에게 지시할 수 있습니다. 이는 약간의 런타임 비용이 있지만 호환성에 도움이 될 수 있습니다. React 통합 구성에서 이 옵션을 활성화할 수 있습니다. @@ -173,4 +173,4 @@ export default defineConfig({ [astro-integration]: /ko/guides/integrations-guide/ -[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용하기 +[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용 diff --git a/src/content/docs/ko/guides/integrations-guide/solid-js.mdx b/src/content/docs/ko/guides/integrations-guide/solid-js.mdx index ff4de29612b55..10c13863110ec 100644 --- a/src/content/docs/ko/guides/integrations-guide/solid-js.mdx +++ b/src/content/docs/ko/guides/integrations-guide/solid-js.mdx @@ -6,7 +6,8 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int category: renderer i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import Since from '~/components/Since.astro'; 이 **[Astro 통합][astro-integration]** 을 통해 [SolidJS](https://www.solidjs.com/) 컴포넌트에 대한 서버 측 렌더링 및 클라이언트 측 하이드레이션이 가능해졌습니다. @@ -98,6 +99,42 @@ Astro에서 첫 번째 SolidJS 컴포넌트를 사용하려면 [UI 프레임워 * 💧 클라이언트 측 하이드레이션 옵션 * 🤝 프레임워크를 함께 혼합하고 중첩할 수 있는 기회 +## 구성 + +### devtools + +

+ +`devtools: true`가 포함된 객체를 `solid()` 통합 구성에 전달하고 프로젝트 종속성에 `solid-devtools`를 추가하여 개발 모드에서 [Solid DevTools](https://github.com/thetarnav/solid-devtools)를 활성화할 수 있습니다. + + + + ```sh + npm install solid-devtools + ``` + + + ```sh + pnpm add solid-devtools + ``` + + + ```sh + yarn add solid-devtools + ``` + + + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; +import solid from '@astrojs/solid'; + +export default defineConfig({ + // ... + integrations: [solid({ devtools: true })], +}); +``` + ## 옵션 ### 여러 JSX 프레임워크 결합 @@ -170,7 +207,7 @@ function CharacterName() { [astro-integration]: /ko/guides/integrations-guide/ -[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용하기 +[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용 [astro-client-only]: /ko/reference/directives-reference/#clientonly diff --git a/src/content/docs/ko/guides/integrations-guide/svelte.mdx b/src/content/docs/ko/guides/integrations-guide/svelte.mdx index c63c5463c4e88..dc950080df447 100644 --- a/src/content/docs/ko/guides/integrations-guide/svelte.mdx +++ b/src/content/docs/ko/guides/integrations-guide/svelte.mdx @@ -154,4 +154,4 @@ export default { [astro-integration]: /ko/guides/integrations-guide/ -[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용하기 +[astro-ui-frameworks]: /ko/guides/framework-components/#프레임워크-컴포넌트-사용 diff --git a/src/content/docs/ko/guides/integrations-guide/vercel.mdx b/src/content/docs/ko/guides/integrations-guide/vercel.mdx index 312ea2bab1165..29e2dccd1917c 100644 --- a/src/content/docs/ko/guides/integrations-guide/vercel.mdx +++ b/src/content/docs/ko/guides/integrations-guide/vercel.mdx @@ -361,6 +361,27 @@ export default defineConfig({ }); ``` +### `skewProtection` + +**타입:** `boolean`
+**사용 가능한 모드:** Serverless + + +이 속성을 사용하여 [Vercel Skew protection](https://vercel.com/docs/deployments/skew-protection) (Vercel Pro 및 Enterprise 계정에서 사용 가능)을 활성화합니다. + +```js title="astro.config.mjs" ins={8} +import { defineConfig } from 'astro/config'; +import vercel from '@astrojs/vercel/serverless'; + +export default defineConfig({ +// ... + output: "server", + adapter: vercel({ + skewProtection: true + }), +}); +``` + ### 함수 번들링 구성 Vercel 어댑터는 기본적으로 모든 경로를 단일 함수로 결합합니다. diff --git a/src/content/docs/ko/guides/integrations-guide/vue.mdx b/src/content/docs/ko/guides/integrations-guide/vue.mdx index 95199bd65b197..cfab6178a147f 100644 --- a/src/content/docs/ko/guides/integrations-guide/vue.mdx +++ b/src/content/docs/ko/guides/integrations-guide/vue.mdx @@ -6,7 +6,8 @@ githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/int category: renderer i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import Since from '~/components/Since.astro'; 이 **[Astro 통합](/ko/guides/integrations-guide/)**을 통해 [Vue 3](https://vuejs.org/) 컴포넌트에 대한 서버 측 랜더링 및 클라이언트 측 하이드레이션이 가능해집니다. @@ -92,7 +93,7 @@ export default defineConfig({ ## 시작하기 -Astro에서 첫 번째 Vue 컴포넌트를 사용하려면 [UI 프레임워크 문서](/ko/guides/framework-components/#프레임워크-컴포넌트-사용하기)로 이동합니다. 다음을 확인할 수 있습니다. +Astro에서 첫 번째 Vue 컴포넌트를 사용하려면 [UI 프레임워크 문서](/ko/guides/framework-components/#프레임워크-컴포넌트-사용)로 이동합니다. 다음을 확인할 수 있습니다. * 📦 프레임워크 컴포넌트가 로드되는 방식, * 💧 클라이언트 측 하이드레이션 옵션, @@ -190,3 +191,19 @@ export default defineConfig({ ], }); ``` + +### devtools + +

+ +`devtools: true`가 포함된 객체를 `vue()` 통합 구성에 전달하여 개발 모드에서 [Vue DevTools](https://devtools-next.vuejs.org/)를 활성화할 수 있습니다. + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; +import vue from '@astrojs/vue'; + +export default defineConfig({ + // ... + integrations: [vue({ devtools: true })], +}); +``` \ No newline at end of file diff --git a/src/content/docs/ko/guides/markdown-content.mdx b/src/content/docs/ko/guides/markdown-content.mdx index 99ee1200b6831..bc6eb62dbbefe 100644 --- a/src/content/docs/ko/guides/markdown-content.mdx +++ b/src/content/docs/ko/guides/markdown-content.mdx @@ -3,11 +3,11 @@ title: Markdown & MDX description: Astro에서 Markdown 또는 MDX를 사용하여 콘텐츠를 만드는 방법을 알아보세요. i18nReady: true --- - -import Since from '~/components/Since.astro' +import Since from '~/components/Since.astro'; import { FileTree } from '@astrojs/starlight/components'; -import RecipeLinks from '~/components/RecipeLinks.astro' -import ReadMore from '~/components/ReadMore.astro' +import RecipeLinks from "~/components/RecipeLinks.astro"; +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; [Markdown](https://daringfireball.net/projects/markdown/)은 일반적으로 블로그 게시물 및 문서와 같이 텍스트가 많은 콘텐츠를 작성하는 데 사용됩니다. Astro에는 title, description, tags와 같은 사용자 정의 메타데이터를 정의하기 위해 [프런트매터 YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f)도 포함할 수 있는 표준 Markdown 파일에 대한 기본 지원이 포함되어 있습니다. @@ -158,7 +158,7 @@ title: 'My first MDX post' ### MDX에서 컴포넌트 사용 -MDX 통합을 설치한 후 다른 Astro 컴포넌트에서 사용하는 것처럼 [Astro 컴포넌트](/ko/basics/astro-components/#컴포넌트-props)와 [UI 프레임워크 컴포넌트](/ko/guides/framework-components/#프레임워크-컴포넌트-사용하기)를 MDX (`.mdx`) 파일로 가져와 사용할 수 있습니다. +MDX 통합을 설치한 후 다른 Astro 컴포넌트에서 사용하는 것처럼 [Astro 컴포넌트](/ko/basics/astro-components/#컴포넌트-props)와 [UI 프레임워크 컴포넌트](/ko/guides/framework-components/#프레임워크-컴포넌트-사용)를 MDX (`.mdx`) 파일로 가져와 사용할 수 있습니다. 필요한 경우 UI 프레임워크 컴포넌트에 `client:directive`를 포함하는 것을 잊지 마세요! @@ -468,6 +468,7 @@ export default { [remark 또는 rehype 플러그인](#markdown-플러그인)을 사용하여 모든 Markdown 및 MDX 파일에 프런트매터 속성을 추가할 수 있습니다. + 1. 플러그인의 `file` 인수에서 `data.astro.frontmatter` 속성에 `customProperty`를 추가합니다. ```js title="example-remark-plugin.mjs" @@ -512,6 +513,7 @@ export default { ], }); ``` + 이제 모든 Markdown 또는 MDX 파일의 프런트매터에 `customProperty`가 있으므로 [Markdown을 가져올 때](#markdown-가져오기) [레이아웃의 `Astro.props.frontmatter` 속성](#프런트매터-layout)에서 사용할 수 있습니다. @@ -596,7 +598,7 @@ export default defineConfig({ light: 'github-light', dark: 'github-dark', }, - // 사용자 정의 언어 추가 + // 맞춤 언어 추가 // 참고: Shiki에는 .astro를 포함하여 수많은 언어가 내장되어 있습니다! // https://shiki.style/languages langs: [], @@ -646,9 +648,13 @@ export default defineConfig({ Prism을 사용하기로 선택한 경우 Astro는 대신 Prism의 CSS 클래스를 적용합니다. 구문 강조를 표시하려면 **자신만의 CSS 스타일시트를 가져와야 합니다**. + 1. 사용 가능한 [Prism 테마](https://github.com/PrismJS/prism-themes)에서 미리 만들어진 스타일시트를 선택합니다. + 2. 이 스타일시트를 [프로젝트의 `public/` 디렉터리](/ko/basics/project-structure/#public)에 추가하세요. + 3. `` 태그를 통해 [레이아웃 컴포넌트](/ko/basics/layouts/)에 있는 페이지의 ``에 이를 로드합니다. ([Prism 기본 사용법](https://prismjs.com/#basic-usage)을 참고하세요.) + 옵션 및 사용법을 알아보려면 [Prism에서 지원하는 언어 목록](https://prismjs.com/#supported-languages)을 방문하세요. diff --git a/src/content/docs/ko/guides/middleware.mdx b/src/content/docs/ko/guides/middleware.mdx index 3907f8426fc15..8453fab1c3ed0 100644 --- a/src/content/docs/ko/guides/middleware.mdx +++ b/src/content/docs/ko/guides/middleware.mdx @@ -4,6 +4,7 @@ description: Astro에서 미들웨어를 사용하는 방법을 알아보세요. i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; **미들웨어**를 사용하면 페이지나 엔드포인트가 렌더링될 때마다 요청과 응답을 가로채고 동작을 동적으로 추가할 수 있습니다. 이 렌더링은 사전 렌더링된 모든 페이지에 대해서는 빌드 시 발생하지만 요청 시 렌더링되는 페이지에 대해서는 경로가 요청될 때 발생합니다. @@ -11,15 +12,16 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; ## 사용 방법 + 1. `src/middleware.js|ts` 파일을 생성합니다. (또는 `src/middleware/index.js|ts` 파일을 생성할 수도 있습니다.) 2. 이 파일에서 [`context` 객체](#context-객체)와 `next()` 함수를 전달할 수 있는 [`onRequest()`](/ko/reference/api-reference/#onrequest) 함수를 내보냅니다. 이는 기본 내보내기가 아니어야 합니다. ```js title="src/middleware.js" - export function onRequest ({ locals, request }, next) { + export function onRequest (context, next) { // 요청의 응답 데이터 가로채기 // 선택적으로 `locals`의 속성을 수정합니다. - locals.title = "새로운 제목"; + context.locals.title = "새로운 제목"; // Response 객체 또는 `next()` 함수의 호출 결과를 반환합니다. return next(); @@ -35,6 +37,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

{data.title}

{data.property} 속성은 미들웨어로부터 전달되었습니다.

``` + ### `context` 객체 @@ -55,11 +58,11 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; `locals`에는 문자열, 숫자, 심지어 함수나 맵과 같은 모든 타입의 데이터를 저장할 수 있습니다. ```js title="src/middleware.js" -export function onRequest ({ locals, request }, next) { +export function onRequest (context, next) { // 요청의 응답 데이터 가로채기 // 선택적으로 `locals`의 속성을 수정합니다. - locals.user.name = "John Wick"; - locals.welcomeTitle = () => { + context.locals.user.name = "John Wick"; + context.locals.welcomeTitle = () => { return "반가워요 " + locals.user.name; }; diff --git a/src/content/docs/ko/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/ko/guides/migrate-to-astro/from-gatsby.mdx index d75719b2dee34..84718e6c5382d 100644 --- a/src/content/docs/ko/guides/migrate-to-astro/from-gatsby.mdx +++ b/src/content/docs/ko/guides/migrate-to-astro/from-gatsby.mdx @@ -6,9 +6,9 @@ stub: false framework: Gatsby i18nReady: true --- - -import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro' -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; 다음은 시작하는 데 도움이 되는 몇 가지 주요 개념과 마이그레이션 전략입니다. 계속 진행하려면 나머지 문서와 [Discord 커뮤니티](https://astro.build/chat)를 활용하세요! @@ -94,6 +94,7 @@ Gatsby 프로젝트를 Astro로 변환하는 동안 사용할 수 있도록 [Ast [Astro의 프로젝트 구조](/ko/basics/project-structure/)를 따르세요. + 1. Gatsby의 `public/` 폴더를 **삭제** 하세요. Gatsby는 빌드 출력을 위해 `public/` 디렉터리를 사용하므로 이 폴더를 안전하게 삭제할 수 있습니다. 더 이상 Gatsby 사이트의 빌드 버전이 필요하지 않습니다. (Astro는 기본적으로 빌드 출력에 `dist/`를 사용합니다.) @@ -104,9 +105,10 @@ Gatsby 프로젝트를 Astro로 변환하는 동안 사용할 수 있도록 [Ast 3. [Astro의 프로젝트 구조](/ko/basics/project-structure/)에 따라 사이트를 다시 빌드할 때 필요에 따라 Gatsby의 다른 파일 및 폴더 (예: `components`, `pages` 등)를 Astro `src/` 폴더에 **복사하거나 이동** 하세요. - Astro의 `src/pages/` 폴더는 `.astro`, `.md`, `.mdx` 파일에서 사이트의 페이지와 게시물을 생성하기 위한 파일 기반 라우팅에 사용되는 특수 폴더입니다. Astro, Markdown, MDX 파일에 대한 라우팅 동작을 구성할 필요가 없습니다. + Astro의 `src/pages/` 폴더는 `.astro`, `.md`, `.mdx` 파일에서 사이트의 페이지와 게시물을 생성하기 위한 파일 기반 라우팅에 사용되는 특수 폴더입니다. Astro, Markdown, MDX 파일에 대한 라우팅 동작을 구성할 필요가 없습니다. - 다른 모든 폴더는 선택 사항이며 `src/` 폴더의 내용을 원하는 대로 구성할 수 있습니다. Astro 프로젝트의 다른 일반적인 폴더에는 `src/layouts/`, `src/components`, `src/styles`, `src/scripts`가 있습니다. + 다른 모든 폴더는 선택 사항이며 `src/` 폴더의 내용을 원하는 대로 구성할 수 있습니다. Astro 프로젝트의 다른 일반적인 폴더에는 `src/layouts/`, `src/components`, `src/styles`, `src/scripts`가 있습니다. + ### 팁: JSX 파일을 `.astro` 파일로 변환 @@ -114,15 +116,15 @@ Gatsby 프로젝트를 Astro로 변환하는 동안 사용할 수 있도록 [Ast 1. 기존 Gatsby 컴포넌트 함수의 `return()`만 HTML 템플릿으로 사용하세요. -1. [Gatsby 또는 JSX 구문을 Astro 구문으로](#참조-astro-구문으로-변환) 또는 HTML 웹 표준으로 변경합니다. 예를 들어 여기에는 ``, `{children}`, `className`이 포함됩니다. +2. [Gatsby 또는 JSX 구문을 Astro 구문으로](#참조-astro-구문으로-변환) 또는 HTML 웹 표준으로 변경합니다. 예를 들어 여기에는 ``, `{children}`, `className`이 포함됩니다. -1. import 구문을 포함하여 필요한 JavaScript를 ["코드 펜스" (`---`)](/ko/basics/astro-components/#컴포넌트-스크립트)로 이동합니다. 참고: [조건부 콘텐츠 렌더링](/ko/basics/astro-syntax/#동적-html)을 위한 JavaScript는 Astro에서 직접 HTML 템플릿 내에 작성되는 경우가 많습니다. +3. import 구문을 포함하여 필요한 JavaScript를 ["코드 펜스" (`---`)](/ko/basics/astro-components/#컴포넌트-스크립트)로 이동합니다. 참고: [조건부 콘텐츠 렌더링](/ko/basics/astro-syntax/#동적-html)을 위한 JavaScript는 Astro에서 직접 HTML 템플릿 내에 작성되는 경우가 많습니다. 4. 이전에 Gatsby 함수에 전달된 추가 props에 액세스하려면 [`Astro.props`](/ko/reference/api-reference/#astroprops)를 사용하세요. -4. 가져온 컴포넌트도 Astro로 변환해야 하는지 여부를 결정합니다. 공식 React 통합이 설치되면 [Astro 파일의 기존 React 컴포넌트를 사용](/ko/guides/framework-components/)할 수 있습니다. 그러나 특히 대화형이 필요하지 않은 경우 `.astro` 컴포넌트로 변환할 수 있습니다! +5. 가져온 컴포넌트도 Astro로 변환해야 하는지 여부를 결정합니다. 공식 React 통합이 설치되면 [Astro 파일의 기존 React 컴포넌트를 사용](/ko/guides/framework-components/)할 수 있습니다. 그러나 특히 대화형이 필요하지 않은 경우 `.astro` 컴포넌트로 변환할 수 있습니다! -4. GraphQL 쿼리를 제거합니다. 대신 import 및 [`Astro.glob()`](/ko/reference/api-reference/#astroglob) 구문을 사용하여 로컬 파일을 쿼리하세요. +6. GraphQL 쿼리를 제거합니다. 대신 import 및 [`Astro.glob()`](/ko/reference/api-reference/#astroglob) 구문을 사용하여 로컬 파일을 쿼리하세요. [단계별 변환된 Gatsby 블로그 시작 템플릿의 예시](#안내-예시-gatsby-layout-변환)를 참조하세요. @@ -393,6 +395,7 @@ export const pageQuery = graphql` 이 페이지 레이아웃은 홈 페이지를 방문할 때 하나의 헤더를 표시하고 다른 모든 페이지의 경우 홈으로 돌아가는 링크가 있는 다른 헤더를 표시합니다. + 1. return() JSX를 식별합니다. ```jsx {21-29} title="layout.js" @@ -559,6 +562,7 @@ export const pageQuery = graphql` ``` About 페이지를 방문할 때만 "Home" 링크가 표시됩니다. + ## 커뮤니티 자료 diff --git a/src/content/docs/ko/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/ko/guides/migrate-to-astro/from-nextjs.mdx index fdf5ccbeb15da..38930016eb995 100644 --- a/src/content/docs/ko/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/ko/guides/migrate-to-astro/from-nextjs.mdx @@ -6,9 +6,9 @@ stub: false framework: Next.js i18nReady: true --- - -import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro' -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; 다음은 시작하는 데 도움이 되는 몇 가지 주요 개념과 마이그레이션 전략입니다. 계속 진행하려면 나머지 문서와 [Discord 커뮤니티](https://astro.build/chat)를 활용하세요! @@ -91,6 +91,7 @@ Next 프로젝트를 Astro로 변환하는 동안 사용할 수 있도록 [Astro [Astro의 프로젝트 구조](/ko/basics/project-structure/)를 따르세요. + 1. Next의 `public/` 폴더를 그대로 **유지**하세요. Astro는 Next와 마찬가지로 정적 자산에 `public/` 디렉터리를 사용합니다. 이 폴더나 그 내용에는 변경이 필요하지 않습니다. @@ -98,6 +99,7 @@ Next 프로젝트를 Astro로 변환하는 동안 사용할 수 있도록 [Astro 2. [Astro의 프로젝트 구조](/ko/basics/project-structure/)에 따라 사이트를 재빌드할 때 Next의 다른 파일과 폴더 (예: `pages`, `styles` 등)를 Astro의 `src/` 폴더에 **복사하거나 이동**하세요. Next와 마찬가지로 Astro의 `src/pages/` 폴더는 파일 기반 라우팅에 사용되는 특수 폴더입니다. 다른 모든 폴더는 선택 사항이며 `src/` 폴더의 내용을 원하는 대로 구성할 수 있습니다. Astro 프로젝트의 다른 일반적인 폴더에는 `src/layouts/`, `src/components`, `src/styles`, `src/scripts`가 있습니다. + ### Astro 구성 파일 @@ -111,13 +113,13 @@ Astro에는 프로젝트 루트에 [`astro.config.mjs`](/ko/guides/configuring-a 2. [Next 또는 JSX 구문을 Astro로](#참조-nextjs-구문을-astro로-변환) 또는 HTML 웹 표준으로 변경합니다. 예를 들어 여기에는 ``, ` ``` -`with` 옵션을 전달하여 프리페치 우선순위를 추가로 구성할 수 있습니다. - -```js -// 우선순위가 더 높은 `fetch()`를 사용하여 프리페치합니다. -prefetch('/about', { with: 'fetch' }); - -// 우선순위가 낮은 ``를 사용하여 프리페치 -// 그리고, 브라우저에 의해 수동으로 예약됩니다. (기본) -prefetch('/about', { with: 'link' }); -``` - -`prefetch()` API에는 동일한 [데이터 절약 모드](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData)와 [느린 연결](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType) 감지 기능이 포함되어 있어, 필요할 때만 프리페치를 수행합니다. +`prefetch()` API에는 동일한 [데이터 절약 모드](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData)와 [느린 연결](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType) 감지 기능이 포함되어 있기 때문에 필요할 때만 프리페치를 수행합니다. 느린 연결 감지를 무시하려면 `ignoreSlowConnection` 옵션을 사용하세요: @@ -154,6 +142,38 @@ export default defineConfig({ }); ``` +## 브라우저 지원 + +Astro의 프리페칭은 브라우저에서 지원하는 경우 [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prefetch)를 사용하며, 그렇지 않으면 [`fetch()` API](https://developer.mozilla.org/ko/docs/Web/API/Fetch_API)를 대신 사용합니다. + +가장 일반적인 브라우저들은 미묘한 차이를 제외하고 Astro의 프리패치를 모두 지원합니다. + +### Chrome + +Chrome은 ``를 지원합니다. 프리페치는 의도한 대로 작동합니다. + +### Firefox + +Firefox는 ``를 지원하지만 오류를 표시하거나 완전히 실패할 수 있습니다. + + - 명시적인 캐시 헤더 (예: [`Cache-Control`](https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Cache-Control) 또는 [`Expires`](https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Expires))가 없는 경우, 프리패치 시 `NS_BINDING_ABORTED` 오류가 발생합니다. +- 오류가 발생하더라도 응답에 올바른 [`ETag`](https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/ETag) 헤더가 있으면 탐색 시 재사용됩니다. +- 그렇지 않은 경우 다른 캐시 헤더 없이 오류가 발생하면 프리페치가 작동하지 않습니다. + +### Safari + +Safari는 ``를 지원하지 않기 때문에 캐시 헤더 (예: [`Cache-Control`](https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Cache-Control), [`Expires`](https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Expires), [`ETag`](https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/ETag))가 필요한 `fetch()` API로 대체됩니다. 그렇지 않으면 프리페치가 작동하지 않습니다. + +**특이한 경우:** `ETag` 헤더는 개인정보 보호 브라우징 윈도우에서 작동하지 않습니다. + +### 권장사항 + +모든 브라우저를 가장 효과적으로 지원하려면 페이지에 적절한 캐시 헤더가 있는지 확인하세요. + +정적 또는 사전 렌더링된 페이지의 경우 `ETag` 헤더는 배포 플랫폼에 의해 자동으로 설정되는 경우가 많으며 즉시 작동할 것으로 예상됩니다. + +동적 및 서버 측 렌더링된 페이지의 경우 페이지 콘텐츠에 따라 적절한 캐시 헤더를 직접 설정하세요. 자세한 내용은 [HTTP 캐싱에 대한 MDN 문서](https://developer.mozilla.org/ko/docs/Web/HTTP/Caching)를 참조하세요. + ## `@astrojs/prefetch`에서 마이그레이션 `@astrojs/prefetch` 통합은 v3.5.0에서 더 이상 사용되지 않으며 결국 완전히 제거될 예정입니다. 이 통합을 대체하는 Astro의 내장 프리페칭으로 마이그레이션하려면 다음 지침을 따르세요. diff --git a/src/content/docs/ko/guides/rss.mdx b/src/content/docs/ko/guides/rss.mdx index c474b32500674..78c393533af84 100644 --- a/src/content/docs/ko/guides/rss.mdx +++ b/src/content/docs/ko/guides/rss.mdx @@ -4,9 +4,9 @@ description: 사용자가 콘텐츠를 구독할 수 있도록 Astro 사이트 i18nReady: true type: recipe --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' -import Since from '~/components/Since.astro' - +import Since from '~/components/Since.astro'; +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; Astro는 블로그 및 기타 콘텐츠 웹사이트를 위한 빠른 자동 RSS 피드 생성을 지원합니다. RSS 피드는 사용자가 콘텐츠를 쉽게 구독할 수 있는 방법을 제공합니다. @@ -14,29 +14,30 @@ Astro는 블로그 및 기타 콘텐츠 웹사이트를 위한 빠른 자동 RSS 패키지 [`@astrojs/rss`](https://github.com/withastro/astro/tree/main/packages/astro-rss)는 [API endpoints](/ko/guides/endpoints/#정적-파일-엔드포인트)를 사용하여 RSS 피드를 생성하기 위한 헬퍼를 제공합니다. 이렇게 하면 [SSR adapter](/ko/guides/server-side-rendering/#어댑터-추가)를 사용할 때 정적 빌드 및 온디맨드 생성을 모두 사용할 수 있습니다. + 1. 선호하는 패키지 관리자를 사용하여 `@astrojs/rss`를 설치하세요. - - - ```shell - npm install @astrojs/rss - ``` - - - ```shell - pnpm add @astrojs/rss - ``` - - - ```shell - yarn add @astrojs/rss - ``` - - - -:::tip -프로젝트의 `astro.config`에 `site`(/ko/reference/configuration-reference/#site)를 설정했는지 확인합니다. 이 설정은 RSS 글에 대한 링크를 생성하는 데 사용됩니다. -::: + + + ```shell + npm install @astrojs/rss + ``` + + + ```shell + pnpm add @astrojs/rss + ``` + + + ```shell + yarn add @astrojs/rss + ``` + + + + :::tip + 프로젝트의 `astro.config`에 `site`(/ko/reference/configuration-reference/#site)를 설정했는지 확인합니다. 이 설정은 RSS 글에 대한 링크를 생성하는 데 사용됩니다. + ::: 2. `src/pages/`에 원하는 이름과 확장자 `.xml.js`를 사용하여 피드의 출력 URL로 사용할 파일을 만듭니다. 일반적인 RSS 피드의 URL 이름은 `feed.xml` 또는 `rss.xml`입니다. @@ -44,26 +45,27 @@ Astro는 블로그 및 기타 콘텐츠 웹사이트를 위한 빠른 자동 RSS 3. `rss()` 헬퍼를 `@astrojs/rss` 패키지에서 `.xml.js` 파일로 가져와서 다음 매개변수를 사용하여 반환하는 함수를 내보냅니다. -```js title="src/pages/rss.xml.js" -import rss from '@astrojs/rss'; - -export function GET(context) { - return rss({ - // 출력 xml에서의 `` 필드 - title: 'Buzz’s Blog', - // 출력 xml에서의 `<description>` 필드 - description: 'A humble Astronaut’s guide to the stars', - // 엔드포인트 컨텍스트에서 프로젝트 "site"를 가져옵니다. - // https://docs.astro.build/ko/reference/api-reference/#contextsite - site: context.site, - // 출력 xml에서의 `<item>` 배열 - // 콘텐츠 컬렉션 및 glob 가져오기를 사용한 예제는 "항목 생성" 섹션을 참조하세요. - items: [], - // (선택 사항) 사용자 지정 XML을 삽입할 수도 있습니다. - customData: `<language>en-us</language>`, - }); -} -``` + ```js title="src/pages/rss.xml.js" + import rss from '@astrojs/rss'; + + export function GET(context) { + return rss({ + // 출력 xml에서의 `<title>` 필드 + title: 'Buzz’s Blog', + // 출력 xml에서의 `<description>` 필드 + description: 'A humble Astronaut’s guide to the stars', + // 엔드포인트 컨텍스트에서 프로젝트 "site"를 가져옵니다. + // https://docs.astro.build/ko/reference/api-reference/#contextsite + site: context.site, + // 출력 xml에서의 `<item>` 배열 + // 콘텐츠 컬렉션 및 glob 가져오기를 사용한 예제는 "항목 생성" 섹션을 참조하세요. + items: [], + // (선택 사항) 사용자 지정 XML을 삽입할 수도 있습니다. + customData: `<language>en-us</language>`, + }); + } + ``` +</Steps> ## `items` 필드 생성 @@ -276,7 +278,6 @@ rss({ 브라우저에서 `your-domain.com/rss.xml`에서 피드를 방문하여 각 글에 대한 데이터를 볼 수 있는지 확인한 후 이제 [웹사이트에서 피드를 홍보할 수 있습니다](https://medium.com/samsung-internet-dev/add-rss-feeds-to-your-website-to-keep-your-core-readers-engaged-3179dca9c91e#:~:text=com/~deno%2Drss-,Advertising%20your%20RSS%20feed,-Now%20you%20have). 사이트에 표준 RSS 아이콘을 추가하면 독자가 자신의 피드 리더에서 내 글을 구독할 수 있음을 알 수 있습니다. - ## 자료 -- [RSS Feeds](https://aboutfeeds.com/) +- [RSS Feeds](https://aboutfeeds.com/) \ No newline at end of file diff --git a/src/content/docs/ko/guides/server-side-rendering.mdx b/src/content/docs/ko/guides/server-side-rendering.mdx index e3a85161b04e7..8f26279f0e261 100644 --- a/src/content/docs/ko/guides/server-side-rendering.mdx +++ b/src/content/docs/ko/guides/server-side-rendering.mdx @@ -3,6 +3,7 @@ title: 주문형 렌더링 어댑터 i18nReady: true --- import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; import RecipeLinks from '~/components/RecipeLinks.astro'; import IntegrationsNav from '~/components/IntegrationsNav.astro'; @@ -76,6 +77,7 @@ Astro의 두 주문형 렌더링 출력 모드 (`server` 및 `hybrid`)를 사용 예를 들어 Vercel 어댑터를 수동으로 설치하려면 다음을 수행하세요. +<Steps> 1. 원하는 패키지 관리자를 사용하여 프로젝트 종속성에 어댑터를 설치합니다. <PackageManagerTabs> @@ -110,6 +112,7 @@ Astro의 두 주문형 렌더링 출력 모드 (`server` 및 `hybrid`)를 사용 ``` 어댑터마다 구성 설정이 다를 수도 있습니다. 각 어댑터의 문서를 읽고 `astro.config.mjs` 파일에서 선택한 어댑터에 필요한 구성 옵션을 적용하세요. +</Steps> ### `server` 또는 `hybrid` 구성 diff --git a/src/content/docs/ko/guides/testing.mdx b/src/content/docs/ko/guides/testing.mdx index 17df772eac6e5..f2942c6349605 100644 --- a/src/content/docs/ko/guides/testing.mdx +++ b/src/content/docs/ko/guides/testing.mdx @@ -3,8 +3,8 @@ title: 테스팅 description: Astro의 테스팅에 대한 소개 i18nReady: true --- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; 테스팅은 제대로 작동하는 Astro 코드를 작성하고 유지하는 데 도움이 됩니다. Astro는 널리 사용되는 많은 단위 테스트, 컴포넌트 테스트, end-to-end 테스트 도구를 지원합니다. 여기에는 Jest, Mocha, Jasmine, [Cypress](https://cypress.io), [Playwright](https://playwright.dev)가 포함됩니다. 또한 여러분이 사용하는 UI 프레임워크 컴포넌트를 테스트하기 위해 React Testing Library와 같은 특정 프레임워크에 종속된 테스팅 라이브러리를 설치할 수도 있습니다. @@ -28,6 +28,19 @@ export default getViteConfig({ }); ``` +기본적으로 `getViteConfig()`는 프로젝트 Astro 구성 파일을 로드하고 이를 테스트 환경에 적용하려고 시도합니다. +Astro 4.8 버전에서는 테스트에 적용된 Astro 구성을 사용자 정의해야 하기 위해 `getViteConfig()`에 두 번째 인수를 전달해야 합니다. + +```js +export default getViteConfig( + { test: { /* Vitest 구성 옵션 */ } }, + { + site: 'https://example.com/', + trailingSlash: 'always', + }, +); +``` + GitHub에서 [Astro + Vitest 시작 템플릿](https://github.com/withastro/astro/tree/latest/examples/with-vitest)을 확인하세요. ## Cypress @@ -74,6 +87,7 @@ export default defineConfig({ ### 첫 Cypress 테스트 생성 +<Steps> 1. 테스트할 페이지를 선택하세요. 이 예에서는 아래 `index.astro` 페이지를 테스트합니다. ```html title="src/pages/index.astro" @@ -104,9 +118,10 @@ export default defineConfig({ }); ``` -:::tip[`baseUrl` 설정] -`cy.visit("http://localhost:4321/")` 대신 더 짧은 URL인 `cy.visit("/")`를 사용하기 위해 `cypress.config.js` 구성 파일에 [`"baseUrl": "http://localhost:4321"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress)를 설정할 수 있습니다. -::: + :::tip[`baseUrl` 설정] + `cy.visit("http://localhost:4321/")` 대신 더 짧은 URL인 `cy.visit("/")`를 사용하기 위해 `cypress.config.js` 구성 파일에 [`"baseUrl": "http://localhost:4321"`](https://docs.cypress.io/guides/end-to-end-testing/testing-your-app#Step-3-Configure-Cypress)를 설정할 수 있습니다. + ::: +</Steps> ### Cypress 테스트 실행 @@ -133,7 +148,6 @@ Cypress 앱이 시작되면 **E2E Testing**을 선택하고 테스트에 사용 ```shell title="Output from npx cypress run" Running: index.cy.js (1 of 1) - ✓ titles are correct (107ms) 1 passing (1s) @@ -187,6 +201,7 @@ Nightwatch.js는 모든 주요 브라우저와 이에 상응하는 모바일 브 ### 첫 번째 Nightwatch 테스트 만들기 +<Steps> 1. 테스트할 페이지를 선택하세요. 이 예시에서는 아래의 `index.astro` 페이지를 테스트합니다. ```html title="src/pages/index.astro" @@ -218,6 +233,7 @@ Nightwatch.js는 모든 주요 브라우저와 이에 상응하는 모바일 브 :::tip[`baseUrl` 설정] 더 편리한 URL을 사용하기 위해 `browser.navigateTo("http://localhost:4321/")` 대신 `browser.navigateTo("/")`를 사용하도록 `nightwatch.conf.js` 구성 파일에서 [`"baseURL": "http://localhost:4321"`](https://nightwatchjs.org/guide/reference/settings.html#setting-the-baseurl-property)을 설정할 수 있습니다. ::: +</Steps> ### NightwatchJS 테스트 실행 @@ -282,6 +298,7 @@ Playwright는 최신 웹 앱을 위한 end-to-end 테스팅 프레임워크입 ### 첫 Playwright 테스트 생성 +<Steps> 1. 테스트할 페이지를 선택하세요. 이 예에서는 아래 `index.astro` 페이지를 테스트합니다. ```html title="src/pages/index.astro" @@ -299,7 +316,7 @@ Playwright는 최신 웹 앱을 위한 end-to-end 테스팅 프레임워크입 </html> ``` -1. 새 `src/test/` 디렉터리를 생성하고 다음 테스트 파일을 추가하세요. 페이지의 메타 정보가 정확한지 확인하기 위해 다음 테스트 코드를 복사하여 테스트 파일에서 사용하세요. 테스트 중인 페이지와 일치하도록 페이지의 `<title>`의 값을 업데이트하세요. +2. 새 `src/test/` 디렉터리를 생성하고 다음 테스트 파일을 추가하세요. 페이지의 메타 정보가 정확한지 확인하기 위해 다음 테스트 코드를 복사하여 테스트 파일에서 사용하세요. 테스트 중인 페이지와 일치하도록 페이지의 `<title>`의 값을 업데이트하세요. ```jsx title="src/test/index.spec.ts" "Astro는 놀랍습니다!" import { test, expect } from '@playwright/test'; @@ -311,25 +328,28 @@ Playwright는 최신 웹 앱을 위한 end-to-end 테스팅 프레임워크입 }); ``` -:::tip[`baseUrl` 설정] -`page.goto("http://localhost:4321/")` 대신 더 편리한 URL인 `page.goto("/")`를 사용하기 위해 `playwright.config.ts` 구성 파일에서 [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)을 설정할 수 있습니다. -::: + :::tip[`baseUrl` 설정] + `page.goto("http://localhost:4321/")` 대신 더 편리한 URL인 `page.goto("/")`를 사용하기 위해 `playwright.config.ts` 구성 파일에서 [`"baseURL": "http://localhost:4321"`](https://playwright.dev/docs/api/class-testoptions#test-options-base-url)을 설정할 수 있습니다. + ::: +</Steps> ### Playwright 테스트 실행 단일 테스트 및 여러 테스트를 한번에 실행할 수 있으며, 단일 브라우저 또는 여러 브라우저에서 테스트 할 수도 있습니다. 기본적으로 테스트 결과는 터미널에 표시됩니다. 선택적으로 HTML Test Reporter를 실행하여 전체 보고서를 확인하고 테스트 결과를 필터링할 수도 있습니다. +<Steps> 1. 명령줄을 사용하여 이전 예시 코드를 테스트하려면 `test` 명령을 사용하세요. 하나의 파일에 대해 테스트하기 위해 파일 이름을 포함시킬 수도 있습니다. ```sh npx playwright test index.spec.ts ``` -1. 다음 명령을 사용하여 전체 HTML 테스트 보고서를 열어 확인할 수 있습니다. +2. 다음 명령을 사용하여 전체 HTML 테스트 보고서를 열어 확인할 수 있습니다. ```sh npx playwright show-report ``` +</Steps> :::tip 실제 배포된 사이트와 더욱 유사한 프로덕션 코드를 테스트하세요. @@ -341,8 +361,10 @@ Playwright는 최신 웹 앱을 위한 end-to-end 테스팅 프레임워크입 다음은 npm을 사용할 때 필요한 구성 및 명령의 예입니다. +<Steps> 1. 프로젝트의 `package.json` 파일에 `"test:e2e": "playwright test"`와 같은 테스트 스크립트를 추가합니다. -1. `playwright.config.ts`에서 `webServer` 객체를 추가하고 command 속성의 값을 `npm run preview`로 업데이트합니다. + +2. `playwright.config.ts`에서 `webServer` 객체를 추가하고 command 속성의 값을 `npm run preview`로 업데이트합니다. ```js title="playwright.config.ts" ins={4-9} "npm run preview" import { defineConfig } from '@playwright/test'; @@ -360,7 +382,8 @@ Playwright는 최신 웹 앱을 위한 end-to-end 테스팅 프레임워크입 }); ``` -1. `npm run build`를 실행한 다음 `npm run test:e2e`를 실행하여 Playwright 테스트를 시작합니다. +3. `npm run build`를 실행한 다음 `npm run test:e2e`를 실행하여 Playwright 테스트를 시작합니다. +</Steps> Playwright에 대한 자세한 내용은 아래 링크에서 확인할 수 있습니다. diff --git a/src/content/docs/ko/guides/troubleshooting.mdx b/src/content/docs/ko/guides/troubleshooting.mdx index ef248af8b82fa..c2aa2d3d238a6 100644 --- a/src/content/docs/ko/guides/troubleshooting.mdx +++ b/src/content/docs/ko/guides/troubleshooting.mdx @@ -127,7 +127,7 @@ Astro 컴포넌트는 서버에서 실행되므로 프런트매터에서 이러 컴포넌트가 렌더링 중이지만 (위 참조) 사용자 상호 작용에 응답하지 않는 경우 컴포넌트를 수화하기 위한 [`client:*` 지시어](/ko/reference/directives-reference/#클라이언트-지시어)가 누락되었을 수 있습니다. -기본적으로 [UI 프레임워크 컴포넌트는 클라이언트에서 수화되지 않습니다](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션하기). `client:*` 지시어가 제공되지 않으면 해당 HTML이 JavaScript 없이 페이지에 렌더링됩니다. +기본적으로 [UI 프레임워크 컴포넌트는 클라이언트에서 수화되지 않습니다](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션). `client:*` 지시어가 제공되지 않으면 해당 HTML이 JavaScript 없이 페이지에 렌더링됩니다. :::tip [Astro 컴포넌트](/ko/basics/astro-components/)는 클라이언트 측 런타임이 없는 HTML 전용 템플릿 컴포넌트입니다. 그러나 Astro 컴포넌트 템플릿에서 `<script>` 태그를 사용하여 전역 범위에서 실행되는 브라우저에 JavaScript를 보낼 수 있습니다. diff --git a/src/content/docs/ko/guides/upgrade-to/v2.mdx b/src/content/docs/ko/guides/upgrade-to/v2.mdx index 65621e92ed04b..ac2e79a5422fa 100644 --- a/src/content/docs/ko/guides/upgrade-to/v2.mdx +++ b/src/content/docs/ko/guides/upgrade-to/v2.mdx @@ -3,9 +3,9 @@ title: Astro v2로 업그레이드하기 description: Astro v2로 업그레이트하는 방법을 알려드립니다. i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import { FileTree } from '@astrojs/starlight/components'; - +import { Steps } from '@astrojs/starlight/components'; 이 가이드는 Astro v1에서 Astro v2로 마이그레이션하는 걸 도울 것입니다. @@ -61,6 +61,7 @@ Astro v2.0은 Node.js의 최신 기능을 사용할 수 있게 Node.js 14에 대 개발 환경과 배포 환경 모두 **Node.js `16.12.0`** 이상을 사용하고 있는지 확인합니다. +<Steps> 1. 다음 명령어를 사용하여 Node.js 버전을 확인합니다 ```sh @@ -73,7 +74,7 @@ Astro v2.0은 Node.js의 최신 기능을 사용할 수 있게 Node.js 14에 대 2. [Deployments environment](/ko/guides/deploy/)의 문서를 확인하여 Node.js 16을 지원하는지 확인하세요. 대시보드 구성 설정 또는 `.nvmrc` 파일에서 Astro 프로젝트의 Node.js 버젼을 `16.12.0`으로 지정할 수 있습니다. - +</Steps> ### 변경됨: `src/content/` 예약 폴더 @@ -416,5 +417,4 @@ export default defineConfig({ ## 발견된 이슈 -현재로선 발견된 이슈가 없습니다. - +현재로선 발견된 이슈가 없습니다. \ No newline at end of file diff --git a/src/content/docs/ko/recipes/add-yaml-support.mdx b/src/content/docs/ko/recipes/add-yaml-support.mdx index 0a0eb691b476d..64c45bc67e0ed 100644 --- a/src/content/docs/ko/recipes/add-yaml-support.mdx +++ b/src/content/docs/ko/recipes/add-yaml-support.mdx @@ -4,13 +4,14 @@ description: 프로젝트에 Rollup 플러그인을 추가하여 YAML 데이터 i18nReady: true type: recipe --- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; Astro는 Vite를 기반으로 구축되었으며 Vite 및 Rollup 플러그인을 모두 지원합니다. 이 레시피는 Rollup 플러그인을 사용하여 Astro에서 YAML (`.yml`) 파일을 가져오는 기능을 추가합니다. ## 레시피 +<Steps> 1. `@rollup/plugin-yaml`을 설치합니다. <PackageManagerTabs> @@ -62,3 +63,4 @@ Astro는 Vite를 기반으로 구축되었으며 Vite 및 Rollup 플러그인을 ``` 이렇게 하면 편집기에서 YAML 데이터에 대한 타입 힌트를 제공할 수 있습니다. ::: +</Steps> \ No newline at end of file diff --git a/src/content/docs/ko/recipes/build-custom-img-component.mdx b/src/content/docs/ko/recipes/build-custom-img-component.mdx index 2ed1be312f04f..95cd358829ed5 100644 --- a/src/content/docs/ko/recipes/build-custom-img-component.mdx +++ b/src/content/docs/ko/recipes/build-custom-img-component.mdx @@ -4,6 +4,7 @@ description: getImage 함수를 사용하여 미디어 쿼리를 지원하는 i18nReady: true type: recipe --- +import { Steps } from '@astrojs/starlight/components'; Astro는 이미지를 표시하고 최적화하는 데 사용할 수 있는 두 가지 내장 컴포넌트를 제공합니다. `<Picture>` 컴포넌트를 사용하면 반응형 이미지를 표시하고 다양한 형식과 크기로 작업할 수 있습니다. `<Image>` 컴포넌트는 이미지를 최적화하고 다양한 형식과 품질 속성을 전달할 수 있도록 해줍니다. @@ -13,6 +14,7 @@ Astro는 이미지를 표시하고 최적화하는 데 사용할 수 있는 두 ## 레시피 +<Steps> 1. 새로운 Astro 컴포넌트를 생성하고 `getImage()` 함수를 가져옵니다. ```astro title="src/components/MyCustomImageComponent.astro" @@ -126,3 +128,4 @@ Astro는 이미지를 표시하고 최적화하는 데 사용할 수 있는 두 /> ``` +</Steps> \ No newline at end of file diff --git a/src/content/docs/ko/recipes/build-forms-api.mdx b/src/content/docs/ko/recipes/build-forms-api.mdx index c04fd971345e4..f8013e75620ac 100644 --- a/src/content/docs/ko/recipes/build-forms-api.mdx +++ b/src/content/docs/ko/recipes/build-forms-api.mdx @@ -4,9 +4,9 @@ description: JavaScript를 사용하여 양식 제출을 API 경로로 보내는 i18nReady: true type: recipe --- - +import { Steps } from '@astrojs/starlight/components'; import UIFrameworkTabs from "~/components/tabs/UIFrameworkTabs.astro"; -import PackageManagerTabs from "~/components/tabs/PackageManagerTabs.astro" +import PackageManagerTabs from "~/components/tabs/PackageManagerTabs.astro"; HTML 양식을 사용하면 브라우저가 페이지를 새로 고치거나 새 페이지로 이동합니다. 대신 양식 데이터를 API 엔드포인트로 보내려면 JavaScript를 사용하여 양식 제출을 가로채야 합니다. @@ -19,6 +19,7 @@ HTML 양식을 사용하면 브라우저가 페이지를 새로 고치거나 새 ## 레시피 +<Steps> 1. 양식 데이터를 수신할 `/api/feedback`에 `POST` API 엔드포인트를 생성합니다. 처리하려면 `request.formData()`를 사용하세요. 사용하기 전에 양식 값의 유효성을 검사하세요. 이 예시에서는 메시지와 함께 JSON 객체를 클라이언트에 다시 보냅니다. @@ -425,6 +426,7 @@ HTML 양식을 사용하면 브라우저가 페이지를 새로 고치거나 새 ``` </Fragment> </UIFrameworkTabs> +</Steps> {/* ## Extension: Use Zod to validate your form diff --git a/src/content/docs/ko/recipes/build-forms.mdx b/src/content/docs/ko/recipes/build-forms.mdx index 30ba9608f19ff..3b07efe2610f8 100644 --- a/src/content/docs/ko/recipes/build-forms.mdx +++ b/src/content/docs/ko/recipes/build-forms.mdx @@ -4,6 +4,7 @@ description: HTML 양식을 작성하고 프런트매터에서 제출을 처리 i18nReady: true type: recipe --- +import { Steps } from '@astrojs/starlight/components'; SSR 모드에서 Astro 페이지는 양식을 표시하고 처리할 수 있습니다. 이 레시피에서는 표준 HTML 양식을 사용하여 서버에 데이터를 제출합니다. 프런트매터 스크립트는 클라이언트에 JavaScript를 보내지 않고 서버의 데이터를 처리합니다. @@ -13,6 +14,7 @@ SSR 모드에서 Astro 페이지는 양식을 표시하고 처리할 수 있습 ## 레시피 +<Steps> 1. 양식과 처리 코드를 포함할 `.astro` 페이지를 생성하거나 식별합니다. 예를 들어 등록 페이지를 추가할 수 있습니다. ```astro title="src/pages/register.astro" @@ -139,7 +141,7 @@ SSR 모드에서 Astro 페이지는 양식을 표시하고 처리할 수 있습 </form> ``` -5. 서버에서 양식 데이터의 유효성을 검사합니다. 여기에는 엔드포인트에 대한 악의적인 제출을 방지하고 양식 유효성 검사가 없는 희귀한 레거시 브라우저를 지원하기 위해 클라이언트에서 수행된 것과 동일한 유효성 검사가 포함되어야 합니다. +6. 서버에서 양식 데이터의 유효성을 검사합니다. 여기에는 엔드포인트에 대한 악의적인 제출을 방지하고 양식 유효성 검사가 없는 희귀한 레거시 브라우저를 지원하기 위해 클라이언트에서 수행된 것과 동일한 유효성 검사가 포함되어야 합니다. 클라이언트에서 수행할 수 없는 유효성 검사도 포함될 수 있습니다. 예를 들어, 이 예시에서는 이메일이 이미 데이터베이스에 있는지 확인합니다. @@ -200,4 +202,5 @@ SSR 모드에서 Astro 페이지는 양식을 표시하고 처리할 수 있습 <button>Register</button> </form> - ``` \ No newline at end of file + ``` +</Steps> \ No newline at end of file diff --git a/src/content/docs/ko/recipes/bun.mdx b/src/content/docs/ko/recipes/bun.mdx index 4a1fa48e56f0e..3cd9a90a52962 100644 --- a/src/content/docs/ko/recipes/bun.mdx +++ b/src/content/docs/ko/recipes/bun.mdx @@ -8,7 +8,7 @@ i18nReady: true [Bun](https://bun.sh/)은 올인원 JavaScript 런타임 및 툴킷입니다. 더 많은 내용은 [Bun 공식 문서](https://bun.sh/docs)를 참고하세요. :::caution -Bun은 최근 첫 번째 안정적인 버전을 출시했습니다. 그러나 Bun을 Astro와 함께 사용하면, 일부 통합이 예상대로 동작하지 않을 수 있습니다. 자세한 내용은 [Astro와 함께 사용하는 방법에 대한 Bun 공식 문서](https://bun.sh/guides/ecosystem/astro)를 참고하세요. +Bun을 Astro와 함께 사용하면, 일부 통합이 예상대로 동작하지 않을 수 있습니다. 자세한 내용은 [Astro와 함께 사용하는 방법에 대한 Bun 공식 문서](https://bun.sh/guides/ecosystem/astro)를 참고하세요. Bun을 사용하면서 문제를 발견했다면, [Github의 Bun 공식 저장소에서 issue를 생성해주세요.](https://github.com/oven-sh/bun/issues/new/choose) ::: diff --git a/src/content/docs/ko/recipes/call-endpoints.mdx b/src/content/docs/ko/recipes/call-endpoints.mdx index a7597ea7766f7..725a29ec8d33b 100644 --- a/src/content/docs/ko/recipes/call-endpoints.mdx +++ b/src/content/docs/ko/recipes/call-endpoints.mdx @@ -4,6 +4,7 @@ description: Astro의 서버에서 엔드포인트를 호출하는 방법을 알 i18nReady: true type: recipe --- +import { Steps } from '@astrojs/starlight/components'; 엔드포인트는 다양한 종류의 데이터를 제공하는 데 사용될 수 있습니다. 이 레시피는 추가 fetch 요청 없이 페이지의 컴포넌트 스크립트에서 서버 엔드포인트를 호출하여 인사말을 표시합니다. @@ -13,6 +14,7 @@ type: recipe ## 레시피 +<Steps> 1. 일부 데이터를 반환하는 새 파일 `src/pages/api/hello.ts`에 엔드포인트를 생성합니다. ```ts title="src/pages/api/hello.ts" @@ -39,3 +41,4 @@ type: recipe <h1>{data.greeting} world!</h1> ``` +</Steps> \ No newline at end of file diff --git a/src/content/docs/ko/recipes/captcha.mdx b/src/content/docs/ko/recipes/captcha.mdx index 3c80fc950f35b..f9a579df11b10 100644 --- a/src/content/docs/ko/recipes/captcha.mdx +++ b/src/content/docs/ko/recipes/captcha.mdx @@ -4,6 +4,7 @@ description: API 경로를 생성하고 클라이언트에서 가져오는 방 i18nReady: true type: recipe --- +import { Steps } from '@astrojs/starlight/components'; [서버 엔드포인트](/ko/guides/endpoints/#서버-엔드포인트-api-라우트)를 REST API 엔드포인트로 사용하여 민감한 데이터를 클라이언트에 노출시키지 않고 인증, 데이터베이스 액세스, 검증과 같은 기능을 실행할 수 있습니다. @@ -15,6 +16,7 @@ type: recipe ## 레시피 +<Steps> 1. recaptcha의 데이터를 허용하는 `POST` 엔드포인트를 생성한 다음 reCAPTCHA API로 이를 검증합니다. 여기서 안전하게 비밀 값을 정의하거나 환경 변수를 읽을 수 있습니다. ```js title="src/pages/recaptcha.js" @@ -75,3 +77,4 @@ type: recipe </body> </html> ``` +</Steps> \ No newline at end of file diff --git a/src/content/docs/ko/recipes/docker.mdx b/src/content/docs/ko/recipes/docker.mdx index 9867245810db0..5afeff22eee08 100644 --- a/src/content/docs/ko/recipes/docker.mdx +++ b/src/content/docs/ko/recipes/docker.mdx @@ -4,6 +4,7 @@ description: Docker를 사용하여 Astro 사이트를 빌드하는 방법을 type: recipe i18nReady: true --- +import { Steps } from '@astrojs/starlight/components'; [Docker](https://docker.com)는 컨테이너를 사용하여 애플리케이션을 빌드, 배포, 실행하는 도구입니다. @@ -147,10 +148,10 @@ WORKDIR /app COPY package.json package-lock.json ./ FROM base AS prod-deps -RUN npm install --production +RUN npm install --omit=dev FROM base AS build-deps -RUN npm install --production=false +RUN npm install FROM build-deps AS build COPY . . @@ -168,22 +169,24 @@ CMD node ./dist/server/entry.mjs ## 레시피 +<Steps> 1. 프로젝트의 루트 디렉터리에서 다음 명령을 실행하여 컨테이너를 빌드합니다. `<your-astro-image-name>`에 아무 이름이나 사용하세요. -```bash -docker build -t <your-astro-image-name> . -``` + ```bash + docker build -t <your-astro-image-name> . + ``` -그러면 로컬에서 실행하거나 선택한 플랫폼에 배포할 수 있는 이미지가 출력됩니다. + 그러면 로컬에서 실행하거나 선택한 플랫폼에 배포할 수 있는 이미지가 출력됩니다. 2. 이미지를 로컬 컨테이너로 실행하려면 다음 명령을 사용합니다. -`<local-port>`를 기기의 오픈 포트로 바꾸세요. `<container-port>`를 Docker 컨테이너에 의해 노출된 포트 (위 예시에서는 `4321`, `80`, `8080`)로 바꿉니다. + `<local-port>`를 기기의 오픈 포트로 바꾸세요. `<container-port>`를 Docker 컨테이너에 의해 노출된 포트 (위 예시에서는 `4321`, `80`, `8080`)로 바꿉니다. -```bash -docker run -p <local-port>:<container-port> <your-astro-image-name> -``` + ```bash + docker run -p <local-port>:<container-port> <your-astro-image-name> + ``` -`http://localhost:<local-port>`에서 사이트에 액세스할 수 있어야 합니다. + `http://localhost:<local-port>`에서 사이트에 액세스할 수 있어야 합니다. -3. 이제 웹 사이트가 성공적으로 빌드되어 컨테이너에 패키징되었으므로 이를 클라우드 공급자에 배포할 수 있습니다. 한 가지 예시는 [Google Cloud](/ko/guides/deploy/google-cloud/#cloud-run-ssr-및-정적) 배포 가이드와 Docker 문서의 [앱 배포](https://docs.docker.com/language/nodejs/deploy/) 페이지를 참조하세요. \ No newline at end of file +3. 이제 웹 사이트가 성공적으로 빌드되어 컨테이너에 패키징되었으므로 이를 클라우드 공급자에 배포할 수 있습니다. 한 가지 예시는 [Google Cloud](/ko/guides/deploy/google-cloud/#cloud-run-ssr-및-정적) 배포 가이드와 Docker 문서의 [앱 배포](https://docs.docker.com/language/nodejs/deploy/) 페이지를 참조하세요. +</Steps> \ No newline at end of file diff --git a/src/content/docs/ko/recipes/dynamically-importing-images.mdx b/src/content/docs/ko/recipes/dynamically-importing-images.mdx index af952d4ce5de8..362cec1dc479b 100644 --- a/src/content/docs/ko/recipes/dynamically-importing-images.mdx +++ b/src/content/docs/ko/recipes/dynamically-importing-images.mdx @@ -4,7 +4,7 @@ description: Vite의 import.meta.glob 함수를 사용하여 이미지를 동적 i18nReady: true type: recipe --- - +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; 로컬 [이미지](/ko/guides/images/)를 표시하려면 `.astro` 파일로 가져와야 합니다. 각 개별 이미지를 명시적으로 가져오는 대신 이미지의 이미지 경로를 동적으로 가져와야 하는 경우가 있습니다. @@ -13,6 +13,7 @@ import { FileTree } from '@astrojs/starlight/components'; ## 레시피 +<Steps> 1. `src` 디렉터리 아래에 새 `assets` 폴더를 만들고 해당 새 폴더 안에 이미지를 추가합니다. <FileTree> @@ -151,3 +152,4 @@ import { FileTree } from '@astrojs/starlight/components'; age={25} /> ``` +</Steps> \ No newline at end of file diff --git a/src/content/docs/ko/recipes/external-links.mdx b/src/content/docs/ko/recipes/external-links.mdx index 63c0b5c399375..de89a71635230 100644 --- a/src/content/docs/ko/recipes/external-links.mdx +++ b/src/content/docs/ko/recipes/external-links.mdx @@ -4,8 +4,8 @@ description: Markdown 파일의 외부 링크에 아이콘을 추가하기 위 i18nReady: true type: recipe --- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; rehype 플러그인을 사용하면 외부 사이트를 가리키는 Markdown 파일의 링크를 식별하고 수정할 수 있습니다. 이 예시에서는 방문자가 사이트를 떠난다는 것을 알 수 있도록 각 외부 링크 끝에 아이콘을 추가합니다. @@ -15,29 +15,30 @@ rehype 플러그인을 사용하면 외부 사이트를 가리키는 Markdown ## 레시피 +<Steps> 1. `rehype-external-links` 플러그인을 설치합니다. <PackageManagerTabs> - <Fragment slot="npm"> - ```shell - npm install rehype-external-links - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - pnpm add rehype-external-links - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - yarn add rehype-external-links - ``` - </Fragment> - </PackageManagerTabs> + <Fragment slot="npm"> + ```shell + npm install rehype-external-links + ``` + </Fragment> + <Fragment slot="pnpm"> + ```shell + pnpm add rehype-external-links + ``` + </Fragment> + <Fragment slot="yarn"> + ```shell + yarn add rehype-external-links + ``` + </Fragment> + </PackageManagerTabs> 2. 플러그인을 `astro.config.mjs` 파일로 가져옵니다. - content 속성이 포함된 옵션 객체와 함께 `rehypeExternalLinks`를 `rehypePlugins` 배열에 전달합니다. 링크 끝에 일반 텍스트를 추가하려면 이 속성의 `type`을 `text`로 설정하세요. 대신 링크 끝에 HTML을 추가하려면 `type` 속성을 `raw`로 설정하세요. + content 속성이 포함된 옵션 객체와 함께 `rehypeExternalLinks`를 `rehypePlugins` 배열에 전달합니다. 링크 끝에 일반 텍스트를 추가하려면 이 속성의 `type`을 `text`로 설정하세요. 대신 링크 끝에 HTML을 추가하려면 `type` 속성을 `raw`로 설정하세요. ```ts // ... @@ -58,10 +59,11 @@ rehype 플러그인을 사용하면 외부 사이트를 가리키는 Markdown }); ``` -:::note - `content` 속성의 값은 [접근성 트리에 표시되지 않습니다](https://developer.mozilla.org/ko/docs/Web/CSS/content). 따라서 아이콘에만 의존하기보다는 링크가 주변 콘텐츠 외부에 있다는 점을 분명히 하는 것이 가장 좋습니다. -::: + :::note + `content` 속성의 값은 [접근성 트리에 표시되지 않습니다](https://developer.mozilla.org/ko/docs/Web/CSS/content). 따라서 아이콘에만 의존하기보다는 링크가 주변 콘텐츠 외부에 있다는 점을 분명히 하는 것이 가장 좋습니다. + ::: +</Steps> ## 자료 -- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links) +- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links) \ No newline at end of file diff --git a/src/content/docs/ko/recipes/i18n.mdx b/src/content/docs/ko/recipes/i18n.mdx index 76f72d86542af..3c2fd553c5aaf 100644 --- a/src/content/docs/ko/recipes/i18n.mdx +++ b/src/content/docs/ko/recipes/i18n.mdx @@ -4,10 +4,10 @@ description: 동적 라우팅 및 콘텐츠 컬렉션을 사용하여 Astro 사 type: recipe i18nReady: true --- - import { FileTree } from '@astrojs/starlight/components'; -import ReadMore from '~/components/ReadMore.astro' -import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro' +import ReadMore from '~/components/ReadMore.astro'; +import { Steps } from '@astrojs/starlight/components'; +import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro'; 이 레시피에서는 콘텐츠 컬렉션과 동적 라우팅을 사용하여 자체 국제화 (i18n) 솔루션을 구축하고 콘텐츠를 다양한 언어로 제공하는 방법을 배웁니다. @@ -23,6 +23,7 @@ v4.0에서 Astro는 기본 및 지원되는 언어를 구성할 수 있게 해 ### 언어별 페이지 설정 +<Steps> 1. 지원하려는 각 언어에 대한 디렉터리를 만듭니다. 예를 들어, 영어와 프랑스어를 지원하는 경우 `en/` 및 `fr/`: <FileTree> @@ -62,9 +63,11 @@ v4.0에서 Astro는 기본 및 지원되는 언어를 구성할 수 있게 해 ``` </Fragment> </StaticSsrTabs> +</Steps> ### 번역된 콘텐츠에 컬렉션 사용 +<Steps> 1. 포함하려는 각 콘텐츠 유형에 대해 `src/content/`에 폴더를 만들고 지원되는 각 언어에 대한 하위 디렉터리를 추가합니다. 예를 들어 영어 및 프랑스어 블로그 게시물을 지원하려면 다음을 수행하세요. <FileTree> @@ -166,11 +169,13 @@ v4.0에서 Astro는 기본 및 지원되는 언어를 구성할 수 있게 해 위 예시는 인간이 읽을 수 있는는 문자열을 프런트매터 날짜로 생성하기 위해 내장된 [`toLocaleString()` 날짜 형식 지정 방법](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)을 사용합니다. 이렇게 하면 날짜와 시간의 형식이 사용자의 언어와 일치하도록 보장됩니다. ::: +</Steps> ### UI 문자열 번역 사이트 주변의 UI 요소에 대한 레이블을 번역하기 위한 용어 사전을 만듭니다. 이를 통해 방문자는 여러분의 사이트를 완전히 자신의 언어로 경험할 수 있습니다. +<Steps> 1. 번역 문자열을 저장할 `src/i18n/ui.ts` 파일을 만듭니다. ```ts @@ -282,11 +287,13 @@ v4.0에서 Astro는 기본 및 지원되는 언어를 구성할 수 있게 해 ... </Base> ``` +</Steps> ### 사용자가 언어를 전환할 수 있도록 허용 사용자가 사이트를 읽고 싶은 언어를 선택할 수 있도록 지원하는 다양한 언어에 대한 링크를 만드세요. +<Steps> 1. 각 언어에 대한 링크를 표시하는 컴포넌트를 만듭니다. ```astro @@ -328,9 +335,11 @@ v4.0에서 Astro는 기본 및 지원되는 언어를 구성할 수 있게 해 </body> </html> ``` +</Steps> ### URL에서 기본 언어 숨기기 +<Steps> 1. 기본 언어를 제외한 각 언어에 대한 디렉터리를 생성합니다. 예를 들어 기본 언어 페이지를 `pages/`에 직접 저장하고 번역된 페이지를 `fr/`에 저장합니다. <FileTree> @@ -352,16 +361,16 @@ v4.0에서 Astro는 기본 및 지원되는 언어를 구성할 수 있게 해 3. 현재 언어를 기반으로 경로를 번역하려면 `src/i18n/utils.ts` 파일에 도우미 함수를 추가하세요. - ```js - // src/i18n/utils.ts - import { ui, defaultLang, showDefaultLang } from './ui'; + ```js + // src/i18n/utils.ts + import { ui, defaultLang, showDefaultLang } from './ui'; - export function useTranslatedPath(lang: keyof typeof ui) { - return function translatePath(path: string, l: string = lang) { - return !showDefaultLang && l === defaultLang ? path : `/${l}${path}` - } - } - ``` + export function useTranslatedPath(lang: keyof typeof ui) { + return function translatePath(path: string, l: string = lang) { + return !showDefaultLang && l === defaultLang ? path : `/${l}${path}` + } + } + ``` 4. 필요한 경우 도우미를 가져옵니다. 예를 들어 `nav` 컴포넌트는 다음과 같습니다. @@ -408,11 +417,13 @@ v4.0에서 Astro는 기본 및 지원되는 언어를 구성할 수 있게 해 ))} </ul> ``` +</Steps> ### 경로 번역 각 언어에 대한 페이지 경로를 번역하세요. +<Steps> 1. `src/i18n/ui.ts` 파일에 경로 매핑을 추가합니다. ```ts @@ -498,6 +509,7 @@ v4.0에서 Astro는 기본 및 지원되는 언어를 구성할 수 있게 해 ))} </ul> ``` +</Steps> ## 자료 @@ -509,4 +521,4 @@ v4.0에서 Astro는 기본 및 지원되는 언어를 구성할 수 있게 해 - [astro-i18next](https://github.com/yassinedoghri/astro-i18next) — 일부 유틸리티 컴포넌트를 포함하는 i18next용 Astro 통합입니다. - [astro-i18n](https://github.com/alexandre-fernandez/astro-i18n) — Astro용 TypeScript 우선 국제화 라이브러리입니다. - [astro-i18n-aut](https://github.com/jlarmstrongiv/astro-i18n-aut) — 페이지 생성 없이 `defaultLocale`을 지원하는 i18n용 Astro 통합입니다. 통합은 어댑터와 UI 프레임워크에 구애받지 않습니다. -- [paraglide](https://inlang.com/c/astro) - Astro 아일랜드와 같은 부분적인 하이드레이션 패턴을 위해 특별히 설계된 완전한 타입 안정성을 갖춘 i18n 라이브러리입니다. +- [paraglide](https://inlang.com/c/astro) - Astro 아일랜드와 같은 부분적인 하이드레이션 패턴을 위해 특별히 설계된 완전한 타입 안정성을 갖춘 i18n 라이브러리입니다. \ No newline at end of file diff --git a/src/content/docs/ko/recipes/making-toolbar-apps.mdx b/src/content/docs/ko/recipes/making-toolbar-apps.mdx index 352537529b934..91bf85009daec 100644 --- a/src/content/docs/ko/recipes/making-toolbar-apps.mdx +++ b/src/content/docs/ko/recipes/making-toolbar-apps.mdx @@ -297,26 +297,26 @@ Astro는 개발 툴바 앱에서 JSX 코드를 사전 처리하지 않으므로 4. 도구 모음 앱을 빌드하려면 `tsc`를 실행하고, 변경 사항이 있을 때 앱을 자동으로 다시 빌드하려면 `tsc --watch`를 실행하세요. - 이러한 변경 사항을 통해 이제 `app.ts` 파일의 이름을 `app.tsx` (또는 `.jsx`)로 바꾸고 JSX 구문을 사용하여 개발 툴바 앱을 만들 수 있습니다. - - ```tsx title="app.tsx" - import { defineToolbarApp } from "astro/toolbar"; - import { render } from "preact"; - - const motivationalMessages = [ - "You're doing great!", - "Keep up the good work!", - "You're awesome!", - "You're a star!", - ]; - - export default defineToolbarApp({ - init(canvas) { - const message = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)]; - render(<h1>{message}</h1>, canvas); - }, - }); - ``` + 이러한 변경 사항을 통해 이제 `app.ts` 파일의 이름을 `app.tsx` (또는 `.jsx`)로 바꾸고 JSX 구문을 사용하여 개발 툴바 앱을 만들 수 있습니다. + + ```tsx title="app.tsx" + import { defineToolbarApp } from "astro/toolbar"; + import { render } from "preact"; + + const motivationalMessages = [ + "You're doing great!", + "Keep up the good work!", + "You're awesome!", + "You're a star!", + ]; + + export default defineToolbarApp({ + init(canvas) { + const message = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)]; + render(<h1>{message}</h1>, canvas); + }, + }); + ``` </Steps> 이제 선택한 UI 프레임워크를 사용하여 개발 툴바 앱을 만드는 데 필요한 모든 도구를 갖게 되었습니다! diff --git a/src/content/docs/ko/recipes/modified-time.mdx b/src/content/docs/ko/recipes/modified-time.mdx index 84893b4deed07..519b362655af4 100644 --- a/src/content/docs/ko/recipes/modified-time.mdx +++ b/src/content/docs/ko/recipes/modified-time.mdx @@ -4,38 +4,39 @@ description: Markdown 및 MDX에 마지막 수정 시간을 추가하기 위해 i18nReady: true type: recipe --- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; Markdown 및 MDX 파일의 프런트매터에 마지막 수정 시간을 추가하는 [remark 플러그인](https://github.com/remarkjs/remark)을 빌드하는 방법을 알아보세요. 이 속성을 사용하여 페이지에 수정된 시간을 표시합니다. ## 레시피 +<Steps> 1. 도우미 패키지 설치 - 시간을 수정하고 형식을 지정하려면 [`Day.js`](https://www.npmjs.com/package/dayjs)를 설치하세요. - - <PackageManagerTabs> - <Fragment slot="npm"> - ```shell - npm install dayjs - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - pnpm add dayjs - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - yarn add dayjs - ``` - </Fragment> - </PackageManagerTabs> + 시간을 수정하고 형식을 지정하려면 [`Day.js`](https://www.npmjs.com/package/dayjs)를 설치하세요. + + <PackageManagerTabs> + <Fragment slot="npm"> + ```shell + npm install dayjs + ``` + </Fragment> + <Fragment slot="pnpm"> + ```shell + pnpm add dayjs + ``` + </Fragment> + <Fragment slot="yarn"> + ```shell + yarn add dayjs + ``` + </Fragment> + </PackageManagerTabs> 2. Remark 플러그인 생성 - 이 플러그인은 `execSync`를 사용하여 ISO 8601 형식의 최신 커밋의 타임스탬프를 반환하는 Git 명령을 실행합니다. 그러면 타임스탬프가 파일의 프런트매터에 추가됩니다. + 이 플러그인은 `execSync`를 사용하여 ISO 8601 형식의 최신 커밋의 타임스탬프를 반환하는 Git 명령을 실행합니다. 그러면 타임스탬프가 파일의 프런트매터에 추가됩니다. ```js title="remark-modified-time.mjs" import { execSync } from "child_process"; @@ -48,97 +49,98 @@ Markdown 및 MDX 파일의 프런트매터에 마지막 수정 시간을 추가 }; } ``` - <details> - <summary>Git 대신 파일 시스템 사용</summary> + <details> + <summary>Git 대신 파일 시스템 사용</summary> - 파일에서 마지막으로 수정된 타임스탬프를 가져오는 데 Git을 사용하는 것이 권장되는 방법이지만 파일 시스템 수정 시간을 사용할 수도 있습니다. - 이 플러그인은 `statSync`를 사용하여 파일의 `mtime` (수정 시간)을 ISO 8601 형식으로 가져옵니다. 그러면 타임스탬프가 파일의 프런트매터에 추가됩니다. + 파일에서 마지막으로 수정된 타임스탬프를 가져오는 데 Git을 사용하는 것이 권장되는 방법이지만 파일 시스템 수정 시간을 사용할 수도 있습니다. + 이 플러그인은 `statSync`를 사용하여 파일의 `mtime` (수정 시간)을 ISO 8601 형식으로 가져옵니다. 그러면 타임스탬프가 파일의 프런트매터에 추가됩니다. - ```js title="remark-modified-time.mjs" - import { statSync } from "fs"; - - export function remarkModifiedTime() { - return function (tree, file) { - const filepath = file.history[0]; - const result = statSync(filepath); - file.data.astro.frontmatter.lastModified = result.mtime.toISOString(); - }; - } - ``` - </details> + ```js title="remark-modified-time.mjs" + import { statSync } from "fs"; + + export function remarkModifiedTime() { + return function (tree, file) { + const filepath = file.history[0]; + const result = statSync(filepath); + file.data.astro.frontmatter.lastModified = result.mtime.toISOString(); + }; + } + ``` + </details> 3. 구성에 플러그인 추가 - ```js title="astro.config.mjs" - import { defineConfig } from 'astro/config'; - import { remarkModifiedTime } from './remark-modified-time.mjs'; + ```js title="astro.config.mjs" + import { defineConfig } from 'astro/config'; + import { remarkModifiedTime } from './remark-modified-time.mjs'; - export default defineConfig({ - markdown: { - remarkPlugins: [remarkModifiedTime], - }, - }); - ``` + export default defineConfig({ + markdown: { + remarkPlugins: [remarkModifiedTime], + }, + }); + ``` - 이제 모든 Markdown 문서의 프런트매터에는 `lastModified` 속성이 포함됩니다. + 이제 모든 Markdown 문서의 프런트매터에는 `lastModified` 속성이 포함됩니다. 4. 마지막 수정 시간 표시 - 콘텐츠가 [콘텐츠 컬렉션](/ko/guides/content-collections/)에 저장된 경우 `entry.render()` 함수에서 `remarkPluginFrontmatter`에 액세스하세요. 그런 다음 템플릿에서 표시하려는 위치에 `lastModified`를 렌더링하세요. - - ```astro title="src/pages/posts/[slug].astro" {3-4,6,17,19-21,28} - --- - import { CollectionEntry, getCollection } from 'astro:content'; - import dayjs from "dayjs"; - import utc from "dayjs/plugin/utc"; - - dayjs.extend(utc); - - export async function getStaticPaths() { - const blog = await getCollection('blog'); - return blog.map(entry => ({ - params: { slug: entry.slug }, - props: { entry }, - })); - } - - const { entry } = Astro.props; - const { Content, remarkPluginFrontmatter } = await entry.render(); - - const lastModified = dayjs(remarkPluginFrontmatter.lastModified) - .utc() - .format("HH:mm:ss DD MMMM YYYY UTC"); - --- - - <html> - <head>...</head> - <body> - ... - <p>Last Modified: {lastModified}</p> - ... - </body> - </html> - ``` - - [Markdown 레이아웃](/ko/guides/markdown-content/#markdown-및-mdx-페이지)을 사용하는 경우 레이아웃 템플릿의 `Astro.props`에서 `lastModified` 프런트매터 속성을 사용하세요. - - ```astro title="src/layouts/BlogLayout.astro" {2-3,5,7-9,15} - --- - import dayjs from "dayjs"; - import utc from "dayjs/plugin/utc"; - - dayjs.extend(utc); - - const lastModified = dayjs() - .utc(Astro.props.frontmatter.lastModified) - .format("HH:mm:ss DD MMMM YYYY UTC"); - --- - - <html> - <head>...</head> - <body> - <p>{lastModified}</p> - <slot /> - </body> - </html> - ``` + 콘텐츠가 [콘텐츠 컬렉션](/ko/guides/content-collections/)에 저장된 경우 `entry.render()` 함수에서 `remarkPluginFrontmatter`에 액세스하세요. 그런 다음 템플릿에서 표시하려는 위치에 `lastModified`를 렌더링하세요. + + ```astro title="src/pages/posts/[slug].astro" {3-4,6,17,19-21,28} + --- + import { CollectionEntry, getCollection } from 'astro:content'; + import dayjs from "dayjs"; + import utc from "dayjs/plugin/utc"; + + dayjs.extend(utc); + + export async function getStaticPaths() { + const blog = await getCollection('blog'); + return blog.map(entry => ({ + params: { slug: entry.slug }, + props: { entry }, + })); + } + + const { entry } = Astro.props; + const { Content, remarkPluginFrontmatter } = await entry.render(); + + const lastModified = dayjs(remarkPluginFrontmatter.lastModified) + .utc() + .format("HH:mm:ss DD MMMM YYYY UTC"); + --- + + <html> + <head>...</head> + <body> + ... + <p>Last Modified: {lastModified}</p> + ... + </body> + </html> + ``` + + [Markdown 레이아웃](/ko/guides/markdown-content/#markdown-및-mdx-페이지)을 사용하는 경우 레이아웃 템플릿의 `Astro.props`에서 `lastModified` 프런트매터 속성을 사용하세요. + + ```astro title="src/layouts/BlogLayout.astro" {2-3,5,7-9,15} + --- + import dayjs from "dayjs"; + import utc from "dayjs/plugin/utc"; + + dayjs.extend(utc); + + const lastModified = dayjs() + .utc(Astro.props.frontmatter.lastModified) + .format("HH:mm:ss DD MMMM YYYY UTC"); + --- + + <html> + <head>...</head> + <body> + <p>{lastModified}</p> + <slot /> + </body> + </html> + ``` +</Steps> \ No newline at end of file diff --git a/src/content/docs/ko/recipes/reading-time.mdx b/src/content/docs/ko/recipes/reading-time.mdx index b4271bf27d734..d43a0925b0928 100644 --- a/src/content/docs/ko/recipes/reading-time.mdx +++ b/src/content/docs/ko/recipes/reading-time.mdx @@ -4,113 +4,115 @@ description: 마크다운 및 MDX 파일에 읽기 시간을 추가하기 위해 i18nReady: true type: recipe --- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; Markdown 또는 MDX 파일의 프런트매터에 읽기 시간 속성을 추가하는 [remark 플러그인](https://github.com/remarkjs/remark)을 만듭니다. 이 속성을 사용하여 각 페이지의 읽기 시간을 표시합니다. ## 레시피 +<Steps> 1. 도우미 패키지 설치 - 다음 두 개의 도우미 패키지를 설치하세요. - - 읽은 시간 (분)을 계산하는 [`reading-time`](https://www.npmjs.com/package/reading-time) - - Markdown에서 모든 텍스트를 추출하는 [`mdast-util-to-string`](https://www.npmjs.com/package/mdast-util-to-string) - - <PackageManagerTabs> - <Fragment slot="npm"> - ```shell - npm install reading-time mdast-util-to-string - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - pnpm add reading-time mdast-util-to-string - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - yarn add reading-time mdast-util-to-string - ``` - </Fragment> - </PackageManagerTabs> + 다음 두 개의 도우미 패키지를 설치하세요. + - 읽은 시간 (분)을 계산하는 [`reading-time`](https://www.npmjs.com/package/reading-time) + - Markdown에서 모든 텍스트를 추출하는 [`mdast-util-to-string`](https://www.npmjs.com/package/mdast-util-to-string) + + <PackageManagerTabs> + <Fragment slot="npm"> + ```shell + npm install reading-time mdast-util-to-string + ``` + </Fragment> + <Fragment slot="pnpm"> + ```shell + pnpm add reading-time mdast-util-to-string + ``` + </Fragment> + <Fragment slot="yarn"> + ```shell + yarn add reading-time mdast-util-to-string + ``` + </Fragment> + </PackageManagerTabs> 2. remark 플러그인 생성. - 이 플러그인은 `mdast-util-to-string` 패키지를 사용하여 Markdown 파일의 텍스트를 가져옵니다. 그런 다음 이 텍스트는 `reading-time` 패키지로 전달되어 읽기 시간 (분)을 계산합니다. - - ```js title="remark-reading-time.mjs" - import getReadingTime from 'reading-time'; - import { toString } from 'mdast-util-to-string'; - - export function remarkReadingTime() { - return function (tree, { data }) { - const textOnPage = toString(tree); - const readingTime = getReadingTime(textOnPage); - // readingTime.text는 친숙한 문자열로 읽은 시간을 제공합니다. - // 예: "3 min read" - data.astro.frontmatter.minutesRead = readingTime.text; - }; - } - ``` + 이 플러그인은 `mdast-util-to-string` 패키지를 사용하여 Markdown 파일의 텍스트를 가져옵니다. 그런 다음 이 텍스트는 `reading-time` 패키지로 전달되어 읽기 시간 (분)을 계산합니다. + + ```js title="remark-reading-time.mjs" + import getReadingTime from 'reading-time'; + import { toString } from 'mdast-util-to-string'; + + export function remarkReadingTime() { + return function (tree, { data }) { + const textOnPage = toString(tree); + const readingTime = getReadingTime(textOnPage); + // readingTime.text는 친숙한 문자열로 읽은 시간을 제공합니다. + // 예: "3 min read" + data.astro.frontmatter.minutesRead = readingTime.text; + }; + } + ``` 3. 구성에 플러그인을 추가하세요. - ```js title="astro.config.mjs" "import { remarkReadingTime } from './remark-reading-time.mjs';" "remarkPlugins: [remarkReadingTime]," - import { defineConfig } from 'astro/config'; - import { remarkReadingTime } from './remark-reading-time.mjs'; + ```js title="astro.config.mjs" "import { remarkReadingTime } from './remark-reading-time.mjs';" "remarkPlugins: [remarkReadingTime]," + import { defineConfig } from 'astro/config'; + import { remarkReadingTime } from './remark-reading-time.mjs'; - export default defineConfig({ - markdown: { - remarkPlugins: [remarkReadingTime], - }, - }); - ``` + export default defineConfig({ + markdown: { + remarkPlugins: [remarkReadingTime], + }, + }); + ``` - 이제 모든 Markdown 문서의 프런트매터에는 계산된 `minutesRead` 속성이 있습니다. + 이제 모든 Markdown 문서의 프런트매터에는 계산된 `minutesRead` 속성이 있습니다. 4. 읽기 시간 표시 - 만약 블로그 게시물이 [콘텐츠 컬렉션](/ko/guides/content-collections/)에 저장되어 있다면, `entry.render()` 함수의 `remarkPluginFrontmatter`에 액세스하세요. 그런 다음 템플릿에서 표시하려는 위치마다 `minutesRead`를 렌더링하세요. - - ```astro title="src/pages/posts/[slug].astro" "const { Content, remarkPluginFrontmatter } = await entry.render();" "<p>{remarkPluginFrontmatter.minutesRead}</p>" - --- - import { CollectionEntry, getCollection } from 'astro:content'; - - export async function getStaticPaths() { - const blog = await getCollection('blog'); - return blog.map(entry => ({ - params: { slug: entry.slug }, - props: { entry }, - })); - } - - const { entry } = Astro.props; - const { Content, remarkPluginFrontmatter } = await entry.render(); - --- - - <html> - <head>...</head> - <body> - ... - <p>{remarkPluginFrontmatter.minutesRead}</p> - ... - </body> - </html> - ``` - - [Markdown 레이아웃](/ko/guides/markdown-content/#markdown-및-mdx-페이지)을 사용하는 경우 레이아웃 템플릿에서 `Astro.props`의 `minutesRead` frontmatter 속성을 사용하세요. - - ```astro title="src/layouts/BlogLayout.astro" "const { minutesRead } = Astro.props.frontmatter;" "<p>{minutesRead}</p>" - --- - const { minutesRead } = Astro.props.frontmatter; - --- - - <html> - <head>...</head> - <body> - <p>{minutesRead}</p> - <slot /> - </body> - </html> - ``` + 만약 블로그 게시물이 [콘텐츠 컬렉션](/ko/guides/content-collections/)에 저장되어 있다면, `entry.render()` 함수의 `remarkPluginFrontmatter`에 액세스하세요. 그런 다음 템플릿에서 표시하려는 위치마다 `minutesRead`를 렌더링하세요. + + ```astro title="src/pages/posts/[slug].astro" "const { Content, remarkPluginFrontmatter } = await entry.render();" "<p>{remarkPluginFrontmatter.minutesRead}</p>" + --- + import { CollectionEntry, getCollection } from 'astro:content'; + + export async function getStaticPaths() { + const blog = await getCollection('blog'); + return blog.map(entry => ({ + params: { slug: entry.slug }, + props: { entry }, + })); + } + + const { entry } = Astro.props; + const { Content, remarkPluginFrontmatter } = await entry.render(); + --- + + <html> + <head>...</head> + <body> + ... + <p>{remarkPluginFrontmatter.minutesRead}</p> + ... + </body> + </html> + ``` + + [Markdown 레이아웃](/ko/guides/markdown-content/#markdown-및-mdx-페이지)을 사용하는 경우 레이아웃 템플릿에서 `Astro.props`의 `minutesRead` frontmatter 속성을 사용하세요. + + ```astro title="src/layouts/BlogLayout.astro" "const { minutesRead } = Astro.props.frontmatter;" "<p>{minutesRead}</p>" + --- + const { minutesRead } = Astro.props.frontmatter; + --- + + <html> + <head>...</head> + <body> + <p>{minutesRead}</p> + <slot /> + </body> + </html> + ``` +</Steps> \ No newline at end of file diff --git a/src/content/docs/ko/recipes/sharing-state-islands.mdx b/src/content/docs/ko/recipes/sharing-state-islands.mdx index c076465d00ab3..bf25e63d4a633 100644 --- a/src/content/docs/ko/recipes/sharing-state-islands.mdx +++ b/src/content/docs/ko/recipes/sharing-state-islands.mdx @@ -12,7 +12,7 @@ import RecipeLinks from "~/components/RecipeLinks.astro" [아일랜드 아키텍처 / 부분 수화](/ko/concepts/islands/)를 사용하여 Astro 웹 사이트를 구축할 때 다음 문제에 직면했을 수 있습니다: **컴포넌트 간 상태를 공유하고 싶습니다.** -React 또는 Vue와 같은 UI 프레임워크는 다른 컴포넌트가 사용하도록 ["context" providers](https://ko.react.dev/learn/passing-data-deeply-with-context)를 권장할 수 있습니다. 하지만 Astro 또는 Markdown에서 [컴포넌트를 부분적으로 수화](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션하기)하는 경우 이러한 컨텍스트 래퍼를 사용할 수 없습니다. +React 또는 Vue와 같은 UI 프레임워크는 다른 컴포넌트가 사용하도록 ["context" providers](https://ko.react.dev/learn/passing-data-deeply-with-context)를 권장할 수 있습니다. 하지만 Astro 또는 Markdown에서 [컴포넌트를 부분적으로 수화](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션)하는 경우 이러한 컨텍스트 래퍼를 사용할 수 없습니다. Astro는 공유 클라이언트 측 스토리지를 위한 다른 솔루션인 [**Nano Stores**](https://github.com/nanostores/nanostores)를 권장합니다. @@ -35,9 +35,8 @@ Astro는 공유 클라이언트 측 스토리지를 위한 다른 솔루션인 [ <details> <summary>**🙋 `.astro` 파일이나 기타 서버 측 컴포넌트에서 Nano Stores를 사용할 수 있나요?**</summary> -Nano Stores는 서버 측 컴포넌트에서 가져오고, 쓰고, 읽을 수 _있지만_ **권장하지는 않습니다!** 이는 몇 가지 제한 사항으로 인해 발생합니다. - -- `.astro` 파일이나 [수화되지 않은 컴포넌트](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션하기)에서 저장소에 쓰는 것은 [클라이언트 측 컴포넌트](/ko/reference/directives-reference/#클라이언트-지시어)에서 받은 값에 영향을 주지 _않습니다._ +Nano Stores는 `<script>` 태그에서 [`.astro` 컴포넌트 간 상태를 공유](/ko/recipes/sharing-state)하는 데 사용할 수 있습니다. 그러나 서버 측 컴포넌트 프런트매터에서 Nano Stores를 사용하는 것은 다음과 같은 제한 사항으로 인해 권장되지 않습니다. +- `.astro` 파일이나 [수화되지 않은 컴포넌트](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션)에서 저장소에 쓰는 것은 [클라이언트 측 컴포넌트](/ko/reference/directives-reference/#클라이언트-지시어)에서 받은 값에 영향을 주지 _않습니다._ - Nano Stores를 클라이언트 측 컴포넌트에 "prop"으로 전달할 수 없습니다. - Astro 컴포넌트는 다시 렌더링되지 않으므로 `.astro` 파일의 변경 사항 저장을 구독할 수 없습니다. diff --git a/src/content/docs/ko/recipes/sharing-state.mdx b/src/content/docs/ko/recipes/sharing-state.mdx index 2b1d7f2326fdb..a92cf45cac7d7 100644 --- a/src/content/docs/ko/recipes/sharing-state.mdx +++ b/src/content/docs/ko/recipes/sharing-state.mdx @@ -4,8 +4,8 @@ description: Nano Stores를 사용하여 Astro 컴포넌트 전체에서 상태 i18nReady: true type: recipe --- - -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import { Steps } from '@astrojs/starlight/components'; +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; :::tip 프레임워크 컴포넌트를 사용하시나요? [아일랜드 간 상태 공유 방법](/ko/recipes/sharing-state-islands/)을 참조하세요! @@ -15,72 +15,74 @@ Astro 웹 사이트를 구축할 때 컴포넌트 간 상태를 공유해야 할 ## 레시피 +<Steps> 1. Nano Stores를 설치합니다. - <PackageManagerTabs> - <Fragment slot="npm"> - ```shell - npm install nanostores - ``` - </Fragment> - <Fragment slot="pnpm"> - ```shell - pnpm add nanostores - ``` - </Fragment> - <Fragment slot="yarn"> - ```shell - yarn add nanostores - ``` - </Fragment> - </PackageManagerTabs> + <PackageManagerTabs> + <Fragment slot="npm"> + ```shell + npm install nanostores + ``` + </Fragment> + <Fragment slot="pnpm"> + ```shell + pnpm add nanostores + ``` + </Fragment> + <Fragment slot="yarn"> + ```shell + yarn add nanostores + ``` + </Fragment> + </PackageManagerTabs> 2. 스토어를 만드세요. 이 예시에서 스토어는 대화 상자가 열려 있는지 여부를 추적합니다. - ```ts title="src/store.js" - import { atom } from 'nanostores'; + ```ts title="src/store.js" + import { atom } from 'nanostores'; - export const isOpen = atom(false); - ``` + export const isOpen = atom(false); + ``` 3. 상태를 공유할 컴포넌트의 `<script>` 태그에 있는 스토어를 가져와 사용합니다. -다음 `Button` 및 `Dialog` 컴포넌트는 각각 공유된 `isOpen` 상태를 사용하여 특정 `<div>`를 숨길지 표시할지 여부를 제어합니다. - - ```astro title="src/components/Button.astro" - <button id="openDialog">Open</button> + 다음 `Button` 및 `Dialog` 컴포넌트는 각각 공유된 `isOpen` 상태를 사용하여 특정 `<div>`를 숨길지 표시할지 여부를 제어합니다. - <script> - import { isOpen } from '../store.js'; - - // 버튼을 클릭하면 스토어를 true로 설정합니다. - function openDialog() { - isOpen.set(true); - } + ```astro title="src/components/Button.astro" + <button id="openDialog">Open</button> - // 버튼에 이벤트 리스너 추가를 추가합니다. - document.getElementById('openDialog').addEventListener('click', openDialog); - </script> - ``` - - ```astro title="src/components/Dialog.astro" - <div id="dialog" style="display: none">Hello world!</div> + <script> + import { isOpen } from '../store.js'; + + // 버튼을 클릭하면 스토어를 true로 설정합니다. + function openDialog() { + isOpen.set(true); + } - <script> - import { isOpen } from '../store.js'; + // 버튼에 이벤트 리스너 추가를 추가합니다. + document.getElementById('openDialog').addEventListener('click', openDialog); + </script> + ``` - // 스토어의 변경 사항을 수신하여 그에 따라 대화 상자를 표시하거나 숨깁니다. - isOpen.subscribe(open => { - if (open) { - document.getElementById('dialog').style.display = 'block'; - } else { - document.getElementById('dialog').style.display = 'none'; - } - }) - </script> - ``` + ```astro title="src/components/Dialog.astro" + <div id="dialog" style="display: none">Hello world!</div> + + <script> + import { isOpen } from '../store.js'; + + // 스토어의 변경 사항을 수신하여 그에 따라 대화 상자를 표시하거나 숨깁니다. + isOpen.subscribe(open => { + if (open) { + document.getElementById('dialog').style.display = 'block'; + } else { + document.getElementById('dialog').style.display = 'none'; + } + }) + </script> + ``` +</Steps> ## 자료 - [Nano Stores의 NPM 링크](https://www.npmjs.com/package/nanostores) -- [Vanilla JS를 위한 Nano Stores 문서 ](https://github.com/nanostores/nanostores#vanilla-js) +- [Vanilla JS를 위한 Nano Stores 문서 ](https://github.com/nanostores/nanostores#vanilla-js) \ No newline at end of file diff --git a/src/content/docs/ko/recipes/tailwind-rendered-markdown.mdx b/src/content/docs/ko/recipes/tailwind-rendered-markdown.mdx index da4230fa8fa50..e8cb16bf77571 100644 --- a/src/content/docs/ko/recipes/tailwind-rendered-markdown.mdx +++ b/src/content/docs/ko/recipes/tailwind-rendered-markdown.mdx @@ -4,7 +4,7 @@ description: '@tailwind/typography를 사용하여 렌더링된 Markdown의 스 i18nReady: true type: recipe --- - +import { Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; [Tailwind](https://tailwindcss.com)의 Typography 플러그인을 사용하여 Astro의 [**콘텐츠 컬렉션**](/ko/guides/content-collections/)과 같은 소스에서 렌더링된 Markdown의 스타일을 지정할 수 있습니다. @@ -58,6 +58,7 @@ export default { ## 레시피 +<Steps> 1. 렌더링된 Markdown에 `<slot />`이 포함된 래핑 `<div>`을 제공하기 위해 `<Prose />` 컴포넌트를 만듭니다. 상위 요소에 원하는 [Tailwind 요소 수정자](https://tailwindcss.com/docs/typography-plugin#element-modifiers)와 함께 스타일 클래스 `prose`를 추가합니다. ```astro title="src/components/Prose.astro" @@ -100,7 +101,8 @@ export default { </Prose> </Layout> ``` +</Steps> ## 자료 -- [Tailwind Typography 문서](https://tailwindcss.com/docs/typography-plugin) +- [Tailwind Typography 문서](https://tailwindcss.com/docs/typography-plugin) \ No newline at end of file diff --git a/src/content/docs/ko/reference/cli-reference.mdx b/src/content/docs/ko/reference/cli-reference.mdx index aac646afe13e6..912db65425fa1 100644 --- a/src/content/docs/ko/reference/cli-reference.mdx +++ b/src/content/docs/ko/reference/cli-reference.mdx @@ -226,6 +226,30 @@ Astro 1.5.0부터 `astro preview`는 이를 지원하는 어댑터를 사용하 이 명령은 프로젝트의 변경 사항을 감시하고 오류를 보고합니다. +#### `--root <path-to-dir>` + +check 명령을 실행할 다른 루트 디렉터리를 지정합니다. 기본적으로 현재 작업 디렉터리를 사용합니다. + +#### `--tsconfig <path-to-file>` + +수동으로 사용할 `tsconfig.json` 또는 `jsconfig.json` 파일을 지정합니다. 제공되지 않은 경우 Astro는 구성을 찾으려고 시도하거나 프로젝트의 구성을 자동으로 추론합니다. + +#### `--minimumFailingSeverity <error|warning|hint>` + +오류 코드와 함께 종료하는 데 필요한 최소 심각도를 지정합니다. 기본값은 `error`입니다. + +예를 들어 `astro check --minimumFailingSeverity warning` 실행 시, 경고가 감지되면 명령이 오류와 함께 종료됩니다. + +#### `--minimumSeverity <error|warning|hint>` + +출력할 최소 심각도를 지정합니다. 기본값은 `hint`입니다. + +예를 들어 `astro check --minimumSeverity warning`을 실행하면 오류와 경고가 표시되지만 힌트는 표시되지 않습니다. + +#### `--preserveWatchOutput` + +감시 모드에서 check 사이의 출력을 지우지 않도록 지정합니다. + <ReadMore>[Astro의 타입 검사](/ko/guides/typescript/#타입-검사)에 대해 자세히 알아보세요.</ReadMore> ## `astro sync` diff --git a/src/content/docs/ko/reference/configuration-reference.mdx b/src/content/docs/ko/reference/configuration-reference.mdx index 00fed136abd42..a58687167d49f 100644 --- a/src/content/docs/ko/reference/configuration-reference.mdx +++ b/src/content/docs/ko/reference/configuration-reference.mdx @@ -1257,6 +1257,106 @@ Astro는 사용자가 새로운 기능에 조기에 액세스할 수 있도록 e } ``` +### experimental.actions + +<p> + +**타입:** `boolean`<br /> +**기본값:** `false`<br /> +<Since v="4.8.0" /> +</p> + +액션은 어디에서나 호출할 수 있는 타입 안정성을 갖춘 백엔드 함수를 작성하는 데 도움이 됩니다. [`output` 속성을 사용하여](/ko/basics/rendering-modes/#on-demand-rendered) 서버 렌더링을 활성화하고 `experimental` 객체에 `actions` 플래그를 추가합니다. + +```js +{ + output: 'hybrid', // 또는 'server' + experimental: { + actions: true, + }, +} +``` + +`src/actions/index.ts` 파일에서 모든 액션을 선언합니다. 이 파일은 전역 액션 핸들러입니다. + +`astro:actions` 모듈의 `defineAction()` 유틸리티를 사용하여 액션을 정의합니다. 이 액션은 서버 측 요청 핸들러를 정의하기 위해 `handler` 속성을 허용합니다. 액션이 인수를 허용하는 경우 `input` 속성을 적용하여 Zod로 매개변수를 검증하세요. + +이 예시에서는 `like`와 `comment`라는 두 가지 액션을 정의합니다. `like` 액션은 `postId` 문자열이 포함된 JSON 객체를 허용하는 반면, `comment` 액션은 `postId`, `author` 및 `body` 문자열을 포함하는 [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)를 허용합니다. 각 `handler`는 데이터베이스를 업데이트하고 타입 안정성을 갖춘 응답을 반환합니다. + +```ts +// src/actions/index.ts +import { defineAction, z } from "astro:actions"; + +export const server = { + like: defineAction({ + input: z.object({ postId: z.string() }), + handler: async ({ postId }) => { + // db에서 likes 업데이트 + + return likes; + }, + }), + comment: defineAction({ + accept: 'form', + input: z.object({ + postId: z.string(), + author: z.string(), + body: z.string(), + }), + handler: async ({ postId }) => { + // db에 comment 삽입 + + return comment; + }, + }), +}; +``` + +그런 다음 `astro:actions`의 `actions` 객체를 사용하여 클라이언트 컴포넌트에서 액션을 호출합니다. JSON을 사용할 때는 타입 안정성을 갖춘 객체를 전달할 수 있고, 액션 정의에서 `accept: 'form'`을 사용할 때는 [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) 객체를 전달할 수 있습니다. + +이 예시는 React 컴포넌트에서 `like` 및 `comment` 액션을 호출합니다. + +```tsx "actions" +// src/components/blog.tsx +import { actions } from "astro:actions"; +import { useState } from "react"; + +export function Like({ postId }: { postId: string }) { + const [likes, setLikes] = useState(0); + return ( + <button + onClick={async () => { + const newLikes = await actions.like({ postId }); + setLikes(newLikes); + }} + > + {likes} likes + </button> + ); +} + +export function Comment({ postId }: { postId: string }) { + return ( + <form + onSubmit={async (e) => { + e.preventDefault(); + const formData = new FormData(e.target as HTMLFormElement); + const result = await actions.blog.comment(formData); + // result 핸들링 + }} + > + <input type="hidden" name="postId" value={postId} /> + <label htmlFor="author">Author</label> + <input id="author" type="text" name="author" /> + <textarea rows={10} name="body"></textarea> + <button type="submit">Post</button> + </form> + ); +} +``` + +전체 개요를 확인하고 이 실험적 API에 대한 피드백을 제공하려면 [Actions RFC](https://github.com/withastro/roadmap/blob/actions/proposals/0046-actions.md)를 참조하세요. + ### experimental.contentCollectionCache <p> @@ -1458,4 +1558,59 @@ export default defineConfig({ } } }) -``` \ No newline at end of file +``` + +### experimental.rewriting + +<p> + +**타입:** `boolean`<br /> +**기본값:** `false`<br /> +<Since v="4.8.0" /> +</p> + +Astro 페이지, 엔드포인트 및 Astro 미들웨어에서 요청을 리라이팅하기 위한 라우팅 기능을 활성화하여 경로를 프로그래밍 방식으로 제어할 수 있습니다. + +```js +{ + experimental: { + rewriting: true, + }, +} +``` + +다른 페이지로 다시 라우팅하려면 `.astro` 파일에서 `Astro.rewrite`를 사용합니다. + +```astro "rewrite" +--- +// src/pages/dashboard.astro +if (!Astro.props.allowed) { + return Astro.rewrite("/") +} +--- +``` + +다른 페이지로 다시 라우팅하려면 엔드포인트 파일에서 `context.rewrite`를 사용합니다. + +```js +// src/pages/api.js +export function GET(ctx) { + if (!ctx.locals.allowed) { + return ctx.rewrite("/") + } +} +``` + +미들웨어 파일에서 `next("/")`를 사용하여 다른 페이지로 다시 라우팅한 후 다음 미들웨어 함수를 호출합니다. + +```js +// src/middleware.js +export function onRequest(ctx, next) { + if (!ctx.cookies.get("allowed")) { + return next("/") // 새 시그니처 + } + return next(); +} +``` + +전체 개요를 확인하고 이 실험적 API에 대한 피드백을 제공하려면 [RFC 리라우팅](https://github.com/withastro/roadmap/blob/feat/reroute/proposals/0047-rerouting.md)을 참조하세요 \ No newline at end of file diff --git a/src/content/docs/ko/reference/dev-toolbar-app-reference.mdx b/src/content/docs/ko/reference/dev-toolbar-app-reference.mdx index e63b895e773dc..c3b585211a2ea 100644 --- a/src/content/docs/ko/reference/dev-toolbar-app-reference.mdx +++ b/src/content/docs/ko/reference/dev-toolbar-app-reference.mdx @@ -436,6 +436,14 @@ myButton.addEventListener('click', () => { JavaScript에서 기본 `style` 속성과의 충돌을 방지하려면 `buttonStyle` 속성을 사용하여 이 속성을 설정하세요. +#### `button-border-radius` + +<p><Since v="4.8.0" /></p> + +버튼의 테두리 반경입니다 (`normal`, `rounded`). `rounded`를 사용하면 버튼의 모서리가 둥글게 되고 모든 면에 균일한 패딩이 적용됩니다. + +JavaScript에서는 `buttonBorderRadius` 속성을 사용하여 이 속성을 설정합니다. + ### `astro-dev-toolbar-badge` 배지를 표시합니다. @@ -486,6 +494,20 @@ toggle.input.addEventListener('change', (evt) => { }); ``` +### `astro-dev-toolbar-radio-checkbox` + +<p><Since v="4.8.0" /></p> + +라디오 체크박스를 표시합니다. `astro-dev-toolbar-toggle` 컴포넌트와 유사하게 이 요소는 기본 `<input type="radio">` 요소를 둘러싼 간단한 래퍼입니다. 라디오 요소는 `input` 속성을 사용하여 액세스할 수 있습니다. + +```ts +const radio = document.createElement('astro-dev-toolbar-radio-checkbox'); + +radio.input.addEventListener('change', (evt) => { + console.log(`The radio is now ${evt.currentTarget.checked ? 'enabled' : 'disabled'}!`); +}); +``` + #### `toggle-style` 토글의 스타일 (`purple`, `gray`, `red`, `green`, `yellow`, `blue`). diff --git a/src/content/docs/ko/reference/error-reference.mdx b/src/content/docs/ko/reference/error-reference.mdx index 5516fd047231e..3455ec6dc96ec 100644 --- a/src/content/docs/ko/reference/error-reference.mdx +++ b/src/content/docs/ko/reference/error-reference.mdx @@ -13,6 +13,7 @@ import DontEditWarning from '~/components/DontEditWarning.astro' - [**UnknownCompilerError**](/ko/reference/errors/unknown-compiler-error/)<br/>알 수 없는 컴파일러 오류입니다. - [**StaticRedirectNotAvailable**](/ko/reference/errors/static-redirect-not-available/)<br/>`Astro.redirect`는 정적 모드에서 사용할 수 없습니다. - [**ClientAddressNotAvailable**](/ko/reference/errors/client-address-not-available/)<br/>현재 어댑터에서는 `Astro.clientAddress`를 사용할 수 없습니다. +- [**PrerenderClientAddressNotAvailable**](/ko/reference/errors/prerender-client-address-not-available/)<br/>`Astro.clientAddress`는 사전 렌더링된 경로에서 사용할 수 없습니다. - [**StaticClientAddressNotAvailable**](/ko/reference/errors/static-client-address-not-available/)<br/>`Astro.clientAddress`는 정적 모드에서 사용할 수 없습니다. - [**NoMatchingStaticPathFound**](/ko/reference/errors/no-matching-static-path-found/)<br/>요청한 경로에 대한 정적 경로를 찾을 수 없습니다. - [**OnlyResponseCanBeReturned**](/ko/reference/errors/only-response-can-be-returned/)<br/>Astro 페이지에서 잘못된 타입을 반환했습니다. @@ -72,6 +73,7 @@ import DontEditWarning from '~/components/DontEditWarning.astro' - [**CantRenderPage**](/ko/reference/errors/cant-render-page/)<br/>Astro가 경로를 렌더링할 수 없습니다. - [**UnhandledRejection**](/ko/reference/errors/unhandled-rejection/)<br/>처리될 수 없는 오류가 발생했습니다. - [**i18nNotEnabled**](/ko/reference/errors/i18n-not-enabled/)<br/>i18n이 활성화되지 않았습니다. +- [**RouteNotFound**](/ko/reference/errors/route-not-found/)<br/>경로를 찾을 수 없습니다. ## CSS 오류 @@ -104,4 +106,5 @@ import DontEditWarning from '~/components/DontEditWarning.astro' - [**ContentCollectionTypeMismatchError**](/ko/reference/errors/content-collection-type-mismatch-error/)<br/>컬렉션에 다른 타입의 항목이 포함되어 있습니다. - [**DataCollectionEntryParseError**](/ko/reference/errors/data-collection-entry-parse-error/)<br/>데이터 컬렉션 항목을 구문 분석하지 못했습니다. - [**DuplicateContentEntrySlugError**](/ko/reference/errors/duplicate-content-entry-slug-error/)<br/>콘텐츠 항목 슬러그가 중복되었습니다. +- [**ActionsWithoutServerOutputError**](/ko/reference/errors/actions-without-server-output-error/)<br/>액션은 서버 출력과 함께 사용해야 합니다. - [**UnsupportedConfigTransformError**](/ko/reference/errors/unsupported-config-transform-error/)<br/>콘텐츠 구성에서 지원되지 않는 변환입니다. diff --git a/src/content/docs/ko/reference/errors/actions-without-server-output-error.mdx b/src/content/docs/ko/reference/errors/actions-without-server-output-error.mdx new file mode 100644 index 0000000000000..39f8178bde2d2 --- /dev/null +++ b/src/content/docs/ko/reference/errors/actions-without-server-output-error.mdx @@ -0,0 +1,15 @@ +--- +title: Actions must be used with server output. +i18nReady: true +githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts +--- + +> **ActionsWithoutServerOutputError**: Actions enabled without setting a server build output. A server is required to create callable backend functions. To deploy routes to a server, add a server adapter to your astro config. + +## 무엇이 잘못되었나요? +Actions를 사용하여 백엔드 함수를 생성하려면 프로젝트에 서버 출력이 있어야 합니다. + +**더 보기:** +- [요청 시 렌더링](/ko/basics/rendering-modes/#요청-시-렌더링) + + diff --git a/src/content/docs/ko/reference/errors/no-client-entrypoint.mdx b/src/content/docs/ko/reference/errors/no-client-entrypoint.mdx index ffcc29627b011..147b3695c1235 100644 --- a/src/content/docs/ko/reference/errors/no-client-entrypoint.mdx +++ b/src/content/docs/ko/reference/errors/no-client-entrypoint.mdx @@ -13,4 +13,4 @@ Astro는 클라이언트에서 컴포넌트를 수화하려고 시도했지만, **더 보기:** - [addRenderer 옵션](/ko/reference/integrations-reference/#addrenderer-옵션) -- [프레임워크 컴포넌트 수화](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션하기) \ No newline at end of file +- [프레임워크 컴포넌트 수화](/ko/guides/framework-components/#인터랙티브-컴포넌트-하이드레이션) \ No newline at end of file diff --git a/src/content/docs/ko/reference/errors/prerender-client-address-not-available.mdx b/src/content/docs/ko/reference/errors/prerender-client-address-not-available.mdx new file mode 100644 index 0000000000000..4618767d89522 --- /dev/null +++ b/src/content/docs/ko/reference/errors/prerender-client-address-not-available.mdx @@ -0,0 +1,16 @@ +--- +title: Astro.clientAddress cannot be used inside prerendered routes. +i18nReady: true +githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts +--- + +> **PrerenderClientAddressNotAvailable**: `Astro.clientAddress` cannot be used inside prerendered routes + +## 무엇이 잘못되었나요? +`Astro.clientAddress` 속성은 사전 렌더링된 경로에서 사용할 수 없습니다. + +**더 보기:** +- [사전 렌더링 선택](/ko/guides/server-side-rendering/#server-모드에서-사전-렌더링-선택) +- [Astro.clientAddress](/ko/reference/api-reference/#astroclientaddress) + + diff --git a/src/content/docs/ko/reference/errors/route-not-found.mdx b/src/content/docs/ko/reference/errors/route-not-found.mdx new file mode 100644 index 0000000000000..99c3f519ad407 --- /dev/null +++ b/src/content/docs/ko/reference/errors/route-not-found.mdx @@ -0,0 +1,13 @@ +--- +title: Route not found. +i18nReady: true +githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts +--- + +> **RouteNotFound**: Astro could not find a route that matches the one you requested. + +## 무엇이 잘못되었나요? +Astro는 사용자가 제공한 경로와 일치하는 경로를 찾을 수 없습니다. + + + diff --git a/src/content/docs/ko/reference/integrations-reference.mdx b/src/content/docs/ko/reference/integrations-reference.mdx index 8c399ebff4442..71760a73995bf 100644 --- a/src/content/docs/ko/reference/integrations-reference.mdx +++ b/src/content/docs/ko/reference/integrations-reference.mdx @@ -370,7 +370,7 @@ injectRoute({ { "name": "@fancy/dashboard", // ... - "exports": { "./dashboard.astro": "./dashboard.astro" }` + "exports": { "./dashboard.astro": "./dashboard.astro" } } ``` diff --git a/src/content/docs/ko/reference/publish-to-npm.mdx b/src/content/docs/ko/reference/publish-to-npm.mdx index 22da4177a6959..90fc6a6237421 100644 --- a/src/content/docs/ko/reference/publish-to-npm.mdx +++ b/src/content/docs/ko/reference/publish-to-npm.mdx @@ -3,7 +3,7 @@ title: NPM에 게시 description: Astro 컴포넌트를 NPM에 게시하는 방법 알아보기 i18nReady: true --- - +import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components'; 새로운 Astro 컴포넌트를 구축하시나요? **[npm](https://npmjs.com/)에 게시하세요!** @@ -233,17 +233,21 @@ Astro는 현재 테스트 러너를 출시하지 않았습니다. _(이 문제 그동안 테스트에 대한 현재 권장 사항은 다음과 같습니다. +<Steps> 1. `demo/src/pages` 디렉터리에 테스트 `fixtures` 디렉터리를 추가하세요. + 2. 실행하려는 모든 테스트에 대해 새 페이지를 추가하세요. + 3. 각 페이지에는 테스트하려는 다양한 컴포넌트 사용법이 포함되어야 합니다. -4. `astro build` 명령을 실행하여 fixtures를 빌드한 다음, `dist/__fixtures__/` 디렉터리에 있는 결과물을 예상한 것과 비교하세요. -<FileTree> -- my-project/demo/src/pages/\_\_fixtures\_\_/ - - test-name-01.astro - - test-name-02.astro - - test-name-03.astro -</FileTree> +4. `astro build` 명령을 실행하여 fixtures를 빌드한 다음, `dist/__fixtures__/` 디렉터리에 있는 결과물을 예상한 것과 비교하세요. + <FileTree> + - my-project/demo/src/pages/\_\_fixtures\_\_/ + - test-name-01.astro + - test-name-02.astro + - test-name-03.astro + </FileTree> +</Steps> ## 컴포넌트 게시 diff --git a/src/content/docs/ko/tutorial/1-setup/1.mdx b/src/content/docs/ko/tutorial/1-setup/1.mdx index 2127d1cf6640a..13a7633a504d3 100644 --- a/src/content/docs/ko/tutorial/1-setup/1.mdx +++ b/src/content/docs/ko/tutorial/1-setup/1.mdx @@ -27,7 +27,7 @@ import { Steps } from '@astrojs/starlight/components'; ### Node.js -Astro를 시스템에서 실행하려면 [**Node.js**](https://nodejs.org/en/) 버전 `v18.14.1` 이상이 설치되어 있어야 합니다. +Astro를 시스템에서 실행하려면 [**Node.js**](https://nodejs.org/en/) 버전 `v18.17.1` 또는 `v20.3.0` 이상이 설치되어 있어야 합니다. (`v19`는 지원되지 않습니다.) 호환되는 버전이 이미 설치되어 있는지 확인하려면 터미널에서 다음 명령을 실행하세요. @@ -35,12 +35,12 @@ Astro를 시스템에서 실행하려면 [**Node.js**](https://nodejs.org/en/) node -v // 예시 출력 -v18.14.1 +v18.17.1 ``` -명령이 `v18.14.1`보다 높은 버전 번호를 반환하면 문제가 없습니다! +명령이 `v18.17.1` 또는 `v20.3.0` (`v19` 제외)보다 높은 버전 번호를 반환하면 문제가 없습니다! -명령이 `Command 'node' not found` 같은 오류 메시지를 반환하거나 `v18.14.1`보다 낮은 버전 번호를 반환하는 경우 호환되는 Node.js 버전을 설치해야 합니다. +명령이 `Command 'node' not found` 같은 오류 메시지를 반환하거나 요구사항보다 낮은 버전 번호를 반환하는 경우 호환되는 Node.js 버전을 설치해야 합니다. ### 코드 편집기 diff --git a/src/content/docs/ko/tutorial/3-components/1.mdx b/src/content/docs/ko/tutorial/3-components/1.mdx index 3a77fcde212d9..13e6ae8437b1d 100644 --- a/src/content/docs/ko/tutorial/3-components/1.mdx +++ b/src/content/docs/ko/tutorial/3-components/1.mdx @@ -50,9 +50,12 @@ HTML을 생성하지만 웹 사이트의 새 페이지가 되지 않는 `.astro` <Steps> 1. `index.astro`로 돌아가서 코드 펜스 내부에 새 컴포넌트를 가져옵니다. - ```astro title="src/pages/index.astro" + ```astro title="src/pages/index.astro" ins={2} --- import Navigation from '../components/Navigation.astro'; + import "../styles/global.css"; + + const pageTitle = "Home Page"; --- ``` diff --git a/src/content/docs/ko/tutorial/4-layouts/1.mdx b/src/content/docs/ko/tutorial/4-layouts/1.mdx index ca57721fed1c3..8b65ee93724c1 100644 --- a/src/content/docs/ko/tutorial/4-layouts/1.mdx +++ b/src/content/docs/ko/tutorial/4-layouts/1.mdx @@ -146,7 +146,7 @@ import { Steps } from '@astrojs/starlight/components'; - 레이아웃이 공통 요소의 HTML 렌더링을 담당하도록 합니다. -- 다음을 포함하여 레이아웃에 의해 처리되기 때문에 해당 페이지에서 더 이상 렌더링을 담당하지 않는 항목을 각 페이지에서 삭제합니다. +- 각 페이지에서 다음을 항목들을 포함하여 레이아웃에 의해 처리되는 모든 항목을 제거합니다. - HTML 요소 - 컴포넌트 및 가져오기 (imports) diff --git a/src/content/docs/ko/tutorial/5-astro-api/2.mdx b/src/content/docs/ko/tutorial/5-astro-api/2.mdx index 227c9880b693b..9f18a6d17c4ca 100644 --- a/src/content/docs/ko/tutorial/5-astro-api/2.mdx +++ b/src/content/docs/ko/tutorial/5-astro-api/2.mdx @@ -79,7 +79,7 @@ import { Steps } from '@astrojs/starlight/components'; {params: {tag: "blogging"}, props: {posts: allPosts}}, {params: {tag: "setbacks"}, props: {posts: allPosts}}, {params: {tag: "learning in public"}, props: {posts: allPosts}} - ] + ]; } const { tag } = Astro.params; diff --git a/src/content/docs/ko/tutorial/6-islands/1.mdx b/src/content/docs/ko/tutorial/6-islands/1.mdx index e96c008b6a211..a98162ebe4044 100644 --- a/src/content/docs/ko/tutorial/6-islands/1.mdx +++ b/src/content/docs/ko/tutorial/6-islands/1.mdx @@ -219,6 +219,6 @@ import SvelteCounter from '../components/SvelteCounter.svelte'; - [Astro 통합 안내서](/ko/guides/integrations-guide/) -- [Astro에서 UI 프레임워크 컴포넌트 사용](/ko/guides/framework-components/#프레임워크-컴포넌트-사용하기) +- [Astro에서 UI 프레임워크 컴포넌트 사용](/ko/guides/framework-components/#프레임워크-컴포넌트-사용) - [Astro 클라이언트 지시어 참조](/ko/reference/directives-reference/#클라이언트-지시어) diff --git a/src/content/docs/pl/basics/astro-components.mdx b/src/content/docs/pl/basics/astro-components.mdx new file mode 100644 index 0000000000000..7a0db079ed329 --- /dev/null +++ b/src/content/docs/pl/basics/astro-components.mdx @@ -0,0 +1,385 @@ +--- +title: Komponenty +description: Wprowadzenie do składni komponentów .astro. +i18nReady: true +--- + +**Komponenty Astro** stanowią podstawę każdego projektu Astro. Są to komponenty szablonów oparte wyłacznie na HTML, bez wykonywania JavaScriptu po stronie klienta. Komponenty Astro można łatwo rozpoznać po rozszerzeniu pliku, w którym się znajdują: `.astro`. + +Charakteryzują się one dużą elastycznością. Często zawierają **elementy interfejsu wielokrotnego użytku**, takie jak nagłóweki czy karty profilowe. W innych przypadkach mogą zawierać mniejsze fragmenty HTML, jak zestaw powszechnych tagów `<meta>`, które ułatwiają optymalizację pod kątem wyszukiwarek. Czasem mogą nawet definiować całą strukturę strony. + +Najważniejszą rzeczą do zapamiętania o komponentach Astro jest to, że **nie renderują się po stronie klienta**. Renderują się one do HTMLa podczas budowy strony lub na żądanie za pomocą [renderowania po stronie serwera (SSR)](/pl/guides/server-side-rendering/). Kod JavaScript umieszczony w frontmatterze komponentu zostanie automatycznie usunięty z ostatecznej wersji strony wysyłanej do przeglądarek użytkowników. Dzięki temu uzyskujemy szybszą witrynę, z domyślnie zerową ilością JavaScriptu. + +Jeśli jednak twój komponent Astro wymaga interakcji po stronie klienta, możesz dodać [standardowe tagi HTML `<script>`](/pl/guides/client-side-scripts/) lub [interaktywne komponenty korzystające z frameworka UI](/pl/guides/framework-components/#hydrating-interactive-components). + +## Struktura komponentu + +Komponent Astro składa się z dwóch głównych części: **skryptu** oraz **szablonu**. Obie te części pełnią różne funkcje, ale łącznie tworzą solidne podstawy, które są zarówno łatwe w użyciu, jak i wystarczająco elastyczne, aby poradzić sobie z dowolnym projektem, który chcesz zrealizować. + +```astro title="src/components/EmptyComponent.astro" +--- +// Skrypt komponentu (JavaScript) +--- +<!-- Szablon komponentu (HTML + wyrażenia JS) --> +``` + +### Skrypt komponentu + +Astro wykorzystuje code fence (`---`), aby zidentyfikować część skryptową w twoim komponencie Astro. Jeśli miałeś styczność z Markdown, być może już znasz podobne pojęcie, znane jako frontmatter. Pomysł na skrypt komponentu Astro był bezpośrednio inspirowany tym konceptem. + +Możesz użyć skryptu komponentu do napisania dowolnego kodu JavaScript, który jest potrzebny do wyrenderowania Twojego szablonu. Może to obejmować: + +- Importowanie innych komponentów Astro +- Importowanie komponentów z frameworków, takich jak React +- Importowanie danych, np. pliku JSON +- Pobieranie treści z API lub bazy danych +- Tworzenie zmiennych, do których będziesz odnosić się w swoim szablonie + + +```astro title="src/components/MyComponent.astro" +--- +import SomeAstroComponent from '../components/SomeAstroComponent.astro'; +import SomeReactComponent from '../components/SomeReactComponent.jsx'; +import someData from '../data/pokemon.json'; + +// Dostęp do przekazanych propów komponentu, np. `<X title="Witaj, Świecie" />` +const { title } = Astro.props; +// Pobieranie zewnętrznych danych, nawet z prywatnego API lub bazy danych +const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json()); +--- +<!-- Tutaj Twój szablon komponentu! --> +``` + +Code fence został zaprojektowany, aby zagwarantować, że JavaScript, który w nim piszesz, jest "ogrodzony". Nie przecieknie do Twojej aplikacji frontendowej i nie trafi do rąk Twoich użytkowników. Możesz bezpiecznie pisać tutaj kod, który jest kosztowny lub wrażliwy (jak komunikacja z Twoją prywatną bazą danych), nie martwiąc się o to, że kiedykolwiek znajdzie się w przeglądarce. + +:::tip +Możesz nawet używać TypeScriptu w swoim skrypcie komponentu! +::: + +### Szablon komponentu + +Szablon komponentu znajduje się poniżej code fence i określa to, jaki HTML generuje Twój komponent. + +Jeżeli używasz w tym miejscu tylko znaczników HTML, Twój komponent wyrenderuje go na dowolnej stronie Astro, gdzie zostanie zaimportowany i użyty. + +Jednak [składnia szablonu komponentu Astro](/pl/basics/astro-syntax/) obsługuje również **wyrażenia JavaScript**, tagi [`<style>`](/pl/guides/styling/#styling-in-astro) i [`<script>`](/pl/guides/client-side-scripts/#using-script-in-astro) wspierane przez Astro, **importowane komponenty**, oraz [**specjalne dyrektywy Astro**](/pl/reference/directives-reference/). Dane i wartości zdefiniowane w skrypcie komponentu mogą być używane w szablonie komponentu do dynamicznego generowania HTMLa. + +```astro title="src/components/MyFavoritePokemon.astro" +--- +// Tutaj Twój skrypt komponentu! +import Banner from '../components/Banner.astro'; +import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx'; +const myFavoritePokemon = [/* ... */]; +const { title } = Astro.props; +--- +<!-- Komentarze HTML są wspierane! --> +{/* Składnia komentarza JavaScript również jest wspierana! */} + +<Banner /> +<h1>Witaj świecie!</h1> + +<!-- Użyj propów i innych zmiennych z skryptu komponentu: --> +<p>{title}</p> + +<!-- Dołącz komponenty frameworków UI za pomocą dyrektywy `client:` w celu przeprowadzenia hydracji: --> +<ReactPokemonComponent client:visible /> + +<!-- Mieszaj HTML z wyrażeniami JavaScript, podobnie jak w JSX: --> +<ul> + {myFavoritePokemon.map((data) => <li>{data.name}</li>)} +</ul> + +<!-- Użyj dyrektywy szablonu do budowania nazw klas z wielu ciągów znaków lub nawet obiektów! --> +<p class:list={["add", "dynamic", {classNames: true}]} /> +``` + +## Projektowanie oparte na komponentach + +Komponenty zostały zaprojektowane w taki sposób, aby można ich było **używać w wielu miejscach** i **łączyć je w bardziej skomplikowane jednostki**. Możesz stosować komponenty wewnątrz innych komponentów, aby budować coraz bardziej zaawansowane elementy interfejsu użytkownika. Na przykład komponent `Button` może być użyty do stworzenia komponentu `ButtonGroup`: + +```astro title="src/components/ButtonGroup.astro" +--- +import Button from './Button.astro'; +--- +<div> + <Button title="Przycisk 1" /> + <Button title="Przycisk 2" /> + <Button title="Przycisk 3" /> +</div> +``` + + +## Propy w komponentach + +Komponent Astro może definiować i akceptować propy, które później stają się dostępne w szablonie komponentu i mogą zostać użyte w czasie renderowania HTMLa. Propy dostępne są w globalnej zmiennej `Astro.props` wewnątrz skryptu frontmattera. + +Oto przykład komponentu, który otrzymuje propy `greeting` i `name`. Zauważ, że właściwości do otrzymania są destrukturyzowane z globalnego obiektu `Astro.props`. + +```astro "Astro.props" +--- +// src/components/GreetingHeadline.astro +// Użycie: <GreetingHeadline greeting="Cześć" name="przyjacielu" /> +const { greeting, name } = Astro.props; +--- +<h2>{greeting}, {name}!</h2> +``` + +Ten komponent, gdy jest importowany i renderowany w innych komponentach Astro, układach lub stronach, może otrzymać te propy jako atrybuty: + +```astro /(\w+)=\S+/ +--- +// src/components/GreetingCard.astro +import GreetingHeadline from './GreetingHeadline.astro'; +const name = 'Astro'; +--- +<h1>Karta pozdrowień</h1> +<GreetingHeadline greeting="Cześć" name={name} /> +<p>Mam nadzieję, że masz wspaniały dzień!</p> +``` + +Możesz również definiować swoje propy za pomocą TypeScriptu używając interfejsu nazwanego `Props`. Astro automatycznie wykryje interfejs `Props` w Twoim frontmatterze i wyświetli ostrzeżenia/błędy typów. Propy mogą również otrzymać domyślne wartości podczas destrukturyzacji z `Astro.props`. + +```astro ins={3-6} +--- +// src/components/GreetingHeadline.astro +interface Props { + name: string; + greeting?: string; +} + +const { greeting = "Cześć", name } = Astro.props; +--- +<h2>{greeting}, {name}!</h2> +``` + +Każdemu propowi możemy przyporządkować domyślną wartość, która zostanie użyta, jeżeli nie przekażemy żadnej wartości w miejscu użycia komponentu. + +```astro ins="= \"Cześć\"" ins="= \"astronauto\"" +--- +// src/components/GreetingHeadline.astro +const { greeting = "Cześć", name = "astronauto" } = Astro.props; +--- +<h2>{greeting}, {name}!</h2> +``` + +## Sloty + +Element `<slot />` jest placeholderem dla zewnętrznej zawartości HTML, pozwalając na wstrzyknięcie (lub "za-slotowanie") elementów potomnych z innych plików do Twojego komponentu. + +Domyślnie, wszystkie dzieci przekazane do komponentu, zostaną pokazane w miejscu elementu `<slot />`. + +:::note +W przeciwieństwie do _propów_, które są atrybutami przekazywanymi do komponentu Astro dostępnymi do użycia w całym twoim komponencie za pomocą `Astro.props`, _sloty_ renderują elementy HTML tam, gdzie się znajdują. +::: + +```astro "<slot />" +--- +// src/components/Wrapper.astro +import Header from './Header.astro'; +import Logo from './Logo.astro'; +import Footer from './Footer.astro'; + +const { title } = Astro.props; +--- +<div id="content-wrapper"> + <Header /> + <Logo /> + <h1>{title}</h1> + <slot /> <!-- elementy potomne będą tutaj --> + <Footer /> +</div> +``` + +```astro {6-7} +--- +// src/pages/fred.astro +import Wrapper from '../components/Wrapper.astro'; +--- +<Wrapper title="Strona Andrzeja"> + <h2>Wszystko o Andrzeju</h2> + <p>Tutaj znajdziesz ciekawostki o Andrzeju, np. dowiesz się jak mu na imię.</p> +</Wrapper> +``` + + +Ten wzorzec stanowi podstawę [komponentu układu Astro](/pl/basics/layouts/): cała zawartość strony HTML może być "owinięta" tagami `<SomeLayoutComponent></SomeLayoutComponent>` i przekazana do komponentu do renderowania wewnątrz niego, wśród stałych elementów strony takich jak nagłówek czy stopka. + +### Nazwane sloty + +Komponent Astro może również zawierać nazwane sloty. Dzięki temu możesz przekazać elementy HTML do konkretnego slotu o danej nazwie. + +Aby nazwać slot, użyj atrybutu `name`: + +```astro /<slot .*?/>/ +--- +// src/components/Wrapper.astro +import Header from './Header.astro'; +import Logo from './Logo.astro'; +import Footer from './Footer.astro'; + +const { title } = Astro.props; +--- +<div id="content-wrapper"> + <Header /> + <slot name="after-header" /> <!-- dzieci z `slot="after-header"` zostaną pokazane tutaj --> + <Logo /> + <h1>{title}</h1> + <slot /> <!-- dzieci bez `slot`, albo z `slot="default"` zostaną pokazane tutaj --> + <Footer /> + <slot name="after-footer" /> <!-- dzieci z `slot="after-footer"` zostaną pokazane tutaj --> +</div> +``` + +Aby wstrzyknąć zawartość HTML do określonego slotu, użyj atrybutu `slot` na dowolnym dziecku i wskaż za jego pomocą nazwę slotu. Wszystkie inne dzieci trafią do domyślnego (nienazwanego) slotu. + +```astro /slot=".*?"/ +--- +// src/pages/fred.astro +import Wrapper from '../components/Wrapper.astro'; +--- +<Wrapper title="Fred's Page"> + <img src="https://my.photo/andrzej.jpg" slot="after-header" /> + <h2>Wszystko o Andrzeju</h2> + <p>Tutaj znajdziesz ciekawostki o Andrzeju, np. dowiesz się jak mu na imię.</p> + <p slot="after-footer">Copyright 2022</p> +</Wrapper> +``` + +:::tip +Użyj atrybutu `slot="my-slot"` na dziecku, które chcesz przekazać do slotu `<slot name="my-slot" />` w Twoim komponencie. +::: + +Aby przekazać wiele elementów HTML do slotu komponentu bez zawijania całości w element `<div>`, użyj atrybutu `slot=""` na [wbudowanym komponencie `<Fragment />`](/pl/reference/api-reference/#fragment-): + +```astro title="src/components/CustomTable.astro" "<slot name="header"/>" "<slot name="body"/>" +--- +// Stwórz tabelę z nazwanymi slotami w miejscu nagłówka i treści +--- +<table class="bg-white"> + <thead class="sticky top-0 bg-white"><slot name="header" /></thead> + <tbody class="[&_tr:nth-child(odd)]:bg-gray-100"><slot name="body" /></tbody> +</table> +``` + +Możesz teraz wstrzyknąć wiele wierszy i kolumn treści HTML wskazując za pomocą atrybutu `slot=""` zawartość nagłówka (`"header"`) oraz treść (`"body"`). Pojedyncze elementy HTML mogą być również stylowane: + +```astro title="src/components/StockTable.astro" {5-7, 9-13} '<Fragment slot="header">' '<Fragment slot="body">' +--- +import CustomTable from './CustomTable.astro'; +--- +<CustomTable> + <Fragment slot="header"> <!-- przekaż nagłówek tabeli --> + <tr><th>Nazwa produktu</th><th>Ilość</th></tr> + </Fragment> + + <Fragment slot="body"> <!-- przekaż zawartość tabeli --> + <tr><td>Klapki</td><td>64</td></tr> + <tr><td>Buty turystyczne</td><td>32</td></tr> + <tr><td>Trampki</td><td class="text-red-500">0</td></tr> + </Fragment> +</CustomTable> +``` + +Zauważ, że nazwane sloty muszą być bezpośrednimi dziećmi komponentu. Nie możesz przkazywać nazwanych slotów przez zagnieżdżone elementy. + +:::tip +Nazwane sloty mogą być również przeniesione do [komponentów frameworków UI](/pl/guides/framework-components/)! +::: + + +:::note +Nie jest możliwe generowanie nazwy slotu Astro dynamiczne, np. za pomocą funkcji `map`. Jeżeli potrzebujesz tej funkcjonalności wewnątrz komponentu frameworka UI, najlepiej będzie generować dynamiczne sloty wewnątrz samego frameworka. +::: + + +### Zastępcza zawartość w slotach +Sloty mogą również renderować **zawartość zastępczą**. Gdy wśród dzieci danego komponentu nie ma żadnych pasujących do slotu, wtedy `<slot />` wyrenderuje swoje dzieci zadeklarowane w tym komponencie. + +```astro {14} +--- +// src/components/Wrapper.astro +import Header from './Header.astro'; +import Logo from './Logo.astro'; +import Footer from './Footer.astro'; + +const { title } = Astro.props; +--- +<div id="content-wrapper"> + <Header /> + <Logo /> + <h1>{title}</h1> + <slot> + <p>To moja zawartość zastępcza, która zostanie użyta, gdy nie będzie pasującego dziecka.</p> + </slot> + <Footer /> +</div> +``` + +### Przenoszenie slotów + +Sloty mogą zostać przeniesione do innych komponentów. Na przykład, gdy tworzysz zagnieżdżone układy: + +```astro title="src/layouts/BaseLayout.astro" {9,12} +--- +--- +<html lang="en"> + <head> + <meta charset="utf-8" /> + <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> + <meta name="viewport" content="width=device-width" /> + <meta name="generator" content={Astro.generator} /> + <slot name="head" /> + </head> + <body> + <slot /> + </body> +</html> +``` + +```astro {6,7} +// src/layouts/HomeLayout.astro +--- +import BaseLayout from './BaseLayout.astro'; +--- +<BaseLayout> + <slot name="head" slot="head" /> + <slot /> +</BaseLayout> +``` + +:::note +Nazwane sloty mogą być przeniesione do innego komponentu używając obu atrybutów: `name` i `slot` na elemencie `<slot />` +::: + +W ten sposób domyślny slot oraz ten nazwany `head` przekazane do `HomeLayout` zostaną przeniesione do `BaseLayout`. + +```astro +// src/pages/index.astro +--- +import HomeLayout from '../layouts/HomeLayout.astro'; +--- +<HomeLayout> + <title slot="head">Astro +

Astro

+ +``` + + +## Komponenty HTML + +Astro wspiera importowanie i używnaie plików `.html` jako komponentów. Możesz również umieszczać takie pliki wewnątrz `src/pages`, aby definiować strony. Jest to przydatne, gdy masz już istniejącą stronę zbudowaną bez użycia frameworka albo gdy chcesz mieć pewność, że komponent zawsze będzie całkowicie statyczny. + +Komponenty HTML mogą zawierać tylko poprawną składnię HTML, stąd nie wspierają one kluczowych funkcjonalności zapewnianych przez Astro: +- Nie wspierają frontmattera, importów, czy wyrażeń dynamicznych +- Wszystkie elementy `