replace mailchimp with substack

eliezerjoel · Oct 6, 2023 · aa80cb6 · aa80cb6
1 parent fa94152
commit aa80cb6
Show file tree

Hide file tree

Showing 16 changed files with 2,161 additions and 377 deletions.
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -1,6 +1,6 @@
 # Code of Conduct
 
-We as members and contributors, and leaders pledge to make participation in our community 
+We as members and contributors, and leaders pledge to make participation in our community
 a pleasant experience for everyone, interacting in ways that contribute to a welcoming and healthy community.
 
 Community leaders are responsible for clarifying and enforcing our code of conduct and will take appropriate and fair corrective action in
@@ -17,12 +17,12 @@ an individual is officially representing the community in public spaces.
 
 ## Examples of unacceptable behavior
 
-* Personal attacks including derogatory comments
-* Harassement of any kind (public, private, sexual...)
-* Publishing others' private information, such as a physical or email
+- Personal attacks including derogatory comments
+- Harassement of any kind (public, private, sexual...)
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Discussing politics and other controversial topics
-* Other conduct which could reasonably be considered inappropriate in a
+- Discussing politics and other controversial topics
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting or in a public community
 
 ## Enforcement Guidelines

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,17 +1,20 @@
 <!-- omit in toc -->
+
 # Contributing to first-issue
 
 First off, thanks for taking the time to contribute! ❤️
 
 All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
 
 > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
+>
 > - Star the project
 > - Tweet about it
 > - Refer this project in your project's readme
 > - Mention the project at local meetups and tell your friends/colleagues
 
 <!-- omit in toc -->
