Skip to content

Commit

Permalink
Merge pull request #1 from omgitsjan/personalize
Browse files Browse the repository at this point in the history
Enhanced Customization, Code Formatting, and Readme Updates
  • Loading branch information
omgitsjan authored Jun 12, 2023
2 parents 10a6d04 + a7095af commit 4ab9a16
Show file tree
Hide file tree
Showing 55 changed files with 1,955 additions and 5,654 deletions.
14 changes: 14 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# Ignore all Markdown files:
*.md

# Ignore node modules:
node_modules

# Ignore dist directory:
dist

# Ignore public directory:
public

# Ignore specific file:
src/main.js
16 changes: 16 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"semi": false,
"htmlWhitespaceSensitivity": "ignore",
"arrowParens": "avoid",
"overrides": [
{
"files": ["*.vue"],
"options": {
"parser": "vue"
}
}
]
}
38 changes: 5 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,10 @@
[![harlanzw.com](https://repository-images.githubusercontent.com/498703201/39a4dfce-bed2-48d9-9777-a076fb0f000f)](https://harlanzw.com)
# JanPetry.de

# harlanzw.com
This is my personal website, built using Nuxt 3 and powered by [nuxt-seo-kit](https://github.com/harlan-zw/nuxt-seo-kit) as well as [Docus](https://docus.dev/).

My personal website built with Nuxt 3, powered by [nuxt-seo-kit](https://github.com/harlan-zw/nuxt-seo-kit) and [Docus](https://docus.dev).
The website is designed as a reference point for best practices with Nuxt code, SEO, performance, and accessibility.

Built as reference for optimal Nuxt code practices, SEO, performance and accessibility.

## Features

- 🔎 Automated Schema.org
- 📚 Markdown read time calculation
- 👨‍💻 Code file name and language support
- 🧩 Automatic Server Side Icon Resolving (no FOUC), powered by iconify & unplugin-icons
- 🤖 Sitemap.xml and feed generation
- 🍞 Automatic breadcrumbs (with Schema.org)
- 🤝 Integrated with @nuxt/image, images served with [cloudinary](https://cloudinary.com)

## More Features

- Automatic routes based on content /w 404 handling
- Automatic navigation generation
- Easy content composables
- Fully typed content
- Split pages/posts for easier content organisation
- [line-md](https://github.com/cyberalien/line-md) icons by cyberalien

## Plus

- pnpm
- WindiCSS
- Eslint with @antfu/eslint-config
- SEO / i18n best practices
- Fathom analytics
- Vercel hosted
Please note that this repository is mainly a personalized configuration of the original project created by Harlan Zwierlein (harlan-zw). Most of the credit for this project should be attributed to him. If you are interested in the original project, I highly recommend checking out his work.

## Setup

Expand All @@ -48,4 +20,4 @@ Start the development server on http://localhost:3000

```bash
pnpm dev
```
```
5 changes: 3 additions & 2 deletions app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ export default defineAppConfig({
layout: {
fluid: false,
},
title: 'Harlan Wilton',
description: 'Open source developer, contributing to the Vue, Nuxt, and Vite ecosystems.',
title: 'Jan Petry',
description:
'Developer, working for KÜS Data GmbH and in my free im coding a bit and playing some video games.',
},
seoUi: {
breadcrumb,
Expand Down
15 changes: 7 additions & 8 deletions app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,24 @@ const year = computed(() => new Date().getFullYear())
<SeoKit />
<SchemaOrgPerson
:name="siteMeta.name"
image="https://res.cloudinary.com/dl6o1xpyq/image/upload/f_jpg,q_auto:best,dpr_auto,w_240,h_240/images/harlan-wilton"
image="https://res.cloudinary.com/dwl1vhp3v/image/upload/f_jpg,q_auto:best,dpr_auto,w_240,h_240/v1686178087/images/jan-petry"
:same-as="siteMeta.sameAs"
/>
</Head>
<Body class="text-gray-800 dark:text-gray-100 antialiased">
<NuxtLoadingIndicator />
<Header />
<main class="md:(max-w-8xl pb-20 px-8) sm:(pb-16) mx-auto max-w-full px-4 py-7 pb-10">
<main
class="md:(max-w-8xl pb-20 px-8) sm:(pb-16) mx-auto max-w-full px-4 py-7 pb-10"
>
<NuxtPage class="page-enter-active" />
</main>
<footer class="px-5 sm:px-7 md:px-10 text-center text-gray-400 text-sm my-5">
<footer
class="px-5 sm:px-7 md:px-10 text-center text-gray-400 text-sm my-5"
>
<div class="flex justify-center mb-3">
<SocialIcons />
</div>
<p class="mb-3">
Like this site? <NuxtLink to="https://github.com/harlan-zw/harlanzw.com">
Clone away.
</NuxtLink>
</p>
<p class="mb-3">
© {{ year }}-PRESENT {{ siteMeta.name }}. All rights reserved.
</p>
Expand Down
47 changes: 47 additions & 0 deletions components/GeneralCard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<script lang="ts" setup>
import type { PropType } from 'vue'
import type { Entry } from '~/types'
const props = defineProps({
entry: Object as PropType<Entry>,
})
</script>

<template>
<a
:href="entry?.link"
target="_blank"
class="relative px-4 py-3 group rounded border-gray-200/10 border-2 hover:bg-white dark:(border-gray-800/10) dark:hover:bg-gray-800 transition-all"
>
<div class="!flex">
<div class="flex-shrink mt-2 mr-2">
<icon
v-if="entry?.icon"
:name="entry.icon"
class="w-14 h-auto opacity-70 mr-2 group-hover:opacity-75 transition-all svg-container"
/>
</div>
<div class="flex-grow">
<div class="mb-2">
<h3 class="-mb-1 font-bold">{{ entry?.name }}</h3>
<span class="opacity-50 text-xs">{{ entry?.link }}</span>
</div>
</div>
</div>
<p class="text-sm opacity-90 mb-3 m-0">
{{ entry?.description || 'placeholder' }}
</p>
<div class="text-xs inline-flex items-center absolute top-4 right-4">
<i-uim:calender class="inline mr-1 mb-2px" />
Since
{{ entry?.since || 'A while Ago' }}
</div>
</a>
</template>

<style>
.svg-container svg {
width: 35px;
height: 35px;
}
</style>
23 changes: 17 additions & 6 deletions components/Logo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,30 @@ const initials = siteMeta.name
</script>

<template>
<nuxt-link to="/" class="flex items-center group unstyled py-4" title="Go Home">
<nuxt-link
to="/"
class="flex items-center group unstyled py-4"
title="Go Home"
>
<NuxtImg
:src="siteMeta.logo"
width="80"
height="80"
:alt="siteMeta.name"
provider="cloudinary"
style="width: 40px; height: 40px;"
style="width: 40px; height: 40px"
class="rounded-lg h-10 w-10 mr-3 group-hover:(h-11 w-11) transition-all"
/>
<div aria-label="Harlan Wilton Initials" class="hidden sm:block text-gray-700 dark:text-gray-200 relative transform top-2 group-hover:top-0">
<span class="block text-green-700 font-bold text-3xl logo">{{ initials }}</span>
<span class="block text-green-700 font-bold text-3xl logo">{{ initials }}</span>
<div
aria-label="Jan Petry Initials"
class="hidden sm:block text-gray-700 dark:text-gray-200 relative transform top-2 group-hover:top-0"
>
<span class="block text-green-700 font-bold text-3xl logo">
{{ initials }}
</span>
<span class="block text-green-700 font-bold text-3xl logo">
{{ initials }}
</span>
</div>
</nuxt-link>
</template>
Expand All @@ -41,7 +52,7 @@ const initials = siteMeta.name
.logo {
transform: skewX(-10deg);
font-weight: 400;
transition: 0.2s;
transition: 0.25s;
background: linear-gradient(90deg, rgba(#11998e, 0.3), rgba(#38ef7d, 0.3));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Expand Down
18 changes: 11 additions & 7 deletions components/NewsletterAlert.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
<template>
<div class="border-1 border-teal-800/30 dark:bg-blue-800/20 px-3 py-2 rounded">
<p class="font-bold mb-3 text-lg">
Monthly newsletter
</p>
<div
class="border-1 border-teal-800/30 dark:bg-blue-800/20 px-3 py-2 rounded"
>
<p class="font-bold mb-3 text-lg">Regularly newsletter</p>
<p class="mb-2">
Each month I send an update of my journey working on open-source. My <NuxtLink to="https://github.com/harlan-zw/" target="_blank">
GitHub sponsors
</NuxtLink> community gets early access.
At least each quarter I try to send an update of my journey working on
different projects and topics to my
<NuxtLink to="https://discord.com/invite/janslounge" target="_blank">
Discord community
</NuxtLink>
.
</p>
<p>After 2 weeks it's made public.</p>
</div>
</template>
Loading

0 comments on commit 4ab9a16

Please sign in to comment.