add jobs rss and style footer popovers consistently

components/footer.js

@@ -81,17 +81,21 @@ const handleThemeChange = (dark) => {
 const RssPopover = (
   <Popover>
     <Popover.Content style={{ fontWeight: 500, fontSize: '.9rem' }}>
-      <a href='/rss' className='text-dark d-inline-flex'>
+      <a href='/rss' className='nav-link p-0 d-inline-flex'>
         home
       </a>
-      <span className='mx-2 text-dark'> \ </span>
-      <a href='/~bitcoin/rss' className='text-dark d-inline-flex'>
+      <span className='mx-2 text-muted'> \ </span>
+      <a href='/~bitcoin/rss' className='nav-link p-0 d-inline-flex'>
         bitcoin
       </a>
-      <span className='mx-2 text-dark'> \ </span>
-      <a href='/~nostr/rss' className='text-dark d-inline-flex'>
+      <span className='mx-2 text-muted'> \ </span>
+      <a href='/~nostr/rss' className='nav-link p-0 d-inline-flex'>
         nostr
       </a>
+      <span className='mx-2 text-muted'> \ </span>
+      <a href='/~jobs/rss' className='nav-link p-0 d-inline-flex'>
+        jobs
+      </a>
     </Popover.Content>
   </Popover>
 )
@@ -100,14 +104,14 @@ const ChatPopover = (
   <Popover>
     <Popover.Content style={{ fontWeight: 500, fontSize: '.9rem' }}>
       <a
-        href='https://tribes.sphinx.chat/t/stackerzchat' className='text-dark d-inline-flex'
+        href='https://tribes.sphinx.chat/t/stackerzchat' className='nav-link p-0 d-inline-flex'
         target='_blank' rel='noreferrer'
       >
         sphinx
       </a>
-      <span className='mx-2 text-dark'> \ </span>
+      <span className='mx-2 text-muted'> \ </span>
       <a
-        href='https://t.me/stackernews' className='text-dark d-inline-flex'
+        href='https://t.me/stackernews' className='nav-link p-0 d-inline-flex'
         target='_blank' rel='noreferrer'
       >
         telegram
@@ -120,14 +124,14 @@ const AnalyticsPopover = (
   <Popover>
     <Popover.Content style={{ fontWeight: 500, fontSize: '.9rem' }}>
       <a
-        href='https://plausible.io/stacker.news' className='text-dark d-inline-flex'
+        href='https://plausible.io/stacker.news' className='nav-link p-0 d-inline-flex'
         target='_blank' rel='noreferrer'
       >
         visitors
       </a>
-      <span className='mx-2 text-dark'> \ </span>
+      <span className='mx-2 text-muted'> \ </span>
       <Link href='/users/day' passHref>
-        <a className='text-dark d-inline-flex'>
+        <a className='nav-link p-0 d-inline-flex'>
           users
         </a>
       </Link>
@@ -181,57 +185,57 @@ export default function Footer ({ noLinks }) {
               </div>}
             <div className='mb-0' style={{ fontWeight: 500 }}>
               <Link href='/rewards' passHref>
-                <a className='nav-link p-0 d-inline-flex'>
+                <a className='nav-link p-0 p-0 d-inline-flex'>
                   rewards
                 </a>
               </Link>
             </div>
             <div className='mb-0' style={{ fontWeight: 500 }}>
               <OverlayTrigger trigger='click' placement='top' overlay={AnalyticsPopover} rootClose>
-                <div className='nav-link p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
+                <div className='nav-link p-0 p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
                   analytics
                 </div>
               </OverlayTrigger>
               <span className='mx-2 text-muted'> \ </span>
               <OverlayTrigger trigger='click' placement='top' overlay={ChatPopover} rootClose>
-                <div className='nav-link p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
+                <div className='nav-link p-0 p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
                   chat
                 </div>
               </OverlayTrigger>
               <span className='mx-2 text-muted'> \ </span>
               <OverlayTrigger trigger='click' placement='top' overlay={RssPopover} rootClose>
-                <div className='nav-link p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
+                <div className='nav-link p-0 p-0 d-inline-flex' style={{ cursor: 'pointer' }}>
                   rss
                 </div>
               </OverlayTrigger>
             </div>
             <div className='mb-2' style={{ fontWeight: 500 }}>
               <Link href='/faq' passHref>
-                <a className='nav-link p-0 d-inline-flex'>
+                <a className='nav-link p-0 p-0 d-inline-flex'>
                   faq
                 </a>
               </Link>
               <span className='mx-2 text-muted'> \ </span>
               <Link href='/guide' passHref>
-                <a className='nav-link p-0 d-inline-flex'>
+                <a className='nav-link p-0 p-0 d-inline-flex'>
                   guide
                 </a>
               </Link>
               <span className='mx-2 text-muted'> \ </span>
               <Link href='/story' passHref>
-                <a className='nav-link p-0 d-inline-flex'>
+                <a className='nav-link p-0 p-0 d-inline-flex'>
                   story
                 </a>
               </Link>
               <span className='mx-2 text-muted'> \ </span>
               <Link href='/changes' passHref>
-                <a className='nav-link p-0 d-inline-flex'>
+                <a className='nav-link p-0 p-0 d-inline-flex'>
                   changes
                 </a>
               </Link>
               <span className='mx-2 text-muted'> \ </span>
               <Link href='/privacy' passHref>
-                <a className='nav-link p-0 d-inline-flex'>
+                <a className='nav-link p-0 p-0 d-inline-flex'>
                   privacy
                 </a>
               </Link>

lib/rss.js

@@ -1,8 +1,8 @@
 import getSSRApolloClient from '../api/ssrApollo'
 
 const SITE_URL = 'https://stacker.news'
-const SITE_TITLE = 'Stacker News'
-const SITE_SUBTITLE = 'Like Hacker News, but we pay you Bitcoin.'
+const SITE_TITLE = 'stacker news'
+const SITE_SUBTITLE = 'It\'s like Hacker News, but we pay you Bitcoin.'
 
 function escapeXml (unsafe) {
   return unsafe.replace(/[<>&'"]/g, function (c) {
@@ -19,10 +19,14 @@ function escapeXml (unsafe) {
 const generateRssItem = (item) => {
   const guid = `${SITE_URL}/items/${item.id}`
   const link = item.url || guid
+  let title = item.title
+  if (item.isJob) {
+    title = item.title + ' \\ ' + item.company + ' \\ ' + `${item.location || ''}${item.location && item.remote ? ' or ' : ''}${item.remote ? 'Remote' : ''}`
+  }
   return `
     <item>
       <guid>${guid}</guid>
-      <title>${escapeXml(item.title)}</title>
+      <title>${escapeXml(title)}</title>
       <link>${escapeXml(link)}</link>
       <comments>${guid}</comments>
       <description><![CDATA[<a href="${guid}">Comments</a>]]></description>
@@ -31,13 +35,13 @@ const generateRssItem = (item) => {
   `
 }
 
-function generateRssFeed (items) {
+function generateRssFeed (items, sub = null) {
   const itemsList = items.map(generateRssItem)
   return `<?xml version="1.0" encoding="UTF-8" ?>
     <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
       <channel>
-        <title>${SITE_TITLE}</title>
-        <link>${SITE_URL}</link>
+        <title>${SITE_TITLE}${sub ? ` ~${sub}` : ''}</title>
+        <link>${SITE_URL}${sub ? `/~${sub}` : ''}</link>
         <description>${SITE_SUBTITLE}</description>
         <language>en</language>
         <lastBuildDate>${new Date().toUTCString()}</lastBuildDate>
@@ -59,7 +63,7 @@ export default function getGetRssServerSideProps (query, variables = null) {
     if (!items || error) return emptyProps
 
     res.setHeader('Content-Type', 'text/xml; charset=utf-8')
-    res.write(generateRssFeed(items))
+    res.write(generateRssFeed(items, params?.sub))
     res.end()
 
     return emptyProps

styles/globals.scss

@@ -379,6 +379,21 @@ div[contenteditable] {
   padding: .5rem !important;
 }
 
+.popover {
+  color: var(--theme-color);
+  background-color: var(--theme-body);
+  border-color: var(--theme-borderColor);
+}
+
+.popover .arrow::before {
+  border-top-color: var(--theme-borderColor);
+}
+
+.popover .arrow::after {
+  border-top-color: var(--theme-body);
+}
+
+
 .alert-dismissible .close::after {
   content: 'X';
 }