Browse Source

Initial commit! 🎉

main
Bauke 3 months ago
commit
f2ae1deb86
Signed by: Bauke <me@bauke.xyz> GPG Key ID: C1C0F29952BCF558
30 changed files with 3939 additions and 0 deletions
  1. +107
    -0
      .gitignore
  2. +9
    -0
      .stylelintrc.json
  3. +28
    -0
      package.json
  4. +3295
    -0
      pnpm-lock.yaml
  5. BIN
      source/assets/crates-io.png
  6. BIN
      source/assets/fangs.png
  7. BIN
      source/assets/github.png
  8. BIN
      source/assets/google-chrome.png
  9. BIN
      source/assets/holllo-mark-square.png
  10. BIN
      source/assets/holllo-mark.png
  11. BIN
      source/assets/microsoft-edge.png
  12. BIN
      source/assets/mozilla-firefox.png
  13. BIN
      source/assets/npm.png
  14. BIN
      source/assets/pypi.png
  15. BIN
      source/assets/queue.png
  16. BIN
      source/assets/shadow-pattern.png
  17. +21
    -0
      source/includes/base.html
  18. +43
    -0
      source/includes/macros.html
  19. +126
    -0
      source/index.html
  20. +38
    -0
      source/scss/common.scss
  21. +35
    -0
      source/scss/home/home.scss
  22. +90
    -0
      source/scss/home/sections.scss
  23. +45
    -0
      source/scss/love.scss
  24. +29
    -0
      source/scss/mixins.scss
  25. +1
    -0
      source/scss/modern-normalize.scss
  26. +11
    -0
      source/scss/reset.scss
  27. +1
    -0
      source/ts/common.ts
  28. +19
    -0
      source/types.d.ts
  29. +15
    -0
      tsconfig.json
  30. +26
    -0
      vite.config.ts

+ 107
- 0
.gitignore View File

@@ -0,0 +1,107 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Build output directory
build/

+ 9
- 0
.stylelintrc.json View File

@@ -0,0 +1,9 @@
{
"extends": [
"stylelint-config-standard-scss"
],
"rules": {
"no-descending-specificity": null,
"string-quotes": "single"
}
}

+ 28
- 0
package.json View File

@@ -0,0 +1,28 @@
{
"name": "holllo-org",
"scripts": {
"start": "vite",
"build": "vite build",
"deploy": "pnpm test && pnpm build -- --emptyOutDir && pnpm deploy:netlify",
"deploy:netlify": "netlify deploy -p -d 'build' -s holllo.org",
"test": "xo && stylelint 'source/**/*.scss' && tsc --noEmit"
},
"dependencies": {
"@fontsource/inter": "^4.5.7",
"modern-normalize": "^1.1.0"
},
"devDependencies": {
"@types/node": "^17.0.23",
"sass": "^1.49.9",
"stylelint": "^14.6.1",
"stylelint-config-standard-scss": "^3.0.0",
"typescript": "^4.6.3",
"vite": "^2.8.6",
"vite-plugin-nunjucks": "^0.1.10",
"xo": "^0.48.0"
},
"xo": {
"prettier": true,
"space": true
}
}

+ 3295
- 0
pnpm-lock.yaml
File diff suppressed because it is too large
View File


BIN
source/assets/crates-io.png View File

Before After
Width: 227  |  Height: 227  |  Size: 59 KiB

BIN
source/assets/fangs.png View File

Before After
Width: 470  |  Height: 451  |  Size: 23 KiB

BIN
source/assets/github.png View File

Before After
Width: 120  |  Height: 120  |  Size: 3.9 KiB

BIN
source/assets/google-chrome.png View File

Before After
Width: 512  |  Height: 512  |  Size: 44 KiB

BIN
source/assets/holllo-mark-square.png View File

Before After
Width: 750  |  Height: 750  |  Size: 3.9 KiB

BIN
source/assets/holllo-mark.png View File

Before After
Width: 590  |  Height: 344  |  Size: 8.7 KiB

BIN
source/assets/microsoft-edge.png View File

Before After
Width: 240  |  Height: 240  |  Size: 25 KiB

BIN
source/assets/mozilla-firefox.png View File

Before After
Width: 128  |  Height: 128  |  Size: 11 KiB

BIN
source/assets/npm.png View File

Before After
Width: 120  |  Height: 120  |  Size: 439 B

BIN
source/assets/pypi.png View File

Before After
Width: 66  |  Height: 58  |  Size: 3.6 KiB

BIN
source/assets/queue.png View File

Before After
Width: 128  |  Height: 128  |  Size: 1.8 KiB

BIN
source/assets/shadow-pattern.png View File

Before After
Width: 2  |  Height: 4  |  Size: 5.8 KiB

