Ecosystem cards

.eslintrc.cjs

@@ -3,6 +3,9 @@
 const guildConfig = require('@theguild/eslint-config/base');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { REACT_RESTRICTED_SYNTAX, RESTRICTED_SYNTAX } = require('@theguild/eslint-config/constants');
+const path = require('path');
+
+console.log('loaded eslint config', __filename);
 
 const SCHEMA_PATH = './packages/services/api/src/modules/*/module.graphql.ts';
 const OPERATIONS_PATHS = [
@@ -38,6 +41,9 @@ const HIVE_RESTRICTED_SYNTAX = [
 
 const tailwindCallees = ['clsx', 'cn', 'cva', 'cx'];
 
+/**
+ * @type {import('eslint').Linter.Config}
+ */
 module.exports = {
   ignorePatterns: [
     'scripts',
@@ -198,7 +204,7 @@ module.exports = {
       settings: {
         tailwindcss: {
           callees: tailwindCallees,
-          config: 'packages/web/app/tailwind.config.cjs',
+          config: path.join(__dirname, './packages/web/app/tailwind.config.cjs'),
           whitelist: ['drag-none'],
           cssFiles: ['packages/web/app/src/index.css', 'node_modules/graphiql/dist/style.css'],
         },
@@ -219,7 +225,7 @@ module.exports = {
         },
         tailwindcss: {
           callees: tailwindCallees,
-          config: 'packages/web/docs/tailwind.config.cjs',
+          config: path.join(__dirname, './packages/web/docs/tailwind.config.cjs'),
         },
       },
     },

.github/workflows/lint.yaml

@@ -36,7 +36,7 @@ jobs:
       - name: eslint
         id: eslint
         run: |
-          pnpm lint || \
+          pnpm lint --cache-strategy content || \
           ( \
             echo "" && \
             echo "To fix it, run" && \

package.json

@@ -80,7 +80,7 @@
     "eslint": "8.57.0",
     "eslint-plugin-cypress": "3.5.0",
     "eslint-plugin-hive": "file:rules",
-    "eslint-plugin-tailwindcss": "3.17.4",
+    "eslint-plugin-tailwindcss": "npm:@hasparus/eslint-plugin-tailwindcss@3.17.5",
     "fs-extra": "11.2.0",
     "graphql": "16.9.0",
     "jest-snapshot-serializer-raw": "2.0.0",

packages/web/app/tailwind.config.cjs

@@ -3,6 +3,8 @@ const { fontFamily } = require('tailwindcss/defaultTheme');
 const svgToDataUri = require('mini-svg-data-uri');
 const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette');
 
+console.log('loaded tailwind config', __filename);
+
 module.exports = {
   darkMode: 'class',
   content: ['./index.html', './src/**/*.ts{,x}'],

packages/web/docs/src/components/community-section.tsx

@@ -60,23 +60,18 @@ export function CommunitySection({ className }: { className?: string }) {
           title="Available for free"
           description="Free Hobby plan that fits perfectly for most side projects."
         >
-          <CallToAction
-            variant="secondary-inverted"
-            href="/#pricing"
-            target="_blank"
-            rel="noreferrer"
-          >
+          <CallToAction variant="secondary-inverted" href="/#pricing">
             Check Pricing
           </CallToAction>
         </CommunityCard>
       </div>
       <MaskingScrollview
-        outerClassName="max-sm:-mx-4 max-sm:px-4"
-        className="max-sm:!mask-image-none relative -m-4 flex flex-row gap-6 p-4 max-sm:overflow-x-auto sm:grid sm:h-[600px] sm:grid-cols-2 sm:overflow-y-auto lg:grid-cols-4"
+        outerClassName="max-sm:-mx-4 max-sm:px-4 "
+        className="relative -m-4 flex flex-row gap-6 p-4 max-sm:overflow-x-auto sm:grid sm:h-[600px] sm:grid-cols-2 sm:overflow-y-auto lg:grid-cols-4"
         fade="y"
       >
         {Array.from({ length: 4 }).map((_, i) => (
-          <div className="contents flex-col gap-6 sm:flex [&>:last-child]:flex-1" key={i}>
+          <div className="contents flex-col gap-6 sm:flex max-lg:[&>:last-child]:flex-1" key={i}>
             {tempSocialPosts.map((post, j) =>
               j % 4 === i ? <SocialPostCard post={post} key={j} /> : null,
             )}
@@ -143,7 +138,7 @@ function SocialPostCard({ post }: { post: SocialPost }) {
   const isTwitterLink = post.href.startsWith('https://twitter.com/');
 
   return (
-    <div className="rounded-2xl bg-green-900 p-6 text-green-200 max-sm:h-[fill-available]">
+    <div className="rounded-2xl bg-green-900 p-6 text-green-200 max-sm:h-[stretch]">
       <div className="flex flex-row items-center gap-2">
         <div className="relative">
           <a

packages/web/docs/src/components/decorations.tsx

@@ -50,12 +50,9 @@ export function ArchDecorationGradientDefs() {
 
 export function HighlightDecoration(props: React.SVGAttributes<SVGSVGElement>) {
   return (
-    <svg width="895" height="674" viewBox="0 0 895 674" {...props}>
+    <svg width="895" height="674" viewBox="0 0 895 674" fill="#86B6C1" {...props}>
       <g filter="url(#filter0_f_711_1774)">
-        <path
-          d="M350 280.534C350 296.208 356.24 311.261 367.33 322.351L453.447 408.468L463.532 418.553L549.649 504.67C560.739 515.76 575.792 522 591.466 522L894 522L894 408.468L552.251 408.468C503.249 408.468 463.532 368.751 463.532 319.749L463.532 -22L350 -22L350 280.534Z"
-          fill="#86B6C1"
-        />
+        <path d="M350 280.534C350 296.208 356.24 311.261 367.33 322.351L453.447 408.468L463.532 418.553L549.649 504.67C560.739 515.76 575.792 522 591.466 522L894 522L894 408.468L552.251 408.468C503.249 408.468 463.532 368.751 463.532 319.749L463.532 -22L350 -22L350 280.534Z" />
       </g>
       <defs>
         <filter

packages/web/docs/src/components/ecosystem-management.tsx

@@ -37,10 +37,13 @@ export function EcosystemManagementSection({ className }: { className?: string }
             ))}
           </ul>
           <div className="flex flex-col gap-x-4 gap-y-2 md:flex-row">
-            <CallToAction href="/" variant="primary-inverted">
+            <CallToAction
+              href="https://the-guild.dev/graphql/hive/docs/use-cases/apollo-studio"
+              variant="primary-inverted"
+            >
               Migrate from Apollo
             </CallToAction>
-            <CallToAction href="/" variant="secondary">
+            <CallToAction href="https://github.com/the-guild-org" variant="secondary">
               <BookIcon />
               Explore the full Ecosystem
             </CallToAction>
@@ -264,7 +267,7 @@ function EdgeLabel(props: EdgeLabelProps) {
     <div
       className={
         'flex size-8 h-[var(--label-h)] items-center justify-center' +
-        ' cursor-default rounded bg-green-700 text-sm font-medium leading-[20px]'
+        ' cursor-default rounded bg-green-700 text-sm font-medium leading-5'
       }
       {...props}
     />
@@ -294,7 +297,7 @@ function Node({ title, description, children, highlighted, className, ...rest }:
       <div>
         <div className="font-medium text-green-100">{title}</div>
         {description && (
-          <div className="mt-0.5 text-sm leading-[20px] text-green-200">{description}</div>
+          <div className="mt-0.5 text-sm leading-5 text-green-200">{description}</div>
         )}
       </div>
     </div>

packages/web/docs/src/components/feature-tabs.tsx

@@ -222,9 +222,7 @@ function Feature(props: {
             return (
               <div key={highlight.title} onPointerOver={() => setActiveHighlight(i)}>
                 <dt className="text-green-1000 font-medium">{highlight.title}</dt>
-                <dd className="mt-2 text-sm leading-[20px] text-green-800">
-                  {highlight.description}
-                </dd>
+                <dd className="mt-2 text-sm leading-5 text-green-800">{highlight.description}</dd>
               </div>
             );
           })}

packages/web/docs/src/components/landing-page.tsx

@@ -16,6 +16,7 @@ import { Page } from './page';
 import { Pricing } from './pricing';
 import { StatsItem, StatsList } from './stats';
 import { TeamSection } from './team-section';
+import { ToolsAndLibrariesCards } from './tools-and-libraries-cards';
 
 export function IndexPage(): ReactElement {
   return (
@@ -61,7 +62,7 @@ export function IndexPage(): ReactElement {
             <CallToAction variant="primary-inverted" href="https://app.graphql-hive.com">
               Get started for free
             </CallToAction>
-            <CallToAction variant="secondary" href="/docs">
+            <CallToAction variant="secondary" href="/#pricing">
               View Pricing
             </CallToAction>
           </HeroLinks>
@@ -88,6 +89,7 @@ export function IndexPage(): ReactElement {
         <Pricing />
         <TeamSection className="mx-4 md:mx-6" />
         <CommunitySection className="mx-4 mt-6 md:mx-6" />
+        <ToolsAndLibrariesCards className="mx-4 mt-6 md:mx-6" />
       </Page>
     </Tooltip.Provider>
   );

packages/web/docs/src/components/masking-scrollview.tsx

@@ -25,9 +25,13 @@ export function MaskingScrollview({
         // replace "mask" with "background" to debug it
         maskImage:
           fade === 'x'
-            ? `linear-gradient(to left, transparent, black 128px 25%, black 50%, transparent 50%),
+            ? scrolledSides.left && scrolledSides.right
+              ? 'none'
+              : `linear-gradient(to left, transparent, black 128px 25%, black 50%, transparent 50%),
                linear-gradient(to right, transparent, black 128px 25%, black 50%, transparent 50%)`
-            : `linear-gradient(to bottom, transparent, black 128px 25%, black 50%, transparent 50%),
+            : scrolledSides.top && scrolledSides.bottom
+              ? 'none'
+              : `linear-gradient(to bottom, transparent, black 128px 25%, black 50%, transparent 50%),
                linear-gradient(to top, transparent, black 128px 25%, black 50%, transparent 50%)`,
         maskSize:
           fade === 'x'

packages/web/docs/src/components/stats.tsx

@@ -10,8 +10,8 @@ export function StatsItem(props: {
   decimal?: boolean;
 }) {
   return (
-    <div className="flex items-end gap-4 rounded-3xl border border-green-400 p-8 lg:flex-col lg:items-start lg:p-12">
-      <Heading as="div" size="xl" className="text-green-1000 text-[48px] lg:text-6xl">
+    <div className="flex items-end justify-between gap-4 rounded-3xl border border-green-400 p-8 lg:flex-col lg:items-start lg:p-12">
+      <Heading as="div" size="xl" className="text-green-1000 min-w-[120px] text-[48px] lg:text-6xl">
         <CountUp
           start={0}
           end={props.value}
@@ -24,7 +24,9 @@ export function StatsItem(props: {
         />
         {props.suffix}
       </Heading>
-      <div className="mb-3 font-medium sm:mb-3 md:mb-2 lg:mb-0">{props.label}</div>
+      <div className="mb-3 font-medium max-md:text-right sm:mb-3 md:mb-2 lg:mb-0">
+        {props.label}
+      </div>
     </div>
   );
 }