Sutty/sutty-base-jekyll-theme
5
0
Fork 0
Code Issues Pull requests Projects Releases Activity

traer mejoras desde otros proyectos

Browse source
This commit is contained in:
f 2020-11-12 13:28:24 -03:00
parent 2a29ccb1b6
commit 8d86856e00
13 changed files with 304 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.env Normal file
View file

@ -0,0 +1 @@
# Colocar variables de entorno

43
Makefile
View file

@ -1,27 +1,46 @@
SHELL := bash
.DEFAULT_GOAL := all
JEKYLL_ENV ?= production
site ?= $(patsubst %-jekyll-theme,%,$(notdir $(PWD)))
domain ?= $(site).sutty.local
env ?= production
JEKYLL_ENV ?= $(env)
include .env
export
all: fa build serve
all: fa build ## Todo
build:
build: ## Compilar el sitio
bundle exec jekyll build --profile --trace
# La ubicación de serve va a un directorio temporal fuera del directorio
# actual para hacerlo compatible con jekyll-locales.
serve:
bundle exec jekyll serve --destination /tmp/_site
serve: /etc/hosts ## Servidor de prueba
@echo "Iniciando servidor web"
@if ! ss -lnp | grep -q :8080 ; then nghttpd -d _site/ 8080 ../sutty.local/domain/sutty.local.{key,crt} & echo $$! > /tmp/nghttpd.pid ; fi
@if ! ss -lnp | grep -q :4000 ; then nghttpx -b "127.0.0.1,9095;/assets/js/" -b "$(domain),8080;/;proto=h2;tls" -f "0.0.0.0,4000" -L FATAL --no-ocsp ../sutty.local/domain/sutty.local.{key,crt} & echo $$! > /tmp/nghttpx.pid ; fi
kill-servers: /tmp/nghttpd.pid /tmp/nghttpx.pid /tmp/webpack.pid ## Cerrar el servidor
webpack-dev-server: ## Servidor de prueba de Webpack
./node_modules/.bin/webpack-dev-server --public $(domain):9095 & echo $$! > /tmp/webpack.pid
# Tomar los códigos de los íconos de este archivo y copiarlos a fa.txt
# node_modules/font-awesome/scss/_variables.scss
whitelist = $(shell grep -v "^#" $< | sed "s/^/U+/" | tr "\n" ",")
assets/fonts/forkawesome-webfont.woff2: fa.txt
which glyphhanger || npm i -g glyphhanger
glyphhanger \
--subset=node_modules/fork-awesome/fonts/forkawesome-webfont.ttf \
--formats=woff2 \
--whitelist=$(shell grep -v "^#" $< | sed "s/^/U+/" | tr "\n" "," )
glyphhanger --subset=node_modules/fork-awesome/fonts/forkawesome-webfont.ttf --formats=woff2 --whitelist=$(whitelist)
mv node_modules/fork-awesome/fonts/forkawesome-webfont-subset.woff2 $@
fa: assets/fonts/forkawesome-webfont.woff2
fa: assets/fonts/forkawesome-webfont.woff2 ## Fork Awesome
/etc/hosts: always
@echo "Chequeando si es necesario agregar el dominio local $(domain)"
@grep -q " $(domain)$$" $@ || echo -e "127.0.0.1 $(domain)\n::1 $(domain)" | sudo tee -a $@
%.pid: always
@test -f $@ && cat $@ | xargs -r kill &>/dev/null || :
@rm -f $@
.PHONY: always

89
README.md
View file

