Merge pull request #35 from glanceapp/v0.3.0

V0.3.0

docs/configuration.md

@@ -179,7 +179,7 @@ If you don't want to spend time configuring your own theme, there are [several a
 ### Properties
 | Name | Type | Required | Default |
 | ---- | ---- | -------- | ------- |
-| light | bool | no | false |
+| light | boolean | no | false |
 | background-color | HSL | no | 240 8 9 |
 | primary-color | HSL | no | 43 50 70 |
 | positive-color | HSL | no | same as `primary-color` |
@@ -434,6 +434,7 @@ Preview:
 | ---- | ---- | -------- | ------- |
 | channels | array | yes | |
 | limit | integer | no | 25 |
+| video-url-template | string | no | https://www.youtube.com/watch?v={VIDEO-ID} |
 
 ##### `channels`
 A list of channel IDs. One way of getting the ID of a channel is going to the channel's page and clicking on its description:
@@ -447,6 +448,17 @@ Then scroll down and click on "Share channel", then "Copy channel ID":
 ##### `limit`
 The maximum number of videos to show.
 
+##### `video-url-template`
+Used to replace the default link for videos. Useful when you're running your own YouTube front-end. Example:
+
+```yaml
+video-url-template: https://invidious.your-domain.com/watch?v={VIDEO-ID}
+```
+
+Placeholders:
+
+`{VIDEO-ID}` - the ID of the video
+
 ### Hacker News
 Display a list of posts from [Hacker News](https://news.ycombinator.com/).
 
@@ -466,6 +478,18 @@ Preview:
 | ---- | ---- | -------- | ------- |
 | limit | integer | no | 15 |
 | collapse-after | integer | no | 5 |
+| comments-url-template | string | no | https://news.ycombinator.com/item?id={POST-ID} |
+
+##### `comments-url-template`
+Used to replace the default link for post comments. Useful if you want to use an alternative front-end. Example:
+
+```yaml
+comments-url-template: https://www.hckrnws.com/stories/{POST-ID}
+```
+
+Placeholders:
+
+`{POST-ID}` - the ID of the post
 
 ### Reddit
 Display a list of posts from a specific subreddit.
@@ -486,8 +510,11 @@ Example:
 | ---- | ---- | -------- | ------- |
 | subreddit | string | yes |  |
 | style | string | no | vertical-list |
+| show-thumbnails | boolean | no | false |
 | limit | integer | no | 15 |
 | collapse-after | integer | no | 5 |
+| comments-url-template | string | no | https://www.reddit.com/{POST-PATH} |
+| request-url-template | string | no |  |
 
 ##### `subreddit`
 The subreddit for which to fetch the posts from.
@@ -507,12 +534,52 @@ Used to change the appearance of the widget. Possible values are `vertical-list`
 
 ![](images/reddit-widget-vertical-cards-preview.png)
 
+##### `show-thumbnails`
+Shows or hides thumbnails next to the post. This only works if the `style` is `vertical-list`. Preview:
+
+![](images/reddit-widget-vertical-list-thumbnails.png)
+
+> [!NOTE]
+>
+> Thumbnails don't work for some subreddits due to Reddit's API not returning the thumbnail URL. No workaround for this yet.
+
 ##### `limit`
 The maximum number of posts to show.
 
 ##### `collapse-after`
 How many posts are visible before the "SHOW MORE" button appears. Set to `-1` to never collapse. Not available when using the `vertical-cards` and `horizontal-cards` styles.
 
+##### `comments-url-template`
+Used to replace the default link for post comments. Useful if you want to use the old Reddit design or any other 3rd party front-end. Example:
+
+```yaml
+comments-url-template: https://old.reddit.com/{POST-PATH}
+```
+
+Placeholders:
+
+`{POST-PATH}` - the full path to the post, such as:
+
+```
+r/selfhosted/comments/bsp01i/welcome_to_rselfhosted_please_read_this_first/
+```
+
+`{POST-ID}` - the ID that comes after `/comments/`
+
+`{SUBREDDIT}` - the subreddit name
+
+##### `request-url-template`
+A custom request url that will be used to fetch the data instead. This is useful when you're hosting Glance on a VPS and Reddit is blocking the requests, and you want to route it through an HTTP proxy.
+
+Placeholders:
+
+`{REQUEST-URL}` - will be templated and replaced with the expanded request URL (i.e. https://www.reddit.com/r/selfhosted/hot.json). Example:
+
+```
+https://proxy/{REQUEST-URL}
+https://your.proxy/?url={REQUEST-URL}
+```
+
 ### Weather
 Display weather information for a specific location. The data is provided by https://open-meteo.com/.
 
@@ -524,6 +591,15 @@ Example:
   location: London, United Kingdom
 ```
 
+> [!NOTE]
+>
+> US cities which have common names can have their state specified as the second parameter like such:
+>
+> * Greenville, North Carolina, United States
+> * Greenville, South Carolina, United States
+> * Greenville, Mississippi, United States
+
+
 Preview:
 
 ![](images/weather-widget-preview.png)
@@ -537,6 +613,7 @@ Each bar represents a 2 hour interval. The yellow background represents sunrise
 | location | string | yes |  |
 | units | string | no | metric |
 | hide-location | boolean | no | false |
+| show-area-name | boolean | no | false |
 
 ##### `location`
 The name of the city and country to fetch weather information for. Attempting to launch the applcation with an invalid location will result in an error. You can use the [gecoding API page](https://open-meteo.com/en/docs/geocoding-api) to search for your specific location. Glance will use the first result from the list if there are multiple.
@@ -547,6 +624,19 @@ Whether to show the temperature in celsius or fahrenheit, possible values are `m
 ##### `hide-location`
 Optionally don't display the location name on the widget.
 
+##### `show-area-name`
+Whether to display the state/administrative area in the location name. If set to `true` the location will be displayed as:
+
+```
+Greenville, North Carolina, United States
+```
+
+Otherwise, if set to `false` (which is the default) it'll be displayed as:
+
+```
+Greenville, United States
+```
+
 ### Monitor
 Display a list of sites and whether they are reachable (online) or not. This is determined by sending a HEAD request to the specified URL, if the response is 200 then the site is OK. The time it took to receive a response is also shown in milliseconds.
 
@@ -591,11 +681,12 @@ You can hover over the "ERROR" text to view more information.
 
 Properties for each site:
 
-| Name | Type | Required |
-| ---- | ---- | -------- |
-| title | string | yes |
-| url | string | yes |
-| icon | string | no |
+| Name | Type | Required | Default |
+| ---- | ---- | -------- | ------- |
+| title | string | yes | |
+| url | string | yes | |
+| icon | string | no | |
+| same-tab | boolean | no | false |
 
 `title`
 
@@ -609,6 +700,10 @@ The URL which will be requested and its response will determine the status of th
 
 Optional URL to an image which will be used as the icon for the site. Can be an external URL or internal via [server configured assets](#assets-path).
 
+`same-tab`
+
+Whether to open the link in the same or a new tab.
+
 ### Releases
 Display a list of releases for specific repositories on Github. Draft releases and prereleases will not be shown.
 
@@ -725,14 +820,39 @@ An array of groups which can optionally have a title and a custom color.
 | Name | Type | Required | Default |
 | ---- | ---- | -------- | ------- |
 | title | string | no | |
-| color | HSL | no | the primary theme color |
+| color | HSL | no | the primary color of the theme |
 | links | array | yes | |
 
 ###### Properties for each link
-| Name | Type | Required |
-| ---- | ---- | -------- |
-| title | string | yes |
-| url | string | yes |
+| Name | Type | Required | Default |
+| ---- | ---- | -------- | ------- |
+| title | string | yes | |
+| url | string | yes | |
+| icon | string | no | |
+| same-tab | boolean | no | false |
+| hide-arrow | boolean | no | false |
+
+`icon`
+
+URL pointing to an image. You can also directly use [Simple Icons](https://simpleicons.org/) via a `si:` prefix:
+
+```yaml
+icon: si:gmail
+icon: si:youtube
+icon: si:reddit
+```
+
+> [!WARNING]
+>
+> Simple Icons are loaded externally and are hosted on `cdnjs.cloudflare.com`, if you do not wish to depend on a 3rd party you are free to download the icons individually and host them locally.
+
+`same-tab`
+
+Whether to open the link in the same tab or a new one.
+
+`hide-arrow`
+
+Whether to hide the colored arrow on each link.
 
 ### Calendar
 Display a calendar.
@@ -786,6 +906,7 @@ Preview:
 | Name | Type | Required |
 | ---- | ---- | -------- |
 | stocks | array | yes |
+| sort-by | string | no |
 
 ##### `stocks`
 An array of stocks for which to display information about.
@@ -804,6 +925,9 @@ The symbol, as seen in Yahoo Finance.
 
 The name that will be displayed under the symbol.
 
+##### `sort-by`
+By default the stocks are displayed in the order they were defined. You can customize their ordering by setting the `sort-by` property to `absolute-change` for descending order based on the stock's absolute price change.
+
 ### Twitch Channels
 Display a list of channels from Twitch.
 

internal/assets/static/main.css

@@ -33,6 +33,7 @@
     --color-widget-background: hsl(var(--color-widget-background-hsl-values));
     --color-separator: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 4% * var(--cm))));
     --color-widget-content-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%)));
