scholar-ed/README.md

A React component to embed Google Scholar profiles in a mobile-friendly way

# Scholar.ed

A React component to embed Google Scholar profiles in a mobile-friendly way.

## Quick Start

Add the following code to your HTML page:

```html
<!-- Load React -->
<script
	src="https://unpkg.com/react@18/umd/react.production.min.js"
	crossorigin
></script>
<script
	src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
	crossorigin
></script>

<!-- Load Scholar.ed -->
<link
	rel="stylesheet"
	href="https://unpkg.com/scholar-ed@latest/dist/scholar-ed.css"
/>
<script
	src="https://unpkg.com/scholar-ed@latest/dist/scholar-ed.min.js"
	crossorigin
></script>

<!-- Add the component where you want it to appear -->
<div data-scholar-id="YOUR_SCHOLAR_ID"></div>
```

Replace `YOUR_SCHOLAR_ID` with your Google Scholar ID (found in your profile URL).

## Advanced Usage

### Options

You can customize the component using data attributes:

```html
<div
	data-scholar-id="YOUR_SCHOLAR_ID"
	data-max-publications="5"
	data-class-name="custom-theme"
></div>
```

- `data-scholar-id`: Your Google Scholar ID (required)
- `data-max-publications`: Maximum number of publications to display
- `data-class-name`: Custom CSS class for styling

### Manual Initialization

If you prefer more control, you can initialize the component manually:

```html
<div id="scholar-profile"></div>
<script>
	const container = document.getElementById("scholar-profile");
	const root = ReactDOM.createRoot(container);
	root.render(
		React.createElement(ScholarEd.ScholarProfile, {
			scholarId: "YOUR_SCHOLAR_ID",
			maxPublications: 10,
			className: "custom-theme",
		})
	);
</script>
```

### Using with React

If you're using React, you can install the package via npm:

```bash
npm install scholar-ed
```

Then use it in your components:

```jsx
import { ScholarProfile } from "scholar-ed";

function App() {
	return (
		<ScholarProfile
			scholarId="YOUR_SCHOLAR_ID"
			maxPublications={10}
			className="custom-theme"
		/>
	);
}
```

## Backend Requirements

The component requires a backend server to fetch Google Scholar data. You can either:

1. Use our hosted API (coming soon)
2. Set up your own server using the provided example code

## Development

```bash
# Install dependencies
npm install

# Build the package
npm run build

# Run the demo
cd demo && npm run dev
```

## License

MIT