jekyll-theme-linky 0.1.1 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5323e3a0dcffa3ce96b3f0440a5303d38e0c224f604937618aa0ee60e460abb0
-  data.tar.gz: 740831e6ae760690aa54d36696b7e5a45624570031aca296dc69223b659ea745
+  metadata.gz: 391ab2564daad6a0550ee053d459e31440517f1df1b2b053bc7a76449583d001
+  data.tar.gz: 529b2f07d6dad47ae3aa2877240dff09396056bbd3f58462578e897382d0f0cf
 SHA512:
-  metadata.gz: 98cbdb1f88d140768cabb757ddce961a4e09988f5ffc74adc8695c48605fb46b1625a35c93df318b22b4eaf0a5d433a6109608256a1aaba33f7abf6bde015c5b
-  data.tar.gz: 86f360140ca4e37eb0ca7b9ce9b8f382704378494da8d2e69976c6a14349e8fb49bb748b69af394aec23e0209c0630e990e23424c7acfedeeba6869475b760ab
+  metadata.gz: 7627cd4d20acd9f9a5acd9563a51188c5d7fa91015bc0441edae0456841794fa5328cea07254be4fcb984b4ea4696155e76c8ddb3484137872f5ae3c5c0ff0d7
+  data.tar.gz: f4a0d4b499fc8c34fe23151bc106cd1655e7998480e94d3b424be1ef64c9b8c62a9456772e9cfb7a6cdd329798f6f949089cf84271d0fa342b10445d91351f9a

data/README.md

@@ -1,10 +1,15 @@
 # linky
 
-Work-in-progress linktree-esque theme, aiming for easy integration with Decap CMS.
+A linktree-esque theme, built for static hosting and easy maintenance with [Decap CMS][decap].
+
+<picture>
+    <source srcset="images/linky-home.webp" type="image/webp">
+    <img src="images/linky-home.png" alt="Linky Home Page">
+</picture>
 
 ## Installation
 
-Add this line to your Jekyll site's `Gemfile`:
+Add this line to your [Jekyll][jekyll] site's `Gemfile`:
 
 ```ruby
 gem "linky"
@@ -26,11 +31,9 @@ Or install it yourself as:
 
 ## Usage
 
-Use the [links layout][ll] on any page (including the home page) to display a list of all items in the `links` collection. Any additional content
-within your page will be displayed after the list.
+Use the [links layout][ll] on any page (including the home page) to display a list of all items in the `links` collection. Any additional content within your page will be displayed after the list.
 
-The `links` collection is defined by individual files in the `_links` folder. Only the YAML frontmatter of these files will be used; content
-is unnecessary and will be ignored.
+The `links` collection is defined by individual files in the `_links` folder. Only the YAML frontmatter of these files will be used; content is unnecessary and will be ignored.
 
 You will need to add a `links` collection to your Jekyll config, which is as simple as adding
 
@@ -58,8 +61,7 @@ subheads:
 
 ### Colors
 
-You can override the color scheme of a Links page by adding a `linky` section to your `_config.yml` (see [the example in this repo][config]) and
-setting one or more of these values:
+You can override the color scheme of a Links page by adding a `linky` section to your `_config.yml` (see [the example in this repo][config]) and setting one or more of these values:
 
 ```yml
 linky:
@@ -111,6 +113,34 @@ expires: 2024-11-11
     Note that this will only take effect on a rebuild; there's no runtime JavaScript, etc. to disable a link that's already been deployed.
 
 
