Added Carbon Ads to article page, fixed community wall date issue whe…

…re it spilled past the device width

components/CommunityEntry.tsx

@@ -62,7 +62,7 @@ export function CommunityEntry({ session, message }) {
  </div>
 
  <div>
- <p className="p-0 m-0 text-base text-slate-400 dark:text-slate-500">
+ <p className="hidden p-0 m-0 text-base md:block text-slate-400 dark:text-slate-500">
  {dayjs(message.created_at).format('MM/DD/YYYY')}
  </p>
  </div>

pages/blog/[slug].tsx

@@ -7,6 +7,7 @@ import {
  getMoreArticlesToSuggest
 } from '@/lib/notion';
 
+import { Ad } from '@/components/Ad';
 import { AnchorLink } from '@/components/AnchorLink';
 import { ArticleList } from '@/components/ArticleList';
 import { Callout } from '@/components/Callout';
@@ -304,7 +305,9 @@ const ArticlePage = ({
  </div>
  </article>
  {/* Left Sticky */}
- <div className="sticky hidden w-full h-24 lg:col-start-1 lg:col-end-3 top-24 lg:block"></div>
+ <div className="sticky hidden w-full h-24 lg:col-start-1 lg:col-end-3 top-24 lg:block">
+ <Ad />
+ </div>
  <div className="lg:col-start-3 lg:col-end-11">
  {content.map((block) => (
  <Fragment key={block.id}>{renderBlocks(block)}</Fragment>

pages/stats.tsx

@@ -62,9 +62,6 @@ export default function Stats() {
  <PartyCount partyCount={totalReactions?.partyCount} />
  <TotalReactions />
  </div>
- <div className="flex items-center justify-center my-8">
- <Ad />
- </div>
  </Container>
  );
 }

public/rss/feed.xml

@@ -4,8 +4,15 @@
  <description><![CDATA[Braydon Coyer]]></description>
  <link>https://braydoncoyer.dev</link>
  <generator>RSS for Node</generator>
- <lastBuildDate>Sat, 10 Dec 2022 23:49:57 GMT</lastBuildDate>
+ <lastBuildDate>Tue, 13 Dec 2022 02:01:28 GMT</lastBuildDate>
  <atom:link href="https://braydoncoyer.dev/rss.xml" rel="self" type="application/rss+xml"/>
+ <item>
+ <title><![CDATA[Blogfolio V3 - Update 2022]]></title>
+ <description><![CDATA[I am excited to announce the launch of my annual blogfolio update, featuring a sleek new logo, subtle design changes, and a convenient link preview popup feature. Let’s take an in-depth look at what’s new!]]></description>
+ <link>https://braydoncoyer.dev/blog/blogfolio-v3-update-2022</link>
+ <guid isPermaLink="true">https://braydoncoyer.dev/blog/blogfolio-v3-update-2022</guid>
+ <pubDate>Tue, 13 Dec 2022 13:00:00 GMT</pubDate>
+ </item>
  <item>
  <title><![CDATA[How To Create an Animated Loading Spinner with Tailwind CSS]]></title>
  <description><![CDATA[Tailwind CSS has built-in animation utility classes which enable you to add or create your own custom loading spinners in minutes!]]></description>

styles/globals.css

@@ -27,55 +27,67 @@
  @apply transition-all hover:ring ring-midnight dark:ring-gray-100 hover:ring-offset-4 hover:ring-offset-white dark:hover:ring-offset-dark;
 }
 
+.dark #carbonads {
+ background: #1e293b;
+ border: 1px solid #334155;
+}
+
+.light #carbonads {
+ background: #f1f5f9;
+ border: 1px solid #e2e8f0;
+}
+
 #carbonads {
+ display: block;
+ overflow: hidden;
+ padding: 1em;
+ border-radius: 1em;
+ text-align: center;
+ font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
- Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
- sans-serif;
- max-width: 300px;
+ Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+ line-height: 1.5;
 }
 
-#carbonads > span {
- display: block;
- position: relative;
- padding: 10px;
+#carbonads a {
+ color: inherit;
+ text-decoration: none;
+}
 
- border-radius: 4px;
- background-color: #fff;
- box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, 0.05),
- 0 0 2px 2px hsla(0, 0%, 0%, 0.05), 0 0 4px 4px hsla(0, 0%, 0%, 0.05);
+#carbonads .carbon-wrap img {
+ width: 100%;
+ height: 100%;
+ display: inline-block;
+ margin: 0em;
 }
 
-#carbonads .carbon-wrap {
- display: flex;
+#carbonads a:hover {
+ color: inherit;
 }
 
-#carbonads .carbon-img {
- margin-right: 10px;
+#carbonads span {
+ display: block;
+ overflow: hidden;
+}
 
+.carbon-img {
+ display: block;
+ margin: 0 auto 8px;
  line-height: 1;
 }
 
-#carbonads .carbon-text {
- margin-bottom: 12px;
-
- font-size: 12px;
- line-height: 1.45;
- text-decoration: none;
- color: #637381;
+.carbon-text {
+ display: block;
+ margin-bottom: 8px;
+ max-width: 130px;
 }
 
-#carbonads .carbon-poweredby {
- position: absolute;
- bottom: 10px;
- left: 152px;
-
- font-size: 8px;
- font-weight: 500;
- line-height: 1;
- text-decoration: none;
- letter-spacing: 0.5px;
+.carbon-poweredby {
+ display: block;
  text-transform: uppercase;
- color: #c5cdd0;
+ letter-spacing: 1px;
+ font-size: 10px;
+ line-height: 1;
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */