mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-04-26 01:49:23 -05:00
[blog]: Add syntax highlighting, styling for all elements, mobile support
This commit is contained in:
Monty
parent
7f1f293f0d
commit
f554a4c6a2
137
blogposts/test.md
Normal file
137
blogposts/test.md
Normal file
|
|
@ -0,0 +1,137 @@
|
||||||
|
---
|
||||||
|
title: "Test"
|
||||||
|
author: "Monty"
|
||||||
|
author_image: "https://www.github.com/montylion.png"
|
||||||
|
date: "January 20, 2038"
|
||||||
|
caption: "A post to test the styling of the various elements we might use (rename to _test.md before deploying the blog section)"
|
||||||
|
cover_image: "https://media.discordapp.net/attachments/413884110667251722/886474243662037062/image1.jpg"
|
||||||
|
---
|
||||||
|
|
||||||
|
A post to test the styling of the various elements we might use (rename to _test.md before deploying the blog section)
|
||||||
|
|
||||||
|
**bold**
|
||||||
|
|
||||||
|
[**bold url**](https://www.youtube.com/watch?v=HGoCNOFpWpo)
|
||||||
|
|
||||||
|
_italic_
|
||||||
|
|
||||||
|
[_italic url_](https://www.youtube.com/watch?v=HGoCNOFpWpo)
|
||||||
|
|
||||||
|
~strikethrough~
|
||||||
|
|
||||||
|
[~strikethrough url~](https://www.youtube.com/watch?v=HGoCNOFpWpo)
|
||||||
|
|
||||||
|
# h1
|
||||||
|
|
||||||
|
## h2
|
||||||
|
|
||||||
|
### h3
|
||||||
|
|
||||||
|
#### h4
|
||||||
|
|
||||||
|
##### h5
|
||||||
|
|
||||||
|
###### h6
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
| Element | Description |
|
||||||
|
| :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
|
| table | The table HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. |
|
||||||
|
| tuble | The tuble HTML element represents tubular data — that is, information presented in a totally gnarly and radical way. |
|
||||||
|
| table | A table is an item of furniture with a flat top and one or more legs, used as a surface for working at, eating from or on which to place things. |
|
||||||
|
|
||||||
|
| Element | Description |
|
||||||
|
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| table | The table HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. |
|
||||||
|
| tuble | The tuble HTML element represents tubular data — that is, information presented in a totally gnarly and radical way. |
|
||||||
|
| table | A table is an item of furniture with a flat top and one or more legs, used as a surface for working at, eating from or on which to place things. |
|
||||||
|
|
||||||
|
| Element | Description |
|
||||||
|
| -----------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
||||||
|
| table | The table HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. |
|
||||||
|
| tuble | The tuble HTML element represents tubular data — that is, information presented in a totally gnarly and radical way. |
|
||||||
|
| table | A table is an item of furniture with a flat top and one or more legs, used as a surface for working at, eating from or on which to place things. |
|
||||||
|
|
||||||
|
Yee haw 🤠
|
||||||
|
|
||||||
|
- list
|
||||||
|
- list
|
||||||
|
- list
|
||||||
|
- list
|
||||||
|
- list
|
||||||
|
|
||||||
|
69. list
|
||||||
|
1. list
|
||||||
|
1. list
|
||||||
|
1. list
|
||||||
|
1. list
|
||||||
|
|
||||||
|
- [ ] Unchecked checkbox
|
||||||
|
- [x] Checked checkbox
|
||||||
|
|
||||||
|
```js
|
||||||
|
class trueOrFalseObject {
|
||||||
|
constructor(trueOrFalse) {
|
||||||
|
this.trueOrFalse = trueOrFalse;
|
||||||
|
}
|
||||||
|
get trueOrFalse() {
|
||||||
|
return this.trueOrFalse();
|
||||||
|
}
|
||||||
|
trueOrFalse() {
|
||||||
|
return this.trueOrFalse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let objectWhichWeKnowIsTrue = new trueOrFalseObject(true);
|
||||||
|
|
||||||
|
function checkIfTrueOrFalse(objectToCheckIfTrueOrFalse) {
|
||||||
|
if (objectToCheckIfTrueOrFalse === objectWhichWeKnowIsTrue.trueOrFalse) {
|
||||||
|
return objectWhichWeKnowIsTrue.trueOrFalse;
|
||||||
|
console.log(
|
||||||
|
"Successfully checked if the object is true or false. Result: the object is true."
|
||||||
|
);
|
||||||
|
// For whatever reason this doesn't log, can't figure out why /s
|
||||||
|
} else {
|
||||||
|
objectWhichWeKnowIsTrue = new trueOrFalseObject(false);
|
||||||
|
if (objectToCheckIfTrueOrFalse === objectWhichWeKnowIsTrue.trueOrFalse) {
|
||||||
|
return objectWhichWeKnowIsTrue.trueOrFalse;
|
||||||
|
console.log(
|
||||||
|
"Successfully checked if the object is true or false. Result: the object is false."
|
||||||
|
);
|
||||||
|
// For whatever reason this doesn't log either, will probably ask on StackOverflow or something /s
|
||||||
|
} else {
|
||||||
|
// something went horribly wrong
|
||||||
|
}
|
||||||
|
objectWhichWeKnowIsTrue = new trueOrFalseObject(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const isTrueTrueOrFalse = checkIfTrueOrFalse(true);
|
||||||
|
const isfalseTrueOrFalse = checkIfTrueOrFalse(false);
|
||||||
|
|
||||||
|
const trueOrFalseJSON = {
|
||||||
|
true: isTrueTrueOrFalse,
|
||||||
|
false: isfalseTrueOrFalse,
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(trueOrFalseJSON);
|
||||||
|
|
||||||
|
// Ok but seriously don't run this for the love of god I feel sorry for writing this even as a joke
|
||||||
|
```
|
||||||
|
|
||||||
|
> The blockquote HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the cite element.
|
||||||
|
> > The blockquote HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the cite element.
|
||||||
|
> > > The blockquote HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the cite element.
|
||||||
|
|
||||||
|
<cite>Adapted from [blockquote: The Block Quotation element, from MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote)</cite>
|
||||||
|
|
||||||
|
<iframe src="https://www.youtube.com/embed/HGoCNOFpWpo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<video controls>
|
||||||
|
<source src="https://cdn.discordapp.com/attachments/413884110667251722/878216238940160040/video0.mov">
|
||||||
|
</video>
|
||||||
|
|
||||||
|
Blogposts whose filename starts with a \_ will not show up on the /blogs page, but will still be accessible from the url (keep in mind that the file is still going to be publicly accessible on GitHub).
|
||||||
|
|
@ -2,14 +2,13 @@
|
||||||
title: "Todo"
|
title: "Todo"
|
||||||
author: "Monty"
|
author: "Monty"
|
||||||
author_image: "https://www.github.com/montylion.png"
|
author_image: "https://www.github.com/montylion.png"
|
||||||
date: "19 January 2038"
|
date: "January 19, 2038"
|
||||||
caption: "A todo list"
|
caption: "A todo list (delete file when done)"
|
||||||
cover_image: "https://i.imgur.com/sOWLwO5.png"
|
cover_image: "https://i.imgur.com/sOWLwO5.png"
|
||||||
---
|
---
|
||||||
|
|
||||||
- <input type="checkbox" onclick="return false;">
|
A todo list (delete file when done)
|
||||||
Redesign by the one true design god jvs, then
|
- [ ] Redesign by the one true design god jvs
|
||||||
- <input type="checkbox" onclick="return false;">
|
- [x] Add mobile support
|
||||||
Add mobile support
|
- [x] Add css styling for all elements supported by markdown
|
||||||
- <input type="checkbox" onclick="return false;">
|
- [ ] Fix navbar
|
||||||
Add custom opengraph for each post
|
|
||||||
|
|
@ -3,7 +3,8 @@
|
||||||
"about": "About",
|
"about": "About",
|
||||||
"faq": "FAQ",
|
"faq": "FAQ",
|
||||||
"credits": "Credits",
|
"credits": "Credits",
|
||||||
"progress": "Progress"
|
"progress": "Progress",
|
||||||
|
"blog": "Blog"
|
||||||
},
|
},
|
||||||
"hero": {
|
"hero": {
|
||||||
"subtitle": "Game servers",
|
"subtitle": "Game servers",
|
||||||
|
|
|
||||||
|
|
@ -1,61 +1,51 @@
|
||||||
.blog-card {
|
.blog-card {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 1100px;
|
max-width: 1100px;
|
||||||
margin-top: 30px;
|
margin-bottom: 30px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: flex;
|
|
||||||
flex-flow: row nowrap;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .left {
|
.blog-card .post-info {
|
||||||
flex: 2 0 55%;
|
flex: 2 0 45%;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
}
|
|
||||||
|
|
||||||
.blog-card .right {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
border-radius: 0 10px 10px 0;
|
flex-flow: column;
|
||||||
height: 260px;
|
|
||||||
width: 45%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-card .right img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 0 10px 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-card h2 {
|
|
||||||
color: white;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-card p, .post-info {
|
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
.blog-card .date {
|
|
||||||
margin-bottom: 0;
|
.blog-card .post-info .title {
|
||||||
font-weight: bold;
|
color: white;
|
||||||
color: var(--text);
|
margin: 0;
|
||||||
}
|
}
|
||||||
.blog-card img {
|
|
||||||
|
.blog-card .post-info .caption {
|
||||||
border-radius: 4px;
|
margin: 4px 0 32px 0;
|
||||||
}
|
}
|
||||||
.blog-card .post-info {
|
|
||||||
|
.blog-card .pub-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
position: absolute;
|
margin-top: auto;
|
||||||
bottom: 40px;
|
|
||||||
}
|
}
|
||||||
.blog-card .post-info > * + * {
|
|
||||||
margin-left: .5em;
|
.blog-card .pub-info .date {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blog-card .pub-info > * {
|
||||||
|
margin-right: .5em;
|
||||||
|
margin-top: .2em;
|
||||||
|
}
|
||||||
|
|
||||||
.blog-card .profile {
|
.blog-card .profile {
|
||||||
display: inline-grid;
|
display: inline-grid;
|
||||||
grid-template-columns: 30px auto;
|
grid-template-columns: 30px auto;
|
||||||
|
|
@ -63,9 +53,44 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 32px; /* So the post doesn't shift when the image gets loaded */
|
height: 32px;
|
||||||
}
|
}
|
||||||
.blog-card .profile img {
|
.blog-card .profile img {
|
||||||
|
border-radius: 4px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card .cover {
|
||||||
|
flex: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.blog-card {
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
.blog-card .post-info {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
.blog-card .cover {
|
||||||
|
order: -1;
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.blog-card {
|
||||||
|
|
||||||
|
max-width: none;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
width: 90%;
|
||||||
|
margin: 35px auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,58 +1,160 @@
|
||||||
.blog-card {
|
.blog-card {
|
||||||
padding: 60px;
|
padding: 60px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 1100px;
|
max-width: 1100px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card h1,
|
||||||
|
.blog-card h2,
|
||||||
|
.blog-card h3,
|
||||||
|
.blog-card h4,
|
||||||
|
.blog-card h5,
|
||||||
|
.blog-card h6,
|
||||||
|
.blog-card strong,
|
||||||
|
.blog-card a,
|
||||||
|
.blog-card a * {
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .title {
|
.blog-card .title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card p, .post-info {
|
.blog-card p,
|
||||||
color: var(--text-secondary);
|
.post-info {
|
||||||
margin-bottom: 30px;
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
.blog a {
|
.blog a {
|
||||||
color: var(--text-secondary);
|
color: var(--text-secondary);
|
||||||
}
|
}
|
||||||
.blog-card .date {
|
.blog-card .date {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
|
||||||
.blog-card iframe {
|
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 16/9;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card img {
|
.blog-card img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin: 10px auto;
|
max-height: 800px;
|
||||||
display: block;
|
margin: 10px auto;
|
||||||
|
display: block;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
.blog-card img.emoji {
|
||||||
|
display: inline;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card video {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card iframe {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card table {
|
||||||
|
border-radius: 4px;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: #31375E;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
.blog-card table th {
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: #3F4778;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.blog-card table td {
|
||||||
|
padding: 8px 12px;
|
||||||
|
vertical-align: top;
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
.blog-card table tr:nth-child(even) {
|
||||||
|
background: #2A2F50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card pre code {
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card input[type="checkbox"] {
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--btn-secondary);
|
||||||
|
padding: 12px;
|
||||||
|
margin: 4px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
vertical-align: -60%;
|
||||||
|
}
|
||||||
|
.blog-card input[type="checkbox"]:checked {
|
||||||
|
content: 'checkboxtest';
|
||||||
|
background: no-repeat center/contain url(../images/check.svg), var(--btn-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card hr {
|
||||||
|
border: 1px solid var(--text-secondary);
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-card blockquote {
|
||||||
|
border-left: 2px solid var(--text-secondary);
|
||||||
|
padding: 8px 24px;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-card .post-info {
|
.blog-card .post-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.blog-card .post-info > * + * {
|
.blog-card .post-info > * + * {
|
||||||
margin-left: .5em;
|
margin-left: 0.5em;
|
||||||
}
|
}
|
||||||
.blog-card .profile {
|
.blog-card .profile {
|
||||||
display: inline-grid;
|
display: inline-grid;
|
||||||
grid-template-columns: 30px auto;
|
grid-template-columns: 30px auto;
|
||||||
grid-gap: 10px;
|
grid-gap: 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 52px; /* So the post doesn't shift when the image gets loaded */
|
height: 52px;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
@media screen and (max-width: 800px) {
|
||||||
margin-top: 80px;
|
.blog-card {
|
||||||
|
padding: 60px;
|
||||||
|
margin: 0;
|
||||||
|
max-width: none;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
width: 90%;
|
||||||
|
margin: 35px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.blog-card {
|
||||||
|
padding: 40px 5vw;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
91
public/assets/css/highlightjs.css
Normal file
91
public/assets/css/highlightjs.css
Normal file
|
|
@ -0,0 +1,91 @@
|
||||||
|
/**
|
||||||
|
* Adapted from Shades of Purple Theme — for Highlightjs.
|
||||||
|
*
|
||||||
|
* @author (c) Ahmad Awais <https://twitter.com/mrahmadawais/>
|
||||||
|
* @link GitHub Repo → https://github.com/ahmadawais/Shades-of-Purple-HighlightJS
|
||||||
|
* @version 1.5.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
background: var(--btn-secondary);
|
||||||
|
color: #e3dfff;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-subst {
|
||||||
|
color: #e3dfff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title {
|
||||||
|
color: #fad000;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-name {
|
||||||
|
color: #a1feff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-tag {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attr {
|
||||||
|
color: #f8d000;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-section {
|
||||||
|
color: #fb9e00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword {
|
||||||
|
color: #fb9e00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-addition,
|
||||||
|
.hljs-code,
|
||||||
|
.hljs-regexp,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo,
|
||||||
|
.hljs-template-tag,
|
||||||
|
.hljs-quote,
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #4cd213;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-meta,
|
||||||
|
.hljs-meta .hljs-string {
|
||||||
|
color: #fb9e00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment {
|
||||||
|
color: #ac65ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-number {
|
||||||
|
color: #fa658d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
@ -659,7 +659,7 @@ footer {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
@media screen and (max-width: 550px) {
|
||||||
.selected-locale .locale-names {
|
.selected-locale .locale-names {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -670,6 +670,10 @@ footer {
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.locale-dropdown {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 400px) {
|
@media screen and (max-width: 400px) {
|
||||||
|
|
|
||||||
1
public/assets/images/check.svg
Normal file
1
public/assets/images/check.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||||
|
After Width: | Height: | Size: 254 B |
|
|
@ -20,6 +20,7 @@ router.get('/', async (request, response) => {
|
||||||
// We get the info for each blogpost, ignoring the ones starting with _
|
// We get the info for each blogpost, ignoring the ones starting with _
|
||||||
const postList = fileList
|
const postList = fileList
|
||||||
.filter(filename => !filename.startsWith('_'))
|
.filter(filename => !filename.startsWith('_'))
|
||||||
|
.filter(filename => filename.endsWith('.md')) //Ignores other files/folders
|
||||||
.map((filename) => {
|
.map((filename) => {
|
||||||
const slug = filename.replace('.md', '');
|
const slug = filename.replace('.md', '');
|
||||||
const rawPost = fs.readFileSync(path.join('blogposts', `${filename}`), 'utf-8');
|
const rawPost = fs.readFileSync(path.join('blogposts', `${filename}`), 'utf-8');
|
||||||
|
|
@ -28,6 +29,7 @@ router.get('/', async (request, response) => {
|
||||||
slug, postInfo
|
slug, postInfo
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
postList.sort((a, b) => {
|
postList.sort((a, b) => {
|
||||||
return new Date(b.postInfo.date) - new Date(a.postInfo.date);
|
return new Date(b.postInfo.date) - new Date(a.postInfo.date);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -14,10 +14,10 @@
|
||||||
|
|
||||||
{{#each postList }}
|
{{#each postList }}
|
||||||
<a href="/blog/{{this.slug}}" class="purple-card blog-card">
|
<a href="/blog/{{this.slug}}" class="purple-card blog-card">
|
||||||
<div class="left">
|
<div class="post-info">
|
||||||
<h2>{{{ this.postInfo.title }}}</h2>
|
<h2 class="title">{{{ this.postInfo.title }}}</h2>
|
||||||
<p>{{{ this.postInfo.caption }}}</p>
|
<p class="caption">{{{ this.postInfo.caption }}}</p>
|
||||||
<div class="post-info">
|
<div class="pub-info">
|
||||||
<span>Published by</span>
|
<span>Published by</span>
|
||||||
<div class="profile">
|
<div class="profile">
|
||||||
<img class="profile-picture" src="{{{ this.postInfo.author_image }}}" alt>
|
<img class="profile-picture" src="{{{ this.postInfo.author_image }}}" alt>
|
||||||
|
|
@ -27,8 +27,7 @@
|
||||||
<span class="date">{{{ this.postInfo.date }}}</span>
|
<span class="date">{{{ this.postInfo.date }}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="cover" style="background: no-repeat center/cover url({{this.postInfo.cover_image}}">
|
||||||
<img src="{{this.postInfo.cover_image}}" class="cover" />
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
|
|
|
||||||
|
|
@ -23,4 +23,9 @@
|
||||||
|
|
||||||
{{> footer }}
|
{{> footer }}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
|
||||||
|
<link rel="stylesheet" href="/assets/css/highlightjs.css">
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
|
||||||
|
<script>hljs.highlightAll();</script>
|
||||||
|
|
@ -29,6 +29,7 @@
|
||||||
<a href="/#faq">{{ locale.nav.faq }}</a>
|
<a href="/#faq">{{ locale.nav.faq }}</a>
|
||||||
<a href="/#credits">{{ locale.nav.credits }}</a>
|
<a href="/#credits">{{ locale.nav.credits }}</a>
|
||||||
<a href="/progress" class="keep-on-mobile">{{ locale.nav.progress }}</a>
|
<a href="/progress" class="keep-on-mobile">{{ locale.nav.progress }}</a>
|
||||||
|
<a href="/blog" class="keep-on-mobile">{{ locale.nav.blog }}</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Ordered the locales in the same way YouTube's language selector orders them -->
|
<!-- Ordered the locales in the same way YouTube's language selector orders them -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user