diff --git a/.all-contributorsrc b/.all-contributorsrc new file mode 100644 index 0000000..bd90476 --- /dev/null +++ b/.all-contributorsrc @@ -0,0 +1,58 @@ +{ + "files": [ + "README.md" + ], + "imageSize": 100, + "commit": false, + "contributors": [{ + "login": "lostdesign", + "name": "wellรก", + "avatar_url": "https://avatars0.githubusercontent.com/u/5164617?v=4", + "profile": "https://lost.design", + "contributions": [ + "business", + "infra", + "security", + "dev", + "bug", + "code", + "content", + "ideas", + "maintenance", + "review", + "test" + ] + }, + { + "login": "S3B4S", + "name": "Kevin van der Werff", + "avatar_url": "https://avatars0.githubusercontent.com/u/17083334?v=4", + "profile": "https://github.com/S3B4S", + "contributions": [ + "dev", + "bug", + "code", + "content", + "ideas", + "maintenance", + "review", + "test" + ] + }, + { + "login": "Banou26", + "name": "Banou", + "avatar_url": "https://avatars0.githubusercontent.com/u/5209149?v=4", + "profile": "https://banou.dev", + "contributions": [ + "bug", + "design" + ] + } + ], + "contributorsPerLine": 7, + "projectName": "webgems", + "projectOwner": "webgems", + "repoType": "github", + "repoHost": "https://github.com" +} diff --git a/README.md b/README.md index 1a3bde5..bf130c2 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ [![Netlify Status](https://api.netlify.com/api/v1/badges/32128bab-176e-4a45-b21e-7a57425a36d1/deploy-status)](https://app.netlify.com/sites/epic-sammet-7ed06e/deploys) +[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors) # webgems.io @@ -23,3 +24,21 @@ See also the list of [contributors](https://github.com/webgems/webgems/contribut ## License This project is licensed under the GNU General Public License v3.0 - see the [LICENSE](https://github.com/webgems/webgems/blob/master/LICENSE) file for details + +## Contributors โœจ + +Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): + + + + + + + + + +
wellรก
wellรก
๐Ÿ’ผ ๐Ÿš‡ ๐Ÿ›ก๏ธ ๐Ÿ› ๐Ÿ’ป ๐Ÿ–‹ ๐Ÿค” ๐Ÿšง ๐Ÿ‘€ โš ๏ธ		Kevin van der Werff
Kevin van der Werff
๐Ÿ› ๐Ÿ’ป ๐Ÿ–‹ ๐Ÿค” ๐Ÿšง ๐Ÿ‘€ โš ๏ธ		Banou
Banou
๐Ÿ› ๐ŸŽจ
+ + + +This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! diff --git a/components/Card.vue b/components/Card.vue index a56554b..021cadf 100644 --- a/components/Card.vue +++ b/components/Card.vue @@ -15,7 +15,7 @@ export default { props: { resource: Object, isActive: Boolean, - createCopyUrl: Function, + createCopyUrl: Function, }, } @@ -37,13 +37,15 @@ export default { &--meta { display: flex; - align-items: center; + justify-content: flex-start; } &--favicon { height: 16px; width: 16px; - margin-right: .5rem; + margin-top: 0.3rem; + margin-right: 0.5rem; + } &--reference { diff --git a/components/OptOutIframe.vue b/components/OptOutIframe.vue new file mode 100644 index 0000000..600c98a --- /dev/null +++ b/components/OptOutIframe.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/components/Sidebar.vue b/components/Sidebar.vue index f47f40d..7e412fc 100644 --- a/components/Sidebar.vue +++ b/components/Sidebar.vue @@ -4,6 +4,11 @@ template(v-for='category in categories') //- nuxt-link(:to='$i18n.path(category.slug)') {{ category.title }} nuxt-link(:to='category.slug') {{ category.title }} + hr + nuxt-link(to='/privacy-policy') Privacy Policy + nuxt-link(to='/cookie-policy') Cookie Policy + nuxt-link(to='/imprint') Imprint + hr div(class="toggleWrapper" @click="toggleCardsVisible") div(class="viewToggle" :class="{active: areCardsVisible}") Cards div(class="viewToggle" :class="{active: !areCardsVisible}") Table @@ -58,6 +63,7 @@ export default { border-style: solid; border-radius: 0.25rem; overflow: hidden; + margin: 1rem auto; } .viewToggle { padding: 0 0.2rem; @@ -67,6 +73,10 @@ export default { background-color: #08e5ff; color: #232331; } + hr { + width: 80%; + background-color: #08e5ff; + } } @media (max-width: 400px) { diff --git a/layouts/default.vue b/layouts/default.vue index 27fffe9..e776601 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -4,7 +4,14 @@ Logo Search Sidebar + no-ssr + template(v-if="showNotice") + .cookie + p This site uses cookies, please read our  + nuxt-link.highlighted(to="privacy-policy") Privacy policy. + button.highlighted(@click.preventDefault="hideCookieNotice" type="button") X nuxt.content + @@ -60,7 +105,7 @@ a { text-decoration: underline; } -h1, p { +h1, h2, p, ol, i, small { color: white; } @@ -72,10 +117,12 @@ h1 { .layout { display: grid; grid-template-columns: fit-content(200px) auto; - grid-gap: 1rem; + grid-gap: 3rem; grid-template-areas: 'logo search' 'sidebar content'; + max-width: 1200px; + margin: 0 auto; } .logo { @@ -141,6 +188,54 @@ h1 { 'sidebar' 'content'; } + hr { + display: none; + } +} + +.highlighted { + text-decoration: none; + background-color: #08e5ff; + color: #212121; + padding: 0 5px; + border-radius: .1rem; + + &:hover { + background-color: #008190; + color: white; + } +} + +.cookie { + position: fixed; + margin: 1rem; + bottom: 0; + left: 0; + background-color: #232331; + padding: 0 1rem; + border-radius: .3rem; + box-shadow:inset 0px 0px 0px 2px #08e5ff; + z-index: 999; + + p { + font-size: 12px; + margin-left: 1.2rem; + + &::before { + content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgZmlsbD0iIzA4ZTVmZiI+PGcgaWQ9InN1cmZhY2UxIiBmaWxsPSIjMDhlNWZmIj48cGF0aCBzdHlsZT0iICIgZD0iTSAxNC41IDAgQyAxMC41MzEyNSAwIDcuMTYwMTU2IDIuMzk4NDM4IDUuNzE4NzUgNS43ODEyNSBDIDIuMzU5Mzc1IDcuMjQ2MDk0IDAgMTAuNjA5Mzc1IDAgMTQuNSBDIDAgMTkuNzM0Mzc1IDQuMjY1NjI1IDI0IDkuNSAyNCBDIDEzLjM5MDYyNSAyNCAxNi43NTM5MDYgMjEuNjQwNjI1IDE4LjIxODc1IDE4LjI4MTI1IEMgMjEuNjAxNTYzIDE2LjgzOTg0NCAyNCAxMy40Njg3NSAyNCA5LjUgQyAyNCA0LjI2MTcxOSAxOS43MzgyODEgMCAxNC41IDAgWiBNIDE0LjUgMiBDIDE4LjY2MDE1NiAyIDIyIDUuMzM5ODQ0IDIyIDkuNSBDIDIyIDEyLjA0Njg3NSAyMC43Njk1MzEgMTQuMjM4MjgxIDE4LjkwNjI1IDE1LjU5Mzc1IEMgMTguOTQ5MjE5IDE1LjIzNDM3NSAxOSAxNC44NzEwOTQgMTkgMTQuNSBDIDE5IDExLjU3MDMxMyAxNy42NTYyNSA4Ljk2NDg0NCAxNS41NjI1IDcuMjE4NzUgQyAxNS44MjgxMjUgNi44Nzg5MDYgMTYgNi40NjA5MzggMTYgNiBDIDE2IDQuODk0NTMxIDE1LjEwNTQ2OSA0IDE0IDQgQyAxMy4xMTMyODEgNCAxMi4zNTU0NjkgNC41NzQyMTkgMTIuMDkzNzUgNS4zNzUgQyAxMS4yNjU2MjUgNS4xMzY3MTkgMTAuNDAyMzQ0IDUgOS41IDUgQyA5LjEyODkwNiA1IDguNzY1NjI1IDUuMDUwNzgxIDguNDA2MjUgNS4wOTM3NSBDIDkuNzYxNzE5IDMuMjMwNDY5IDExLjk1MzEyNSAyIDE0LjUgMiBaIE0gMTkgNSBDIDE4LjQ0OTIxOSA1IDE4IDUuNDQ5MjE5IDE4IDYgQyAxOCA2LjU1MDc4MSAxOC40NDkyMTkgNyAxOSA3IEMgMTkuNTUwNzgxIDcgMjAgNi41NTA3ODEgMjAgNiBDIDIwIDUuNDQ5MjE5IDE5LjU1MDc4MSA1IDE5IDUgWiBNIDkuNSA3IEMgMTMuNjUyMzQ0IDcgMTcgMTAuMzQ3NjU2IDE3IDE0LjUgQyAxNyAxNS4zNTkzNzUgMTYuODU5Mzc1IDE2LjE5OTIxOSAxNi41OTM3NSAxNi45Njg3NSBDIDE2LjU4MjAzMSAxNyAxNi41NzAzMTMgMTcuMDMxMjUgMTYuNTYyNSAxNy4wNjI1IEMgMTUuNTIzNDM4IDE5Ljk1NzAzMSAxMi43NTc4MTMgMjIgOS41IDIyIEMgNS4zNDc2NTYgMjIgMiAxOC42NTIzNDQgMiAxNC41IEMgMiAxMS4zMzU5MzggMy45MjU3ODEgOC42MzY3MTkgNi42ODc1IDcuNTMxMjUgQyA2Ljc1IDcuNTE1NjI1IDYuODE2NDA2IDcuNDk2MDk0IDYuODc1IDcuNDY4NzUgQyA3LjY4NzUgNy4xNjc5NjkgOC41ODIwMzEgNyA5LjUgNyBaIE0gMTkuNSA4IEMgMTguNjcxODc1IDggMTggOC42NzE4NzUgMTggOS41IEMgMTggMTAuMzI4MTI1IDE4LjY3MTg3NSAxMSAxOS41IDExIEMgMjAuMzI4MTI1IDExIDIxIDEwLjMyODEyNSAyMSA5LjUgQyAyMSA4LjY3MTg3NSAyMC4zMjgxMjUgOCAxOS41IDggWiBNIDcgMTAgQyA1Ljg5NDUzMSAxMCA1IDEwLjg5NDUzMSA1IDEyIEMgNSAxMy4xMDU0NjkgNS44OTQ1MzEgMTQgNyAxNCBDIDguMTA1NDY5IDE0IDkgMTMuMTA1NDY5IDkgMTIgQyA5IDEwLjg5NDUzMSA4LjEwNTQ2OSAxMCA3IDEwIFogTSAxMiAxMCBDIDExLjQ0OTIxOSAxMCAxMSAxMC40NDkyMTkgMTEgMTEgQyAxMSAxMS41NTA3ODEgMTEuNDQ5MjE5IDEyIDEyIDEyIEMgMTIuNTUwNzgxIDEyIDEzIDExLjU1MDc4MSAxMyAxMSBDIDEzIDEwLjQ0OTIxOSAxMi41NTA3ODEgMTAgMTIgMTAgWiBNIDEzLjUgMTMgQyAxMi42NzE4NzUgMTMgMTIgMTMuNjcxODc1IDEyIDE0LjUgQyAxMiAxNS4zMjgxMjUgMTIuNjcxODc1IDE2IDEzLjUgMTYgQyAxNC4zMjgxMjUgMTYgMTUgMTUuMzI4MTI1IDE1IDE0LjUgQyAxNSAxMy42NzE4NzUgMTQuMzI4MTI1IDEzIDEzLjUgMTMgWiBNIDYgMTYgQyA1LjQ0OTIxOSAxNiA1IDE2LjQ0OTIxOSA1IDE3IEMgNSAxNy41NTA3ODEgNS40NDkyMTkgMTggNiAxOCBDIDYuNTUwNzgxIDE4IDcgMTcuNTUwNzgxIDcgMTcgQyA3IDE2LjQ0OTIxOSA2LjU1MDc4MSAxNiA2IDE2IFogTSAxMCAxOCBDIDkuNDQ5MjE5IDE4IDkgMTguNDQ5MjE5IDkgMTkgQyA5IDE5LjU1MDc4MSA5LjQ0OTIxOSAyMCAxMCAyMCBDIDEwLjU1MDc4MSAyMCAxMSAxOS41NTA3ODEgMTEgMTkgQyAxMSAxOC40NDkyMTkgMTAuNTUwNzgxIDE4IDEwIDE4IFogIiBmaWxsPSIjMDhlNWZmIi8+PC9nPjwvc3ZnPgo='); + width: 18px; + height: 18px; + display: block; + margin-left: -1.5rem; + margin-bottom: -1.1rem; + } + } + + button { + border: none; + margin-left: .8rem; + cursor: pointer; + } } @@ -170,4 +265,4 @@ h1 { } } - \ No newline at end of file + diff --git a/nuxt.config.js b/nuxt.config.js index 6b02e6d..4271694 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -6,12 +6,19 @@ export default { ** Headers of the page */ head: { - title: 'webgems', + htmlAttrs: { + lang: 'en', + }, + title: pkg.name, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: pkg.description }, { hid: 'keywords', name: 'keywords', content: 'css, html, php, server, resources, design, gems, nuxt, javascript, tutorials, development, software'}, + + { name: 'robots', content: 'index, follow' }, + { name: 'distribution', content: 'global'}, + { name:'theme-color', content: '#ffffff' }, { name: 'msapplication-TileColor', content: '#da532c' }, { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#5bbad5' }, diff --git a/package.json b/package.json index 6a06023..2fa39dc 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "webgems", + "name": "webgems.io", "version": "1.0.0", - "description": "webgems for devs and designers ", + "description": "Webgems is a place for devs and designers to find useful resources all at one place. It has server resources on HTML, CSS, Javascript, Design, Icons,Accessibility, PHP, Podcasts, Python, Ruby, Servers and more.", "author": "lost.design", "private": true, "scripts": { diff --git a/pages/cookie-policy.vue b/pages/cookie-policy.vue new file mode 100644 index 0000000..5e75323 --- /dev/null +++ b/pages/cookie-policy.vue @@ -0,0 +1,56 @@ + + + + + \ No newline at end of file diff --git a/pages/imprint.vue b/pages/imprint.vue new file mode 100644 index 0000000..a3436cb --- /dev/null +++ b/pages/imprint.vue @@ -0,0 +1,27 @@ + + + \ No newline at end of file diff --git a/pages/privacy-policy.vue b/pages/privacy-policy.vue new file mode 100644 index 0000000..d5eab78 --- /dev/null +++ b/pages/privacy-policy.vue @@ -0,0 +1,93 @@ + + + + + \ No newline at end of file diff --git a/resources/frontend.json b/resources/frontend.json index d798d60..aca50f6 100644 --- a/resources/frontend.json +++ b/resources/frontend.json @@ -24,7 +24,7 @@ "title": "Frontendmasters", "desc": "Premium tier video courses for any modern stack. Monthly or yearly subscription.", "url": "https://frontendmasters.com", - "tags": ["courses", "framworks", "videos", "javascript"] + "tags": ["courses", "frameworks", "videos", "javascript"] }, { "title": "Don't fear the internet", @@ -49,6 +49,12 @@ "desc": "Understand in which order the elements of the CSS box model are stacked.", "url": "https://hicksdesign.co.uk/boxmodel/", "tags": ["educational", "css", "visual"] + }, + { + "title": "Flavio Copes Blog", + "desc": "I write tutorials for JavaScript and Web Developers.", + "url": "https://flaviocopes.com/", + "tags": ["mentor", "books", "tutorial"] } ] } diff --git a/resources/fullstack.json b/resources/fullstack.json index d786c5b..9c01cfe 100644 --- a/resources/fullstack.json +++ b/resources/fullstack.json @@ -19,6 +19,12 @@ "desc": "Lecture platform about anything ranging from basic Javascript to advanced React methods. Community courses available free of charge with an opt-in paid section for full course paths.", "url": "https://egghead.io", "tags": ["videos", "frontend", "react", "javascript"] + }, + { + "title": "Refactoring Guru", + "desc": "This site makes it easy for you to discover everything you need to know about refactoring, design patterns, SOLID principles, and other smart programming topics.", + "url": "https://refactoring.guru/", + "tags": ["refactoring", "patterns", "educational", "learning"] } ] } diff --git a/resources/icons.json b/resources/icons.json index c3e49d5..938e849 100644 --- a/resources/icons.json +++ b/resources/icons.json @@ -8,6 +8,12 @@ "url": "https://fontawesome.com/", "tags": ["icons", "logos", "vector"] }, + { + "title": "Fontello", + "desc": "Fontello has a collection of icons from various font and icon toolkits and the icons can be individually selected and downloaded. This greatly improves the website performance owing the reduced css to download.", + "url": "http://fontello.com/", + "tags": [] + }, { "title": "Icomoon", "desc": "IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites.",