Merge pull request #33 from nblackburn/feature/projects

Projects page

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,35 +4,33 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
-**Describe the bug**
-A clear and concise description of what the bug is.
+**Describe the bug** A clear and concise description of what the bug is.
+
+**To Reproduce** Steps to reproduce the behavior:
 
-**To Reproduce**
-Steps to reproduce the behavior:
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
-**Expected behavior**
-A clear and concise description of what you expected to happen.
+**Expected behavior** A clear and concise description of what you expected to
+happen.
 
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
+**Screenshots** If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+-   OS: [e.g. iOS]
+-   Browser [e.g. chrome, safari]
+-   Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
 
-**Additional context**
-Add any other context about the problem here.
+-   Device: [e.g. iPhone6]
+-   OS: [e.g. iOS8.1]
+-   Browser [e.g. stock browser, safari]
+-   Version [e.g. 22]
+
+**Additional context** Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,17 +4,16 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+**Is your feature request related to a problem? Please describe.** A clear and
+concise description of what the problem is. Ex. I'm always frustrated when [...]
 
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
+**Describe the solution you'd like** A clear and concise description of what you
+want to happen.
 
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+**Describe alternatives you've considered** A clear and concise description of
+any alternative solutions or features you've considered.
 
-**Additional context**
-Add any other context or screenshots about the feature request here.
+**Additional context** Add any other context or screenshots about the feature
+request here.

CODE_OF_CONDUCT.md

@@ -6,8 +6,8 @@ We as members, contributors, and leaders pledge to make participation in our
 community a harassment-free experience for everyone, regardless of age, body
 size, visible or invisible disability, ethnicity, sex characteristics, gender
 identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
-and orientation.
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
 
 We pledge to act and interact in ways that contribute to an open, welcoming,
 diverse, inclusive, and healthy community.
@@ -17,24 +17,25 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
-  overall community
+-   Demonstrating empathy and kindness toward other people
+-   Being respectful of differing opinions, viewpoints, and experiences
+-   Giving and gracefully accepting constructive feedback
+-   Accepting responsibility and apologizing to those affected by our mistakes,
+    and learning from the experience
+-   Focusing on what is best not just for us as individuals, but for the overall
+    community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
-  advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
-  address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
+-   The use of sexualized language or imagery, and sexual attention or advances
+    of any kind
+-   Trolling, insulting or derogatory comments, and personal or political
+    attacks
+-   Public or private harassment
+-   Publishing others' private information, such as a physical or email address,
+    without their explicit permission
+-   Other conduct which could reasonably be considered inappropriate in a
+    professional setting
 
 ## Enforcement Responsibilities
 
@@ -60,8 +61,8 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-[email protected].
-All complaints will be reviewed and investigated promptly and fairly.
+[email protected]. All complaints will be reviewed and investigated promptly
+and fairly.
 
 All community leaders are obligated to respect the privacy and security of the
 reporter of any incident.
@@ -82,15 +83,15 @@ behavior was inappropriate. A public apology may be requested.
 
 ### 2. Warning
 
-**Community Impact**: A violation through a single incident or series
-of actions.
+**Community Impact**: A violation through a single incident or series of
+actions.
 
 **Consequence**: A warning with consequences for continued behavior. No
 interaction with the people involved, including unsolicited interaction with
 those enforcing the Code of Conduct, for a specified period of time. This
 includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or
-permanent ban.
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
 
 ### 3. Temporary Ban
 
@@ -106,20 +107,20 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
-**Consequence**: A permanent ban from any sort of public interaction within
-the community.
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
 
 ## Attribution
 
 This Code of Conduct is adapted from the [Contributor Covenant][homepage],
 version 2.0, available at
 https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
 
