shortlinks / sorted socials / helpers / etc.

assets/css/main.css

@@ -95,10 +95,12 @@ body.light #box {
   transition: border-color 0.5s ease-in-out;
 }
 
-.twitter:hover,
+.twitter:hover {
-.twitter:focus {
   fill: #1da1f2 !important;
-  color: #1da1f2 !important;
+}
+
+.twitter:hover ~ #box {
+  border-color: #1da1f2;
 }
 
 body.light a.twitter {
@@ -129,10 +131,12 @@ body.light .twitter::selection {
   background-color: #37bbff;
 }
 
-.keybase:hover,
+.keybase:hover {
-.keybase:focus {
   fill: #33a0ff !important;
-  color: #33a0ff !important;
+}
+
+.keybase:hover ~ #box {
+  border-color: #33a0ff;
 }
 
 body.light a.keybase {
@@ -163,10 +167,12 @@ body.light .keybase::selection {
   background-color: #4dbaff;
 }
 
-.discord:hover,
+.discord:hover {
-.discord:focus {
   fill: #7289da !important;
-  color: #7289da !important;
+}
+
+.discord:hover ~ #box {
+  border-color: #7289da;
 }
 
 body.light a.discord {
@@ -197,10 +203,12 @@ body.light .discord::selection {
   background-color: #8ca3f4;
 }
 
-.mastodon:hover,
+.mastodon:hover {
-.mastodon:focus {
   fill: #3088d4 !important;
-  color: #3088d4 !important;
+}
+
+.mastodon:hover ~ #box {
+  border-color: #3088d4;
 }
 
 body.light a.mastodon {
@@ -231,10 +239,12 @@ body.light .mastodon::selection {
   background-color: #4aa2ee;
 }
 
-.twitch:hover,
+.twitch:hover {
-.twitch:focus {
   fill: #6441a4 !important;
-  color: #6441a4 !important;
+}
+
+.twitch:hover ~ #box {
+  border-color: #6441a4;
 }
 
 body.light a.twitch {
@@ -265,10 +275,12 @@ body.light .twitch::selection {
   background-color: #7e5bbe;
 }
 
-.gitdab:hover,
+.gitdab:hover {
-.gitdab:focus {
   fill: #faacb7 !important;
-  color: #faacb7 !important;
+}
+
+.gitdab:hover ~ #box {
+  border-color: #faacb7;
 }
 
 body.light a.gitdab {
@@ -299,10 +311,12 @@ body.light .gitdab::selection {
   background-color: #ffc6d1;
 }
 
-.github:hover,
+.github:hover {
-.github:focus {
   fill: #333 !important;
-  color: #333 !important;
+}
+
+.github:hover ~ #box {
+  border-color: #333;
 }
 
 body.light a.github {
@@ -333,10 +347,12 @@ body.light .github::selection {
   background-color: #4d4d4d;
 }
 
-.gitlab:hover,
+.gitlab:hover {
-.gitlab:focus {
   fill: #e24329 !important;
-  color: #e24329 !important;
+}
+
+.gitlab:hover ~ #box {
+  border-color: #e24329;
 }
 
 body.light a.gitlab {
@@ -367,10 +383,12 @@ body.light .gitlab::selection {
   background-color: #fc5d43;
 }
 
-.ko-fi:hover,
+.ko-fi:hover {
-.ko-fi:focus {
   fill: #f16061 !important;
-  color: #f16061 !important;
+}
+
+.ko-fi:hover ~ #box {
+  border-color: #f16061;
 }
 
 body.light a.ko-fi {
@@ -401,10 +419,12 @@ body.light .ko-fi::selection {
   background-color: #ff7a7b;
 }
 
-.patreon:hover,
+.patreon:hover {
-.patreon:focus {
   fill: #f96854 !important;
-  color: #f96854 !important;
+}
+
+.patreon:hover ~ #box {
+  border-color: #f96854;
 }
 
 body.light a.patreon {

assets/css/main.scss

@@ -97,10 +97,11 @@ $socials: (
 );
 
 @each $site, $color in $socials {
-	.#{$site}:hover,
+	.#{$site}:hover {
-	.#{$site}:focus {
 		fill: $color !important;
-		color: $color !important;
+		& ~ #box {
+			border-color: $color;
+		}
 	}
 
 	body.light a.#{$site} {

routes/portfolio.js

@@ -9,9 +9,9 @@ portfolio.get('/', (req, res) => {
 		host: req.hostname,
 		portfolio: {
 			code: [
-				{ name: 'thaldrin', source: 'https://gitdab.com/r/thaldrin' },
+				{ name: 'thaldrin', source: '/p/thaldrin' },
-				{ name: 'website', source: 'https://gitdab.com/y/website' },
+				{ name: 'website', source: '/p/website' },
-				{ name: 'yiff', source: 'https://github.com/codepupper/yiff' }
+				{ name: 'yiff', source: '/p/yiff' }
 			]
 		}
 	});

server.js

@@ -18,14 +18,22 @@ let { port, hostname } = {
 
 const app = express();
 
-app.set('view engine', 'hbs');
 app.engine(
 	'hbs',
 	hbs({
 		extname: 'hbs',
-		defaultView: 'default'
+		defaultView: 'default',
+		helpers: {
+			ifeq: function(a, b, options) {
+				if (a === b) {
+					return options.fn(this);
+				}
+			}
+		}
 	})
 );
+
+app.set('view engine', 'hbs');
 app.set('json spaces', 4);
 app.use('/assets', express.static('./assets'));
 app.set('view options', {
@@ -56,6 +64,7 @@ app.use(
 app.use('/portfolio', require('./routes/portfolio'));
 app.use('/lore', require('./routes/lore'));
 app.use('/art', require('./routes/art'));
+app.use('/p', require('./routes/p'));
 
 module.exports = (client) => {
 	app.get('/', async (req, res) => {
@@ -68,16 +77,16 @@ module.exports = (client) => {
 			item: [ { name: 'portfolio', source: '/portfolio' } ],
 			social: [
 				{ name: 'Twitter', color: '1DA1F2', link: 'twitter.com/codepupper', icon: simpleIcons.Twitter },
-				{ name: 'Discord', color: '7289da', link: 'thaldr.in/discord', icon: simpleIcons.Discord },
 				{ name: 'Mastodon', color: '3088d4', link: 'pounced-on.me/@code', icon: simpleIcons.Mastodon },
+				{ name: 'Twitter', color: '1DA1F2', link: 'twitter.com/floofydev', icon: simpleIcons.Twitter },
+				{ name: 'Discord', color: '7289da', link: 'thaldr.in/discord', icon: simpleIcons.Discord },
+				{ name: 'Twitch', color: '6441a4', link: 'twitch.tv/codepupper', icon: simpleIcons.Twitch },
 				{ name: 'Keybase', color: '33a0ff', link: 'keybase.io/codepupper', icon: simpleIcons.Keybase },
 				{ name: 'Gitdab', color: 'faacb7', link: 'gitdab.com/y', icon: simpleIcons.Git },
 				{ name: 'Github', color: '333', link: 'github.com/codepupper', icon: simpleIcons.GitHub },
 				{ name: 'Gitlab', color: 'E24329', link: 'gitlab.com/codepupper', icon: simpleIcons.GitLab },
-				{ name: 'Twitch', color: '6441a4', link: 'twitch.tv/codepupper', icon: simpleIcons.Twitch },
 				{ name: 'Ko-Fi', color: 'f16061', link: 'ko-fi.com/codepupper', icon: simpleIcons['Ko-fi'] },
-				{ name: 'Patreon', color: '6441a4', link: 'patreon.com/ryden', icon: simpleIcons.Patreon },
+				{ name: 'Patreon', color: '6441a4', link: 'patreon.com/ryden', icon: simpleIcons.Patreon }
-				{ name: 'Twitter', color: '1DA1F2', link: 'twitter.com/floofydev', icon: simpleIcons.Twitter }
 			]
 		});
 	});

views/index.hbs

@@ -9,11 +9,18 @@
 
     <div class="socials">
       {{#each social}}
+      {{#ifeq name 'Mastodon'}}
       <a rel="me" href="https://{{link}}" class="{{name}}">
         <svg width="40" height="40" role="img" viewBox="0 0 24 24">
           <title>{{name}} Icon</title>
           <path d="{{icon.path}}"></path>
         </svg></a>
+      {{/ifeq}}
+      <a href="https://{{link}}" class="{{name}}">
+        <svg width="40" height="40" role="img" viewBox="0 0 24 24">
+          <title>{{name}} Icon</title>
+          <path d="{{icon.path}}"></path>
+        </svg></a>
       {{/each}}
     </div>