Merge pull request #55 from brown-ccv/pubs-page

feat: init pubs page

package.json

@@ -32,6 +32,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.3",
+    "react-select": "^5.8.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   },

public/admin/config.yml

@@ -4,7 +4,7 @@ backend:
   name: github
   repo: brown-ccv/mmp
   base_url: /
-media_folder: public/files
+media_folder: public/images
 media_library:
   max_file_size: 734003200
 i18n:
@@ -68,22 +68,44 @@ collections:
         format: yyyy
   - name: pubs
     label: Publications
-    folder: src/content/pubs
+    folder: src/content/publications
+    media_folder: public/pubs
     create: true
-    slug: '{{year}}-{{month}}-{{day}}_{{title}}_{{slug}}'
+    identifier_field: citation
+    slug: '{{fields.classification}}-{{fields.pubDate}}_{{fields.author}}'
     fields:
       - name: classification
         label: Classification
         widget: select
         options: [ 'Book', 'Chapter', 'Article', 'Dissertation' ]
+      - name: author
+        label: Author(s)
+        widget: text
+      - name: pubDate
+        i18n: duplicate
+        label: Publish Date
+        widget: datetime
+        date_format: MM.yyyy
+        time_format: false
       - name: citation
         i18n: duplicate
         label: Citation
         widget: text
+      - name: image
+        required: false
+        i18n: duplicate
+        label: Image
+        widget: image
       - name: url
+        required: false
         i18n: duplicate
         label: Link to Publication
         widget: string
+      - name: pdf
+        required: false
+        i18n: duplicate
+        label: PDF
+        widget: file
   - name: data
     label: Data
     create: true

