Merge pull request #4 from tkokhing/frontier

major re-org, allow dynamic language ch in MDX

Author: tkokhing

_frontier/strategic_cyber_domains_en.mdx

@@ -0,0 +1,73 @@
+---
+title: Cybersecurity Domains: A Strategic Perspective
+excerpt: "Cybersecurity is a broad and interconnected discipline, comprising various domains that address specific threats, technologies, and organizational needs. To simplify this complexity, I provided a thematic overview to make illustration easy."
+coverImage: "/assets/blog/rise_of_supply-chain_attacks/cover.jpg"
+date: "2025-05-05T11:43:17.322Z"
+author:
+  name: tkokhing
+  picture: "/img/logo/tkokhing.gif"
+ogImage:
+  url: "/assets/blog/rise_of_supply-chain_attacks/cover.jpg"
+subPath: "blog/posts"
+postStatus: "Updated on: "
+---
+
+## **Cybersecurity Domains: A Strategic Perspective**
+
+Cybersecurity is a broad and interconnected discipline, comprising various domains that address specific threats, technologies, and organizational needs. To bring structure to this complex ecosystem, this article presents a thematic overview of key cybersecurity areas — grouped into foundational network defenses, human-centric safeguards, and strategic architectural models. 
+
+These domains span from core infrastructure to applications, cloud platforms, endpoint devices, and ultimately, human factors. This thematic framing mirrors how security is typically deployed in practice — through defense-in-depth and adaptive risk management.
+
+
+### **Foundational Network Defenses**
+
+**Network Security:**
+Protects networks from unauthorized access, data breaches, and cyberattacks using firewalls, intrusion detection/prevention systems (IDS/IPS), Extended Detection and Response (XDR), and Network Detection and Response (NDR) tools. It also enforces secure configurations and access controls, including remote access protections such as Virtual Private Networks (VPNs) and Multi-Factor Authentication (MFA), which add critical layers of identity verification at network entry points.
+
+**Endpoint Security:**
+Secures individual devices — such as laptops, smartphones, and IoT endpoints (including edge and fog computing systems) — against malware, ransomware, and unauthorized access.
+
+**Physical Security:**
+Protects physical assets, facilities, and devices from tampering, theft, or sabotage — essential for securing edge/IoT deployments, data centers, and operational technology environments.
+
+**Application Security:**
+Identifies and mitigates vulnerabilities in software through secure coding practices, robust authentication, encryption, and rigorous testing frameworks such as static and dynamic application security testing (SAST/DAST).
+
+**Web Security:**
+Defends web applications from threats like XSS, SQL injection, CSRF, and session hijacking using input validation, HTTPS enforcement, proper authentication, and Web Application Firewalls (WAFs).
+
+**Cloud Security:**
+Safeguards cloud-based data, applications, and infrastructure with encryption, identity and access management (IAM), secure configurations, and continuous monitoring.
+
+**Information Security:**
+Protects both structured and unstructured data — at rest and in transit — through access control policies, encryption, and adherence to privacy and regulatory standards (e.g., GDPR, ISO/IEC 27001).
+
+**IoT Security:**
+Addresses the vulnerabilities of connected devices by securing firmware, communication protocols, and access control, ensuring both integrity and availability across smart environments.
+
+**Mobile Security:**
+Secures smartphones and tablets from threats like mobile malware, spyware, SIM-jacking, and unauthorized access to corporate resources.
+
+---
+
+### **Human-Centric Safeguards**
+
+**Human-Centric Security (Social Engineering):**
+Targets the human layer through manipulation tactics that exploit fear, pressure, curiosity, or greed. Techniques such as phishing, pretexting, baiting, and tailgating remain prevalent. Defense strategies include employee awareness training, phishing simulation exercises, strong authentication protocols such as Multi-Factor Authentication (MFA), and behavioral anomaly detection.
+
+---
+
+### **Strategic Architectural Models**
+
+**Zero Trust Architecture:**
+A security model that never assumes trust by default — every user, device, and request is continuously authenticated, authorized, and validated, regardless of network location.
+
+**Layered Defense-in-Depth:**
+A holistic approach to security that deploys multiple overlapping security controls across all layers of an organization’s technology stack — from perimeter defenses to application-level protections — ensuring redundancy and resilience.
+
+**Real-Time Detection and Response:**
+Incorporates modern Security Information and Event Management (SIEM) systems, Security Orchestration, Automation, and Response (SOAR), and Managed Detection and Response (MDR) capabilities to detect, analyze, and respond to threats in real time, enabling proactive threat hunting and rapid incident containment.
+
+## **Closing Paragraph**
+
+The defenses listed here are not an exhaustive set, nor are they a silver bullet against all threats. What organizations truly need is a cohesive system of layered and contextual security. In the next article of this series, I’ll dive deeper into each theme — showing how these domains interconnect to secure the enterprise network.

