Merge pull request #210 from what1s1ove/wd-177-11ty-api

wd-177: add more 11ty api
what1s1ove · Nov 22, 2023 · 36c9270 · 36c9270
2 parents c69021c + e0bb10a
commit 36c9270
Show file tree

Hide file tree

Showing 13 changed files with 515 additions and 293 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+source/manifest.njk
diff --git a/Makefile b/Makefile
@@ -14,7 +14,7 @@ build: clean
 # Prettify
 
 prettify:
-	npx prettier --write "**/*.{json,yml,css,js,cjs,d.ts}"
+	npx prettier --write "**/*.{json,yml,njk,css,js,cjs,d.ts}"
 
 # Lint
 
@@ -23,7 +23,7 @@ lint_fs:
 lint_editor:
 	npx editorconfig-checker
 lint_prettify:
-	npx prettier --check "**/*.{json,yml,css,js,cjs,d.ts}"
+	npx prettier --check "**/*.{json,yml,njk,css,js,cjs,d.ts}"
 lint_html:
 	npx node-w3c-validator -i build/*.html -f lint -evH
 lint_css:

diff --git a/eleventy.config.cjs b/eleventy.config.cjs
@@ -20,6 +20,7 @@ let Path = {
 		`./source/sounds`,
 		`./source/manifest.webmanifest`,
 		`./source/favicon.ico`,
+		`./source/robots.txt`,
 	],
 	CSS: `./source/styles/index.css`,
 	DB: `./source/database.json`,
@@ -225,7 +226,10 @@ let init = (config) => {
 	return {
 		dataTemplateEngine: `njk`,
 		dir: {
+			data: `data`,
+			includes: `includes`,
 			input: `source`,
+			layouts: `layouts`,
 			output: `build`,
 		},
 		htmlTemplateEngine: `njk`,

diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -1,7 +1,7 @@
 /** @type {import('lint-staged').Config} */
 let config = {
 	'*': `make lint_editor lint_fs`,
-	'*.{json,yml,css,js,cjs,d.ts}': `prettier --write`,
+	'*.{json,yml,njk,css,js,cjs,d.ts,}': `prettier --write`,
 	'*.css': `make lint_css`,
 	'*.js': `make lint_js lint_type`,
 }

diff --git a/prettier.config.js b/prettier.config.js
@@ -9,6 +9,12 @@ let config = {
 				singleQuote: false,
 			},
 		},
+		{
+			files: `*.njk`,
+			options: {
+				'parser': `html`,
+			},
+		},
 	],
 	plugins: [`prettier-plugin-jsdoc`],
 	printWidth: 80,

diff --git a/source/data/global.cjs b/source/data/global.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+	description: `Interface Developer`,
+	domain: `https://whatislove.dev`,
+	title: `Vladyslav Zubko`,
+}
diff --git a/source/includes/social-list.njk b/source/includes/social-list.njk
@@ -0,0 +1,36 @@
+<ul class="{{ socialListClassName }} social-list">
+	<li class="social-list__item">
+		<a
+			class="social-list__item-link social-list__item-link--github"
+			href="https://github.com/what1s1ove"
+			target="_blank"
+			rel="noreferrer"
+		>
+			<span class="social-list__item-title visually-hidden">GitHub</span>
+		</a>
+	</li>
+	<li class="social-list__item">
+		<a
+			class="social-list__item-link social-list__item-link--linkedin"
+			href="https://www.linkedin.com/in/what1s1ove"
+			target="_blank"
+			rel="noreferrer"
+		>
+			<span class="social-list__item-title visually-hidden"
+				>Linkedin</span
+			>
+		</a>
+	</li>
+	<li class="social-list__item">
+		<a
+			class="social-list__item-link social-list__item-link--telegram"
+			href="https://t.me/dugga"
+			target="_blank"
+			rel="noreferrer"
+		>
+			<span class="social-list__item-title visually-hidden"
+				>Telegram</span
+			>
+		</a>
+	</li>
+</ul>
diff --git a/source/layouts/page.njk b/source/layouts/page.njk
@@ -0,0 +1,52 @@
+<!doctype html>
+<html class="page" lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>{{ global.title }}</title>
+
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="view-transition" content="same-origin" />
+
+		<link rel="stylesheet" href="/styles/index.css" />
+
+		<link
+			rel="preload"
+			href="/fonts/roboto-400.woff2"
+			crossorigin
+			as="font"
+			type="font/woff2"
+		/>
+		<link
+			rel="preload"
+			href="/fonts/roboto-700.woff2"
+			crossorigin
+			as="font"
+			type="font/woff2"
+		/>
+
+		<link rel="icon" href="/favicon.ico" sizes="any" />
+		<link rel="icon" href="/images/icons/icon.svg" type="image/svg+xml" />
+		<link rel="manifest" href="/manifest.json" />
+
+		<meta name="description" content="{{ global.description }}" />
+		<meta name="generator" content="{{ eleventy.generator }}" />
+
+		<meta property="og:type" content="website" />
+		<meta property="og:title" content="{{ global.title }}" />
+		<meta property="og:description" content="{{ global.description }}" />
+		<meta property="og:url" content="{{ global.domain + page.url }}" />
+
+		<meta
+			property="og:image"
+			content="{{ global.domain }}/images/logo-social.og.png"
+		/>
+		<meta property="og:image:width" content="1200" />
+		<meta property="og:image:height" content="630" />
+
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:site" content="@what1s1oveee" />
+	</head>
+	<body class="page__body">
+		{{ content | safe }}
+	</body>
+</html>
diff --git a/source/manifest.njk b/source/manifest.njk
@@ -0,0 +1,14 @@
+---
+permalink: manifest.json
+---
+{
+	"id": "/",
+	"name": "{{ global.title }}",
+	"description": "{{ global.description }}",
+	"lang": "en",
+	"dir": "ltr",
+	"start_url": "/",
+	"display": "browser",
+	"orientation": "natural",
+	"theme_color": "#ffffff"
+}
diff --git a/source/manifest.webmanifest b/source/manifest.webmanifest
diff --git a/source/pages/form.njk b/source/pages/form.njk
@@ -1,73 +1,142 @@
 ---
 permalink: form.html
 ---
