Some more work on the scripting

.gitignore

@@ -16,3 +16,4 @@ yarn-error.log*
 
 # macOS-specific files
 .DS_Store
+snowpack.config.mjs

package.json

@@ -9,6 +9,7 @@
     "preview": "astro preview"
   },
   "devDependencies": {
+    "@snowpack/plugin-dotenv": "^2.2.0",
     "astro": "^0.20.12",
     "tailwindcss": "^2.2.17"
   },

src/assets/style/global.css

@@ -1,3 +1,41 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+#carbonads {
+    display: flex;
+    max-width: 346px;
+    background-color: #fafafa;
+    box-shadow: 0 1px 4px 1px rgb(0 0 0 / 10%);
+    z-index: 100;
+    width: 346px;
+    height: 116px;
+    padding: 0.5rem;
+    margin: 0 auto;
+    position: relative;
+}
+.carbon-wrap {
+    display: flex;
+    background: #F9F9F9;
+    border: 1px solid #F3F3F3;
+}
+.carbon-text {
+    font-size: 12px;
+    padding: 10px;
+    line-height: 1.5;
+    text-align: left;
+}
+.carbon-poweredby {
+    bottom: 0.5rem;
+    right: 0.5rem;
+    position: absolute;
+    padding: 6px 8px;
+    background: #f1f1f2;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: .5px;
+    font-weight: 600;
+    font-size: 8px;
+    line-height: 1;
+    border-top-left-radius: 3px;
+}

src/components/Ads.astro

@@ -0,0 +1,2 @@
+<!-- <script async defer type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CESDP5Q7&placement=daily-dev-tipscom" id="_carbonads_js"></script> -->
+<div id="carbonads"><span><span class="carbon-wrap"><a href="https://srv.carbonads.net/ads/click/x/GTND42JICWSDPK7WCAALYKQNCKBI62JWCEBDPZ3JCY7IPK7YCVBDC5QKC67D427YCT7D5277CW7DC53EF6BIT5QWHEYIKK7MCYADE53ECTNCYBZ52K?segment=placement:daily-dev-tipscom;" class="carbon-img" target="_blank" rel="noopener sponsored"><img src="https://cdn4.buysellads.net/uu/5/98592/1634826126-Carbon_Ads_260x200_V2_RITM0132871.png" alt="ads via Carbon" border="0" height="100" width="130" style="max-width: 130px;"></a><a href="https://srv.carbonads.net/ads/click/x/GTND42JICWSDPK7WCAALYKQNCKBI62JWCEBDPZ3JCY7IPK7YCVBDC5QKC67D427YCT7D5277CW7DC53EF6BIT5QWHEYIKK7MCYADE53ECTNCYBZ52K?segment=placement:daily-dev-tipscom;" class="carbon-text" target="_blank" rel="noopener sponsored">Bridge the gap between design and development with Kendo UI for Angular + free Figma Design Kits. Learn more.</a></span><a href="http://carbonads.net/?utm_source=daily-dev-tipscom&amp;utm_medium=ad_via_link&amp;utm_campaign=in_unit&amp;utm_term=carbon" class="carbon-poweredby" target="_blank" rel="noopener sponsored">ads via Carbon</a></span></div>

src/components/Article.astro

@@ -0,0 +1,12 @@
+<article class="px-4 py-4 flex justify-between border-b border-gray-200">
+      <div>
+      <a href="#">
+      <h3 class="leading-6 text-xl font-medium mb-2">Using bootstrap in Next.js + free starter</h3>
+      </a>
+      <p class="text-gray-500 mb-2">Tutorial on creating your own hooks in React</p>
+      <p class="text-sm text-gray-500">4 minutes</p>
+      </div>
+      <a href="#" class="flex-none ml-6">
+        <img class="drop-shadow rounded-lg h-16 w-16 object-cover" alt="Title of this article" src="https://daily-dev-tips.com/images/30-10-2021.jpg" loading="lazy" />
+        </a>
+    </article>

src/components/Mentions.astro

@@ -0,0 +1,9 @@
+<ul class="flex my-4">
+        <li><a href=""><img class="rounded-full w-7 h-7" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="-ml-3"><a href=""><img class="rounded-full w-7 h-7 border border-white" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="-ml-3"><a href=""><img class="rounded-full w-7 h-7 border border-white" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="-ml-3"><a href=""><img class="rounded-full w-7 h-7 border border-white" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="-ml-3"><a href=""><img class="rounded-full w-7 h-7 border border-white" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="-ml-3"><a href=""><img class="rounded-full w-7 h-7 border border-white" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="bg-white px-2 rounded-full font-medium text-gray-700 flex items-center">+ 2000 more devs liked or shared it</li>
+    </ul>

