andrew
/
homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactored to allow one-off pages, and cleaned up the gardening page.

This commit is contained in:
Andrew Lalis 2024-10-04 15:57:49 -04:00
parent e934f870c1
commit d1c0a996ad
8 changed files with 219 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
app/src/App.vue
View File

@ -1,83 +1,11 @@
<!--
The main app just contains a RouterView that's populated entirely by the
router and the user's currently selected route.
-->
<script setup lang="ts">
import { RouterView } from 'vue-router'
import NavLink from './components/NavLink.vue'
</script>
<template>
<div class="bisection-container">
<header class="page-bisection">
<h1 class="site-header-text">Andrew Lalis</h1>
<nav>
<NavLink path="/">Home</NavLink>
<NavLink path="/about">About</NavLink>
<NavLink path="/software">Software</NavLink>
<NavLink path="/gardening">Gardening</NavLink>
<NavLink path="/logbook">Logbook</NavLink>
<NavLink path="/contact">Contact</NavLink>
</nav>
</header>
<RouterView v-slot="{ Component }">
<Transition name="page">
<Component :is="Component" class="page-bisection content-page" />
</Transition>
</RouterView>
</div>
<RouterView />
</template>
<style>
.bisection-container {
text-align: center;
}
.page-bisection {
width: 50ch;
display: inline-block;
vertical-align: top;
padding-left: 1rem;
padding-right: 1rem;
}
.content-page {
text-align: left;
margin-top: 1rem;
}
.site-header-text {
font-family: Sacramento;
container-type: inline-size;
font-size: calc(min(60px, max(5cqw, 42px)));
text-align: right;
margin-top: 1rem;
margin-bottom: 0;
}
.page-enter-active {
transition: all 0.5s ease;
}
.page-enter-from {
opacity: 0;
transform: translateX(30px);
}
/*
Activates once the left and right half of the page stack due to width constraints.
We remove a lot of the vertical spacing to make things fit better.
*/
@media (width < calc(100ch - 2.5rem)) {
.site-header-text {
margin-top: 0;
}
.content-page {
margin-top: 0;
}
}
/*
Once the device width is smaller than one of the halves, sync the page half to the device width.
*/
@media (width < 50ch) {
.page-bisection {
width: calc(100% - 2rem);
}
}
</style>

46
app/src/garden_data.ts
View File

