├── .editorconfig ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ ├── nightly.yaml │ └── publish-and-release.yml ├── .gitignore ├── .netlify └── state.json ├── .npmrc ├── CHANGELOG.md ├── README.md ├── astro.config.ts ├── biome.json ├── db ├── config.ts └── seed.ts ├── package.json ├── pnpm-lock.yaml ├── public ├── assets │ └── img │ │ ├── elian.jpg │ │ └── social.jpg ├── browserconfig.xml ├── favicon.ico ├── fonts │ ├── dm-serif.ttf │ ├── outfit.ttf │ ├── poppins.ttf │ ├── righteous.ttf │ └── sanchez.ttf ├── humans.txt ├── icons │ ├── android-icon-144x144.png │ ├── android-icon-192x192.png │ ├── android-icon-36x36.png │ ├── android-icon-48x48.png │ ├── android-icon-72x72.png │ ├── android-icon-96x96.png │ ├── apple-icon-114x114.png │ ├── apple-icon-120x120.png │ ├── apple-icon-144x144.png │ ├── apple-icon-152x152.png │ ├── apple-icon-180x180.png │ ├── apple-icon-57x57.png │ ├── apple-icon-60x60.png │ ├── apple-icon-72x72.png │ ├── apple-icon-76x76.png │ ├── apple-icon-precomposed.png │ ├── apple-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── ms-icon-144x144.png │ ├── ms-icon-150x150.png │ ├── ms-icon-310x310.png │ └── ms-icon-70x70.png ├── manifest.json └── robots.txt ├── renovate.json ├── src ├── assets │ ├── blog │ │ ├── 21-02-03 │ │ │ └── nuxt.jpg │ │ ├── 21-02-09 │ │ │ └── tailwind.jpeg │ │ ├── 23-04-12 │ │ │ └── maintainer.jpg │ │ ├── 23-08-07 │ │ │ ├── astro-meetup.jpg │ │ │ ├── astro-three.jpg │ │ │ ├── jsworld.jpg │ │ │ └── vbridge-team.jpeg │ │ └── backlog │ │ │ ├── astro_old.png │ │ │ ├── brutal.png │ │ │ ├── bun.png │ │ │ ├── coil.png │ │ │ ├── firebase.png │ │ │ ├── fsghentastro.jpeg │ │ │ ├── github.png │ │ │ ├── gitmoji.webp │ │ │ ├── graduation.jpeg │ │ │ ├── houdini.webp │ │ │ ├── jsworld.jpeg │ │ │ ├── konva.png │ │ │ ├── netlify.png │ │ │ ├── reactbrussels.jpeg │ │ │ ├── seo.png │ │ │ ├── surge.png │ │ │ └── valet.png │ ├── elian.jpg │ └── events │ │ ├── bejs.webp │ │ ├── cityjs-berlin.jpeg │ │ ├── codeandcoffee.jpeg │ │ ├── editxsdworx.jpeg │ │ ├── fsghent.jpg │ │ ├── fsghent2.jpg │ │ ├── jsworld.jpeg │ │ ├── lille.jpg │ │ ├── marcbackes.jpeg │ │ ├── qwikparis.jpeg │ │ ├── react-bxl.jpg │ │ ├── reactbrussels.jpg │ │ ├── reactonlinesummit.jpg │ │ └── uniform.png ├── components │ ├── blog │ │ ├── BlogContent.astro │ │ ├── BlogList.astro │ │ ├── BlogSideBar.astro │ │ └── BlogSummaryCard.astro │ ├── errors │ │ └── 404.astro │ ├── events │ │ └── EventSummaryCard.astro │ ├── generic │ │ ├── RecentBlogPosts.astro │ │ └── SummaryCard.astro │ ├── home │ │ ├── AboutMe.astro │ │ ├── Description.astro │ │ └── MobileSocials.astro │ └── layout │ │ ├── BaseFooter.astro │ │ ├── BaseHead.astro │ │ ├── BaseNavigation.astro │ │ ├── LocalFont.astro │ │ └── MobileNavigation.astro ├── content │ ├── blog │ │ ├── 21-02-03-building-website-in-nuxt.md │ │ ├── 21-02-09-adding-dark-mode-tailwind.md │ │ ├── 21-02-12-using-valet-for-local-development.md │ │ ├── 21-02-16-using-tailwind-with-sass-preprocessor.md │ │ ├── 21-02-20-pairing-react-native-with-tailwindcss.md │ │ ├── 21-03-11-using-konvajs-as-canvas-with-react.md │ │ ├── 21-03-12-adding-a-custom-preloader-to-your-nuxt-site.md │ │ ├── 21-03-12-configure-tailwindcss-with-blazor.md │ │ ├── 21-03-15-adding-tracking-with-GA4-to-nuxt.md │ │ ├── 21-03-16-what-is-tailwindcss-jit-and-how-to-use-it.md │ │ ├── 21-03-18-add-tailwind-jit-to-your-nuxtjs-site.md │ │ ├── 21-03-22-deploying-my-website-to-netlify-with-github.md │ │ ├── 21-03-26-using-tailwindcss-with-sveltekit.md │ │ ├── 21-03-29-monitize-your-content-using-coil.md │ │ ├── 21-03-31-deploying-a-react-native-app-to-netlify.md │ │ ├── 21-04-05-add-custom-tracking-events-to-your-nuxt-site-with-GA4.md │ │ ├── 21-04-05-what-does-tailwindcss-2-1-improve.md │ │ ├── 21-04-13-writing-your-own-components-with-tailwind-sass.md │ │ ├── 21-05-07-adding-google-fonts-to-your-nuxtjs-site.md │ │ ├── 21-08-11-moving-on-from-netlify-using-google-cloud.md │ │ ├── 21-08-14-using-surge-to-quickly-deploy-a-static-site.md │ │ ├── 21-08-20-describe-your-commits-using-gitmoji.md │ │ ├── 21-08-26-adding-your-blogposts-to-your-github-readme.md │ │ ├── 21-09-01-setting-up-nuxt-with-pug-and-stylus.md │ │ ├── 21-09-25-using-slots-to-build-layouts-in-astro.md │ │ ├── 21-09-27-using-pnpm-on-netlify.md │ │ ├── 21-10-03-what-is-new-in-tailwind-v3.md │ │ ├── 21-10-04-use-api-magic-to-show-most-visited-pages.md │ │ ├── 21-10-13-adding-css-houdini.md │ │ ├── 21-12-03-set-your-node-version-in-netlify.md │ │ ├── 21-12-05-use-tailwindcss-with-sveltekit-2021.md │ │ ├── 21-12-10-how-i-automated-seo-to-fit-my-needs.md │ │ ├── 21-12-16-using-tailwind-cli-with-blazor.md │ │ ├── 22-04-21-less-javascript-faster-website.md │ │ ├── 22-04-23-use-tailwind-with-astro.md │ │ ├── 22-04-26-upgrading-to-astro-beta-one.md │ │ ├── 22-05-02-using-mostvisitedpages-as-a-function.md │ │ ├── 22-05-06-deploying-astro-on-deno.md │ │ ├── 22-07-06-using-bun-as-javascript-runtime.md │ │ ├── 22-08-10-deploy-firebase-using-github-actions.md │ │ ├── 22-08-11-deploying-firebase-with-cloudbuild.md │ │ ├── 22-08-17-using-firebase-json-for-redirects.md │ │ ├── 22-10-14-less-javascript-faster-website.md │ │ ├── 22-11-09-optimizing-react-with-astro.md │ │ ├── 22-12-30-2022-a-year-in-recap.md │ │ ├── 23-02-11-implementing-unocss-in-astro.md │ │ ├── 23-02-15-i-started-from-scratch.md │ │ ├── 23-02-19-building-blog-tag-index-pages-in-astro.md │ │ ├── 23-02-21-am-i-an-international-public-speaker-now.md │ │ ├── 23-03-01-publishing-brutal-theme.md │ │ ├── 23-04-12-becoming-an-astro-maintainer.md │ │ ├── 23-08-07-leaving-vbridge.md │ │ ├── 24-02-08-elians-astro-startkit.md │ │ ├── 24-03-09-pandacss-startkit.md │ │ ├── 24-03-15-how-i-keep-up-to-date.md │ │ ├── 24-04-30-astro-solidjs-devtools.md │ │ └── images │ │ │ ├── pandacss-startkit.jpeg │ │ │ ├── solid-devtools.jpeg │ │ │ ├── startkit.jpeg │ │ │ └── up-to-date.jpeg │ ├── config.ts │ └── events │ │ ├── 22-04-20-fsghent.md │ │ ├── 22-09-14-fsghent.md │ │ ├── 22-10-14-react-brussels.md │ │ ├── 22-11-09-react-summit.md │ │ ├── 23-02-08-jsworld.md │ │ ├── 23-02-26-front-end.md │ │ ├── 23-03-23-uniform-livestream.md │ │ ├── 23-04-13-content-collections.md │ │ ├── 23-04-18-react-global-summit.md │ │ ├── 23-04-19-coffee-and-code.md │ │ ├── 23-05-12-bejs.md │ │ ├── 23-09-13-qwik-paris.md │ │ ├── 23-09-26-bejs-on-tour.md │ │ ├── 23-10-13-react-brussels.md │ │ ├── 23-11-03-cityjs-berlin.md │ │ └── _23-09-26-beqwik.md ├── env.d.ts ├── layouts │ ├── BlogPost.astro │ └── Default.astro ├── pages │ ├── 404.astro │ ├── blog.xml.js │ ├── blog │ │ ├── [slug].astro │ │ ├── index.astro │ │ └── tags │ │ │ └── [tag].astro │ ├── events.astro │ ├── index.astro │ └── v1 │ │ └── generate │ │ └── og │ │ ├── [slug].png.ts │ │ └── default.png.ts └── types │ └── Social.ts ├── tsconfig.json ├── uno.config.ts └── vercel.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | 7 | [*.{astro,ts,js,cjs,mjs,json,vue}] 8 | tab_width = 2 9 | indent_style = tab 10 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: ElianCodes 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help improve the ElianCodes website 4 | title: "" 5 | labels: bug 6 | assignees: ElianCodes 7 | --- 8 | 9 | **Describe the bug** 10 | 11 | 12 | 13 | **Minimal example** 14 | Link to minimal example: 15 | 16 | **Expected behavior** 17 | A clear and concise description of what you expected to happen. 18 | 19 | **Screenshots** 20 | 21 | If applicable, add screenshots to help explain your problem. 22 | 23 | **Additional context** 24 | 25 | Add any other context about the problem here. 26 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea or improvement 4 | title: "" 5 | labels: enhancement 6 | assignees: ElianCodes 7 | --- 8 | 9 | **Is your feature request related to a problem? Please describe.** 10 | 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | 15 | A clear and concise description of what you want to happen. 16 | 17 | **Additional context** 18 | 19 | Add any other context or screenshots about the feature request here. 20 | -------------------------------------------------------------------------------- /.github/workflows/nightly.yaml: -------------------------------------------------------------------------------- 1 | name: nightly 2 | 3 | on: 4 | schedule: 5 | - cron: "0 0 * * *" 6 | 7 | jobs: 8 | upgrade: 9 | runs-on: ubuntu-latest 10 | env: 11 | NODE_OPTIONS: "--max_old_space_size=4096" 12 | steps: 13 | - name: Checkout 14 | uses: actions/checkout@v3 15 | 16 | - name: Setup pnpm 17 | uses: pnpm/action-setup@v2 18 | with: 19 | version: 8 20 | 21 | - name: Setup Node 22 | uses: actions/setup-node@v3 23 | with: 24 | node-version: 18 25 | cache: pnpm 26 | 27 | - name: Install dependencies 28 | run: pnpm install 29 | 30 | - name: Upgrade Astro 31 | run: pnpm dlx @astrojs/upgrade --yes 32 | 33 | - name: PR Changes 34 | uses: peter-evans/create-pull-request@v4 35 | with: 36 | branch: ci/update-astro 37 | commit-message: "chore: ci: update Astro" 38 | assignees: eliancodes 39 | title: "chore: ci: update Astro" 40 | body: Update Astro and packages to latest version 41 | labels: ci 42 | -------------------------------------------------------------------------------- /.github/workflows/publish-and-release.yml: -------------------------------------------------------------------------------- 1 | name: Release Workflow 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | bump: 10 | name: Release & Bump version 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - name: Checkout code 15 | uses: actions/checkout@v3 16 | with: 17 | token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} 18 | 19 | - name: Bump version and create changelog 20 | if: "!startsWith(github.event.head_commit.message, 'chore(release)')" 21 | run: | 22 | git config --local user.name "ElianCodes" 23 | git config --local user.email "hello@elian.codes" 24 | npx standard-version -a 25 | 26 | - name: Push changes and tags 27 | run: | 28 | CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD) 29 | remote_repo="https://${GITHUB_ACTOR}:${{ secrets.PERSONAL_ACCESS_TOKEN }}@github.com/${GITHUB_REPOSITORY}.git" 30 | git pull $remote_repo $CURRENT_BRANCH 31 | git push $remote_repo HEAD:$CURRENT_BRANCH --follow-tags --tags 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist 3 | .firebase/ 4 | .firebaserc 5 | 6 | # dependencies 7 | node_modules/ 8 | .snowpack/ 9 | 10 | # logs 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # environment variables 16 | .env 17 | .env.production 18 | 19 | # macOS-specific files 20 | .DS_Store 21 | 22 | firebase-debug.log 23 | 24 | .vscode/ 25 | /.vercel 26 | /.astro 27 | /playwright-report 28 | -------------------------------------------------------------------------------- /.netlify/state.json: -------------------------------------------------------------------------------- 1 | { 2 | "siteId": "3355ebe2-a34f-43f8-a736-6e500f47fa72" 3 | } -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | ## force pnpm to hoist 2 | shamefully-hoist = true -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # The ElianCodes site 2 | 3 | The full sourcecode for my personal website. 4 | 5 | ## Current technologies 6 | 7 | (currently) written in [Astro](https://astro.build) and [UnoCSS](https://unocss.dev), deployed to [Vercel](https://vercel.com). 8 | 9 | ### Previous technologies 10 | 11 | This website is a representation of technologies I'm playing with. Here is a list of technologies that have powered this site before: 12 | 13 | - [Nuxt](https://nuxtjs.org) 14 | - [Vue](https://vuejs.org) 15 | - [TypeScript](https://www.typescript-lang.com) 16 | - [TailwindCSS](https://tailwindcss.com) 17 | - [UnoCSS](https://unocss.dev) 18 | - [Firebase functions](https://firebase.google.com/docs/functions) 19 | 20 | ## Deployment and Hosting 21 | 22 | At the moment, this website is hosted on Vercel. The DNS is controlled by [CloudFlare](https://www.cloudflare.com). 23 | 24 | The website was previously hosted on [Google Cloud Storage](https://cloud.google.com/storage) as a static folder in a public bucket. Then I transitioned to Firebase, since it was easier to manage, cheaper and you get some handy features like preview deploys and such. 25 | 26 | Currently, it's deployed as a static Vercel website using the [Astro Vercel adapter](https://docs.astro.build/en/guides/integrations-guide/vercel/). Vercel offers some features I love, like analytics, web vitals info, feature and preview deploys. 27 | 28 | ## Development setup 29 | 30 | To install and manage dependencies, I use [PNPM](https://pnpm.io/). 31 | 32 | ```bash 33 | # for development 34 | pnpm dev 35 | 36 | # for local preview 37 | pnpm build && pnpm preview 38 | ``` 39 | 40 | ## Technologies and packages 41 | 42 | The base of the website uses [Astro](https://astro.build) to generate and build the (static) site. 43 | 44 | ### Frontend 45 | 46 | At the moment, the UI of the website is built and generated using [Astro](https://astro.build). [Astro](https://astro.build) is an amazing technology to generate static sites (but also supports SSR). If you want to know more about it, feel free to read [their documentation](https://docs.astro.build/getting-started). 47 | 48 | #### Components 49 | 50 | Most of my templates are written in pure Astro, since I don't need to much interactivity. Components that do require interactivity, are written in vanilla JS. 51 | 52 | #### UnoCSS 53 | 54 | To define the style of the website, [UnoCSS](https://unocss.dev), with some presets are used. [You can read more about my transition and use here.](https://www.elian.codes/blog/23-02-11-implementing-unocss-in-astro) 55 | -------------------------------------------------------------------------------- /astro.config.ts: -------------------------------------------------------------------------------- 1 | import sitemap from "@astrojs/sitemap"; 2 | import vercel from "@astrojs/vercel/serverless"; 3 | import { defineConfig } from "astro/config"; 4 | import UnoCSS from "unocss/astro"; 5 | import db from "@astrojs/db"; 6 | import webVitals from "@astrojs/web-vitals"; 7 | 8 | // https://astro.build/config 9 | export default defineConfig({ 10 | site: 11 | process.env.VERCEL_ENV === "production" 12 | ? "https://www.elian.codes/" 13 | : process.env.VERCEL_URL 14 | ? `https://${process.env.VERCEL_URL}/` 15 | : "https://localhost:3000/", 16 | trailingSlash: "ignore", 17 | integrations: [ 18 | sitemap(), 19 | UnoCSS({ 20 | injectReset: true, 21 | }), 22 | db(), 23 | webVitals(), 24 | ], 25 | output: "hybrid", 26 | adapter: vercel({ 27 | webAnalytics: { 28 | enabled: true, 29 | }, 30 | }), 31 | vite: { 32 | optimizeDeps: { 33 | exclude: ["@resvg/resvg-js"], 34 | }, 35 | }, 36 | }); 37 | -------------------------------------------------------------------------------- /biome.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json", 3 | "organizeImports": { 4 | "enabled": true 5 | }, 6 | "linter": { 7 | "enabled": true, 8 | "rules": { 9 | "recommended": true 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /db/config.ts: -------------------------------------------------------------------------------- 1 | import { defineDb } from 'astro:db'; 2 | 3 | // https://astro.build/db/config 4 | export default defineDb({ 5 | tables: {} 6 | }); 7 | -------------------------------------------------------------------------------- /db/seed.ts: -------------------------------------------------------------------------------- 1 | import { db } from 'astro:db'; 2 | 3 | // https://astro.build/db/seed 4 | export default async function seed() { 5 | // TODO 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eliancodes-frontend", 3 | "version": "0.9.72", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "astro dev", 8 | "build": "astro check && astro build --remote", 9 | "preview": "astro preview", 10 | "format": "biome format ./src --write", 11 | "lint": "biome lint ./src", 12 | "check": "biome check --apply ./src", 13 | "astro": "astro" 14 | }, 15 | "dependencies": { 16 | "@astrojs/check": "^0.8.1", 17 | "@astrojs/db": "^0.14.0", 18 | "@astrojs/rss": "^4.0.7", 19 | "@astrojs/sitemap": "^3.1.6", 20 | "@astrojs/vercel": "^7.7.2", 21 | "@astrojs/web-vitals": "^0.2.1", 22 | "@eliancodes/brutal-ui": "^0.2.6", 23 | "@resvg/resvg-js": "^2.6.2", 24 | "@unocss/astro": "^66.0.0", 25 | "astro": "^4.11.5", 26 | "astro-font": "^0.0.80", 27 | "typescript": "^5.4.5", 28 | "unocss": "^66.0.0" 29 | }, 30 | "devDependencies": { 31 | "@biomejs/biome": "1.7.1", 32 | "@iconify-json/logos": "^1.1.42", 33 | "@iconify-json/uil": "^1.1.8", 34 | "@unocss/reset": "^66.0.0", 35 | "satori": "^0.7.4", 36 | "satori-html": "^0.3.2" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/assets/img/elian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/assets/img/elian.jpg -------------------------------------------------------------------------------- /public/assets/img/social.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/assets/img/social.jpg -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/favicon.ico -------------------------------------------------------------------------------- /public/fonts/dm-serif.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/fonts/dm-serif.ttf -------------------------------------------------------------------------------- /public/fonts/outfit.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/fonts/outfit.ttf -------------------------------------------------------------------------------- /public/fonts/poppins.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/fonts/poppins.ttf -------------------------------------------------------------------------------- /public/fonts/righteous.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/fonts/righteous.ttf -------------------------------------------------------------------------------- /public/fonts/sanchez.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/fonts/sanchez.ttf -------------------------------------------------------------------------------- /public/humans.txt: -------------------------------------------------------------------------------- 1 | ## Elian.codes ## 2 | 3 | All development & Content by Elian Van Cutsem 4 | 5 | - email: hello@elian.codes 6 | - website: www.elian.codes -------------------------------------------------------------------------------- /public/icons/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/android-icon-144x144.png -------------------------------------------------------------------------------- /public/icons/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/android-icon-192x192.png -------------------------------------------------------------------------------- /public/icons/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/android-icon-36x36.png -------------------------------------------------------------------------------- /public/icons/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/android-icon-48x48.png -------------------------------------------------------------------------------- /public/icons/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/android-icon-72x72.png -------------------------------------------------------------------------------- /public/icons/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/android-icon-96x96.png -------------------------------------------------------------------------------- /public/icons/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/apple-icon-114x114.png -------------------------------------------------------------------------------- /public/icons/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/apple-icon-120x120.png -------------------------------------------------------------------------------- /public/icons/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/apple-icon-144x144.png -------------------------------------------------------------------------------- /public/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /public/icons/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/apple-icon-180x180.png -------------------------------------------------------------------------------- /public/icons/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/apple-icon-57x57.png -------------------------------------------------------------------------------- /public/icons/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/apple-icon-60x60.png -------------------------------------------------------------------------------- /public/icons/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/apple-icon-72x72.png -------------------------------------------------------------------------------- /public/icons/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/apple-icon-76x76.png -------------------------------------------------------------------------------- /public/icons/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/apple-icon-precomposed.png -------------------------------------------------------------------------------- /public/icons/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/apple-icon.png -------------------------------------------------------------------------------- /public/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/favicon-16x16.png -------------------------------------------------------------------------------- /public/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/favicon-32x32.png -------------------------------------------------------------------------------- /public/icons/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/favicon-96x96.png -------------------------------------------------------------------------------- /public/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /public/icons/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/ms-icon-150x150.png -------------------------------------------------------------------------------- /public/icons/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/ms-icon-310x310.png -------------------------------------------------------------------------------- /public/icons/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/public/icons/ms-icon-70x70.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Elian Van Cutsem", 3 | "icons": [ 4 | { 5 | "src": "/icons/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "/icons/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "/icons/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "/icons/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "/icons/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "/icons/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | Host: https://www.elian.codes/ 4 | Sitemap: https://www.elian.codes/sitemap-index.xml -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:recommended" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/blog/21-02-03/nuxt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/21-02-03/nuxt.jpg -------------------------------------------------------------------------------- /src/assets/blog/21-02-09/tailwind.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/21-02-09/tailwind.jpeg -------------------------------------------------------------------------------- /src/assets/blog/23-04-12/maintainer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/23-04-12/maintainer.jpg -------------------------------------------------------------------------------- /src/assets/blog/23-08-07/astro-meetup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/23-08-07/astro-meetup.jpg -------------------------------------------------------------------------------- /src/assets/blog/23-08-07/astro-three.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/23-08-07/astro-three.jpg -------------------------------------------------------------------------------- /src/assets/blog/23-08-07/jsworld.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/23-08-07/jsworld.jpg -------------------------------------------------------------------------------- /src/assets/blog/23-08-07/vbridge-team.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/23-08-07/vbridge-team.jpeg -------------------------------------------------------------------------------- /src/assets/blog/backlog/astro_old.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/astro_old.png -------------------------------------------------------------------------------- /src/assets/blog/backlog/brutal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/brutal.png -------------------------------------------------------------------------------- /src/assets/blog/backlog/bun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/bun.png -------------------------------------------------------------------------------- /src/assets/blog/backlog/coil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/coil.png -------------------------------------------------------------------------------- /src/assets/blog/backlog/firebase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/firebase.png -------------------------------------------------------------------------------- /src/assets/blog/backlog/fsghentastro.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/fsghentastro.jpeg -------------------------------------------------------------------------------- /src/assets/blog/backlog/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/github.png -------------------------------------------------------------------------------- /src/assets/blog/backlog/gitmoji.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/gitmoji.webp -------------------------------------------------------------------------------- /src/assets/blog/backlog/graduation.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/graduation.jpeg -------------------------------------------------------------------------------- /src/assets/blog/backlog/houdini.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/houdini.webp -------------------------------------------------------------------------------- /src/assets/blog/backlog/jsworld.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/jsworld.jpeg -------------------------------------------------------------------------------- /src/assets/blog/backlog/konva.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/konva.png -------------------------------------------------------------------------------- /src/assets/blog/backlog/netlify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/netlify.png -------------------------------------------------------------------------------- /src/assets/blog/backlog/reactbrussels.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/reactbrussels.jpeg -------------------------------------------------------------------------------- /src/assets/blog/backlog/seo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/seo.png -------------------------------------------------------------------------------- /src/assets/blog/backlog/surge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/surge.png -------------------------------------------------------------------------------- /src/assets/blog/backlog/valet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/blog/backlog/valet.png -------------------------------------------------------------------------------- /src/assets/elian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/elian.jpg -------------------------------------------------------------------------------- /src/assets/events/bejs.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/bejs.webp -------------------------------------------------------------------------------- /src/assets/events/cityjs-berlin.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/cityjs-berlin.jpeg -------------------------------------------------------------------------------- /src/assets/events/codeandcoffee.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/codeandcoffee.jpeg -------------------------------------------------------------------------------- /src/assets/events/editxsdworx.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/editxsdworx.jpeg -------------------------------------------------------------------------------- /src/assets/events/fsghent.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/fsghent.jpg -------------------------------------------------------------------------------- /src/assets/events/fsghent2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/fsghent2.jpg -------------------------------------------------------------------------------- /src/assets/events/jsworld.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/jsworld.jpeg -------------------------------------------------------------------------------- /src/assets/events/lille.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/lille.jpg -------------------------------------------------------------------------------- /src/assets/events/marcbackes.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/marcbackes.jpeg -------------------------------------------------------------------------------- /src/assets/events/qwikparis.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/qwikparis.jpeg -------------------------------------------------------------------------------- /src/assets/events/react-bxl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/react-bxl.jpg -------------------------------------------------------------------------------- /src/assets/events/reactbrussels.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/reactbrussels.jpg -------------------------------------------------------------------------------- /src/assets/events/reactonlinesummit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/reactonlinesummit.jpg -------------------------------------------------------------------------------- /src/assets/events/uniform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElianCodes/ElianCodes-frontend/7f00ffcea59b6f670b7973557ef140bda721526e/src/assets/events/uniform.png -------------------------------------------------------------------------------- /src/components/blog/BlogContent.astro: -------------------------------------------------------------------------------- 1 | --- 2 | export interface Props { 3 | // biome-ignore lint/suspicious/noExplicitAny: any type 4 | content: any; 5 | } 6 | 7 | const { content } = Astro.props; 8 | const daysAgo = (new Date(content.pubDate).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24); 9 | const oldPost = daysAgo <= -90; 10 | --- 11 | 12 |
13 | ← Back to blog 14 | { oldPost ? 15 | 16 | : 17 |

18 | Published on {content.pubDate} by {content.author} 19 |

20 | } 21 | 22 |