src/components/Publications.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from "react"
+import Select from "react-select"
+import type { InferEntrySchema } from "astro:content"
+import type { Classification } from "../content/config.ts"
+import PubPlaceholder from "./svg/PubPlaceholder.tsx"
+
+interface PubProps {
+  publications: InferEntrySchema<"publications">[]
+}
+
+const PublicationSection: React.FC<PubProps> = ({ publications }) => {
+  const classificationOptions = [
+    { value: "Book", label: "Books" },
+    {
+      value: "Article",
+      label: "Articles",
+    },
+    { value: "Dissertation", label: "Dissertations" },
+    { value: "Chapter", label: "Chapters" },
+  ] as const
+
+  const [searchInput, setSearchInput] = useState("")
+  const [classificationFilter, setClassificationFilter] =
+    useState<Readonly<{ value: Classification; label: string }[]>>(classificationOptions)
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault()
+    setSearchInput(e.target.value)
+  }
+
+  const shownPubs = publications.filter(
+    (pub) =>
+      classificationFilter.map((item) => item.value).includes(pub.classification) &&
+      pub.citation.toLowerCase().includes(searchInput.toLowerCase())
+  )
+  return (
+    <>
+      <section className="flex flex-col lg:flex-row gap-4 py-14">
+        <div>
+          <label className="pl-1">Search for a Publication</label>
+          <input
+            type="text"
+            placeholder="🔍 Search here"
+            onChange={handleChange}
+            value={searchInput}
+            className="min-w-[460px]"
+          />
+        </div>
+        <div>
+          <label className="pl-1">Show</label>
+          <Select
+            options={classificationOptions}
+            isMulti
+            isSearchable={false}
+            closeMenuOnSelect={false}
+            defaultValue={classificationOptions}
+            styles={{
+              control: (baseStyles) => ({
+                ...baseStyles,
+                minWidth: "526px",
+                borderRadius: "9999px",
+                background: "#FAFAFA",
+                boxShadow:
+                  "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
+                paddingTop: ".75rem",
+                paddingBottom: ".75rem",
+                paddingLeft: "2rem",
+                paddingRight: "2rem",
+              }),
+            }}
+            onChange={(option) => setClassificationFilter(option)}
+          />
+        </div>
+      </section>
+
+      {shownPubs && (
+        <section className="flex flex-col gap-6">
+          {classificationOptions.map((option) => {
+            return (
+              <article key={option.value}>
+                <h2 className="py-2">{option.label}</h2>
+                <div className="grid grid-cols-1 lg:grid-cols-2  gap-12">
+                  {shownPubs.map((publication, i) => {
+                    if (publication.classification === option.value) {
+                      return (
+                        <div key={i} className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                          <div className="hidden md:block drop-shadow-md">
+                            {publication.image ? (
+                              <img
+                                className="drop-shadow-md object-cover w-48 h-72"
+                                src={publication.image}
+                              />
+                            ) : (
+                              <PubPlaceholder />
+                            )}
+                          </div>
+
+                          <div className="flex flex-col gap-8 ">
+                            <p>{publication.citation}</p>
+                            {publication.pdf && (
+                              <button
+                                className="bg-neutral-500 text-neutral-50 rounded-full py-3 px-7 w-2/3"
+                                onClick={() => window.open(`${publication.pdf}`, "_blank")}
+                              >
+                                View PDF
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      )
+                    }
+                  })}
+                </div>
+              </article>
+            )
+          })}
+        </section>
+      )}
+    </>
+  )
+}
+
+export default PublicationSection

src/components/svg/PubPlaceholder.tsx

@@ -0,0 +1,81 @@
+import React from "react"
+
+const PubPlaceholder: React.FC = () => {
+  return (
+    <>
+      <svg
+        width="232"
+        height="342"
+        viewBox="0 0 232 342"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g filter="url(#filter0_dd_313_544)">
+          <rect width="200" height="310" transform="translate(12 12)" fill="#A7998B" />
+          <rect width="143" height="30" transform="translate(29 32)" fill="#D4CDC4" />
+          <rect width="143" height="12" transform="translate(29 72)" fill="#D4CDC4" />
+          <rect width="143" height="12" transform="translate(29 94)" fill="#D4CDC4" />
+        </g>
+        <defs>
+          <filter
+            id="filter0_dd_313_544"
+            x="0"
+            y="0"
+            width="232"
+            height="342"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dx="12" dy="12" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.654902 0 0 0 0 0.6 0 0 0 0 0.545098 0 0 0 0.35 0"
+            />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_313_544" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feMorphology
+              radius="4"
+              operator="dilate"
+              in="SourceAlpha"
+              result="effect2_dropShadow_313_544"
+            />
+            <feOffset dx="4" dy="4" />
+            <feGaussianBlur stdDeviation="6" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.654902 0 0 0 0 0.6 0 0 0 0 0.545098 0 0 0 0.35 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="effect1_dropShadow_313_544"
+              result="effect2_dropShadow_313_544"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect2_dropShadow_313_544"
+              result="shape"
+            />
+          </filter>
+        </defs>
+      </svg>
+    </>
+  )
+}
+
+export default PubPlaceholder

src/content/config.ts

@@ -1,5 +1,7 @@
 import { defineCollection, z } from "astro:content"
 
+export type Classification = "Book" | "Article" | "Dissertation" | "Chapter"
+
 const news = defineCollection({
   type: "content",
   // Type-check frontmatter using a schema
@@ -23,6 +25,19 @@ const files = defineCollection({
   }),
 })
 
+const publications = defineCollection({
+  type: "content",
+  schema: z.object({
+    classification: z.custom<Classification>(),
+    author: z.string(),
+    pubDate: z.coerce.date(),
+    citation: z.string(),
+    image: z.string().optional(),
+    pdf: z.string().optional(),
+    url: z.string().optional(),
+  }),
+})
+
 const people = defineCollection({
   type: "content",
   schema: z.object({
@@ -33,4 +48,4 @@ const people = defineCollection({
     institution: z.string(),
   }),
 })
-export const collections = { news: news, data: files, people: people }
+export const collections = { news: news, data: files, people: people, publications: publications }

src/content/people/advisor.md

@@ -1,9 +1,10 @@
 ---
-type: Leadership
+type: Advisors
 name: David Lindstrom
 title: Advisor
 avatar: /public/images/david-lindstrom-1-.jpg
 institution: Brown University
+org: Brown University
 startDate: "2024"
 endDate: "2024"
 ---

src/content/publications/article-2021-09-01_rodilitz-scott-and-edward-h-kaplan.md

@@ -0,0 +1,8 @@
+---
+classification: Article
+author: Rodilitz, Scott and Edward H. Kaplan
+pubDate: 2021-09-01
+citation: 'Rodilitz, Scott and Edward H. Kaplan.	"Snapshot Models of
+  Undocumented Immigration." Risk Analysis, (2021) DOI: 10.1111/risa.13658'
+url: https://pubmed.ncbi.nlm.nih.gov/33373472/
+---

src/content/publications/book-2010-01-01_donato-katharine-m-jonathan-hiskey-jorge-durand-and-douglas-s-massey.md

@@ -0,0 +1,10 @@
+---
+classification: Book
+author: Donato, Katharine M., Jonathan Hiskey, Jorge Durand, and Douglas S.  Massey.
+pubDate: 2010-01-01
+citation: Donato, Katharine M., Jonathan Hiskey, Jorge Durand, and Douglas
+  S.  Massey. 2010. Salvando fronteras. Migración internacional en
+  América  Latina y el  Caribe. Miguel  Angel Porrúa.
+image: /pubs/salvando_fronteras.jpg
+pdf: /pubs/donato_hiskey_durand_massey_2010-salvando-fronteras.pdf
+---