FEAT: Using hugo
This commit is contained in:
README.mdtailwind.config.js
archetypes
assets
astro.config.mjscontent
_index.md
hugo.tomlindex.htmlblog
DeepworkPart1.jpgDeepworkPart2.jpgDeepworkPart3.jpgDeepworkPart4.jpgDeepworkPart5.jpgDeepworkPart6.jpgThreaded-js.md_index.mddeepwork-review.mddigital-minimalism-review.mdthe-psychology-of-money.mdtherepublic-review.md
projects
layouts
netlify.tomlpackage-lock.jsonpackage.jsonpnpm-lock.yamlpostcss.config.jsquickstart/themes
src
components
App.jsxNavbar.astro
index.cssindex.jsxcore
pages
sections
Experience.jsxGitHubMark.jsxIntroduction.jsxProjectCard.jsxProjects.jsxRealtutor.jsxTensorcrypt.jsxWebdev.jsx
text
layouts
pages
themes/risotto
.gitignoreLICENSENEWS.mdREADME.mdtheme.toml
vite.config.jsarchetypes
config.tomlexampleSite
LICENSEconfig.tomlconfigTaxo.toml
content
layouts
static
images
layouts
static
css
about.csscolours.csscustom.cssfooter.cssheader.csslayout.csslogo.css
palettes
apprentice.cssbase16-dark.cssbase16-light.cssdracula.cssgruvbox-dark.cssgruvbox-light.cssmaterial.csspapercolor-dark.csspapercolor-light.csssolarized-dark.csssolarized-light.csstender.csstokyo-night-dark.csstokyo-night-light.csswindows-95-light.csswindows-95.css
risotto.csstypography.cssimages
@ -1,4 +0,0 @@
|
||||
# johncosta.tech
|
||||
|
||||
This is the repo for my personal website, with all my experience, projects and blog posts. Using Astro.
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
import { defineConfig } from "astro/config";
|
||||
import mdx from "@astrojs/mdx";
|
||||
import react from "@astrojs/react";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://example.com",
|
||||
integrations: [
|
||||
react(),
|
||||
tailwind({
|
||||
config: {
|
||||
path: "./tailwind.config.js",
|
||||
},
|
||||
}),
|
||||
mdx(),
|
||||
sitemap(),
|
||||
],
|
||||
});
|
||||
|
Before 
(image error) Size: 2.6 MiB After 
(image error) Size: 2.6 MiB
|
|
Before 
(image error) Size: 2.6 MiB After 
(image error) Size: 2.6 MiB
|
|
Before 
(image error) Size: 2.5 MiB After 
(image error) Size: 2.5 MiB
|
|
Before 
(image error) Size: 2.6 MiB After 
(image error) Size: 2.6 MiB
|
|
Before 
(image error) Size: 2.6 MiB After 
(image error) Size: 2.6 MiB
|
|
Before 
(image error) Size: 2.6 MiB After 
(image error) Size: 2.6 MiB
|
13
index.html
13
index.html
@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html 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" />
|
||||
<title>John Costa</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,4 +0,0 @@
|
||||
[[redirects]]
|
||||
from = "/*"
|
||||
to = "/index.html"
|
||||
status = 200
|
||||
10880
package-lock.json
generated
10880
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
35
package.json
35
package.json
@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "john.tech",
|
||||
"version": "1.0.0",
|
||||
"description": "Personal website",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"astro:build": "astro build",
|
||||
"astro:dev": "astro dev",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"author": "John Costa",
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^1.3.0",
|
||||
"autoprefixer": "^10.4.4",
|
||||
"postcss": "^8.4.5",
|
||||
"tailwindcss": "^3.0.2",
|
||||
"vite": "^2.9.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/typography": "^0.5.4",
|
||||
"@astrojs/mdx": "^0.9.0",
|
||||
"@astrojs/react": "^1.0.0",
|
||||
"@astrojs/sitemap": "^1.0.0",
|
||||
"@astrojs/tailwind": "^1.0.0",
|
||||
"astro": "^1.0.5",
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router": "^6.1.1",
|
||||
"react-router-dom": "^6.1.1"
|
||||
}
|
||||
}
|
||||
4459
pnpm-lock.yaml
generated
4459
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
Submodule quickstart/themes/risotto deleted from 49bd72f662
@ -1,23 +0,0 @@
|
||||
//============================================================
|
||||
// Essential Imports
|
||||
//============================================================
|
||||
|
||||
import React from "react";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
|
||||
//============================================================
|
||||
// Pages
|
||||
//============================================================
|
||||
|
||||
import FrontPage from "./pages/Front.page";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<FrontPage />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
};
|
||||
export default App;
|
||||
@ -1,23 +0,0 @@
|
||||
---
|
||||
const headings = [
|
||||
{
|
||||
name: 'Home',
|
||||
url: '/'
|
||||
},
|
||||
{
|
||||
name: 'Blog',
|
||||
url: '/blog'
|
||||
}
|
||||
]
|
||||
---
|
||||
<div class="w-full h-32 flex justify-center">
|
||||
<div class="w-full max-w-4xl h-full gap-2 flex justify-between">
|
||||
{headings.map((h) => (
|
||||
<div class="flex justify-center items-center">
|
||||
<a href={h.url} class="text-3xl text-snow-storm-300 cursor-pointer hover:text-3xl transition-all duration-500">
|
||||
{h.name}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,19 +0,0 @@
|
||||
//============================================================
|
||||
// Essential Imports
|
||||
//============================================================
|
||||
|
||||
import React from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
//============================================================
|
||||
// Component
|
||||
//============================================================
|
||||
|
||||
const Cdiv = ({ className, children }) => {
|
||||
return (
|
||||
<div className={clsx("flex justify-center items-center", className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Cdiv;
|
||||
@ -1,17 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const FadeComponent = ({ delay, children }) => {
|
||||
|
||||
return (
|
||||
<div className="w-full bg-polar-night-400">
|
||||
<div
|
||||
className={
|
||||
"w-full transition-all ease-in-out duration-500"
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default FadeComponent;
|
||||
@ -1,59 +0,0 @@
|
||||
//============================================================
|
||||
// Essential Imports
|
||||
//============================================================
|
||||
|
||||
import React from "react";
|
||||
import '../../index.css';
|
||||
|
||||
//============================================================
|
||||
// Imported Components
|
||||
//============================================================
|
||||
|
||||
import AppearText from "../text/AppearText";
|
||||
import FadeComponent from "../core/FadeComponent";
|
||||
import Introduction from "../sections/Introduction";
|
||||
import Experience from "../sections/Experience";
|
||||
import Projects from '../sections/Projects';
|
||||
|
||||
//============================================================
|
||||
// Component
|
||||
//============================================================
|
||||
|
||||
const DELAY = 0;
|
||||
|
||||
const FrontPage = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-screen bg-polar-night-400">
|
||||
<div className="w-full h-3/5 flex justify-center items-center">
|
||||
<div className="flex flex-col gap-4 justify-center items-center">
|
||||
<AppearText
|
||||
className="font-display font-bold text-7xl text-frost-400"
|
||||
text="JOHN COSTA"
|
||||
delay={DELAY}
|
||||
/>
|
||||
<AppearText
|
||||
className="font-display font-bold text-5xl text-frost-200"
|
||||
text="DEVELOPER"
|
||||
delay={DELAY * 2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<FadeComponent delay={DELAY * 2.5}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
<path
|
||||
className="fill-frost-200"
|
||||
d="M0,192L120,202.7C240,213,480,235,720,240C960,245,1200,235,1320,229.3L1440,224L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"
|
||||
></path>
|
||||
</svg>
|
||||
</FadeComponent>
|
||||
<FadeComponent delay={DELAY * 2.5}>
|
||||
<Introduction />
|
||||
<Experience />
|
||||
<Projects />
|
||||
</FadeComponent>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default FrontPage;
|
||||
@ -1,91 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import clsx from "clsx";
|
||||
import Tensorcrypt from "./Tensorcrypt";
|
||||
import Realtutor from "./Realtutor";
|
||||
import Webdev from './Webdev';
|
||||
|
||||
const Experience = () => {
|
||||
const [currentSection, setCurrentSection] = useState(0);
|
||||
const [animationClasses, setAnimationClasses] = useState("opacity-100");
|
||||
|
||||
const changeText = (index) => {
|
||||
setAnimationClasses("opacity-0");
|
||||
setTimeout(() => {
|
||||
setAnimationClasses("opacity-100");
|
||||
setCurrentSection(index);
|
||||
}, 250);
|
||||
};
|
||||
|
||||
/**
|
||||
* This could be done with React-router,
|
||||
* However this makes the animations easier - no need to over complciate it.
|
||||
*/
|
||||
const getText = (index) => {
|
||||
if (index == 0) {
|
||||
return <Tensorcrypt />;
|
||||
} else if (index == 1) {
|
||||
return <Realtutor />;
|
||||
} else {
|
||||
return <Webdev />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col justify-center items-center bg-frost-200 py-12">
|
||||
<div className="w-full flex md:flex-row flex-col p-4 max-w-5xl gap-4">
|
||||
<div className="w-full flex flex-col gap-4">
|
||||
<h1 className="text-7xl text-center font-display font-bold text-polar-night-400">
|
||||
Experience
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-3/4 flex justify-center px-4">
|
||||
<div className="w-full max-w-7xl flex bg-polar-night-400 py-4 rounded-md">
|
||||
<div className="w-12 flex flex-col justify-between items-center h-96 relative">
|
||||
<div className="w-8 h-8 flex justify-center items-center">
|
||||
<div
|
||||
className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
|
||||
onClick={() => changeText(0)}
|
||||
></div>
|
||||
</div>
|
||||
<div className="w-8 h-8 flex justify-center items-center">
|
||||
<div
|
||||
className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
|
||||
onClick={() => changeText(1)}
|
||||
></div>
|
||||
</div>
|
||||
<div className="w-8 h-8 flex justify-center items-center">
|
||||
<div
|
||||
className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
|
||||
onClick={() => changeText(2)}
|
||||
></div>
|
||||
</div>
|
||||
<div className="w-1 h-full bg-blue-500 absolute rounded-full"></div>
|
||||
</div>
|
||||
<div className="w-24 h-full flex flex-col justify-between">
|
||||
<div className="h-8 flex items-center">
|
||||
<p className="text-lg text-snow-storm-300">Tensorcrypt</p>
|
||||
</div>
|
||||
<div className="h-8 flex items-center">
|
||||
<p className="text-lg text-snow-storm-300">Real Tutor</p>
|
||||
</div>
|
||||
<div className="h-8 flex items-center">
|
||||
<p className="text-lg text-snow-storm-300">Web dev</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={clsx("w-full h-full p-4 flex flex-col items-center")}>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-3/4 flex flex-col items-center transition-all",
|
||||
animationClasses
|
||||
)}
|
||||
>
|
||||
{getText(currentSection)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Experience;
|
||||
@ -1,15 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const GitHubMark = ({ width, height }) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
export default GitHubMark;
|
||||
@ -1,61 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Introduction = () => {
|
||||
return (
|
||||
<div className="w-full flex h-auto justify-center items-center bg-frost-200">
|
||||
<div className="w-full flex md:flex-row flex-col p-4 max-w-5xl gap-4">
|
||||
<div className="w-full flex flex-col gap-4 font-display text-polar-night-400">
|
||||
<h1 className="text-7xl font-bold">Hi, I'm John</h1>
|
||||
<p className="text-xl">
|
||||
I am a BSc Computer Science student who loves to program. I a most
|
||||
intrested in full-stack development - taking an idea all the way to
|
||||
the end and creating a full application, I love working as part of a
|
||||
team and making project with friends. I am also a Linux Enthusiat
|
||||
and I run Garuda Linux as my main OS on all my machines.
|
||||
Furthermore, I am a private tutor for GCSE and A-level Maths and
|
||||
Computer Science.
|
||||
</p>
|
||||
<p className="text-xl">
|
||||
I have worked on an extensive number of projects, such as making my
|
||||
own tutoring company whilst at university, creating a web based
|
||||
revision application for my students, and creating the frontend for
|
||||
a{" "}
|
||||
<a
|
||||
href="https://tensor.software/"
|
||||
className="font-semibold hover:text-aurora-red text-aurora-orange transition-all underline cursor-pointer"
|
||||
>
|
||||
secure datasharing startup.
|
||||
</a>
|
||||
</p>
|
||||
<h2 className="text-3xl font-bold mt-16">
|
||||
Technologies I work with:
|
||||
</h2>
|
||||
<div className="w-full grid grid-cols-1 md:grid-cols-2 items-center px-8">
|
||||
<ul className="w-3/4 list-disc flex flex-col gap-2 text-lg">
|
||||
<li>JavaScript / TypeScript</li>
|
||||
<li className="ml-2">Both frontend and backend</li>
|
||||
<li>Node.js</li>
|
||||
<li>Golang</li>
|
||||
<li>React</li>
|
||||
<li>PostgreSQL</li>
|
||||
<li className="ml-2">
|
||||
Including hosting and managing my own databases
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="w-3/4 list-disc flex flex-col gap-2 text-lg">
|
||||
<li>Linux Management</li>
|
||||
<li className="ml-2">
|
||||
I have hosted and managed several linux servers
|
||||
</li>
|
||||
<li>MongoDB</li>
|
||||
<li>Java</li>
|
||||
<li>Wordpress</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Introduction;
|
||||
@ -1,48 +0,0 @@
|
||||
import React from "react";
|
||||
import GitHubMark from "./GitHubMark";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
const ProjectCard = ({ title, liveUrl, gitUrl, children }) => {
|
||||
const getLiveUrl = () => {
|
||||
if (liveUrl.length == 1) {
|
||||
return (
|
||||
<div className="w-full flex justify-center items-center h-12 rounded bg-aurora-orange text-polar-night-200 transition-all text-xl">
|
||||
No Live :(
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<a
|
||||
href={liveUrl}
|
||||
className="w-full flex justify-center items-center h-12 rounded bg-aurora-green text-polar-night-200 hover:bg-aurora-orange transition-all text-xl"
|
||||
>
|
||||
Live
|
||||
</a>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="min-h-[400px] w-full rounded-lg flex flex-col bg-polar-night-400 p-4 shadow-md justify-between">
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<h2 className="text-4xl text-snow-storm-100">{title}</h2>
|
||||
{children}
|
||||
</div>
|
||||
<div className="w-full flex items-center gap-2 text-lg">
|
||||
{getLiveUrl()}
|
||||
<a
|
||||
href={gitUrl}
|
||||
className="w-full flex justify-center items-center h-12 rounded bg-snow-storm-200 hover:bg-polar-night-100 transition-all"
|
||||
>
|
||||
<GitHubMark width="32" height="32" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ProjectCard.defaultProps = {
|
||||
title: "Default Title",
|
||||
liveUrl: "/",
|
||||
gitUrl: "/",
|
||||
};
|
||||
|
||||
export default ProjectCard;
|
||||
@ -1,77 +0,0 @@
|
||||
import React from "react";
|
||||
import ProjectCard from "./ProjectCard";
|
||||
|
||||
const Projects = () => {
|
||||
return (
|
||||
<div className="w-full flex flex-col justify-center items-center bg-frost-200 py-12">
|
||||
<div className="w-full flex flex-col p-4 max-w-screen-2xl gap-4">
|
||||
<h1 className="w-full text-7xl text-center font-display font-bold text-polar-night-400">
|
||||
Projects
|
||||
</h1>
|
||||
<div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<ProjectCard
|
||||
title="Real Tutor"
|
||||
liveUrl="https://realtutor.johncosta.tech/"
|
||||
gitUrl="https://github.com/JohnCosta27/RealTutorMERN"
|
||||
>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
A lesson and progress management system which allowed tutors at my
|
||||
company to schedule lessons, add repots and keep track of students
|
||||
progress. Built using the MERN stack.
|
||||
</p>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
Use the following credentitals to play around:
|
||||
</p>
|
||||
<ul className="text-lg text-snow-storm-100">
|
||||
<li>Username: 1@tutor.com</li>
|
||||
<li>Password: SafePassword123.</li>
|
||||
</ul>
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
title="Odin"
|
||||
liveUrl="https://odin.johncosta.tech/"
|
||||
gitUrl="https://github.com/JohnCosta27/Odin"
|
||||
>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
A revision tool which allows students to revise various subjects.
|
||||
Uses Auth0 for user sign ups.
|
||||
</p>
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
title="Restaurant ordering system"
|
||||
liveUrl="https://www.youtube.com/watch?v=BZY2Le_Szgg&t=1s&ab_channel=JohnCosta"
|
||||
gitUrl="https://github.com/JohnCosta27/"
|
||||
>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
A revision tool which allows students to revise various subjects.
|
||||
Year 2 Team Project, I was resposible for making the entire UI. I
|
||||
cannot release the source code, but there is a video.
|
||||
</p>
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
title="Disser"
|
||||
gitUrl="https://github.com/JohnCosta27/Disser-RoyalHackaway2022"
|
||||
>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
Royal Hackathon Project 2022. A real time social media which
|
||||
allows users to communicate with each other in real time. It also
|
||||
involves GPT-3 bots which communicate with each other and the
|
||||
users.
|
||||
</p>
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
title="Snake"
|
||||
gitUrl="https://github.com/JohnCosta27/Snake"
|
||||
liveUrl="https://johncosta27.github.io/Snake/"
|
||||
>
|
||||
<p className="text-xl text-snow-storm-100">
|
||||
My first big project. A classic snake game that adapts to the
|
||||
screen size you are on.
|
||||
</p>
|
||||
</ProjectCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Projects;
|
||||
@ -1,19 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Realtutor = () => {
|
||||
return (
|
||||
<div className="w-full flex flex-col items-center text-4xl text-snow-storm-300 gap-4">
|
||||
<h1>Real tutor</h1>
|
||||
<p className="text-xl">
|
||||
A company that I founded to provide online affordable tutoring in a
|
||||
series of subjects. I have and still am a private tutor and I wanted to
|
||||
grow my services and provide tutoring to more people, so I made a
|
||||
company where I could hire free lance tutors to teach subjects which I
|
||||
myself cannot.
|
||||
</p>
|
||||
<h2 className="text-3xl">Software Made</h2>
|
||||
<p className="text-xl">I made software to track students progress as well as students and tutors lessons, I used this to make sure I knew what all the students were doing and how they were doing.</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Realtutor;
|
||||
@ -1,15 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Tensorcrypt = () => {
|
||||
return (
|
||||
<div className="w-full flex flex-col items-center text-4xl text-snow-storm-300 gap-4">
|
||||
<h1>Tensorcrypt (2021 - 2022)</h1>
|
||||
<p className="text-xl">
|
||||
A secure data-sharing startup funded by CyberASAP, it provides zero
|
||||
knowledge data sharing services for componanies to share data in a
|
||||
completely encrypted way, as well as.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Tensorcrypt;
|
||||
@ -1,24 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const Webdev = () => {
|
||||
return (
|
||||
<div className="w-full flex flex-col items-center text-4xl text-snow-storm-300 gap-4">
|
||||
<h1>Free lance Web Development</h1>
|
||||
<p className="text-xl">
|
||||
I also work as a Free lance web developer, and I have worked on various
|
||||
projects such as:
|
||||
</p>
|
||||
<ul className="px-4 text-lg list-disc">
|
||||
<li>SCC Website (A security lab at my university).</li>
|
||||
<li>This website.</li>
|
||||
<li>Rio Illustrates (A portfolio website for a great artist).</li>
|
||||
</ul>
|
||||
<br />
|
||||
|
||||
<p className="text-xl">
|
||||
I also make Web Applications, these are under the projects section.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Webdev;
|
||||
@ -1,14 +0,0 @@
|
||||
import clsx from 'clsx';
|
||||
|
||||
const AppearText = ({ text, delay, className }) => {
|
||||
return (
|
||||
<>
|
||||
<h1
|
||||
className={clsx("transition-all ease-in-out duration-500", className)}
|
||||
>
|
||||
{text}
|
||||
</h1>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default AppearText;
|
||||
@ -1,5 +0,0 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -1,7 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import App from "./components/App";
|
||||
|
||||
import "./index.css";
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById("root"));
|
||||
@ -1,19 +0,0 @@
|
||||
---
|
||||
import Navbar from '../components/Navbar.astro';
|
||||
const { frontmatter } = Astro.props
|
||||
---
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Blog post</title>
|
||||
</head>
|
||||
<body class="flex flex-col items-center bg-polar-night-400">
|
||||
<Navbar />
|
||||
<div class="w-full max-w-4xl p-8 flex justify-center">
|
||||
<div class="w-full prose prose-invert">
|
||||
<h1 class="text-5xl">{frontmatter.title}</h1>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,28 +0,0 @@
|
||||
---
|
||||
import Navbar from '../components/Navbar.astro'
|
||||
|
||||
const posts = await Astro.glob('./posts/*.md');
|
||||
posts.sort((a, b) => {
|
||||
const splitA = a.frontmatter.date.split("/");
|
||||
const splitB = b.frontmatter.date.split("/");
|
||||
return new Date(splitB[2], splitB[1], splitB[0]).getTime() - new Date(splitA[2], splitA[1], splitA[0]).getTime()
|
||||
});
|
||||
---
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>John's Blog</title>
|
||||
</head>
|
||||
<body class="w-full flex flex-col items-center bg-polar-night-400">
|
||||
<Navbar />
|
||||
<div class="w-full max-w-4xl flex flex-col gap-4 p-4">
|
||||
{posts.map((post) => (
|
||||
<a href={post.url} class="flex flex-col border-frost-400 border-2 text-snow-storm-100 p-4 rounded-lg">
|
||||
<h1 class="text-2xl">{post.frontmatter.title}</h1>
|
||||
<p class="text-sm">{post.frontmatter.description}</p>
|
||||
<p class="text-sm">{post.frontmatter.date}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
import FrontPage from '../components/pages/FrontPage';
|
||||
import Navbar from '../components/Navbar.astro';
|
||||
---
|
||||
<html>
|
||||
<head>
|
||||
<title>John Costa</title>
|
||||
</head>
|
||||
<body class="w-full flex flex-col items-center bg-polar-night-400">
|
||||
<Navbar />
|
||||
<FrontPage></FrontPage>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before 
(image error) Size: 2.6 MiB |
Binary file not shown.
|
Before 
(image error) Size: 2.6 MiB |
Binary file not shown.
|
Before 
(image error) Size: 2.5 MiB |
Binary file not shown.
|
Before 
(image error) Size: 2.6 MiB |
Binary file not shown.
|
Before 
(image error) Size: 2.6 MiB |
Binary file not shown.
|
Before 
(image error) Size: 2.6 MiB |
@ -1,130 +0,0 @@
|
||||
---
|
||||
layout: '../../layouts/post.astro'
|
||||
title: 'Threaded JavaScript!'
|
||||
date: '10/04/2022'
|
||||
---
|
||||
|
||||
# Threaded Javascript
|
||||
|
||||
For a long time, my language of choice has been JavaScript (and recently TypeScript), this is for both frontend development as well as backend development.
|
||||
|
||||
I enjoy the simplicity of using the same language for both sides of a project and I especially like working with Node.js, a Javascript run time environment with a very sophisticated asynchronous event loop, which makes it perfect for applications such as RESTful APIs which access databases etc...
|
||||
|
||||
However, I have also done backend work using Golang, a strongly typed, compiled, very fast language with a vibrant community and a "do it yourself" attitude, quite the change from Javascript. And something I have touched and enjoyed playing with are go routines, which are a way to create very light weight threads. This works by calling a function as a "go routine", which I think is very elegant. This is managed by the go run-time environment, but it can spawn threads if it needs to - a nice abstraction which means I don't have to handle threads directly - but do have to handle go routines as if they ARE threads.
|
||||
|
||||
But anyways, it left me wondering if I could have threads in JavaScript, which sounds crazy but Node.js has support for this is "Worker Threads". These are threads managed by Node.js which can run a .js file and communicate with its parent - it is quite similar to go routines.
|
||||
|
||||
So I made a small program to calculate the same MD5 hash 1 million times:
|
||||
|
||||
(Note that these files are .mjs files (module JavaScript), Node.js will only run them if you have .mjs as the file extension - All they do is allow the "import" syntax and a few other things).
|
||||
|
||||
```js
|
||||
import crypto from 'crypto';
|
||||
|
||||
console.time("Single-Thread");
|
||||
|
||||
const n = 10000000;
|
||||
const string = "Hello World";
|
||||
|
||||
for (let i = 0; i < n; i++) {
|
||||
const hash = crypto.createHash('md5').update(string).digest('hex');
|
||||
}
|
||||
|
||||
console.timeEnd("Single-Thread");
|
||||
|
||||
```
|
||||
|
||||
Running this program gave me this result:
|
||||
```
|
||||
Single-Thread: 1.139s
|
||||
```
|
||||
|
||||
I then modified my code to use worker threads. This splits the work load into 8 worker threads, it gives each thread a start and an end range for the hash - which in total makes 1 million hashes.
|
||||
|
||||
```js
|
||||
import { fileURLToPath } from 'url';
|
||||
import { Worker, isMainThread, parentPort, workerData } from 'worker_threads';
|
||||
import crypto from 'crypto';
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const n = 1000000;
|
||||
const THREAD_NUM = 8;
|
||||
const string = "Hello World";
|
||||
|
||||
if (isMainThread) {
|
||||
|
||||
const threads = new Set();
|
||||
for (let i = 0; i < THREAD_NUM; i++) {
|
||||
threads.add(new Worker(__filename, {workerData: {
|
||||
start: i * (n / THREAD_NUM),
|
||||
end: (i * (n / THREAD_NUM)) + n / THREAD_NUM}
|
||||
}))
|
||||
}
|
||||
|
||||
console.time("Thread");
|
||||
|
||||
for (const worker of threads) {
|
||||
worker.on('message', msg => console.log(msg));
|
||||
worker.on('exit', () => {
|
||||
threads.delete(worker);
|
||||
if (threads.size === 0) {
|
||||
console.timeEnd("Thread");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
for (let i = workerData.start; i < workerData.end; i++) {
|
||||
const hash = crypto.createHash('md5').update(string).digest('hex');
|
||||
}
|
||||
|
||||
parentPort.postMessage('Done!');
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
This results in the following output:
|
||||
|
||||
```js
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Thread: 335.294ms
|
||||
```
|
||||
|
||||
A 4x increase in speed. There is a delay because worker threads actually spawn threads and therefore there is a bit of overhead with the syscall to create these threads.
|
||||
|
||||
This is very clear if we changed the number of hashes to 10 000.
|
||||
|
||||
### Single Thread
|
||||
```
|
||||
Single-Thread: 23.476ms
|
||||
```
|
||||
|
||||
### 8 Worker Threads
|
||||
```
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Done!
|
||||
Thread: 70.337ms
|
||||
```
|
||||
|
||||
As you can see the single thread beat the 8 threads by almost 4x. This is because it is costly to create a thread outright which is what Node.js seems to be doing.
|
||||
|
||||
## Disclaimer
|
||||
The Node.js crypto module is basically a wrapper for the native OpenSSL hashing functions, so I suspect that Node.js is just making a very fast C program do the hard work - but never the less it works very well.
|
||||
|
||||
|
||||
## Conclusion
|
||||
Node.js is a very solid backend technology to perform parallalism, it is not just limited to making RESTful APIs. It can competes with strongly typed and compiled languages such as golang.
|
||||
@ -1,18 +0,0 @@
|
||||
---
|
||||
title: "Deepwork - Cal Newport"
|
||||
date: "16/08/2022"
|
||||
---
|
||||
|
||||
This review is a little different because I wrote it down on paper, here are the pages:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,69 +0,0 @@
|
||||
---
|
||||
layout: '../../layouts/post.astro'
|
||||
title: 'Digital Minimalism - Cal Newport'
|
||||
date: '05/09/2022'
|
||||
---
|
||||
|
||||
# Digital Minimalism - Cal Newport
|
||||
Digital Minimalism, by Cal Newport - The author of the very popular "Deep work", is a book describing a problem, which is our digital addictions and malpractices, and also how we can adopt the philosophy of "Digital Minimalism", in order to make us use technology in a healthy, and productive way.
|
||||
|
||||
The book opens up by talking about how many of us feel trapped by technology, we have developed unhealthy habits of constant connection and constant scrolling. There have been many articles written about this, and many people have this feeling that technology isn't working for them, but it seems that we are the slaves to it. This is good business on the side of giant technology companies such as Facebook (Meta), which make money from our attention, it is only natural they want us to be constantly attached to our phones.
|
||||
|
||||
Before reading this book, I had thought about this - specially when it comes to short form content such as TikTok, Instagram Reels, you name it... I was extremely concerned about my own well being, because I had never felt such a pull from a piece of social media, I always used it fairly sparingly - but when Instagram Reels came out, I was hooked, pulling around 1 - 2 hours a day just on these short videos, and it showed. I couldn't concentrate on my online lectures, I couldn't learn as quickly as I had done before, nor could I concentrate for as long, so I stopped it. The first step came a while ago, but I used to text my partner on Instagram DMs, and I asked if she would mind switching to Telegram, and the simple act of not opening the app slashed my screen time in half. I am rambling let's get back on track.
|
||||
|
||||
## Digital Minimalism and Digital Declutter
|
||||
Digital Minimalism as Newport describes it is:
|
||||
|
||||
> Digital Minimalism is a philosophy towards technology which prioritises digital use to a small number of deeply thought out and efficient activities.
|
||||
|
||||
He backs this up with the following points (I won't go into too much detail here).
|
||||
- Clutter is costly
|
||||
- Optimisation is important: Each tool should be finely tool to help you get your work done / have proper leisure.
|
||||
- Intentional is satisfying: Doing things because you want to them is by itself satisfying.
|
||||
|
||||
Newport suggests that we undergo a 30 day digital de-clutter where we remove all non-essential digital technologies from our life. This includes Netflix, most apps (excluding work), TV, and most importantly: Social Media. Newport then suggests that after the 30 days we start to reintroduce some technologies, but we do so with every intention of using them properly, therefore we apply the principles of Digital Minimalism. Newport claims this is important because it shows us what we need and what we don't in our lives.
|
||||
|
||||
I think this might be slightly extreme, I think you can see problems in your current tools and act accordingly, however I haven't had a huge problem with technology - perhaps someone with a greater addiction would benefit from the complete de-clutter.
|
||||
|
||||
## Practices of Digital Minimalism
|
||||
### Spend time alone
|
||||
With the rise of modern technology, we have almost completely removed solitude. Think about it, when was the last time you were truly alone? No music, no TV, no work, just you? This was a scary realisation for me because the answer was none. I am either always surrounded by friends or see them on social media, or I am listening to music or watching netflix when I'm alone, this means I have spent very little time alone.
|
||||
|
||||
There are great examples that Newport gives in the book about why Solitude is important, but my favourite is that we have very complicated social circuits in our brain, and they are not meant to be on all the time, but they are now a days, constant notifications, alerts, pings, etc...
|
||||
|
||||
Spending time alone can benefit your mental health and it gives you time to realise the person you want to be and actually have a chat with yourself, something I believe (and so does Newport) to be of the utmost importance.
|
||||
|
||||
### Don't click like
|
||||
Clicking the like button on social media makes you more committed to social media, interacting with in any way makes you more invested in it, and in recent times we have all heard the odd family member say "Why didn't you like my post?", as clicking twice on a piece of glass shows that I really care for them.
|
||||
|
||||
Social media companies know this, that we now have a certain contract between each other to like and comment on each others posts, and this makes us waste more time online, scrolling to endless posts and double tapping, for most of us it is probably muscle memory, which is just horrifying.
|
||||
|
||||
The reason I read this book WAS because of how social media affected my mental health and how often I was spending on it, after reading the book I uninstalled all social media from my phone and I message my closes friends on WhatsApp or Telegram (or god forbid SMS). And most people will say that they "cannot do it", YES YOU CAN, just try... you'll realise that you don't even care about 90% of the people on social media and all you've been doing is distancing yourself from the relationships you actually want to maintain. Focus on the 10% of people you actually care about, go see them, call them, sending a "heart" on Instagram every once in a while is no way to maintain a relationship.
|
||||
|
||||
### Reclaim leisure
|
||||
The one I struggle with the most.
|
||||
|
||||
> Prioritise demanding activity over passive consumption
|
||||
|
||||
Our leisure habits, most often consist of scrolling through Twitter or watching Netflix. This stuff is fine but it has to be kept in check, if this is all we do then it is not okay, you need to have a proper leisure activity, a club or anything really to keep you busy when you are not working, something you really enjoy doing. These also have the benefit of being extremely satisfying compared to just watching Netflix.
|
||||
|
||||
>Seek activities, that require real-world, social interaction
|
||||
|
||||
I, just like many others, love working remotely and love playing some video games with friends (or even by myself) however this cannot replace the leisure you have from playing chess over the board, or going to a badminton club where you have to socialise with your doubles partner. Social interaction in leisure is extremely important.
|
||||
|
||||
|
||||
### Join the attention resistance
|
||||
Many giant social media companies are fighting for your attention, that is their business model, they need your eyes, on your phone, to sell you ads. Don't give it to them.
|
||||
|
||||
Easier said then done but Newport does suggest a couple of things to get you started:
|
||||
- Delete social media from your phone (check it on your computer instead).
|
||||
- Use social media like a profession (use it to check on your friends, message someone, don't waste time scrolling).
|
||||
- Embrace slow media (long articles, something that really requires your full attention).
|
||||
- Dumb down your phone (I will go into this last one).
|
||||
|
||||
Your phone, is the closest object to you, maybe the closest object humans have ever had. We are rarely 1 meter from our phone. Phones are amazing inventions, everything you could ever know is just at your finger tips on a device many times more powerful than the moon lander.
|
||||
|
||||
However, it can also be extremely addictive to just stare at the screen for hours, so I (and Newport) suggest you dumb down your phone. For me, I installed Niagra launcher (I have a OnePlus 8 running Android 11), this is a super simple launcher that lists your favourite apps, and the rest are hidden, that's it. This means when you open the phone you go straight to the app you want, you don't scroll for no reason. Something else this has helped me with is removing the apps I was somewhat addicted to (Instagram and YouTube), and put them out of sight, making me less likely to open them.
|
||||
|
||||
## Conclusion
|
||||
Digital Minimalism is a great book that I think most people should read, it really exposes our addiction to technology and social media, and how it just isn't okay we spend so much time on it. It helped me form better, healthier habits with technology and in turn I am much happier, more productive, and spend more time doing more meaningful things - But I won't like, I still binge netflix from time to time, I still watch YouTube a TON, but this book has made me much more cautious about this, I can make sure that at least I don't use social media, or that I am aware of how much time I am spending on my phone.
|
||||
@ -1,38 +0,0 @@
|
||||
---
|
||||
layout: "../../layouts/post.astro"
|
||||
title: "Huffmanz - Huffman Encoding Implementation in Zig"
|
||||
date: "21/09/2023"
|
||||
---
|
||||
|
||||
Link to Repo: [https://github.com/JohnCosta27/Huffmanz](https://github.com/JohnCosta27/Huffmanz)
|
||||
Link to Video: [https://www.youtube.com/watch?v=D5l5GUuNXB8&ab_channel=JohnCosta](https://www.youtube.com/watch?v=D5l5GUuNXB8&ab_channel=JohnCosta)
|
||||
|
||||
[Huffman Encoding](https://en.wikipedia.org/wiki/Huffman_coding) is an algorithm for compressing text, using a binary tree to shorted the number of bits needed to represent each character. It's one of the first algorithms I learned in Computer Science. I was 14 year old and in Year 9. But until recently it hadn't crossed my mind again.
|
||||
|
||||
Then I found out about [Zig](https://ziglang.org/). A new(ish) language where you manage your own memory, and have access to an incredible compiler that support `comptime`, it's an amazing (and extremely fast) language.
|
||||
|
||||
So I decided to learn both fully, and implemented a huffman encoding algorithm using the zig programming language. Up until this point I haven't worked on a project in a language like zig, which requires memory management and everything that goes along with it. I have also never thought much about huffman encoding, but it's a fairly simple algorithm so it was the perfect project to learn about this language.
|
||||
|
||||
I won't go into much detail about Huffman Encoding, you can find many tutorials that do it better than I ever could. But I will talk about what I think about Zig.
|
||||
|
||||
## Zig - It's great
|
||||
|
||||
I'm not a big language connoisseur, I like things that work, that are simple and have a friendly syntax, so I happen to love (Golang)[https://go.dev/], it's simple, robust and very fast. It's also garbage collected which is a plus.
|
||||
|
||||
I didn't think I was going to be a big fan of Zig, my experience with C has been fine, but I haven't loved it much, and I've never touched C++, but I really enjoyed it.
|
||||
|
||||
### Some things I liked
|
||||
|
||||
- The compiler is fast, and extremely informative, I found that I didn't need to go to the official documentation, the compiler knew what I was trying to do and often led me in the right direction.
|
||||
- Using allocator objects to initialise various data structure is a very nice pattern, one that makes managing memory really not complicated.
|
||||
- Comptime. Absolutely genious!
|
||||
- No secret allocations (looking at you Rust!). You are in control of the allocations completely.
|
||||
|
||||
### Some things I didn't like
|
||||
|
||||
- This isn't a fairly criticism, because it's a fairly new and evolving language, but the LSP isn't the best, it's very fast and when it works it works really well, but it seems to have been lacking some features. The one I missed the most was _hover_, where you can ask the LSP what type something is, it sometimes worked but most of the time it got confused.
|
||||
- Using comptime types and returning a struct from a function seems odd, but also the best way to achieve generic data structures, don't love this pattern and there might be a better way. See the `heap.zig` file in my repo to see what I'm talking about.
|
||||
|
||||
I would say I definitely would love to work more with Zig. It seems like the logical step forward for program that require the blazingly fast speed of no garbage collection. You can already see this happening in [Bun.js](https://bun.sh/), which seems to have great speed advantages (sometimes) compared to Node.js or Deno (even though both are written in a low level language).
|
||||
|
||||
Thank you for reading, if you would like to chat with me. You can email me at `johncosta027@gmail.com`. Or visit my GitHub profile.
|
||||
@ -1,98 +0,0 @@
|
||||
---
|
||||
layout: "../../layouts/post.astro"
|
||||
title: "I built a parser!"
|
||||
date: "27/07/2023"
|
||||
---
|
||||
|
||||
Git Repo: [Here](https://github.com/JohnCosta27/GoXmlParser)
|
||||
|
||||
During my time at university I took a compilers module, it turned out to be my favourite module out of all my 3 years at university, and I had the privilege of being taught by [Elizabeth Scott](https://pure.royalholloway.ac.uk/en/persons/elizabeth-scott), one of the creators of [GLL Parsers](https://www.cs.rhul.ac.uk/research/languages/csle/GLLparsers.html), a parsing algorithm that can parse any context free grammar, it's very cool.
|
||||
|
||||
I did very well in this module, and I really enjoyed it, but it was heavily theoretical, with little to no practical work. This is fine, it taught me a lot of parsing algorithms, and everything I know about grammars and languages.
|
||||
|
||||
So I decided to give it a go and actually write one!
|
||||
|
||||
# XML (like)
|
||||
|
||||
I decided to parse a XML like language. You are probably mostly familiar with XML from its use in HTML.
|
||||
|
||||
```html
|
||||
<hello>World</hello>
|
||||
```
|
||||
|
||||
You have an opening tag, some content in the middle, and a closing tag. However it can get more complicated than that.
|
||||
|
||||
```html
|
||||
<hello hello="world">
|
||||
Some text here
|
||||
<a></a>
|
||||
dsamkdsamdkas
|
||||
|
||||
<b attribute="dksoadisma" />
|
||||
</hello>
|
||||
```
|
||||
|
||||
As you can see, we can have nested structures, attributes on tags, and self closing tags.
|
||||
|
||||
# Building the Parser
|
||||
|
||||
I used Golang to build the parser, it's a language that is familiar to me, extremely permanent and a delight to use.
|
||||
|
||||
I decided to use recursive descent to build the parser, as XML is fairly easy to parse this way, and it becomes less complicated to start my compiler journey using this technique. From my compilers module I knew how to generate recursive descent parsing functions even if I was blind folded for any grammar, so this shouldn't be hard... Right?
|
||||
|
||||
## What I learnt
|
||||
|
||||
### Theory != Practice
|
||||
|
||||
Even though I knew how to generate RDP (Recursive descent parsers), I was always given a grammar to start from. But this was a different problem, I have to create a grammar that cannot be left recursive (RDP limitation), and would parse without ambiguity.
|
||||
|
||||
This turned our harder than I thought, because it's a task that can be done in millions of different ways. In the end I settled for the following grammar.
|
||||
|
||||
```
|
||||
Element ::= OpenTag ElementSuffix
|
||||
OpenTag ::= '<' NAME Attributes
|
||||
Attributes ::= NAME '=' STRING Attributes | EPSILLON
|
||||
ElementSuffix ::= '/>' | Content CloseTag
|
||||
Content ::= DATA Content | Element Content | EPSILLON
|
||||
CloseTag ::= '</' NAME '>'
|
||||
|
||||
// Literals
|
||||
DATA = All the content between '>' and '<'
|
||||
NAME = A continuous string of alphabetical characters
|
||||
STRING = Content inside (and including) ""
|
||||
EPSILLON = null
|
||||
```
|
||||
|
||||
This seems like a good grammar. It allows for all the XML structures we are used to seeing, and it also seemed to have the right mix of parser and lexer complexity. I'll explain what I mean by this.
|
||||
|
||||
### Lexer vs Parser
|
||||
|
||||
Lexer (Lexical Analysis), or Tokenizer takes the raw string input and turns it into meaningful tokens, we saw the tokens I used above:
|
||||
|
||||
- <
|
||||
- \>
|
||||
- />
|
||||
- </
|
||||
- STRING
|
||||
- DATA
|
||||
- NAME
|
||||
|
||||
Some of these are trivial, such as the top 4 on the list, but the rest isn't so easy. String would be an example of a slightly more complex token.
|
||||
|
||||
But when I was first starting, in my head all the hard work would have to be done by the parser and the lexer would basically just pick up single strings of characters. This led me to a rabbit hole of parsing basically single characters as tokens (including spaces!), and writing progressively more complicated grammar rules (and therefore more complicated parser), in order to not have the lexer be complicated.
|
||||
|
||||
But I quickly realised that regular expressions are a tool, and I should use them well. And so that's how I ended up with more complex tokens, and was able to drastically simplify my grammar rules.
|
||||
|
||||
# Semantics
|
||||
|
||||
The last thing I want to talk about was my semantic analysis, which was by far the easiest part of the project, simply because all I have to do is make sure that the opening tags have the correct closing tags associated with them.
|
||||
|
||||
This is implemented using a stack, you push as you see opening tags, pop as you see closing ones, and compare. If you see a closing tag that does not correspond to the top item of the stack then there is something wrong.
|
||||
|
||||
# Future Work
|
||||
|
||||
I am mostly finished with this project. The only thing I would like to add is translation from XML to other languages. This step would be fairly easy because of the AST already being build, and now I simply have to walk it.
|
||||
|
||||
But for other project, I would like to go into the world of programming languages instead of markup languages. To start with I could write a program that compilers down to Golang, and use the already amazing Golang tools to compile the underlying program. But this is for another time.
|
||||
|
||||
If you made it this far, hey thank you for reading, you can always email me at johncosta027@gmail.com for any inquiries, or check out the GitHub repo linked at the top of the article if you have any further coments.
|
||||
@ -1,7 +0,0 @@
|
||||
---
|
||||
layout: "../../layouts/post.astro"
|
||||
title: "Testing"
|
||||
date: "31/10/2023"
|
||||
---
|
||||
|
||||
# Spooky Test
|
||||
@ -1,49 +0,0 @@
|
||||
---
|
||||
layout: '../../layouts/post.astro'
|
||||
title: 'The Psychology of Money by Morgan Housel - A review'
|
||||
date: '15/11/2022'
|
||||
---
|
||||
|
||||
This book contains 19 chapters, all with a small bit of wisdom about money, all quite useful. Much of what the book covers sounds like common sense if you are already somewhat money savvy, however getting the refresher or the introduction to these topics, is something this book did very well for me.
|
||||
|
||||
A big theme I found in this book was simply: Patience.
|
||||
|
||||
## Patience: Compounding
|
||||
Chapter 4 talks about compounding interest, and how wealth is not build over night, but instead takes years and even decades to accumulate, through the power of compounding, this - I believe, is the most important lesson that the book has to teach. It doesn't matter if you invest £1000 today if you won't do anymore for the rest of the year, it is all about continual investments month after month after month, and leaving it. Just leave it, it will grow.
|
||||
|
||||
Housel further proves this point with the beautiful statistic: If you invest over a 20-year period in the US Stock marked, based on historical data you are 100% guaranteed to make money. Even if you bought in the worst possible moment, and also sold in the worst moment, because of the amount of time your money had to grow, it is (historically) impossible to lose money, unless of course you withdraw it early.
|
||||
|
||||
## Patience: Staying wealthy
|
||||
|
||||
In the chapter 5, Housel goes on to discuss the different between getting wealthy, staying wealthy. And similarly to compounding it is about patience.
|
||||
|
||||
It is about being happy with your circumstance and not blowing all your wealth in unnecessary things, and instead, enjoying your wealth reasonably (maybe don't buy a Ferrari, but maybe you can afford an AMG), and continually investing - to make sure you STAY wealthy.
|
||||
|
||||
## Patience: Lifestyle
|
||||
|
||||
Throughout the book, Housel hints at the fact that often people change their life-style depending on how much they make, so even if you make millions, if you are spending millions you are not really wealthy, because you're not accumulating and making money work for you. This relates to the overall theme of patience, as a person must be calm and reasonable about their lifestyle, and very careful about raising it. Because it is easy to go forward, but very difficult to bring down the expensive bills.
|
||||
|
||||
I find it quite interesting how the entire book, doesn't so much talk about making money, or what to do with money, but more so about how people behave with money.
|
||||
|
||||
## Other themes
|
||||
|
||||
The book explores other themes, such as how people think about different assets depending on factors completely unrelated to those assets, for example:
|
||||
|
||||
- People living in 1970, saw the S&P500 Boom, and therefore will for the rest of their lives, believe that is it a good way to invest money.
|
||||
- Someone living during the 2000s .COM crash, might not think the same.
|
||||
- Or if you work in Tech, you are likely to be Bullish on Tech
|
||||
|
||||
There are various factors, but the book showed me that I must think about my own biases, and listen to advice in a reasonable way, instead an emotion, or self-conforming way, because these are dangerous traps, and the short-term suffering of finding out you are biased and forcing yourself to make better decisions, is definitely better than investing in something because you personally think it will work.
|
||||
|
||||
People will also listen to facts, that fit the opinions that they have before, but this is another massive topic which Housel describes quite well (you are more likely to listen to financial advisers that confirm your beliefs). This topic I should write something about.
|
||||
|
||||
All in all, this review was quite rambly, and I didn't cover all the aspects the book talked about, but mostly the ones which I found to be more eye opening in a way. Housel talks about a series of other topics such as:
|
||||
|
||||
- Different goals from other people
|
||||
- Always leaving room for error
|
||||
- Never think something is impossible
|
||||
- Don't be taken by current event, let the markets do their thing
|
||||
|
||||
All of which were really important for me to read as a young person who now actually has some money to start investing into my future. Very good read, and would definitely read more books from Housel - He put complicated topics in a very easily digestible format which I enjoyed.
|
||||
|
||||
8/10
|
||||
@ -1,79 +0,0 @@
|
||||
---
|
||||
layout: '../../layouts/post.astro'
|
||||
title: 'The Republic by Plate - A recap / review'
|
||||
date: '05/01/2020'
|
||||
---
|
||||
|
||||
# The Republic - Plate
|
||||
# A summary and review
|
||||
__Disclaimer: This book has some fairly rough topics, I'm simply writing a summary and a review__
|
||||
|
||||
## Context
|
||||
The Republic was written by Plato in 375 BC, many years ago. In was written in Greece, when the country was made up of various states who were at constant wars with not only each other but with the Persians at the time. This does explain some of the ideas in the book, which would be seen as extreme in any sense of the word.
|
||||
|
||||
This book was written by Plato in the form of a dialogue between Socrates and various other people, however this might be a made up dialogue, it is obviously very hard to confirm whether this is Socrates' thoughts or Plato's, but most likely it is Plato's.
|
||||
|
||||
Plato came from a long line of powerful Athenians who were very involved in politics and were obviously very wealthy, however this was not the path that Plato choose for himself, he would rather become a philosopher and open his famous Academia, which has produced some of the ideas that structure our world today, by producing pupils such as Aristotle, and even Alexander the Great, who went on to shape the world as we know it.
|
||||
|
||||
This should all be kept in context when reading this book as to, understand why Plato thought such extreme ideas were not only true but the best for both the individual and the state, this is extremely important to keep in mind.
|
||||
|
||||
## What is Justice?
|
||||
The book basically starts with this question, of what justice is and whether the just man is really the best, happiest and most well of than the unjust man, views challenged by his opponents in the dialogue.
|
||||
|
||||
To solve this question Socrates goes on to describe a city which contains many rules and extreme ideas, this state would be considered a near fascist regism in today's world, but with the failing democracies in Athens, and many starving people in Greece due to poor leadership, we can see why Socrates/Plato think this is the best way to form a city.
|
||||
|
||||
The reason a state is describes is because Socrates tried to compare the individual to the state, and therefore if the state is just, the individual is also just, furthermore if the state is a good one then we can also assume that its people are good. This ideas doesn't quite hold completely in today's world, but there are some parallels to be drawn. For example countries with better education will produce citizens which pollute less, are less likely to be racist amongst other things, although even these assumptions are not always correct.
|
||||
|
||||
So what are these rules? Well we must trace Socrates train of thought as it is the easiest way to understand this topic. Firstly, when forming our state each person will do what they are best at; the example given is that of a show maker, who Socrates claim will produce better shoes if he only focuses on shoe making. This means that our very basic state will consist of farmers, miners, builders and other basic professions.
|
||||
|
||||
However this state is hardly permanent, because it is natural for a state to want to expand, another characteristic of the state drive by individuals. Because of this the state must be ready for war to take over land, this means that we must add to our state, not only do we have regular professions we must also have warriors.
|
||||
|
||||
And this is a big deal, because warriors are obviously more powerful than the regular citizen and therefore Socrates claims that there warriors or as he calls them "Auxiliaries", are restrained in two ways.
|
||||
|
||||
- Education, they are brought up with extensive education and only the best will be able to become part of this Auxiliary class.
|
||||
- Rulers, this is a sub class of the Auxiliary class within the state, the best of the Auxiliaries group will be able to become the rulers of the state, which will command the Auxiliary.
|
||||
|
||||
There is a lot to unpack but starting with education, Plato claims that much of what they are exposed to must be censored; This means that only certain art can be shown or certain poetry can be read. This is an element which is obviously present in our current education systems, we do not expose children of certain things for their own sake, whether this is a good thing or a bad thing is the base for much heated debate and it would be quite difficult to discuss this completely. All I can say is that this book was written many many years ago and therefore is not in line with what we view as a good way of life. This is the reason that Plato saw this censorship as a good thing.
|
||||
|
||||
It was essential for this class system to only work on the basis of whether the individual fits into a certain group or not, therefore Plato comes out with another idea which is very out there. No child should meet their parents and vice versa, they are children of the state which would mean they grow up, loving the state. Again, an idea which could hardly ever be realised and Plato is very aware of this, many passages in the book state that this state is purely one of the mind and will never (really) exist.
|
||||
|
||||
There are a few more rules to bring up, starting with the fact that in this state, private housing is simply banned. People should live together with groups of people who do similar things they do and are of the same class, this brings an idea of collectivism, or as many critics of this book call it: Communism.
|
||||
|
||||
And similarly to private housing, wealth is also not allowed. This is for a number of reasons but most is to prevent people from taking action for personal gain, which is definitely a big problem in modern politics today. This was actually challenged in the book by one of the other characters, because it states that this state could not form any allies because it did not have any gold. Socrates is quick to shut it down by saying that the state has the best soldiers, and does not want wealth, therefore if other states allied with this one, they would keep all of the looting and gold from the enemies.
|
||||
|
||||
## The family
|
||||
Plato describes in this book that women are different from men, we can all agree on this. However he did not see any difference in their capacities to be rules, an idea thought to be completely wrong at the time of writing. This is obviously something we all relish, the ability for anyone, regardless of gender or colour to take any job with the only restriction being their own ability to carry out that job (or at least it should).I obviously completely agree with this part of the book, it is perhaps the only part I completely, 100% agree with.
|
||||
|
||||
However, moving on to family, because children do not meet their parents, children are made in "Mating rituals" where the state picks pairs of people, basically to breed the best possible citizens, and eventually the best possible rules. However, very important to note that the citizens are not aware that the pairing are done, to their knowledge they simply won a "lottery", another part of censorship in our state.
|
||||
|
||||
## The ruler
|
||||
Plato states that "philosophers should be kings", he also states that this does not happen in the world because those who are most suited for ruling, are the ones less likely to get into politics. Which is argued against but we can see where he is coming from. Philosophers who's only goal in life is to seek the truth, are not interested in politics of the state because it contains too much unmoral activity, campaigning, tactics and other things. This means they are likely never to rule.
|
||||
|
||||
Our state fixes this by having the best performing children, those who are seen to seek good and truth, to be our rulers.
|
||||
|
||||
This is pretty much impossible to achieve in the modern world, or in any world for that matter because it is obviously very hard to describe who is the best and it also begs the question, is the education system proper and a million other questions.
|
||||
|
||||
## Failed states
|
||||
Plato talked a lot of failed states, and I feel these were very directed at particular states in ancient Greece. He also states in the Republic that these states would originate from the society he described n the following order
|
||||
|
||||
Timarchy --> Oligarchy --> Democracy --. Tyranny
|
||||
|
||||
Going from least bad to most bad, and each deriving from one another. Plato gives very intresting examples of the kind of person that would live in each one and how they came to be, as their parents represented the prior type of state. This does depend on assumptions made earlier that the state is made of people and therefore the two are very much linked.
|
||||
|
||||
It is worth describing what each of these societies are and a real world example of each.
|
||||
|
||||
Starting with Timarchy, this is the most similar to our state but a few elements started to slip, for example private property is allowed, but most importantly, glory and honour are the leading principles of the state, instead of intelligence and the love for the truth. He gave Sparta as an example, a state which Plato seems to admire, because it is not far from the one he describes in this book. I won't give any real world examples because frankly this was not discussed in great length in the book and I do not know enough about the subject to categorise a single country in the modern world into a Timarchy (However, I believe that WWII Japan might have come close).
|
||||
|
||||
Oligarchy happens when a very small amount of people have control over the state because of huge amounts of wealth, it reminds me of most countries today to some extent, specially the US due to their extensive neo-liberal views, and the huge influences of billionaire donators to political parties, many more countries could be partially categorised as an oligarchy though. Plato said this derived from a Timarchy because of the ever expanding wealth of the political powers in a timarchy.
|
||||
|
||||
Democracy, rated very poorly by Plato, most likely because of Athens, which was a democracy. However Athens was still quite corrupt, and their execution of Socrates probably meant that Plato despised the city, we must also remember this is where he grew up, and witnessed first hand the corruption happening within the state. Democracy then derives from an oligarchy when the poor, which compose the majority of the state finally take over in a sort of revolution. A democracy values personal freedom above everything else and therefore people have a say as to who is in power. This can be a bad thing because populism exists and is described in the Republic (not by that name but as a simple description of it). It is also said that many laws won't be respected because of the personal freedom everyone has in this state.
|
||||
|
||||
This then leaves a Tyranny, and this one is the most interesting one. A Tyranny comes from a democracy because one populist leader is elected who then becomes a tyrant. This is rather interesting because in the dialogue, Plato comes to the conclusion that the tyrant is the least happy man, and also the most unjust. He argues this because he is always looking over his shoulder and fears that injustice happen to them, the reasoning is slightly unclear to me but he arrives at this conclusion.
|
||||
|
||||
Okay so this has gone on to long I would just like to finish my thoughts up.
|
||||
|
||||
The republic is an excellent book to read, it is interesting and logical, it is a window back into ancient Greece and into a way of thinking which is a little different to us today. It is a book which carries some weight and describes some complex topics in a conversation which is very interesting to me, obviously the book suggests a pretty extreme state which does demonstrate its age, but I still think it is very important to look at ways of thinking from the past. I like how many ideas in the book actually have a lot of relevance in today's world, for example Tyranny and the rise of populism which Plato said would happen from a democracy, this has happened all over the world with populist leaders such as Saddam Hussein.
|
||||
|
||||
I also find it interesting how, Plato who lived more than 2000 years ago describes women as being no different then men men when it came to ruling, and it took us so long (up until very recently), to finally see this and allow women in power.
|
||||
|
||||
Overall this book was a brilliant read and very informative in some ways, obviously I disagree with a lot of it, but that does not mean it was a bad book at all, I actually credit most of these disagreements to the age of the book and how different things were 2 millennia ago.
|
||||
@ -1,44 +0,0 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
"./components/**/*.{html,js,jsx}",
|
||||
"./public/index.html",
|
||||
"./src/**/*.{html,js,jsx,astro,md}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"polar-night": {
|
||||
100: "#4C566A",
|
||||
200: "#434C5E",
|
||||
300: "#3B4252",
|
||||
400: "#2E3440",
|
||||
},
|
||||
"snow-storm": {
|
||||
100: "#ECEFF4",
|
||||
200: "#E5E9F0",
|
||||
300: "#D8DEE9",
|
||||
},
|
||||
frost: {
|
||||
100: "#8FBCBB",
|
||||
200: "#88C0D0",
|
||||
300: "#81A1C1",
|
||||
400: "#5E81AC",
|
||||
},
|
||||
aurora: {
|
||||
red: "#BF616A",
|
||||
orange: "#D08770",
|
||||
yellow: "#EBCB8B",
|
||||
green: "#A3BE8C",
|
||||
purple: "#B48EAD",
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
display: ["Inter"],
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
};
|
||||
1
themes/risotto/.gitignore
vendored
Normal file
1
themes/risotto/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.hugo_build.lock
|
||||
20
themes/risotto/LICENSE
Normal file
20
themes/risotto/LICENSE
Normal file
@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2021 Joe Roe
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
29
themes/risotto/NEWS.md
Normal file
29
themes/risotto/NEWS.md
Normal file
@ -0,0 +1,29 @@
|
||||
# risotto (development version)
|
||||
|
||||
* Fix overflow of code blocks with line numbers (#41)
|
||||
* Add descriptions to sidebar of list pages, where defined in the frontmatter of `_index.md` (#55)
|
||||
|
||||
# risotto 0.3.0
|
||||
|
||||
* Added support for favicons (#57)
|
||||
|
||||
# risotto 0.2.0
|
||||
|
||||
* **Breaking change** – new framework for colour palettes:
|
||||
* Palettes are defined using CSS variables following the [base16](https://github.com/chriskempson/base16) system
|
||||
* Added 14 new palettes: `apprentice`, `base16-dark`, `base16-light`, `dracula`, `material`, `papercolor-dark`, `papercolor-light`, `solarized-dark`, `solarized-light`, `tender`, `tokyo-night-dark`, `tokyo-night-light`, `windows-95` and `windows-95-light`.
|
||||
* The default palette is `base16-dark`
|
||||
* The `mode` parameter is no longer needed
|
||||
* If you were using one of the old named palettes (`gruvbox-dark` or `gruvbox-light`), the change will be seamless.
|
||||
* If you were using a custom palette, you will need to redefine it using the new framework. See README for further details.
|
||||
* Added a table of contents (thanks @dashv, #47)
|
||||
* Added multilanguage support with a language switcher (thanks @bedefaced)
|
||||
* Made the site header and nav wrap more efficiently on narrow screens (thanks @m-dev672, #32)
|
||||
* Added a changelog
|
||||
|
||||
# risotto 0.1.0
|
||||
|
||||
First named release, including:
|
||||
|
||||
* `gruvbox-dark` and `gruvbox-light` colour palettes
|
||||
* FontAwesome6 and Academicons icon sets
|
||||
98
themes/risotto/README.md
Normal file
98
themes/risotto/README.md
Normal file
@ -0,0 +1,98 @@
|
||||
# risotto
|
||||
|
||||
risotto is a minimalist, responsive [hugo](https://gohugo.io) theme inspired by terminal ricing aesthetics.
|
||||
|
||||
[](https://themes.gohugo.io/themes/risotto/)
|
||||
[](https://semver.org)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
The easiest way to install the theme is to clone this repository into your site's `themes` directory:
|
||||
|
||||
```shell
|
||||
git clone https://github.com/joeroe/risotto themes/risotto
|
||||
```
|
||||
|
||||
If your site is already a git repository, you can add the theme as a submodule instead:
|
||||
|
||||
```shell
|
||||
git submodule add https://github.com/joeroe/risotto.git themes/risotto
|
||||
```
|
||||
|
||||
## Update
|
||||
|
||||
If you installed the theme using `git clone`, pull the repository to get the latest version:
|
||||
|
||||
```shell
|
||||
cd themes/risotto
|
||||
git pull
|
||||
```
|
||||
|
||||
Or, if you added it as a git submodule:
|
||||
|
||||
```shell
|
||||
git submodule update --remote
|
||||
```
|
||||
|
||||
## Configure
|
||||
|
||||
To use the theme, add `theme = 'risotto'` to your site's `config.toml`, or `theme: risotto` to your `config.yaml` respectively.
|
||||
|
||||
See `exampleSite/config.toml` for the theme-specific parameters you need to add to your site's `config.toml` or `config.yaml` to configure the theme.
|
||||
|
||||
### Colour palettes
|
||||
|
||||
risotto uses the [base16 framework](https://github.com/chriskempson/base16) to define colour schemes that can be used with the `theme.palette` parameter.
|
||||
A selection of 16 palettes (10 dark, 6 light) are bundled with the theme: `apprentice`, `base16-dark`, `base16-light`, `dracula`, `gruvbox-dark`, `gruvbox-light`, `material`, `papercolor-dark`, `papercolor-light`, `solarized-dark`, `solarized-light`, `tender`, `tokyo-night-dark`, `tokyo-night-light`, `windows-95` and `windows-95-light`.
|
||||
The default is `base16-dark`.
|
||||
|
||||
<!-- TODO: add screenshots of default themes -->
|
||||
|
||||
The easiest way to use other base16 styles is to place .css file from https://github.com/monicfenga/base16-styles/tree/master/css-variables and place it in your `static/css/palettes` directory.
|
||||
|
||||
Or to define a wholly custom theme, you will need to define the following CSS variables for the following base16 colours (see [base16-dark.css](blob/main/static/css/palettes/base16-dark.css) for an example):
|
||||
|
||||
| Base | Default colour | Used for | Examples |
|
||||
| ---- | -------------- | -------- | -------- |
|
||||
| 00 | Dark | Background | Page background |
|
||||
| 01 | │ | Alt. background | Content background |
|
||||
| 02 | │ | In-text backgrounds | `<pre>`, `<code>`, `<kbd>`, `<samp>` |
|
||||
| 03 | │ | Muted text | `:before` & `:marker` symbols |
|
||||
| 04 | │ | Alt. foreground | Aside text |
|
||||
| 05 | │ | Foreground | Content text |
|
||||
| 06 | │ | | |
|
||||
| 07 | Light | | |
|
||||
| 08 | Red | | |
|
||||
| 09 | Orange | | |
|
||||
| 0A | Yellow | Highlights | Selected text, `<mark>` |
|
||||
| 0B | Green | Primary accent | Logo |
|
||||
| 0C | Cyan | Active links | `a:active`, `a:hover` |
|
||||
| 0D | Blue | Links | `a:link`, `a:visited` |
|
||||
| 0E | Magenta | | |
|
||||
| 0F | Brown | | |
|
||||
|
||||
For light mode palettes, the sequence of 00–07 should be reversed (light to dark, not dark to light).
|
||||
Note that not all colours are currently used in the theme.
|
||||
|
||||
## Favicon
|
||||
|
||||
risotto will automatically use favicons placed in the `static/` directory.
|
||||
The following files will be detected and included in your site's `<head>` section:
|
||||
|
||||
* `favicon.ico`
|
||||
* `favicon-16x16.png`
|
||||
* `favicon-32x32.png`
|
||||
* `apple-touch-icon.png`
|
||||
* `site.webmanifest`
|
||||
|
||||
You can generate these from an image or emoji using [favicon.io](https://favicon.io/) or a similar service.
|
||||
They must be placed directly under your site's `static/` directory, i.e. not in in a subdirectory or `themes/risotto/static/`.
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
The 'cooked rice' emoji used as a favicon for the example site was created by the [Twemoji project](https://twemoji.twitter.com/) and is licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/).
|
||||
2
themes/risotto/archetypes/default.md
Normal file
2
themes/risotto/archetypes/default.md
Normal file
@ -0,0 +1,2 @@
|
||||
+++
|
||||
+++
|
||||
3
themes/risotto/config.toml
Normal file
3
themes/risotto/config.toml
Normal file
@ -0,0 +1,3 @@
|
||||
[module]
|
||||
[module.hugoVersion]
|
||||
min = "0.41.0"
|
||||
21
themes/risotto/exampleSite/LICENSE
Normal file
21
themes/risotto/exampleSite/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Steve Francia
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
100
themes/risotto/exampleSite/config.toml
Normal file
100
themes/risotto/exampleSite/config.toml
Normal file
@ -0,0 +1,100 @@
|
||||
baseURL = "https://risotto.joeroe.io"
|
||||
theme = "risotto"
|
||||
title = "risotto demo"
|
||||
author = "Joe Roe"
|
||||
copyright = "© [Joe Roe](https://joeroe.io) & [risotto contributors](https://github.com/joeroe/risotto/graphs/contributors)."
|
||||
paginate = 3
|
||||
languageCode = "en"
|
||||
DefaultContentLanguage = "en"
|
||||
enableInlineShortcodes = true
|
||||
# prevent build failures when using Hugo's Instagram shortcode due to deprecated Instagram API.
|
||||
# See https://github.com/gohugoio/hugo/issues/7228#issuecomment-714490456
|
||||
ignoreErrors = ["error-remote-getjson"]
|
||||
|
||||
# Automatically add content sections to main menu
|
||||
sectionPagesMenu = "main"
|
||||
|
||||
[params]
|
||||
noindex = false
|
||||
|
||||
[params.theme]
|
||||
palette = "base16-dark"
|
||||
|
||||
# Sidebar: about/bio
|
||||
[params.about]
|
||||
title = "risotto"
|
||||
description = "A [hugo](https://gohugo.io) theme inspired by terminal ricing."
|
||||
logo = "images/rice.svg"
|
||||
|
||||
# Sidebar: social links
|
||||
# Available icon sets:
|
||||
# * FontAwesome 6 <https://fontawesome.com/> ('fa-brands', 'fa-normal', or 'fa-solid' for brands)
|
||||
# * Academicons <https://jpswalsh.github.io/academicons> ('ai ai-')
|
||||
|
||||
[[params.socialLinks]]
|
||||
icon = "fa-brands fa-github"
|
||||
title = "GitHub"
|
||||
url = "https://github.com/joeroe/risotto"
|
||||
|
||||
[[params.socialLinks]]
|
||||
icon = "fa-solid fa-envelope"
|
||||
title = "Email"
|
||||
url = "mailto:example@example.com"
|
||||
|
||||
[[params.socialLinks]]
|
||||
icon = "ai ai-orcid"
|
||||
title = "ORCID"
|
||||
url = "https://orcid.org/0000-0001-2345-6789"
|
||||
|
||||
[menu]
|
||||
|
||||
[[menu.main]]
|
||||
identifier = "about"
|
||||
name = "About"
|
||||
url = "/about/"
|
||||
weight = 10
|
||||
|
||||
[taxonomies]
|
||||
category = "categories"
|
||||
tag = "tags"
|
||||
series = "series"
|
||||
|
||||
# For hugo >= 0.60.0, enable inline HTML
|
||||
[markup.goldmark.renderer]
|
||||
unsafe = true
|
||||
|
||||
[markup]
|
||||
|
||||
# Table of contents
|
||||
# Add toc = true to content front matter to enable
|
||||
[markup.tableOfContents]
|
||||
startLevel = 2
|
||||
endLevel = 3
|
||||
ordered = true
|
||||
|
||||
[privacy]
|
||||
|
||||
[privacy.vimeo]
|
||||
disabled = false
|
||||
simple = true
|
||||
|
||||
[privacy.twitter]
|
||||
disabled = false
|
||||
enableDNT = true
|
||||
simple = true
|
||||
|
||||
[privacy.instagram]
|
||||
disabled = false
|
||||
simple = true
|
||||
|
||||
[privacy.youtube]
|
||||
disabled = false
|
||||
privacyEnhanced = true
|
||||
|
||||
[services]
|
||||
|
||||
[services.instagram]
|
||||
disableInlineCSS = true
|
||||
|
||||
[services.twitter]
|
||||
disableInlineCSS = true
|
||||
27
themes/risotto/exampleSite/configTaxo.toml
Normal file
27
themes/risotto/exampleSite/configTaxo.toml
Normal file
@ -0,0 +1,27 @@
|
||||
timeout = 30000
|
||||
enableInlineShortcodes = true
|
||||
|
||||
[taxonomies]
|
||||
category = "categories"
|
||||
tag = "tags"
|
||||
series = "series"
|
||||
|
||||
[privacy]
|
||||
|
||||
[privacy.vimeo]
|
||||
disabled = false
|
||||
simple = true
|
||||
|
||||
[privacy.twitter]
|
||||
disabled = false
|
||||
enableDNT = true
|
||||
simple = true
|
||||
disableInlineCSS = true
|
||||
|
||||
[privacy.instagram]
|
||||
disabled = false
|
||||
simple = true
|
||||
|
||||
[privacy.youtube]
|
||||
disabled = false
|
||||
privacyEnhanced = true
|
||||
1
themes/risotto/exampleSite/content/_index.md
Symbolic link
1
themes/risotto/exampleSite/content/_index.md
Symbolic link
@ -0,0 +1 @@
|
||||
../../README.md
|
||||
3
themes/risotto/exampleSite/content/_index.md.old
Normal file
3
themes/risotto/exampleSite/content/_index.md.old
Normal file
@ -0,0 +1,3 @@
|
||||
+++
|
||||
author = "Hugo Authors"
|
||||
+++
|
||||
25
themes/risotto/exampleSite/content/about.md
Normal file
25
themes/risotto/exampleSite/content/about.md
Normal file
@ -0,0 +1,25 @@
|
||||
+++
|
||||
title = "About"
|
||||
description = "Hugo, the world's fastest framework for building websites"
|
||||
date = "2019-02-28"
|
||||
aliases = ["about-us", "about-hugo", "contact"]
|
||||
author = "Hugo Authors"
|
||||
+++
|
||||
|
||||
Written in Go, Hugo is an open source static site generator available under the [Apache Licence 2.0.](https://github.com/gohugoio/hugo/blob/master/LICENSE) Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.
|
||||
|
||||
Hugo makes use of a variety of open source projects including:
|
||||
|
||||
* https://github.com/yuin/goldmark
|
||||
* https://github.com/alecthomas/chroma
|
||||
* https://github.com/muesli/smartcrop
|
||||
* https://github.com/spf13/cobra
|
||||
* https://github.com/spf13/viper
|
||||
|
||||
Hugo is ideal for blogs, corporate websites, creative portfolios, online magazines, single page applications or even a website with thousands of pages.
|
||||
|
||||
Hugo is for people who want to hand code their own website without worrying about setting up complicated runtimes, dependencies and databases.
|
||||
|
||||
Websites built with Hugo are extremely fast, secure and can be deployed anywhere including, AWS, GitHub Pages, Heroku, Netlify and any other hosting provider.
|
||||
|
||||
Learn more and contribute on [GitHub](https://github.com/gohugoio).
|
||||
5
themes/risotto/exampleSite/content/archives.md
Normal file
5
themes/risotto/exampleSite/content/archives.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
date: 2019-05-28
|
||||
type: section
|
||||
layout: "archives"
|
||||
---
|
||||
7
themes/risotto/exampleSite/content/homepage/about.md
Normal file
7
themes/risotto/exampleSite/content/homepage/about.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 'Our Difference'
|
||||
button: 'About us'
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, et essent mediocritatem quo, choro volumus oporteat an mei. Ipsum dolor sit amet, et essent mediocritatem quo.
|
||||
3
themes/risotto/exampleSite/content/homepage/index.md
Normal file
3
themes/risotto/exampleSite/content/homepage/index.md
Normal file
@ -0,0 +1,3 @@
|
||||
---
|
||||
headless: true
|
||||
---
|
||||
7
themes/risotto/exampleSite/content/homepage/work.md
Normal file
7
themes/risotto/exampleSite/content/homepage/work.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 'We Help Business Grow'
|
||||
button: 'Our Work'
|
||||
weight: 1
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, et essent mediocritatem quo, choro volumus oporteat an mei. Numquam dolores mel eu, mea docendi omittantur et, mea ea duis erat. Elit melius cu ius. Per ex novum tantas putant, ei his nullam aliquam apeirian. Aeterno quaestio constituto sea an, no eum intellegat assueverit.
|
||||
7
themes/risotto/exampleSite/content/post/_index.md
Normal file
7
themes/risotto/exampleSite/content/post/_index.md
Normal file
@ -0,0 +1,7 @@
|
||||
+++
|
||||
aliases = ["posts", "articles", "blog", "showcase", "docs"]
|
||||
title = "Posts"
|
||||
author = "Hugo Authors"
|
||||
description = "Example posts demonstrating hugo's markup features"
|
||||
tags = ["index"]
|
||||
+++
|
||||
46
themes/risotto/exampleSite/content/post/emoji-support.md
Normal file
46
themes/risotto/exampleSite/content/post/emoji-support.md
Normal file
@ -0,0 +1,46 @@
|
||||
+++
|
||||
author = "Hugo Authors"
|
||||
title = "Emoji Support"
|
||||
date = "2019-03-05"
|
||||
description = "Guide to emoji usage in Hugo"
|
||||
tags = [
|
||||
"emoji",
|
||||
]
|
||||
+++
|
||||
|
||||
Emoji can be enabled in a Hugo project in a number of ways.
|
||||
<!--more-->
|
||||
The [`emojify`](https://gohugo.io/functions/emojify/) function can be called directly in templates or [Inline Shortcodes](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes).
|
||||
|
||||
To enable emoji globally, set `enableEmoji` to `true` in your site's [configuration](https://gohugo.io/getting-started/configuration/) and then you can type emoji shorthand codes directly in content files; e.g.
|
||||
|
||||
<p><span class="nowrap"><span class="emojify">🙈</span> <code>:see_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙉</span> <code>:hear_no_evil:</code></span> <span class="nowrap"><span class="emojify">🙊</span> <code>:speak_no_evil:</code></span></p>
|
||||
<br>
|
||||
|
||||
The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
|
||||
|
||||
***
|
||||
|
||||
**N.B.** The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
|
||||
|
||||
{{< highlight html >}}
|
||||
.emoji {
|
||||
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
||||
{{< css.inline >}}
|
||||
<style>
|
||||
.emojify {
|
||||
font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
|
||||
font-size: 2rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media screen and (max-width:650px) {
|
||||
.nowrap {
|
||||
display: block;
|
||||
margin: 25px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{< /css.inline >}}
|
||||
148
themes/risotto/exampleSite/content/post/markdown-syntax.md
Normal file
148
themes/risotto/exampleSite/content/post/markdown-syntax.md
Normal file
@ -0,0 +1,148 @@
|
||||
+++
|
||||
author = "Hugo Authors"
|
||||
title = "Markdown Syntax Guide"
|
||||
date = "2019-03-11"
|
||||
description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
|
||||
tags = [
|
||||
"markdown",
|
||||
"css",
|
||||
"html",
|
||||
]
|
||||
categories = [
|
||||
"themes",
|
||||
"syntax",
|
||||
]
|
||||
series = ["Themes Guide"]
|
||||
aliases = ["migrate-from-jekyl"]
|
||||
+++
|
||||
|
||||
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
|
||||
<!--more-->
|
||||
|
||||
## Headings
|
||||
|
||||
The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
|
||||
|
||||
# H1
|
||||
## H2
|
||||
### H3
|
||||
#### H4
|
||||
##### H5
|
||||
###### H6
|
||||
|
||||
## Paragraph
|
||||
|
||||
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||
|
||||
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||
|
||||
## Blockquotes
|
||||
|
||||
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
|
||||
|
||||
#### Blockquote without attribution
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Note** that you can use *Markdown syntax* within a blockquote.
|
||||
|
||||
#### Blockquote with attribution
|
||||
|
||||
> Don't communicate by sharing memory, share memory by communicating.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
|
||||
|
||||
## Tables
|
||||
|
||||
Tables aren't part of the core Markdown spec, but Hugo supports supports them out-of-the-box.
|
||||
|
||||
Name | Age
|
||||
--------|------
|
||||
Bob | 27
|
||||
Alice | 23
|
||||
|
||||
#### Inline Markdown within tables
|
||||
|
||||
| Italics | Bold | Code |
|
||||
| -------- | -------- | ------ |
|
||||
| *italics* | **bold** | `code` |
|
||||
|
||||
## Code Blocks
|
||||
|
||||
#### Code block with backticks
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### Code block indented with four spaces
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
#### Code block with Hugo's internal highlight shortcode
|
||||
{{< highlight html >}}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
## List Types
|
||||
|
||||
#### Ordered List
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
#### Unordered List
|
||||
|
||||
* List item
|
||||
* Another item
|
||||
* And another item
|
||||
|
||||
#### Nested list
|
||||
|
||||
* Fruit
|
||||
* Apple
|
||||
* Orange
|
||||
* Banana
|
||||
* Dairy
|
||||
* Milk
|
||||
* Cheese
|
||||
|
||||
## Other Elements — abbr, sub, sup, kbd, mark
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||
49
themes/risotto/exampleSite/content/post/math-typesetting.md
Normal file
49
themes/risotto/exampleSite/content/post/math-typesetting.md
Normal file
@ -0,0 +1,49 @@
|
||||
---
|
||||
author: Hugo Authors
|
||||
title: Math Typesetting
|
||||
date: 2019-03-08
|
||||
description: A brief guide to setup KaTeX
|
||||
math: true
|
||||
---
|
||||
|
||||
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
|
||||
<!--more-->
|
||||
|
||||
In this example we will be using [KaTeX](https://katex.org/)
|
||||
|
||||
- Create a partial under `/layouts/partials/math.html`
|
||||
- Within this partial reference the [Auto-render Extension](https://katex.org/docs/autorender.html) or host these scripts locally.
|
||||
- Include the partial in your templates like so:
|
||||
|
||||
```bash
|
||||
{{ if or .Params.math .Site.Params.math }}
|
||||
{{ partial "math.html" . }}
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
- To enable KaTex globally set the parameter `math` to `true` in a project's configuration
|
||||
- To enable KaTex on a per page basis include the parameter `math: true` in content files
|
||||
|
||||
**Note:** Use the online reference of [Supported TeX Functions](https://katex.org/docs/supported.html)
|
||||
|
||||
{{< math.inline >}}
|
||||
{{ if or .Page.Params.math .Site.Params.math }}
|
||||
<!-- KaTeX -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
|
||||
{{ end }}
|
||||
{{</ math.inline >}}
|
||||
|
||||
### Examples
|
||||
|
||||
{{< math.inline >}}
|
||||
<p>
|
||||
Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)
|
||||
</p>
|
||||
{{</ math.inline >}}
|
||||
|
||||
Block math:
|
||||
$$
|
||||
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||||
$$
|
||||
45
themes/risotto/exampleSite/content/post/placeholder-text.md
Normal file
45
themes/risotto/exampleSite/content/post/placeholder-text.md
Normal file
@ -0,0 +1,45 @@
|
||||
+++
|
||||
author = "Hugo Authors"
|
||||
title = "Placeholder Text"
|
||||
date = "2019-03-09"
|
||||
description = "Lorem Ipsum Dolor Si Amet"
|
||||
tags = [
|
||||
"markdown",
|
||||
"text",
|
||||
]
|
||||
+++
|
||||
|
||||
Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
|
||||
|
||||
1. Exierant elisi ambit vivere dedere
|
||||
2. Duce pollice
|
||||
3. Eris modo
|
||||
4. Spargitque ferrea quos palude
|
||||
|
||||
Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
|
||||
|
||||
1. Comas hunc haec pietate fetum procerum dixit
|
||||
2. Post torum vates letum Tiresia
|
||||
3. Flumen querellas
|
||||
4. Arcanaque montibus omnes
|
||||
5. Quidem et
|
||||
|
||||
# Vagus elidunt
|
||||
|
||||
<svg class="canon" xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="373" width="496"><g fill="none"><path stroke="#000" stroke-width=".75" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width=".75" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width=".75" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx=".75" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx=".75" ry="1.25"></ellipse></g></svg>
|
||||
|
||||
[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
|
||||
|
||||
## Mane refeci capiebant unda mulcebat
|
||||
|
||||
Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
|
||||
|
||||
Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
|
||||
|
||||
Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, *oculos nomen* non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
|
||||
|
||||
{{< css.inline >}}
|
||||
<style>
|
||||
.canon { background: white; width: 100%; height: auto; }
|
||||
</style>
|
||||
{{< /css.inline >}}
|
||||
34
themes/risotto/exampleSite/content/post/rich-content.md
Normal file
34
themes/risotto/exampleSite/content/post/rich-content.md
Normal file
@ -0,0 +1,34 @@
|
||||
+++
|
||||
author = "Hugo Authors"
|
||||
title = "Rich Content"
|
||||
date = "2019-03-10"
|
||||
description = "A brief description of Hugo Shortcodes"
|
||||
tags = [
|
||||
"shortcodes",
|
||||
"privacy",
|
||||
]
|
||||
+++
|
||||
|
||||
Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
|
||||
<!--more-->
|
||||
---
|
||||
|
||||
## YouTube Privacy Enhanced Shortcode
|
||||
|
||||
{{< youtube ZJthWmvUzzc >}}
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## Twitter Simple Shortcode
|
||||
|
||||
{{< twitter_simple 1085870671291310081 >}}
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## Vimeo Simple Shortcode
|
||||
|
||||
{{< vimeo_simple 48912912 >}}
|
||||
6
themes/risotto/exampleSite/static/README
Normal file
6
themes/risotto/exampleSite/static/README
Normal file
@ -0,0 +1,6 @@
|
||||
The favicons in this directory were generated using the following graphics from Twitter Twemoji:
|
||||
|
||||
- Graphics Title: 1f35a.svg
|
||||
- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
|
||||
- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f35a.svg
|
||||
- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
|
||||
BIN
themes/risotto/exampleSite/static/android-chrome-192x192.png
Normal file
BIN
themes/risotto/exampleSite/static/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 13 KiB |
BIN
themes/risotto/exampleSite/static/android-chrome-512x512.png
Normal file
BIN
themes/risotto/exampleSite/static/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 42 KiB |
BIN
themes/risotto/exampleSite/static/apple-touch-icon.png
Normal file
BIN
themes/risotto/exampleSite/static/apple-touch-icon.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 12 KiB |
BIN
themes/risotto/exampleSite/static/favicon-16x16.png
Normal file
BIN
themes/risotto/exampleSite/static/favicon-16x16.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 688 B |
BIN
themes/risotto/exampleSite/static/favicon-32x32.png
Normal file
BIN
themes/risotto/exampleSite/static/favicon-32x32.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 1.5 KiB |
BIN
themes/risotto/exampleSite/static/favicon.ico
Normal file
BIN
themes/risotto/exampleSite/static/favicon.ico
Normal file
Binary file not shown.
|
After Width: 48px | Height: 48px | Size: 15 KiB |
1
themes/risotto/exampleSite/static/site.webmanifest
Normal file
1
themes/risotto/exampleSite/static/site.webmanifest
Normal file
@ -0,0 +1 @@
|
||||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
BIN
themes/risotto/images/screenshot.png
Normal file
BIN
themes/risotto/images/screenshot.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 198 KiB |
BIN
themes/risotto/images/tn.png
Normal file
BIN
themes/risotto/images/tn.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 181 KiB |
0
themes/risotto/layouts/404.html
Normal file
0
themes/risotto/layouts/404.html
Normal file
36
themes/risotto/layouts/_default/baseof.html
Normal file
36
themes/risotto/layouts/_default/baseof.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{- site.Language.Lang -}}">
|
||||
|
||||
<head>
|
||||
{{- partial "head.html" . -}}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page">
|
||||
|
||||
<header class="page__header">
|
||||
{{- partial "header.html" . -}}
|
||||
</header>
|
||||
|
||||
<section class="page__body">
|
||||
{{- block "main" . }}{{- end }}
|
||||
</section>
|
||||
|
||||
<section class="page__aside">
|
||||
<div class="aside__about">
|
||||
{{- partial "about.html" . -}}
|
||||
</div>
|
||||
<hr>
|
||||
<div class="aside__content">
|
||||
{{- block "aside" . }}{{- end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="page__footer">
|
||||
{{- partial "footer.html" . -}}
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user