Written by {content.author}

23 | ← Back to blog 24 |
25 | -------------------------------------------------------------------------------- /src/components/blog/BlogList.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { CollectionEntry } from "astro:content"; 3 | 4 | import BlogSummaryCard from "./BlogSummaryCard.astro"; 5 | 6 | export interface Props { 7 | posts: CollectionEntry<"blog">[]; 8 | } 9 | 10 | const { posts } = Astro.props; 11 | --- 12 | 13 | 24 | -------------------------------------------------------------------------------- /src/components/blog/BlogSideBar.astro: -------------------------------------------------------------------------------- 1 | --- 2 | export interface Props { 3 | // biome-ignore lint/suspicious/noExplicitAny: any 4 | headings: any; 5 | } 6 | 7 | const { headings } = Astro.props; 8 | --- 9 | 10 | 31 | -------------------------------------------------------------------------------- /src/components/blog/BlogSummaryCard.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import SummaryCard from "@components/generic/SummaryCard.astro"; 3 | import { Button, Pill } from "@eliancodes/brutal-ui"; 4 | import type { CollectionEntry } from "astro:content"; 5 | 6 | export interface Props { 7 | post: CollectionEntry<"blog">; 8 | } 9 | 10 | const { post } = Astro.props; 11 | --- 12 | 13 | 19 |
20 | 21 |
22 | 23 | 48 | 49 | -------------------------------------------------------------------------------- /src/components/errors/404.astro: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 |
6 |

404

7 |

Page Not Found

8 |

9 | Sorry, we couldn't find the page you were looking for. 10 |

11 | ← Go Home 17 |
18 | -------------------------------------------------------------------------------- /src/components/events/EventSummaryCard.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import SummaryCard from "@components/generic/SummaryCard.astro"; 3 | import { Button } from "@eliancodes/brutal-ui"; 4 | import type { CollectionEntry } from "astro:content"; 5 | 6 | export interface Props { 7 | event: CollectionEntry<"events">; 8 | } 9 | 10 | const { event } = Astro.props; 11 | const { data } = event; 12 | --- 13 | 14 | 20 |

21 | {data.name} - { 27 | data.date.toLocaleDateString("en-BE", { 28 | year: "numeric", 29 | month: "long", 30 | day: "numeric", 31 | }) 32 | } 33 |

34 | 37 | 38 | -------------------------------------------------------------------------------- /src/components/generic/RecentBlogPosts.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import BlogList from "@components/blog/BlogList.astro"; 3 | import { Button, Card } from "@eliancodes/brutal-ui"; 4 | import { getCollection } from "astro:content"; 5 | 6 | export interface Props { 7 | count?: number; 8 | } 9 | 10 | const { count } = Astro.props; 11 | 12 | const posts = await getCollection("blog").then((collection) => { 13 | return collection 14 | .sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime()) 15 | .slice(0, count ?? 3); 16 | }); 17 | --- 18 | 19 |
20 | 21 |
22 |