+## Update Links with Decap CMS
+
+The whole point of this exercise (as opposed to adding links by hand or using a database-backed site) was to add/update links via a CMS, but still serve static HTML for the usual speed and safety reasons.
+
+In my case, I'm using [Decap CMS][decap] and [Netlify][netlify]. The Decap view for [linky.roub.net][linky-home] looks like this:
+
+<picture>
+    <source srcset="images/decap-home.webp" type="image/webp">
+    <img src="images/decap-home.png" alt="Decap CMS Home Page">
+</picture>
+
+Clicking on one of those links takes me to the detail page:
+
+<picture>
+    <source srcset="images/decap-detail.webp" type="image/webp">
+    <img src="images/decap-detail.png" alt="Decap CMS Detail Page">
+</picture>
+
+See the [admin folder][admin] for the relevant configuration, as well as the JS that allows for a custom preview styles (which just uses the site's CSS).
+
+Most of the admin's [config.yml][admin-config] will be the same regardless of your Decap setup, but some of the integration details (authorization, etc.) will differ if you're not using the same setup that I am. See the [Decap docs][decap-netlify] for information on the drop-in setup I'm using.
+
+Copy the admin/index.html file from this repo into your Decap admin directory if you're using the matching Netlify setup. If not, make sure you add the script tag to enable our custom preview (it will work without the tag, but it will be ugly):
+
+```html
+<script src="/assets/preview.js"></script>
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/paulroub/linky. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](https://www.contributor-covenant.org/) code of conduct.
@@ -122,3 +152,12 @@ The theme is available as open source under the terms of the [MIT License](https
 
 [ll]: https://github.com/paulroub/linky/blob/main/_layouts/links.html
 [config]: https://github.com/paulroub/linky/blob/main/_config.yml
+[linky-home]: https://linky.roub.net/
+[decap-home-image]: images/decap-home.png
+[decap-detail-image]: images/decap-detail.png
+[netlify]: https://netlify.com/
+[decap]: https://decapcms.org/
+[decap-netlify]: https://decapcms.org/docs/choosing-a-backend/#setup-on-netlify
+[admin]: https://github.com/paulroub/linky/blob/main/admin/
+[admin-config]: https://github.com/paulroub/linky/blob/main/admin/config.yml
+[jekyll]: https://jekyllrb.com/

data/_config.yml

@@ -28,12 +28,17 @@ description: >- # this means to ignore newlines until "baseurl:"
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
 github_username: paulroub
+plausible_io: linky.roub.net
 
 # Build settings
 theme: jekyll-theme-linky
 plugins:
     - jekyll-feed
 
+exclude:
+    - VERSION
+    - bin
+
 linky:
     body_background: "#030303"
     body_foreground: "#F0F0F0"

data/_includes/analytics.html

@@ -1,8 +1,5 @@
-<!-- what's our env? {{ jekyll.environment }}, {{ site.plausible_io }} -->
 {%- if jekyll.environment == 'production' -%}
-        <!-- BEGIN ANALYTICS -->
-
-{%- if site.google_analytics -%}
+    {%- if site.google_analytics -%}
         <script
             async
             src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"
@@ -23,14 +20,10 @@
         </script>
     {%- endif -%}
     {%- if site.plausible_io -%}
-    <!-- BEGIN PLAUSIBLE -->
         <script
             defer
             data-domain="{{ site.plausible_io }}"
             src="https://plausible.io/js/script.outbound-links.js"
         ></script>
-    <!-- END PLAUSIBLE -->
-    {%- endif -%}
-        <!-- END ANALYTICS -->
-
     {%- endif -%}
+{%- endif -%}

data/_includes/custom-head.html

@@ -1,6 +1,12 @@
 {% comment %}
-  Placeholder to allow defining custom head, in principle, you can add anything here, e.g. favicons:
+  Add any extra head information here, e.g. your own favicons. None of the content below is required for your own site.
 
   1. Head over to https://realfavicongenerator.net/ to add your own favicons.
-  2. Customize default _includes/custom-head.html in your source directory and insert the given code snippet.
+  2. Add _includes/custom-head.html in your source directory and insert the given code snippet.
 {% endcomment %}
+
+<link rel="icon" href="/favicon.ico" sizes="any">
+<link rel="icon" href="/linky.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+<meta property="og:image" content="https://linky.roub.net/images/linky-home.png" />

data/_includes/head.html

@@ -3,7 +3,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     {%- seo -%}  {%- feed_meta -%}
-    <link rel="icon" href="/favicon.ico" sizes="any" />
 
     <link rel="stylesheet" href="/assets/styles.css" />
 

data/assets/preview.js

@@ -0,0 +1,31 @@
+var LinkPreview = createClass({
+    render: function () {
+        const entry = this.props.entry;
+        const imageStr = entry.getIn(["data", "image"]);
+        const image = this.props.getAsset(imageStr);
+        const title = entry.getIn(["data", "title"]);
+        const link = entry.getIn(["data", "link"]);
+
+        return h(
+            "ul",
+            { class: "links" },
+            h(
+                "li",
+                { class: "link" },
+                h(
+                    "a",
+                    { href: link },
+                    h("img", {
+                        src: image.toString(),
+                        class: "link-logo",
+                        alt: title,
+                    })
+                ),
+                h("a", { class: "link-desc", href: link }, title)
+            )
+        );
+    },
+});
+
+CMS.registerPreviewTemplate("links", LinkPreview);
+CMS.registerPreviewStyle("/assets/styles.css");

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-linky
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.3
 platform: ruby
 authors:
 - Paul Roub
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-21 00:00:00.000000000 Z
+date: 2024-10-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -64,11 +64,13 @@ files:
 - assets/images/threads-logo.svg
 - assets/images/tiktok-logo.svg
 - assets/images/venmo-logo.svg
+- assets/preview.js
 - assets/styles.scss
 homepage: http://github.com/paulroub/linky
 licenses:
 - MIT
-metadata: {}
+metadata:
+  source_code_uri: https://github.com/paulroub/linky/
 post_install_message:
 rdoc_options: []
 require_paths: