Skip to content

Commit

Permalink
prettierfix
Browse files Browse the repository at this point in the history
  • Loading branch information
YueSteveYin committed Jul 24, 2024
1 parent f4cb411 commit 08ae175
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 28 deletions.
93 changes: 74 additions & 19 deletions layouts/_default/home.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{{ define "main" }}
{{ $wellClass := `mx-auto max-w-screen-md` }}



<!-- Main Section with Logo and Title -->
<section class="p-8">
<h1>
Expand All @@ -21,43 +22,81 @@ <h1>
"
/>
</h1>
<h2 class="links-blue-darker text-center font-sans text-xl leading-tight text-gray md:text-xl">
<h2
class="links-blue-darker text-center font-sans text-xl leading-tight text-gray md:text-xl"
>
A Cottrell Scholars Collaborative funded by the
<a class="font-bold" href="https://rescorp.org/">Research Corporation for Science Advancement</a>
<a class="font-bold" href="https://rescorp.org/"
>Research Corporation for Science Advancement</a
>
</h2>
<div class="content-area mx-auto mt-8 max-w-prose text-gray">
{{ .Content }}
</div>
</section>

<!-- Section with Call-to-Action Links -->
<section class="flex flex-col justify-around space-y-4 bg-g-4 p-8 shadow-inner sm:flex-row sm:space-x-4 sm:space-y-0">
<section
class="flex flex-col justify-around space-y-4 bg-g-4 p-8 shadow-inner sm:flex-row sm:space-x-4 sm:space-y-0"
>
{{ $blkClass := `group relative block w-full border-8 border-gray bg-white p-2 text-center leading-tight shadow-md duration-100 hover:border-black sm:w-64` }}
{{ $svgWrapperClass := `text-blue group-hover:text-blue-darker` }}
{{ $hedClass := `text-blue font-sans font-bold uppercase group-hover:text-blue-darker duration-100` }}
{{ $dekClass := `my-1 mx-auto max-w-xs font-serif text-g-7` }}


<!-- Add an Entry Button -->
<a class="{{ $blkClass }}" href="https://forms.gle/ZRopiyBevpXu9D459" target="_blank">
<a
class="{{ $blkClass }}"
href="https://forms.gle/ZRopiyBevpXu9D459"
target="_blank"
>
<div class="{{ $svgWrapperClass }}">
<svg class="inline h-20 w-20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
<svg
class="inline h-20 w-20"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
</div>
<div class="{{ $hedClass }}">Add an entry</div>
<div class="{{ $dekClass }}">Or recommend someone and we’ll follow up!</div>
<div class="{{ $dekClass }}">
Or recommend someone and we’ll follow up!
</div>
</a>

<!-- Update Entry Button -->
{{ $emailSubject := `About my Hidden Figures database entry` }}
<a href="mailto:[email protected]?subject={{ $emailSubject }}" class="{{ $blkClass }}">
<a
href="mailto:[email protected]?subject={{ $emailSubject }}"
class="{{ $blkClass }}"
>
<div class="{{ $svgWrapperClass }}">
<svg class="inline h-20 w-20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
<svg
class="inline h-20 w-20"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
/>
</svg>
</div>
<div class="{{ $hedClass }}">Update your entry</div>
<div class="{{ $dekClass }}">Has your information changed? Let us know.</div>
<div class="{{ $dekClass }}">
Has your information changed? Let us know.
</div>
</a>
</section>