_frontier/strategic_cyber_domains_zh.mdx

@@ -0,0 +1,76 @@
+---
+title: 网络安全领域：战略视角
+excerpt: "网络安全是一门广泛且相互关联的学科，涵盖应对特定威胁、技术和组织需求的各个领域。为了简化其复杂性，我提供了一个主题概述，以便于理解。"
+coverImage: "/assets/blog/rise_of_supply-chain_attacks/cover.jpg"
+date: "2025-05-05T11:43:17.322Z"
+author:
+  name: tkokhing
+  picture: "/img/logo/tkokhing.gif"
+ogImage:
+  url: "/assets/blog/rise_of_supply-chain_attacks/cover.jpg"
+subPath: "blog/posts"
+postStatus: "Updated on: "
+---
+
+## **网络安全领域：战略视角**
+
+网络安全是一门广泛且相互关联的学科，涵盖多个领域，分别应对特定的威胁、技术及组织需求。为了为这一复杂的生态系统带来结构化的理解，本文以主题化方式概览了关键的网络安全领域 —— 分为基础网络防御、以人为本的安全措施，以及战略架构模型。
+
+这些领域涵盖了从核心基础设施到应用程序、云平台、终端设备，最终延伸至人的因素。这样的主题化框架也反映了实际中的安全部署方式 —— 深度防御和弹性风险管理。
+
+---
+
+### **基础网络防御**
+
+**网络安全：**
+使用防火墙、入侵检测/防御系统（IDS/IPS）、扩展检测与响应（XDR）、网络检测与响应（NDR）等工具保护网络免受未经授权的访问、数据泄露与网络攻击。此外，还需强制实施安全配置和访问控制，包括虚拟专用网络（VPN）和多因素认证（MFA）等远程访问防护措施，这些技术在网络入口点增加了关键的身份验证层。
+
+**终端安全：**
+保护各类设备——如笔记本电脑、智能手机以及物联网终端（包括边缘与雾计算系统）——免受恶意软件、勒索软件和未授权访问的威胁。
+
+**物理安全：**
+防止物理资产、设施和设备遭到篡改、盗窃或破坏——这对于边缘/物联网部署、数据中心和运营技术环境尤为关键。
+
+**应用安全：**
+通过安全编码实践、强身份验证、加密技术以及静态与动态应用安全测试（SAST/DAST）等严格测试框架，识别并缓解软件中的漏洞。
+
+**Web 安全：**
+通过输入验证、强制启用 HTTPS、规范身份验证机制和部署 Web 应用防火墙（WAF），防御诸如 XSS、SQL 注入、CSRF 和会话劫持等网络应用威胁。
+
+**云安全：**
+通过加密、身份与访问管理（IAM）、安全配置和持续监控，保障基于云的数据、应用和基础设施的安全。
+
+**信息安全：**
+通过访问控制策略、加密机制，以及符合隐私和法规标准（如 GDPR、ISO/IEC 27001）来保护静态与动态的结构化和非结构化数据。
+
+**物联网安全：**
+通过保护固件、通信协议和访问控制来应对连接设备的漏洞，确保智能环境中的数据完整性和可用性。
+
+**移动安全：**
+保护智能手机和平板电脑免受移动恶意软件、间谍软件、SIM 劫持以及对企业资源的未经授权访问。
+
+---
+
+### **以人为本的安全措施**
+
+**人本安全（社交工程）：**
+针对人的弱点，利用恐惧、压力、好奇心或贪婪等心理进行操控。常见手法包括钓鱼攻击、借口欺诈、诱饵攻击和尾随进入等。防御措施包括员工安全意识培训、钓鱼模拟演练、强身份认证机制（如 MFA）以及行为异常检测。
+
+---
+
+### **战略架构模型**
+
+**零信任架构：**
+一种默认不信任任何用户、设备或请求的安全模型 —— 每次访问都必须持续进行身份验证、授权和验证，无论其来自内部还是外部网络。
+
+**多层深度防御：**
+一种整体性安全策略，在组织技术架构的各个层级部署多个重叠的安全控制，从边界防御到应用保护，确保安全的冗余性与韧性。
+
+**实时检测与响应：**
+集成现代安全信息与事件管理系统（SIEM）、安全编排自动化与响应（SOAR）及托管检测与响应服务（MDR），实现对威胁的实时检测、分析与响应，支持主动威胁狩猎与快速事件处置。
+
+---
+
+## **结束语**
+
+上面列出的防御措施并非面面俱到，也不能作为防范所有威胁的灵丹妙药。企业真正需要建立的是一个具备层次性和上下文感知能力的整体安全体系。在本系列的下一篇文章中，我将深入探讨各个主题，演示它们如何协同防护企业网络安全。

