Merge pull request #3 from pierreyoda/website

Simple website for hncli

website/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = false
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

website/.gitignore

@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

website/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

website/.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

website/.prettierrc

@@ -0,0 +1,21 @@
+{
+    "singleQuote": false,
+    "trailingComma": "all",
+    "arrowParens": "avoid",
+    "endOfLine": "lf",
+    "semi": true,
+    "printWidth": 120,
+    "tabWidth": 2,
+    "plugins": [
+      "prettier-plugin-tailwindcss",
+      "prettier-plugin-svelte"
+    ],
+    "overrides": [
+        {
+            "files": "*.svelte",
+            "options": {
+                "parser": "svelte"
+            }
+        }
+    ]
+}

website/eslint.config.js

@@ -0,0 +1,33 @@
+import js from "@eslint/js";
+import ts from "typescript-eslint";
+import svelte from "eslint-plugin-svelte";
+import prettier from "eslint-config-prettier";
+import globals from "globals";
+
+/** @type {import("eslint").Linter.Config[]} */
+export default [
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs["flat/recommended"],
+  prettier,
+  ...svelte.configs["flat/prettier"],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  {
+    files: ["**/*.svelte"],
+    languageOptions: {
+      parserOptions: {
+        parser: ts.parser,
+      },
+    },
+  },
+  {
+    ignores: ["build/", ".svelte-kit/", "dist/"],
+  },
+];

website/package.json

@@ -0,0 +1,40 @@
+{
+    "name": "hncli-website",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "lint": "prettier --check . && eslint .",
+        "format": "prettier --write ."
+    },
+    "devDependencies": {
+        "@sveltejs/adapter-static": "3.0.5",
+        "@sveltejs/kit": "2.6.2",
+        "@sveltejs/vite-plugin-svelte": "3.1.2",
+        "@types/eslint": "9.6.1",
+        "autoprefixer": "10.4.20",
+        "eslint": "9.12.0",
+        "eslint-config-prettier": "9.1.0",
+        "eslint-plugin-svelte": "2.44.1",
+        "globals": "15.10.0",
+        "picomatch": "4.0.2",
+        "postcss": "8.4.47",
+        "prettier": "3.3.3",
+        "prettier-plugin-svelte": "3.2.7",
+        "prettier-plugin-tailwindcss": "0.6.8",
+        "svelte": "4.2.19",
+        "svelte-check": "4.0.4",
+        "tailwindcss": "3.4.13",
+        "typescript": "5.6.2",
+        "typescript-eslint": "8.8.0",
+        "vite": "5.4.8"
+    },
+    "type": "module",
+    "dependencies": {
+        "@vercel/analytics": "1.3.1"
+    }
+}

website/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

website/src/app.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .website-container {
+    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+  }
+}

website/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

website/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

website/src/lib/Button.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  type ButtonVariant = "solid" | "outline";
+  type ButtonColor = "red" | "white" | "gray";
+
+  const baseStyles: Record<ButtonVariant, string> = {
+    solid:
+      "inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold outline-2 outline-offset-2 transition-colors",
+    outline:
+      "inline-flex justify-center rounded-lg border py-[calc(theme(spacing.2)-1px)] px-[calc(theme(spacing.3)-1px)] text-sm outline-2 outline-offset-2 transition-colors",
+  };
+  const variantStyles: Record<ButtonVariant, Record<ButtonColor, string>> = {
+    solid: {
+      red: "relative overflow-hidden bg-hncli-dark-red text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-hncli-dark-red active:text-white/80 before:transition-colors",
+      white: "bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70",
+      gray: "bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80",
+    },
+    outline: {
+      red: "",
+      white: "",
+      gray: "border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80",
+    },
+  };
+
+  export let variant: ButtonVariant = "solid";
+  export let color: ButtonColor | undefined;
+  export let externalLink: boolean | undefined;
+  export let href: string | undefined;
+  export let extraClass = "";
+
+  $: buttonColor = variant === "outline" ? "gray" : (color ?? "gray");
+  $: buttonClass = `${baseStyles[variant]} ${variantStyles[variant][buttonColor]} ${extraClass}`;
+</script>
+
+{#if href}
+  <a
+    {href}
+    class={buttonClass}
+    target={externalLink ? "_blank" : undefined}
+    rel={externalLink ? "noopener noreferrer" : undefined}
+  >
+    <slot />
+  </a>
+{:else}
+  <button class={buttonClass}>
+    <slot />
+  </button>
+{/if}

website/src/lib/ExternalLink.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let href: string;
+  export let extraClass = "";
+</script>
+
+<a class={extraClass} {href} target="_blank" rel="noreferrer noopener"><slot /></a>
+
+<style lang="postcss">
+  a {
+    @apply text-hncli-dark-red underline transition-colors duration-200 hover:text-hncli-dark-red/60;
+  }
+</style>

website/src/lib/Footer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  const currentYear = new Date().getFullYear();
+</script>
+
+<footer class="website-container border-t border-gray-200">
+  <div class="flex flex-col items-center pb-12 pt-8">
+    <p class="text-base text-gray-900">
+      &copy; Copyright {currentYear} Pierre-Yves Diallo
+    </p>
+  </div>
+</footer>

website/src/lib/Header.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import GitHubLogo from "$lib/assets/github.svg";
+  import HnCliTextLogo from "$lib/assets/hncli-logo-text.png";
+</script>
+
+<header class="website-container">
+  <div />
+  <nav class="mr-12 md:mr-0">
+    <a href="/" aria-label="Home" class="flex items-center">
+      <img alt="Wrench icon" src={HnCliTextLogo} class="max-w-40 h-auto" />
+      <h1 class="hidden">hncli</h1>
+    </a>
+  </nav>
+  <a href="https://github.com/pierreyoda/hncli" title="hncli GitHub repository">
+    <img alt="GitHub logo" src={GitHubLogo} class="w-10 h-10" />
+  </a>
+</header>
+
+<style lang="postcss">
+  header {
+    @apply mx-0 flex items-center py-8 md:justify-between;
+  }
+
+  nav {
+    a {
+      @apply no-underline;
+    }
+  }
+</style>

website/src/lib/content/Contribute.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import Button from "$lib/Button.svelte";
+</script>
+
+<section id="contribute" aria-label="Contribute to hncli" class="bg-gray-900 py-20 sm:py-32 mt-12">
+  <div class="website-container">
+    <div class="flex flex-col md:flex-row items-center justify-between">
+      <div class="half-section">
+        <h2 class="text-white text-4xl font-medium tracking-tight">Any issue? Wanting to contribute?</h2>
+      </div>
+      <div class="half-section mt-12 md:mt-0 text-4xl">
+        <Button
+          variant="solid"
+          color="red"
+          href="https://github.com/pierreyoda/hncli/issues/new"
+          externalLink
+          extraClass="!text-xl"
+        >
+          Open a new issue in GitHub</Button
+        >
+      </div>
+    </div>
+  </div>
+</section>
+
+<style lang="postcss">
+  .half-section {
+    @apply flex w-1/2 flex-col items-center justify-start text-center md:text-left;
+  }
+</style>