Refactored to allow one-off pages, and cleaned up the gardening page.
This commit is contained in:
parent
e934f870c1
commit
d1c0a996ad
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: '',
|
||||
'': ''
|
||||
},
|
||||
|
|
|
|||
|
|
@ -5,33 +5,47 @@ 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: HomeView
|
||||
component: MainSite,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
path: 'about',
|
||||
component: AboutView
|
||||
},
|
||||
{
|
||||
path: 'contact',
|
||||
component: ContactView
|
||||
},
|
||||
{
|
||||
path: 'software',
|
||||
component: SoftwareView
|
||||
},
|
||||
{
|
||||
path: 'gardening',
|
||||
component: GardeningView
|
||||
},
|
||||
{
|
||||
path: 'logbook',
|
||||
component: LogBookView
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
component: AboutView
|
||||
},
|
||||
{
|
||||
path: '/contact',
|
||||
component: ContactView
|
||||
},
|
||||
{
|
||||
path: '/software',
|
||||
component: SoftwareView
|
||||
},
|
||||
{
|
||||
path: '/gardening',
|
||||
component: GardeningView
|
||||
},
|
||||
{
|
||||
path: '/logbook',
|
||||
component: LogBookView
|
||||
path: '/garden-details',
|
||||
component: () => GardenDetails
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
})
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue