zoeissleeping/juls07.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

got blogs working better, no content shifts + more

Browse Source
This commit is contained in:
Zoe
2022-12-01 00:30:47 -06:00
parent 66aa241a43
commit 5d422a15b3
14 changed files with 145 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/main.css
View File

@@ -13,7 +13,7 @@ body {
}
header {
background-image: url(~/assets/pictues/header.avif);
background-image: url(~/assets/pictues/header.min.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;

0
assets/pictues/header.avif → assets/pictues/header-full.avif
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 MiB

After

Width:  |  Height:  |  Size: 5.4 MiB

BIN
assets/pictues/header.min.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

13
components/TagButton.vue
View File

@@ -14,20 +14,21 @@ export default {
'docker': 'docker-icon',
'linux': 'linux-tux',
'bittorrent': 'webtorrent',
'web-server': 'nginx'
'web-server': 'nginx',
'supabase': 'supabase-icon'
},
}
},
props: ['iconName', 'name']
props: ['iconName', 'name']
}
</script>
<template>
<button :aria-label="name"
class="font-inter md:text-lg w-fit max-h-9 min-w-fit bg-zinc-800 border border-zinc-700/30 py-1 px-2 rounded shadow flex items-center">
<div :aria-label="name"
class="font-inter select-none md:text-lg w-fit max-h-9 min-w-fit bg-zinc-800 border border-zinc-700/30 py-1 px-2 rounded shadow flex items-center">
<Icon size="20"
class="mr-2"
:name="('logos:' + (iconMap[iconName.toLowerCase().split(' ').join('-')] || iconName.toLowerCase()))" />
{{name}}
</button>
{{ name }}
</div>
</template>

18
content/blog/how-i-made-my-site-fast.md
View File

