Nicer styling for demo page

grubersjoe · Jul 12, 2023 · cf071d8 · cf071d8
1 parent 13f19dd
commit cf071d8
Show file tree

Hide file tree

Showing 10 changed files with 243 additions and 103 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -7,7 +7,7 @@
   ],
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint"],
-  "ignorePatterns": ["*.css", "*.lock", "node_modules/", "build/", "public/"],
+  "ignorePatterns": ["*.scss", "*.lock", "node_modules/", "build/", "public/"],
   "rules": {
     "arrow-body-style": "error",
     "react/no-unescaped-entities": 0,

diff --git a/README.md b/README.md
@@ -11,22 +11,22 @@ A React component to display a GitHub contributions graph based on
 
 ## Installation
 
-```
+```shell
 yarn add react-github-calendar
 ```
 
 ## Development
 
 Start watch mode for library first:
 
-```
+```shell
 yarn
 yarn dev
 ```
 
 Then start watch mode of example page:
 
-```
+```shell
 cd example
 yarn
 yarn dev
@@ -36,7 +36,7 @@ Open http://localhost:3000.
 
 ## Publish a new release
 
-```
+```shell
 npm publish --dry-run
 
 # When you're happy
@@ -45,6 +45,6 @@ npm publish --access=public
 
 ### Update demo page
 
-```
+```shell
 yarn deploy
 ```
diff --git a/example/package.json b/example/package.json
@@ -21,6 +21,7 @@
     "@types/react-dom": "link:../node_modules/@types/react-dom",
     "@types/react-syntax-highlighter": "^15.5.6",
     "@vitejs/plugin-react": "^4.0.1",
+    "sass": "^1.63.6",
     "typescript": "^5.1.6",
     "vite": "^4.3.9"
   }

diff --git a/example/src/CodeBlock.tsx → example/src/components/CodeBlock.tsx b/example/src/CodeBlock.tsx → example/src/components/CodeBlock.tsx
@@ -13,8 +13,9 @@ const CodeBlock: FunctionComponent<Props> = ({ children }) => (
     customStyle={{
       margin: '0 0 1.5rem',
       padding: '1em',
-      borderRadius: 4,
+      backgroundColor: '#141414',
       border: 'none',
+      borderRadius: 4,
       lineHeight: 1.3,
     }}
     codeTagProps={{ className: 'syntax-highlighter' }}

diff --git a/example/src/Demo.tsx → example/src/components/Demo.tsx b/example/src/Demo.tsx → example/src/components/Demo.tsx
@@ -1,11 +1,11 @@
 import { createRef, FormEventHandler, FunctionComponent, useState } from 'react';
 import GitHubCalendar, { Props } from 'react-github-calendar';
 
-import './Demo.css';
-import pkg from '../package.json';
+import '../styles.scss';
+import pkg from '../../package.json';
 
-import CodeBlock from './CodeBlock';
-import ForkMe from './ForkMe';
+import CodeBlock from './CodeBlock.tsx';
+import ForkMe from './ForkMe.tsx';
 import GitHubButton from 'react-github-btn';
 
 const selectLastHalfYear: Props['transformData'] = contributions => {
@@ -66,15 +66,17 @@ const Demo: FunctionComponent = () => {
             on GitHub
           </h4>
 
-          <GitHubCalendar username={username} fontSize={16} />
+          <div style={{ overflowX: 'auto' }}>
+            <GitHubCalendar username={username} fontSize={16} />
+          </div>
 
-          <p style={{ marginBottom: 12 }}>
+          <p style={{ marginBottom: '1.25rem' }}>
             Made with love by <a href="https://jogruber.de">@grubersjoe</a>, current version:{' '}
             <a href="https://www.npmjs.com/package/react-github-calendar">
               <code>v{pkg.version}</code>
             </a>
           </p>
-          <p>
+          <div>
             <GitHubButton
               href="https://github.com/grubersjoe/react-github-calendar"
               data-color-scheme="no-preference: light; light: light; dark: dark;"
@@ -85,7 +87,7 @@ const Demo: FunctionComponent = () => {
             >
               Star
             </GitHubButton>
-          </p>
+          </div>
         </section>
 
         <section>
@@ -401,15 +403,17 @@ function transformData(data: Array<Activity>): Array<Activity>;`}
 
           <br />
 
-          <GitHubCalendar
-            username={username}
-            transformData={selectLastHalfYear}
-            hideColorLegend
-            fontSize={16}
-            labels={{
-              totalCount: '{{count}} contributions in the last half year',
-            }}
-          />
+          <div style={{ overflowX: 'auto' }}>
+            <GitHubCalendar
+              username={username}
+              transformData={selectLastHalfYear}
+              hideColorLegend
+              fontSize={16}
+              labels={{
+                totalCount: '{{count}} contributions in the last half year',
+              }}
+            />
+          </div>
 
           <p>
             The total count will be recalculated based on the transformed data. However, you can

diff --git a/example/src/ForkMe.tsx → example/src/components/ForkMe.tsx b/example/src/ForkMe.tsx → example/src/components/ForkMe.tsx
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import Demo from './Demo';
+import Demo from './components/Demo.tsx';
 
 const container = document.getElementById('root');