https://github.com/tropy/tropy.github.io
https://github.com/tropy/tropy.github.io
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/tropy/tropy.github.io
- Owner: tropy
- License: other
- Created: 2020-03-05T11:15:37.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-02-28T13:51:53.000Z (over 1 year ago)
- Last Synced: 2025-07-16T15:10:16.921Z (12 months ago)
- Language: HTML
- Size: 45.8 MB
- Stars: 2
- Watchers: 6
- Forks: 3
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: license.html
Awesome Lists containing this project
README
# tropy.github.io
## Prerequisites
- Ruby 2.5.0 or later (`ruby -v`)
- Bundler (`gem install bundler`)
## Install dependencies
```
$ bundle install
```
## Serve the site
```
$ bundle exec jekyll serve
```
… and visit at `localhost:4000`.
## Switch for previewing drafts of blog posts
```
$ bundle exec jekyll serve --drafts
```
## Getting rid of gem deprecation warnings
```
$ gem pristine --all --no-extensions
```
## Updating
To stay in sync with GitHub Pages run:
```
$ bundle update github-pages
```
## Writing blog posts
### Headline hierarchy
In order to keep the outline of a post semantic in terms of accessibility, no heading level should be omitted. In case a visually smaller heading is wanted you can use heading classes:
```
## Looks like heading 3
{: .h3}
```
### Images
Unless you link to an external image add your photos to this location (create subfolders for year and month):
```
tropy.github.io
└── assets
└── images
└── blog
```
### Post image
You can specify one (high-res) image in the post’s front matter that will be rendered on top of the post’s content (but it is not rendered in the post excerpts).
The post image can be used as a large preview image in tweets instead of the smaller Tropy icon. As Twitter crops preview images it is not recommended to use them for artwork, add artwork as image to your tweet instead of the preview.
Both a low-res (e.g. *image.png*) and a high-res (e.g. *image`@2x`.png*) version must exist.
```
---
image: /path/to/image@2x.png
twitter:
card: summary_large_image
---
```
### Responsive images
Use a liquid tag to embed images with multiple resolutions (specify `@2x` version only):
```
{% include image src="/path/to/image@2x.png" alt="" %}
```
### Captions
Use a liquid tag for images with captions (specify `@2x` version for responsive images):
```
{% include figure src="/path/to/image@2x.png" alt="" caption="Example" %}
```
**Heads up**: use single quotes inside captions: `caption="Source"`
### Screenshots and borders
You can add a shadow and rounded corners to images and figures by adding the `screenshot` class:
```
{% include image src="…" alt="…" class="screenshot" %}
```
If all you want is a border, you can add the `border` class instead:
```
{% include image src="…" alt="…" class="border" %}
```
## Deployment
Push to GitHub and your changes are live.
## License Page
The file `_includes/third-party-notices.html` is automatically generated and should not be changed by hand. To update, checkout [tropy/tropy] and point Tropy's `legal` script to the includes folder:
```
npm run legal -- -o ../tropy.github.io/_includes
```