+ 21
- 0
source/includes/base.html View File

@@ -0,0 +1,21 @@
<!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>{{ title }}</title>
<link rel="shortcut icon" href="/assets/holllo-mark-square.png" type="image/png">
<link rel="stylesheet" href="/scss/modern-normalize.scss">
<link rel="stylesheet" href="/scss/love.scss">
<link rel="stylesheet" href="/scss/common.scss">
{% block head %}{% endblock %}
</head>

<body class="love">
{% block body %}{% endblock %}
<script src="/ts/common.ts" type="module"></script>
</body>

</html>

+ 43
- 0
source/includes/macros.html View File

@@ -0,0 +1,43 @@
{%- macro iconLink(link, text='Unknown', icon='none') -%}
{%- set link = linkFromType(link, icon) -%}
<a class="icon-link" href="{{ link }}" rel="noopener noreferrer">
<img alt="{{ text }}" src="/assets/{{ icon }}.png">
</a>
{%- endmacro -%}

{%- macro link(link, text='', type='default', linkAsText=false) -%}
{%- if linkAsText -%}
{%- set text = link -%}
{%- endif -%}

{%- set link = linkFromType(link, type) -%}
<a href="{{ link }}" rel="noopener noreferrer">{{ text }}</a>
{%- endmacro -%}

{%- macro linkFromType(link, type='default') -%}
{%- if type === 'github' -%}
{%- set text = 'GitHub' -%}
{%- set link = 'https://github.com/' + link -%}
{%- elif type === 'mozilla-firefox' -%}
{%- set text = 'Mozilla Firefox' -%}
{%- set link = 'https://addons.mozilla.org/firefox/addon/' + link -%}
{%- elif type === 'google-chrome' -%}
{%- set text = 'Google Chrome' -%}
{%- set link = 'https://chrome.google.com/webstore/detail/' + link -%}
{%- elif type === 'microsoft-edge' -%}
{%- set text = 'Microsoft Edge' -%}
{%- set link = 'https://microsoftedge.microsoft.com/addons/detail/' + link -%}
{%- elif type === 'crates-io' -%}
{%- set text = 'Crates.io' -%}
{%- set link = 'https://crates.io/crates/' + link -%}
{%- elif type === 'pypi' -%}
{%- set text = 'Python Package Index' -%}
{%- set link = 'https://pypi.org/project/' + link -%}
{%- elif type === 'npm' -%}
{%- set text = 'npm' -%}
{%- set link = 'https://www.npmjs.com/package/' + link -%}
{%- endif -%}

{{- link -}}

{%- endmacro -%}

+ 126
- 0
source/index.html View File

@@ -0,0 +1,126 @@
{% extends "source/includes/base.html" %}
{% import "source/includes/macros.html" as macros %}

{% set title = "Holllo" %}

{% block head %}
<link rel="stylesheet" href="/scss/home/home.scss">
{% endblock %}

{% block body %}
<header class="page-header">
<img alt="Holllo" src="/assets/holllo-mark.png">
<p class="byline">Creating free and open-source software.</p>
</header>

<div class="sections">
<h2 class="webextensions-header span-grid">WebExtensions</h2>

<section>
<h3>
<img src="/assets/fangs.png" alt="Fangs Logo">
{{ macros.link(link='Holllo/fangs/releases', text='Fangs', type='github') }}
</h3>

<p>
Create your own
{{ macros.link(link='https://duckduckgo.com/bang', text='DuckDuckGo Bangs') }}.
</p>

<p class="icons">
{{ macros.iconLink(link='Holllo/fangs', icon='github') }}
{{ macros.iconLink(link='fangs', icon='mozilla-firefox') }}
{{ macros.iconLink(link='dlllfannplfkhbiidhihagjkbmcolclf', icon='google-chrome') }}
{{ macros.iconLink(link='fgfkpbflhnljpfniippaagjjlncobhjd', icon='microsoft-edge') }}
</p>
</section>

<section>
<h3>
<img src="/assets/queue.png" alt="Queue Logo">
{{ macros.link(link='Holllo/queue/releases', text='Queue', type='github') }}
</h3>

<p>Easily save links so you can go through them later.</p>

<p class="icons">
{{ macros.iconLink(link='Holllo/queue', icon='github') }}
{{ macros.iconLink(link='holllo-queue', icon='mozilla-firefox') }}
{{ macros.iconLink(link='epnbikemcmienphlfmidkimpjnmohcbl', icon='google-chrome') }}
{{ macros.iconLink(link='aanjampfdpcnhoeglmfefmmegdbifaak', icon='microsoft-edge') }}
</p>
</section>

<h2 class="libraries-header span-grid">Libraries</h2>

