├── .DS_Store ├── README.md ├── _config.yml ├── _includes ├── addbutton.html ├── footer.html ├── header.html ├── htmlheader.html └── sharetemplate.html ├── _layouts ├── default.html └── index.html ├── _links ├── resources.md ├── skillshare.md └── template.md ├── assets ├── .DS_Store ├── copy-light.svg ├── copy.svg ├── dark-theme.css ├── light-theme.css ├── linkshare-in-action.gif ├── scripts.js └── styles.css └── index.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codepo8/linkshare/81579c1f269c7d187de70c053689c0c498d84b0f/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Linkshare 2 | 3 | A GitHub pages layout to show your links and make it easy to copy them for social sharing 4 | 5 | See it in action at https://codepo8.github.io/linkshare/ 6 | 7 | [![Screencast showing the template in action](assets/linkshare-in-action.gif)](https://codepo8.github.io/linkshare/) 8 | 9 | ## Customising to your needs 10 | 11 | 1. Rename the title in the `index.md` document to your title. 12 | 13 | 2. The `_links` folder contains all links that will be shown here. If you want a new category, create a new file copying the template or one of the others. Links need to be lists in markdown format. You also need to change the settings on the top: 14 | 15 | * `title` is the title that will be added to the head of the document and show up in the browser tab 16 | * `name` is the name of the link to the collection of links in the index page 17 | * `permalink` is the name of the file that will get generated (this is to avoid having /repo/links/link.html URLs) 18 | 19 | Leave the `template` setting as is. 20 | 21 | To remove a category, delete the file. 22 | 23 | ## Customising the copy template 24 | 25 | By default, the copied content will be in the following format when you click the copy button: 26 | 27 | ``` 28 | 👉🏼 „Chris Heilmann's Blog” 29 | 🔗 https://christianheilmann.com 30 | 💬 Lots of web development news since 2005! 31 | ``` 32 | 33 | If you want to change this, edit the `sharetemplate.html` file in the `_includes` folder. 34 | 35 | * `$LINKTEXT` will get replaced with the text inside the link 36 | * `$URL` will get replaced with the URL 37 | * `$TEXT` will get replaced with the text following the link in your lists 38 | 39 | ## Changing the look and feel 40 | 41 | You can do this by editing the `styles.css` file for all the layout bits. All the colours for dark and light mode are defined in `dark-theme.css` and `light-theme.css`. 42 | 43 | ## Hosting 44 | 45 | To host linkshare yourself, fork it and [set up GitHub Pages for the repo](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site#creating-your-site). 46 | 47 | Pull requests and issues welcome! -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | collections: 2 | links: 3 | output: true -------------------------------------------------------------------------------- /_includes/addbutton.html: -------------------------------------------------------------------------------- 1 | {% capture newline %} 2 | {% endcapture %} 3 | {% capture itemend %}{% endcapture%} 4 | {% assign newhtml = include.html | replace: itemend, '' %} 5 | {{ newhtml }} -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 |

Written by Christian Heilmann, @codepo8, available on GitHub

-------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codepo8/linkshare/81579c1f269c7d187de70c053689c0c498d84b0f/_includes/header.html -------------------------------------------------------------------------------- /_includes/htmlheader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ page.title }} 4 | 5 | 6 | 7 | 8 | {% if page.summary %} 9 | 10 | {% endif %} 11 | {% if page.heroimage %} 12 | 13 | {% endif %} 14 | 15 | 16 | 17 | {% if page.summary %} 18 | 19 | {% endif %} 20 | {% if page.heroimage %} 21 | 22 | {% endif %} 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /_includes/sharetemplate.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include htmlheader.html %} 5 | 6 | 7 |
8 |

{{ page.title }}

9 |
10 | {% include addbutton.html html=content %} 11 |
12 | 13 |

Show all {{ site.links.size }} link categories

14 |
15 | {% include sharetemplate.html %} 16 | 17 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /_layouts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include htmlheader.html %} 5 | 6 | 7 |
8 | {% include header.html %} 9 |
10 |
11 |

{{ page.title }}