23 | Recent Blogposts 24 |

25 | 28 |
29 | 30 |
31 |
32 | 33 | 34 |
35 | -------------------------------------------------------------------------------- /src/components/generic/SummaryCard.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { ImageMetadata } from "astro"; 3 | import { Image } from "astro:assets"; 4 | 5 | export interface Props { 6 | title: string; 7 | imgSrc: ImageMetadata; 8 | imgAlt: string; 9 | description: string; 10 | } 11 | 12 | const { title, imgAlt, description, imgSrc } = Astro.props; 13 | --- 14 | 15 | 27 | 28 |
31 |

{title}

32 |
33 | {imgAlt} 40 |
41 |

{description}

42 | 43 |
44 | -------------------------------------------------------------------------------- /src/components/home/AboutMe.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Button, Card } from "@eliancodes/brutal-ui"; 3 | import { Image } from "astro:assets"; 4 | 5 | import headshot from "../../assets/elian.jpg"; 6 | --- 7 | 8 |
9 | 10 |
11 | 12 |

13 | Core Team @Astro 18 |

19 |

20 | BeJS conferences & Podcast host 25 |

26 |

27 | devs.gent meetup organizer 32 |

33 |

34 | Located in Ghent, 🇧🇪 35 |

36 | 37 | 38 |
39 | Elian Van Cutsem 46 |
47 | -------------------------------------------------------------------------------- /src/components/home/Description.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Card, Pill } from "@eliancodes/brutal-ui"; 3 | import { Image } from "astro:assets"; 4 | 5 | const doing = [ 6 | { name: "Astro", url: "https://astro.build/" }, 7 | { name: "Nuxt", url: "https://nuxt.com/" }, 8 | { name: "Laravel", url: "https://laravel.com/" }, 9 | { name: "Tailwind", url: "https://tailwindcss.com/" }, 10 | { name: "Vue", url: "https://vuejs.org/" }, 11 | { name: "Vite", url: "https://vitejs.dev/" }, 12 | { name: "Biome", url: "https://biomejs.dev/"}, 13 | { name: "SolidJS", url: "https://solidjs.com"} 14 | ]; 15 | 16 | const sponsoring = [ 17 | { name: "Biome", url: "https://github.com/biomejs", img: 'https://avatars.githubusercontent.com/u/140182603?s=200&v=4' }, 18 | { name: "Evan You", url: "https://github.com/yyx990803", img: 'https://avatars.githubusercontent.com/u/499550?v=4' }, 19 | { name: "Anthony Fu", url: "https://github.com/antfu", img: 'https://avatars.githubusercontent.com/u/11247099?v=4' }, 20 | { name: "Vite", url: "https://github.com/vitejs", img: 'https://avatars.githubusercontent.com/u/65625612?s=200&v=4' }, 21 | { name: "Josh Goldberg", url: "https://github.com/JoshuaKGoldberg", img: 'https://avatars.githubusercontent.com/u/3335181?v=4' }, 22 | ] 23 | --- 24 | 25 |
26 |
27 | 28 |

29 | Currently sponsoring: 30 |

31 |
    32 | {sponsoring.map(sponsor => (
  • {sponsor.name}
    • ))} 33 |
34 | 35 | 36 |

37 | What's keeping me busy? 38 |

39 | 52 | 53 |
54 | 55 |

Who am I?

56 |

57 | Hi, I’m Elian, software engineer located in Belgium, currently working as 58 | DX-support at Astro. My love for the web was first sparked in 2018 when I decided to build a 63 | simple HTML page to display the photos I took at the time, there was no 64 | way back! Since then and there, I was completely in love with building on 65 | and for the web. I transitioned to a Wordpress drag-and-drop to then 66 | learning JavaScript and JAMStack development. 67 |

68 |

69 | Today, I'm mainly focussed on Full-Stack development with a love for 70 | front-end and JavaScript. 71 |

72 |

73 | I started out as a front-end engineering intern in 2020 at vBridge, where I also started getting into JavaScript frameworks. Next to 79 | engineering, I'm writing technical documentation & giving talks and workshops about Astro. 82 |

83 | 84 |
85 | -------------------------------------------------------------------------------- /src/components/home/MobileSocials.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { Social } from "../../types/Social"; 3 | 4 | const socials = [ 5 | { 6 | name: "GitHub", 7 | url: "https://github.com/eliancodes", 8 | icon: "i-uil-github", 9 | }, 10 | { 11 | name: "Twitter", 12 | url: "https://www.twitter.com/eliancodes", 13 | icon: "i-uil-twitter", 14 | }, 15 | { 16 | name: "LinkedIn", 17 | url: "https://www.linkedin.com/in/elianvancutsem", 18 | icon: "i-uil-linkedin", 19 | }, 20 | ] as Social[]; 21 | --- 22 | 23 |
24 | 25 | 36 |
37 | -------------------------------------------------------------------------------- /src/components/layout/BaseFooter.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const techs = [ 3 | { name: "Astro", link: "https://astro.build" }, 4 | { name: "Vue", link: "https://vuejs.org" }, 5 | { name: "UnoCSS", link: "https://uno.antfu.me" }, 6 | { name: "Vercel", link: "https://vercel.com" }, 7 | { name: "Playwright", link: "https://playwright.dev" }, 8 | ]; 9 | const tech = techs[Math.floor(Math.random() * techs.length)]; 10 | --- 11 | 12 | 20 | -------------------------------------------------------------------------------- /src/components/layout/BaseHead.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import LocalFont from "./LocalFont.astro"; 3 | import { ViewTransitions } from "astro:transitions"; 4 | export interface Props { 5 | title: string; 6 | description: string; 7 | socialImg?: URL; 8 | } 9 | 10 | const canonicalURL = new URL(Astro.url.pathname, Astro.site); 11 | 12 | if (Astro.props.socialImg === undefined) { 13 | Astro.props.socialImg = new URL("/v1/generate/og/default.png", Astro.url); 14 | } 15 | 16 | const { title, description, socialImg } = Astro.props; 17 | --- 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 101 | 107 | 113 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | Elian Codes | {title} 127 | 128 | 129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /src/components/layout/BaseNavigation.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import type { Social } from "../../types/Social"; 3 | 4 | import MobileNavigation from "./MobileNavigation.astro"; 5 | 6 | const navigationItems = [ 7 | { name: "Home", url: "/" }, 8 | { name: "Blog", url: "/blog/" }, 9 | { name: "Events", url: "/events/" }, 10 | ]; 11 | 12 | const socialIcons = [ 13 | { 14 | name: "GitHub", 15 | url: "https://www.elian.codes/github", 16 | icon: "i-uil-github", 17 | }, 18 | { 19 | name: "Twitter", 20 | url: "https://www.elian.codes/twitter", 21 | icon: "i-uil-twitter", 22 | }, 23 | { name: "RSS", url: "/blog.xml", icon: "i-uil-rss" }, 24 | ] as Social[]; 25 | 26 | export interface Props { 27 | pageTitle?: string; 28 | } 29 | 30 | const { pageTitle } = Astro.props; 31 | --- 32 | 33 |
34 | {pageTitle &&

{pageTitle}

} 35 | 36 |