<section>
<h3>
{{ macros.link(link='opml', type='crates-io', linkAsText=true) }}
&
{{ macros.link(link='opyml', type='pypi', linkAsText=true) }}
</h3>

<p>
{{ macros.link(link='https://www.rust-lang.org', text='Rust') }}
&
{{ macros.link(link='https://www.python.org', text='Python') }}
libraries for the
{{ macros.link(link='http://opml.org', text='OPML') }}
file format.
</p>

<p class="icons">
{{ macros.iconLink(link='Holllo/opml', icon='github') }}
{{ macros.iconLink(link='opml', icon='crates-io') }}
{{ macros.iconLink(link='Holllo/opyml', icon='github') }}
{{ macros.iconLink(link='opyml', icon='pypi') }}
</p>
</section>

<section>
<h3>
{{ macros.link(link='web-ext-native-messaging', type='crates-io', linkAsText=true) }}
</h3>

<p>
{{
macros.link(
link='https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/Native_messaging',
text='WebExtension Native Messaging'
)
}}
library for
{{ macros.link(link='https://www.rust-lang.org', text='Rust') }}.
</p>

<p class="icons">
{{ macros.iconLink(link='Holllo/web-ext-native-messaging', icon='github') }}
{{ macros.iconLink(link='web-ext-native-messaging', icon='crates-io') }}
</p>
</section>

<section>
<h3>
{{ macros.link(link='migration-helper', type='npm', linkAsText=true) }}
</h3>

<p>
A tiny
{{ macros.link(link='https://www.typescriptlang.org', text='TypeScript') }}
helper library for migrating data.
</p>

<p class="icons">
{{ macros.iconLink(link='Holllo/migration-helper', icon='github') }}
{{ macros.iconLink(link='migration-helper', icon='npm') }}
</p>
</section>
</div>

<footer class="page-footer">
<p>
&copy; Holllo 💖
<a href="mailto:helllo@holllo.org">helllo@holllo.org</a>
</p>
</footer>
{% endblock %}

+ 38
- 0
source/scss/common.scss View File

@@ -0,0 +1,38 @@
@use 'reset';

html {
font-size: 62.5%;
}

body {
--background-1: var(--db-1);
--background-2: var(--db-2);
--foreground-1: var(--df-1);
--foreground-2: var(--df-2);
--spacing-04: 04px;
--spacing-08: 08px;
--spacing-16: 16px;
--spacing-32: 32px;
--spacing-48: 48px;
--spacing-64: 64px;

background-color: var(--background-1);
color: var(--foreground-1);
font-family: Inter, sans-serif;
font-size: 1.6rem;
padding: var(--spacing-16);
}

a {
color: var(--foreground-1);
text-decoration: 0.1rem dotted underline;

&:hover {
background-color: var(--foreground-1);
color: var(--background-1);
}
}

:focus {
outline: 2px dotted var(--foreground-1);
}

+ 35
- 0
source/scss/home/home.scss View File

@@ -0,0 +1,35 @@
@use '../mixins';
@use 'sections';

.page-header {
@include mixins.responsive-container;

align-items: center;
display: flex;
flex-direction: column;
gap: var(--spacing-16);
padding: var(--spacing-16);

img {
width: 20rem;
}

.byline {
@include mixins.patterned-shadow(var(--spacing-08));

background-color: var(--foreground-2);
color: var(--background-1);
font-weight: bold;
padding: var(--spacing-16);
}
}

.page-footer {
@include mixins.responsive-container;

padding: var(--spacing-16);

@media (max-width: mixins.$medium-breakpoint) {
text-align: center;
}
}

+ 90
- 0
source/scss/home/sections.scss View File

@@ -0,0 +1,90 @@
@use '../mixins';

.sections {
@include mixins.responsive-container;

display: grid;
gap: var(--spacing-16);
grid-template-columns: repeat(1, 1fr);
margin-bottom: var(--spacing-16);

@media (min-width: mixins.$medium-breakpoint) {
grid-template-columns: repeat(2, 1fr);

.span-grid {
grid-column: 1 / 3;
}
}

.icons {
align-items: center;
display: flex;
gap: var(--spacing-04);
margin-left: auto;

a {
height: 3rem;
padding: 2px;
text-decoration: none;

&:hover {
background-color: var(--background-1);
outline: 2px dotted var(--foreground-2);
}
}

img {
height: 100%;
}
}
}

h2 {
@include mixins.patterned-shadow(var(--spacing-08));

margin-left: auto;
margin-right: auto;
margin-top: var(--spacing-32);
min-width: 40%;
padding: var(--spacing-16);
width: fit-content;

@media (max-width: mixins.$medium-breakpoint) {
width: 100%;
}

&.libraries-header {
background-color: var(--la-1);
}

&.webextensions-header {
background-color: var(--la-8);
}
}

