[Embed] Fix up post embeds, and other tweaks (#8185)

* fix eslint

* Update .eslintrc.cjs

* fix 3 and 4 image aspect ratios

* round embeds more

* fix line height

bskyembed/.eslintrc

@@ -1,21 +0,0 @@
-{
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "simple-import-sort"],
-  "extends": [
-    "eslint:recommended",
-    "preact",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking"
-  ],
-  "rules": {
-    "simple-import-sort/imports": "warn",
-    "simple-import-sort/exports": "warn",
-    'no-else-return': 'off'
-  },
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": "latest",
-    "project": "./bskyembed/tsconfig.json"
-  }
-}

bskyembed/.eslintrc.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'simple-import-sort'],
+  extends: [
+    'eslint:recommended',
+    'preact',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+  ],
+  rules: {
+    'simple-import-sort/imports': 'warn',
+    'simple-import-sort/exports': 'warn',
+    'no-else-return': 'off',
+  },
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 'latest',
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+}

bskyembed/src/components/embed.tsx

@@ -78,7 +78,7 @@ export function Embed({
         return (
           <Link
             href={`/profile/${record.author.did}/post/${getRkey(record)}`}
-            className="transition-colors hover:bg-neutral-100 dark:hover:bg-slate-700 border dark:border-slate-600 rounded-lg p-2 gap-1.5 w-full flex flex-col">
+            className="transition-colors hover:bg-neutral-100 dark:hover:bg-slate-700 border dark:border-slate-600 rounded-xl p-2 gap-1.5 w-full flex flex-col">
             <div className="flex gap-1.5 items-center">
               <div className="w-4 h-4 overflow-hidden rounded-full bg-neutral-300 dark:bg-slate-700 shrink-0">
                 <img
@@ -207,7 +207,7 @@ export function Embed({
 
 function Info({children}: {children: ComponentChildren}) {
   return (
-    <div className="w-full rounded-lg border py-2 px-2.5 flex-row flex gap-2 bg-neutral-50">
+    <div className="w-full rounded-xl border py-2 px-2.5 flex-row flex gap-2 bg-neutral-50">
       <img src={infoIcon} className="w-4 h-4 shrink-0 mt-0.5" />
       <p className="text-sm text-textLight dark:text-textDimmed">{children}</p>
     </div>
@@ -231,12 +231,12 @@ function ImageEmbed({
         <img
           src={content.images[0].thumb}
           alt={content.images[0].alt}
-          className="w-full rounded-lg overflow-hidden object-cover h-auto max-h-[1000px]"
+          className="w-full rounded-xl overflow-hidden object-cover h-auto max-h-[1000px]"
         />
       )
     case 2:
       return (
-        <div className="flex gap-1 rounded-lg overflow-hidden w-full aspect-[2/1]">
+        <div className="flex gap-1 rounded-xl overflow-hidden w-full aspect-[2/1]">
           {content.images.map((image, i) => (
             <img
               key={i}
@@ -249,13 +249,13 @@ function ImageEmbed({
       )
     case 3:
       return (
-        <div className="flex gap-1 rounded-lg overflow-hidden w-full aspect-[2/1]">
+        <div className="flex gap-1 rounded-xl overflow-hidden w-full aspect-[2/1]">
           <img
             src={content.images[0].thumb}
             alt={content.images[0].alt}
-            className="flex-[3] object-cover rounded-sm"
+            className="flex-1 aspect-square object-cover rounded-sm"
           />
-          <div className="flex flex-col gap-1 flex-[2]">
+          <div className="flex flex-col gap-1 flex-1 aspect-square">
             {content.images.slice(1).map((image, i) => (
               <img
                 key={i}
@@ -269,13 +269,13 @@ function ImageEmbed({
       )
     case 4:
       return (
-        <div className="grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
+        <div className="grid grid-cols-2 gap-1 rounded-xl overflow-hidden">
           {content.images.map((image, i) => (
             <img
               key={i}
               src={image.thumb}
               alt={image.alt}
-              className="aspect-square w-full object-cover rounded-sm"
+              className="aspect-video w-full object-cover rounded-sm"
             />
           ))}
         </div>
@@ -308,7 +308,7 @@ function ExternalEmbed({
   return (
     <Link
       href={content.external.uri}
-      className="w-full rounded-lg overflow-hidden border dark:border-slate-600 flex flex-col items-stretch"
+      className="w-full rounded-xl overflow-hidden border dark:border-slate-600 flex flex-col items-stretch"
       disableTracking>
       {content.external.thumb && (
         <img
@@ -345,7 +345,7 @@ function GenericWithImageEmbed({
   return (
     <Link
       href={href}
-      className="w-full rounded-lg border dark:border-slate-600 py-2 px-3 flex flex-col gap-2">
+      className="w-full rounded-xl border dark:border-slate-600 py-2 px-3 flex flex-col gap-2">
       <div className="flex gap-2.5 items-center">
         {image ? (
           <img
@@ -383,7 +383,7 @@ function VideoEmbed({content}: {content: AppBskyEmbedVideo.View}) {
 
   return (
     <div
-      className="w-full overflow-hidden rounded-lg aspect-square relative"
+      className="w-full overflow-hidden rounded-xl aspect-square relative"
       style={{aspectRatio: `${aspectRatio} / 1`}}>
       <img
         src={content.thumbnail}
@@ -412,7 +412,7 @@ function StarterPackEmbed({
   return (
     <Link
       href={starterPackHref}
-      className="w-full rounded-lg overflow-hidden border dark:border-slate-600 flex flex-col items-stretch">
+      className="w-full rounded-xl overflow-hidden border dark:border-slate-600 flex flex-col items-stretch">
       <img src={imageUri} className="aspect-[1.91/1] object-cover" />
       <div className="py-3 px-4">
         <div className="flex space-x-2 items-center">

bskyembed/src/components/post.tsx

@@ -173,7 +173,7 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) {
   }
 
   return (
-    <p className="min-[300px]:text-lg leading-6 break-word break-words whitespace-pre-wrap">
+    <p className="min-[300px]:text-lg leading-6 min-[300px]:leading-6 break-word break-words whitespace-pre-wrap">
       {richText}
     </p>
   )