@@ -1,9 +1,19 @@
---
title: How I made my site fast
description: How I made my social media site fast
img: /images/how-i-made-my-site-fast.png
alt: how i made snowball fast
writer: juls07
image:
src: '/images/how-i-made-my-site-fast.png'
alt: 'How I made my site fast'
head:
meta:
- name: 'keywords'
content: 'web dev, fullstack development, angular, nodejs, redis'
- name: 'robots'
content: 'index, follow'
- name: 'author'
content: 'juls07'
- name: 'copyright'
content: '© 2022 juls07'
date: 2022-05-22
tags:
- web dev
@@ -12,7 +22,7 @@ tags:
- nodejs
- redis
---
So yesterday I talked about my social media site that I'm working on. Today I implemented redis, a memory store that I used to reduce requests at most by 48ms. First when I tried to use redis I just used the `redis` package off of npmjs because it only makes sense but when I tried to get a key with the name of `user-cache-[userId]` It failed for some reason, I still dont know why it failed but using the `ioredis` package and everything started working, not user data processing, what I used redis to cache since it's a terrible for loop that executes database requests for every post, but now it's all stored in memory. I still want to add TTL since my VPS that I intend on deploying my site on for production only has 1GB of RAM but I'm not sure how to do that. If you saw my blog post from [yesterday](/blog/what-ive-been-doing) then you'll know what my user code used to look like, now it looks like this.
So yesterday I talked about my social media site that I'm working on. Today I implemented redis, a memory store that I used to reduce requests at most by 48ms. First when I tried to use redis I just used the `redis` package off of npmjs because it only makes sense but when I tried to get a key with the name of `user-cache-[userId]` It failed for some reason, I still dont know why it failed but using the `ioredis` package and everything started working, not user data processing, what I used redis to cache since it's a terrible for loop that executes database requests for every post, but now it's all stored in memory.<!--more--> I still want to add TTL since my VPS that I intend on deploying my site on for production only has 1GB of RAM but I'm not sure how to do that. If you saw my blog post from [yesterday](/blog/what-ive-been-doing) then you'll know what my user code used to look like, now it looks like this.
```js[post.js]
for (let i = 0; i < replies.length; i++) {

73
content/blog/nuxtjs-trpc-fullstack.md
View File

@@ -1,9 +1,19 @@
---
title: My nuxtjs + trpc fullstack web app
description: My experiences with nuxtjs 3 and tRPC
img: /images/how-i-made-my-site-fast.png
alt: how i made snowball fast
writer: juls07
image:
src: '/images/archlinux.png'
alt: 'Why I chose archlinux'
head:
meta:
- name: 'keywords'
content: 'web dev, fullstack development, nuxtjs, tRPC, redis'
- name: 'robots'
content: 'index, follow'
- name: 'author'
content: 'juls07'
- name: 'copyright'
content: '© 2022 juls07'
date: 2022-09-20
_draft: true
tags:
@@ -15,60 +25,3 @@ tags:
---
Recently I've been working with nuxtjs 3 and tTRPC. I've heard a lot of things about nuxtjs 3 and tRPC lately, mostly bad with nuxtjs 3 and mostly good with trpc. These are not technoligies I've been interested in working with for a while
## JS Code Block
```js
const a = 5;
```
## One liners
`here` `and here` `count` you don't even know what you're asking me to confess
## Vue Code Block
```vue
<template>
<input v-model.lazy="message"/>
</template>
<script setup>
import { watch, ref } from 'vue'
const message = ref('');
const saveMessage = () => {
// do anything with the message
}
watch(message, (newMessage) => {
saveMessage(newMessage) // only called on change events
})
</script>
```
## Vue Code Block With Line Highlighting
```svelte
<script>
{#if tags.length > 0}
{#each tags as tag}
<Tag {tag} />
{/each}
{:else}
<p>This release has no tags</p>
{/if}
</script>
```
```lua {2,6-10}
local name = "juls07"
```
## Vue Code Block With Filename
```vue [pages/[...slug.vue]]
<template>
<input v-model.lazy="message" />
</template>
```

26
content/blog/portfolio-site-rebuild.md Normal file
View File

@@ -0,0 +1,26 @@
---
title: Rebuilding my personal website!
description: My experiences with nuxtjs 3 and tRPC
image:
src: '/images/archlinux.png'
alt: 'Why I chose archlinux'
head:
meta:
- name: 'keywords'
content: 'web dev, fullstack development, nuxtjs, tRPC, redis'
- name: 'robots'
content: 'index, follow'
- name: 'author'
content: 'juls07'
- name: 'copyright'
content: '© 2022 juls07'
date: 2022-09-20
_draft: false
tags:
- web dev
- fullstack development
- nuxtjs 3
- supabase
---
Recently I've been working with nuxtjs 3 and tTRPC. I've heard a lot of things about nuxtjs 3 and tRPC lately, mostly bad with nuxtjs 3 and mostly good with trpc. These are not technoligies I've been interested in working with for a while

18
content/blog/running-bittorent-webserver.md
View File

@@ -1,9 +1,19 @@
---
title: Running a qbittorrent webserver!
description: My experience with a qbittorrent webserver
img: /images/qbittorrent-web.png
alt: running bittorrent webserver
writer: juls07
image:
src: '/images/qbittorrent-web.png'
alt: 'Qbittorrent web server'
head:
meta:
- name: 'keywords'
content: 'linux, bittorrent, docker, web server'
- name: 'robots'
content: 'index, follow'
- name: 'author'
content: 'juls07'
- name: 'copyright'
content: '© 2022 juls07'
date: 2022-03-07
tags:
- Linux
@@ -12,7 +22,7 @@ tags:
- Web server
---
Recently, I started running a qbittorrent webserver on my raspberry pi 4B+ using [this docker image](https://hotio.dev/containers/qbittorrent/), It has been quite a journey. First, I started looking for a way to run a qbittorrent in a container, this is how I run all the applications on my raspberry pi and I inevibly asked in the [Arch linux discord server](https://discord.gg/3m6dbPR) and I got a reply from @runsamok on discord and they reccomend the docker image I mentioned earlier. Then I started seeding linux distros (obviously) and I started with a batch of about 7 give or take, Ubuntu 18.04, Ubuntu 20.04, Ubuntu 21.04, Arch Linux (duh), Rocky Linux, and tails linux. I shotly realized that Rocky and tails are baren wastelands when it comes to people wanting to torrent them so I eventually Scrapped them.
Recently, I started running a qbittorrent webserver on my raspberry pi 4B+ using [this docker image](https://hotio.dev/containers/qbittorrent/), It has been quite a journey. First, I started looking for a way to run a qbittorrent in a container, this is how I run all the applications on my raspberry pi and I inevibly asked in the [Arch linux discord server](https://discord.gg/3m6dbPR) and I got a reply from @runsamok on discord and they reccomend the docker image I mentioned earlier.<!--more--> Then I started seeding linux distros (obviously) and I started with a batch of about 7 give or take, Ubuntu 18.04, Ubuntu 20.04, Ubuntu 21.04, Arch Linux (duh), Rocky Linux, and tails linux. I shotly realized that Rocky and tails are baren wastelands when it comes to people wanting to torrent them so I eventually Scrapped them.
<br class="article"/>
So after about 10 or so days I wanted to automatically download Arch linux and ubuntu updates using RSS, the qbittorrent webserver has thought of that so you can easily so so in the RSS tab. However, When downloading the latest Arch Linux version it worked fine but I added an ubuntu feed that I accidentally downloaded the 10 most recent torrents, but I deleted them and moved on. Later down the road I was trying to download the march patch of the Arch Linux torrent but I could not, after a while of wondering why I realized my storage was full, my raspberry pi doesnt have a lot of storage but not a little, it turns out that the torrents I deleted from the Ubuntu RSS were still on the raspberry pi, this isnt the fault of the developers because I didnt check the "delete on disk" button but there was not "not enough space warning" message when I tried to download the Arch Linux torrent.
<br class="article"/>

18
content/blog/what-ive-been-doing.md
View File

@@ -1,9 +1,19 @@
---
title: What I've been doing
description: Stuff I've been doing recently
img: /images/what-ive-been-doing.png
alt: what ive been doing
writer: juls07
image:
src: '/images/what-ive-been-doing.png'
alt: "What I've been doing recently"
head:
meta:
- name: 'keywords'
content: 'web dev, fullstack development, angular, nodejs, mongodb'
- name: 'robots'
content: 'index, follow'
- name: 'author'
content: 'juls07'
- name: 'copyright'
content: '© 2022 juls07'
date: 2022-05-21
tags:
- web dev
@@ -13,7 +23,7 @@ tags:
- mongodb
---
So I have been working on a social media site I am currently calling snowballsocial, so far I have users, posts, replies, and likes. Expressjs not having HTTP/2 is slightly annoying and I have kind of thought migrating all of my code to hapi but I'm too lazy to migrate all my code right now, especially since I just "asyncified" it, remaking my code rather than making all new code would probably be easier but I'll do that later. This project I again used mongoDB, I fist used mongodb in my [vuefullstack](https://github.com/juls0730/vuefullstack) app, and I loved it, it's much easier for the kind of projects I use than mySQL. Actually targeting a production site rather than just having fun like with my vuefullstack app or my rails-forum, etc. make me worry about alot more thigs like SEO, I tried to add OG tags to the post-show tag just showing post data but it doesnt work because the tags are added after the data loads.
So I have been working on a social media site I am currently calling snowballsocial, so far I have users, posts, replies, and likes. Expressjs not having HTTP/2 is slightly annoying and I have kind of thought migrating all of my code to hapi but I'm too lazy to migrate all my code right now, especially since I just "asyncified" it, remaking my code rather than making all new code would probably be easier but I'll do that later.<!--more--> This project I again used mongoDB, I fist used mongodb in my [vuefullstack](https://github.com/juls0730/vuefullstack) app, and I loved it, it's much easier for the kind of projects I use than mySQL. Actually targeting a production site rather than just having fun like with my vuefullstack app or my rails-forum, etc. make me worry about alot more thigs like SEO, I tried to add OG tags to the post-show tag just showing post data but it doesnt work because the tags are added after the data loads.
<br class="article"/>
I've gotten a VPS from [linode](linode.com) so I could expose my non-static only page to the internet without exposing my home IP address, making me vulnerable to being doxxed and DDoS attacks. Using nignx I have reverse-proxied my api from port 3001 to 2087, and added ssl certs, and I have used it to server my static site on port 80, I have used nginx before and it's pretty simple to use. Optimizing has been the bain of development so far, making api requests faster, and reducing bundle size, I'm going to focus on api optimizations since its the harder one. My main worry for more than a couple requests is getting posts, since I do a for loop to change userId's to usernames
```js

18
content/blog/why-i-chose-arch.md
View File

@@ -1,16 +1,26 @@
---
title: Why I chose archlinux
description: All of my reasons for choosing archlinux
img: /images/archlinux.png
alt: why I chose arch
writer: juls07
image:
src: /images/archlinux.png
alt: "Why I chose archlinux"
head:
meta:
- name: 'keywords'
content: 'linux, archlinux'
- name: 'robots'
content: 'index, follow'
- name: 'author'
content: 'juls07'
- name: 'copyright'
content: '© 2022 juls07'
date: 2022-03-07
tags:
- Linux
- archlinux
---
I started using linux about 3 years ago, I started with Pop!_OS but after that I switched to fedora, then Zorin which is still the most beautiful out of the box linux distro I have ever used. After that howerver, I switched to arch and I've been on my misadventure's with arch for about 2 years now. I have a very minimalist approach to linux, trying to save as much space as possible save as much computer power as possible, arch being an extremely minimal install of linux was great for me. Next, being able to customize the install of arch is great, dont like systemd because of the company behind it, try runit or openrc, want btrfs so you can compress your files, go ahead, dont want grub, try systemdboot, etc. It's just the way arch lets you do whatever you want. Then, its the support from the [community discord](https://discord.gg/3m6dbPR) or the [arch wiki](https://wiki.archlinux.org/title/Main_page) if someone has had that problem theres a good chance you can get it fixed.
I started using linux about 3 years ago, I started with Pop!_OS but after that I switched to fedora, then Zorin which is still the most beautiful out of the box linux distro I have ever used. After that howerver, I switched to arch and I've been on my misadventure's with arch for about 2 years now. I have a very minimalist approach to linux, trying to save as much space as possible save as much computer power as possible, arch being an extremely minimal install of linux was great for me.<!--more--> Next, being able to customize the install of arch is great, dont like systemd because of the company behind it, try runit or openrc, want btrfs so you can compress your files, go ahead, dont want grub, try systemdboot, etc. It's just the way arch lets you do whatever you want. Then, its the support from the [community discord](https://discord.gg/3m6dbPR) or the [arch wiki](https://wiki.archlinux.org/title/Main_page) if someone has had that problem theres a good chance you can get it fixed.
<br class="article"/>
Overall, I know that arch isnt good for industrial applications since it doesnt scale well, its definitely for enthusiasts who have the time to work on their computer and not for linux novices. I love arch for its simplicity and flexibility and I think you should try it if your used to linux and want something new to play with. Using arch over the years has taught me so much about linux in general and if your a seasoned linux user give it a change, maybe you'll find the same love for it I did all the years ago.
<br class="article"/>

14
nuxt.config.ts
View File

@@ -3,6 +3,19 @@ import { defineNuxtConfig } from 'nuxt/config';
export default defineNuxtConfig({
target: 'static',
app: {
head: {
title: 'Juls07',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
// hid is used as unique identifier. Do not use `vmid` for it as it will not work
{ hid: 'description', name: 'description', content: 'Juls07 is a fullstack web developer' }
]
},
},
css: ['~/assets/css/main.css'],
postcss: {
@@ -22,6 +35,7 @@ export default defineNuxtConfig({
content: {
documentDriven: true,
highlight: {
theme: {
default: 'github-dark'

19
pages/blog/[...slug].vue
View File

@@ -1,9 +1,10 @@
<template>
<Nav />
<main class="grid grid-cols-12 gap-5 justify-center">
<div class="py-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
<div class="py-6 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
<ContentDoc v-slot="{ doc }">
<img :src="doc.img" class="mb-2" />
<img :src="doc.image.src"
class="mb-2" />
<h1 class="text-3xl md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
<p class="mb-1 text-zinc-400">
{{ doc.description }}
@@ -12,7 +13,8 @@
{{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }}
</p>
<div class="flex flex-wrap w-full gap-2 justify-start mb-7">
<tagButton v-for="tag in doc.tags" :name="tag"
<tagButton v-for="tag in doc.tags"
:name="tag"
:iconName='tag' />
</div>
<ContentRenderer :value="doc" />
@@ -20,8 +22,9 @@
</div>
</main>
<footer class="grid grid-cols-12 gap-5 justify-center">
<div class="py-6 mb-4 !col-start-3 md:!col-start-4 xl:!col-start-5 xl:col-span-4 md:col-span-6 col-span-8">
<NewsletterSignup />
</div>
</footer>
</template>
<div class="py-2 mb-4 !col-start-3 md:!col-start-4 xl:!col-start-5 xl:col-span-4 md:col-span-6 col-span-8">
<NewsletterSignup class="mb-2" />
© 2022 Juls07 - GPL v3.0 License
</div>
</footer>
</template>

48
pages/blog/index.vue
View File

@@ -5,12 +5,11 @@
<div v-for="article in articles"
:key="article._path"
class="mb-5 px-1.5">
<p v-show="false">{{ article.date }}</p>
<div class="text-white rounded-lg border border-neutral-700 bg-zinc-800 shadow-md">
<img v-if="article.img"
:src="article.img"
<div class="text-white bg-zinc-800 max-h-[563.25px] overflow-hidden rounded-lg border border-neutral-700 shadow-md">
<img v-if="article.image.src"
:src="article.image.src"
class="w-full rounded-tl-lg rounded-tr-lg" />
<div class="p-3">
<div class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-zinc-800 mb-1 pb-1 relative">
<h3>
<nuxt-link class="text-lg"
:to="article._path">
@@ -23,15 +22,17 @@
<p class="text-zinc-400 dark:text-zinc-400">
{{ article.description }}
</p>
<p style="max-height: 224px;"
class="overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-zinc-800 mb-1 pb-1 relative text-zinc-200">
<ContentDoc :value="article" :path="article._path" v-slot="{ doc }">
<p
class="text-zinc-200 max-h-56">
<ContentDoc :value="article"
:path="article._path"
v-slot="{ doc }">
<div class="flex flex-wrap w-full gap-2 justify-start mb-2">
<tagButton v-for="tag in doc.tags"
:name="tag"
:iconName='tag' />
</div>
<ContentRenderer :value="doc" />
<ContentRenderer :value="doc" :excerpt="true" />
</ContentDoc>
</p>
</div>
@@ -41,7 +42,7 @@
</div>
</template>
<script setup>
<script setup lang="ts">
const { data: articles } = await useAsyncData('posts-list', () => queryContent('/blog')
.where({ _draft: false })
.sort({ date: -1, $numeric: true, })
@@ -49,29 +50,10 @@ const { data: articles } = await useAsyncData('posts-list', () => queryContent('
);
</script>
<script>
<script lang="ts">
export default {
head: {
title: "Juls07",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ name: "google", content: "notranslate" },
{
hid: "description",
name: "description",
content: "Juls07 is a game developer, web developer and pixel artist.",
},
{ property: "og:type", content: "website" },
{ property: "og:image", content: "/og.png" },
{ property: "og:title", content: "Juls07" },
{ property: "og:description", content: "Juls07's website" },
{ property: "og:url", content: "https://juls07.dev" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
},
};
title: 'Juls07'
}
}
</script>

4
pages/index.vue
View File

@@ -6,7 +6,7 @@
class="p-6 bg-[#12121233] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full backdrop-blur-md backdrop-saturate-[1.15]">
<div
class="sm:h-32 sm:!col-start-2 sm:col-span-8 md:col-span-6 lg:col-span-5 w-32 sm:w-fit max-h-full md:h-40 items-center grid grid-rows-1 grid-cols-1 sm:grid-cols-2 drop-shadow-md">
<img src="~/assets/pictues/juls07.png"
<img alt="juls07 profile picture" src="~/assets/pictues/juls07.png"
class="h-32 md:h-40 max-h-full rounded-full mb-3 sm:mb-0 sm:mr-2" />
<div class="grid grid-rows-5 grid-cols-1 h-fit">
<h1 class="text-4xl md:text-5xl row-span-3 font-jetbrains">Juls07</h1>
@@ -21,7 +21,7 @@
<h2 class="md:text-4xl text-3xl mb-1">About me</h2>
<hr class="border-2 border-[#EB0066] rounded-md w-7/12 min-w-[200px] max-w-xs lg:max-w-sm mb-1" />
<p class="max-w-md sm:max-w-xl md:max-w-3xl lg:max-w-4xl mb-4">
Hi there, I'm juls07, I am 14 years old and I <span tabindex="1"
Hi there, I'm juls07, I am 14 years old and I <span tabindex="0"
class="love">love</span> web
development. I first dabbled in web development
when I was ten, and here we are today! I mainly use