first commit

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,15 @@
+/** @type { import("eslint").Linter.Config } */
+module.exports = {
+	root: true,
+	extends: ['eslint:recommended', 'plugin:svelte/recommended'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

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

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY package*.json .
+RUN npm ci
+COPY . .
+RUN npm run build
+RUN npm prune --production
+
+FROM node:18-alpine
+WORKDIR /app
+COPY --from=builder /app/build build/
+COPY --from=builder /app/node_modules node_modules/
+COPY package.json .
+EXPOSE 3000
+ENV NODE_ENV=production
+CMD [ "node", "build" ]

README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

jsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

package.json

@@ -0,0 +1,32 @@
+{
+	"name": "sites",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"lint": "eslint ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/eslint": "^8.56.0",
+		"autoprefixer": "^10.4.16",
+		"eslint": "^8.56.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"postcss": "^8.4.33",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"svelte-markdown": "^0.4.1"
+	}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

src/app.css

@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.section-wrapper {
+    @apply max-w-4xl mx-auto
+}
+
+html {
+    scroll-behavior: smooth;
+}

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 {};

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>

src/hooks.server.js

@@ -0,0 +1,8 @@
+import { env } from '$lib';
+import { redirect } from '@sveltejs/kit';
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+    if(new URL(event.request.url).host === env.sites_host) redirect(302, env.youpage)
+    return resolve(event);
+}

src/lib/env.js

@@ -0,0 +1,5 @@
+export const env = {
+    api_url: "http://localhost:3000",
+    youpage: "http://localhost:3002",
+    sites_host: "127.0.0.1.nip.io:3001"
+}

src/lib/index.js

@@ -0,0 +1,2 @@
+// place files you want to import through the `$lib` alias in this folder.
+export * from "./env";

src/lib/ui/header.svelte

@@ -0,0 +1,22 @@
+<script>
+    export let title;
+    export let subtitle;
+
+    export let titleClasses = "";
+    export let subtitleClasses = "";
+</script>
+
+<div class="mt-44 mb-20 bg-white text-center w-full">
+    <div class="section-wrapper">
+        {#if title}
+            <h1 class="text-7xl/none mb-5 font-bold {titleClasses}">
+                {title}
+            </h1>
+        {/if}
+        {#if subtitle}
+            <p class="text-2xl/normal max-w-2xl mx-auto text-gray-700 {subtitleClasses}">
+                {subtitle}
+            </p>
+        {/if}
+    </div>
+</div>

src/routes/+layout.server.js

@@ -0,0 +1,16 @@
+import { redirect } from "@sveltejs/kit";
+import { env } from "$lib";
+
+/** @type {import("./$types").LayoutServerLoad} */
+export async function load(event) {
+    let res = await event.fetch(env.api_url + "/blog");
+    if (!res.ok) {
+        redirect(302, env.youpage);
+    }
+
+    let blog_info = await res.json();
+
+    return {
+        blog: blog_info
+    }
+}

src/routes/+layout.svelte

@@ -0,0 +1,50 @@
+<script>
+    import "../app.css";
+    export let data;
+</script>
+
+<div
+    class="py-5 px-24 w-full fixed h-min top-0 flex flex-row justify-between bg-white drop-shadow-md"
+>
+    <div>
+        <a href="/" class="font-bold text-2xl">{data.blog.site.name}</a>
+    </div>
+    <div>
+        <a
+            href="#subscribe-form"
+            class="px-8 py-3 bg-gray-900 text-white rounded-lg font-semibold ml-auto"
+            >Subscribe</a
+        >
+    </div>
+</div>
+
+<slot></slot>
+
+<div class="bg-white py-16 text-center" id="subscribe-form">
+    <div class="max-w-lg mx-auto">
+        <h3 class="text-3xl font-bold mb-3">Our newsletter</h3>
+        <p class="text-base/7 mb-8">
+            A bi-weekly newsletter of design inspiration, resources and anything
+            related to career development.
+        </p>
+        <div
+            class="max-w-[400px] whitespace-nowrap flex justify-around mx-auto"
+        >
+            <input
+                type="text"
+                placeholder="Email address"
+                class="py-3 px-5 flex-grow border-l border-y border-solid border-gray-300 h-[50px] rounded-l-lg"
+            />
+            <button
+                class="px-8 py-3 bg-gray-900 text-white font-semibold rounded-r-lg h-[50px]"
+                >Subscribe</button
+            >
+        </div>
+    </div>
+</div>
+<div class="h-24 flex items-center justify-center border-t border-gray-200">
+    <span>Copyright {new Date().getFullYear()} - Omer Sabic</span>
+</div>
+
+
+<style></style>

src/routes/+page.svelte

@@ -0,0 +1,45 @@
+<script>
+    import Header from "$lib/ui/header.svelte";
+
+    export let data;
+
+    let { blog } = data;
+</script>
+
+<div>
+    <Header
+        title={blog?.site.title}
+        subtitle={blog?.site.subtitle}
+    />
+    <div class="bg-gray-100 py-20">
+        <div class="section-wrapper">
+            <h2 class="text-2xl mb-8 font-bold">Latest articles</h2>
+
+            <div class="flex flex-col gap-5">
+                {#each blog?.articles || [] as article}
+                    <a href="/{article.seo_slug}">
+                        <div
+                            class="bg-white rounded-3xl px-8 py-8 flex flex-row sm:flex-col"
+                        >
+                            <div>
+                                <span
+                                    class="text-sm text-gray-400 font-normal mb-8"
+                                    >{new Date(
+                                        article.created_at,
+                                    ).toLocaleDateString("en-de", {
+                                        day: "2-digit",
+                                        month: "long",
+                                        year: "numeric",
+                                    })}</span
+                                >
+                                <h3 class="text-2xl font-semibold">
+                                    {article.title}
+                                </h3>
+                            </div>
+                        </div>
+                    </a>
+                {/each}
+            </div>
+        </div>
+    </div>
+</div>

src/routes/[slug]/+page.js

@@ -0,0 +1 @@
+export const ssr = false;

src/routes/[slug]/+page.svelte

@@ -0,0 +1,47 @@
+<script>
+    import { env } from "$lib";
+    import Header from "$lib/ui/header.svelte";
+    import { onMount } from "svelte";
+    import { page } from "$app/stores";
+    import "./md-style.css";
+    import SvelteMarkdown from "svelte-markdown";
+
+    /**
+     * @type {any}
+     */
+    let article;
+    onMount(async () => {
+        article = (
+            await fetch(
+                env.api_url + "/blog/article?slug=" + $page.params.slug,
+            ).then((x) => {
+                return x.json();
+            })
+        ).article;
+    });
+
+    export let data;
+
+    $: console.log(article);
+</script>
+
+<div>
+    <Header
+        title={article?.title}
+        titleClasses="text-4xl/none"
+        subtitle={new Date(article?.created_at).toLocaleDateString("en-de", {
+            day: "2-digit",
+            month: "long",
+            year: "numeric",
+        })}
+        subtitleClasses="text-sm font-bold"
+    ></Header>
+
+    <div class="mt-12">
+        <div class="max-w-2xl mx-auto">
+            <div class="markdown-body">
+                <SvelteMarkdown source={article?.content} options={{breaks: true, gfm: true}} />
+            </div>
+        </div>
+    </div>
+</div>

src/routes/[slug]/md-style.css

@@ -0,0 +1,156 @@
+/* Base styles for the markdown container */
+.markdown-body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    line-height: 1.6;
+    color: #333;
+    background-color: #fff;
+    padding: 20px;
+    max-width: 800px;
+    margin: auto;
+}
+
+/* Headings */
+.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+    font-weight: bold;
+    line-height: 1.25;
+}
+
+.markdown-body h1 {
+    font-size: 2em;
+}
+
+.markdown-body h2 {
+    font-size: 1.75em;
+}
+
+.markdown-body h3 {
+    font-size: 1.5em;
+}
+
+.markdown-body h4 {
+    font-size: 1.25em;
+}
+
+.markdown-body h5 {
+    font-size: 1em;
+}
+
+.markdown-body h6 {
+    font-size: 0.875em;
+    color: #6a737d;
+}
+
+/* Paragraphs */
+.markdown-body p {
+    margin: 0 0 1em;
+}
+
+/* Links */
+.markdown-body a {
+    color: #0366d6;
+    text-decoration: none;
+}
+
+.markdown-body a:hover {
+    text-decoration: underline;
+}
+
+/* Lists */
+.markdown-body ul, .markdown-body ol {
+    padding-left: 2em;
+    margin-top: 0;
+    margin-bottom: 1em;
+}
+
+.markdown-body ul ul, .markdown-body ol ol, .markdown-body ul ol, .markdown-body ol ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.markdown-body li {
+    margin-bottom: 0.5em;
+}
+
+/* Blockquotes */
+.markdown-body blockquote {
+    padding: 0 1em;
+    color: #6a737d;
+    border-left: 0.25em solid #dfe2e5;
+    margin: 0 0 1em;
+}
+
+/* Code */
+.markdown-body code {
+    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 85%;
+    background-color: rgba(27,31,35,0.05);
+    border-radius: 3px;
+    padding: 0.2em 0.4em;
+}
+
+.markdown-body pre {
+    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-size: 85%;
+    background-color: #f6f8fa;
+    border-radius: 3px;
+    padding: 1em;
+    overflow: auto;
+    line-height: 1.45;
+    margin: 0 0 1em;
+}
+
+.markdown-body pre code {
+    background-color: transparent;
+    padding: 0;
+}
+
+/* Horizontal Rule */
+.markdown-body hr {
+    border: 0;
+    border-top: 1px solid #e1e4e8;
+    height: 0;
+    margin: 1em 0;
+}
+
+/* Tables */
+.markdown-body table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+    margin-bottom: 1em;
+}
+
+.markdown-body th, .markdown-body td {
+    border: 1px solid #dfe2e5;
+    padding: 0.6em 1em;
+}
+
+.markdown-body th {
+    background-color: #f6f8fa;
+    font-weight: bold;
+}
+
+.markdown-body td {
+    background-color: #fff;
+}
+
+/* Images */
+.markdown-body img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Inline HTML */
+.markdown-body details {
+    background-color: #f6f8fa;
+    border: 1px solid #dfe2e5;
+    border-radius: 3px;
+    padding: 0.5em 1em;
+}
+
+.markdown-body summary {
+    cursor: pointer;
+    font-weight: bold;
+}

svelte.config.js

@@ -0,0 +1,13 @@
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{html,js,svelte,ts}"],
+
+  theme: {
+    extend: {}
+  },
+
+  plugins: []
+};

vite.config.js

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});