Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wd-177: add more 11ty api #210

Merged
merged 6 commits into from
Nov 22, 2023
Merged

wd-177: add more 11ty api #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9f4cdd1
ci: add prettier for njk files
what1s1ove Nov 21, 2023
18597d0
refactor: add layouts and includes to njk files wd-177
what1s1ove Nov 21, 2023
3502933
chore: add robots.txt wd-177
what1s1ove Nov 22, 2023
16535e3
chore: add globals & manifest.json wd-177
what1s1ove Nov 22, 2023
fc579a8
chore: add header wd-177
what1s1ove Nov 22, 2023
e0bb10a
ci: add njk files to eslint wd-177
what1s1ove Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
source/manifest.njk
4 changes: 2 additions & 2 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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:
Expand Down
4 changes: 4 additions & 0 deletions eleventy.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down Expand Up @@ -225,7 +226,10 @@ let init = (config) => {
return {
dataTemplateEngine: `njk`,
dir: {
data: `data`,
includes: `includes`,
input: `source`,
layouts: `layouts`,
output: `build`,
},
htmlTemplateEngine: `njk`,
Expand Down
2 changes: 1 addition & 1 deletion lint-staged.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`,
}
Expand Down
6 changes: 6 additions & 0 deletions prettier.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ let config = {
singleQuote: false,
},
},
{
files: `*.njk`,
options: {
'parser': `html`,
},
},
],
plugins: [`prettier-plugin-jsdoc`],
printWidth: 80,
Expand Down
5 changes: 5 additions & 0 deletions source/data/global.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
description: `Interface Developer`,
domain: `https://whatislove.dev`,
title: `Vladyslav Zubko`,
}
36 changes: 36 additions & 0 deletions source/includes/social-list.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
52 changes: 52 additions & 0 deletions source/layouts/page.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
14 changes: 14 additions & 0 deletions source/manifest.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
10 changes: 0 additions & 10 deletions source/manifest.webmanifest
View file
Open in desktop

This file was deleted.

185 changes: 127 additions & 58 deletions source/pages/form.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Loading
Loading