feat: init content pages

nuxt.config.ts

@@ -30,6 +30,9 @@ export default defineNuxtConfig({
 	],
 	modules: ["@nuxtjs/i18n", "@nuxt/content", "@nuxtjs/tailwindcss"],
 	runtimeConfig: {
+		GITHUB_TOKEN: process.env.GITHUB_TOKEN,
+		GITHUB_USERNAME: process.env.GITHUB_USERNAME,
+		GITHUB_REPO_NAME: process.env.GITHUB_REPO_NAME,
 		public: {
 			MODE: process.env.MODE,
 			GITHUB_LINK: process.env.GITHUB_LINK,
@@ -38,6 +41,7 @@ export default defineNuxtConfig({
 			STACKOVERFLOW_LINK: process.env.STACKOVERFLOW_LINK,
 			TWITTER_LINK: process.env.TWITTER_LINK,
 			TELEGRAM_LINK: process.env.TELEGRAM_LINK,
+			GITHUB_CONTENT_LINK: process.env.GITHUB_REPO_NAME,
 		},
 	},
 	typescript: {

src/components/global/Header.vue

@@ -18,26 +18,31 @@ withDefaults(
 
 <template>
 	<header
-		class="flex flex-col items-end w-full text-light justify-stretch xs:items-center xs:flex-row"
+		class="flex flex-col items-start justify-between w-full text-light xs:items-center xs:flex-row "
 	>
 		<LazyGBrandLogo
 			v-if="showLogo"
-			class="z-[60] w-full xs:w-auto flex items-start justify-start !pointer-events-auto flex-1"
+			class="z-[60] xs:w-auto flex items-start justify-start !pointer-events-auto"
 			:link="logoLink"
 		/>
 
 		<div
 			v-if="!showMenuIcon"
-			class="flex flex-row items-center justify-end flex-1 space-x-2"
+			class="flex flex-row items-center justify-end flex-1 space-x-2 uppercase"
 		>
-			<NuxtLink v-for="(route, id) in routes" :key="id" :href="route.path">{{
-				route.title
-			}}</NuxtLink>
+			<NuxtLink
+				class="no-underline relative opacity-70 hover:opacity-100 nav-link before:absolute before:h-[1px] before:bottom-0 before:transition-[width] before:w-0 before:hover:w-full before:bg-light before:right-0 before:hover:right-[none] before:hover:left-0 tracking-wider sm:tracking-normal"
+				exact-active-class="!opacity-100 before:!w-full"
+				v-for="(route, id) in routes"
+				:key="id"
+				:href="route.path"
+				>{{ route.title }}</NuxtLink
+			>
 		</div>
 
 		<LazyGMenuButton
 			v-if="showMenuIcon"
-			class="z-40 mb-0 xs:mb-1 !pointer-events-auto"
+			class="z-40 mb-0 xs:mb-1 !pointer-events-auto self-end"
 			:active="isMenuOpen"
 			@click="
 				() => {

src/components/global/Menu.client.vue

@@ -4,14 +4,14 @@ import gsap from "gsap";
 // DATA
 const links = [
 	{
-		label: "Blog",
-		icon: "",
-		path: "/blog",
+		label: "Writing",
+		icon: "?",
+		path: "/writing",
 	},
 	{
-		label: "Credits",
+		label: "Projects",
 		icon: "",
-		path: "/credits",
+		path: "/projects",
 	},
 ];
 
@@ -76,4 +76,3 @@ watch(isMenuOpen, async (newState) => {
 		</div>
 	</transition>
 </template>
-~/composables/useMenu

src/components/pages/content/Card.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{ title: string; description?: string | null; url: string }>();
+</script>
+
+<template>
+	<a
+		:href="url"
+		target="_blank"
+		class="w-full !no-underline pt-5 px-2 sm:px-5 pb-3 transition-[background] bg-opacity-0 bg-white hover:bg-opacity-10 flex flex-col border-b border-b-[#ffffff55]"
+	>
+		<h2 class="mt-0 mb-1">{{ title }}</h2>
+
+		<span class="mb-2 leading-normal tracking-normal opacity-80">{{
+			description
+		}}</span>
+
+		<slot name="footer" />
+	</a>
+</template>

src/components/pages/content/EditOnGithub.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { Config } from "~/config";
+import { ServerConfig } from "~/config/server";
+</script>
+
+<template>
+	<div class="mt-10 text-xs opacity-55 text">
+		<svg
+			class="inline-block h-[10px] mb-[1.5px] mr-1 fill-none"
+			viewBox="0 0 653 649"
+		>
+			<path
+				d="M599.657 188.665L203.99 584.333C168.657 620 62.9904 636.33 37.3237 612.663C11.657 588.996 30.323 483.333 65.6564 447.666L461.323 51.9995C479.593 34.5999 503.943 25.0319 529.17 25.3392C554.397 25.6469 578.503 35.8055 596.343 53.6455C614.183 71.4852 624.343 95.5932 624.65 120.821C624.96 146.048 615.39 170.396 597.99 188.665H599.657Z"
+				stroke="#F4F7F5"
+				stroke-width="50"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+			<path
+				d="M628 624H328"
+				stroke="#F4F7F5"
+				stroke-width="50"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+
+		This content can be edited on
+		<a
+			:href="Config.GITHUB_CONTENT_LINK"
+			target="_blank"
+			class="transition-all text-primary fill-primary hover:fill-secondary hover:text-secondary"
+			><svg
+				class="inline-block h-3 mb-[2px] fill-[inherit]"
+				viewBox="0 0 513 500"
+			>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M256.297 0C114.757 0 0 114.757 0 256.34C0 369.583 73.4365 465.653 175.298 499.561C188.119 501.907 192.791 493.993 192.791 487.188C192.791 481.119 192.578 464.991 192.45 443.606C121.146 459.093 106.107 409.239 106.107 409.239C94.4489 379.641 77.639 371.759 77.639 371.759C54.3654 355.845 79.3989 356.165 79.3989 356.165C105.126 357.988 118.661 382.585 118.661 382.585C141.529 421.751 178.658 410.434 193.26 403.885C195.596 387.32 202.199 376.025 209.537 369.615C152.622 363.151 92.7743 341.147 92.7743 242.933C92.7743 214.955 102.769 192.066 119.162 174.146C116.528 167.661 107.728 141.604 121.669 106.31C121.669 106.31 143.193 99.4193 192.162 132.591C212.609 126.906 234.538 124.058 256.329 123.962C278.099 124.058 300.029 126.906 320.508 132.591C369.444 99.4193 390.926 106.31 390.926 106.31C404.909 141.604 396.109 167.661 393.475 174.146C409.901 192.066 419.831 214.955 419.831 242.933C419.831 341.403 359.887 363.066 302.78 369.412C311.996 377.326 320.188 392.963 320.188 416.887C320.188 451.147 319.878 478.793 319.878 487.188C319.878 494.057 324.486 502.035 337.499 499.529C439.275 465.557 512.648 369.551 512.648 256.34C512.648 114.757 397.88 0 256.297 0Z"
+				/>
+			</svg>
+			Github</a
+		>
+	</div>
+</template>

src/components/pages/home/Nav.client.vue

@@ -11,7 +11,7 @@ const isFocusMode = useState<boolean>("isFocusMode");
 		}`"
 	>
 		<ul
-			class="relative flex w-full sm:flex-col items-center justify-center sm:w-3 sm:space-y-[14vh] font-medium text-center text-light capitalize text-sm sm:text-base"
+			class="relative flex w-full sm:flex-col items-center justify-center sm:w-3 sm:space-y-[14vh] font-medium text-center text-light text-sm sm:text-base uppercase"
 		>
 			<li
 				class="flex justify-center w-full sm:w-auto !pointer-events-auto rotate-0 sm:rotate-90"
@@ -28,5 +28,3 @@ const isFocusMode = useState<boolean>("isFocusMode");
 		</ul>
 	</nav>
 </template>
-
-<style scoped lang="scss"></style>

src/composables/useContentLayout.ts

@@ -0,0 +1,14 @@
+export const useContentLayout = () =>
+	useState<{
+		displayLeftSide: boolean;
+		displayTitle: boolean;
+		displayNetworks: boolean;
+		title: string;
+		subTitle?: string;
+		headerLinks?: { title: string; path: string }[];
+	}>("contentLayoutState", () => ({
+		displayLeftSide: false,
+		displayTitle: true,
+		displayNetworks: true,
+		title: "",
+	}));

src/config/index.ts

@@ -1,3 +1,5 @@
+import { repository } from "~~/package.json";
+
 export class Config {
 	static readonly ASSET_DIR = "/";
 	static readonly GSAP_ANIMATION_DURATION = 1.8;
@@ -30,44 +32,54 @@ export class Config {
 		try {
 			return useRuntimeConfig().public.GITHUB_LINK;
 		} catch {
-			return "https://google.com";
+			return repository.url;
 		}
 	})();
 	static readonly LINKEDIN_LINK: string = (() => {
 		try {
 			return useRuntimeConfig().public.LINKEDIN_LINK;
 		} catch {
-			return "https://google.com";
+			return repository.url;
 		}
 	})();
 	static readonly DISCORD_LINK: string = (() => {
 		try {
 			return useRuntimeConfig().public.DISCORD_LINK;
 		} catch {
-			return "https://google.com";
+			return repository.url;
 		}
 	})();
 	static readonly STACKOVERFLOW_LINK: string = (() => {
 		try {
 			return useRuntimeConfig().public.STACKOVERFLOW_LINK;
 		} catch {
-			return "https://google.com";
+			return repository.url;
 		}
 	})();
 
 	static readonly TWITTER_LINK: string = (() => {
 		try {
 			return useRuntimeConfig().public.TWITTER_LINK;
 		} catch {
-			return "https://google.com";
+			return repository.url;
 		}
 	})();
 
 	static readonly TELEGRAM_LINK: string = (() => {
 		try {
 			return useRuntimeConfig().public.TELEGRAM_LINK;
 		} catch {
-			return "https://google.com";
+			return repository.url;
+		}
+	})();
+
+	static readonly GITHUB_CONTENT_LINK: string = (() => {
+		try {
+			return `${repository.directory}${
+				useRuntimeConfig().public.GITHUB_CONTENT_LINK
+			}`;
+		} catch {
+			return repository.url;
 		}
 	})();
 }

src/config/server.ts

@@ -0,0 +1,25 @@
+export class ServerConfig {
+	static readonly GITHUB_TOKEN = (() => {
+		try {
+			return useRuntimeConfig().GITHUB_TOKEN;
+		} catch (error) {
+			return undefined;
+		}
+	})();
+
+	static readonly GITHUB_USERNAME = (() => {
+		try {
+			return useRuntimeConfig().GITHUB_USERNAME;
+		} catch (error) {
+			return undefined;
+		}
+	})();
+
+	static readonly GITHUB_REPO_NAME = (() => {
+		try {
+			return useRuntimeConfig().GITHUB_REPO_NAME;
+		} catch (error) {
+			return undefined;
+		}
+	})();
+}

src/content/notes/about.md

@@ -13,4 +13,4 @@ I'm in the process of making positive changes in my life, looking to connect wit
 
 Not much to say right now, but I'd really love to connect with you. Looking forward to catching up soon! ✨
 
-Oh, and if you're feeling adventurous, check out the (☞ ﾟヮﾟ)☞ [credit section](credits/). I'd appreciate it!
+Oh, and if you're feeling adventurous, check out the (☞ ﾟヮﾟ)☞ [credit section](/notes/credits/). I'd appreciate it!