mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-24 11:16:27 +02:00
feat: Move to static site
This commit is contained in:
Phuoc Nguyen
3
contents/_includes/follow.njk
Normal file
3
contents/_includes/follow.njk
Normal file
@@ -0,0 +1,3 @@
|
||||
<div class="follow">
|
||||
Follow me on <a class="follow__link" href="https://twitter.com/nghuuphuoc">Twitter</a> and <a class="follow__link" href="https://github.com/phuocng">GitHub</a> to get more useful contents.
|
||||
</div>
|
||||
65
contents/_includes/layouts/base.njk
Normal file
65
contents/_includes/layouts/base.njk
Normal file
@@ -0,0 +1,65 @@
|
||||
<!doctype html>
|
||||
<html lang="{{ metadata.language }}">
|
||||
<head>
|
||||
<title>{{ title or metadata.title }} - CSS Layout</title>
|
||||
<link rel="icon" href="/assets/favicon.png" type="image/png" />
|
||||
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml" />
|
||||
<link rel="mask-icon" href="/assets/mask-favicon.svg" color="#1975FF" />
|
||||
<meta charset="utf-8">
|
||||
<meta name="author" content="Nguyen Huu Phuoc" />
|
||||
<meta name="description" content="{{ title or metadata.title }}" />
|
||||
<meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:description" content="{{ title or metadata.title }}" />
|
||||
<meta name="twitter:site" content="@nghuuphuoc" />
|
||||
<meta name="twitter:title" content="{{ title or metadata.title }} - CSS Layout" />
|
||||
<meta property="og:description" content="{{ title or metadata.title }}" />
|
||||
<meta property="og:site_name" content="CSS Layout" />
|
||||
<meta property="og:title" content="{{ title or metadata.title }} - CSS Layout" />
|
||||
<meta property="og:url" content="https://csslayout.io" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
|
||||
<link rel="stylesheet" href="/styles/index.min.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap">
|
||||
</head>
|
||||
<body>
|
||||
{{ content | safe }}
|
||||
<div class="container">
|
||||
<footer class="footer">
|
||||
<div class="footer__col">
|
||||
<div class="footer__heading">My products</div>
|
||||
<ul class="footer__list">
|
||||
<li class="footer__item"><a class="footer__link" href="https://blur.page" target="_blank">BlurPage</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://formvalidation.io" target="_blank">Form Validation</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://intersectionobserver.io" target="_blank">IntersectionObserver Examples</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://react-pdf-viewer.dev" target="_blank">React PDF Viewer</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__col">
|
||||
<div class="footer__heading">Learning resources</div>
|
||||
<ul class="footer__list">
|
||||
<li class="footer__item"><a class="footer__link" href="https://1loc.dev" target="_blank">1 LOC</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://crossbrowser.dev" target="_blank">Cross Browser</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://csslayout.io" target="_blank">CSS Layout</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://getfrontend.tips" target="_blank">Front-end Tips</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://htmldom.dev" target="_blank">HTML DOM</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://thisthat.dev" target="_blank">this vs that</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer__col">
|
||||
<div class="footer__heading">Follow me</div>
|
||||
<ul class="footer__list">
|
||||
<li class="footer__item"><a class="footer__link" href="https://twitter.com/nghuuphuoc" target="_blank">Twitter</a></li>
|
||||
<li class="footer__item"><a class="footer__link" href="https://github.com/phuocng" target="_blank">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="footer__author">
|
||||
© 2020 — 2022<br>
|
||||
Nguyen Huu Phuoc.<br>
|
||||
All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
23
contents/_includes/layouts/post.njk
Normal file
23
contents/_includes/layouts/post.njk
Normal file
@@ -0,0 +1,23 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
---
|
||||
{% set previousPost = collections.sortByTitle | getPreviousCollectionItem(page) %}
|
||||
{% set nextPost = collections.sortByTitle | getNextCollectionItem(page) %}
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="header__breadcrumb">
|
||||
<a class="header__link" href="/">/css-layout</a>
|
||||
</div>
|
||||
<a class="header__link header__link--primary" href="https://github.com/phuocng/csslayout">GitHub {{ github.stargazers }}★</a>
|
||||
</div>
|
||||
<div class="post">
|
||||
<h1 class="post__heading">{{ title }}</h1>
|
||||
<div class="post__content">{{ content | safe }}</div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
{% if previousPost %}<a class="nav__item nav__item--prev" href="{{ previousPost.url }}">{{ previousPost.data.title }}</a>{% endif %}
|
||||
{% if nextPost %}<a class="nav__item nav__item--next" href="{{ nextPost.url }}">{{ nextPost.data.title }}</a>{% endif %}
|
||||
</div>
|
||||
{% include "follow.njk" %}
|
||||
</div>
|
||||
Reference in New Issue
Block a user