Skip to content

Commit

Permalink
Add our modern frontend stack
Browse files Browse the repository at this point in the history
  • Loading branch information
seanh committed Jul 2, 2024
1 parent b29dd69 commit 511af2c
Show file tree
Hide file tree
Showing 12 changed files with 892 additions and 64 deletions.
26 changes: 25 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,27 @@
{
"presets": ["@babel/preset-env"]
"presets": [
"@babel/preset-typescript",
[
"@babel/preset-react",
{
"runtime": "automatic",
"importSource": "preact"
}
],
"@babel/preset-env"
],
"env": {
"development": {
"presets": [
[
"@babel/preset-react",
{
"development": true,
"runtime": "automatic",
"importSource": "preact"
}
]
]
}
}
}
10 changes: 8 additions & 2 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import changed from 'gulp-changed';
import gulpIf from 'gulp-if';
import svgmin from 'gulp-svgmin';

import tailwindConfig from './tailwind.config.js';

const IS_PRODUCTION_BUILD = process.env.NODE_ENV === 'production';

gulp.task('build-js', () => buildJS('./rollup.config.js'));
Expand All @@ -22,12 +24,16 @@ gulp.task('build-css', () =>
'./h/static/styles/help-page.scss',
'./h/static/styles/site.scss',
'./h/static/styles/vendor/icomoon.css',
]),
'./h/static/styles/new_group.css',
], { tailwindConfig}),
);

gulp.task('watch-css', () => {
gulp.watch(
'h/static/styles/**/*.scss',
[
'h/static/styles/**/*.{css,scss}',
'h/static/scripts/**/*.{js,ts,tsx}',
],
{ ignoreInitial: false },
gulp.series('build-css'),
);
Expand Down
6 changes: 6 additions & 0 deletions h/assets.ini
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,9 @@ site_css =
help_page_css =
styles/icomoon.css
styles/help-page.css

new_group_css =
styles/new_group.css

new_group_js =
scripts/new_group.bundle.js
10 changes: 10 additions & 0 deletions h/static/scripts/new_group/components/NewGroupApp.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { Spinner } from '@hypothesis/frontend-shared';

export default function NewGroupApp() {
return (
<>
<Spinner />
<p>Hello <span className="bg-black text-white">Tailwind!</span></p>
</>
);
}
14 changes: 14 additions & 0 deletions h/static/scripts/new_group/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { render } from 'preact';

import NewGroupApp from './components/NewGroupApp';

export function init() {
const rootEl = document.querySelector('#app');

render(
<NewGroupApp />,
rootEl
);
}

init();
22 changes: 22 additions & 0 deletions h/static/scripts/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"checkJs": true,
"lib": ["es2018", "dom"],
"jsx": "react-jsx",
"jsxImportSource": "preact",
"module": "commonjs",
"noEmit": true,
"strict": true,
"target": "ES2020",
"useUnknownInCatchVariables": false
},
"include": ["**/*.js", "**/*.ts", "**/*.tsx"],
"exclude": [
// Tests and test infrastructure
"**/test/*.js",
"bootstrap.js",
"karma.config.cjs"
]
}
5 changes: 5 additions & 0 deletions h/static/styles/new_group.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/* CSS entry point for the 'new group' app. */