Expand All @@ -70,10 +109,16 @@ <h2 class="links-blue-darker text-center font-sans text-xl leading-tight text-gr
{{ $secHedClass := `text-2xl font-sans font-bold leading-tight mb-2` }}
<section class="p-8 pt-0">
<div class="{{ $wellClass }}" x-data>
<h2 class="{{ $secHedClass }} scroll-mt-2" x-ref="hed">Meet our Scientists</h2>
<h2 class="{{ $secHedClass }} scroll-mt-2" x-ref="hed">
Meet our Scientists
</h2>
{{ $scientists := .GetPage "scientist" }}
{{ $people := $scientists.RegularPages }}
<ul x-init="$shuffle($el)" class="first-half-dozen mt-4 grid max-w-screen-md gap-x-4 gap-y-4 sm:grid-cols-2 md:grid-cols-3" x-ref="container">
<ul
x-init="$shuffle($el)"
class="first-half-dozen mt-4 grid max-w-screen-md gap-x-4 gap-y-4 sm:grid-cols-2 md:grid-cols-3"
x-ref="container"
>
{{ range $people }}
<li class="min-w-0">
{{ partial "person-box.html" . }}
Expand All @@ -82,7 +127,11 @@ <h2 class="{{ $secHedClass }} scroll-mt-2" x-ref="hed">Meet our Scientists</h2>
</ul>
<div class="mt-4 text-right font-sans font-bold">
<p>
<button type="button" @click="$rotate($refs.container, 6); $refs.hed.scrollIntoView({ block: 'start', behavior: 'smooth' });" class="decoration-blue decoration-4 underline-offset-2 transition-colors duration-500 hover:underline">
<button
type="button"
@click="$rotate($refs.container, 6); $refs.hed.scrollIntoView({ block: 'start', behavior: 'smooth' });"
class="decoration-blue decoration-4 underline-offset-2 transition-colors duration-500 hover:underline"
>
And many more…
</button>
</p>
Expand All @@ -95,7 +144,9 @@ <h2 class="{{ $secHedClass }} scroll-mt-2" x-ref="hed">Meet our Scientists</h2>
<div class="{{ $wellClass }}" x-data="{ isOpen: false }">
<h2 class="{{ $secHedClass }}" id="by-beat">
<button @click="isOpen = !isOpen" :aria-expanded="isOpen">
<span x-show="isOpen" x-cloak aria-hidden="true" class="">&minus;</span>
<span x-show="isOpen" x-cloak aria-hidden="true" class=""
>&minus;</span
>
<span x-show="!isOpen" aria-hidden="true" class=""> &plus; </span>
<span>Scientist by area</span>
</button>
Expand All @@ -112,7 +163,9 @@ <h2 class="{{ $secHedClass }}" id="by-beat">
<div class="{{ $wellClass }}" x-data="{ isOpen: false }">
<h2 class="{{ $secHedClass }}" id="by-area">
<button @click="isOpen = !isOpen" :aria-expanded="isOpen">
<span x-show="isOpen" x-cloak aria-hidden="true" class="">&minus;</span>
<span x-show="isOpen" x-cloak aria-hidden="true" class=""
>&minus;</span
>
<span x-show="!isOpen" aria-hidden="true" class=""> &plus; </span>
<span>Scientists by relevant course work</span>
</button>
Expand All @@ -129,7 +182,9 @@ <h2 class="{{ $secHedClass }}" id="by-area">
<div class="{{ $wellClass }}" x-data="{ isOpen: false }">
<h2 class="{{ $secHedClass }}" id="scientist">
<button @click="isOpen = !isOpen" :aria-expanded="isOpen">
<span x-show="isOpen" x-cloak aria-hidden="true" class="">&minus;</span>
<span x-show="isOpen" x-cloak aria-hidden="true" class=""
>&minus;</span
>
<span x-show="!isOpen" aria-hidden="true" class=""> &plus; </span>
<span>Scientist by last name</span>
</button>
Expand Down
43 changes: 34 additions & 9 deletions layouts/_default/person.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,20 @@
<!-- Main Content Area -->
<main class="p-8" data-pagefind-body x-data="{ isBio: true }">
<div class="mx-auto flex max-w-screen-md flex-col">

<!-- Title and Organization -->
<h1 class="break-word font-bold leading-tight">
<span class="text-2xl text-black">{{ .Params.name }}</span>
</h1>
{{ with .Param "organization" }}
<h2 class="break-word text-lg leading-tight text-gray" data-pagefind-meta="organization">
<h2
class="break-word text-lg leading-tight text-gray"
data-pagefind-meta="organization"
>
{{ . }}
</h2>
{{ end }}


<!-- Basic Information Section -->
<div class="links-blue-darker mt-2 text-sm sm:flex sm:flex-wrap">
<!-- Institution of Ph.D. -->
Expand Down Expand Up @@ -42,7 +45,9 @@ <h2 class="break-word text-lg leading-tight text-gray" data-pagefind-meta="organ
<use xlink:href="#year"></use>
</svg>
</span>
<span>Year of Ph.D. or highest degree: {{ .Params.year_of_phd }}</span>
<span
>Year of Ph.D. or highest degree: {{ .Params.year_of_phd }}</span
>
</p>

<!-- Research Areas -->
Expand Down Expand Up @@ -83,7 +88,9 @@ <h2 class="break-word text-lg leading-tight text-gray" data-pagefind-meta="organ
<use xlink:href="#globe-svg"></use>
</svg>
</span>
<a href="{{ .Params.wikipedia }}" target="_blank">{{ .Params.wikipedia }}</a>
<a href="{{ .Params.wikipedia }}" target="_blank"
>{{ .Params.wikipedia }}</a
>
</p>
</div>

Expand Down Expand Up @@ -168,8 +175,11 @@ <h2 class="text-lg font-bold">Scientist Biography</h2>
</div>
{{ end }}


<!-- Biographical Information -->
<section class="content-area links-blue-darker clear-both mt-4 sm:clear-none">
<section
class="content-area links-blue-darker clear-both mt-4 sm:clear-none"
>
<h2 class="sr-only" data-pagefind-ignore>Biographical information</h2>
<p>{{ .Params.general_bio }}</p>
</section>
Expand Down Expand Up @@ -214,11 +224,26 @@ <h2 class="text-lg font-bold">Key Contributions</h2>
<!-- List of Key Contributions -->
{{ range $key, $value := .Params.key_contributions }}
{{ $isOdd = not $isOdd }}
<div class="{{ cond $isOdd `bg-g-3 shadow-inner` `` }} p-2" x-data="{ isOpen: false }">
<div
class="{{ cond $isOdd `bg-g-3 shadow-inner` `` }} p-2"
x-data="{ isOpen: false }"
>
<h3 class="text-md font-semibold">
<button @click="isOpen = !isOpen" :aria-expanded="isOpen" class="flex items-center">
<span x-show="isOpen" x-cloak aria-hidden="true" class="mr-2">&minus;</span>
<span x-show="!isOpen" aria-hidden="true" class="mr-2">&plus;</span>
<button
@click="isOpen = !isOpen"
:aria-expanded="isOpen"
class="flex items-center"
>
<span
x-show="isOpen"
x-cloak
aria-hidden="true"
class="mr-2"
>&minus;</span
>
<span x-show="!isOpen" aria-hidden="true" class="mr-2"
>&plus;</span
>
<span>{{ $key }}</span>
</button>
</h3>
Expand Down

0 comments on commit 08ae175

Please sign in to comment.