diff --git a/README.md b/README.md index b6f3370..94848ed 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ ### Writings Add a new `.md` file in `/content/writings/` and follow the same pattern as the other articles. Add images -in `/public/images/writings/`. +in `/public/writings/`. ### Uses diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue index fb81217..e25a720 100644 --- a/app/components/AppFooter.vue +++ b/app/components/AppFooter.vue @@ -34,7 +34,7 @@ const socials = [

Find me on:

-
+
+import type { PropType } from 'vue' + +defineProps({ + href: { + type: String, + default: '' + }, + target: { + type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>, + default: undefined, + required: false + } +}) + + + diff --git a/app/components/content/ProseH2.vue b/app/components/content/ProseH2.vue index 3fe8c07..cd2732a 100644 --- a/app/components/content/ProseH2.vue +++ b/app/components/content/ProseH2.vue @@ -5,7 +5,7 @@ diff --git a/app/components/content/ProseH3.vue b/app/components/content/ProseH3.vue index 0fc4c24..db8fd0d 100644 --- a/app/components/content/ProseH3.vue +++ b/app/components/content/ProseH3.vue @@ -1,5 +1,23 @@ + + diff --git a/app/components/content/Quote.vue b/app/components/content/Quote.vue index b91ebbd..1c9f1f4 100644 --- a/app/components/content/Quote.vue +++ b/app/components/content/Quote.vue @@ -11,7 +11,7 @@
-

+

Hello everyone! Thanks for visiting my portfolio. Please leave whatever you like to say, such as suggestions, appreciations, questions or anything!

