Skip to content

Commit eb287f3

Browse files
dimsemenovdimsemenov
committed
docs upd
1 parent 2b78a0a commit eb287f3

File tree

10 files changed

+164
-62
lines changed

10 files changed

+164
-62
lines changed

‎.github/workflows/build.yml

+4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ jobs:
1515
with:
1616
node-version: 16
1717

18+
- name: "github api fetch (for stars count)"
19+
working-directory: demo-docs-website
20+
run: curl -s https://api.github.com/repos/dimsemenov/photoswipe -o ./repo-data.json
21+
1822
- name: "npm install & build docs"
1923
working-directory: demo-docs-website
2024
run: |

‎demo-docs-website/docusaurus.config.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,9 @@ const config = {
4949
routeBasePath: '/',
5050
sidebarPath: require.resolve('./sidebars.js'),
5151
// Please change this to your repo.
52-
editUrl: 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
52+
editUrl: 'https://github.com/dimsemenov/PhotoSwipe/tree/master/docs',
5353
breadcrumbs: false
5454
},
55-
blog: {
56-
showReadingTime: true,
57-
// Please change this to your repo.
58-
editUrl:
59-
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
60-
},
6155
theme: {
6256
customCss: require.resolve('./src/css/custom.css'),
6357
},

‎demo-docs-website/repo-data.json

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
{
2+
"id": 1580851,
3+
"name": "PhotoSwipe",
4+
"full_name": "dimsemenov/PhotoSwipe",
5+
"private": false,
6+
"owner": {
7+
"login": "dimsemenov",
8+
"id": 1061115,
9+
"avatar_url": "https://avatars.githubusercontent.com/u/1061115?v=4",
10+
"gravatar_id": "",
11+
"url": "https://api.github.com/users/dimsemenov",
12+
"html_url": "https://github.com/dimsemenov",
13+
"followers_url": "https://api.github.com/users/dimsemenov/followers",
14+
"following_url": "https://api.github.com/users/dimsemenov/following{/other_user}",
15+
"gists_url": "https://api.github.com/users/dimsemenov/gists{/gist_id}",
16+
"starred_url": "https://api.github.com/users/dimsemenov/starred{/owner}{/repo}",
17+
"subscriptions_url": "https://api.github.com/users/dimsemenov/subscriptions",
18+
"organizations_url": "https://api.github.com/users/dimsemenov/orgs",
19+
"repos_url": "https://api.github.com/users/dimsemenov/repos",
20+
"events_url": "https://api.github.com/users/dimsemenov/events{/privacy}",
21+
"received_events_url": "https://api.github.com/users/dimsemenov/received_events",
22+
"type": "User",
23+
"site_admin": false
24+
},
25+
"html_url": "https://github.com/dimsemenov/PhotoSwipe",
26+
"description": "JavaScript image gallery for mobile and desktop, modular, framework independent",
27+
"fork": false,
28+
"url": "https://api.github.com/repos/dimsemenov/PhotoSwipe",
29+
"forks_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/forks",
30+
"keys_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/keys{/key_id}",
31+
"collaborators_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/collaborators{/collaborator}",
32+
"teams_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/teams",
33+
"hooks_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/hooks",
34+
"issue_events_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/issues/events{/number}",
35+
"events_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/events",
36+
"assignees_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/assignees{/user}",
37+
"branches_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/branches{/branch}",
38+
"tags_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/tags",
39+
"blobs_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/git/blobs{/sha}",
40+
"git_tags_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/git/tags{/sha}",
41+
"git_refs_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/git/refs{/sha}",
42+
"trees_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/git/trees{/sha}",
43+
"statuses_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/statuses/{sha}",
44+
"languages_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/languages",
45+
"stargazers_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/stargazers",
46+
"contributors_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/contributors",
47+
"subscribers_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/subscribers",
48+
"subscription_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/subscription",
49+
"commits_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/commits{/sha}",
50+
"git_commits_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/git/commits{/sha}",
51+
"comments_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/comments{/number}",
52+
"issue_comment_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/issues/comments{/number}",
53+
"contents_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/contents/{+path}",
54+
"compare_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/compare/{base}...{head}",
55+
"merges_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/merges",
56+
"archive_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/{archive_format}{/ref}",
57+
"downloads_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/downloads",
58+
"issues_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/issues{/number}",
59+
"pulls_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/pulls{/number}",
60+
"milestones_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/milestones{/number}",
61+
"notifications_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/notifications{?since,all,participating}",
62+
"labels_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/labels{/name}",
63+
"releases_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/releases{/id}",
64+
"deployments_url": "https://api.github.com/repos/dimsemenov/PhotoSwipe/deployments",
65+
"created_at": "2011-04-07T05:46:29Z",
66+
"updated_at": "2022-03-27T01:05:17Z",
67+
"pushed_at": "2022-03-26T14:18:32Z",
68+
"git_url": "git://github.com/dimsemenov/PhotoSwipe.git",
69+
"ssh_url": "[email protected]:dimsemenov/PhotoSwipe.git",
70+
"clone_url": "https://github.com/dimsemenov/PhotoSwipe.git",
71+
"svn_url": "https://github.com/dimsemenov/PhotoSwipe",
72+
"homepage": "http://photoswipe.com",
73+
"size": 31451,
74+
"stargazers_count": 21653,
75+
"watchers_count": 21653,
76+
"language": "JavaScript",
77+
"has_issues": true,
78+
"has_projects": true,
79+
"has_downloads": true,
80+
"has_wiki": true,
81+
"has_pages": false,
82+
"forks_count": 3271,
83+
"mirror_url": null,
84+
"archived": false,
85+
"disabled": false,
86+
"open_issues_count": 564,
87+
"license": {
88+
"key": "mit",
89+
"name": "MIT License",
90+
"spdx_id": "MIT",
91+
"url": "https://api.github.com/licenses/mit",
92+
"node_id": "MDc6TGljZW5zZTEz"
93+
},
94+
"allow_forking": true,
95+
"is_template": false,
96+
"topics": [
97+
"gallery",
98+
"image",
99+
"javascript",
100+
"lightbox"
101+
],
102+
"visibility": "public",
103+
"forks": 3271,
104+
"open_issues": 564,
105+
"watchers": 21655,
106+
"default_branch": "master",
107+
"temp_clone_token": null,
108+
"network_count": 3271,
109+
"subscribers_count": 556
110+
}