src/components/Stats.astro

@@ -1,4 +1,17 @@
+---
+const allPosts = Astro.fetchContent('../pages/posts/*.md');
+
+const response = await fetch(`${import.meta.env.SENDY_ENDPOINT}api/subscribers/active-subscriber-count.php`, {
+  method: "POST",
+  body: new URLSearchParams(`api_key=${import.meta.env.SENDY_API_KEY}&list_id=${import.meta.env.SENDY_LIST_ID}`)
+});
+const allSubscribers = await response.text();
+---
 <ul class="flex justify-center text-barbie-light text-sm mt-4 mb-10">
-    <li class="mr-8">4 dev tips sent</li>
-    <li>100 devs subscribed</li>
+    <li class="mr-8 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+  <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
+</svg>{allPosts.length} dev tips sent</li>
+    <li class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+  <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
+</svg>{allSubscribers} devs subscribed</li>
 </ul>

src/components/Subscribe.astro

@@ -1,6 +1,9 @@
 <form class="bg-white rounded-md max-w-prose mx-auto" action="https://sendy.daily-dev-tips.com/subscribe" accept-charset="utf-8" method="post" target="_blank" novalidate="">
     <div class="flex flex-wrap justify-between flex-row items-center">
-        <svg aria-hidden="true" focusable="false" class="w-5 h-5 ml-2 text-gray-300" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-gray-300" viewBox="0 0 20 20" fill="currentColor">
+  <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+  <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+</svg>
         <input type="email" class="flex-1 p-2.5 appearance-none text-gray-700 text-sm focus:outline-none" placeholder="Your Email">
         <button class="m-2 p-2.5 text-sm bg-barbie-light text-white rounded-md font-semibold">Subscribe</button>
     </div>

src/layouts/BaseLayout.astro

@@ -1,7 +1,7 @@
 ---
 import Logo from '../components/Logo.astro';
 // src/layouts/BaseLayout.astro
-const {title} = Astro.props;
+const {title,  showSubscribe = true} = Astro.props;
 ---
 <!DOCTYPE html>
 <html lang="en">
@@ -19,8 +19,14 @@ const {title} = Astro.props;
     <meta name="theme-color" content="#ffffff">
   </head>
   <body class="bg-indigo-50 font-sans">
-    <header class='h-[60px] flex items-center max-w-prose mx-auto px-4 md:px-0'>
+    <header class='h-[60px] flex items-center justify-between max-w-prose mx-auto px-4 md:px-0'>
       <Logo />
+      {showSubscribe && 
+              <button class="m-2 p-2.5 text-sm bg-barbie-light text-white rounded-md font-semibold flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
+  <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+  <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+</svg> Subscribe</button>
+      }
     </header>
     <main class="px-4">
     <slot />

src/layouts/Post.astro

