ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

create page for showcase components

Browse source
This commit is contained in:
Ayo 2022-09-25 09:28:02 +02:00
parent 4a6d51493b
commit e1174bd1b4
9 changed files with 122 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
package-lock.json generated
View file

@ -8,7 +8,8 @@
"name": "@example/basics",
"version": "0.0.1",
"dependencies": {
"astro": "^1.2.6"
"astro": "^1.2.6",
"astro-github-stats": "^0.1.4"
}
},
"node_modules/@ampproject/remapping": {
@ -970,6 +971,14 @@
"npm": ">=6.14.0"
}
},
"node_modules/astro-github-stats": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.1.4.tgz",
"integrity": "sha512-pUVH6czewlTrpO0I+q4oAYLwxXH2lflZ8t/O04z5GuxSQh1hEHXdcTdoyWb039PVYwGoWx/Ziye6loT4472YTQ==",
"peerDependencies": {
"astro": "^1.0.0"
}
},
"node_modules/bail": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@ -6534,6 +6543,12 @@
"zod": "^3.17.3"
}
},
"astro-github-stats": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.1.4.tgz",
"integrity": "sha512-pUVH6czewlTrpO0I+q4oAYLwxXH2lflZ8t/O04z5GuxSQh1hEHXdcTdoyWb039PVYwGoWx/Ziye6loT4472YTQ==",
"requires": {}
},
"bail": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",

3
package.json
View file

@ -11,6 +11,7 @@
"astro": "astro"
},
"dependencies": {
"astro": "^1.2.6"
"astro": "^1.2.6",
"astro-github-stats": "^0.1.4"
}
}

5
src/components/Back.astro
View file

@ -1,4 +1,7 @@
<nav><a href="/">&larr; Back</a></nav>
---
const {url}= Astro.props;
---
<nav><a href={url}>&larr; Back</a></nav>
<style>
nav {

30
src/layouts/Layout.astro
View file

@ -64,9 +64,16 @@ import Footer from '../components/Footer.astro';
}
}
</style>
<style is:global>
main {
margin: auto;
padding: 1em;
max-width: var(--content-width);
}
h1 {
font-size: var(--font-size-xl);
}
@ -80,10 +87,23 @@ import Footer from '../components/Footer.astro';
Bitstream Vera Sans Mono, Courier New, monospace;
}
a {
font-weight: 900;
color: var(--color-link);
border-radius: 0.4rem;
}
a {
font-weight: 900;
color: var(--color-link);
border-radius: 0.4rem;
}
.text-gradient {
font-weight: 900;
background-image: var(--ayo-gradient);
animation: pulse 4s ease-in-out infinite;
background-size: 500% 500%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
background-position-y: 100%;
border-radius: 0.4rem;
}
</style>

9
src/pages/index.astro
View file

@ -34,6 +34,11 @@ import Footer from "../components/Footer.astro";
title="Github"
body="See my public projects over at Github. ❤️"
/>
<!--Card
href="/showcase"
title="Showcase"
body="Try out some components I made recently."
/-->
<Card
href="/social"
title="Social"
@ -61,6 +66,10 @@ import Footer from "../components/Footer.astro";
color: white;
}
main {
max-width: 100% !important;
}
.highlighted-section__content {
margin: auto;
padding: 1em;

2
src/pages/now.astro
View file

@ -7,7 +7,7 @@ import Back from '../components/Back.astro';
<Layout title="Ayo Ayco | Software Engineer + Web Developer">
<main>
<Back />
<Back url="/" />
<h1><span class="text-gradient">Now</span></h1>
<em>What am I currently up to?</em>
<p>This year (2022) I have moved to The Netherlands with my family; specifically to the northern area of Amsterdam.</p>

21
src/pages/showcase.astro Normal file
View file

@ -0,0 +1,21 @@
---
import Layout from "../layouts/Layout.astro";
import Footer from "../components/Footer.astro";
import Card from "../components/Card.astro";
import Back from "../components/Back.astro";
---
<Layout>
<main>
<Back url="/" />
<h1>Showcase <span class="text-gradient">Components</span></h1>
<ul list=role>
<Card
href="/showcase/astro-github-stats"
title="Astro Github Stats"
body="Embed github stats on your Astro page ✨"
/>
</ul>
<Footer />
</main>
</Layout>

23
src/pages/showcase/astro-github-stats.astro Normal file
View file

@ -0,0 +1,23 @@
---
import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/Footer.astro";
import Back from "../../components/Back.astro";
import GithubStats from "astro-github-stats";
---
<Layout>
<main>
<Back url="/showcase" />
<h1>Astro Github Stats</h1>
<GithubStats username="ayoayco" />
<h2>Links</h2>
<ol>
<li>
Github repo: <a href="https://github.com/ayoayco/astro-github-stats">astro-github-stats</a>
</li>
<li>
NPM registry: <a href="https://npmjs.org/astro-github-stats">astro-github-stats</a>
</li>
</ol>
<Footer />
</main>
</Layout>

60
src/pages/social.astro
View file

@ -7,27 +7,27 @@ import Back from '../components/Back.astro';
<Layout title="Ayo Ayco | Software Engineer + Web Developer">
<main>
<Back />
<h1>Social <span class="text-gradient">Links</span></h1>
<ul role="list" class="link-card-grid">
<Card
href="https://twitter.com/ayoayco/"
title="Twitter"
body="Tweets about my takes on technology and current events"
/>
<Card
href="https://www.linkedin.com/in/ayoayco/"
title="LinkedIn"
body="Connect with me and my professional network"
/>
<Card
href="https://soundcloud.com/ayoayco/"
title="SoundCloud"
body="Some music I made as a hobby"
/>
</ul>
<Footer />
</main>
<Back url="/" />
<h1>Social <span class="text-gradient">Links</span></h1>
<ul role="list" class="link-card-grid">
<Card
href="https://twitter.com/ayoayco/"
title="Twitter"
body="Tweets about my takes on technology and current events"
/>
<Card
href="https://www.linkedin.com/in/ayoayco/"
title="LinkedIn"
body="Connect with me and my professional network"
/>
<Card
href="https://soundcloud.com/ayoayco/"
title="SoundCloud"
body="Some music I made as a hobby"
/>
</ul>
<Footer />
</main>
</Layout>
<style>
@ -35,24 +35,6 @@ import Back from '../components/Back.astro';
margin: 2rem 0;
}
main {
margin: auto;
padding: 1em;
max-width: var(--content-width);
}
.text-gradient {
font-weight: 900;
background-image: var(--ayo-gradient);
animation: pulse 4s ease-in-out infinite;
background-size: 500% 500%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
background-position-y: 100%;
border-radius: 0.4rem;
}
.highlighted-content {
line-height: 1.6;
margin: 1rem 0;