@ -13,7 +13,7 @@ export const SPECIES = [
'Florida Native': 'Yes',
Current: 'Yes',
Statistics: 'Total Species',
'': 56
'': 58
},
{
'Scientific Name': 'Viburnum obovatum var. Densa',
@ -26,7 +26,7 @@ export const SPECIES = [
'Florida Native': 'Yes',
Current: 'Yes',
Statistics: 'Total Natives',
'': 38
'': 40
},
{
'Scientific Name': 'Allium tuberosum',
@ -37,7 +37,7 @@ export const SPECIES = [
'Florida Native': 'No',
Current: 'Yes',
Statistics: '% Native',
'': '67.86%'
'': '68.97%'
},
{
'Scientific Name': 'Asclepias incarnata',
@ -59,8 +59,8 @@ export const SPECIES = [
'Image Link': 'https://www.fnps.org/assets/images/plants/Asclepias_perennis-Stibolt2.jpg',
'Florida Native': 'Yes',
Current: 'Yes',
Statistics: '',
'': ''
Statistics: 'Current Species',
'': 52
},
{
'Scientific Name': 'Asclepias tuberosa',
@ -129,7 +129,7 @@ export const SPECIES = [
'Image Link':
'https://www.flawildflowers.org/wp-content/uploads/2017/06/coreopsis_leavenworthii-e1591118903862.jpg',
'Florida Native': 'Yes',
Current: 'Yes',
Current: 'No',
Statistics: '',
'': ''
},
@ -153,7 +153,7 @@ export const SPECIES = [
'Image Link':
'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Liatris_spicata_Hedwig_Storch_ccbysa30.JPG',
'Florida Native': 'Yes',
Current: 'Yes',
Current: 'No',
Statistics: '',
'': ''
},
@ -199,7 +199,7 @@ export const SPECIES = [
'Image Link':
'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tithonia_rotundifolia_kz2.jpg',
'Florida Native': 'No',
Current: 'Yes',
Current: 'No',
Statistics: '',
'': ''
},
@ -215,6 +215,18 @@ export const SPECIES = [
Statistics: '',
'': ''
},
{
'Scientific Name': 'Sambucus nigra ssp. Canadensis',
'Common Name': 'Common Elderberry',
Family: 'Caprifoliaceae',
Reference: 'https://www.wildflower.org/plants/result.php?id_plant=sanic4',
'Image Link':
'https://bluethumb.org/wp-content/uploads/sites/2/2024/03/sambucus_nigra_ssp_canadensis-800x800.jpg',
'Florida Native': 'Yes',
Current: 'Yes',
Statistics: '',
'': ''
},
{
'Scientific Name': 'Tradescantia ohiensis',
'Common Name': 'Spiderwort',
@ -260,6 +272,18 @@ export const SPECIES = [
Statistics: '',
'': ''
},
{
'Scientific Name': 'Dryopteris ludoviciana',
'Common Name': 'Southern Wood Fern',
Family: 'Dryopteridaceae',
Reference: 'https://en.wikipedia.org/wiki/Dryopteris_ludoviciana',
'Image Link':
'https://upload.wikimedia.org/wikipedia/commons/d/d2/Southern_Wood_Fern_Dryopteris_ludoviciana_Leaves_3008px.JPG',
'Florida Native': 'Yes',
Current: 'Yes',
Statistics: '',
'': ''
},
{
'Scientific Name': 'Erythrina herbacea',
'Common Name': 'Coral Bean',
@ -362,7 +386,7 @@ export const SPECIES = [
Reference: 'https://en.wikipedia.org/wiki/Salvia_azurea',
'Image Link': 'https://upload.wikimedia.org/wikipedia/commons/6/63/Salvia_azurea1.jpg',
'Florida Native': 'Yes',
Current: 'Yes',
Current: 'No',
Statistics: '',
'': ''
},
@ -551,7 +575,7 @@ export const SPECIES = [
'Image Link':
'https://s3.amazonaws.com/eit-planttoolbox-prod/media/images/Capsicum_annuum_Chil_AyfsPt9WpZrr.jpeg',
'Florida Native': 'No',
Current: 'Yes',
Current: 'No',
Statistics: '',
'': ''
},
@ -574,7 +598,7 @@ export const SPECIES = [
'Image Link':
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Immature_jalapeno_capsicum_annuum_var_annuum.jpeg/1024px-Immature_jalapeno_capsicum_annuum_var_annuum.jpeg',
'Florida Native': 'No',
Current: 'Yes',
Current: 'No',
Statistics: '',
'': ''
},

24
app/src/router/index.ts
View File

@ -5,35 +5,49 @@ import ContactView from '@/views/ContactView.vue'
import SoftwareView from '@/views/SoftwareView.vue'
import GardeningView from '@/views/GardeningView.vue'
import LogBookView from '@/views/LogBookView.vue'
import MainSite from '@/views/MainSite.vue'
import GardenDetails from '@/views/GardenDetails.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// Most paths are nested under the MainSite component, which provides the
// common header links and formatting.
{
path: '/',
component: MainSite,
children: [
{
path: '',
component: HomeView
},
{
path: '/about',
path: 'about',
component: AboutView
},
{
path: '/contact',
path: 'contact',
component: ContactView
},
{
path: '/software',
path: 'software',
component: SoftwareView
},
{
path: '/gardening',
path: 'gardening',
component: GardeningView
},
{
path: '/logbook',
path: 'logbook',
component: LogBookView
}
]
},
{
path: '/garden-details',
component: () => GardenDetails
}
]
})
export default router

12
app/src/stores/counter.ts
View File

@ -1,12 +0,0 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})

2
app/src/views/AboutView.vue
View File

@ -25,7 +25,7 @@
Server), and is served through Nginx and various firewalls.
</p>
<p>
If you actually go and view the source code, you'll see a <code>deploy.sh</code> file.
If you actually go and view the source code, you'll see an <code>upload.sh</code> file.
Essentially, all I do is build the site locally, then upload the files. Pretty simple, right?
</p>
</main>

54
app/src/views/GardenDetails.vue Normal file
View File

