General fixes part 7 (#484)

fix issue #483
fix issue #477

app/(pages)/blog/[slug]/page.tsx

@@ -1,9 +1,12 @@
+import { LABELS } from "@/app/labels"
 import { blogArticleCardTagCardVariants } from "@/components/blog/blog-article-card"
 import { BlogContent } from "@/components/blog/blog-content"
+import { Icons } from "@/components/icons"
 import { AppContent } from "@/components/ui/app-content"
 import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
 import { Markdown } from "@/components/ui/markdown"
+import { siteConfig } from "@/config/site"
 import { getArticles, getArticleById } from "@/lib/content"
 import { cn, getBackgroundImage } from "@/lib/utils"
 import { Metadata } from "next"
@@ -67,7 +70,22 @@ export default function BlogArticle({ params }: any) {
     post?.tldr?.toLowerCase()?.includes("newsletter")
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col relative">
+      <Link
+        href={siteConfig.editBlogPage(slug)}
+        target="_blank"
+        className="fixed bottom-5 left-5 lg:bottom-5 lg:left-10 z-10"
+      >
+        <Button className="w-full md:w-auto" size="sm">
+          <div className="flex items-center gap-1">
+            <Icons.gitHub size={18} />
+            <span className="pl-2 text-left text-sm font-medium uppercase">
+              {LABELS.COMMON.EDIT_THIS_PAGE}
+            </span>
+            <Icons.externalUrl size={22} />
+          </div>
+        </Button>
+      </Link>
       <div className="flex items-start justify-center z-0 relative">
         <div
           className={cn(

app/(pages)/projects/sections/ProjectContent.tsx

@@ -69,7 +69,6 @@ export const ProjectContent = ({ id }: { id: string }) => {
   const { project } = getProjectById(id) ?? {}
 
   const hasSocialLinks = Object.keys(project?.links ?? {}).length > 0
-  const editPageURL = siteConfig?.editProjectPage(project?.id as string)
 
   const ProjectStatusMessageMap: Record<ProjectStatus, string> = {
     [ProjectStatus.ACTIVE]: "",
@@ -87,7 +86,22 @@ export const ProjectContent = ({ id }: { id: string }) => {
   }
 
   return (
-    <section className="bg-project-page-gradient dark:bg-transparent-gradient">
+    <section className="bg-project-page-gradient dark:bg-transparent-gradient relative">
+      <Link
+        href={siteConfig.editProjectPage(project.id)}
+        target="_blank"
+        className="fixed bottom-5 left-5 lg:bottom-5 lg:left-10 z-10"
+      >
+        <Button className="w-full md:w-auto" size="sm">
+          <div className="flex items-center gap-1">
+            <Icons.gitHub size={18} />
+            <span className="pl-2 text-left text-sm font-medium uppercase">
+              {LABELS.COMMON.EDIT_THIS_PAGE}
+            </span>
+            <Icons.externalUrl size={22} />
+          </div>
+        </Button>
+      </Link>
       <div className="flex flex-col">
         <Divider.Section className="flex flex-col items-center">
           <AppContent className="flex flex-col gap-12 py-16">
@@ -200,20 +214,6 @@ export const ProjectContent = ({ id }: { id: string }) => {
               {!isResearchProject && (
                 <WikiCard className="lg:sticky lg:top-20" project={project} />
               )}
-              <div data-section-id="edit-this-page" className="lg:col-start-2">
-                <Link
-                  href={editPageURL}
-                  target="_blank"
-                  rel="noreferrer"
-                  passHref
-                  className="inline-flex items-center self-start gap-2 px-4 py-2 duration-200 bg-white border-2 rounded-md group border-tuatara-950 hover:bg-tuatara-950 hover:text-white dark:bg-black dark:border-anakiwa-800 dark:border dark:hover:bg-anakiwa-400"
-                >
-                  <Icons.edit />
-                  <span className="text-sm duration-200 text-primary group-hover:text-white">
-                    {LABELS.COMMON.EDIT_THIS_PAGE}
-                  </span>
-                </Link>
-              </div>
             </div>
           </AppContent>
 

app/layout.tsx

@@ -111,6 +111,9 @@ export const metadata: Metadata = {
       ],
     },
   },
+  icons: {
+    icon: "/favicon.svg",
+  },
 }
 
 interface RootLayoutProps {

components/blog/articles-list.tsx

@@ -3,7 +3,6 @@
 import { useQuery } from "@tanstack/react-query"
 import { Article, ArticleTag } from "@/lib/content"
 import { ArticleListCard } from "./article-list-card"
-import Link from "next/link"
 import { cva } from "class-variance-authority"
 import { ArticleInEvidenceCard } from "./article-in-evidance-card"
 import { Input } from "../ui/input"
@@ -11,8 +10,8 @@ import { Button } from "../ui/button"
 import { LABELS } from "@/app/labels"
 import { Search as SearchIcon } from "lucide-react"
 import { useState } from "react"
-import { useDebounce } from "react-use"
-import { useParams, useRouter, useSearchParams } from "next/navigation"
+import { useDebounce, useMedia } from "react-use"
+import { useRouter, useSearchParams } from "next/navigation"
 
 const ArticleTitle = cva(
   "text-white font-display hover:text-anakiwa-400 transition-colors group-hover:text-anakiwa-400",
@@ -121,6 +120,8 @@ export const ArticlesList: React.FC<ArticlesListProps> = ({
     [searchQuery]
   )
 
+  const isMobile = useMedia("(max-width: 768px)")
+
   return (
     <div className="flex flex-col gap-10 lg:gap-16">
       {!hasTag && !hasSearchParams && searchQuery !== "all" && (
@@ -132,35 +133,39 @@ export const ArticlesList: React.FC<ArticlesListProps> = ({
               className="h-full "
               asLink
             />
-            <>
+            {isMobile && (
+              <>
+                {featuredArticles?.map((article: Article) => {
+                  return (
+                    <ArticleInEvidenceCard
+                      key={article.id}
+                      article={article}
+                      size="sm"
+                      className="h-full"
+                      asLink
+                    />
+                  )
+                })}
+              </>
+            )}
+          </div>
+          {!isMobile && (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-10 lg:col-span-2 h-full">
               {featuredArticles?.map((article: Article) => {
                 return (
                   <ArticleInEvidenceCard
                     key={article.id}
                     article={article}
+                    variant="compact"
                     size="sm"
-                    className="h-full lg:hidden"
+                    className="h-full"
+                    backgroundCover={false}
                     asLink
                   />
                 )
               })}
-            </>
-          </div>
-          <div className="hidden lg:grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-10 lg:col-span-2 h-full">
-            {featuredArticles?.map((article: Article) => {
-              return (
-                <ArticleInEvidenceCard
-                  key={article.id}
-                  article={article}
-                  variant="compact"
-                  size="sm"
-                  className="h-full"
-                  backgroundCover={false}
-                  asLink
-                />
-              )
-            })}
-          </div>
+            </div>
+          )}
         </div>
       )}
       <div className="flex flex-col gap-10 lg:gap-16 lg:px-12">

config/site.ts

@@ -27,7 +27,9 @@ export const siteConfig = {
       "https://docs.google.com/forms/d/e/1FAIpQLSendzYY0z_z7fZ37g3jmydvzS9I7OWKbY2JrqAnyNqeaBHvMQ/viewform",
   },
   addGithubResource:
-    "https://github.com/privacy-scaling-explorations/website-v2/blob/main/app/%5Blang%5D/content/resources.md",
+    "https://github.com/privacy-scaling-explorations/website-v2/blob/main/content/resources.md",
   editProjectPage: (id: string) =>
-    `https://github.com/privacy-scaling-explorations/pse.dev/blob/main/data/projects/${id}.ts`,
+    `https://github.com/privacy-scaling-explorations/website-v2/blob/main/content/projects/${id}.md`,
+  editBlogPage: (slug: string) =>
+    `https://github.com/privacy-scaling-explorations/website-v2/blob/main/content/articles/${slug}.md`,
 }