@@ -0,0 +1,69 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import Article from '../components/Article.astro'
+import Subscribe from '../components/Subscribe.astro'
+import Ads from '../components/Ads.astro'
+import Mentions from '../components/Mentions.astro'
+
+const { content } = Astro.props
+---
+<BaseLayout title="Homepage">
+
+    <header class="max-w-prose my-6 mx-auto text-center">
+    <h1 class="bg-purple-600 text-white text-3xl font-bold inline px-2 break-words whitespace-pre-wrap	">{content.title}</h1>
+    <ul class="flex justify-center my-6">
+        <li><a href=""><img class="rounded-full w-7 h-7" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="-ml-3"><a href=""><img class="rounded-full w-7 h-7 border border-white" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="-ml-3"><a href=""><img class="rounded-full w-7 h-7 border border-white" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="-ml-3"><a href=""><img class="rounded-full w-7 h-7 border border-white" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="-ml-3"><a href=""><img class="rounded-full w-7 h-7 border border-white" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="-ml-3"><a href=""><img class="rounded-full w-7 h-7 border border-white" src="https://pbs.twimg.com/profile_images/1427162143049273347/n7sip_36_normal.jpg" /></a></li>
+        <li class="-ml-3 text-sm bg-white px-2 rounded-full font-medium text-gray-700 flex items-center">+ 10 devs liked it</li>
+    </ul>
+
+    <Ads />
+  </header>
+
+      <section class="bg-white -mx-4 flex flex-col mb-6">
+    <summary class="bg-indigo-50 rounded-xl flex mx-4 my-6 py-6">
+        <p class="px-4">🎯</p>
+        <p>In this article, we will cover two different ways of showing your reading interests through your GitHub profile: manually adding your DevCard by copying the code and automatically updating DevCard by leveraging GitHub actions.</p>
+    </summary>
+    <article class="prose mx-4 mb-6">
+        <slot />
+    </article>
+</section>
+
+<section class="mx-4 rounded-xl py-6 px-4 bg-white mb-10">
+    <div class="text-lg font-medium mb-4">Spread the knowledge <span class="text-gray-500">with fellow developers on Twitter</span></div>
+    <a href="" class="bg-[#1d9bf0] text-white p-3 rounded-xl font-sm inline-flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg> Tweet this tip</a>
+  <Mentions />
+  <div class="text-xs text-gray-500 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg> Powered by Webmentions - <a href="" class="text-barbie-light" target="_blank">Learn more</a></div>
+</section>
+
+        <h2 class="font-bold	 text-2xl tracking-wider mb-2">Read next 📖</h2>
+    <section class="bg-white -mx-4 border-t border-gray-200 mb-10">
+    <Article />
+     <Article />
+        <div class="px-4 py-4 flex border-b border-gray-200">
+      <nav class="mb-2">
+            <h3 class="leading-6 text-xl font-medium mb-4">Discover more tips</h3>
+      <ul class="flex">
+        <li><a href="/archive" class="block p-2 mr-2 mb-2 bg-purple-200 text-sm rounded-xl font-medium">#javascript</a></li>
+        <li><a href="/archive" class="block p-2 mr-2 mb-2 bg-purple-200 text-sm rounded-xl font-medium">#javascript</a></li>
+      </ul>
+    </nav>
+    </div>
+  </section>
+
+
+  <section class="mb-4">
+                <h4 class="leading-6 text-xl font-medium mb-4">Hey, I am Chris 👋</h4>
+                <p>I'm a full-stack web developer with 15+ years of experience. Every day I share bite-sized dev tips with 10,032 developers like you and I would love you to join us!</p>
+  </section>
+
+    <Subscribe />
+
+</BaseLayout>

src/pages/archive.astro

@@ -0,0 +1,41 @@
+---
+// src/pages/index.astro
+import BaseLayout from '../layouts/BaseLayout.astro'
+import Subscribe from '../components/Subscribe.astro'
+import Stats from '../components/Stats.astro'
+import Article from '../components/Article.astro'
+const response = await fetch(`${import.meta.env.SENDY_ENDPOINT}api/subscribers/active-subscriber-count.php`, {
+  method: "POST",
+  body: new URLSearchParams(`api_key=${import.meta.env.SENDY_API_KEY}&list_id=${import.meta.env.SENDY_LIST_ID}`)
+});
+const allSubscribers = await response.text();
+---
+<BaseLayout title="Homepage">
+  <header class="prose my-6 mx-auto">
+    <h1>Daily tips to go from junior to web developer</h1>
+  </header>
+
+<h2 class="uppercase text-sm text-gray-700 tracking-wider mb-2">Filter by tag</h2>
+    <nav class="mb-4">
+      <ul class="flex">
+        <li><a href="/archive" class="block p-2 mr-2 mb-2 bg-purple-500 text-sm rounded-xl font-medium">All</a></li>
+        <li><a href="/archive" class="block p-2 mr-2 mb-2 bg-purple-200 text-sm rounded-xl font-medium">#javascript</a></li>
+        <li><a href="/archive" class="block p-2 mr-2 mb-2 bg-purple-200 text-sm rounded-xl font-medium">#javascript</a></li>
+      </ul>
+    </nav>
+
+    <section class="bg-white -mx-4 border-t border-gray-200 mb-10">
+    <Article />
+     <Article />
+      <Article />
+  </section>
+
+  <section class="text-center mb-10">
+   <h4 class="text-2xl font-medium px-8 mb-6">{allSubscribers} devs subscribed and loving it so far!</h4>
+   <div class="bg-white rounded-lg px-4">
+    I'm loving it
+    <!-- <blockquote class="twitter-tweet"><p lang="en" dir="ltr">We&#39;ll be looking at creating static pages from this data for a blazing fast website. Let&#39;s get started!<br><br> author: <a href="https://twitter.com/DailyDevTips1?ref_src=twsrc%5Etfw">@DailyDevTips1</a> } <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a><a href="https://t.co/XH9PVGb3OO">https://t.co/XH9PVGb3OO</a></p>&mdash; The React Dev (@The_React_Dev) <a href="https://twitter.com/The_React_Dev/status/1454273101060050945?ref_src=twsrc%5Etfw">October 30, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> -->
+   </div>
+  </section>
+
+</BaseLayout>