section {
@include mixins.patterned-shadow(var(--spacing-08));

background-color: var(--background-2);
border: 1px solid var(--foreground-2);
display: flex;
flex-direction: column;
gap: var(--spacing-16);
height: min-content;
padding: var(--spacing-16);

h3 {
align-items: center;
display: inline-flex;
font-size: 3rem;
gap: var(--spacing-08);

img {
width: 3.5rem;
}
}

a {
font-weight: bold;
}
}

+ 45
- 0
source/scss/love.scss View File

@@ -0,0 +1,45 @@
/*
The Love Theme CSS Custom Properties
https://love.holllo.cc - version 0.1.0
MIT license
*/

.love {
/* Love Dark */
--df-1: #f2efff;
--df-2: #e6deff;
--db-1: #1f1731;
--db-2: #2a2041;
--da-1: #f99fb1;
--da-2: #faa56c;
--da-3: #d2b83a;
--da-4: #96c839;
--da-5: #3bd18a;
--da-6: #3ecdbf;
--da-7: #41c8e5;
--da-8: #98b9f8;
--da-9: #d5a6f8;
--da-10: #f99add;
--dg-1: #e2e2e2;
--dg-2: #c6c6c6;
--dg-3: #ababab;

/* Love Light */
--lf-1: #1f1731;
--lf-2: #2a2041;
--lb-1: #f2efff;
--lb-2: #e6deff;
--la-1: #8b123c;
--la-2: #6a3b11;
--la-3: #514610;
--la-4: #384d10;
--la-5: #115133;
--la-6: #124f49;
--la-7: #144d5a;
--la-8: #17477e;
--la-9: #6f1995;
--la-10: #81156a;
--lg-1: #1b1b1b;
--lg-2: #303030;
--lg-3: #474747;
}

+ 29
- 0
source/scss/mixins.scss View File

@@ -0,0 +1,29 @@
$medium-breakpoint: 900px;
$large-breakpoint: 1200px;

@mixin responsive-container {
margin-left: auto;
margin-right: auto;
width: $large-breakpoint;

@media (max-width: $large-breakpoint) {
width: 100%;
}
}

@mixin patterned-shadow($size) {
position: relative;

&::after {
--shadow-size: #{$size};

background: url('/assets/shadow-pattern.png') repeat;
content: '';
height: 100%;
left: var(--shadow-size);
position: absolute;
top: var(--shadow-size);
width: 100%;
z-index: -1;
}
}

+ 1
- 0
source/scss/modern-normalize.scss View File

@@ -0,0 +1 @@
@use '../../node_modules/modern-normalize/modern-normalize.css';

+ 11
- 0
source/scss/reset.scss View File

@@ -0,0 +1,11 @@
h1,
h2,
h3,
h4,
p,
ol,
ul,
li {
margin: 0;
padding: 0;
}

+ 1
- 0
source/ts/common.ts View File

@@ -0,0 +1 @@
import '../../node_modules/@fontsource/inter/latin.css';

+ 19
- 0
source/types.d.ts View File

@@ -0,0 +1,19 @@
declare global {
// See Vite documentation for `import.meta.env` usage.
// https://vitejs.dev/guide/env-and-mode.html

interface ImportMeta {
readonly env: ImportMetaEnv;
}

interface ImportMetaEnv {
readonly BASE_URL: string;
readonly DEV: boolean;
readonly MODE: string;
readonly PROD: boolean;
readonly VITE_BROWSER: 'chromium' | 'firefox';
}
}

// Make TypeScript see this file as a module.
export {};

+ 15
- 0
tsconfig.json View File

@@ -0,0 +1,15 @@
{
"compilerOptions": {
"esModuleInterop": true,
"module": "ESNext",
"moduleResolution": "Node",
"noEmit": true,
"outDir": "build",
"strict": true,
"target": "ESNext"
},
"include": [
"source/**/*.ts",
"vite.config.ts"
]
}

+ 26
- 0
vite.config.ts View File

@@ -0,0 +1,26 @@
import path from 'node:path';
import url from 'node:url';

import {defineConfig} from 'vite';

import nunjucks from 'vite-plugin-nunjucks';

const currentDir = path.dirname(url.fileURLToPath(import.meta.url));
const buildDir = path.join(currentDir, 'build');
const sourceDir = path.join(currentDir, 'source');

export default defineConfig({
build: {
minify: false,
outDir: buildDir,
sourcemap: true,
},
plugins: [
nunjucks({
nunjucksConfigure: {
throwOnUndefined: true,
},
}),
],
root: sourceDir,
});

Loading…
Cancel
Save