-Community Impact Guidelines were inspired by [Mozilla's code of conduct
-enforcement ladder](https://github.com/mozilla/diversity).
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
 
 [homepage]: https://www.contributor-covenant.org
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@nblackburn/website",
     "private": true,
-    "version": "1.6.0",
+    "version": "1.7.0",
     "scripts": {
         "start": "astro dev",
         "build": "astro build",

src/components/header.vue

@@ -26,6 +26,7 @@ export type Link = {
 
 const links: Link[] = [
     { id: 'home', title: 'Home', href: '/' },
+    { id: 'projects', title: 'Projects', href: '/projects' },
     { id: 'about', title: 'About', href: '/about' }
 ];
 

src/components/link.vue

@@ -15,8 +15,7 @@ import { isExternalLink, buildRefLink } from '@utilities/refLink';
 export default {
     props: {
         href: {
-            type: String,
-            required: true
+            type: String
         },
 
         ref: {

src/components/main.css.ts

@@ -7,6 +7,7 @@ export const main = style({
     margin: 'auto',
     display: 'flex',
     flexDirection: 'column',
+    marginBottom: sizes.large,
     padding: `0 ${sizes.small}`,
     maxWidth: containers.xtraLarge
 });

src/components/navLink.css.ts

@@ -49,3 +49,23 @@ export const active = style({
 export const icon = style({
     padding: '0.75rem'
 });
+
+export const disabled = style({
+    cursor: 'not-allowed',
+    color: vars.colors.silverChalice,
+    selectors: {
+        '&:hover': {
+            borderColor: 'transparent'
+        }
+    },
+    '@media': {
+        '(prefers-color-scheme: dark)': {
+            color: vars.colors.eerieBlack,
+            selectors: {
+                '&:hover': {
+                    borderColor: 'transparent'
+                }
+            }
+        }
+    }
+});

src/components/navLink.vue

@@ -2,8 +2,9 @@
     <Link
         :class="[
             styles.navLink,
+            icon ? styles.icon : '',
             active ? styles.active : '',
-            icon ? styles.icon : ''
+            disabled ? styles.disabled : ''
         ]"
         :href="href"
     >
@@ -22,8 +23,7 @@ export default {
 
     props: {
         href: {
-            type: String,
-            required: true
+            type: String
         },
 
         active: {
@@ -32,6 +32,10 @@ export default {
 
         icon: {
             type: Boolean
+        },
+
+        disabled: {
+            type: Boolean
         }
     },
 

src/components/pageHeader.css.ts

@@ -5,7 +5,7 @@ export const pageHeader = style({
     fontSize: '1.2rem',
     textAlign: 'center',
     paddingTop: sizes.large,
-    marginBottom: sizes.medium,
+    marginBottom: sizes.large,
     paddingBottom: sizes.large,
     borderBottom: `1px ${vars.colors.silverChalice} solid`,
     '@media': {

src/components/pagination.css.ts

@@ -0,0 +1,15 @@
+import { sizes } from '../styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const pagination = style({
+    margin: 'auto',
+    display: 'flex'
+});
+
+export const link = style({
+    selectors: {
+        '&:not(:last-child)': {
+            marginRight: sizes.small
+        }
+    }
+});

src/components/pagination.vue

@@ -0,0 +1,41 @@
+<template>
+    <section :class="styles.pagination">
+        <NavLink :class="styles.link" :href="links.prev" :disabled="!links.prev"
+            >Previous</NavLink
+        >
+        <NavLink :class="styles.link" :href="links.next" :disabled="!links.next"
+            >Next</NavLink
+        >
+    </section>
+</template>
+
+<script lang="ts">
+import * as styles from './pagination.css';
+import NavLink from '@components/navLink.vue';
+import { defineComponent, PropType } from 'vue';
+
+type URL = {
+    current: string;
+    prev: string | undefined;
+    next: string | undefined;
+};
+
+export default defineComponent({
+    components: {
+        NavLink
+    },
+
+    props: {
+        links: {
+            type: Object as PropType<URL>,
+            default() {
+                return {};
+            }
+        }
+    },
+
+    setup() {
+        return { styles };
+    }
+});
+</script>