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:
@@ -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
+    media_folder: /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
   - name: data
     label: Data
     create: true

src/components/Publications.tsx

@@ -0,0 +1,134 @@
+import React, { 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
+  }
+}
+
+interface iOption {
+  label: string
+  value: 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 [searchInput, setSearchInput] = useState("")
+  const [classificationFilter, setClassificationFilter] = useState(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.data.classification) &&
+      pub.data.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 as Array<iOption>)}
+          />
+        </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.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={() => window.open(`${publication.data.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

@@ -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/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/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: /publications/taylor-y-la-migracion-jaliscience.jpg
+pdf: /publications/2013_arias_durand_paul_taylor.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,11 @@
+---
+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.'
+image: /publications/migration-international.jpg
+---