Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web: Add better styling support #99

Merged
merged 4 commits into from
Apr 17, 2022
Merged

web: Add better styling support #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
27fc082
web: Add min-height to iframe
laymonage Apr 17, 2022
76dd168
web: Add part="iframe" to iframe element
laymonage Apr 17, 2022
689cb58
web: Customize dev page styles
laymonage Apr 17, 2022
7dce3ed
common: Document how to style the iframe
laymonage Apr 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,51 @@ The attribute names are the same as the `data-` attributes shown on the
[giscus website][giscus], but written in lowercase with the `data-` prefix and
dashes removed.

### Changing the `<iframe>` styles

You can style the `<iframe>` in your CSS by selecting the web component, or the
`iframe` part specifically. For example:

```css
giscus-widget {
display: flex;
margin: auto;
max-width: 640px;
}
/* or... */
#comments {
/* ... */
}
/* or... */
#comments::part(iframe) {
/* ... */
}
/* etc. */
```

You can also make the widget scrollable by creating a parent container with a
limited height and `overflow: scroll`, for example:

```html
<div class="comments-container">
<giscus-widget
...
>
</giscus-widget>
</div>
```

```css
.comments-container {
max-height: 640px;
overflow-y: scroll;
}
```

Note that this only allows you to style the `<iframe>` element and
**not the iframe's contents**. If you want to style the contents, you need to
[use a custom theme][custom-theme].

### Notes

When you change the props/attributes of the React, Vue, and web components, they
Expand Down Expand Up @@ -136,6 +181,7 @@ Released under the [MIT](./LICENSE) license.
[skypack]: https://skypack.dev
[demo]: https://giscus-component.vercel.app
[advanced-usage]: https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md
[custom-theme]: https://github.com/giscus/giscus/blob/main/ADVANCED-USAGE.md#data-theme
[web-vbadge]: https://img.shields.io/npm/v/giscus.svg
[react-vbadge]: https://img.shields.io/npm/v/@giscus/react.svg
[vue-vbadge]: https://img.shields.io/npm/v/@giscus/vue.svg
Expand Down
55 changes: 38 additions & 17 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,44 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit App</title>
<script type="module" src="/src/giscus.ts"></script>
<style>
.styles {
margin: 2rem;
font-family: sans-serif;
background-color: #bababa;
}
#comments {
display: flex;
margin: auto;
max-width: 640px;
min-height: 200px;
}
.comments-container {
margin: auto;
max-width: 800px;
max-height: 640px;
overflow-y: scroll;
}
</style>
</head>
<body style="background-color: #bababa">
<giscus-widget
id="comments"
repo="giscus/giscus"
repoid="MDEwOlJlcG9zaXRvcnkzNTE5NTgwNTM="
category="General"
categoryid="MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyNzk2NTc1"
mapping="specific"
term="Welcome to giscus!"
reactionsenabled="1"
emitmetadata="0"
inputposition="top"
theme="light"
lang="en"
>
<p>Loading comments...</p>
</giscus-widget>
<body class="styles">
<div class="comments-container">
<giscus-widget
id="comments"
repo="giscus/giscus"
repoid="MDEwOlJlcG9zaXRvcnkzNTE5NTgwNTM="
category="General"
categoryid="MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyNzk2NTc1"
mapping="specific"
term="Welcome to giscus!"
reactionsenabled="1"
emitmetadata="0"
inputposition="top"
theme="light"
lang="en"
>
<p>Loading comments...</p>
</giscus-widget>
</div>
</body>
</html>
2 changes: 2 additions & 0 deletions web/src/giscus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export class GiscusWidget extends LitElement {
width: 100%;
border: none;
color-scheme: normal;
min-height: 150px;
}
`;

Expand Down Expand Up @@ -308,6 +309,7 @@ export class GiscusWidget extends LitElement {
${ref(this._iframeRef)}
src=${this.getIframeSrc()}
loading=${this.loading}
part="iframe"
></iframe>
`;
}
Expand Down