Blog - Next.js - Chapter #2 - Styles
In this chapter I migrate from Css to Scss and prepare one Html simple template for my single post view to see how all the elements are rendered, including links, images and Highlight for pieces of code.
2.1 Css to Scss
In order to install Sass I run:
node ➜ /workspaces/misenplace.node-main/blog (dev-chapter-2-styles) $ yarn add sass
I want to rename file blog/styles/globals.css
to globals.scss
and update blog/pages/_app.tsx
accordingly:
// import '../styles/globals.css';
import '../styles/globals.scss';
import type { AppProps } from 'next/app';
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;
2.2 Simple post template
I want to prepare one simple template for my single post view, so I create new blog/pages/custom-template.tsx
:
import Image from 'next/image'; /* 1 */
import Link from 'next/link'; /* 2 */
export default function CustomTemplate() {
return (
<div className="site-container">
<header className="site-header">site-header</header>
<main className="site-main">
<article>
<h1>Heading 1 - Post simple template</h1>
<div className="entry-meta">
<ul className="posted-on">
<li>
<time className="entry-date published">July 31, 2021</time>
</li>
<li>
(Last modified:{' '}
<time className="entry-date lastmod">July 31, 2021</time>)
</li>
</ul>
<ul className="post-categories">
<li>
<a href="/categories/category-name">category</a>
</li>
<li>
<a href="/categories/category-name">category</a>
</li>
</ul>
<ul className="post-tags">
<li>
<a href="/tags/tag-name">tag</a>
</li>
<li>
<a href="/tags/tag-name">tag</a>
</li>
</ul>
</div>
<div>
<div className="excerpt">
This is just <strong>plain Html</strong> simple template to show
most of the styles I want to use for my anotations.
</div>
<h2>Heading 2 - Title</h2>
{/*
Note I add inline style css here because I still don't have
enough Css support structures
*/}
<p style={{ textAlign: 'center' }}>
{/* 1 */}
{/*<img src="/images/nextjs-logo.svg" alt="Next.js" />*/}
<Image
src="/images/nextjs-logo.svg"
height={500}
width={(1212 * 500) / 734}
alt="Next.js"
className="color-text-screen-filter"
/>
</p>
<p>
For simple console commands I will use <code>code Html tag</code>.
</p>
<pre className="highlighjs">
<code className="typescript">
{`const Home: NextPage = () => {
import '../styles/globals.scss'; /*{ 1 }*/
import type { AppProps } from 'next/app'; /*{ 2 }*/
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default MyApp;`}
</code>
</pre>
<p>
<code>
{/*Comments inside children section of tag should be placed inside braces
react/jsx-no-comment-textnodes*/}
{'/'}*{1}*{'/'}
</code>{' '}
I want to do specific comments to some code lines.
</p>
<p>
<code>
{'/'}*{2}*{'/'}
</code>{' '}
I want to do specific comments to some code lines.
</p>
<pre>
<code className="bash">{`yarn dev`}</code>
</pre>
<blockquote>
I want to use Html <code>blockquote</code> as well.
</blockquote>
<h3>Heading 3 - Unordered lists</h3>
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
<h4>Heading 4 - Ordered lists</h4>
<hr />
<ol>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ol>
</div>
</article>
</main>
{/* 2 */}
{/*<a href="/">← Back to home</a>*/}
<Link href="/">
<a>← Back to home</a>
</Link>
<footer className="site-footer">site-footer</footer>
</div>
);
}
This is just plain html template to see how I want to render all possible html tags in any post, including basically:
-
Headings: (Remember line break in Markdown is two or more spaces at the end of the line)
<h1>
,<h2>
,<h3>
,<h4>
-
Links:
<a>
-
Blockquotes:
<blockquote>
-
Horizontal rule:
<hr>
-
Unordered and ordered lists:
<ul>
,<ol>
-
Code and preformatted text:
<code>
,<pre>
-
Paragraphs:
<p>
-
Images:
<img>
And now I update blog/pages/index.tsx
to add a link to Custom Template:
import Link from 'next/link';
export default function Home() {
return (
<>
<h1>Home</h1>
<Link href="/custom-template">
<a>Custom template</a>
</Link>
</>
);
}
2.2.1 Svg images
To see how images are rendered i also include new Svg file in blog/public/images/nextjs-logo.svg
in which I've recreated the Next.js logo myself:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1212.2428" height="734.28168" viewBox="0 0 320.73924 194.2787" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<path style="stroke:#000000;stroke-width:4.7625;stroke-linecap:round;" d="m 145.38925,51.36502 c 17.93955,24.88523 60.10357,87.10579 63.86926,90.21949" />
<path style="stroke:#000000;stroke-width:4.7625;stroke-linecap:round;" d="M 142.62081,139.6091 C 157.88996,120.98151 235.77325,11.58027 242.17853,2.3812499" />
<path style="fill:none;stroke:#000000;stroke-width:4.7625;stroke-linecap:round;stroke-linejoin:round;" d="M 2.3812499,141.06804 C 4.5155099,113.91862 5.7817659,74.46688 3.4891839,51.88185 18.506696,71.51447 73.564593,163.33349 98.619519,191.89744" />
<path style="fill:none;stroke:#000000;stroke-width:4.7625;stroke-linecap:round;stroke-linejoin:round;" d="M 135.81833,53.29224 H 79.464092 c -1.912236,14.19094 1.740617,64.75503 -1.567066,83.21049 24.039114,0 43.210054,-0.42687 55.766134,1.16129" />
<path style="stroke:#000000;stroke-width:4.7625;stroke-linecap:round;" d="M 75.466256,94.70942 C 91.170829,91.74558 129.39201,91.43381 135.04046,93.28824" />
<path style="stroke:#000000;stroke-width:4.7625;stroke-linecap:round;" d="m 212.33832,55.01549 c 12.83047,-0.33107 59.63207,-1.56141 65.36141,-0.51732" />
<path style="stroke:#000000;stroke-width:4.7625;stroke-linecap:round;" d="m 247.85674,52.42948 c 3.2254,17.61345 3.37224,69.01632 -0.29337,84.22343" />
<path style="stroke:#000000;stroke-width:3;stroke-linecap:round;" d="m 278.00529,132.52946 c 0.82418,-1.54154 5.84724,-4.63148 5.84724,-0.27435" />
<path style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;" d="m 300.77486,110.20393 c 1.12401,6.05568 0.79352,22.13927 -2.63384,22.76372 -3.42736,0.62444 -8.74072,-4.36621 -8.26601,-7.34677" />
<path style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;" d="m 318.35801,110.03221 c -5.53484,0.72912 -14.17809,8.62325 -7.6767,10.73119 6.5014,2.10793 8.25762,7.16052 0.95004,10.20524" />
</svg>
At this point, clean code standards are claimed as well for Svg files!
2.2.2 Styles
All the classes in this template are defined in styles folder, in the corresponding dev-chapter-2-styles branch, up in my repository at GitHub. So I will just download styles
directory from this branch into my blog/styles
folder, making sure to replace blog/styles/globals.scss
file.
2.2.2.1 Minireset
In blog/styles/normalize/_normalize.scss
I am using minireset.css by Jeremy Thomas with some small modifications by myself.
2.2.2.2 Nord
I also include Nord theme, and specifically Nord highlight.js, including nord.css code into blog/styles/nord-highlightjs/_nord.scss
.
2.2.2.3 "Transform black into any given color using only CSS filters" strategy.
In order to change Svg color I will use same strategy implemenmted in this other repo Css Filter Generator by myself.
2.3 Highlight.js
I want to use Highlight.js, so following How to use Highlight.js on a Next.js site fisrt I run:
node ➜ /workspaces/misenplace.node-main/blog (dev-chapter-2-styles) $ yarn add highlight.js
And then I update my blog/pages/custom-template.tsx
:
import Image from 'next/image';
import Link from 'next/link';
import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
import React, { useEffect } from 'react';
export default function CustomTemplate() {
useEffect(() => {
// hljs.initHighlighting(); // Deprecated as of 10.6.0. initHighlighting() deprecated. Use highlightAll() now.
hljs.highlightAll();
}, []);
return (
<div className="site-container">
<header className="site-header">site-header</header>
{/* Keep the existing code here */}
Reference links
- Minireset - GitHub - A tiny modern CSS reset by Jeremy Thomas.
- Nord theme - An arctic, north-bluish color palette.
- Nord highlight.js - An arctic, north-bluish clean and elegant highlight.js theme.
- Css Filter Generator - "Transform black into any given color using only CSS filters" strategy.
- How to use Highlight.js on a Next.js site.
External links
- Css - Wikipedia - Cascading Style Sheets.
- Sass - Wikipedia - To know about Sass and Scss, and what is the difference.
- Svg - Wikipedia - Scalable Vector Graphics.
- highlight.js - JavaScript syntax highlighter with language auto-detection and zero dependencies.
- highlight.js - GitHub.