feat: init pubs page

package.json

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

public/admin/config.yml

@@ -66,24 +66,42 @@ collections:
         date_format: yyyy
         time_format: false
         format: yyyy
-  - name: pubs
+  - name: publications
     label: Publications
-    folder: src/content/pubs
+    folder: src/content/publications
     create: true
-    slug: '{{year}}-{{month}}-{{day}}_{{title}}_{{slug}}'
+    identifier_field: citation
     fields:
       - name: classification
         label: Classification
         widget: select
         options: [ 'Book', 'Chapter', 'Article', 'Dissertation' ]
+      - 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
+        public_folder: public/publications
   - name: data
     label: Data
     create: true

src/components/Publications.tsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from "react"
+import Select from "react-select"
+import PubPlaceholder from "./svg/PubPlaceholder.tsx"
+
+interface PubProps {
+  publications: Array<PubObject>
+}
+
+interface PubObject {
+  data: {
+    classification: string
+    citation: string
+    image?: string
+    url?: string
+    pdf?: string
+  }
+}
+
+const PublicationSection: React.FC<PubProps> = ({ publications }) => {
+  const classificationOptions = [
+    { value: "Book", label: "Books" },
+    {
+      value: "Article",
+      label: "Articles",
+    },
+    { value: "Dissertation", label: "Dissertations" },
+    { value: "Chapter", label: "Chapters" },
+  ]
+
+  const [shownPubs, setShownPubs] = useState(publications)
+  const [searchInput, setSearchInput] = useState("")
+  const [classificationFilter, setClassificationFilter] = useState(classificationOptions)
+  const handleChange = (e: {
+    preventDefault: () => void
+    target: { value: React.SetStateAction<string> }
+  }) => {
+    e.preventDefault()
+    setSearchInput(e.target.value)
+  }
+
+  useEffect(() => {
+    let currentPubs = publications
+    // filter based on classification
+    if (classificationFilter.length > 0) {
+      const filteredClassifications = classificationFilter.map(({ value }) => value)
+      currentPubs = currentPubs.filter((pub) =>
+        filteredClassifications.includes(pub.data.classification)
+      )
+    }
+
+    if (searchInput.length > 0) {
+      // do a search for Pubs
+      const foundPublications = currentPubs.filter(
+        (pub: { data: { citation: string | string[] } }) => {
+          if (pub.data && pub.data.citation.includes(searchInput)) {
+            return pub
+          }
+        }
+      )
+      if (foundPublications.length > 0) {
+        currentPubs = foundPublications
+      } else {
+        currentPubs = []
+      }
+    }
+
+    setShownPubs(currentPubs)
+  }, [searchInput, classificationFilter])
+
+  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={true}
+            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={(e) => {
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              setClassificationFilter(e)
+            }}
+          />
+        </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="flex flex-wrap lg:flex-nowrap gap-12">
+                  {shownPubs.map((publication, i) => {
+                    if (publication.data.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.data.image ? (
+                              <img
+                                className="drop-shadow-md object-cover w-48 h-72"
+                                src={publication.data.image}
+                              />
+                            ) : (
+                              <PubPlaceholder />
+                            )}
+                          </div>
+
+                          <div className="flex flex-col gap-8 ">
+                            <p>{publication.data.citation}</p>
+                            {publication.data.pdf && (
+                              <button
+                                className="bg-neutral-500 text-neutral-50 rounded-full py-3 px-7 w-2/3"
+                                onClick={() => console.log(publication.data.pdf)}
+                              >
+                                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

@@ -23,6 +23,18 @@ const files = defineCollection({
   }),
 })
 
+const publications = defineCollection({
+  type: "content",
+  schema: z.object({
+    classification: 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 +45,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/publications/arias-patricia-and-jorge-durand-2013-paul-s-taylor-y-la-migración-jalisciense-a-estados-unidos-universidad-de-guadalajara-centro-universitario-de-los-altos.md

@@ -0,0 +1,9 @@
+---
+classification: Book
+pubDate: 2013-01-01
+citation: Arias, Patricia and Jorge Durand. 2013. Paul S. Taylor y la migración
+  jalisciense a Estados Unidos. Universidad de Guadalajara, Centro Universitario
+  de los Altos.
+image: /public/images/taylor-y-la-migracion-jaliscience.jpg
+pdf: public/publications/codebook_life.pdf
+---

src/content/publications/donato-katharine-m-and-gabriela-león-pérez-2016-educación-género-y-migración-de-colombia-y-méxico-a-estados-unidos-in-maría-gertrudis-roa-martínez-compiladora-migración-internacional-patrones-y-determinantes-estudios-comparados-colo.md

@@ -0,0 +1,10 @@
+---
+classification: Chapter
+pubDate: 2016-01-01
+citation: 'Donato, Katharine M. and Gabriela León-Pérez. (2016). "Educación,
+  género, y migración de Colombia y México a Estados Unidos" in María Gertrudis
+  Roa Martínez (compiladora) Migración Internacional: patrones y determinantes.
+  Estudios comparados Colombia-América Latina - Proyecto LAMP, 1a edición,
+  Capítulo 7, pp. 179-202. Colección: Ciencias Sociales - Sociología. Cali:
+  Programa Editorial Universidad del Valle, 2016.'
+---

src/content/publications/durand-jorge-2016-historia-mínima-de-la-migración-méxico-estados-unidos-1a-edición-ciudad-de-méxico-el-colegio-de-méxico.md

@@ -0,0 +1,8 @@
+---
+classification: Book
+pubDate: 2016-01-01
+citation: "Durand, Jorge . 2016. Historia mínima de la migración México-Estados
+  Unidos . 1a. edición. Ciudad de México: El Colegio de México"
+image: /public/images/historiaminimamexico.jpg
+url: https://doi.org/10.2307/j.ctt1t89k3g
+---

src/content/publications/mexican-labor-migration-to-the-united-states-determinants-labor-market-outcomes-and-dynamics-phd-dissertation-department-of-economics-georgetown-university.md

@@ -0,0 +1,7 @@
+---
+classification: Dissertation
+pubDate: 1995-01-01
+citation: >-
+
+  "Mexican Labor Migration to the United States: Determinants, Labor Market Outcomes, and Dynamics." PhD. Dissertation, Department of Economics, Georgetown University.
+---

src/content/publications/rodilitz-scott-and-edward-h-kaplan-snapshot-models-of-undocumented-immigration-risk-analysis-2021-doi-10-1111-risa-13658.md

@@ -0,0 +1,7 @@
+---
+classification: Article
+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/pages/publications.astro

@@ -0,0 +1,11 @@
+---
+import Layout from "../layouts/Layout.astro"
+import PublicationSection from "../components/Publications"
+import { getCollection } from "astro:content"
+
+const pubs = await getCollection("publications")
+---
+
+<Layout title="Publications" description="Publications associated with MMP">
+  <PublicationSection publications={pubs} client:only="react" />
+</Layout>