feat(fs.dev): Added HelpUs component

packages/freesewing.dev/components/help-us.js

@@ -0,0 +1,49 @@
+import Popout from 'shared/components/popout.js'
+
+const HelpUs = ({ mdx=false, slug='/' }) => (
+  <details className="mt-4">
+    <summary>Click here to learn how you can help us improve this page</summary>
+    {mdx && (
+      <Popout tip className='max-w-prose'>
+        <h6>Found a mistake?</h6>
+        You can <a
+          href={`https://github.com/freesewing/freesewing/edit/develop/markdown/dev/${slug}/en.md`}
+          className="text-secondary font-bold"
+        >edit this page on Github</a> and help us improve our documentation.
+      </Popout>
+    )}
+    <Popout comment by="joost" className='max-w-prose'>
+      <h6>Does this look ok?</h6>
+      <img
+        className="my-4 rounded"
+        src={`https://canary.backend.freesewing.org/og-img/en/dev${slug}`}
+      />
+      <p>
+        If it looks ok, great! But if not, please let me know about it.
+        Either by <a href="https://discord.freesewing.org/" className="text-secondary">
+          reaching out on Discord
+        </a> or feel free to <a
+          href="https://github.com/freesewing/freesewing/issues/new/choose"
+          className="text-secondary"
+        >create
+        an issue on Github</a>.
+      </p>
+      <h6>Why do you ask?</h6>
+      <p className="text-base">
+        I recently added a backend endpoint to auto-generate pretty (I hope) Open Graph images.
+        They are those little preview images you see when you paste a link in Discord (for example).
+      </p>
+      <p className="text-base">
+        This idea is that it will auto-generate an image, but I am certain there are some edge cases
+        where that will not work.
+        There are hundreds of pages on this website and checking them all one by one is not something
+        I see myself doing. But since you are here on this page, perhaps you could see if the image
+        above looks ok.
+      </p>
+      <p className="text-base">Thank you, I really appreciate your help with this.</p>
+    </Popout>
+  </details>
+)
+
+export default HelpUs
+

packages/freesewing.dev/pages/[...mdxslug].js

@@ -4,7 +4,7 @@ import mdxMeta from 'site/prebuild/mdx.en.js'
 import mdxLoader from 'shared/mdx/loader'
 import MdxWrapper from 'shared/components/wrappers/mdx'
 import Head from 'next/head'
-import Popout from 'shared/components/popout.js'
+import HelpUs from 'site/components/help-us.js'
 
 const MdxPage = props => {
 
@@ -36,43 +36,7 @@ const MdxPage = props => {
         <meta property="og:site_name" content="freesewing.dev" key='site' />
       </Head>
       <MdxWrapper mdx={props.mdx} app={app}/>
-      <details className="mt-4">
+      <HelpUs mdx slug={`/${props.page.slug}`} />
-        <summary>Click here to learn how you can help us improve this page</summary>
-        <Popout tip className='max-w-prose'>
-          <h6>Found a mistake?</h6>
-          You can <a
-            href={`https://github.com/freesewing/freesewing/edit/develop/markdown/dev/${props.page.slug}/en.md`}
-            className="text-secondary font-bold"
-          >edit this page on Github</a> and help us improve our documentation.
-        </Popout>
-        <Popout comment by="joost" className='max-w-prose'>
-          <h6>Does this look ok?</h6>
-          <img className="my-4 rounded" src={`https://canary.backend.freesewing.org/og-img/en/dev/${props.page.slug}`} />
-          <p>
-            I recently added a backend endpoint to auto-generate pretty (I hope) Open Graph images.
-            They are those little preview images you see when you paste a link in Discord (for example).
-          </p>
-          <p>
-            This idea is that it will auto-generate an image, but I am certain there are some edge cases
-            where that will not work.
-            There are hundreds of pages on this website and checking them all one by one is not something
-            I see myself doing. But since you are here on this page, perhaps you could see if the image
-            above looks ok.
-          </p>
-          <p>If it does look ok, then Yay! that is great and no need to do anything.</p>
-          <p>
-            If it is not ok, please let me know about it.
-            Either by <a href="https://discord.freesewing.org/" className="text-secondary">
-              reaching out on Discord
-            </a> or feel free to <a
-              href="https://github.com/freesewing/freesewing/issues/new/choose"
-              className="text-secondary"
-            >create
-            an issue on Github</a>.
-          </p>
-          <p>Thank you, I really appreciate your help with this.</p>
-        </Popout>
-      </details>
     </Page>
   )
 }

packages/freesewing.dev/pages/blog/[slug].js

@@ -6,7 +6,7 @@ import TimeAgo from 'react-timeago'
 import MdxWrapper from 'shared/components/wrappers/mdx'
 import Markdown from 'react-markdown'
 import Head from 'next/head'
-import Popout from 'shared/components/popout.js'
+import HelpUs from 'site/components/help-us.js'
 
 const strapi = "https://posts.freesewing.org"
 
@@ -95,36 +95,7 @@ const PostPage = ({ post, author }) => {
         <div className="max-w-prose text-lg lg:text-xl">
           <Author author={author} />
         </div>
-      <details className="mt-4">
+        <HelpUs blog slug={`/blog/${post.slug}`} />
-        <summary>Click here to learn how you can help us improve this page</summary>
-        <Popout comment by="joost" className='max-w-prose'>
-          <h6>Does this look ok?</h6>
-          <img className="my-4 rounded" src={`https://canary.backend.freesewing.org/og-img/en/dev/blog/${post.slug}`} />
-          <p>
-            I recently added a backend endpoint to auto-generate pretty (I hope) Open Graph images.
-            They are those little preview images you see when you paste a link in Discord (for example).
-          </p>
-          <p>
-            This idea is that it will auto-generate an image, but I am certain there are some edge cases
-            where that will not work.
-            There are hundreds of pages on this website and checking them all one by one is not something
-            I see myself doing. But since you are here on this page, perhaps you could see if the image
-            above looks ok.
-          </p>
-          <p>If it does look ok, then Yay! that is great and no need to do anything.</p>
-          <p>
-            If it is not ok, please let me know about it.
-            Either by <a href="https://discord.freesewing.org/" className="text-secondary">
-              reaching out on Discord
-            </a> or feel free to <a
-              href="https://github.com/freesewing/freesewing/issues/new/choose"
-              className="text-secondary"
-            >create
-            an issue on Github</a>.
-          </p>
-          <p>Thank you, I really appreciate your help with this.</p>
-        </Popout>
-      </details>
       </article>
     </Page>
   )
@@ -137,7 +108,6 @@ const PostPage = ({ post, author }) => {
         </div>
       </article>
       <Author author={author} type={props.type} t={props.t}/>
-      <pre>{JSON.stringify(props, null, 2)}</pre>
     </Page>
   )
 }

packages/freesewing.dev/pages/blog/index.js

@@ -4,6 +4,7 @@ import Link from 'next/link'
 import { posts } from 'site/prebuild/strapi.blog.en.js'
 import orderBy from 'lodash.orderby'
 import TimeAgo from 'react-timeago'
+import HelpUs from 'site/components/help-us.js'
 
 const strapi = "https://posts.freesewing.org"
 
@@ -55,6 +56,7 @@ const BlogIndexPage = (props) => {
           .map(post => <Preview app={app} post={post} key={post.slug}/>)
         }
       </div>
+      <HelpUs slug='/blog' />
     </Page>
   )
 }