replace UI with new UI

This commit is contained in:
Collin M. Barrett 2019-09-02 14:44:55 -05:00
parent ed4ef673a3
commit dcc29ae273
217 changed files with 159 additions and 2397 deletions

View file

@ -1,21 +0,0 @@
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

Binary file not shown.

View file

@ -1,43 +0,0 @@
{
"name": "filterlists.web",
"version": "0.1.0",
"private": true,
"dependencies": {
"@types/jest": "^24.0.18",
"@types/node": "^12.7.3",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.9.0",
"@types/react-router-dom": "^4.3.5",
"antd": "^3.22.2",
"babel-plugin-import": "^1.12.1",
"customize-cra": "^0.5.0",
"react": "^16.9.0",
"react-app-rewired": "^2.1.3",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.1.1",
"slugify": "^1.3.4",
"typescript": "^3.6.2"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
},
"proxy": "https://filterlists.com",
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link
rel="shortcut icon"
href="https://filterlists.com/icon_filterlists.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>
FilterLists | Subscriptions for uBlock Origin, Adblock Plus, AdGuard, ...
</title>
<meta
name="description"
content="FilterLists is the independent, comprehensive directory of filter and host lists for advertisements, trackers, malware, and annoyances. By Collin M. Barrett."
/>
<link
rel="icon"
type="image/png"
href="https://filterlists.com/icon_filterlists.png"
/>
<link rel="canonical" href="https://filterlists.com/" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<p>
FilterLists is built with ReactJS and therefore requires first-party
JavaScript to be enabled. We do not use any third-party JavaScript, and
your privacy is very important to us. If you prefer not to enable
JavaScript or your browser does not support it, the data is also
available on
<a href="https://github.com/collinbarrett/FilterLists/tree/master/data"
>our GitHub repo</a
>.
</p>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

View file

@ -1,15 +0,0 @@
{
"short_name": "FilterLists",
"name": "FilterLists | Subscriptions for uBlock Origin, Adblock Plus, AdGuard, ...",
"icons": [
{
"src": "icon_filterlists.png",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View file

@ -1,10 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});

View file

@ -1,90 +0,0 @@
import { Icon, Layout, Menu } from 'antd';
import React from 'react';
import { BrowserRouter as Router, Route, RouteComponentProps, Switch } from 'react-router-dom';
import { ListsTable } from './components';
const { Header, Content, Footer } = Layout;
export const App: React.FC = () =>
<Router>
<Layout>
<Header>
<Logo />
<Menu theme="dark" mode="horizontal" style={{ lineHeight: '64px' }} />
</Header>
<Content>
<div style={{ background: '#fff', paddingLeft: 12, paddingTop: 12, paddingRight: 12, minHeight: 280 }}>
<Switch>
<Route path="/" component={ListsTable} />
<Route component={NotFound} />
</Switch>
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>
<CopyrightAuthor /> | <Twitter /> | <Community /> | <GitHub /> | <Api /> | <Donate />
</Footer>
</Layout>
</Router>;
const Logo = () =>
<img src={`${process.env.PUBLIC_URL}/logo_filterlists.png`}
alt="FilterLists logo"
height="44px"
style={{ background: '#fff' }} />;
const NotFound = (props: RouteComponentProps) =>
<h2>
404 Not Found: <code>{props.location.pathname}</code>
</h2>;
const CopyrightAuthor = () =>
<>
©{new Date().getFullYear()}&nbsp;
<a href="https://collinmbarrett.com"
title="Collin M. Barrett's Homepage"
target="_blank"
rel="noopener noreferrer">
Collin M. Barrett
</a>
</>;
const Twitter = () =>
<a href="https://twitter.com/FilterLists"
title="FilterLists on Twitter"
target="_blank"
rel="noopener noreferrer">
<Icon type="twitter" /> Twitter
</a>;
const Community = () =>
<a href="https://hub.filterlists.com"
title="FilterLists Discourse community forum"
target="_blank"
rel="noopener noreferrer">
<Icon type="team" /> Community
</a>;
const GitHub = () =>
<a href="https://github.com/collinbarrett/FilterLists"
title="FilterLists git repository on GitHub"
target="_blank"
rel="noopener noreferrer">
<Icon type="github" /> GitHub
</a>;
const Api = () =>
<a href="/api/v1/lists"
title="FilterLists API lists endpoint"
target="_blank"
rel="noopener noreferrer">
<Icon type="api" /> API
</a>;
const Donate = () =>
<a href="https://beerpay.io/collinbarrett/FilterLists"
title="Donate to FilterLists with Beerpay"
target="_blank"
rel="noopener noreferrer">
<Icon type="dollar" /> Donate
</a>;

View file

@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

View file

@ -1,8 +0,0 @@
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
ReactDOM.render(<App />, document.getElementById('root'));

View file

@ -1 +0,0 @@
/// <reference types="react-scripts" />

View file

@ -1,3 +0,0 @@
import { nameof } from './nameof';
export { nameof };

View file

@ -1,26 +0,0 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"noImplicitAny": true
},
"include": [
"src"
]
}