‎demo-docs-website/src/css/home.css

+27
Original file line numberDiff line numberDiff line change
@@ -186,4 +186,31 @@ figure.pswp-docs__home-gallery-item {
186186
figcaption.caption {
187187
font-size: 12px;
188188
margin-top: 6px;
189+
}
190+
191+
192+
193+
@media (max-width: 650px) {
194+
.pswp-docs__home-gallery {
195+
grid-gap: 5px;
196+
}
197+
.pswp-docs__header-title-text h1 {
198+
font-size: 36px;
199+
}
200+
.pswp-docs__header-title-text {
201+
margin: 40px 0px 30px;
202+
font-size: 18px;
203+
text-align: center;
204+
}
205+
.pswp-docs__home-block h2 {
206+
font-size: 26px;
207+
margin: 40px auto 12px;
208+
}
209+
.pswp-docs__whats-new h4 {
210+
margin: 24px auto 12px;
211+
font-size: var(--ifm-font-size-base);
212+
}
213+
#gallery--deep-zoom {
214+
max-width: 296px;
215+
}
189216
}

‎demo-docs-website/src/pages/_index-gallery-header.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ function GalleryItem(props) {
108108
style: {
109109
paddingBottom: props.cropped ? 1 / props.aspectRatio * 100 + '%' : props.height / props.width * 100 + '%'
110110
},
111-
href: props.srcset,
111+
href: props.src,
112112
'data-pswp-srcset': props.srcset,
113113
'data-pswp-width': props.width,
114114
'data-pswp-height': props.height,

‎demo-docs-website/src/pages/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ function HomepageHeader() {
1212
<div className="pswp-docs__home-block pswp-docs__header-intro container">
1313
<Head>
1414
<html className="pswp-docs__home" />
15+
<title>PhotoSwipe: Responsive JavaScript Image Gallery</title>
1516
</Head>
1617
<div className="row">
1718
<div className="col col--12 pswp-docs__header-title-text">
@@ -111,7 +112,6 @@ export default function Home() {
111112
const {siteConfig} = useDocusaurusContext();
112113
return (
113114
<Layout
114-
title="PhotoSwipe: Responsive JavaScript Image Gallery"
115115
description="Open-source JavaScript image gallery and lightbox.">
116116
<HomepageHeader />
117117
<WhatsNew />

‎demo-docs-website/src/theme/Navbar/github-stars.js

+17-49
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,21 @@
11
import React from 'react'
22

3-
class ReactGithubStars extends React.Component {
4-
constructor() {
5-
super();
6-
this.state = {
7-
stars: null,
8-
loading: true
9-
}
10-
}
3+
import repoData from '../../../repo-data.json';
114

12-
componentDidMount() {
13-
this.setState({ loading: true })
14-
this.fetchGithub()
15-
}
16-
17-
fetchGithub() {
18-
fetch(`https://api.github.com/repos/${this.props.repo}`)
19-
.then((response) => {
20-
response.json().then((data) => {
21-
this.setState({
22-
stars: parseInt(data.stargazers_count, 10) || 0,
23-
loading: false
24-
})
25-
})
26-
}).catch((response) => {
27-
if (response || response.status === 404) {
28-
this.setState({
29-
stars: 0,
30-
loading: false
31-
})
32-
}
33-
})
34-
}
35-
36-
render() {
37-
return (
38-
<a href={`https://github.com/${this.props.repo}`} className="pswp-docs__github-link">
39-
<span className="pswp-docs__github-link-left">Github</span>
40-
<span className='pswp-docs__github-link-right'>
41-
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
42-
<path fillRule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
43-
</svg>
44-
<span className="pswp-docs__github-link-star-count">{
45-
this.state.stars ? this.state.stars.toLocaleString() : ''
46-
}</span>
47-
</span>
48-
</a>
49-
)
50-
}
5+
export default function ReactGithubStars() {
6+
return (
7+
<a href="https://github.com/dimsemenov/photoswipe" className="pswp-docs__github-link">
8+
<span className="pswp-docs__github-link-left">Github</span>
9+
<span className='pswp-docs__github-link-right'>
10+
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
11+
<path fillRule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
12+
</svg>
13+
<span className="pswp-docs__github-link-star-count">{
14+
(repoData
15+
&& repoData.stargazers_count
16+
&& parseInt(repoData.stargazers_count, 10) > 100) ? parseInt(repoData.stargazers_count, 10).toLocaleString() : ''
17+
}</span>
18+
</span>
19+
</a>
20+
)
5121
}
52-
53-
export default ReactGithubStars;

‎demo-docs-website/src/theme/Navbar/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ export default function Navbar() {
258258
</div>
259259
<div className="navbar__items navbar__items--right">
260260
<TwitterLink />
261-
<ReactGithubStars repo="dimsemenov/photoswipe" />
261+
<ReactGithubStars />
262262
{rightItems.map((item, i) => (
263263
<NavbarItem {...item} key={i} />
264264
))}

‎docs/getting-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ lightbox.init();
4141
Alternatively, you may install PhotoSwipe via NPM or Yarn:
4242

4343
```
44-
npm i --save photoswipe#beta
44+
npm i photoswipe --save
4545
```
4646

4747
```js

‎docs/styling.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -140,11 +140,10 @@ lightbox.init();
140140

141141
If you have a good connection, you probably haven't even seen the loading indicator. That's because PhotoSwipe displays loading indicator only if image is not loaded within 2 seconds (can be adjusted via [preloaderDelay](options#preloaderDelay) option). Use dev tools network throttling to test it.
142142

143-
The default loading indicator is displayed in the top left corner and is just a spinning 3/4 circle. You may adjust it just via CSS, the default styles are in `photoswipe.css`. https://github.com/dimsemenov/PhotoSwipe/blob/v5-beta/dist/photoswipe.css#L372
143+
The default loading indicator is displayed in the top left corner and is just a spinning 3/4 circle. You may adjust it just via CSS, the default styles are in `photoswipe.css`.
144144

145145
The example below permanently displays it for debugging:
146146

147-
148147
<PswpCodePreview numItems="4" galleryID="perma-preloader">
149148

150149
```js pswpcode

0 commit comments

Comments
 (0)