{"id":9850,"date":"2024-03-29T11:34:46","date_gmt":"2024-03-29T10:34:46","guid":{"rendered":"https:\/\/via-internet.de\/blog\/?p=9850"},"modified":"2024-05-01T11:24:21","modified_gmt":"2024-05-01T09:24:21","slug":"astro-cookbook","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2024\/03\/29\/astro-cookbook\/","title":{"rendered":"Astro &#8211; Cookbook"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Installation<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u276f npm create astro@latest<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u276f npm create astro@latest --template with-tailwindcss\n\u276f npm add -D vite-plugin-static-copy\n\u276f npm add @shoelace-style\/shoelace<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Command Line \/ CLI<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>npm create astro@latest &#8212; &#8211;template basics<\/td><td><\/td><\/tr><tr><td>npm install<\/td><td>Installs dependencies<\/td><\/tr><tr><td>npm run dev<\/td><td>Starts local dev server at localhost:4321<\/td><\/tr><tr><td>npm run build<\/td><td>\tBuild your production site to .\/dist\/<\/td><\/tr><tr><td>npm run preview<\/td><td>Preview your build locally, before deploying<\/td><\/tr><tr><td>npm run astro &#8230;\t<\/td><td>Run CLI commands like astro add, astro check<\/td><\/tr><tr><td>npm run astro &#8212; &#8211;help<\/td><td>Get help using the Astro CLI<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Add packages<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u276f npx astro add tailwind<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Frameworks &#8211; WebComponents<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Shoelace<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Lit<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/lit.dev\/docs\">https:\/\/lit.dev\/docs<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Animation<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Animate Image by MouseOver \/ Hover<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>CSS<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.book {\n    width: 300px;\n    height: 480px;\n    position: relative;\n    transform-style: preserve-3d;\n    transform: rotateY(-30deg);\n    transition: 1s ease;\n    animation: 1s ease 0s 1 initAnimation;\n}\n\n.book:hover {\n    transform: rotateY(0deg);\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>page.astro<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"book\">\n    &lt;Image\n        src={\"\/cover-2.jpeg\"}\n        width={300}\n        height={600}\n        alt={book.title}\n        format={\"avif\"}\n    \/>\n&lt;\/div><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Installation Command Line \/ CLI npm create astro@latest &#8212; &#8211;template basics npm install Installs dependencies npm run dev Starts local dev server at localhost:4321 npm run build Build your production site to .\/dist\/ npm run preview Preview your build locally, before deploying npm run astro &#8230; Run CLI commands like astro add, astro check npm run astro &#8212; &#8211;help Get help using the Astro CLI Add packages Frameworks &#8211; WebComponents Shoelace Lit https:\/\/lit.dev\/docs Animation Animate Image by MouseOver \/ Hover CSS page.astro<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[160],"tags":[],"class_list":["post-9850","post","type-post","status-publish","format-standard","hentry","category-astro"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=9850"}],"version-history":[{"count":3,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9850\/revisions"}],"predecessor-version":[{"id":10180,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/9850\/revisions\/10180"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=9850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=9850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=9850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}