_frontier_data/frontier_data_en.mdx

@@ -0,0 +1,30 @@
+# Securing the Digital Frontiers
+
+Asia is growing — and growing fast. This rapid digital expansion **brings immense opportunities, but also introduces complex cybersecurity challenges** that threaten businesses, governments, and individuals alike.
+
+## What Has Changed
+
+As cloud adoption, mobile connectivity, and cross-border commerce surge across the region, the attack surface expands in tandem. Protecting digital assets has evolved into a **strategic imperative for long-term resilience and trust**.
+
+## For Readers Like You
+
+To help businesses on the East and West to navigate this daunting terrain, **Securing the Digital Frontiers** is a bilingual series crafted to deliver clear, practical cybersecurity insights. Each edition unpacks key domains, emerging risks, and proven defense strategies — in both English and Simplified Chinese.
+
+The series offers a structured, strategic lens on cybersecurity, tailored for both technical professionals and business leaders navigating cross-border growth, regulatory complexity, and cloud-first innovation.
+
+---
+
+### ✅ Quick Self-Check: Are You on the Right Page?
+
+Take a moment to reflect before reading further:
+
+- ✅ I recognize that cybersecurity is no longer just a technical concern — it’s a core business imperative.  
+
+- ✅ I follow cybersecurity incidents more closely now than I did five years ago.  
+
+- ✅ I believe greater cybersecurity awareness would enable me to better protect my organization.  
+
+
+If all the answer is YES, the next page is **for you**.
+
+---

_frontier_data/frontier_data_zh.mdx