View file

@ -1,5 +1,3 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
@ -20,4 +18,4 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn-error.log*

View file

@ -1,21 +0,0 @@
# Context: .
# Command: docker build -f src/FilterLists.Web/Dockerfile .
# init base
FROM nginx:alpine as base
# init build
FROM node:alpine as build
# install
WORKDIR /usr/src/app/
COPY src/FilterLists.Web/package*.json ./
RUN npm install --only=prod
# build
COPY src/FilterLists.Web/. ./
RUN INLINE_RUNTIME_CHUNK=false npm run build
# final
FROM base as final
COPY --from=build /usr/src/app/build /usr/share/nginx/html

Binary file not shown.

View file

@ -1,30 +1,28 @@
{
"name": "web",
"name": "filterlists.web",
"version": "0.1.0",
"private": true,
"dependencies": {
"@types/jest": "24.0.16",
"@types/node": "12.6.9",
"@types/react": "16.8.24",
"@types/react-dom": "16.8.5",
"@types/react-router-dom": "^4.3.4",
"@types/react-table": "^6.8.5",
"bootstrap": "^4.3.1",
"es6-promise": "^4.2.8",
"moment": "^2.24.0",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.10",
"react-dom": "^16.8.6",
"@types/jest": "^24.0.18",
"@types/node": "^12.7.3",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.9.0",
"@types/react-router-dom": "^4.3.5",
"antd": "^3.22.2",
"babel-plugin-import": "^1.12.1",
"customize-cra": "^0.5.0",
"react": "^16.9.0",
"react-app-rewired": "^2.1.3",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"react-table": "^6.10.0",
"typescript": "3.5.3"
"react-scripts": "^3.1.1",
"slugify": "^1.3.4",
"typescript": "^3.6.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
},
"proxy": "https://filterlists.com",
"eslintConfig": {
@ -41,6 +39,5 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {}
}
}
}

View file

@ -1,27 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link
rel="shortcut icon"
href="https://filterlists.com/icon_filterlists.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>
FilterLists | Subscriptions for uBlock Origin, Adblock Plus, AdGuard, ...
</title>
<meta
name="description"
content="FilterLists is the independent, comprehensive directory of filter and host lists for advertisements, trackers, malware, and annoyances. By Collin M. Barrett."
/>
<link
rel="icon"
type="image/png"
href="https://filterlists.com/icon_filterlists.png"
/>
<link rel="canonical" href="https://filterlists.com/" />
</head>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/icon_filterlists.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>FilterLists | Subscriptions for uBlock Origin, Adblock Plus, AdGuard, ...</title>
<meta name="description"
content="FilterLists is the independent, comprehensive directory of filter and host lists for advertisements, trackers, malware, and annoyances. By Collin M. Barrett." />
<link rel="icon" type="image/png" href="icon_filterlists.png">
<link rel="canonical" href="https://filterlists.com/">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<p>FilterLists is built with ReactJS and therefore requires first-party JavaScript to be enabled. We do not use any
third-party JavaScript, and your privacy is very important to us. If you prefer not to enable JavaScript or your
browser does not support it, the data is also available on <a
href="https://github.com/collinbarrett/FilterLists/tree/master/data">our GitHub repo</a>.</p>
</div>
</body>
</html>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<p>
FilterLists is built with ReactJS and therefore requires first-party
JavaScript to be enabled. We do not use any third-party JavaScript, and
your privacy is very important to us. If you prefer not to enable
JavaScript or your browser does not support it, the data is also
available on
<a href="https://github.com/collinbarrett/FilterLists/tree/master/data"
>our GitHub repo</a
>.
</p>
</div>
</body>
</html>

View file

@ -1,14 +0,0 @@
/* use consistent and smaller font size globally */
body,
h2,
h3,
h4,
h5,
blockquote {
font-size: 16px;
}
/* leave a bit of horizontal padding around the app for cleanliness */
.container {
max-width: 90vw;
}

View file

@ -1,9 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { App } from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
});

View file

