From 1690b368fce6cf81a43edb0a69ddec7be018a605 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 19 Feb 2024 12:30:04 -0800 Subject: [PATCH] feat: post share button --- .eleventy.js | 3 +++ package-lock.json | 10 +++++++-- package.json | 3 ++- src/_includes/partials/now/media-grid.liquid | 3 ++- src/_includes/partials/share-button.liquid | 23 ++++++++++++++++++++ src/_includes/post.liquid | 3 ++- src/assets/styles/index.css | 20 ++++++++++------- src/assets/styles/widgets/share-button.css | 21 ++++++++++++++++++ 8 files changed, 73 insertions(+), 13 deletions(-) create mode 100644 src/_includes/partials/share-button.liquid create mode 100644 src/assets/styles/widgets/share-button.css diff --git a/.eleventy.js b/.eleventy.js index 837eca56..292c2909 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -77,6 +77,9 @@ export default async function (eleventyConfig) { eleventyConfig.addPassthroughCopy({ 'node_modules/@daviddarnes/mastodon-post/mastodon-post.js': 'assets/scripts/mastodon-post.js' }) + eleventyConfig.addPassthroughCopy({ + 'node_modules/@daviddarnes/share-button/share-button.js': 'assets/scripts/share-button.js' + }) // enable merging of tags eleventyConfig.setDataDeepMerge(true) diff --git a/package-lock.json b/package-lock.json index 6c6c744a..fe9f8ca6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,16 @@ { "name": "coryd.dev", - "version": "6.0.7", + "version": "6.1.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "6.0.7", + "version": "6.1.7", "license": "MIT", "dependencies": { "@daviddarnes/mastodon-post": "^1.1.1", + "@daviddarnes/share-button": "^1.1.2", "@remy/webmention": "^1.5.0", "@zachleat/pagefind-search": "^1.0.3" }, @@ -1231,6 +1232,11 @@ "resolved": "https://registry.npmjs.org/@daviddarnes/mastodon-post/-/mastodon-post-1.1.1.tgz", "integrity": "sha512-qkVOJkCzsMASuvcvlv9cG/hdDwMp9uVnfFS7YhQ0JPmls4g6eVQNjLBxUT+iINFU+yBZj/zPwovDhO79gnOPEQ==" }, + "node_modules/@daviddarnes/share-button": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@daviddarnes/share-button/-/share-button-1.1.2.tgz", + "integrity": "sha512-FV89mgFwG9+97VvkHzrE3SR3p9BzM31SuDtpWFJIfw/aThVvoQj7zM71FJ+QBAfUMF1Wwm7Jufvh6h4hEdA1uA==" + }, "node_modules/@emnapi/runtime": { "version": "0.45.0", "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-0.45.0.tgz", diff --git a/package.json b/package.json index 6598c75d..9004e74e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "6.1.7", + "version": "6.2.7", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "type": "module", "scripts": { @@ -21,6 +21,7 @@ "license": "MIT", "dependencies": { "@daviddarnes/mastodon-post": "^1.1.1", + "@daviddarnes/share-button": "^1.1.2", "@remy/webmention": "^1.5.0", "@zachleat/pagefind-search": "^1.0.3" }, diff --git a/src/_includes/partials/now/media-grid.liquid b/src/_includes/partials/now/media-grid.liquid index 5dede610..99e13d5f 100644 --- a/src/_includes/partials/now/media-grid.liquid +++ b/src/_includes/partials/now/media-grid.liquid @@ -37,7 +37,8 @@ 'lazy' {%- endif -%} {%- endcapture -%} - {{ alt }} + + {{ item.image}} {% endfor %} diff --git a/src/_includes/partials/share-button.liquid b/src/_includes/partials/share-button.liquid new file mode 100644 index 00000000..a0e5a194 --- /dev/null +++ b/src/_includes/partials/share-button.liquid @@ -0,0 +1,23 @@ +{% capture css %} + {% render "../../assets/styles/widgets/share-button.css" %} +{% endcapture %} + + + + + + + \ No newline at end of file diff --git a/src/_includes/post.liquid b/src/_includes/post.liquid index 574f781e..41020ddd 100644 --- a/src/_includes/post.liquid +++ b/src/_includes/post.liquid @@ -14,7 +14,8 @@ schema: blog

{{ title }}

- + + {% render "partials/share-button.liquid", url:postUrl %}
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 64d1a29b..a9cd4480 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -75,7 +75,14 @@ a svg { stroke: var(--accent-color); } -:is(a:has(svg):hover, a:has(svg):active, a:has(svg):focus) svg { +:is( + a:has(svg):hover, + a:has(svg):active, + a:has(svg):focus, + button:has(svg):hover, + button:has(svg):active, + button:has(svg):focus +) svg { stroke: var(--accent-color-hover); } @@ -196,6 +203,8 @@ nav svg { a svg:hover, a svg:active, a svg:focus, +button:hover svg, +button svg:hover, .theme__toggle:hover, .theme__toggle svg:hover { stroke-width: var(--stroke-width-bold); @@ -344,7 +353,7 @@ code { /* articles */ article h2 { line-height: var(--line-height-2xl); - margin: 0 0 .125rem; + margin: 0 0 .375rem; } article [rel="author"], @@ -377,7 +386,7 @@ svg { } .icon--center__vertical { - height: 1.75rem; + height: 1.275rem; } .icon--center__vertical > svg { @@ -565,11 +574,6 @@ footer nav { height: 1rem; } - /* icons */ - .icon--center__vertical { - height: 1.5rem; - } - /* lists */ ul, ol { padding-left: 2.5rem; diff --git a/src/assets/styles/widgets/share-button.css b/src/assets/styles/widgets/share-button.css new file mode 100644 index 00000000..e6437262 --- /dev/null +++ b/src/assets/styles/widgets/share-button.css @@ -0,0 +1,21 @@ +button { + background: transparent; + padding: 0; +} + +button, +button > svg { + cursor: pointer; +} + +input { + border-radius: var(--rounded-md); + padding: .25rem; + border: none; +} + +label { + font-size: var(--font-size-sm); + line-height: var(--line-height-sm); + height: 1rem; +} \ No newline at end of file