@@ -0,0 +1,29 @@
+# 守护数字前沿
+
+亚洲正在快速发展，数字化进程迅猛推进。**这场数字化浪潮带来了巨大的机遇，也带来了复杂的网络安全挑战，威胁着企业、政府和个人的安全与信任。**
+
+## 面临的新局面
+
+随着云端采纳、移动互联和跨境商业在整个亚洲地区迅速增长，攻击面也在不断扩大。保护数字资产已从一项技术需求，**演变为确保长期韧性与信任的战略要务。**
+
+## 为像你一样的读者
+
+为了帮助东西方的企业穿越这片充满挑战的数字疆域，**《守护数字前沿》**系列应运而生。这是一套中英双语的网络安全专栏，旨在提供清晰、实用的安全洞见。每一期内容都将深入解析关键领域、新兴风险和经过验证的防御策略——以英文与简体中文双版本呈现。
+
+本系列以结构化、战略性的视角解读网络安全，既面向技术专业人士，也为那些在跨境拓展、法规合规和云优先创新中寻求安全保障的商业决策者量身打造。
+
+---
+
+### ✅ 快速自检：你来到对的页面了吗？
+
+在继续阅读之前，请先自我确认以下观点：
+
+* ✅ 我意识到网络安全早已不只是技术问题——它是企业核心战略的一部分。
+
+* ✅ 比起五年前，我现在更关注网络安全事件。
+
+* ✅ 我相信提升自身的网络安全意识，将有助于我更好地保护公司或组织。
+
+如果你的答案都是“是”，那么下一页就是**为你而写**。
+
+---

next.config.js

@@ -2,12 +2,17 @@
  *  @type {import('next').NextConfig}
  */
 
+const withMDX = require('@next/mdx')({
+  extension: /\.mdx$/,
+});
+
 const nextConfig = {
-    output: 'export',
-    distDir: 'dist',
-    images: {
-        unoptimized: true
-    },
-  };
-  
-  module.exports = nextConfig;
+  output: 'export',
+  distDir: 'dist',
+  images: {
+    unoptimized: true,
+  },
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'], // Add MDX and other extensions
+};
+
+module.exports = withMDX(nextConfig);

package-lock.json

@@ -14,6 +14,8 @@
     "@babel/runtime": "^7.27.0",
     "@headlessui/react": "^2.2.0",
     "@heroicons/react": "^2.2.0",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.3.1",
     "@tailwindcss/vite": "^4.1.4",
     "ajv": "^8.17.1",

package.json

@@ -1,5 +1,3 @@
 export default function CodeLine({ children }: { children: React.ReactNode }) {
-  return (
-    <span className="codeline">{children}</span>
-  );
+  return <span className="codeline">{children}</span>;
 }

src/app/_components/blog_frame/codeline.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { type ElementType } from 'react';
+import LanguageSwitcher from "@/app/_components/language_handler/language-switcher";
+import { useLanguage } from "@/app/_components/language_handler/language-provider";
+
+type LanguageChoiceProps = {
+  components: {
+    en: ElementType;
+    zh: ElementType;
+  };
+};
+
+export default function DisplayLanguageContent({ components }: LanguageChoiceProps) {
+  const { language } = useLanguage();
+  const DisplayContent = language === 'en' ? components.en:components.zh;
+
+  return( 
+    <div>
+      <div className="fixed bottom-2 right-0 w-full z-20"><LanguageSwitcher /></div> 
+        <DisplayContent />
+    </div>)
+}

src/app/_components/language_handler/language-display.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+type Language = 'en' | 'zh';
+
+interface LanguageContextProps {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+  error: string | null;
+}
+
+const LanguageContext = createContext<LanguageContextProps | undefined>(undefined);
+
+export const LanguageProvider = ({ children }: { children: ReactNode }) => {
+  const [language, setLanguage] = useState<Language>('en');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const storedLang = localStorage.getItem('language') as Language;
+    if (storedLang) setLanguage(storedLang);
+  }, []);
+
+  const changeLanguage = (lang: Language) => {
+    try {
+      if (!['en', 'zh'].includes(lang)) {
+        throw new Error(`Invalid language: ${lang}`);
+      }
+      
+      setLanguage(lang);
+      localStorage.setItem('language', lang);
+      setError(null);
+    } catch (error){
+      if (error instanceof Error) {
+        setError(error.message);
+      } else {
+        setError("Unknown Error Occurred");
+      }
+    }
+  };
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage: changeLanguage, error }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  if (!context) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+};