@tailwind base;
@tailwind components;
@tailwind utilities;
36 changes: 17 additions & 19 deletions h/templates/groups/create.html.jinja2
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
{% extends "h:templates/layouts/group.html.jinja2" %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a new private group</title>
{% for url in asset_urls("new_group_css") %}
<link rel="stylesheet" href="{{ url }}">
{% endfor %}
</head>
<body>
<div id="app"></div>

{% set page_title = 'Create a new private group' %}

{% block page_content %}
<h1 class="form-header">Create a new private group</h1>
{{ form }}

<footer class="form-footer">
{# This form has at least one required field. If that changes we should update this footer. #}
<span class="form-footer__required">
<span class="form-footer__symbol">
*
</span>
<span class="form-footer__text">
Required
</span>
</span>
</footer>
{% endblock page_content %}
{% for url in asset_urls("new_group_js") %}
<script type="module" src="{{ url }}"></script>
{% endfor %}
</body>
</html>
15 changes: 11 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,25 @@
"description": "The Internet, peer reviewed.",
"scripts": {
"build": "gulp build",
"checkformatting": "prettier --check *.js h/static/scripts",
"format": "prettier --list-different --write *.js h/static/scripts",
"checkformatting": "prettier --check *.{js,ts,tsx} h/static/scripts",
"format": "prettier --list-different --write *{.js,ts,tsx} h/static/scripts",
"lint": "eslint h/static/scripts",
"test": "gulp test"
},
"dependencies": {
"@babel/core": "^7.24.7",
"@babel/preset-env": "^7.24.6",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.4",
"@hypothesis/frontend-build": "^3.0.0",
"@hypothesis/frontend-shared": "^7.10.0",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.8",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
"autoprefixer": "^10.4.19",
"bootstrap": "^4.6.2",
"classnames": "^2.5.1",
"escape-html": "^1.0.3",
"gulp": "^5.0.0",
"gulp-changed": "^5.0.2",
Expand All @@ -31,10 +35,12 @@
"normalize.css": "^8.0.0",
"popper.js": "^1.16.1",
"postcss": "^8.4.39",
"preact": "^10.13.2",
"raven-js": "^3.7.0",
"rollup": "^4.18.0",
"sass": "^1.77.6",
"scroll-into-view": "^1.16.2"
"scroll-into-view": "^1.16.2",
"tailwindcss": "^3.4.0"
},
"devDependencies": {
"babel-plugin-mockable-imports": "^2.0.1",
Expand All @@ -54,7 +60,8 @@
"mocha": "^10.5.2",
"prettier": "^3.2.5",
"sinon": "^18.0.0",
"syn": "^0.2.2"
"syn": "^0.2.2",
"typescript": "^5.0.4"
},
"engines": {
"node": ">=6"
Expand Down
9 changes: 7 additions & 2 deletions rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,22 @@ function bundleConfig(name, entryFile) {
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**',
extensions: ['.js', '.ts', '.tsx'],
}),
nodeResolve({
extensions: ['.js', '.ts', '.tsx'],
}),
nodeResolve(),
commonjs(),
...prodPlugins,
],
};
}

export default [
// Public-facing website
// Legacy (pre-Preact) public-facing website pages.
bundleConfig('site', 'h/static/scripts/site.js'),
// Preact app for creating new private groups.
bundleConfig('new_group', 'h/static/scripts/new_group/index.tsx'),
// Admin areas of the site
bundleConfig('admin-site', 'h/static/scripts/admin-site.js'),
// Header script inserted inline at the top of the page
Expand Down
63 changes: 63 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import tailwindConfig from '@hypothesis/frontend-shared/lib/tailwind.preset.js';

export default {
presets: [tailwindConfig],
content: [
'./h/static/scripts/**/*.{js,ts,tsx}',
'./node_modules/@hypothesis/frontend-shared/lib/**/*.js',
],
theme: {
extend: {
animation: {
'fade-in': 'fade-in 0.3s forwards',
'fade-out': 'fade-out 0.3s forwards',
'slide-in-from-right': 'slide-in-from-right 0.3s forwards ease-in-out',
},
fontFamily: {
sans: [
'"Helvetica Neue"',
'Helvetica',
'Arial',
'"Lucida Grande"',
'sans-serif',
],
},
boxShadow: {
// Similar to tailwind's default `shadow-inner` but coming from the
// right edge instead of the left
'r-inner': 'inset -2px 0 4px 0 rgb(0,0,0,.05)',
},
keyframes: {
'fade-in': {
'0%': {
opacity: '0',
},
'100%': {
opacity: '1',
},
},
'fade-out': {
'0%': {
opacity: '1',
},
'100%': {
opacity: '0',
},
},
'slide-in-from-right': {
'0%': {
opacity: '0',
left: '100%',
},
'80%': {
left: '-10px',
},
'100%': {
left: '0',
opacity: '1',
},
},
},
},
},
};
Loading

0 comments on commit 511af2c

Please sign in to comment.