change picrew page to markdown
This commit is contained in:
parent
be370cbbe9
commit
32f14ee88c
@ -7,8 +7,8 @@ const backgroundColorNightMode = "#240046";
|
||||
<h3>life of emma</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<!-- <a href="/life/self/">emma's self</a> -->
|
||||
emma's self
|
||||
<a href="/life/self/">emma's self</a>
|
||||
<!-- emma's self -->
|
||||
</li>
|
||||
<li>
|
||||
<!-- <a href="/life/interests/">emma's interests</a> -->
|
||||
|
||||
@ -3,13 +3,25 @@ import "../styles/global.css";
|
||||
import Header from "../components/Header.astro";
|
||||
import Navigation from "../components/Navigation.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
---
|
||||
|
||||
<Header />
|
||||
<Navigation />
|
||||
<main>
|
||||
<section>
|
||||
<slot />
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
const { pageTitle } = Astro.props;
|
||||
---
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{pageTitle}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<Navigation />
|
||||
<main>
|
||||
<section>
|
||||
<h1>{pageTitle}</h1>
|
||||
<slot />
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
63
src/layouts/PicrewLayout.astro
Normal file
63
src/layouts/PicrewLayout.astro
Normal file
@ -0,0 +1,63 @@
|
||||
---
|
||||
import BasicLayout from "./BasicLayout.astro";
|
||||
import { Image } from "astro:assets";
|
||||
|
||||
import imageOne from "../images/picrews/self-one.jpg"
|
||||
import imageTwo from "../images/picrews/self-two.jpg"
|
||||
import imageThree from "../images/picrews/self-three.jpg"
|
||||
import imageFour from "../images/picrews/self-four.jpg"
|
||||
|
||||
const borderColor = "#db7093";
|
||||
const borderColorDark = "#474973";
|
||||
|
||||
const { frontmatter } = Astro.props;
|
||||
|
||||
---
|
||||
<BasicLayout>
|
||||
<h1>{frontmatter.title}</h1>
|
||||
<slot />
|
||||
<div class="picrew-gallery">
|
||||
<figure>
|
||||
<Image src={imageOne} alt={frontmatter.images.one.alt} height={frontmatter.images.one.height} width={frontmatter.images.one.width}/>
|
||||
<figcaption><a href=`${frontmatter.images.one.creditUrl}` target="_blank">{frontmatter.images.one.creditText}</a></figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image src={imageTwo} alt={frontmatter.images.two.alt} height={frontmatter.images.two.height} width={frontmatter.images.two.width}/>
|
||||
<figcaption><a href=`${frontmatter.images.two.creditUrl}` target="_blank">{frontmatter.images.two.creditText}</a></figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image src={imageThree} alt={frontmatter.images.three.alt} height={frontmatter.images.three.height} width={frontmatter.images.three.width}/>
|
||||
<figcaption><a href=`${frontmatter.images.three.creditUrl}` target="_blank">{frontmatter.images.three.creditText}</a></figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image src={imageFour} alt={frontmatter.images.four.alt} height={frontmatter.images.four.height} width={frontmatter.images.four.width}/>
|
||||
<figcaption><a href=`${frontmatter.images.four.creditUrl}` target="_blank">{frontmatter.images.four.creditText}</a></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</BasicLayout>
|
||||
|
||||
<style define:vars={{borderColor, borderColorDark}}>
|
||||
.picrew-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin: 1.75rem;
|
||||
}
|
||||
|
||||
.picrew-gallery img {
|
||||
border: 4px solid var(--borderColor);
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.picrew-gallery,
|
||||
.picrew-gallery-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.picrew-gallery img{
|
||||
border: 4px solid var(--borderColorDark);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -14,69 +14,58 @@ const emmaNews = [
|
||||
`<li>02-20-2025 - i've been spending time learning how to use astro instead of hand coding my site. with time there will be a lot here. i like the way content is managed in astro</li>`
|
||||
];
|
||||
---
|
||||
<BasicLayout pageTitle={pageTitle}>
|
||||
<p>
|
||||
you're at emma's place. coffee or tea of your choice are
|
||||
waiting for you. my cat baxter loves pets if you'd like to say
|
||||
hello. there's a little bit of everything that is me here.
|
||||
there's no rush, you can be here for as little or as long as
|
||||
you'd like. you can just take it easy here. if all of this
|
||||
somehow brings you some happiness or makes you feel like
|
||||
maybe there's another human on the other side of your screen
|
||||
then i've done my job. have a look around, don't forget to
|
||||
grab a beverage
|
||||
</p>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{pageTitle}</title>
|
||||
<style is:global define:vars={{backgroundColor, backgroundColorNightMode, textColorNightMode, linkColorNightMode}}>
|
||||
.status {
|
||||
height: 120px;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
<p>
|
||||
i'm currently working on rebuilding my site in <a href="https://astro.build">astro</a>.
|
||||
i've opted to rebuild the site live and push updates to the site as i make them.
|
||||
rather than waiting to be done and uploading the whole thing. our sites will always be
|
||||
a work in progress, and that is a good thing. i'd like to show how that happens with my homepage,
|
||||
so feel free to check in every so often. you may see a page added or a design change
|
||||
</p>
|
||||
|
||||
.status .statuslol_container .statuslol {
|
||||
background: var(--backgroundColor) !important;
|
||||
}
|
||||
<h3>latest status</h3>
|
||||
<div class="status">
|
||||
<script src="https://status.lol/emma.js?time&link&fluent&pretty" defer></script>
|
||||
</div>
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.status .statuslol_content p {
|
||||
color: var(--textColorNightMode);
|
||||
}
|
||||
.status .statuslol_container .statuslol {
|
||||
background: var(--backgroundColorNightMode) !important;
|
||||
}
|
||||
.status .statuslol_content .statuslol_time a {
|
||||
color: var(--linkColorNightMode) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<BasicLayout>
|
||||
<h1>welcome to {pageTitle}</h1>
|
||||
<p>
|
||||
you're at emma's place. coffee or tea of your choice are
|
||||
waiting for you. my cat baxter loves pets if you'd like to say
|
||||
hello. there's a little bit of everything that is me here.
|
||||
there's no rush, you can be here for as little or as long as
|
||||
you'd like. you can just take it easy here. if all of this
|
||||
somehow brings you some happiness or makes you feel like
|
||||
maybe there's another human on the other side of your screen
|
||||
then i've done my job. have a look around, don't forget to
|
||||
grab a beverage
|
||||
</p>
|
||||
<h3>news about emma</h3>
|
||||
<ul>
|
||||
<Fragment set:html={emmaNews.map((news) => news)} />
|
||||
</ul>
|
||||
</BasicLayout>
|
||||
|
||||
<p>
|
||||
i'm currently working on rebuilding my site in <a href="https://astro.build">astro</a>.
|
||||
i've opted to rebuild the site live and push updates to the site as i make them.
|
||||
rather than waiting to be done and uploading the whole thing. our sites will always be
|
||||
a work in progress, and that is a good thing. i'd like to show how that happens with my homepage,
|
||||
so feel free to check in every so often. you may see a page added or a design change
|
||||
</p>
|
||||
<style is:global define:vars={{backgroundColor, backgroundColorNightMode, textColorNightMode, linkColorNightMode}}>
|
||||
.status {
|
||||
height: 120px;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
<h3>latest status</h3>
|
||||
<div class="status">
|
||||
<script src="https://status.lol/emma.js?time&link&fluent&pretty" defer></script>
|
||||
</div>
|
||||
.status .statuslol_container .statuslol {
|
||||
background: var(--backgroundColor) !important;
|
||||
}
|
||||
|
||||
<h3>news about emma</h3>
|
||||
<ul>
|
||||
<Fragment set:html={emmaNews.map((news) => news)} />
|
||||
</ul>
|
||||
</BasicLayout>
|
||||
</body>
|
||||
</html>
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.status .statuslol_content p {
|
||||
color: var(--textColorNightMode);
|
||||
}
|
||||
.status .statuslol_container .statuslol {
|
||||
background: var(--backgroundColorNightMode) !important;
|
||||
}
|
||||
.status .statuslol_content .statuslol_time a {
|
||||
color: var(--linkColorNightMode) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,88 +0,0 @@
|
||||
---
|
||||
import BasicLayout from "../../../../layouts/BasicLayout.astro";
|
||||
import { Image } from "astro:assets";
|
||||
|
||||
import imageOne from "../../../../images/picrews/self-one.jpg"
|
||||
import imageTwo from "../../../../images/picrews/self-two.jpg"
|
||||
import imageThree from "../../../../images/picrews/self-three.jpg"
|
||||
import imageFour from "../../../../images/picrews/self-four.jpg"
|
||||
|
||||
const imageHeight = "300";
|
||||
const imageWidth = "300";
|
||||
|
||||
const imageOneAlt = "an image of emma created in picrew. the image is fem presenting and represent characteristics that emma sees of herself when she can be fem presenting in her physical space";
|
||||
const imageOneCreditUrl = "https://picrew.me/en/image_maker/94097"
|
||||
const imageOneCreditText = "picrew image maker by sangled"
|
||||
|
||||
const imageTwoAlt = "an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles and clothing that emma sees herself wearing and expressing";
|
||||
const imageTwoCreditUrl = "https://picrew.me/en/image_maker/2446448";
|
||||
const imageTwoCreditText = "picrew image maker by seyimOn";
|
||||
|
||||
const imageThreeAlt = "an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles, jewlery, transitioning, and features of emma like freckles";
|
||||
const imageThreeCreditUrl = "https://picrew.me/en/image_maker/644129";
|
||||
const imageThreeCreditText = "picrew image maker by makowka";
|
||||
|
||||
const imageFourAlt = "an image of emma created in picrew. the image is fem presenting and explores characteristics such as shorter, lighter hair and makeup as well as feature of emma such as her current style of glasses and freckles";
|
||||
const imageFourCreditUrl = "https://picrew.me/en/image_maker/426722";
|
||||
const imageFourCreditText = "picrew image maker by grgikau";
|
||||
|
||||
const borderColor = "#db7093";
|
||||
const borderColorDark = "#474973";
|
||||
|
||||
const title = "emma's picrews"
|
||||
---
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{title}</title>
|
||||
|
||||
<style define:vars={{borderColor, borderColorDark}}>
|
||||
.picrew-gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin: 1.75rem;
|
||||
}
|
||||
|
||||
.picrew-gallery img {
|
||||
border: 4px solid var(--borderColor);
|
||||
border-radius: 5%;
|
||||
}
|
||||
|
||||
.picrew-gallery,
|
||||
.picrew-gallery-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.picrew-gallery img{
|
||||
border: 4px solid var(--borderColorDark);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<BasicLayout>
|
||||
<h1>{title}</h1>
|
||||
<p>picrew has been a wonderful help in figuring who i am. how i want to present when everything is right for me to do so. the below pictures all capture different parts of me, i see myself in all of them in some way. some picrews allowed me to add things that others didn't. for example, a top i really want to have one day, or the fact that i have freckles on my face. i love that picrew makes it accessible to discover my identity. it is such a friendly tool. over time i've found that people have different image makers that capture so many wonderful parts of myself, and humanity in general</p>
|
||||
<div class="picrew-gallery">
|
||||
<figure>
|
||||
<Image class="enlarge" src={imageOne} alt={imageOneAlt} height={imageHeight} width={imageWidth}/>
|
||||
<figcaption><a href=`${imageOneCreditUrl}` target="_blank">{imageOneCreditText}</a></figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image class="enlarge" src={imageTwo} alt={imageTwoAlt} height={imageHeight} width={imageWidth}/>
|
||||
<figcaption><a href=`${imageTwoCreditUrl}` target="_blank">{imageTwoCreditText}</a></figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image class="enlarge" src={imageThree} alt={imageThreeAlt} height={imageHeight} width={imageWidth}/>
|
||||
<figcaption><a href=`${imageThreeCreditUrl}` target="_blank">{imageThreeCreditText}</a></figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<Image class="enlarge" src={imageFour} alt={imageFourAlt} height={imageHeight} width={imageWidth}/>
|
||||
<figcaption><a href=`${imageFourCreditUrl}` target="_blank">{imageFourCreditText}</a></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</BasicLayout>
|
||||
34
src/pages/life/self/entries/picrew.md
Normal file
34
src/pages/life/self/entries/picrew.md
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
layout: ../../../../layouts/PicrewLayout.astro
|
||||
|
||||
title: emma's picrews
|
||||
description: "i've used picrew as a means to express myself in terms of outwards appearance. it has helped me better understand how i see myself. i'd like to share them"
|
||||
|
||||
images:
|
||||
one:
|
||||
alt: "an image of emma created in picrew. the image is fem presenting and represent characteristics that emma sees of herself when she can be fem presenting in her physical space"
|
||||
height: "300"
|
||||
width: "300"
|
||||
creditUrl: https://picrew.me/en/image_maker/94097
|
||||
creditText: picrew image maker by sangled
|
||||
two:
|
||||
alt: "an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles and clothing that emma sees herself wearing and expressing"
|
||||
height: "300"
|
||||
width: "300"
|
||||
creditUrl: https://picrew.me/en/image_maker/2446448
|
||||
creditText: picrew image maker by seyimOn
|
||||
three:
|
||||
alt: "an image of emma created in picrew. the image is fem presenting and explores characteristics such as hair styles, jewelry, transitioning, and features of emma like freckles"
|
||||
height: "300"
|
||||
width: "300"
|
||||
creditUrl: https://picrew.me/en/image_maker/644129
|
||||
creditText: picrew image maker by makowka
|
||||
four:
|
||||
alt: "an image of emma created in picrew. the image is fem presenting and explores characteristics such as shorter, lighter hair and makeup as well as feature of emma such as her current style of glasses and freckles"
|
||||
height: "300"
|
||||
width: "300"
|
||||
creditUrl: https://picrew.me/en/image_maker/426722
|
||||
creditText: picrew image maker by grgikau
|
||||
---
|
||||
|
||||
picrew has been a wonderful help in figuring who i am. how i want to present when everything is right for me to do so. the below pictures all capture different parts of me, i see myself in all of them in some way. some picrews allowed me to add things that others didn't. for example, a top i really want to have one day, or the fact that i have freckles on my face. i love that picrew makes it accessible to discover my identity. it is such a friendly tool. over time i've found that people have different image makers that capture so many wonderful parts of myself, and humanity in general
|
||||
@ -5,29 +5,9 @@ import CategoryPage from "../../../components/CategoryPage.astro";
|
||||
const pageTitle = "emma's self - category";
|
||||
|
||||
const allPosts = Object.values(import.meta.glob('./entries/*.md', {eager: true}));
|
||||
const allAstroPosts = Object.values(import.meta.glob('./entries/*.astro', {eager: true}));
|
||||
|
||||
// astro pages info
|
||||
const picrewPageTitle = "emma's picrews";
|
||||
const picrewPageDesciption = "i've used picrew as a means to express myself in terms of outwards appearance. it has helped me better understand how i see myself. i'd like to share them";
|
||||
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{pageTitle}</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<BasicLayout>
|
||||
<h1>{pageTitle}</h1>
|
||||
<ul>
|
||||
{allAstroPosts.map((post: any) => <CategoryPage url={post.url} title={picrewPageTitle} description={picrewPageDesciption}/>)}
|
||||
{allPosts.map((post: any) => <CategoryPage url={post.url} title={post.frontmatter.title} description={post.frontmatter.description}/>)}
|
||||
</ul>
|
||||
</BasicLayout>
|
||||
</body>
|
||||
</html>
|
||||
<BasicLayout pageTitle={pageTitle}>
|
||||
<ul>
|
||||
{allPosts.map((post: any) => <CategoryPage url={post.url} title={post.frontmatter.title} description={post.frontmatter.description}/>)}
|
||||
</ul>
|
||||
</BasicLayout>
|
||||
Loading…
x
Reference in New Issue
Block a user