@ -1,14 +1,90 @@
import { Icon, Layout, Menu } from 'antd';
import React from 'react';
import './App.css';
import { Layout } from "./Layout";
import { Router } from "./Router";
import { BrowserRouter as Router, Route, RouteComponentProps, Switch } from 'react-router-dom';
const App: React.FC = () => {
return (
import { ListsTable } from './components';
const { Header, Content, Footer } = Layout;
export const App: React.FC = () =>
<Router>
<Layout>
<Router />
<Header>
<Logo />
<Menu theme="dark" mode="horizontal" style={{ lineHeight: '64px' }} />
</Header>
<Content>
<div style={{ background: '#fff', paddingLeft: 12, paddingTop: 12, paddingRight: 12, minHeight: 280 }}>
<Switch>
<Route path="/" component={ListsTable} />
<Route component={NotFound} />
</Switch>
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>
<CopyrightAuthor /> | <Twitter /> | <Community /> | <GitHub /> | <Api /> | <Donate />
</Footer>
</Layout>
);
}
</Router>;
export default App;
const Logo = () =>
<img src={`${process.env.PUBLIC_URL}/logo_filterlists.png`}
alt="FilterLists logo"
height="44px"
style={{ background: '#fff' }} />;
const NotFound = (props: RouteComponentProps) =>
<h2>
404 Not Found: <code>{props.location.pathname}</code>
</h2>;
const CopyrightAuthor = () =>
<>
©{new Date().getFullYear()}&nbsp;
<a href="https://collinmbarrett.com"
title="Collin M. Barrett's Homepage"
target="_blank"
rel="noopener noreferrer">
Collin M. Barrett
</a>
</>;
const Twitter = () =>
<a href="https://twitter.com/FilterLists"
title="FilterLists on Twitter"
target="_blank"
rel="noopener noreferrer">
<Icon type="twitter" /> Twitter
</a>;
const Community = () =>
<a href="https://hub.filterlists.com"
title="FilterLists Discourse community forum"
target="_blank"
rel="noopener noreferrer">
<Icon type="team" /> Community
</a>;
const GitHub = () =>
<a href="https://github.com/collinbarrett/FilterLists"
title="FilterLists git repository on GitHub"
target="_blank"
rel="noopener noreferrer">
<Icon type="github" /> GitHub
</a>;
const Api = () =>
<a href="/api/v1/lists"
title="FilterLists API lists endpoint"
target="_blank"
rel="noopener noreferrer">
<Icon type="api" /> API
</a>;
const Donate = () =>
<a href="https://beerpay.io/collinbarrett/FilterLists"
title="Donate to FilterLists with Beerpay"
target="_blank"
rel="noopener noreferrer">
<Icon type="dollar" /> Donate
</a>;

View file

@ -1,60 +0,0 @@
import * as React from "react";
interface Props {
children?: React.ReactNode;
};
export const Layout = (props: Props) =>
<div className="container">
<Header />
<div className="row">
<div className="w-100">
{props.children}
</div>
</div>
<Footer />
</div>;
const Header = () =>
<header className="row">
<h1>
<a href="./">
<img src="logo_filterlists.png" alt="FilterLists" className="img-fluid" style={{ maxWidth: "60%" }}/>
</a>
</h1>
</header>;
const Footer = () =>
<footer className="row justify-content-center">
<p className="mt-2 ml-1 mr-1">
<HubLink /> | <GitHubLink /> | <ApiLink /> | <DonateLink /> | By <OwnerLink />
</p>
</footer>;
const HubLink = () =>
<a href="https://hub.filterlists.com"
title="Discourse community forum">
Hub
</a>;
const GitHubLink = () =>
<a href="https://github.com/collinbarrett/FilterLists">
GitHub
</a>;
const ApiLink = () =>
<a href="/api/v1/lists"
title="API lists endpoint">
API
</a>;
const DonateLink = () =>
<a href="https://beerpay.io/collinbarrett/FilterLists"
title="Support with Beerpay">
Donate
</a>;
const OwnerLink = () =>
<a href="https://collinmbarrett.com/">
Collin M. Barrett
</a>;

View file

@ -1,13 +0,0 @@
import * as React from "react";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import { Home } from "./modules";
const Routes =
<Switch>
<Route exact path="/" component={Home} />
<Route>
<Redirect to="/" />
</Route>
</Switch>;
export const Router = () => <BrowserRouter children={Routes} />

View file

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

Before

Width:  |  Height:  |  Size: 520 B

After

Width:  |  Height:  |  Size: 520 B

View file

@ -1,7 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Some files were not shown because too many files have changed in this diff Show more