12 | 13 | {{ content }} 14 | 15 |
16 | 17 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /_links/resources.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Resources 3 | name: Resources 4 | permalink: resources.html 5 | layout: default 6 | --- 7 | 8 | * [Chris Heilmann's Blog](https://christianheilmann.com) 9 | Hot news from the web development world and thoughtpieces since 2005 10 | * [Chris Heilmann on LinkedIn](https://www.linkedin.com/in/christianheilmann/) 11 | What can I do for you? 12 | * [Developer Advocacy Handbook](https://developer-advocacy.com) 13 | The Developer Advocacy Handbook teaches you all to get started as a content creator for the web 14 | * [Developer Advocacy Handbook on Amazon](https://www.amazon.com/dp/B0BKNTPDFJ/) 15 | * [Developer Advocacy Handbook on Leanpub](https://leanpub.com/developer-advocacy-handbook) 16 | * [Chris Heilmann on Amazon](https://www.amazon.com/Christian-Heilmann/e/B001JP8M5A%3Fref=dbs_a_mng_rwt_scns_share) -------------------------------------------------------------------------------- /_links/skillshare.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Chris Heilmann's Skillshare courses 3 | name: Chris Heilmann's Skillshare courses 4 | permalink: skillshare.html 5 | layout: default 6 | --- 7 | 8 | * [The JavaScript Toolkit: Write Cleaner, Faster and Better Code](https://skl.sh/2CpiTGZ) 9 | * [Demystifying Artificial Intelligence: Understanding Machine Learning](https://skl.sh/2MHkYl1) 10 | * [Tools and Tips to Optimize Your Workflow as a Developer](https://skl.sh/3uKu5G1) 11 | * [Tools for Improving Product Accessibility](https://skl.sh/3eCFWRR) 12 | -------------------------------------------------------------------------------- /_links/template.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: The title as it will show up on the browser tab and as the headline 3 | name: The name as it will be shown as the category 4 | permalink: the_file_name.html 5 | layout: default 6 | --- 7 | 8 | * [Link 1](https://link1.com) 9 | Explanation what the link is about 10 | * [Link 2](https://link2.com) 11 | Explanation what the link is about 12 | * [Link 3](https://link3.com) 13 | Explanation what the link is about 14 | * [Link 4](https://link4.com) 15 | Explanation what the link is about 16 | * [Link 5](https://link5.com) 17 | Explanation what the link is about 18 | * [Link 6](https://link6.com) 19 | Explanation what the link is about 20 | 21 | -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codepo8/linkshare/81579c1f269c7d187de70c053689c0c498d84b0f/assets/.DS_Store -------------------------------------------------------------------------------- /assets/copy-light.svg: -------------------------------------------------------------------------------- 1 | Copy item -------------------------------------------------------------------------------- /assets/copy.svg: -------------------------------------------------------------------------------- 1 | Copy item -------------------------------------------------------------------------------- /assets/dark-theme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --codetext: #fff; 3 | --codebackground: #272822; 4 | --codeborder: #ccc; 5 | --background: #111; 6 | --text: #ccc; 7 | --line: #ccc; 8 | 9 | --link: skyblue; 10 | --innerlink: #329ac3; 11 | --deepestlink: #68838e; 12 | 13 | --headerbackground: #000; 14 | --headertext: #ffc107; 15 | --headershadow: #666; 16 | 17 | --h1colour: #4caf50; 18 | --h2colour: #2196f3; 19 | --h3colour: #cddc3c; 20 | --h4colour: #ccc; 21 | 22 | --stronglist: #4caf50; 23 | --pagetoclink: #ccc; 24 | 25 | --footercolour: #666; 26 | --footerlink: #959595; 27 | --footerbackground: #000; 28 | --footershadow: #666; 29 | 30 | } 31 | 32 | button.copy { 33 | background: url(/links/assets/copy.svg) center center no-repeat #111; 34 | background-size: 1.2em; 35 | } 36 | -------------------------------------------------------------------------------- /assets/light-theme.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: #f8f8f8; 3 | --text: #333; 4 | --line: #111; 5 | 6 | --codetext: #111; 7 | --codebackground: #fcfcfc; 8 | --codeborder: #ccc; 9 | 10 | --link: #355e37; 11 | --innerlink: #1e5b74; 12 | --deepestlink: #46585f; 13 | 14 | --headerbackground: #eee; 15 | --headershadow: #ccc; 16 | --headertext: #369; 17 | 18 | --h1colour: #08790d; 19 | --h2colour: #04467b; 20 | --h3colour: #942a4e; 21 | --h4colour: #333; 22 | 23 | --stronglist: #355e37; 24 | --pagetoclink: #555; 25 | 26 | } 27 | 28 | button.copy { 29 | background: url(/links/assets/copy-light.svg) center center no-repeat #f8f8f8; 30 | background-size: 1.2em; 31 | } 32 | -------------------------------------------------------------------------------- /assets/linkshare-in-action.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codepo8/linkshare/81579c1f269c7d187de70c053689c0c498d84b0f/assets/linkshare-in-action.gif -------------------------------------------------------------------------------- /assets/scripts.js: -------------------------------------------------------------------------------- 1 | let copypopup = document.createElement('output'); 2 | copypopup.classList.add('popup'); 3 | copypopup.textContent = '☑️ Copied!'; 4 | document.body.appendChild(copypopup); 5 | 6 | const showcopied = snippet => { 7 | navigator.clipboard.writeText(snippet); 8 | console.log('Copied'); 9 | document.body.classList.add('copied'); 10 | setTimeout(() => document.body.classList.remove('copied'), 1500); 11 | }; 12 | document.querySelector('#snippets')?.addEventListener('click', e => { 13 | let y = e.target.getBoundingClientRect().bottom; 14 | document.documentElement.style.setProperty('--mouse-y', y); 15 | if (e.target.tagName === 'BUTTON') { 16 | let node = e.target.parentNode; 17 | let html = document.querySelector('template').innerHTML; 18 | let bits = node.innerHTML.match(/([^<]*)<\/a>([^<]*) a { 92 | display:block; 93 | padding: .2em 0; 94 | line-height: 1.1; 95 | color: var(--link); 96 | text-decoration: none; 97 | font-size: 1.1em; 98 | } 99 | #snippets li:hover,#snippets li:focus-within { 100 | background: var(--link); 101 | color: var(--background); 102 | transition: 400ms; 103 | } 104 | #snippets li:focus-within a, #snippets li:focus-within svg, 105 | #snippets li:hover a, #snippets li:hover svg { 106 | color: var(--background); 107 | stroke: var(--background); 108 | } 109 | button.copy { 110 | border-radius: 5px; 111 | position: absolute; 112 | right: 5px; 113 | top: 5px; 114 | font-family: inherit; 115 | border: none; 116 | text-align: center; 117 | color: var(--text); 118 | font-size: 0.9em; 119 | cursor: pointer; 120 | width: 2em; 121 | height: 2em; 122 | display: block; 123 | padding: .2em; 124 | } 125 | div#snippets { 126 | position: relative; 127 | } 128 | div#snippets ul { 129 | position: relative; 130 | } 131 | p a { 132 | color: var(--link); 133 | } 134 | output.popup { 135 | position: fixed; 136 | top: -20em; 137 | left: 50%; 138 | transform: translateX(-50%); 139 | padding: .5em 1em; 140 | background: #000; 141 | color: #fff; 142 | border: 2px solid #fff; 143 | transition: 400ms; 144 | border-radius: .5em; 145 | } 146 | .copied output.popup { 147 | top: calc(calc(var(--mouse-y) * 1px) - 2em) 148 | } 149 | template { 150 | display: none; 151 | } 152 | header { 153 | display: block; 154 | margin: .5em 0; 155 | font-size: .7em; 156 | text-align: center; 157 | } 158 | header ul { 159 | margin: 0; 160 | padding: 0; 161 | } 162 | header li { 163 | display: inline-block; 164 | padding-right: 1em; 165 | } 166 | header a { 167 | color:var(--footerlink); 168 | text-decoration: none; 169 | } -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Chris Heilmann's Link collection 3 | layout: index 4 | --- 5 | 6 | 13 | 14 | --------------------------------------------------------------------------------