@ -0,0 +1,54 @@
<script setup lang="ts">
import GardenSpeciesCard from '@/components/GardenSpeciesCard.vue';
import { SPECIES } from '@/garden_data';
const sortedSpecies = [...SPECIES].sort((a, b) =>
a['Scientific Name'] > b['Scientific Name'] ? 1 : -1
)
</script>
<template>
<header>
<h1>My Home's Garden</h1>
</header>
<main>
<p>
On this page, you'll find a list of all plants currently (or formerly)
in my garden.
</p>
<p>
I keep a spreadsheet of all the species in my garden (or that have been present in the past).
In total, my garden currently has <strong>52 unique species</strong>, with
<strong>37 native species</strong>.
</p>
<p>
<a href="/gardening" class="link-local">Back to gardening</a>
</p>
<div class="garden-cards-container">
<GardenSpeciesCard v-for="species in sortedSpecies" :key="species['Scientific Name']" :species="species"
style="width: 300px;" />
</div>
</main>
</template>
<style>
h1 {
text-align: center;
}
p {
max-width: 50ch;
margin: 1rem auto;
}
.garden-cards-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
/* No margins for the cards when in flex mode. */
.garden-species-card {
margin: 0;
}
</style>

24
app/src/views/GardeningView.vue
View File

@ -1,28 +1,18 @@
<script setup lang="ts">
import GardenSpeciesCard from '@/components/GardenSpeciesCard.vue'
import { SPECIES } from '@/garden_data'
const sortedSpecies = [...SPECIES].sort((a, b) =>
a['Scientific Name'] > b['Scientific Name'] ? 1 : -1
)
</script>
<template>
<main>
<p>
I do my best to maintain a small garden filled with a mix of native and non-invasive plants,
both for flowering and produce.
I'd like to call myself an avid gardener, with a particular interest in creating native-friendly garden habitats.
</p>
<h3>Species in My Garden</h3>
<p>
I keep a spreadsheet of all the species in my garden (or that have been present in the past).
In total, my garden currently has <strong>56 unique species</strong>, with
<strong>38 native species</strong>.
I work on my own garden that I share with my partner, and I like to help out with others' too. So if you're
thinking about (finally) killing your lawn and providing a space for non-invasive and native species to thrive,
I'd be happy to help!
</p>
<p>
<a href="/garden-details" class="link-local">Click here to view my home's garden.</a>
</p>
<GardenSpeciesCard
v-for="species in sortedSpecies"
:key="species['Scientific Name']"
:species="species"
/>
</main>
</template>

84
app/src/views/MainSite.vue Normal file
View File

@ -0,0 +1,84 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
import NavLink from '@/components/NavLink.vue';
</script>
<template>
<div class="bisection-container">
<header class="page-bisection">
<h1 class="site-header-text">Andrew Lalis</h1>
<nav>
<NavLink path="/">Home</NavLink>
<NavLink path="/about">About</NavLink>
<NavLink path="/software">Software</NavLink>
<NavLink path="/gardening">Gardening</NavLink>
<NavLink path="/logbook">Logbook</NavLink>
<NavLink path="/contact">Contact</NavLink>
</nav>
</header>
<RouterView v-slot="{ Component }">
<Transition name="page">
<Component :is="Component" class="page-bisection content-page" />
</Transition>
</RouterView>
</div>
</template>
<style>
.bisection-container {
text-align: center;
}
.page-bisection {
width: 50ch;
display: inline-block;
vertical-align: top;
padding-left: 1rem;
padding-right: 1rem;
}
.content-page {
text-align: left;
margin-top: 1rem;
}
.site-header-text {
font-family: Sacramento;
container-type: inline-size;
font-size: calc(min(60px, max(5cqw, 42px)));
text-align: right;
margin-top: 1rem;
margin-bottom: 0;
}
.page-enter-active {
transition: all 0.5s ease;
}
.page-enter-from {
opacity: 0;
transform: translateX(30px);
}
/*
Activates once the left and right half of the page stack due to width constraints.
We remove a lot of the vertical spacing to make things fit better.
*/
@media (width < calc(100ch - 2.5rem)) {
.site-header-text {
margin-top: 0;
}
.content-page {
margin-top: 0;
}
}
/*
Once the device width is smaller than one of the halves, sync the page half to the device width.
*/
@media (width < 50ch) {
.page-bisection {
width: calc(100% - 2rem);
}
}
</style>