+    --color-widget-background-highlight: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%)));
 
     --ths: var(--bgh), calc(var(--bgs) * var(--tsm));
     --color-text-base: hsl(var(--ths), calc(var(--scheme) var(--cm) * 58%));
@@ -80,7 +81,7 @@
 
 .visited-indicator:not(.text-truncate)::after,
 .visited-indicator.text-truncate::before,
-.bookmarks-link::after {
+.bookmarks-link:not(.bookmarks-link-no-arrow)::after {
     content: '↗';
     margin-left: 0.5em;
     display: inline-block;
@@ -567,6 +568,21 @@ body {
     -webkit-box-orient: vertical;
 }
 
+.forum-post-list-item {
+    display: flex;
+    gap: 1.2rem;
+}
+
+.forum-post-list-thumbnail {
+    flex-shrink: 0;
+    width: 6rem;
+    height: 4.1rem;
+    border-radius: var(--border-radius);
+    object-fit: cover;
+    border: 1px solid var(--color-separator);
+    margin-top: 0.1rem;
+}
+
 .bookmarks-group {
     --bookmarks-group-color: var(--color-primary);
 }
@@ -575,10 +591,31 @@ body {
     color: var(--bookmarks-group-color);
 }
 
-.bookmarks-link::after {
+.bookmarks-group .bookmarks-link::after {
     color: var(--bookmarks-group-color);
 }
 
+.bookmarks-icon-container {
+    margin-block: 0.1rem;
+    background-color: var(--color-widget-background-highlight);
+    border-radius: var(--border-radius);
+    padding: 0.5rem;
+}
+
+.bookmarks-icon {
+    width: 20px;
+    height: 20px;
+    opacity: 0.8;
+}
+
+.simple-icon {
+    opacity: 0.7;
+}
+
+:root:not(.light-scheme) .simple-icon {
+    filter: invert(1);
+}
+
 .calendar-day {
     width: calc(100% / 7);
     text-align: center;
@@ -975,6 +1012,14 @@ body {
         --widget-content-horizontal-padding: 10px;
         --content-bounds-padding: 10px;
     }
+
+    .forum-post-list-item {
+        flex-flow: row-reverse;
+    }
+
+    .hide-on-mobile {
+        display: none
+    }
 }
 
 .size-h1   { font-size: var(--font-size-h1); }
@@ -1011,7 +1056,7 @@ body {
 .justify-center     { justify-content: center; }
 .justify-end        { justify-content: end; }
 .uppercase          { text-transform: uppercase; }
-.flex-grow          { flex-grow: 1; }
+.grow               { flex-grow: 1; }
 .flex-column        { flex-direction: column; }
 .items-center       { align-items: center; }
 .items-start        { align-items: start; }

internal/assets/templates/bookmarks.html

@@ -7,7 +7,14 @@
         {{ if ne .Title "" }}<div class="bookmarks-group-title size-h3 margin-bottom-3">{{ .Title }}</div>{{ end }}
         <ul class="list list-gap-2">
         {{ range .Links }}
-            <li><a href="{{ .URL }}" class="bookmarks-link color-highlight size-h4" target="_blank" rel="noreferrer">{{ .Title }}</a></li>
+            <li class="flex items-center gap-10">
+                {{ if ne "" .Icon }}
+                <div class="bookmarks-icon-container">
+                    <img class="bookmarks-icon{{ if .IsSimpleIcon }} simple-icon{{ end }}" src="{{ .Icon }}" alt="" loading="lazy">
+                </div>
+                {{ end }}
+                <a href="{{ .URL }}" class="bookmarks-link {{ if .HideArrow }}bookmarks-link-no-arrow {{ end }}color-highlight size-h4" {{ if not .SameTab }}target="_blank"{{ end }} rel="noreferrer">{{ .Title }}</a>
+            </li>
         {{ end }}
         </ul>
     </li>