ElianCodes

37 | 38 | 70 | 71 |
72 | -------------------------------------------------------------------------------- /src/components/layout/LocalFont.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { join } from "node:path"; 3 | import { AstroFont } from "astro-font"; 4 | 5 | const appDir = process.cwd(); 6 | const getFontPath = (name: string) => join(appDir, "public", "fonts", name); 7 | --- 8 | 9 | 77 | -------------------------------------------------------------------------------- /src/components/layout/MobileNavigation.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | items: { 4 | name: string; 5 | url: string; 6 | }[]; 7 | } 8 | 9 | const { items } = Astro.props; 10 | --- 11 | 12 | 61 | 62 | 81 | -------------------------------------------------------------------------------- /src/content/blog/21-02-03-building-website-in-nuxt.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🎉 Initial commit 3 | pubDate: 02/03/2021 18:11 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Nuxt 7 | - JavaScript 8 | - Blog 9 | imgUrl: "../../assets/blog/21-02-03/nuxt.jpg" 10 | description: This week I've recreated my website and blog with Nuxt and Bootstrap, in this post I describe how it all came together. 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Recreating my site in Nuxt and adding a blog 15 | 16 | So, next week I'm about to start my journey as a Full-stack software engineer at [vBridge](https://www.vbridge.eu). I'm so excited! The internship is part of my school program, a part of the internship is keeping a blog with your findings and thoughts, so I decided to build my own blog with [Nuxt](https://nuxtjs.org) instead of a regular WordPress or something else. Nuxt was on my 'want to learn' list for a while, so I was very excited to finally try out the framework. I'm a huge fan of [Vue](https://vuejs.org) so it didn't seem very hard to learn and implement Nuxt. I was right. 17 | 18 | ## Setting up Nuxt 19 | 20 | setting up Nuxt was actually really easy. I just searched for the [official Nuxt documentation](https://nuxtjs.org/docs/2.x/get-started/installation), turns out to be a very good documented framework (not that I expected something else since the [Vue documentation](https://v3.vuejs.org/guide) is the best I've ever seen). 21 | 22 | On the homepage of the Nuxt documentation there's a very simple guide that takes you trough the whole setup. It's just a few command since it uses the `create nuxt-app` command to setup the basic template app. From there I kind of figured the rest out by scrolling through the documentation. 23 | 24 | ### static generation 25 | 26 | since I'm hosting my whole website with [Github Pages](https://pages.github.com/) I had to configure Nuxt to generate static files. Also this was really easy. I just had to put `target: 'static'` in the `nuxt.config.js` file. It already pre-configured the yarn commands for me. (yes, I'm a yarn user) 27 | 28 | ### front-end configuration 29 | 30 | The Nuxt website was now configured for the most part, but since I already had a Vue website, I had to rebuild it in Nuxt (which is basically the same), So I dragged and dropped my files in the pre-made folders in the example app and installed Bootstrap & bootstrap-vue, and everything worked as it should! 31 | 32 | Nuxt has a pre-configured router, so I didn't even had to setup the routing. 33 | 34 | ## Building a blog 35 | 36 | As I said in the introduction, I mainly transferred my old Vue site to Nuxt to be able to include a simple blog feature. I just googled: "how to build a blog in Nuxt". Turns out Nuxt itself had a blog post: [Creating blog with Nuxt content](https://nuxtjs.org/blog/creating-blog-with-nuxt-content). So I basically followed that guide to create my own blog 37 | 38 | ### Nuxt/content 39 | 40 | Nuxt content also has it's own dedicated documentation which is . 41 | 42 | The setup for a blog is very easy. You install the `@nuxt/content` package and you're almost ready to go. Just have to add some settings in the `nuxt.config.js` file, add some .md files with your blog content per post, a new page with your blog feed and a template for your blog. It worked super fast and couldn't be any easier. 43 | 44 | It pre-configures an API where you can fetch your posts by a global variable `$content` more about that is described [here](https://content.nuxtjs.org/fetching). In a static environment it compiles all files to a `db.json` file where it fetches the content. 45 | 46 | ### Nuxt/feed 47 | 48 | To fulfill al the requirements for school, I also had to add a RSS feed to my blog. I'm a big fan of the [Feedly](https://feedly.com/) platform (which is a RSS-feed reader). So I googled some more on how to pair Nuxt and RSS. Also this was well documented in exactly how I needed it to be. It's just in the [nuxt content integrations section](https://content.nuxtjs.org/integrations#nuxtjsfeed) in the documentation. This was somewhat more complicated, but still very easy since it's so well documented. You basically install the `@nuxtjs/feed` module and configure it in the `nuxt.config.js` file. I only needed the RSS XML version, but even more formats are supported (JSON, for instance). 49 | 50 | Something that took some more research was displaying the content correct in the RSS feed. I could just input the whole static html as the content, but that looked really off since it also inserted the header and footer in the content. So I decided to take the raw .md contents as the content, only then to discover that most RSS feeders didn't display it right, so I then installed the `marked` NPM package and converted it to HTML, now it looks like I wanted it to. 51 | 52 | ## Conclusion 53 | 54 | Nuxt is a very easy to install and use platform which is well documented. If you already know Vue it's only a little step-up but can improve the speed for a production ready product. The blog stack in nuxt is easy to install and use if you know some markdown and don't need a CMS, which I don't since I host on Github pages. 55 | -------------------------------------------------------------------------------- /src/content/blog/21-02-09-adding-dark-mode-tailwind.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 💄darkmode in TailwindCSS 3 | pubDate: 02/09/2021 18:11 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - TailwindCSS 7 | - JavaScript 8 | - Front-end 9 | imgUrl: "../../assets/blog/21-02-09/tailwind.jpeg" 10 | description: How to add dark mode support in TailwindCSS 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Add dark mode to your site with TailwindCSS 15 | 16 | I've fiddled arround with [TailwindCSS](https://tailwindcss.com/) for some time now, but never got to the point of adding dark mode. But actually it isn't that hard since v2.0. 17 | 18 | ## Official dark mode documentation 19 | 20 | TailwindCSS docs has it's very own dedicated [documentation on dark mode](https://tailwindcss.com/docs/dark-mode). So I used it as a guide to setup my application's dark mode. 21 | 22 | ## Tailwind config 23 | 24 | Tailwind disables dark mode in a basic setup to reduce the size of the css-file. To enable it you just have to add `darkMode: 'media'` or `darkMode: 'class'` in your `tailwind.config.js`. In the minimal config it would look like this: 25 | 26 | ```javascript 27 | module.exports = { 28 | purge: [], 29 | darkMode: "class", // or 'media' 30 | theme: {}, 31 | variants: {}, 32 | plugins: [], 33 | }; 34 | ``` 35 | 36 | ## 'media' vs 'class' 37 | 38 | Dark mode in tailwind is very easy with `media`. It will take the `prefers-color-scheme` of your OS to determine if you're using dark or light mode. Dark mode `class` will use a manual toggle to determine dark or light mode. With `class` you can add the `class` to your html element. You can simply toggle this with JavaScript. 39 | 40 | ## How to use dark mode in css 41 | 42 | It's as simple as just adding `dark:bg-black` to your html classes. 43 | 44 | ```html 45 | 46 |

What color am I?

47 | 48 | ``` 49 | 50 | Tailwind will then automagically determine what classes to use. 51 | 52 | Above is ofcourse an easy example, but `dark:` can also be stacked to other variants like `lg:` or `hover:`. So in the example below, the text will be black on smaller screens but white on larger screens. 53 | 54 | ```html 55 |

What color am I?

56 | ``` 57 | 58 | ## Variants 59 | 60 | By default Tailwind dark classes are available on background colors, border colors, text colors and a few more. But you can extend tailwind to your needs by configuring `tailwind.config.js` 61 | 62 | ```javascript 63 | module.exports = { 64 | // ... 65 | variants: { 66 | extend: { 67 | textOpacity: ["dark"], 68 | }, 69 | }, 70 | }; 71 | ``` 72 | 73 | ## Conclusion 74 | 75 | TailwindCSS dark mode is very easy when combined with `@apply` classes and can be extended to your needs. It's easy to configure and can give an extra functionality to your application. 76 | 77 | See an example [here](https://github.com/eliancodes/tailwind-dark-mode-example) or [here](https://admiring-wescoff-a17fa9.netlify.app/). 78 | -------------------------------------------------------------------------------- /src/content/blog/21-02-12-using-valet-for-local-development.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ✨ Using Valet for local PHP development 3 | pubDate: 02/12/2021 20:48 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Laravel 7 | - Valet 8 | - PHP 9 | imgUrl: "../../assets/blog/backlog/valet.png" 10 | description: Valet is a highly configurable MacOs tool for webdevelopment running in the background 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Using Laravel Valet for local PHP development 15 | 16 | This week I've been developing PHP and Twig at my internship at [vBridge](https://vbridge.eu), since we're using a big pile of sourcecode, Docker doesn't perform as well. To fix this [Bramus](https://www.bram.us) told me about a tool called Valet. So I went on the search to configure and install Valet. 17 | 18 | ## Installing Valet 19 | 20 | Installing Valet is actually really easy. They have incredible [documentation](https://laravel.com/docs/master/valet) (as usual with Laravel). 21 | 22 | You can simply install it by using `composer global require laravel/valet` if you've installed [Homebrew](https://brew.sh/), PHP and [Composer](https://getcomposer.org/), else you should install those first (but also that is very easy). Once that's done, simply run `valet install` and Valet will install and start. 23 | 24 | Now that valet is installed and started you'll be able to ping any `.test` domain and it'll answer from `localhost` or `172.0.0.1`. 25 | 26 | Valet also starts when you boot your computer and will run as a background process with only 7mb of RAM! 27 | 28 | _Also, Valet is MacOS only_ 29 | 30 | ## Valet Link 31 | 32 | So installing is easy, so mapping a domain shouldn't be hard right! just cd into the directory you want to run as a site and run `valet link` and the name of the directory will be used as domain. For insance: 33 | 34 | ```bash 35 | cd laravelsite 36 | valet link 37 | ``` 38 | 39 | Now when you open your browser and go to `laravelsite.test`. It will magically appear on the screen! awesome right! 40 | 41 | You can also name a link by running `valet link `. For instance: 42 | 43 | ```bash 44 | cd laravelsite 45 | valet link newsite 46 | ``` 47 | 48 | Now it's available at `newsite.test` 49 | 50 | It's amazing! 51 | 52 | ## Valet use 53 | 54 | So, imagine that you're developing a website on your local machine with the newest version of PHP, but the server you'll be deploying to uses a much older PHP version. You don't want to put in the work to install a new old version right? Valet got you covered! 55 | 56 | Just run `valet use php@version` and valet will use that version. If you don't have the version installed locally, it will install it for you. 57 | 58 | But ofcourse, [sphp](https://github.com/sgotre/sphp-osx) is a valid choice too. 59 | 60 | ## Valet Secure 61 | 62 | Tired of the stupid browser notification that localhost isn't secured? Me too. Valet also has a nifty solution. Run `valet secure `x and it will install a certificate for you. 63 | 64 | It's insane how easy this all is! 65 | 66 | ## valet-env.php 67 | 68 | Ofcourse if you're a somewhat more demanding user. It can be interesting to use and create custom environment variables. 69 | 70 | Valet has support for a file called `valet-env.php` and will use it to configure and use environment variables 71 | 72 | For instance: 73 | 74 | ```php 75 | [ 79 | 'APP_ENV' => 'dev', 80 | ], 81 | ]; 82 | ``` 83 | 84 | Now when you'll open `newsite.test` in your browser, it'll have the dev environment! 85 | 86 | Read the post about environment variable from Bramus [here](https://www.bram.us/2019/01/17/laravel-valet-environment-variables/) 87 | 88 | Read the [full documentation here](https://laravel.com/docs/master/valet)! 89 | -------------------------------------------------------------------------------- /src/content/blog/21-02-16-using-tailwind-with-sass-preprocessor.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 💄 Tailwind with sass 3 | pubDate: 02/16/2021 19:13 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Sass 7 | - TailwindCSS 8 | - Front-end 9 | imgUrl: "../../assets/blog/21-02-09/tailwind.jpeg" 10 | description: Found myself struggling with tailwind config with sass preprocessor, so I figured I'd share a solution 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Using Sass as a tailwindCSS preprocessor 15 | 16 | Today I fiddled around with Tailwind @apply classes. I previously posted about a darkmode in combination with @apply classes and damn it goes well together. But I discovered a problem and got stuck on it for a while. It seems that when you're using tailwind without PostCSS 8, it doesn't compile the nested classes. So I searched for a fix. 17 | 18 | It seems that the [TailwindCSS documentation](https://tailwindcss.com/docs/using-with-preprocessors) has a page dedicated to this and it solves the problem in an ideal situation. But the codebase I used didn't use Postcss, so I had to find a workaround. 19 | 20 | ## Ideal solution 21 | 22 | the ideal solution is actually very clean and simple, just require the `postcss-import` and `postcss-nesting` packages in the `postcss.config.js` file. like so: 23 | 24 | ```javascript 25 | module.exports = { 26 | plugins: [ 27 | require("postcss-import"), 28 | require("tailwindcss"), 29 | require("postcss-nested"), // or require('postcss-nesting') 30 | require("autoprefixer"), 31 | ], 32 | }; 33 | ``` 34 | 35 | Very simple, very nice. But how to fix it when you're not using PostCSS (yet) ? 36 | 37 | ## Describing the setup 38 | 39 | In the project I was working in, we're using a webpack / babel setup with minifyCSS to compile the CSS into the production environment. To change the whole system was probably going to take a while and to be honest I didn't write that code and didn't feel certain that everything was going to work. 40 | I searched around for a bit on the [documentation of PostCSS](https://github.com/postcss/postcss#usage) and tought of a fix on how it possibly could work. 41 | 42 | ## How to fix 43 | 44 | I tought of a way to just compile the `tailwind.scss` file into a compiled `tailwind.css` file with of course the compiled nested classes. To do this I basically installed the `postcss-cli` NPM package. and configured the build scripts in `package.json` to compile Tailwind 45 | 46 | ```json 47 | // package.json 48 | "scripts": { 49 | "build:tailwind": "postcss ./assets/css/tailwind.scss -o public_html/assets/css/tailwindoutput.css", 50 | "watch:tailwind": "postcss ./assets/css/tailwind.scss -o public_html/assets/css/tailwindoutput.css --watch" 51 | }, 52 | ``` 53 | 54 | out of the box this does work for the basics, but still the nested classes were not working, so I now could follow [the documentation](https://github.com/postcss/postcss#usage) and add the plugins to the `postcss.config.js` 55 | 56 | ```javascript 57 | //postcss.config.js 58 | module.exports = { 59 | plugins: [ 60 | require("postcss-import"), 61 | require("tailwindcss"), 62 | require("autoprefixer"), 63 | require("postcss-nested"), 64 | ], 65 | }; 66 | ``` 67 | 68 | Now everything finally worked fine and I could use nested classes! 69 | 70 | ```scss 71 | /* tailwind.scss */ 72 | @tailwind base; 73 | @tailwind components; 74 | @tailwind utilities; 75 | 76 | .header { 77 | @apply text-gray-600 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-50; 78 | nav { 79 | @apply hover:text-green-800; 80 | } 81 | } 82 | ``` 83 | -------------------------------------------------------------------------------- /src/content/blog/21-02-20-pairing-react-native-with-tailwindcss.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ✨ Pairing React-native with TailwindCSS 3 | pubDate: 02/20/2021 17:37 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - TailwindCSS 7 | - React Native 8 | - NPM 9 | imgUrl: "../../assets/blog/21-02-09/tailwind.jpeg" 10 | description: I wanted to make a react native app with tailwindcss, but couldn't find a template... So I made my own. 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Pairing React Native with TailwindCSS 15 | 16 | For my web & mobile development course @[Odisee](https://odisee.be/en) I had to make a mobile app with technologies of my choice. Ofcourse, I made the choice to use [React Native](https://reactnative.dev/) since it's very popular, has good documentation and is a good skill to have (and also available with Typescript). I also wanted to be able to use [TailwindCSS](https://tailwindcss.com), since I'm pretty proficient at it right now, and is very easy to get started with. For the back-end of the application, I made the choice to use [Deno](https://deno.land), but that isn't important right now. 17 | 18 | So I went on the search for a easy template to start with (for faster development and results, not because I'm lazy 😉), but I couldn't find any. It seems that React Native doesn't integrate easy with Tailwind, but there exists a NPM package to solve this called [Tailwind-rn](https://github.com/vadimdemedes/tailwind-rn). So I tried it out and it seemed very easy to work with. 19 | 20 | ## Using tailwind-rn 21 | 22 | Tailwind-rn is a NPM Package written by @[vadimdemedes](https://github.com/vadimdemedes) on Github and published on [NPM](https://www.npmjs.com/package/tailwind-rn). It basically enables you to use tailwind classes inside the style attribute in React Native like so: 23 | 24 | ```jsx 25 | import tailwind from "tailwind-rn"; 26 | 27 | const App = () => ( 28 | 29 | 30 | 31 | 32 | Hello Tailwind 33 | 34 | 35 | 36 | 37 | ); 38 | ``` 39 | 40 | This of course is very nice and what I wanted. But ofcourse it would be cleaner and easier if you could use a custom `tailwind.config.js` file to configure tailwind in the React Native application. It seems also that is possible with Tailwind-rn, but I haven't played around with it yet, but I'll sure do so soon. 41 | 42 | ## Building my own template 43 | 44 | So, I tought that it could be useful to create a React Native template out of this. Since I looked for it, others must be too. 45 | 46 | A React Native template is actually very easy to install and use. Just run 47 | 48 | ```bash 49 | npx react-native init yourApp --template react-native-template-typescript 50 | ``` 51 | 52 | and it will automatically download the template from NPM (altough installing a template can also be done via `file://`, `https://` or `git://`) and install it on your local machine. 53 | 54 | To build my own template, I just downloaded the original template and modified it to use the tailwind-rn package. Configured the `package.json` and `template.config.js` files and published it to NPM. 55 | 56 | ## Publishing the package 57 | 58 | I never published a package to NPM, so there was a bit of a learning curve. But it wasn't that hard once I had setup everything right. 59 | 60 | The final packages are available [here](https://www.npmjs.com/package/react-native-template-tailwind) and the typescript variant is available [here](https://www.npmjs.com/package/react-native-template-ts-tailwind). 61 | 62 | To install my templates you can choose between two variant where one uses typescript and the other doesn't. 63 | 64 | For jsx version: 65 | 66 | ```bash 67 | npx react-native init yourApp --template react-native-template-tailwind 68 | ``` 69 | 70 | For tsx version: 71 | 72 | ```bash 73 | npx react-native init yourApp --template react-native-template-ts-tailwind 74 | ``` 75 | 76 | Maybe I'll make a template that uses the "more advanced" version of TailwindCSS with a custom `tailwind.config.js` one day. 77 | 78 | I hope some people get some value out of the package! 79 | -------------------------------------------------------------------------------- /src/content/blog/21-03-11-using-konvajs-as-canvas-with-react.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 💄 Using KonvaJS as canvas with React 3 | pubDate: 03/11/2021 21:47 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Konva 7 | - React 8 | - Canvas 9 | imgUrl: "../../assets/blog/backlog/konva.png" 10 | description: I was in need for a HTML canvas that was easily integratable with React or JavaScript, then I found Konva 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Using KonvaJS as canvas with React 15 | 16 | While running my internship at [vBridge](https://www.vbridge.eu) I'm working on a front-end based project, building a usable interface for users and needed a HTML canvas for that. Of course I couldn't just use any kind of canvas or a normal HTML canvas. I needed to render different shapes or colors based on the specific situation the user is encountering. The project uses React to begin with. So the search for a usable canvas package with React started. 17 | 18 | ## Packages that I found 19 | 20 | While doing some research I came across some packages that all could have been a valid choice. The packages that stood out the most to me were: 21 | 22 | - [Konva](https://konvajs.org) 23 | - [GoJS](https://gojs.net) 24 | - [React art](https://github.com/reactjs/react-art) 25 | - [React Canvas](https://github.com/Flipboard/react-canvas) 26 | 27 | Of course there's also the standard HTML canvas which you can read more about [here](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 28 | 29 | There are probably a lot more available, but these are the ones that I found the most documentation of. Why I chose Kova, you can read below. 30 | 31 | ## Why use Konva 32 | 33 | So I went with Konva. Basically it would be easier to explain why I didn't went with the other ones. I chose not to use React Art because it isn't reactive and that is ofcourse one of the main aspects I'll be needing. React canvas would have been a valid choice as well. It allows you to draw DOM-like elements on the canvas, but is not as easy to draw graphics, that's where Konva and GoJS come in. Both are about drawing graphics in a performant way on the canvas. Konva integrates very easy with React since it has a specific React package called [react-konva](https://konvajs.org/docs/react/index.html). Also, GoJS is not free-to-use in a production environment, so if I were to use GoJS, I had to explain to superiors why I needed to spend money. Since the differences are small, I chose Konva. There you have it. 34 | 35 | ## Differences between KonvaJS and react-konva 36 | 37 | So what's the difference between the 'normal' Konva and react-konva packages. Well basically you can use Konva components in react-konva like so: 38 | 39 | ```jsx 40 | import React from "react"; 41 | import Konva, { Stage, Layer, Text, Rect, Circle } from "react-konva"; 42 | 43 | const App = () => { 44 | return ( 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | ); 53 | }; 54 | 55 | export default App; 56 | ``` 57 | 58 | Where this would translate in pure KonvaJS without react as follows 59 | 60 | ```html 61 | 62 | 63 |
64 | 65 | 93 | 94 | 95 | ``` 96 | 97 | code example from [kanvajs.org](https://konvajs.org/docs/overview.html) 98 | 99 | Ofcourse the React version is way easier! Konva also offers a lot of other features like: 100 | 101 | - Exporting to image 102 | - exporting all elements to SVG 103 | - events 104 | 105 | ## events in konva 106 | 107 | ```jsx 108 | import React from "react"; 109 | import Konva, { Stage, Layer, Circle } from "react-konva"; 110 | 111 | const App = () => { 112 | const sayHello = () => { 113 | console.log("hello"); 114 | }; 115 | return ( 116 | 117 | 118 | 119 | 120 | 121 | ); 122 | }; 123 | 124 | export default App; 125 | ``` 126 | 127 | Easy right. This wil trigger the `sayHello` method everytime you hover over it. Ofcourse there are lots of other events and triggers available. Feel free to read about the on [the Konva docs](https://konvajs.org/docs/react/index.html). 128 | 129 | There are also a lot of Demo's available for Konva and react-konva. See them [here](https://konvajs.org/docs/sandbox/index.html) 130 | -------------------------------------------------------------------------------- /src/content/blog/21-03-12-adding-a-custom-preloader-to-your-nuxt-site.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 💫 Adding a custom preloader to your nuxt site 3 | pubDate: 03/12/2021 00:11 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - TailwindCSS 7 | - Nuxt 8 | - Front-end 9 | imgUrl: "../../assets/blog/21-02-03/nuxt.jpg" 10 | description: I added a custom preloader to my Nuxt site. It's not that difficult, here's how I did it. 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Adding a custom preloader to your nuxt site 15 | 16 | A custom preloader on your website doesn't necessarily have to be boring. It's probably the first thing a user sees when they enter your website for the first time, so why not make it an extension of your website with a matching design. 17 | 18 | I recently redid the design of my website with TailwindCSS and came to the idea of adding a custom preloader. Nuxt is really easy expandable and customisable, so I searced for an easy way to do it and there was. 19 | 20 | ## Creating the custom component 21 | 22 | So you it seems that nuxt simply allows you to set your own custom component as a preloader and it will automatically take care of the props. 23 | 24 | Just build your template as you like it. Mine was as follows: (ofcourse it uses TailwindCSS, so don't mind the crazy classes) 25 | 26 | ```html 27 | 58 | ``` 59 | 60 | then we just have to add the script with the props that Nuxt provides us with: 61 | 62 | ```html 63 | 78 | ``` 79 | 80 | There's really not that much about it. you can configure it as a modal, or just as a component somewhere on your page. It's up to you to invent crazy things! 81 | 82 | ## Telling Nuxt to use you component as preloader 83 | 84 | Configuring Nuxt to use your component is actually very easy. You just set it in your `nuxt.config.js` file like the following: 85 | 86 | ```js 87 | module.exports { 88 | loading: '~/components/loader/Loader.vue' 89 | } 90 | ``` 91 | 92 | As simple as that. Now nuxt should toggle your component everytime it has something to load. 93 | 94 | ## Nuxt default preloaders 95 | 96 | So now I had a cool custom component which looked awesome and matching to my site. Still I was not really happy with it. The main reason being that you literally have to see it everytime something loads. Everytime I clicked on a blogpost or switched pages it popped up. So it quickly annoyed me more than I found it valueable, so I ditched the idea of a preloader in the center of the page and went with the actually preset nuxt preloader and customised it to my needs. 97 | 98 | So as we saw in our own component, we just have to tell nuxt to use a preloader. The default Nuxt preloader can be set as following: 99 | 100 | ```js 101 | module.exports { 102 | loading: true 103 | } 104 | ``` 105 | 106 | Mine is set as the following: 107 | 108 | ```js 109 | module.exports { 110 | loading: { 111 | color: '#6ee7b7', 112 | height: '4px', 113 | failedColor: 'b91c1c' 114 | } 115 | } 116 | ``` 117 | 118 | Not more than that, but ofcourse you can change more properties like: `rtl`, `css`, `continuous`, `duration` and more. 119 | 120 | Nuxt also has a very good documentation of this which can be found [here](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading) 121 | -------------------------------------------------------------------------------- /src/content/blog/21-03-15-adding-tracking-with-GA4-to-nuxt.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 📈 Adding tracking to your Nuxt site with GA4 3 | pubDate: 03/15/2021 19:32 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Nuxt 7 | - Tracking 8 | - Analytics 9 | imgUrl: "../../assets/blog/21-02-03/nuxt.jpg" 10 | description: Tracking your users' action on your site can be very helpful, but it isn't always as straightforward 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Adding tracking to your Nuxt site with GA4 15 | 16 | I've been wanting to see how my site did in analytics for a while now but never got to actually installing and preparing it. Now that I finally attached a new domain ([elian.codes](https://www.elian.codes/)) and fixed my DNS for [elianvancutsem.com](https://elianvancutsem.com). I put in the works to add google analytics to my site. (blog post coming up about how I did that soon...) 17 | 18 | Here is a little guide on how I did it and integrated it with [Nuxt](https://nuxtjs.org) 19 | 20 | ## Using nuxtjs/google-analytics 21 | 22 | The [nuxtjs/google-analytics](https://google-analytics.nuxtjs.org/) module is a [Nuxt Community](https://github.com/nuxt-community) maintained module for Nuxt. It depends on the [vue-analytics](https://github.com/MatteoGabriele/vue-analytics) package and optimizes it for Nuxt. It's very easy to install and configure, but it doesn't support GA4 (yet). 23 | 24 | Install the module with: 25 | 26 | ```bash 27 | yarn add --dev @nuxtjs/google-analytics 28 | ``` 29 | 30 | and configure the `nuxt.config.js` by adding the module to the `buildModules` 31 | 32 | ```js 33 | { 34 | buildModules: [ 35 | '@nuxtjs/google-analytics' 36 | ], 37 | } 38 | ``` 39 | 40 | Note that if you're using Nuxt `< 2.9` you need to add it to the `modules` instead of `buildModules`. 41 | 42 | Then simply add a new section `googleAnalytics` to your `nuxt.config.js` 43 | 44 | ```js 45 | export default { 46 | googleAnalytics: { 47 | id: "UA-XXX-X", 48 | }, 49 | }; 50 | ``` 51 | 52 | If your source code is private you can add it right in the config, but it's good practice to add it as an environment variable. more about that [here](#using-an-environment-variable). 53 | 54 | ### other options and configurations 55 | 56 | There are a lot of options available to customize your config to your need and you can read more about that on [the documentation](https://google-analytics.nuxtjs.org/options/). 57 | 58 | ## Using vue-gtag 59 | 60 | If you need or want to use the newer GA4, you'll have to wait a bit longer until nuxtjs/google-analytics supports it, or use a little workaround. 61 | 62 | You can install [vue-gtag](https://www.npmjs.com/package/vue-gtag) as a package and configure Nuxt to use it as a plugin. 63 | 64 | You can install vue-gtag via cli using: 65 | 66 | ```bash 67 | yarn add vue-gtag 68 | ``` 69 | 70 | then make a new file in the `plugins` directory called `gtag.js`. 71 | 72 | then add the following to the `gtag.js` file: 73 | 74 | ```js 75 | import Vue from "vue"; 76 | import VueGtag from "vue-gtag"; 77 | 78 | Vue.use(VueGtag, { 79 | config: { id: "G-XXXXXXXXXX" }, 80 | }); 81 | ``` 82 | 83 | Next, configure Nuxt to use the plugin by adding this to your `nuxt.config.js` file: 84 | 85 | ```js 86 | { 87 | plugins: ["~/plugins/gtag.js"]; 88 | } 89 | ``` 90 | 91 | That should be it! 92 | 93 | ## Using an environment variable 94 | 95 | It's good practice to don't expose your Google GTag. So you can add it as an environment. To do this you can just add `process.env.GOOGLE_ANALITICS_ID` instead of the tag in your config. 96 | 97 | In the case of nuxtjs/google-analytics: 98 | 99 | ```js 100 | googleAnalytics: { 101 | id: process.env.GOOGLE_ANALITICS_ID; 102 | } 103 | ``` 104 | 105 | and in the case of vue-gtag: 106 | 107 | ```js 108 | Vue.use(VueGtag, { 109 | config: { id: process.env.GOOGLE_ANALITICS_ID }, 110 | }); 111 | ``` 112 | 113 | Now you can add the environment variable in your CI/CD or build config. 114 | 115 | Hope you got something useful out of this! 116 | -------------------------------------------------------------------------------- /src/content/blog/21-03-18-add-tailwind-jit-to-your-nuxtjs-site.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ⚡ Add TailwindCSS JIT to your Nuxtjs site 3 | pubDate: 03/18/2021 18:27 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - TailwindCSS 7 | - Nuxt 8 | - JIT 9 | imgUrl: "../../assets/blog/21-02-09/tailwind.jpeg" 10 | description: TailwindCSS just came out with a new feature called @tailwindcss/jit. here's how you can add it to your Nuxt site. 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Add TailwindCSS JIT to your Nuxtjs site 15 | 16 | [TailwindCSS](https://tailwindcss.com) just released a feature called Just-In-Time. [The TailwindCSS blog](https://tailwindcss.com/blog/) published an article about it [here](https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css). It's available (for now, since it will be added in TailwindCSS v3.0) on [NPM](https://www.npmjs.com/package/@tailwindcss/jit). I dedicated [another blogpost](https://www.elian.codes/blog/21-03-16-what-is-tailwindcss-jit-and-how-to-use-it/) to this, so I wont go deeper into that topic here. But what is interesting here, is that it changes the whole way how you use TailwindCSS with [Nuxtjs](https://nuxtjs.org) 17 | 18 | ## Upgrading nuxtjs/tailwindcss 19 | 20 | adding TailwindCSS became really easy since `nuxtjs/tailwindcss` v4.0.0. Before ([like explained on the Tailwind Install Docs](https://tailwindcss.com/docs/guides/nuxtjs)), you needed to install a great deal of packages to be able to use TailwindCSS with Nuxt. Also they were outdated versions of packages. Now it's just the `@nuxtjs/tailwindcss` module and [PostCSS](https://postcss.org/). So first install those. 21 | 22 | ```bash 23 | yarn add -D @nuxtjs/tailwindcss postcss@latest 24 | ``` 25 | 26 | Then add the module to your `buildModules` in `nuxt.config.js` 27 | 28 | ```js 29 | // nuxt.config.js 30 | export default { 31 | buildModules: ["@nuxtjs/tailwindcss"], 32 | }; 33 | ``` 34 | 35 | The modules requires some additional configurations if you're not using the default location for the `~/assets/css/tailwind.css` or the `./tailwind.config.js` files. You can read more about options [on the nuxtjs/tailwindcss module website](https://tailwindcss.nuxtjs.org/options). 36 | 37 | Now TailwindCSS should work if you created the files! 38 | 39 | ## Adding @tailwindcss/jit 40 | 41 | Now adding jit to TailwindCSS is just as easy as configuring it in your `nuxt.config.js` file. 42 | 43 | ```js 44 | // nuxt.config.js 45 | export default { 46 | tailwindcss: { 47 | jit: true, 48 | }, 49 | }; 50 | ``` 51 | 52 | that's litterally it... 53 | 54 | You can add a lot of options here, if you'd like, you can even include your whole configuration (which you normally put in `tailwind.config.js`) in here. You can read more about all available options on [the nuxtjs/tailwindcss module website](https://tailwindcss.nuxtjs.org/) 55 | 56 | ## Using with Sass preprocessor 57 | 58 | If you've read more than 2 articles on this blog, you'll know that I'm a fan of using TailwindCSS `@apply` classes with [Sass](https://sass-lang.com). It's easier to maintain, clearly readable and just cooler! 59 | 60 | But to take advantage of this together with Nuxtjs, it requires some additional configuration. But don't worry, I'll guide you trough it! 61 | 62 | If you're using `@nuxtjs/tailwindcss` v^4.0.0 or followed my guide above, you probably have installed `postcss@latest`. If you haven't, do so, because you'll need it. 63 | 64 | Then we just need to install some additional packages to tell PostCSS what we're expecting of it. 65 | 66 | ```bash 67 | yarn add -D postcss-easy-import sass 68 | ``` 69 | 70 | Now we have all packages ready to go, we'll just need to configure our `nuxt.config.js` file so it uses them. 71 | 72 | ```js 73 | // nuxt.config.js 74 | export default { 75 | tailwindcss: { 76 | cssPath: "~/assets/scss/tailwind.scss", 77 | jit: true, 78 | }, 79 | build: { 80 | postcss: { 81 | plugins: { 82 | "postcss-easy-import": { prefix: "_", extensions: [".css", ".scss"] }, 83 | "postcss-nested": {}, 84 | }, 85 | }, 86 | }, 87 | }; 88 | ``` 89 | 90 | You can also disable the `viewer` option in the config for faster build times! 91 | 92 | That should be it! I hope you received some value out of it! 93 | -------------------------------------------------------------------------------- /src/content/blog/21-03-22-deploying-my-website-to-netlify-with-github.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🚀 Deploying my website to Netlify using Github 3 | pubDate: 03/22/2021 17:52 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Netlify 7 | - TravisCI 8 | - Nuxt 9 | imgUrl: "../../assets/blog/backlog/netlify.png" 10 | description: I've used github to manage the sourcecode for my website for a long time, github pages came with it. Now I discovered a better way to deploy and host websites. 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Deploying my website to Netlify using Github 15 | 16 | Finding a good host for the right price can sometimes be a pain in the ass. I recently discovered [Netlify](https://netlify.com) and started using it for my own website and blog. Netlify has great integration with [GitHub](https://github.com) and it's own (simple) CI/CD system. 17 | 18 | Netlify has a free plan that doesn't limit your options on a smaller scale. If you need more than the basics, there's a paid plan for every need. 19 | 20 | ## JAMStack 21 | 22 | JAMStack stands for JavaScript, API's & Markup. JAMStack is designed to be very fast since it uses pre-rendering, maintainable and scalable. Of course, this doesn't mean you have to write your whole website in HTML, CSS & JavaScript, but you'll need to use a bundler like [Webpack](https://webpack.js.org) or similar. [NuxtJS](https://nuxtjs.org) and [NextJS](https://nextjs.org) are common JavaScript frameworks used for static site generation. 23 | 24 | For further reading, see [jamstack.org](https://jamstack.org) 25 | 26 | ## Deploy with git 27 | 28 | Netlify has an easy integration with GitHub that doesn't require any configuration except logging into GitHub. You're also able to use another version control site like [GitLab](https://gitlab.com) or [BitBucket](https://bitbucket.com). With a paid plan on Netlify, you can also use self-hosted variants of those sites. 29 | 30 | If your project is NPM based, the integration between GitHub and Netlify will be seamless and without much configuration. 31 | 32 | Before Netlify, I used`elianvancutsem.github.io with [Github Pages](https://pages.github.com). It also has it's advantages and features, but Netlify is much more sophisticated. If you want, you can also attach your own domain name to Github Pages, Netlify or [Vercel](https://vercel.com) (although Vercel only offers this on a paid plan). One downside of Github pages is that you've got to deploy a branch. So you'll need a dedicated branch with the compiled version of your site there, whereas Netlify and Vercel build on their systems and deploy from there. 33 | 34 | ## Further features 35 | 36 | Netlify offers a lot of features to configure your website and hosting to your needs. Some of them are paid, like analytics, but I tend to use [Google Analytics](https://analytics.google.com) for that. 37 | 38 | ### Forms 39 | 40 | Netlify has a built-in form manager, which can easily be enabled. It will handle your form submitions and put them in a list on your dashboard. It's easily accessible by adding `netlify` in your markup form element like the following: 41 | 42 | ```html 43 |
44 |

45 | 46 |

47 |

48 | 49 | 50 |

51 |

52 | 53 |

54 |
55 | ``` 56 | 57 | ### Deploy previews 58 | 59 | One of the features I use a lot on Netlify is the deploy preview. Every time a pull-request is made on your main branch, Netlify will build a merge of the two branches and deploy a preview for you to approve on something like `https://deploy-preview-57--elianvancutsem.netlify.app/`. This also counts as a check on GitHub, so if the build fails, the pull request will fail that check. This feature really comes in handy in combination with something like [Dependabot](https://dependabot.com/). 60 | 61 | ### Other features 62 | 63 | There are also a lot of features I haven't used yet like Identity, Large Media and Split testing. Although I haven't used them yet, I can see where they can come in handy. To read more about those, take a look [here](https://www.netlify.com/products/). 64 | -------------------------------------------------------------------------------- /src/content/blog/21-03-29-monitize-your-content-using-coil.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ✨ Monetize your content with Coil 3 | pubDate: 03/29/2021 13:20 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Coil 7 | - Monitize 8 | - PWA 9 | imgUrl: "../../assets/blog/backlog/coil.png" 10 | description: Ads are annoying right, Coil adds a new way to get paid for every second spent on your content. 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Monetize your content with Coil 15 | 16 | Ads are annoying and I would never place advertisements on my own website or blog. [Coil](https://coil.com) adds a new way to get paid for every second someone spends on your content. 17 | 18 | Last week I published my backlog of blog posts over on [Dev.to](https://dev.to/elianvancutsem). Since then I got over 800 views and reads on my posts, which is awesome! While scrolling through some settings and extensions I came across an extension called Coil, which would micro-monetize my content. Doesn't hurt to try I thought to myself... 19 | 20 | ## What is Coil 21 | 22 | Coil offers a subscription of $5 per month, Coil will then spend that $5 over the sites you visit that support web monetization. You can add support for web monetization on your own websites or blog by just adding the support header in the meta tags on your website (which I'll demonstrate below). 23 | 24 | ## Get paid by Coil 25 | 26 | Coil will payout a little bit roughly every second spent on you monetized content. Great, but how do I add support to my website? You can read the full docs on it [here](https://coil.com/creator), but it isn't really that hard. To get your pointer is easy, but to explain that here would take too long. Read the guide on that [here](https://developers.coil.com/#Example) 27 | 28 | It comes down to getting your payment pointer and adding it to your site like the following: 29 | 30 | ```html 31 | 32 | 33 | 34 | 35 | 36 | ``` 37 | 38 | Of course, it's also not that hard to add it in something like [Nuxt](https://nuxtjs.org) where you don't have access to a static HTML file: 39 | 40 | ```js 41 | // nuxt.config.js 42 | head: { 43 | title: 'Elian Van Cutsem', 44 | htmlAttrs: { 45 | // 46 | }, 47 | meta: [ 48 | { charset: 'utf-8' }, 49 | { name: "monetization", content: "$ilp.uphold.com/gH9RGFW9ijRA" }, 50 | { hid: 'description', name: 'description', content: 'Elian Van Cutsem' }, 51 | ], 52 | link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }], 53 | }, 54 | ``` 55 | 56 | Easy money, right! 57 | 58 | Oh yes, you shouldn't be scared to keep the pointer secret. It will show up in the browser anyway and will always point to your wallet, so don't worry that someone will steal your pointer. 59 | -------------------------------------------------------------------------------- /src/content/blog/21-03-31-deploying-a-react-native-app-to-netlify.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🚀 Deploying a React Native app to netlify 3 | pubDate: 03/31/2021 18:07 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Netlify 7 | - ReactNative 8 | - Expo 9 | imgUrl: "../../assets/blog/backlog/netlify.png" 10 | description: Deploying a mobile application does seem complicated, but Expo makes it very easy! 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Deploying a React Native app to netlify 15 | 16 | For a school project I'm working on, I needed a web version of my application which can be used to pair with the mobile application. Since I didn't want to build two seperate applications, I researched a way that I could have only one codebase that would run on IOS, Android and web platforms. The front-end will fetch an API, so if I wanted, I could use two seperate applications for mobile & web-platforms, but it's so much easier managing all code at once. 17 | 18 | My exact setup will be te following: 19 | 20 | - [React Native](https://react-native.com) front-end 21 | - Back-end will be RESTful, so doesn't really matter what you use 22 | - [Github](https://github.com) for version-control 23 | - [Travis CI](https://www.travis-ci.com/) to build, test and deploy 24 | - [Netlify](https://netlify.com) to host the application 25 | 26 | ## Starting a React Native application using Expo 27 | 28 | Starting a new React Native app using [Expo](https://expo.dev/) isn't that hard and is even guided through on [the official documentation](https://reactnative.dev/docs/environment-setup). 29 | 30 | Firstly, install the `expo-cli` so we can run expo commands: 31 | 32 | ```bash 33 | yarn -g add expo-cli 34 | ``` 35 | 36 | To then bootstrap a new application we can just simply use 37 | 38 | ```bash 39 | expo init yourProject 40 | ``` 41 | 42 | Now you have a basic template to get you started, just build your app like you would normally do. Except you have an extra layer upon React Native (which we'll need to publish for the web). 43 | 44 | ## Building a CI/CD system 45 | 46 | If you don't want automatic deploys to you hosting service and don't need to test your code, you can skip this step. `expo-cli` can also be run locally, then you can deploy the `web-build` folder manually using something like `netlify-cli`. 47 | 48 | Since the project uses `expo-cli` to build the project, we can't really use the built-in Netlify CI (although there are workarounds like configuring a seperate build/deploy script in your `package.json`). In this example I use Travis CI. I really like the UI and the accessibility of the website, but use [Jenkins](https://jenkins.io), [Github Actions](https://github.com/features/actions) or any CI/CD system you like. As long as it works for you. 49 | 50 | ### The configuration 51 | 52 | The configuration for Travis isn't really too hard to understand, still I'll explain what happens here. 53 | 54 | Basically, we tell Travis to set up 3 build containers. The first two will install [Node.js](https://nodejs.org), NPM and the `expo-cli`. Then we'll tell it to install the NPM/Yarn packages and keep the `node_modules` folder in the cache. If those are done, a new job will start that actually builds and deploys the application to the web. We run yarn just to be sure, but since it has the `node_modules` in cache, it'll finish right away and tell you it's up to date. Next, the `expo build:web` command is triggered, which will build our application for web platforms and puts the output in the `web-build` folder which is then published to Netlify. The deploying command also expects two secrets which should be configured as environment variables. `$NETLIFY_ID` is the specific ID of the website you're publishing to on Netlify and `$NETLIFY_AUTH` is the deploy key you generate from the Netlify website which tells Netlify you are authorized to publish to the website mentioned in the `$NETLIFY_ID`. In this example I also tell Travis to only trigger the deploy job on the main branch, but modify that to your liking. 55 | 56 | ```yaml 57 | # .travis.yml 58 | language: node_js 59 | node_js: 60 | - node 61 | - lts/* 62 | cache: 63 | directories: 64 | - ~/.npm 65 | - node_modules 66 | before_script: 67 | - npm install -g npm@latest 68 | - npm install -g yarn 69 | - npm install -g expo-cli 70 | script: 71 | - yarn 72 | jobs: 73 | include: 74 | - stage: deploy website 75 | script: 76 | - yarn 77 | - expo build:web 78 | deploy: 79 | provider: netlify 80 | site: $NETLIFY_ID 81 | auth: $NETLIFY_AUTH 82 | dir: "web-build" 83 | prod: true 84 | edge: true 85 | on: 86 | branch: main 87 | ``` 88 | 89 | ## Deploying to Netlify 90 | 91 | In this example I used [Netlify](https://netlify.com) to deploy the application, but any static hosting service (like [Github pages](https://pages.github.com) or [Vercel](https://vercel.com)) can be used since Expo will generate a static build of your site. I won't go further here on how you can set up Netlify, since I wrote [a blogpost about that](https://www.elian.codes/blog/21-03-22-deploying-my-website-to-netlify-with-github/) before. 92 | -------------------------------------------------------------------------------- /src/content/blog/21-04-05-what-does-tailwindcss-2-1-improve.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ⬆️ What does TailwindCSS 2.1 improve? 3 | pubDate: 04/05/2021 23:27 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - TailwindCSS 7 | - CSS 8 | - Release 9 | imgUrl: "../../assets/blog/21-02-09/tailwind.jpeg" 10 | description: TailwindCSS 2.1 just got released, but what does it bring and improve? 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # What does TailwindCSS 2.1 improve? 15 | 16 | TailwindCSS 2.1 just got released. Read [the official blogpost about that here](https://blog.tailwindcss.com/tailwindcss-2-1). I'm excited for it since it brings the new Just-In-Time engine to the core, I wrote [a detailed blogpost about what it is and how to use it](https://www.elian.codes/blog/21-03-16-what-is-tailwindcss-jit-and-how-to-use-it) some time ago, which actually did very well. 17 | 18 | ## Tailwind JIT 19 | 20 | The JIT engine got added to the core which means that you don't have to install a separate package and do some PostCSS changes. Initially the JIT engine had some issues with some CSS classes and properties, but most of them already got ironed out. 21 | 22 | ### Using JIT engine in TailwindCSS 2.1 23 | 24 | Using the JIT engine in TailwindCSS 2.0.4 required to set the PostCSS config to include another package called `@tailwindcss/jit` as seen below: 25 | 26 | ```js 27 | // postcss.config.js 28 | 29 | module.exports = { 30 | plugins: [require("@tailwindcss/jit"), require("autoprefixer")], 31 | }; 32 | ``` 33 | 34 | Where you now only need the following line `mode: 'jit'` in your `tailwind.config.js` 35 | 36 | ```js 37 | // tailwind.config.js 38 | 39 | module.exports = { 40 | mode: "jit", 41 | purge: { 42 | enabled: true, 43 | content: [ 44 | //... 45 | ], 46 | }, 47 | darkMode: "class", 48 | theme: { 49 | //... 50 | }, 51 | }; 52 | ``` 53 | 54 | You can even remove the `@tailwindcss/jit` package completely from your project. 55 | 56 | ### using it with the @nuxtjs/tailwindcss module 57 | 58 | [The TailwindCSS module for NuxtJS](https://tailwindcss.nuxtjs.org/) supported JIT mode since v4.0.1, but now you don't even have to set the mode. 59 | 60 | Previously we set it by adding this to our `nuxt.config.js` file: 61 | 62 | ```js 63 | // nuxt.confug.js 64 | 65 | tailwindcss: { 66 | // other @nuxtjs/tailwindcss 67 | jit: true // or false 68 | }, 69 | ``` 70 | 71 | Now we don't have to include it here anymore, but instead add it as `mode: 'JIT'` in the `tailwind.config.js` file: 72 | 73 | ```js 74 | // tailwind.config.js 75 | 76 | module.exports = { 77 | mode: "jit", 78 | // other TailwindCSS options 79 | }; 80 | ``` 81 | 82 | ## Support for CSS filters, blending modes & isolation utilities 83 | 84 | This is a CSS feature I haven't quite used that much, but it's nice to see TailwindCSS become a very complete and sophisticated CSS framework. 85 | 86 | To read more about those check out [the official TailwindCSS blogpost about v2.1](https://blog.tailwindcss.com/tailwindcss-2-1#new-filter-and-backdrop-filter-utilities) 87 | 88 | ## Upgrading from 2.0.4 to 2.1 89 | 90 | Upgrading is nothing more then `yarn upgrade` or `yarn add tailwindcss@latest` 91 | -------------------------------------------------------------------------------- /src/content/blog/21-05-07-adding-google-fonts-to-your-nuxtjs-site.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 💄 Adding Google Fonts to your NuxtJS site 3 | pubDate: 05/07/2021 18:32 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Nuxt 7 | - Google Fonts 8 | - JavaScript 9 | imgUrl: "../../assets/blog/21-02-03/nuxt.jpg" 10 | description: I found out that my fonts weren't loading properly, so I searched for an alternative. 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Adding Google Fonts to your NuxtJS site 15 | 16 | Some time ago I found out that some of my fonts weren't loading in some browsers. I was using Google Fonts imported in my stylesheet using `@import`. I couldn't immediately pinpoint the issue, so I searched for an alternative way to add the fonts I needed to my Nuxt site. 17 | 18 | ## @nuxtjs/google-fonts 19 | 20 | In my search on Google Fonts in Nuxt, I almost immediatly found out about the Nuxt module called [@nuxtjs/google-fonts](https://www.npmjs.com/package/@nuxtjs/google-fonts). It works like a charm and is very versatile. Here's a little guide on how you can use it. 21 | 22 | ## Installing the module 23 | 24 | Installing a module in [Nuxt](https://nuxtjs.org) is the easiest thing you'll come across. It's nothing more than a simple NPM package install. Here's how you can install the google-fonts module: 25 | 26 | ```bash 27 | yarn add -D @nuxtjs/google-fonts 28 | ``` 29 | 30 | After the install, we'll add the module to our `nuxt.config.js` file: 31 | 32 | ```js 33 | // nuxt.config.js 34 | 35 | { 36 | buildModules: [ 37 | '@nuxtjs/google-fonts' 38 | ], 39 | } 40 | ``` 41 | 42 | That should work! 43 | 44 | ## Adding fonts 45 | 46 | Adding fonts to your NuxtJS configuration is very easy. You just have to add them in the `nuxt.config.js` file. There's a lot of configurable parts included with the module, but to keep things easy, I'll only go into the basics here. 47 | 48 | Every option or font is added via the `googleFonts` property in `nuxt.config.js` 49 | 50 | To add a font to your config. Just add the name to the module in `nuxt.config.js`: 51 | 52 | ```js 53 | // nuxt.config.js 54 | 55 | googleFonts: { 56 | families: { 57 | // a simple name 58 | Roboto: true, 59 | 60 | // a name with spaces 61 | 'Josefin+Sans': true, 62 | 63 | // specific font weights 64 | Lato: [100, 300], 65 | } 66 | } 67 | ``` 68 | 69 | If you need a little more advanced fonts, like italic or bold, there's a specific property: 70 | 71 | ```js 72 | // nuxt.config.js 73 | 74 | googleFonts: { 75 | families: { 76 | // basic 77 | Lato: [100, 300], 78 | 79 | // advanced 80 | Raleway: { 81 | // weights 82 | wght: [100, 400], 83 | // italic 84 | ital: [100] 85 | }, 86 | } 87 | } 88 | ``` 89 | 90 | ## Using fonts in CSS 91 | 92 | After installing and configuring the module and adding the fonts. The fonts are just usable in your CSS. 93 | 94 | Keep in mind that the font you specify in the CSS-file should ofcourse be installed first via the `nuxt.config.js` file. 95 | 96 | ```css 97 | p { 98 | font-family: Rubik, sans-serif; 99 | font-weight: 400; 100 | } 101 | ``` 102 | 103 | ### Using with TailwindCSS 104 | 105 | Since I'm using TailwindCSS on [my website](https://www.elian.codes), I also had to find out how to use the fonts in my custom Tailwind configuration. Turns out I just had to add it by using simple old skool CSS, since there's no way (yet) to add it in an `@apply` rule. 106 | 107 | ```css 108 | p.title { 109 | font-family: Rubik, sans-serif; 110 | @apply text-lg text-center text-black font-semibold; 111 | } 112 | ``` 113 | 114 | More info is available on the [Official Documentation of the module](https://google-fonts.nuxtjs.org/). 115 | -------------------------------------------------------------------------------- /src/content/blog/21-08-14-using-surge-to-quickly-deploy-a-static-site.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🚀 Using Surge.sh to quickly deploy a static site 3 | pubDate: 08/14/2021 12:23 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Surge 7 | - Deployment 8 | - Hosting 9 | imgUrl: "../../assets/blog/backlog/surge.png" 10 | description: Deploying a static site is made very easy and free by Surge.sh, in this article I explain how it works, what it is and why you should use it. 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Using Surge.sh to quickly deploy a static site 15 | 16 | Deploying a static site can be really easy when using [Netlify](https://www.netlify.com), [Vercel](https://vercel.com) or another service. Most of them require to have a connection to a [Github](https://www.github.com) (or similar) repository, although some of them also come with a CLI version. [Surge.sh](http://surge.sh) is a tool that makes it very easy to deploy a simple site via the command line without any hassle, this can be a useful tool to make a temporary link for a preview for a client or yourself. 17 | 18 | ## Why use Surge over other services 19 | 20 | Personally I like that Surge is just so easy. It's literally nothing more than a simple command. One thing that's also really likeable about Surge is that it doesn't require configuration. For instance, a 404 error code will just default to `404.html`, and any other `yourdomain.surge.sh/testpage` will default to `testpage.html`. There is no GUI or any other way to really manage your sites. Don't forget that Surge only supports static sites, in other words, JAMStack sites (compiled to JavaScript, API's and Markup). So server-side-rendering is not an option. 21 | 22 | ### Pricing 23 | 24 | Surge has a free and paying plan, if you want to learn more about that, you can always take a look on [the official website](https://surge.sh/pricing). It comes down to two options. 25 | 26 | The free plan includes basic SSL and unlimited publishing, which might be good enough to simple deploy preview versions for client or to use as tests for yourself. You can even use custom domains (like `yourdomain.surge.sh`). 27 | 28 | The paid plan costs $30/mo and includes HTTPS, unlimited domains, redirects, password protection per site and a lot of other features. 29 | 30 | ## Installing Surge 31 | 32 | Installing Surge is as easy as installing it as a global npm package: 33 | 34 | ```bash 35 | npm install --global surge 36 | ``` 37 | 38 | ## Deploying a directory to Surge 39 | 40 | So now that you have installed Surge, you can simply navigate into your directory with the site's code and assets and run the `surge` command. 41 | 42 | ```bash 43 | # Navigate to your (static) site 44 | cd yoursite/ 45 | 46 | # Deploy to Surge 47 | surge 48 | ``` 49 | 50 | Surge will than (only the first time) ask you to log in or create your account, after which it asks you the subdomain of the site and immediately will start deploying. This only takes a little moment and once it's done, your website will be live in an instant. 51 | 52 | Of course you need to keep in mind that Surge does nothing more than deploy a directory directly on the web, so there is no building or compiling involved. If you want (or need) to deploy a site with `node_modules`, you could compile your website locally and just deploy the output build folder, or use an external CI/CD provider like [Travis](https://www.travis-ci.com/) or [Github Actions](https://github.com/features/actions). To use CI/CD, you need to use an online repository of course. 53 | 54 | The demo of this article can be found on [http://swapped-coffee.surge.sh]. (It only contains an `index.html` & `404.html` file) 55 | -------------------------------------------------------------------------------- /src/content/blog/21-08-20-describe-your-commits-using-gitmoji.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 🥳 Describe your commits using Gitmoji 3 | pubDate: 08/20/2021 18:31 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Git 7 | - Systems 8 | - Gitmoji 9 | imgUrl: "../../assets/blog/backlog/gitmoji.webp" 10 | description: Describing your commits can be a difficult task. You can write down everything you changed or improved, or you can let the code speak for itself. Gitmoji makes this a whole lot easier by using emoji. 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Describe your commits using Gitmoji 15 | 16 | Describing your commits can be a difficult task. You can write down everything you changed or improved, or you can let the code speak for itself. [Gitmoji](https://gitmoji.dev) makes this a whole lot easier by using emoji. 17 | 18 | ## What is Gitmoji 19 | 20 | Gitmoji is a simple way to categorize commits or pull requests in an instance without a describing text. It uses emoji's linked with a description to categorize the changes made in one commit. If you're thinking that your commit should have more than one Gitmoji, you're probably making too big commits, but if you really want to, you can always add more than one to the commit message. After some time of using Gitmoji, you won't even need to think about them anymore and it goes quite natural 21 | 22 | ## Why I love Gitmoji 23 | 24 | For me personally, it's so awesome to scroll back into a timeline of commits and instantly get an idea about what all those commits are. This also translates to searching something you changed some commits ago; although you could use `git blame` or use an extension like gitlens for that. 25 | 26 | ### How I use Gitmoji 27 | 28 | When you check the commits of the public repository of this very site, you'll instantly see every commit has a Gitmoji. If you know what they mean, you'll even have an idea what they all (roughly) are about. 29 | 30 | If you are a regular visitor of this blog, you might have noticed that I use the same system to categorize my blogposts. In this way, a user can just search using an emoji instead of a keyword and still find related articles to that topic. Awesome right! 31 | 32 | ### Some of my most used Gitmoji's 33 | 34 | - 🔍 do some SEO work 35 | - 👷‍♂️ work on CI-CD 36 | - 🐛 fix a bug 37 | - ✨ introduce new features 38 | - ♻ do some refactoring 39 | - 🚑 hotfixes 40 | - 🔧 configuration work 41 | - 💄 work on UI 42 | - ⬆ upgrade packages 43 | - 📝 textual work (like blogposts) 44 | - 🍱 asset updates 45 | 46 | For a full list and description, see the [gitmoji.dev](https://gitmoji.dev) site 47 | -------------------------------------------------------------------------------- /src/content/blog/21-09-25-using-slots-to-build-layouts-in-astro.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ✨ Using slots to build layouts in Astro 3 | pubDate: 09/25/2021 17:48 4 | author: "Elian Van Cutsem" 5 | tags: 6 | - Astro 7 | - JavaScript 8 | - Framework 9 | imgUrl: "../../assets/blog/backlog/astro_old.png" 10 | description: Coming from frameworks like NuxtJS and NextJS, I always liked the layout feature. It's a quick way to reuse shared components without re-importing them in every page. When I started with Astro, I had no idea that this was also possible. 11 | layout: "../../layouts/BlogPost.astro" 12 | --- 13 | 14 | # Using slots to build layout in Astro 15 | 16 | Coming from frameworks like NuxtJS and NextJS, I always liked the layout feature. You basically write a new component, add some original content to it and add a layout which contains all the mutual components like headers, footers and such. 17 | 18 | When I first started learning Astro, I didn't directly see a way to realise this. Astro feels a lot more like writing super-powered HTML, which is nice, but I hated to re-import my header component in every page. 19 | 20 | After some time experimenting somewhat more with Astro, I actually understood that this was possible, it's just a different way of approach then NuxtJS which I'm so used to. 21 | 22 | ## Building Layouts in NuxtJS 23 | 24 | Building layouts in Nuxt is really easy (or I'm just very used to it). There's a `layouts` folder in which you create a new file 25 | 26 | ```html 27 | 35 | ``` 36 | 37 | If the Nuxt layout component was named `Default.vue` you can just add `layout: 'default` in a page to use the layout. The `` element will then be replaced by the `