Astro format (#4811)

Settup prettier extension, fixed a few style inconsitencies too
microsoft · Oct 22, 2024 · cba630b · cba630b
1 parent 12a5605
commit cba630b
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 25 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -8,14 +8,21 @@
   "tabWidth": 2,
   "plugins": [
     "./packages/prettier-plugin-typespec/dist/index.js",
-    "./node_modules/prettier-plugin-organize-imports/index.js"
+    "./node_modules/prettier-plugin-organize-imports/index.js",
+    "prettier-plugin-astro"
   ],
   "overrides": [
     {
       "files": "*.tsp",
       "options": {
         "parser": "typespec"
       }
+    },
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
     }
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -28,7 +28,7 @@
     "editor.detectIndentation": false,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "[json][[jsonc][yaml][typespec][markdown][css]": {
+  "[json][[jsonc][yaml][typespec][markdown][css][astro]": {
     "editor.formatOnSave": true,
     "editor.formatOnPaste": true,
     "editor.insertSpaces": true,
@@ -58,8 +58,6 @@
   "vitest.enable": true,
   "vitest.commandLine": "node ./node_modules/vitest/vitest.mjs",
   "prettier.prettierPath": "./node_modules/prettier/index.cjs",
-  "prettier.documentSelectors": ["**/*.tsp"],
-  "testExplorer.errorDecoration": false,
-  "typespec.tsp-server.path": "${workspaceFolder}/packages/compiler",
-  "eslint.experimental.useFlatConfig": true // Still needed new version coming soon should work without https://github.com/microsoft/vscode-eslint/issues/1644
+  "prettier.documentSelectors": ["**/*.tsp", "**/*.astro"],
+  "typespec.tsp-server.path": "${workspaceFolder}/packages/compiler"
 }
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "micromatch": "^4.0.8",
     "picocolors": "~1.1.0",
     "prettier": "~3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-organize-imports": "~4.1.0",
     "rimraf": "~6.0.1",
     "syncpack": "^13.0.0",

diff --git a/packages/website-astro/astro.config.mjs b/packages/website-astro/astro.config.mjs
@@ -33,6 +33,7 @@ export default defineConfig({
     starlight({
       title: "TypeSpec",
       sidebar: await resolveSideBars(),
+      favicon: "/img/favicon.svg",
       customCss: ["./src/css/custom.css"],
       components: {
         Header: "./src/components/header/header.astro",

diff --git a/packages/website-astro/src/components/homepage/extensibility-illustration.astro b/packages/website-astro/src/components/homepage/extensibility-illustration.astro
@@ -3,6 +3,7 @@ import { Code } from "@astrojs/starlight/components";
 import extensibilityTs from "@site/src/assets/tsp-samples/extensibility/custom-lib.ts?raw";
 import extensibilityTsp from "@site/src/assets/tsp-samples/extensibility/custom-lib.tsp?raw";
 ---
+
 <style>
   .codeblock-seperator {
     height: 10px;

diff --git a/packages/website-astro/src/components/theme-picker.astro b/packages/website-astro/src/components/theme-picker.astro
@@ -14,6 +14,10 @@ import { Icon } from "@astrojs/starlight/components";
     border-radius: 70px;
   }
 
+  .theme-picker:hover {
+    background-color: var(--colorNeutralBackground3Hover);
+  }
+
   .theme-option {
     display: flex;
     padding: 2px;

diff --git a/packages/website-astro/src/css/fluentui.css b/packages/website-astro/src/css/fluentui.css
@@ -103,7 +103,7 @@
 html {
   font-family: var(--fontFamilyBase);
   color: var(--colorNeutralForeground1);
-  font-size: var(--fontSizeBase300);
+  font-size: var(--fontSizeBase400);
   font-weight: var(--fontWeightRegular);
   line-height: var(--lineHeightBase300);
   -webkit-font-smoothing: antialiased;

diff --git a/packages/website-astro/src/layouts/base-layout.astro b/packages/website-astro/src/layouts/base-layout.astro
@@ -2,6 +2,7 @@
 import "@site/src/css/custom.css";
 import Header from "@site/src/components/header/header.astro";
 import Footer from "@site/src/components/footer/footer.astro";
+import { baseUrl } from "../utils/base-url";
 
 export interface Props {
   /** Whether to render the footer @default true */
@@ -13,6 +14,8 @@ const { footer = true } = Astro.props;
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href={Astro.site + baseUrl("/img/favicon.svg")} />
+    <link rel="og:image" type="image/svg+xml" href={baseUrl("/img/social.svg")} />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://consentdeliveryfd.azurefd.net/mscc/lib/v2/wcp-consent.js" is:inline
     ></script>

diff --git a/packages/website-astro/src/layouts/content.astro b/packages/website-astro/src/layouts/content.astro
@@ -8,7 +8,6 @@ import BaseLayout from "./base-layout.astro";
     max-width: 1024px;
     margin: auto;
     padding: 1rem 2rem;
-
   }
 </style>
 

diff --git a/packages/website-astro/src/pages/blog/_BlogPostPreview.astro b/packages/website-astro/src/pages/blog/_BlogPostPreview.astro
@@ -24,17 +24,17 @@ const image = post.data.image && (await resolveBlogImagePath(post.slug, post.dat
 ---
 
 <style>
-  .card > :global(.bg) {
+  .link > :global(.card .bg) {
     border: 1px solid var(--colorNeutralStroke3);
-    border-radius: 0 !important;
+    border-radius: 0;
   }
-  .card {
+  .link {
+    display: block;
     border-radius: 0;
     color: var(--colorNeutralForeground1);
-
   }
-  .card:hover {
-    outline: solid var(--colorBrandForeground1)
+  .link:hover {
+    outline: solid var(--colorBrandForeground1);
   }
   .date {
     display: block;
@@ -93,12 +93,8 @@ const image = post.data.image && (await resolveBlogImagePath(post.slug, post.dat
   }
 </style>
 <article aria-labelledby={post.slug}>
-  <Link
-    href={`/blog/${post.slug}/`}
-    data-astro-prefetch
-    class="outline-none after:absolute after:inset-0"
-  >
-    <Card noPadding class="card">
+  <Link class="link" href={`/blog/${post.slug}/`} data-astro-prefetch>
+    <Card noPadding>
       <header>
         <time class="date" datetime={post.data.publishDate.toISOString()}>
           {format(post.data.publishDate, "MMMM d, yyyy")}

diff --git a/packages/website-astro/src/pages/blog/index.astro b/packages/website-astro/src/pages/blog/index.astro
@@ -25,7 +25,6 @@ const posts = await getCollection("blog");
     margin: 0;
     padding: 0;
   }
-
 </style>
 <BaseLayout>
   <div class="content">

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml