ci, badges (#5)

Author: romanindev

.github/workflows/ci.yml

@@ -26,6 +26,9 @@ jobs:
       - name: Format check
         run: npm run format:check
 
+      - name: Typecheck
+        run: npm run typecheck
+
       - name: Lint
         run: npm run lint
 

.husky/pre-push

@@ -1,6 +1,4 @@
 #!/usr/bin/env sh
 
-echo "Running checks before push..."
-
-npm run lint
-npm run test
+echo "Running CI checks..."
+npm run ci

eslint.config.js

@@ -6,7 +6,7 @@ import tseslint from 'typescript-eslint';
 import { defineConfig, globalIgnores } from 'eslint/config';
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(['dist', 'node_modules', 'build', 'coverage']),
   {
     files: ['**/*.{ts,tsx}'],
     extends: [

package.json

@@ -6,12 +6,14 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "elint": "eslint .",
-    "lint": "tsc --noEmit -p tsconfig.json",
     "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "test": "",
+    "ci": "npm run format:check && npm run typecheck && npm run lint && npm run test",
     "lint-staged": "lint-staged",
     "prepare": "husky"
   },

src/components/Footer/Footer.tsx

@@ -31,7 +31,7 @@ export const Footer = () => {
               npm
             </Link>
             <Link
-              href="https://github.com/dfsyncjs/dfsync"
+              href="https://github.com/dfsyncjs/dfsync/tree/main/packages/client"
               target="_blank"
               rel="noreferrer"
               underline="hover"

src/components/Header/Header.tsx

@@ -33,7 +33,7 @@ export const Header = () => {
             </Button>
             <Button
               color="inherit"
-              href="https://github.com/dfsyncjs/dfsync"
+              href="https://github.com/dfsyncjs/dfsync/tree/main/packages/client"
               target="_blank"
               rel="noreferrer"
               startIcon={<GitHubIcon />}

src/components/Hero/Hero.tsx

@@ -1,6 +1,9 @@
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import ListIcon from '@mui/icons-material/List';
 import { Box, Button, Chip, Container, Stack, Typography } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
 import { InstallCommand } from '../InstallCommand/InstallCommand';
+import { ProjectBadges } from '../ProjectBadges/ProjectBadges.tsx';
 
 export const Hero = () => {
   return (
@@ -37,6 +40,8 @@ export const Hero = () => {
               }}
             />
 
+            <ProjectBadges />
+
             <Typography
               variant="h6"
               color="text.secondary"
@@ -64,12 +69,11 @@ export const Hero = () => {
               View on npm
             </Button>
             <Button
+              component={RouterLink}
               variant="outlined"
               size="medium"
-              href="https://github.com/dfsyncjs/dfsync/blob/main/packages/client/README.md"
-              target="_blank"
-              rel="noreferrer"
-              endIcon={<OpenInNewIcon />}
+              to="/docs"
+              startIcon={<ListIcon />}
             >
               Documentation
             </Button>
@@ -82,7 +86,7 @@ export const Hero = () => {
               mt: 3,
               width: '100%',
               p: { xs: 3, md: 4 },
-              borderRadius: 4,
+              borderRadius: 1,
               bgcolor: 'background.paper',
               border: '1px solid',
               borderColor: 'divider',

src/components/InstallCommand/InstallCommand.tsx

@@ -23,7 +23,7 @@ export const InstallCommand = () => {
         bgcolor: 'background.paper',
         border: '1px solid',
         borderColor: 'divider',
-        borderRadius: 3,
+        borderRadius: 1,
         px: 3,
         py: 2,
         maxWidth: 500,

src/components/ProjectBadges/ProjectBadges.tsx

@@ -0,0 +1,65 @@
+import { Stack, Box, Link } from '@mui/material';
+
+const packageName = '@dfsync/client';
+const repoName = 'dfsyncjs/dfsync';
+
+export const ProjectBadges = () => {
+  return (
+    <Stack direction="row" spacing={1.5} alignItems="center" flexWrap="wrap" sx={{ mt: 2 }}>
+      {/* npm version */}
+      <Link
+        href={`https://www.npmjs.com/package/${packageName}`}
+        target="_blank"
+        rel="noreferrer"
+        underline="none"
+        sx={{ lineHeight: 1 }}
+      >
+        <Box
+          component="img"
+          src={`https://img.shields.io/npm/v/${encodeURI(packageName)}`}
+          alt="npm version"
+          sx={{ height: 20 }}
+        />
+      </Link>
+
+      {/* npm weekly downloads */}
+      <Link
+        href={`https://www.npmjs.com/package/${packageName}`}
+        target="_blank"
+        rel="noreferrer"
+        underline="none"
+        sx={{ lineHeight: 1 }}
+      >
+        <Box
+          component="img"
+          src={`https://img.shields.io/npm/dw/${encodeURI(packageName)}`}
+          alt="npm downloads"
+          sx={{ height: 20 }}
+        />
+      </Link>
+
+      {/* github stars */}
+      <Link
+        href={`https://github.com/${repoName}/tree/main/packages/client`}
+        target="_blank"
+        rel="noreferrer"
+        underline="none"
+        sx={{ lineHeight: 1 }}
+      >
+        <Box
+          component="img"
+          src={`https://img.shields.io/github/stars/${repoName}`}
+          alt="github stars"
+          sx={{ height: 20 }}
+        />
+      </Link>
+
+      <Box
+        component="img"
+        src={`https://img.shields.io/github/license/${repoName}`}
+        alt="license"
+        sx={{ height: 20 }}
+      />
+    </Stack>
+  );
+};

src/components/index.ts

@@ -2,3 +2,4 @@ export { Features } from './Features/Features';
 export { Footer } from './Footer/Footer';
 export { Header } from './Header/Header';
 export { Hero } from './Hero/Hero';
+export { ProjectBadges } from './ProjectBadges/ProjectBadges';