Add campsite links (#2030)

* Add campsite links

* Optimised images with calibre/image-actions

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

src/components/Bookmarks/BookmarkDetail.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { Link as LinkIcon } from 'react-feather'
 
 import { PrimaryButton } from '~/components/Button'
+import { Campsite } from '~/components/Campsite'
 import { Comments } from '~/components/Comments'
 import { Detail } from '~/components/ListDetail/Detail'
 import { TitleBar } from '~/components/ListDetail/TitleBar'
@@ -107,6 +108,12 @@ export function BookmarkDetail({ id }) {
               <span>Visit</span>
             </PrimaryButton>
           </div>
+
+          <div className="justify-center mt-6 flex">
+            <div className="w-full max-w-3xl mx-auto">
+              <Campsite referrer="/bookmark" />
+            </div>
+          </div>
         </Detail.ContentContainer>
 
         <RelatedBookmarks bookmark={bookmark} />

src/components/Campsite.tsx

@@ -0,0 +1,24 @@
+import Image from 'next/image'
+import Link from 'next/link'
+
+export function Campsite({ referrer }: { referrer?: string }) {
+  return (
+    <Link
+      href={`https://campsite.co?ref=brianlovin${referrer}`}
+      className="flex gap-2 md:gap-3 md:justify-center items-start md:items-center rounded-lg w-full px-4 bg-gray-50 dark:bg-gray-900 dark:border-gray-800 py-3 hover:bg-gray-100 text-tertiary text-balance text-[15px] dark:hover:bg-gray-800"
+    >
+      <Image
+        src="/static/img/desktop-app-icon.png"
+        alt="Campsite app icon"
+        width={200}
+        height={200}
+        quality={100}
+        className="flex-none w-7 h-7 self-start"
+      />
+      <span>
+        <span className="text-primary font-medium">Campsite</span> — your team’s
+        posts, calls, docs, and chat in one app. Try it for free.
+      </span>
+    </Link>
+  )
+}

src/components/HackerNews/PostComments.tsx

@@ -4,7 +4,7 @@ import { PostComment } from './PostComment'
 
 export function PostComments({ comments }) {
   return (
-    <div className="relative flex flex-1 flex-col border-t border-gray-150 pb-24 dark:border-gray-800">
+    <div className="relative flex flex-1 flex-col pb-24">
       <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col space-y-8 divide-y divide-gray-150 dark:divide-gray-800 md:space-y-12">
         {comments &&
           comments.length > 0 &&

src/components/HackerNews/PostDetail.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { Link as LinkIcon } from 'react-feather'
 
 import { PrimaryButton } from '~/components/Button'
+import { Campsite } from '~/components/Campsite'
 import { Detail } from '~/components/ListDetail/Detail'
 import { TitleBar } from '~/components/ListDetail/TitleBar'
 import routes from '~/config/routes'
@@ -94,6 +95,12 @@ export function PostDetail({ id }) {
           )}
         </Detail.ContentContainer>
 
+        <div className="justify-center flex">
+          <div className="px-4 md:px-8 w-full max-w-3xl mx-auto">
+            <Campsite referrer="/hn" />
+          </div>
+        </div>
+
         <PostComments comments={comments} />
 
         <div className="bg-gray-100 border-t border-gray-200 dark:border-gray-800 dark:bg-gray-900">

src/components/Stack/StackDetail.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import { Link as LinkIcon } from 'react-feather'
 
 import { PrimaryButton } from '~/components/Button'
+import { Campsite } from '~/components/Campsite'
 import { Comments } from '~/components/Comments'
 import { Detail } from '~/components/ListDetail/Detail'
 import { TitleBar } from '~/components/ListDetail/TitleBar'
@@ -108,6 +109,12 @@ export function StackDetail({ slug }) {
                 <StackUsedBy triggerSignIn={openModal} stack={stack} />
               )}
             </SignInDialog>
+
+            <div className="justify-center flex">
+              <div className="w-full max-w-3xl mx-auto">
+                <Campsite referrer="/stack" />
+              </div>
+            </div>
           </Detail.Header>
         </Detail.ContentContainer>
 

src/components/Writing/PostDetail.tsx

@@ -1,7 +1,6 @@
-import Link from 'next/link'
 import * as React from 'react'
 
-import { Comments } from '~/components/Comments'
+import { Campsite } from '~/components/Campsite'
 import { Detail } from '~/components/ListDetail/Detail'
 import { TitleBar } from '~/components/ListDetail/TitleBar'
 import { MarkdownRenderer } from '~/components/MarkdownRenderer'
@@ -37,11 +36,17 @@ export function PostDetail({ slug }) {
           title={post.title}
           titleRef={titleRef}
           scrollContainerRef={scrollContainerRef}
-          trailingAccessory={<PostActions post={post} />}
         />
 
         <Detail.ContentContainer>
           <Detail.Header>
+            {post.slug !== 'campsite' && (
+              <div className="justify-center mb-6 md:mb-12 flex">
+                <div className="w-full max-w-3xl mx-auto">
+                  <Campsite referrer="/post" />
+                </div>
+              </div>
+            )}
             <Detail.Title ref={titleRef}>{post.title}</Detail.Title>
             <span
               title={publishedAt.raw}
@@ -56,8 +61,6 @@ export function PostDetail({ slug }) {
           {/* bottom padding to give space between post content and comments */}
           <div className="py-6" />
         </Detail.ContentContainer>
-
-        <Comments refId={post.id} type={CommentType.Post} />
       </Detail.Container>
     </>
   )