diff --git a/app/pages/writings/[slug].vue b/app/pages/writings/[slug].vue index 0a7b8d2..2e38876 100644 --- a/app/pages/writings/[slug].vue +++ b/app/pages/writings/[slug].vue @@ -65,7 +65,7 @@ async function handleLike() {

{{ getDetails() }}

-
+

.prose h2 a, -.prose h3 a { +.prose h3 a, +.prose h4 a { @apply no-underline; } diff --git a/content/writings/how-does-my-website-work.md b/content/writings/how-does-my-website-work.md deleted file mode 100644 index 30e3111..0000000 --- a/content/writings/how-does-my-website-work.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -slug: how-does-my-website-work -title: How does my website work? -description: My new website is using a fantastical stack and I am explaining how my playground works -publishedAt: 2024/06/21 -readingTime: 7 ---- - -## Ideas and Goals - -### A playground for ideas - -Testing frameworks (new nuxt 3), improving css style, discovering new technologies and frameworks - -### Fast - -Faster than the old one thanks to the new version of Nuxt - -## FrontEnd & BackEnd with Nuxt 3 - -### Nuxt3 & NuxtUI, Tailwind - -### Database & Deployment - -NuxtHub & Cloudflare workers - -### Editing - -Nuxt Studio - -## How much everything costs - -0 thanks to nuxt free plan and cloudflare free plan - -## What's next - -### Performance - -### Style & Animation diff --git a/content/writings/how-my-website-works.md b/content/writings/how-my-website-works.md new file mode 100644 index 0000000..4c83002 --- /dev/null +++ b/content/writings/how-my-website-works.md @@ -0,0 +1,146 @@ +--- +slug: how-my-website-works +title: How my website works? +description: My new website is using a fantastical stack and I am explaining how my playground works +publishedAt: 2024/06/21 +readingTime: 5 +--- + +My personal website is an over-engineered playground where I tinker, explore new technologies, experiment with tools, +break conventional rules, and satisfy my deep curiosity about web software. + +While it's still fresh in my mind, I wanted to document how this version of the site works, the tools I used to build +it, and the challenges I overcame to bring it to its current state. + +![Website](/writings/website.png) + +## Ideas and Goals + +Most of the time, I work on my site for fun and without any profit motive. However, while building this latest version, +I managed to keep a few key ideas and goals in mind: + +### Reduce writing friction + +This new version of my website was built with the idea that I should be able to add, edit, and delete content directly +from the front-end. This means that everything needs to be backed by a database or CMS, which quickly adds complexity. +But at the end of the day, adding a bookmark should be a matter of pasting a URL and clicking save. Writing a blog post +should be a matter of typing some markdown and clicking publish. + +Extra friction on these processes would make me less likely to keep things up to date or share new things. + +### A playground for ideas + +I want my website to be a playground where I can safely experiment with new technologies and packages, including testing +frameworks (like the new Nuxt 3 stack), improving CSS styles with Tailwind, and discovering new technologies and +frameworks, in a way that allows for easy isolation and deletion. This requirement made Nuxt.js an obvious choice, +thanks to its support for hybrid page rendering strategies—static, server-rendered, or client-rendered. More on this +below. + +### Fast + +The new version of my website is faster than the old one, thanks to the latest version of Nuxt. This improvement +enhances the overall user experience and ensures that the site remains responsive and efficient. + +## FrontEnd & BackEnd with Nuxt 3 + +I wanted this version of my site to reflect my personality, especially because it seemed like a fun project! What would +a 'personal application' look like, showcasing everything I've created? I aimed for a clean, monochrome design with +plenty of 'Easter eggs' to keep things interesting. + +### Nuxt 3 + +Nuxt.js is my front-end framework of choice. I particularly appreciate it for its comprehensive and complementary Vue +and Nuxt ecosystem. The filesystem-based router provides an intuitive and powerful abstraction for building the route +hierarchy. Nuxt.js also benefits from a large community that has thoroughly tested the framework, addressing edge cases +and developing creative solutions for common Vue, data recovery, and performance issues. Whenever I encounter a problem, +I turn to the Nuxt.js discussions on [GitHub](https://github.com/nuxt) or +their [Discord server](https://go.nuxt.com/discord). Almost every time, I find that others have already come up with +innovative solutions to similar challenges. + +Nuxt.js is also fast. It optimizes performance by speeding up local builds, automatically compressing static assets, and +ensuring quick deployment times. The regular project updates mean my site continually gets faster over time—at no extra +cost! + +### Styling + +#### Tailwind CSS + +Tailwind is my favorite CSS authoring tool... ever. It's incredibly effective. I often see debates on Twitter about +whether Tailwind is the best or worst thing ever, and I prefer not to engage in that discussion. Here's my take: + +Tailwind is a toolkit that makes everything great by default and fast. The magic lies in its token system and the +default values built into the framework. Once I grasped the semantics of Tailwind, I was able to style my tags at the +speed of thought. + +Tailwind provides everything I need out of the box, but I've gradually added a bit of custom CSS to make things more +unique. + +#### Nuxt UI + +Nuxt UI is a new tool I've been using since its release to enhance and streamline my Nuxt projects. It’s a module that +offers a collection of Vue components and composables built with Tailwind CSS and Headless UI, designed to help you +create beautiful and accessible user interfaces. + +Nuxt UI aims to provide everything you need for the UI when building a Nuxt app, including components, icons, colors, +dark mode, and keyboard shortcuts. It's an excellent tool for both beginners and experienced developers. + +### Database & Deployment + +#### NuxtHub & Cloudflare workers + +NuxtHub is an innovative deployment and management platform tailored for Nuxt, leveraging the power of Cloudflare. +Deploy your application effortlessly with database, key-value, and blob storage—all configured seamlessly within your +Cloudflare account. + +NuxtHub enables cost-effective hosting of high-performance Nuxt applications across multiple environments. It simplifies +the process of launching your app swiftly, eliminating concerns about server setup or complex deployment pipelines with +just a single command. + +#### Drizzle + +Drizzle is a unique ORM that offers both relational and SQL-like query APIs, combining the best of both worlds for +accessing relational data. Lightweight, performant, typesafe, and designed to be serverless-ready, Drizzle is also +flexible and gluten-free—delivering a sober and seamless experience. + +Drizzle isn't just a library; it's an exceptional journey 🤩. It empowers you to build your project without imposing on +your structure or workflow. With Drizzle, you can define and manage database schemas in TypeScript, access your data +using SQL-like or relational methods, and utilize optional tools to enhance your development experience significantly. + +One word : `If you know SQL — you know Drizzle.` + +### Writing + +#### Nuxt Studio + +Nuxt Studio introduces a fresh editing experience for your Nuxt Content website, providing limitless customization and a +user-friendly interface. Edit your website effortlessly with our editor reminiscent of Notion, fostering seamless +collaboration between developers and copywriters. It offers a rich text editor, markdown support, and a live preview, +enabling you to create and edit content with ease. + +#### Markdown + +I've abandoned using rich text editors on the web. They're overly complex, each with its own intricate abstractions for +blocks and elements. To avoid another major rewrite in the near future, I've sought the simplest, most straightforward +solution for publishing content on my site: plain text. + +The article you're currently reading is plain text stored in MySQL, rendered using vue-markdown. You can view my custom +element renderings here. I enhance my Markdown capabilities by employing plugins like remark-gfm, which adds support for +tables, strikethroughs, footnotes, and other features. + +Compromises are inevitable! I've chosen to sacrifice some features for simplicity and speed. I'm content with my +decision, as it aligns with my goal of reducing friction in the writing process. + +## How much everything costs + +I'm often asked how much it costs to run my website. Here's a breakdown of the costs: + +- NuxtHub: 0€ +- Cloudflare Workers: 0€ +- Nuxt Studio: 0€ + Total: 0€ thanks to nuxt free plan and cloudflare free plan + +## Thanks + +I want to thank the Nuxt team for their hard work and dedication to the project. I also want to thank the community for +their support and for providing me with the tools I needed to build this site. I want to add a special thanks +to [Estéban](https://x.com/soubiran_) for solving `All` my problems and for inspiring me rewriting my website. \ No newline at end of file diff --git a/public/writings/website.png b/public/writings/website.png new file mode 100644 index 0000000..51302da Binary files /dev/null and b/public/writings/website.png differ