-<!DOCTYPE html>
+
+<!doctype html>
 <html class="page" lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
+		<link
+			href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+			rel="stylesheet"
+			integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
+			crossorigin="anonymous"
+		/>
 		<title>Timeline Form</title>
 	</head>
 	<body class="page__body">
 		<main class="container-sm p-5 w-50">
-		<h1 class="mb-5">📈 Timeline Form</h1>
-		<form name="timeline">
-			<div class="row mb-3">
-			<div class="col">
-				<label class="form-label" for="skill-type">Skill Type</label>
-				<select class="form-select text-capitalize" name="skillType" id="skill-type" required>
-				<option value="">Select...</option>
-				</select>
-			</div>
-			<div class="col">
-				<label class="form-label" for="type">Type</label>
-				<select class="form-select text-capitalize" name="type" id="type" required>
-				<option value="">Select...</option>
-				</select>
-			</div>
-			</div>
-			<div class="mb-3">
-			<label class="form-label" for="title">Title</label>
-			<input class="form-control" name="title" id="title" type="text" required />
-			</div>
-			<div class="mb-3">
-			<label class="form-label" for="description">Description</label>
-			<textarea class="form-control" name="desc" id="description"></textarea>
-			</div>
-			<div class="row mb-3">
-			<div class="col">
-				<label class="form-label" for="origin">Origin Link</label>
-				<input class="form-control" name="origin" id="origin" type="url" />
-			</div>
-			<div class="col">
-				<label class="form-label" for="origin-desc">Origin Link Description</label>
-				<input class="form-control" name="originDesc" id="origin-desc" type="text" />
-			</div>
-			</div>
-			<div class="row mb-3">
-			<div class="col">
-				<label class="form-label" for="link">Link</label>
-				<input class="form-control" name="link" id="link" type="url" />
-			</div>
-			<div class="col">
-				<label class="form-label" for="link-desc">Link Description</label>
-				<input class="form-control" name="linkDesc" id="link-desc" type="text" />
-			</div>
-			</div>
-			<div class="row mb-3">
-			<div class="col">
-				<label class="form-label" for="date">Date</label>
-				<input class="form-control" name="date" id="date" type="date" required />
-			</div>
-			<div class="col">
-				<label class="form-label" for="end-date">End Date</label>
-				<input class="form-control" name="endDate" id="end-date" type="date" />
-			</div>
-			</div>
-			<button type="submit" class="btn btn-primary">Submit</button>
-		</form>
+			<h1 class="mb-5">📈 Timeline Form</h1>
+			<form name="timeline">
+				<div class="row mb-3">
+					<div class="col">
+						<label class="form-label" for="skill-type"
+							>Skill Type</label
+						>
+						<select
+							class="form-select text-capitalize"
+							name="skillType"
+							id="skill-type"
+							required
+						>
+							<option value="">Select...</option>
+						</select>
+					</div>
+					<div class="col">
+						<label class="form-label" for="type">Type</label>
+						<select
+							class="form-select text-capitalize"
+							name="type"
+							id="type"
+							required
+						>
+							<option value="">Select...</option>
+						</select>
+					</div>
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="title">Title</label>
+					<input
+						class="form-control"
+						name="title"
+						id="title"
+						type="text"
+						required
+					/>
+				</div>
+				<div class="mb-3">
+					<label class="form-label" for="description"
+						>Description</label
+					>
+					<textarea
+						class="form-control"
+						name="desc"
+						id="description"
+					></textarea>
+				</div>
+				<div class="row mb-3">
+					<div class="col">
+						<label class="form-label" for="origin"
+							>Origin Link</label
+						>
+						<input
+							class="form-control"
+							name="origin"
+							id="origin"
+							type="url"
+						/>
+					</div>
+					<div class="col">
+						<label class="form-label" for="origin-desc"
+							>Origin Link Description</label
+						>
+						<input
+							class="form-control"
+							name="originDesc"
+							id="origin-desc"
+							type="text"
+						/>
+					</div>
+				</div>
+				<div class="row mb-3">
+					<div class="col">
+						<label class="form-label" for="link">Link</label>
+						<input
+							class="form-control"
+							name="link"
+							id="link"
+							type="url"
+						/>
+					</div>
+					<div class="col">
+						<label class="form-label" for="link-desc"
+							>Link Description</label
+						>
+						<input
+							class="form-control"
+							name="linkDesc"
+							id="link-desc"
+							type="text"
+						/>
+					</div>
+				</div>
+				<div class="row mb-3">
+					<div class="col">
+						<label class="form-label" for="date">Date</label>
+						<input
+							class="form-control"
+							name="date"
+							id="date"
+							type="date"
+							required
+						/>
+					</div>
+					<div class="col">
+						<label class="form-label" for="end-date"
+							>End Date</label
+						>
+						<input
+							class="form-control"
+							name="endDate"
+							id="end-date"
+							type="date"
+						/>
+					</div>
+				</div>
+				<button type="submit" class="btn btn-primary">Submit</button>
+			</form>
 		</main>
 		<script src="/scripts/form.js"></script>
 	</body>