Add GitHub actions step for validating prettier code style

.github/workflows/ci.yml

@@ -43,3 +43,17 @@ jobs:
       - name: Actually run the tests
         run: cargo test --all
         working-directory: tutorial-code
+  fmt-check:
+    name: Verify project code style
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install node dependencies
+        run: npm install
+
+      - name: Check formatting
+        run: npm run fmt:check

components/content.tsx

@@ -147,14 +147,13 @@ export default function Content({
           <section className="section content">
             <div className="columns">
               <div className="column is-two-thirds tk-markdown" ref={mdRef}>
-                <h1 className={`title ${isBlogRoute ? 'blog-title' : ''}`} id="">
+                <h1
+                  className={`title ${isBlogRoute ? "blog-title" : ""}`}
+                  id=""
+                >
                   {title}
                 </h1>
-                {isBlogRoute && (
-                  <p className="description">
-                    {description}
-                  </p>
-                )}
+                {isBlogRoute && <p className="description">{description}</p>}
                 <div dangerouslySetInnerHTML={{ __html: body }}></div>
                 <Footer next={next} prev={prev} mdPath={mdPath} />
               </div>

components/footer.tsx

@@ -17,10 +17,14 @@ export default function Footer() {
     <div key={name} className="column is-one-third">
       <p className="tk-lib-name">{name}</p>
       <p>
-        <a href={docs} target="_blank">Docs</a>
+        <a href={docs} target="_blank">
+          Docs
+        </a>
       </p>
       <p>
-        <a href={github} target="_blank">Github</a>
+        <a href={github} target="_blank">
+          Github
+        </a>
       </p>
     </div>
   ));
@@ -38,7 +42,10 @@ export default function Footer() {
             <div className="tk-help-links">
               <p>
                 Get Help:
-                <a href="https://github.com/tokio-rs/tokio/discussions" target="_blank">
+                <a
+                  href="https://github.com/tokio-rs/tokio/discussions"
+                  target="_blank"
+                >
                   <GitHubIcon className="is-medium" />
                 </a>
                 <a href="https://discord.gg/tokio" target="_blank">
@@ -74,7 +81,10 @@ export default function Footer() {
         <div className="container has-text-centered">
           <p>
             with the help of{" "}
-            <a href="https://github.com/tokio-rs/tokio/graphs/contributors" target="_blank">
+            <a
+              href="https://github.com/tokio-rs/tokio/graphs/contributors"
+              target="_blank"
+            >
               our contributors
             </a>
             .
@@ -83,7 +93,11 @@ export default function Footer() {
         <div className="container has-text-centered">
           <p>
             Hosted by{" "}
-            <a href="https://netlify.com"  target="_blank" rel="sponsored nofollow">
+            <a
+              href="https://netlify.com"
+              target="_blank"
+              rel="sponsored nofollow"
+            >
               Netlify
             </a>
           </p>

lib/markdown.js

@@ -72,7 +72,7 @@ const rehyperBlockquotePlusOptions = {
 const rehypeHighlightOptions = {
   languages: { rust: rust },
   aliases: { rust: ["rs", "rust,compile_fail", "rust,ignore", "rust="] },
-  plainText: ['txt', 'text', "plain", "log"]
+  plainText: ["txt", "text", "plain", "log"],
 };
 
 export const toHTML = async (raw) => {

package.json

@@ -8,7 +8,8 @@
     "build": "next build && npm run build:rss && next export",
     "build:rss": "node ./scripts/generate-rss-feed.js",
     "start": "next start",
-    "fmt": "prettier --write --prose-wrap always '{components,content,pages,lib,styles}/**/*.{js,jsx,ts,tsx,scss}'"
+    "fmt": "prettier --write --prose-wrap always '{components,content,pages,lib,styles}/**/*.{js,jsx,ts,tsx,scss}'",
+    "fmt:check": "prettier --check --prose-wrap always '{components,content,pages,lib,styles}/**/*.{js,jsx,ts,tsx,scss}'"
   },
   "dependencies": {
     "@next/font": "^13.1.1",

pages/[...slug].jsx

@@ -20,7 +20,13 @@ const menu = {
         ],
       },
       topics: {
-        nested: ["bridging", "shutdown", "tracing", "tracing-next-steps", "testing"],
+        nested: [
+          "bridging",
+          "shutdown",
+          "tracing",
+          "tracing-next-steps",
+          "testing",
+        ],
       },
       glossary: {},
       api: {

pages/blog/[...slug].jsx

@@ -27,7 +27,7 @@ export async function getStaticProps({ params: { slug: slugParam } }) {
   });
 
   const page = content.loadPage(`blog/${slug}`);
-  page.body = await toHTML(page.body)
+  page.body = await toHTML(page.body);
 
   let next = blog.getNextPost(slug);
   let previous = blog.getPreviousPost(slug);

styles/styles.scss

@@ -532,7 +532,7 @@ a:active {
     font-size: $menu-font-size;
     position: relative;
     z-index: 2;
-    
+
     @include tablet {
       max-width: 280px;
       margin-left: auto;
@@ -729,7 +729,7 @@ a:active {
       }
 
       &.blog-title {
-        margin-bottom : 0rem;
+        margin-bottom: 0rem;
       }
     }