Blog

src/components/main/navigation.tsx

@@ -1,4 +1,4 @@
-import { Github, Globe, Lightbulb, User } from "lucide-react";
+import { Book, Github, Globe, Lightbulb, Notebook, User } from "lucide-react";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 
@@ -26,6 +26,12 @@ export const Navigation = () => {
           <span>getbibtex.com</span>
         </>
       </Pill>
+      <Pill link="https://www.dzialowski.eu/">
+        <>
+          <Book className="h-3" />
+          <span>blog</span>
+        </>
+      </Pill>
       <Pill link="https://github.com/karlosos/getbibtex">
         <>
           <Github className="h-3" />
@@ -57,7 +63,7 @@ const Pill = ({
 }) => (
   <button
     type="button"
-    className="group mt-4 whitespace-nowrap rounded-lg border border-primary/20 bg-white/50 px-2 py-1.5 text-sm font-medium text-slate-700 shadow-lg shadow-blue-500/5 transition-all hover:shadow-blue-500/10"
+    className="group whitespace-nowrap rounded-lg border border-primary/20 bg-white/50 px-2 py-1.5 text-sm font-medium text-slate-700 shadow-lg shadow-blue-500/5 transition-all hover:shadow-blue-500/10"
   >
     <a target="_blank" href={link}>
       <div className="inline-flex items-center">{children}</div>

src/components/main/recent-posts.tsx

@@ -0,0 +1,66 @@
+import { Button } from "@/ui/button";
+import Link from "next/link";
+
+export const RecentPosts = () => {
+  return (
+    <div className="">
+      <div className="flex items-end justify-between">
+        <Title />
+        <Link href={"/blog"}>
+          <Button variant={"minor"} size={"minor"}>
+            Browse all
+          </Button>
+        </Link>
+      </div>
+      <div className="mt-8 flex min-h-[450px] justify-between">
+        <PostPreview
+          title="Introducing the Webflow Boosters App"
+          description="Advanced code solution added directly inside of Webflow at the click of a button"
+        />
+        <PostPreview
+          title="Top 20 UI Inspiration Sites (2023)"
+          description="We've collated the top 20 UI inspiration sites, all with links in one handy spot! Find your inspiration for your next project."
+        />
+        <PostPreview
+          title="How to add a countdown timer to Framer"
+          description="Learn how to add a beautiful countdown to your Framer project. Add it to your project in seconds."
+        />
+      </div>
+    </div>
+  );
+};
+
+const Title = () => {
+  return (
+    <div>
+      <h2 className="text-2xl font-medium text-slate-800">
+        getbibtex.com blog
+      </h2>
+      <div className="text-base  text-slate-600">
+        Discover articles and tutorials to help you with LaTeX
+      </div>
+    </div>
+  );
+};
+
+type PostPreviewProps = {
+  title: string;
+  description: string;
+};
+
+const PostPreview = (props: PostPreviewProps) => {
+  return (
+    <div className="group flex flex-col">
+      <div className="h-[250px] w-[280px] overflow-hidden rounded-lg bg-black transition-all duration-300 group-hover:h-[240px] ">
+        <img
+          src="https://cdn.prod.website-files.com/5beab1239ac8840644a660b4/65b851484b52a37a2720e29f_Cover%20Image-p-800.png"
+          className="h-[250px] transition-all duration-300 group-hover:scale-105"
+        />
+      </div>
+      <div className="max-w-[280px] px-1 py-2">
+        <h3 className="text-xl font-medium text-slate-800">{props.title}</h3>
+        <div className="text-sm  text-slate-400">{props.description}</div>
+      </div>
+    </div>
+  );
+};

src/pages/blog/index.tsx

@@ -0,0 +1,76 @@
+import { Navigation } from "@/components/main/navigation";
+import { Button } from "@/ui/button";
+import { Layout } from "@/ui/layout";
+import Link from "next/link";
+import React from "react";
+
+export default function Blog() {
+  return (
+    <Layout>
+      <main className="flex flex-col items-center">
+        {/* TODO: looks weird without margins on small monitor (and with big margin-top) */}
+        <div className="mt-2 flex w-full max-w-7xl flex-col items-center rounded-xl rounded-b-none bg-gradient-to-b from-[#f2f1ff] to-[#e7ebff] p-2 px-8 py-4 text-[#11124d] lg:mt-8">
+          <Navigation />
+          <div className="mt-12">
+            <div className="rounded-full border border-[#e3e3fe] bg-[#efeaff] px-4 py-1 text-sm font-medium">
+              Blog & Resources
+            </div>
+          </div>
+          <h1 className="text-medium mt-4 max-w-3xl text-center text-[64px] leading-none">
+            Discover articles and tutorials to enhance your LaTeX skills.
+          </h1>
+        </div>
+        <div className="flex h-96 w-full max-w-7xl flex-col items-center rounded-xl rounded-t-none bg-gradient-to-b from-[#e7ebff] to-white p-2 px-8 py-4 text-[#11124d]">
+          <div className="mt-3">
+            <FeaturedPost />
+          </div>
+        </div>
+        <BlogSectionIntro />
+      </main>
+    </Layout>
+  );
+}
+
+const FeaturedPost = () => (
+  <div className="big-shadow flex rounded-xl border bg-white p-4">
+    <div className="h-[250px] w-[280px] overflow-hidden rounded-lg bg-black ">
+      <img
+        src="https://cdn.prod.website-files.com/5beab1239ac8840644a660b4/65b851484b52a37a2720e29f_Cover%20Image-p-800.png"
+        className="h-[250px]"
+      />
+    </div>
+    <div className="mt-8 flex max-w-[400px] flex-col px-8">
+      <div className="flex gap-1">
+        <div className="rounded-full bg-[#f4e2ff] px-2 text-sm font-medium text-[#301d3b]">
+          Resources
+        </div>
+        <div className="text-sm text-neutral-600">•</div>
+        <div className="text-sm text-neutral-600">January 29, 2024</div>
+      </div>
+      <h2 className="mt-2 text-2xl font-medium">
+        Introducing the Webflow Boosters App
+      </h2>
+      <p className="mt-2 text-neutral-500">
+        Advanced code solution added directly inside of Webflow at the click of
+        a button
+      </p>
+      <div className="mt-2">
+        <Link href={"/blog"}>
+          <Button variant={"minor"} size={"minor"}>
+            Read Article
+          </Button>
+        </Link>
+      </div>
+    </div>
+  </div>
+);
+
+const BlogSectionIntro = () => {
+  return (
+    <div className="text-center mt-10 mb-10">
+      <div className="bg-[#f9f9ff] border inline-block rounded-full text-[#11023b] text-sm font-medium border-[#e3e3fe] px-3 py-1">Browse all our articles</div>
+      <h2 className="text-medium mt-4 max-w-lg text-center text-[56px] leading-none text-[#230d5b]">Latest Guides & News Articles</h2>
+      <div className="text-[#262556] mt-4">Stay informed with the latest guides and news.</div>
+    </div>
+  );
+};

src/pages/index.tsx

@@ -2,9 +2,7 @@ import { api } from "@/utils/api";
 import { Layout } from "@/ui/layout";
 import { Input } from "@/ui/input";
 import { Button } from "@/ui/button";
-import {
-  ArrowRightCircle,
-} from "lucide-react";
+import { ArrowRightCircle } from "lucide-react";
 import React, { useState } from "react";
 import { Textarea } from "@/ui/textarea";
 import type { EntryData } from "@/server/citations/types";
@@ -13,6 +11,7 @@ import { useUserId } from "@/utils/use-user-id";
 import { ErrorForm } from "@/components/main/error";
 import { CopyToClipboardButton } from "@/components/main/copy-to-clipboard-button";
 import { Navigation } from "@/components/main/navigation";
+import { RecentPosts } from "@/components/main/recent-posts";
 
 export default function Home() {
   const userId = useUserId();
@@ -52,7 +51,7 @@ export default function Home() {
   return (
     <Layout>
       <main className="flex flex-col items-center">
-        <div className="mt-2 flex h-80 w-full max-w-4xl flex-col items-center rounded-xl bg-gradient-to-b from-[#d5edd7] to-[#f8eec4] p-2 text-[#11124d] shadow-sm lg:mt-8">
+        <div className="mt-2 flex h-80 w-full max-w-4xl flex-col items-center rounded-xl bg-gradient-to-b from-[#d5edd7] to-[#f8eec4] p-2 text-[#11124d] shadow-sm lg:mt-8 pt-4">
           <Navigation />
           <HeaderText />
         </div>
@@ -77,38 +76,38 @@ export default function Home() {
         </div>
         {bibtexEntry && bibtexEntryData && (
           <div className="z-10 mt-10 w-full max-w-2xl rounded-md border border-primary/20 bg-slate-50/50 p-4 shadow-sm">
-            <>
-              <Textarea
-                className="h-48 bg-white"
-                value={bibtexEntry}
-                onChange={(e) => setBibtexEntry(e.target.value)}
-              />
-              <div className="mt-2 flex justify-end space-x-2">
-                <CopyToClipboardButton value={bibtexEntry} />
-              </div>
-              <div className="mt-4">
-                <span>
-                  {bibtexEntryData.author && bibtexEntryData.author + ". "}
-                </span>
-                <span className="italic">
-                  {bibtexEntryData.title +
-                    " --- " +
-                    bibtexEntryData.website +
-                    ". "}{" "}
-                </span>
-                <a href={bibtexEntryData.url}>{bibtexEntryData.url}</a>,
-                <span> [Accessed {getCurrentDateString()}]</span>
-              </div>
-            </>
+            <Textarea
+              className="h-48 bg-white"
+              value={bibtexEntry}
+              onChange={(e) => setBibtexEntry(e.target.value)}
+            />
+            <div className="mt-2 flex justify-end space-x-2">
+              <CopyToClipboardButton value={bibtexEntry} />
+            </div>
+            <div className="mt-4">
+              <span>
+                {bibtexEntryData.author && bibtexEntryData.author + ". "}
+              </span>
+              <span className="italic">
+                {bibtexEntryData.title +
+                  " --- " +
+                  bibtexEntryData.website +
+                  ". "}{" "}
+              </span>
+              <a href={bibtexEntryData.url}>{bibtexEntryData.url}</a>,
+              <span> [Accessed {getCurrentDateString()}]</span>
+            </div>
           </div>
         )}
         {isError && <ErrorForm url={url} />}
+        <div className="my-20 w-full max-w-4xl">
+          <RecentPosts />
+        </div>
       </main>
     </Layout>
   );
 }
 
-
 const HeaderText = () => (
   <>
     <h1 className="mt-3 text-4xl font-extrabold">Generate BibTeX from URL</h1>

src/styles/globals.css

@@ -76,7 +76,9 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
 }
 
@@ -95,3 +97,13 @@
   -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHN0cm9rZT0nIzAwMCcgdmlld0JveD0nMCAwIDI0IDI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxzdHlsZT4uc3Bpbm5lcl9WOG0xe3RyYW5zZm9ybS1vcmlnaW46Y2VudGVyO2FuaW1hdGlvbjpzcGlubmVyX3pLb2EgMnMgbGluZWFyIGluZmluaXRlfS5zcGlubmVyX1Y4bTEgY2lyY2xle3N0cm9rZS1saW5lY2FwOnJvdW5kO2FuaW1hdGlvbjpzcGlubmVyX1lwWlMgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZX1Aa2V5ZnJhbWVzIHNwaW5uZXJfektvYXsxMDAle3RyYW5zZm9ybTpyb3RhdGUoMzYwZGVnKX19QGtleWZyYW1lcyBzcGlubmVyX1lwWlN7MCV7c3Ryb2tlLWRhc2hhcnJheTowIDE1MDtzdHJva2UtZGFzaG9mZnNldDowfTQ3LjUle3N0cm9rZS1kYXNoYXJyYXk6NDIgMTUwO3N0cm9rZS1kYXNob2Zmc2V0Oi0xNn05NSUsMTAwJXtzdHJva2UtZGFzaGFycmF5OjQyIDE1MDtzdHJva2UtZGFzaG9mZnNldDotNTl9fTwvc3R5bGU+PGcgY2xhc3M9J3NwaW5uZXJfVjhtMSc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOS41JyBmaWxsPSdub25lJyBzdHJva2Utd2lkdGg9JzMnPjwvY2lyY2xlPjwvZz48L3N2Zz4=);
   mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHN0cm9rZT0nIzAwMCcgdmlld0JveD0nMCAwIDI0IDI0JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxzdHlsZT4uc3Bpbm5lcl9WOG0xe3RyYW5zZm9ybS1vcmlnaW46Y2VudGVyO2FuaW1hdGlvbjpzcGlubmVyX3pLb2EgMnMgbGluZWFyIGluZmluaXRlfS5zcGlubmVyX1Y4bTEgY2lyY2xle3N0cm9rZS1saW5lY2FwOnJvdW5kO2FuaW1hdGlvbjpzcGlubmVyX1lwWlMgMS41cyBlYXNlLWluLW91dCBpbmZpbml0ZX1Aa2V5ZnJhbWVzIHNwaW5uZXJfektvYXsxMDAle3RyYW5zZm9ybTpyb3RhdGUoMzYwZGVnKX19QGtleWZyYW1lcyBzcGlubmVyX1lwWlN7MCV7c3Ryb2tlLWRhc2hhcnJheTowIDE1MDtzdHJva2UtZGFzaG9mZnNldDowfTQ3LjUle3N0cm9rZS1kYXNoYXJyYXk6NDIgMTUwO3N0cm9rZS1kYXNob2Zmc2V0Oi0xNn05NSUsMTAwJXtzdHJva2UtZGFzaGFycmF5OjQyIDE1MDtzdHJva2UtZGFzaG9mZnNldDotNTl9fTwvc3R5bGU+PGcgY2xhc3M9J3NwaW5uZXJfVjhtMSc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nOS41JyBmaWxsPSdub25lJyBzdHJva2Utd2lkdGg9JzMnPjwvY2lyY2xlPjwvZz48L3N2Zz4=);
 }
+
+/* Custom shadows */
+.big-shadow {
+  box-shadow:
+    0 8px 24px rgba(20, 7, 140, 0.04),
+    0 1px 2px rgba(15, 9, 70, 0.08),
+    0 0 0 1px rgba(15, 9, 70, 0.04),
+    inset 0 0 3px rgba(20, 40, 100, 0.04),
+    inset 0 -4px 1px rgba(20, 40, 100, 0.06);
+}

src/ui/button.tsx

@@ -17,15 +17,19 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        minor: "font-medium text-[#36364a] shadow-[0_2px_6px_rgba(18,43,105,.04),_0_1px_2px_rgba(18,43,105,.08),_0_0_0_1px_rgba(18,43,105,.08);] transition-shadow hover:bg-white hover:shadow-[0_2px_6px_rgba(18,43,105,.12),_0_1px_2px_rgba(18,43,105,.12),_0_0_0_1px_rgba(18,43,105,.08);]"
       },
       size: {
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
+        minor: "h-8 rouded-lg px-3 text-sm"
       },
     },
     defaultVariants: {
+      // TODO: make that so we can define whole buttons with variants. so the variant can have size. or change 
+      // the order of classes?
       variant: "default",
       size: "default",
     },