@ -4,32 +4,83 @@ CAMBIAME: Esta es una plantilla base para comenzar cualquier plantilla
relacionada con Sutty, con el entorno de desarrollo que usamos según
nuestro flujo de trabajo.
La instalación de esta gema se realiza bifurcando el desarrollo de esta
usando git, por ejemplo:
```bash
# Hacer un fork local desde sutty-base-jekyll-theme a nuestra plantilla
git clone https://0xacab.org/sutty/jekyll/sutty-base-jekyll-theme.git \
CAMBIAME-jekyll-theme
# Desde el directorio de trabajo
cd ~/Sutty
# Instalar sutty-cli antes de empezar
gem install sutty-cli
# Iniciar una plantilla
sutty-cli theme CAMBIAME
# Se creó el repositorio
cd CAMBIAME-jekyll-theme
# Sutty-base ahora es el proyecto base, desde el que podemos tomar
# cambios, pero no enviamos para no mezclar las cosas
git remote rename origin upstream
# Agregamos el repositorio donde vamos a enviar y publicar cambios
git remote add origin \
git@0xacab.org:sutty/jekyll/CAMBIAME-jekyll-theme.git
# Configuramos git para que envíe siempre los cambios al repositorio
# nuevo
git push --set-upstream origin master
```
Para empezar, hay que buscar y reemplazar en todos los archivos donde
diga `CAMBIAME`.
También hay que instalar las dependencias de CSS y JS con `yarn`.
También hay que instalar
[sutty.local](https://0xacab.org/sutty/sutty.local/):
```bash
# Desde el directorio de trabajo
cd ~/Sutty
# Clonar el repositorio
git clone https://0xacab.org/sutty/sutty.local.git
cd sutty.local
make all domain domain=sutty.local
cd .. # Volver al directorio de trabajo
```
Esto genera un certificado a nivel local que luego va a usar el
servidor de desarrollo.
## Desarrollo
Siempre trabajamos desde el directorio raíz del repositorio:
```bash
cd ~/Sutty/CAMBIAME-jekyll-theme
```
Primero hay que iniciar los servidores, antes hay que instalar el
paquete `nghttp2`.
```bash
make serve
```
A partir de este momento podemos editar los archivos. Para probar lo
que estamos haciendo, compilamos el sitio.
```bash
make build
```
Hay que hacer esto cada vez que queremos probar cambios.
**Nota:** No usamos `jekyll serve` porque entra en conflicto con algunos
de nuestros complementos y los sitios grandes tardan en compilarse de
todas formas.
## Actualizar
Podemos traer cambios de la base:
```bash
git pull upstream master
```
Si hubiera conflictos, los podemos resolver con:
```bash
# Esto se hace una sola vez, cambiar vimdiff por la herramienta que
# queramos usar
git config --global mergetool.tool vimdiff
git config --global mergetool.keepBackup false
# Resolver los conflictos
git mergetool
```
## Publicación

26
_includes/navbar.html
View file

@ -1,23 +1,31 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light d-print-block" role="navigation" aria-label="{{ site.i18n.menu.title }}">
<a class="navbar-brand" href="">
{% include_cached logo.html %}
{% include_cached logo.svg %}
</a>
{% comment %}
TODO: Add CSS-only hamburger menu.
{% endcomment %}
<ul class="navbar-nav d-print-none">
{%- for item in site.i18n.menu.items -%}
{% comment %}
This makes it hard to just cache the whole navbar, but we prefer
to mark the active item in code rather than with JS.
{% endcomment %}
Algunos items del menú tienen layouts para indicar que
queremos el primero de esos artículos independientemente de
la URL.
XXX: Como las asignaciones sobreviven a este archivo hay que
convertirlas a nil cuando se las deja de usar.
{% endcomment %}
{%- if item.layout -%}
{%- assign post = site.posts | find: 'layout', item.layout -%}
{%- else -%}
{%- assign post = nil -%}
{%- endif -%}
{%- assign href = post.url | default: item.href -%}
{%- assign active = include.active_cache_key | equals: href -%}
<li class="nav-item">
<a class="nav-link{% if page.url == item.href %} active{% endif %}" href="{{ item.href }}">
<a class="nav-link {{ active | ternary: 'active', '' }}" href="{{ href }}">
{{ item.title }}
{%- if page.url == item.href -%}
{%- if active -%}
<span class="sr-only">
{{ site.i18n.menu.active | default: '(current)' }}
</span>

4
_includes/packs.html Normal file
View file

@ -0,0 +1,4 @@
<script
defer
type="text/javascript"
src="{{ jekyll.environment | equals: 'production' | ternary: 'assets/js/pack.js', 'https://sutty.local:9095/assets/js/pack.js' }}"></script>

1
_includes/preload_font.html Normal file
View file

@ -0,0 +1 @@
<link rel="preload" as="font" type="font/woff2" crossorigin href="{{ include.font }}" />

30
_layouts/default.html
View file

@ -10,18 +10,34 @@
<meta name="referrer" content="strict-origin-when-cross-origin"/>
<link href="assets/css/styles.css" rel="stylesheet">
<script defer type="text/javascript" src="assets/js/script.js"></script>
{% comment %}
Webpack
{% endcomment %}
{% include_cached packs.html %}
{% comment %}
Agregar otras tipografías. Esto hace que las tipografías se carguen
lo más rápido posible y minimizar el tiempo en que se ven las del
navegador. En Firefox todavía no está soportado.
{% endcomment %}
{% include_cached preload_font.html font='assets/fonts/forkawesome-webfont.woff2' %}
<link rel="icon" type="image/svg+xml" href="public/favicon.svg">
<link rel="alternate icon" href="public/favicon.ico">
<link rel="mask-icon" href="public/favicon.svg" color="white">
{% seo %}
{% feed_meta %}
</head>
<body>
<main class="container">
<div class="row justify-content-center d-print-block">
<div class="col">
{{ content }}
</div>
</div>
{%- assign active_cache_key = page.url | menu_active_item | default: 'none' -%}
{%- include_cached navbar.html active_cache_key=active_cache_key %}
<main>
{{ content }}
</main>
{% include_cached footer.html %}
</body>
</html>

84
_packs/controllers/search_controller.js Normal file
View file

@ -0,0 +1,84 @@
import 'core-js/stable'
import 'regenerator-runtime/runtime'
import { Controller } from 'stimulus'
import { Liquid } from 'liquidjs'
const lunr = require("lunr")
require("lunr-languages/lunr.stemmer.support")(lunr)
require("lunr-languages/lunr.es")(lunr)
export default class extends Controller {
static targets = [ 'q' ]
connect () {
this.element.addEventListener('submit', async event => {
event.stopPropagation()
event.preventDefault()
this.search()
})
const q = window.location.search.match(/^\?q=(?<q>.*)&?/)
if (q) this.qTarget.value = decodeURI(q.groups.q)
// There can only be one
if (!window.search_fetching) this.fetch()
}
async search () {
const q = this.qTarget.value
if (!q || q === '') return
const main = document.querySelector('main')
const results = window.index.search(q).map(r => window.data.find(a => a.id == r.ref))
const site = await this.site()
const request = await fetch('assets/templates/results.html')
const template = await request.text()
const html = await this.engine.parseAndRender(template, { q, site, results })
const title = `${site.i18n.search.title} - ${q}`
window.history.pushState({ q }, title, `?q=${encodeURI(q)}`)
document.title = title
main.innerHTML = html
}
async fetch () {
window.search_fetching = true
let response
if (!window.data) {
response = await fetch('data.json')
window.data = await response.json()
}
if (!window.index) {
response = await fetch('idx.json')
const idx = await response.json()
window.index = lunr.Index.load(idx)
}
if (this.qTarget.value !== '') this.search()
}
/*
* Liquid renderer
*
* @return Liquid
*/
get engine () {
if (!window.liquid) window.liquid = new Liquid()
return window.liquid
}
async site () {
if (!window.site) {
const data = await fetch('assets/data/site.json')
window.site = await data.json()
}
return window.site
}
}

6
_packs/entry.js Normal file
View file

@ -0,0 +1,6 @@
import { Application } from 'stimulus'
import { definitionsFromContext } from "stimulus/webpack-helpers"
const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

17
assets/templates/results.html Normal file
View file

@ -0,0 +1,17 @@
<section class="row no-gutters justify-content-center">
<div class="col-10">
{% for item in results %}
<article id="{{ item.slug }}">
<header>
<h2>
<a href="{{ item.url }}">
{{ item.title }}
</a>
</h2>
</header>
<p class="lead">{{ item.description }}</p>
</article>
{% endfor %}
</div>
</section>

17
package.json
View file

@ -1,6 +1,21 @@
{
"dependencies": {
"@babel/core": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"bootstrap": "~4.4",
"fork-awesome": "^1.1.7"
"core-js": "^3.6.5",
"fork-awesome": "^1.1.7",
"liquidjs": "^9.14.0",
"lunr": "^2.3.9",
"lunr-languages": "^1.4.0",
"purgecss": "~1",
"regenerator-runtime": "^0.13.5",
"stimulus": "^1.1.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.0.9"
}
}

27
webpack.config.js Normal file
View file

@ -0,0 +1,27 @@
module.exports = {
entry: './_packs/entry.js',
output: {
path: __dirname,
filename: './assets/js/pack.js'
},
mode: 'development',
devtool: 'inline-source-map',
devServer: {
port: 9095
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
}
]
}
};

7
webpack.prod.js Normal file
View file

@ -0,0 +1,7 @@
const merge = require('webpack-merge');
const common = require('./webpack.config');
module.exports = merge.merge(common, {
mode: 'production',
devtool: 'source-map'
});