+
 ## Table of Contents
 
 - [Code of Conduct](#code-of-conduct)
@@ -25,15 +28,13 @@ All types of contributions are encouraged and valued. See the [Table of Contents
 - [Commit Messages](#commit-messages)
 - [Join The Project Team](#join-the-project-team)
 
-
 ## Code of Conduct
 
 This project and everyone participating in it is governed by the
 [first-issue Code of Conduct](https://github.com/lucavallin/first-issueblob/master/CODE_OF_CONDUCT.md).
 By participating, you are expected to uphold this code. Please report unacceptable behavior
 to `[email protected]`.
 
-
 ## I Have a Question
 
 > If you want to ask a question, we assume that you have read the available [Documentation](https://github.com/lucavallin/first-issue/blob/main/README.md#how-does-it-work).
@@ -66,11 +67,13 @@ Depending on how large the project is, you may want to outsource the questioning
 ## I Want To Contribute
 
 > ### Legal Notice <!-- omit in toc -->
+>
 > When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
 
 ### Reporting Bugs
 
 <!-- omit in toc -->
+
 #### Before Submitting a Bug Report
 
 A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible.
@@ -87,16 +90,18 @@ A good bug report shouldn't leave others needing to chase you up for more inform
 - Can you reliably reproduce the issue? And can you also reproduce it with older versions?
 
 <!-- omit in toc -->
+
 #### How Do I Submit a Good Bug Report?
 
 > You must never report security related issues, vulnerabilities or bugs including sensitive information to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent by email to .
+
 <!-- You may add a PGP key to allow the messages to be sent encrypted as well. -->
 
 We use GitHub issues to track bugs and errors. If you run into an issue with the project:
 
 - Open an [Issue](https://github.com/lucavallin/first-issue/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.)
 - Explain the behavior you would expect and the actual behavior.
-- Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case.
+- Please provide as much context as possible and describe the _reproduction steps_ that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case.
 - Provide the information you collected in the previous section.
 
 Once it's filed:
@@ -107,12 +112,12 @@ Once it's filed:
 
 <!-- You might want to create an issue template for bugs and errors that can be used as a guide and that defines the structure of the information to be included. If you do so, reference it here in the description. -->
 
-
 ### Suggesting Enhancements
 
 This section guides you through submitting an enhancement suggestion for first-issue, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions.
 
 <!-- omit in toc -->
+
 #### Before Submitting an Enhancement
 
 - Make sure that you are using the latest version.
@@ -121,6 +126,7 @@ This section guides you through submitting an enhancement suggestion for first-i
 - Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library.
 
 <!-- omit in toc -->
+
 #### How Do I Submit a Good Enhancement Suggestion?
 
 Enhancement suggestions are tracked as [GitHub issues](https://github.com/lucavallin/first-issue/issues).
@@ -134,14 +140,19 @@ Enhancement suggestions are tracked as [GitHub issues](https://github.com/lucava
 <!-- You might want to create an issue template for enhancement suggestions that can be used as a guide and that defines the structure of the information to be included. If you do so, reference it here in the description. -->
 
 ### Your First Code Contribution
+
 TBD
 
 ### Improving The Documentation
+
 TBD
 
 ## Styleguides
+
 ### Commit Messages
+
 TBD
 
 ## Join The Project Team
+
 TBD
diff --git a/components/NewsletterSection.tsx b/components/NewsletterSection.tsx
@@ -1,76 +1,55 @@
-import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
-import { faSpinner, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
-import { useFormFields, useMailChimpForm } from "use-mailchimp-form";
-import isEmail from "validator/lib/isEmail";
+import { useEffect } from "react";
 
+import Script from "next/script";
 import { SectionTitle } from "./SectionTitle";
 
-export const NewsletterSection = () => {
-  const [isValidEmail, setIsValidEmail] = useState(true);
+interface CustomSubstackWidget {
+  element: string;
+  substackUrl: string | undefined;
+  placeholder: string;
+  buttonText: string;
+  theme: string;
+  colors: {
+    primary: string;
+    input: string;
+    email: string;
+    text: string;
+  };
+}
 
-  const { loading, error, success, handleSubmit } = useMailChimpForm(
-    process.env.NEXT_PUBLIC_NEWSLETTER_URL!
-  );
-  const { fields, handleFieldChange } = useFormFields({
-    EMAIL: ""
-  });
+declare global {
+  interface Window {
+    CustomSubstackWidget?: CustomSubstackWidget;
+  }
+}
+
+export const NewsletterSection = () => {
+  useEffect(() => {
+    window.CustomSubstackWidget = {
+      element: "#substack-embed",
+      substackUrl: process.env.NEXT_PUBLIC_NEWSLETTER_URL,
+      placeholder: "your email address",
+      buttonText: "SUBSCRIBE",
+      theme: "custom",
+      colors: {
+        primary: "#cb3364",
+        input: "#ffffff",
+        email: "#52575c",
+        text: "#16181d"
+      }
+    };
+  }, []);
 
   return (
     <div className="pt-6">
-      <SectionTitle text="Join the Newsletter" />
+      <SectionTitle className="mb-2" text="Join the Newsletter" />
       <p className="text-sm">
-        Join the FirstIssue.dev newsletter and receive curated issues in your inbox every week.
+        Join &quot;The lucavallin Newsletter&quot; to receive curated issues from FirstIssue and
+        other articles in your inbox every other week.
       </p>
 
-      {!success && !error && (
-        <form
-          className="relative mt-4 flex rounded-md"
-          onSubmit={(event) => {
-            event.preventDefault();
-            handleSubmit(fields);
-          }}
-        >
-          <input
-            type="email"
-            id="EMAIL"
-            className="block w-full rounded-l-md px-4 py-3 pl-11 text-sm text-secondary"
-            value={fields.EMAIL}
-            onChange={(e) => {
-              setIsValidEmail(isEmail(e.target.value));
-              handleFieldChange(e);
-            }}
-          />
-          <div className="pointer-events-none absolute inset-y-0 left-0 z-20 flex items-center pl-4">
-            <FontAwesomeIcon
-              icon={loading ? faSpinner : isValidEmail ? faEnvelope : faWarning}
-              className={isValidEmail ? "text-secondary" : "text-primary"}
-              spin={loading}
-            />
-          </div>
-          <button
-            type="submit"
-            className="text-whitetransition-all inline-flex w-20 flex-shrink-0 items-center justify-center rounded-r-md border border-primary px-4 py-3 text-sm font-semibold transition-all hover:bg-primary"
-          >
-            Join
-          </button>
-        </form>
-      )}
-      {success && (
-        <div className="pt-4">
-          <div className="block rounded-md bg-primary px-1 py-3 text-center font-bold uppercase text-dark-400">
-            Thanks for subscribing!
-          </div>
-        </div>
-      )}
-      {error && (
-        <div className="pt-4">
-          <div className="block rounded-md border border-primary px-1 py-3 text-center font-bold uppercase text-primary">
-            Something went wrong
-          </div>
-        </div>
-      )}
+      <Script src="https://substackapi.com/widget.js" strategy="lazyOnload" />
+      <div id="substack-embed" className="relative mt-4 flex rounded-md"></div>
     </div>
   );
 };
diff --git a/components/Picker/LanguagePicker.tsx b/components/Picker/LanguagePicker.tsx
@@ -24,7 +24,7 @@ export const LanguagePicker = ({ activeTagId, languages, onLanguagePage }: Langu
         onClick={toggleCollapsible}
         className={`flex cursor-pointer ${isCollapsed ? "sm:flex" : ""}`}
       >
-        <SectionTitle text="Browse by Language" />
+        <SectionTitle className="mb-2" text="Browse by Language" />
         <FontAwesomeIcon
           icon={faChevronDown}
           className={`mx-2 mt-[3px] transform text-secondary transition-transform ${

diff --git a/components/Picker/SortPicker.tsx b/components/Picker/SortPicker.tsx
@@ -14,7 +14,7 @@ export const SortPicker = ({ activeSort, sortOptions, onSortOrderSelect }: SortP
       id="repositories-list"
     >
       <div>
-        <SectionTitle text="Sort Repositories" />
+        <SectionTitle className="mb-2" text="Sort Repositories" />
       </div>
       <div>
         {sortOptions.map((sortOption) => {

diff --git a/components/Picker/TagPicker.tsx b/components/Picker/TagPicker.tsx
@@ -41,7 +41,7 @@ export const TagPicker = ({ tags, activeTagId, onTagPage }: TagPickerProps) => {
         onClick={toggleCollapsible}
         className={`flex cursor-pointer ${isCollapsed ? "sm:flex" : ""}`}
       >
-        <SectionTitle text="Browse by tag" />
+        <SectionTitle className="mb-2" text="Browse by tag" />
         <FontAwesomeIcon
           icon={faChevronDown}
           className={`mx-2 mt-[3px] transform text-secondary transition-transform ${

diff --git a/components/Repository/RepositoryIssueNumberIndicator.tsx b/components/Repository/RepositoryIssueNumberIndicator.tsx
@@ -9,8 +9,9 @@ export const RepositoryIssueNumberIndicator = ({
 }: RepositoryIssueNumberIndicatorProps) => {
   return (
     <span
-      className={`ml-2 hidden rounded-full border min-w-fit h-fit p-2 text-sm font-semibold md:inline ${isIssueOpen ? "border-transparent bg-primary text-dark-400" : "text-light-200"
-        }`}
+      className={`ml-2 hidden h-fit min-w-fit rounded-full border p-2 text-sm font-semibold md:inline ${
+        isIssueOpen ? "border-transparent bg-primary text-dark-400" : "text-light-200"
+      }`}
     >
       {numberOfIssues}
       {numberOfIssues >= 10 ? "+" : ""} issue

diff --git a/components/SectionTitle.tsx b/components/SectionTitle.tsx
@@ -1,7 +1,10 @@
 type SectionTitleProps = {
   text: string;
+  className?: string;
 };
 
-export const SectionTitle = ({ text }: SectionTitleProps) => (
-  <h3 className="mb-2 text-sm font-bold uppercase tracking-wider text-secondary">{text}</h3>
+export const SectionTitle = ({ text, className }: SectionTitleProps) => (
+  <h3 className={`${className || ""} text-sm font-bold uppercase tracking-wider text-secondary`}>
+    {text}
+  </h3>
 );
diff --git a/components/SponsorsBar.tsx b/components/SponsorsBar.tsx
@@ -4,15 +4,15 @@ import { SectionTitle } from "./SectionTitle";
 
 export const SponsorsBar = () => (
   <div className="flex items-center justify-between bg-dark-400 px-6 py-3 transition-all hover:border-primary hover:text-primary">
-    <SectionTitle text="Sponsored by" />
-    <div className="flex items-center justify-between">
-      <Link href="https://cavall.in" className="grayscale hover:grayscale-0">
+    <div className="flex items-center justify-between gap-5">
+      <SectionTitle text="Sponsored by" />
+      <Link href="https://lucavall.in" className="grayscale hover:grayscale-0">
         <Image src="/sponsors/lucavallin.png" alt="lucavallin" width={25} height={25} />
       </Link>
     </div>
     <Link
       href={`${process.env.NEXT_PUBLIC_SPONSOR_URL}`}
-      className="rounded-sm border px-2 py-1 text-sm text-secondary hover:text-primary"
+      className="justify-self-end rounded-sm border px-2 py-1 text-sm text-secondary hover:text-primary"
     >
       Sponsor?
     </Link>

diff --git a/config.json b/config.json
@@ -21,12 +21,7 @@
       "postmarketOS/pmbootstrap|7301016",
       "LazyLibrarian/LazyLibrarian|9317860"
     ],
-    "labels": [
-      "quick win",
-      "Seeking community contribution",
-      "help wanted",
-      "good first issue"
-    ]
+    "labels": ["quick win", "Seeking community contribution", "help wanted", "good first issue"]
   },
   {
     "name": "GitHub",

diff --git a/data/get.ts b/data/get.ts
@@ -360,7 +360,9 @@ const getGitLabRepositories = async (
   // unfortunately, there's no way to filter repositories by number of issues or stars count
   // in the search query, so filter out repos with less than 3 open issues and less than 350
   // stars in here
-  return projects.filter((project: RepositoryModel) => project.issues.length >= 3 && project.stars > 300);
+  return projects.filter(
+    (project: RepositoryModel) => project.issues.length >= 3 && project.stars > 300
+  );
 };
 
 const providersSettings = {