6 | ![]()
11 |
12 |
13 |
14 |
88 |
89 |
110 |
--------------------------------------------------------------------------------
/src/components/DaFooter.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
29 |
100 |
101 |
102 |
103 |
271 |
272 |
511 |
--------------------------------------------------------------------------------
/src/components/DaIconSelector.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
46 |
47 |
81 |
--------------------------------------------------------------------------------
/src/components/DaInsanePost.vue:
--------------------------------------------------------------------------------
1 |
2 |
33 |
34 |
99 |
39 | ![Profile image]()
44 |
45 |
71 |
72 |
97 |
98 |
46 | 
50 |
55 |
56 |
50 |
55 | {{ name }}
57 |
58 |
61 |
62 | ![]()
67 |
68 | Customize your content with:
69 | /# Settings #/
73 |
5 |
28 |
29 |
30 |
91 |
92 |
115 |
--------------------------------------------------------------------------------
/src/components/DaPost.vue:
--------------------------------------------------------------------------------
1 |
2 |
36 |
37 |
38 |
112 |
113 |
145 |
--------------------------------------------------------------------------------
/src/components/DaSpinner.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 | {{ title | cardTitle }}
11 |
20 |
12 |
19 | // {{ source }}
18 |
21 |
26 |
27 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
14 |
24 |
53 |
--------------------------------------------------------------------------------
/src/components/DaStores.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 | 
8 | Chrome
9 |
10 |
14 | 
15 | Firefox
16 |
17 |
18 |
19 |
20 |
25 |
26 |
53 |
--------------------------------------------------------------------------------
/src/components/DaSwitch.vue:
--------------------------------------------------------------------------------
1 |
2 |
22 |
23 |
24 |
54 |
55 |
133 |
--------------------------------------------------------------------------------
/src/components/DaTerminal.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 | Chrome
9 |
10 |
14 |
15 | Firefox
16 |
17 |
3 |
4 |
5 |
6 |
7 |
12 |
24 |
25 |
26 |
49 |
90 |
140 |
--------------------------------------------------------------------------------
/src/components/DaToiletItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 | root@DailyNowLaptop:
9 |
11 |
13 |
17 |
23 | {{ time }}
16 | 17 |
18 |
20 |
21 |
5 | ![]()
8 |
9 |
28 | ![]()
73 |
74 |
75 |
76 |
236 |
243 |
428 |
--------------------------------------------------------------------------------
/src/fonts.js:
--------------------------------------------------------------------------------
1 | import './common/rIC';
2 |
3 | window.WebFontConfig = {
4 | custom: {
5 | families: ['DejaVuSansMono'],
6 | urls: ['https://storage.googleapis.com/devkit-assets/static/dejavue.css'],
7 | },
8 | };
9 |
10 | requestIdleCallback(() => {
11 | (function loadWebFont(d) {
12 | const wf = d.createElement('script');
13 | const s = d.scripts[0];
14 | wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
15 | wf.async = true;
16 | s.parentNode.insertBefore(wf, s);
17 | }(document));
18 | });
19 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import svgicon from 'vue-svgicon';
3 | import VueMasonry from 'vue-masonry-css';
4 | import VueVisible from 'vue-visible';
5 |
6 | import App from './App.vue';
7 | import router from './router';
8 | import store from './store';
9 | import './registerServiceWorker';
10 | import './fonts';
11 |
12 | Vue.config.productionTip = false;
13 |
14 |
15 | Vue.use(svgicon);
16 | Vue.use(VueMasonry);
17 | Vue.use(VueVisible);
18 |
19 | const setHeight = (el) => {
20 | // eslint-disable-next-line no-param-reassign
21 | el.style.height = `${window.innerHeight}px`;
22 | };
23 | const fitElements = [];
24 |
25 | window.addEventListener('resize', () => {
26 | fitElements.forEach(setHeight);
27 | });
28 |
29 | Vue.directive('fit-height', {
30 | bind: (el) => {
31 | setHeight(el);
32 | fitElements.push(el);
33 | },
34 |
35 | unbind: (el) => {
36 | fitElements.splice(fitElements.indexOf(el), 1);
37 | },
38 | });
39 |
40 | const limitString = maxLength => (value) => {
41 | if (value.length <= maxLength) {
42 | return value;
43 | }
44 |
45 | return `${value.substr(0, maxLength - 3)}...`;
46 | };
47 |
48 | Vue.filter('cardTitle', limitString(102));
49 | Vue.filter('toiletTitle', limitString(160));
50 |
51 | Vue.filter('provider', (value) => {
52 | if (value === 'github') {
53 | return 'GitHub';
54 | }
55 |
56 | return value.replace(/^\w/, c => c.toUpperCase());
57 | });
58 |
59 |
60 | new Vue({
61 | router,
62 | store,
63 | render: h => h(App),
64 | }).$mount('#app');
65 |
--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 |
3 | import { register } from 'register-service-worker';
4 |
5 | if (process.env.NODE_ENV === 'production') {
6 | register(`${process.env.BASE_URL}service-worker.js`, {
7 | ready() {
8 | console.log('App is being served from cache by a service worker.\n' +
9 | 'For more details, visit https://goo.gl/AFskqB');
10 | },
11 | cached() {
12 | console.log('Content has been cached for offline use.');
13 | },
14 | updated() {
15 | console.log('New content is available; please refresh.');
16 | },
17 | offline() {
18 | console.log('No internet connection found. App is running in offline mode.');
19 | },
20 | error(error) {
21 | console.error('Error during service worker registration:', error);
22 | },
23 | });
24 | }
25 |
--------------------------------------------------------------------------------
/src/router/guards/anonymous.js:
--------------------------------------------------------------------------------
1 | import router from '../';
2 | import store from '../../store';
3 |
4 | export default function (to, from, next) {
5 | if (store.getters['user/isLoggedIn']) {
6 | router.replace('/');
7 | } else {
8 | next();
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/router/guards/loadState.js:
--------------------------------------------------------------------------------
1 | import router from '../';
2 | import store from '../../store';
3 | import checkSupport from '../../common/support';
4 | import { getState } from '../../common/storage';
5 | import { init } from '../../common/analytics';
6 | import { applyTheme } from '../../common/theme';
7 |
8 | export default function (to, from, next) {
9 | if (to.name !== 'notSupported' && !checkSupport()) {
10 | return router.replace('/notSupported');
11 | }
12 |
13 | if (store.initialized) {
14 | return next();
15 | }
16 |
17 | return getState()
18 | .then((state) => {
19 | store.commit('loadFromCache', state);
20 |
21 | init(store.getters['user/isLoggedIn'] ? store.state.user.profile.id : null);
22 |
23 | applyTheme(store.state.ui.theme);
24 | next();
25 | });
26 | }
27 |
--------------------------------------------------------------------------------
/src/router/guards/loggedIn.js:
--------------------------------------------------------------------------------
1 | import router from '../';
2 | import store from '../../store';
3 |
4 | export default function (to, from, next) {
5 | store.dispatch('user/refreshToken')
6 | .then(() => {
7 | if (!store.getters['user/isLoggedIn']) {
8 | const url = to.path !== '/' ? `?from=${to.path}` : '';
9 | router.replace(`/login${url}`);
10 | } else {
11 | next();
12 | }
13 | });
14 | }
15 |
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Router from 'vue-router';
3 | import loadStateGuard from './guards/loadState';
4 |
5 | Vue.use(Router);
6 |
7 | const router = new Router({
8 | mode: 'history',
9 | base: process.env.BASE_URL,
10 | routes: [
11 | {
12 | path: '/',
13 | redirect: '/toilet',
14 | },
15 | {
16 | path: '/home',
17 | name: 'home',
18 | component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
19 | children: [
20 | {
21 | path: '/toilet',
22 | component: () => import(/* webpackChunkName: "toilet" */ '../views/Toilet.vue'),
23 | },
24 | ],
25 | },
26 | {
27 | path: '/login',
28 | name: 'login',
29 | component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue'),
30 | },
31 | {
32 | path: '/oauth/:provider/callback',
33 | name: 'oauth',
34 | component: () => import(/* webpackChunkName: "oauth" */ '../views/OAuth.vue'),
35 | },
36 | {
37 | path: '/notSupported',
38 | name: 'notSupported',
39 | component: () => import(/* webpackChunkName: "notSupported" */ '../views/NotSupported.vue'),
40 | },
41 | {
42 | path: '*',
43 | name: 'notFound',
44 | component: () => import(/* webpackChunkName: "notFound" */ '../views/NotFound.vue'),
45 | },
46 | ],
47 | });
48 |
49 | router.beforeEach(loadStateGuard);
50 |
51 | export default router;
52 |
--------------------------------------------------------------------------------
/src/store/README.md:
--------------------------------------------------------------------------------
1 | # STORE
2 |
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 |
5 | This directory contains your Vuex Store files.
6 | Vuex Store option is implemented in the Nuxt.js framework.
7 |
8 | Creating a file in this directory activate the option in the framework automatically.
9 |
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 |
--------------------------------------------------------------------------------
/src/store/feed.js:
--------------------------------------------------------------------------------
1 | import { fetchPublications, fetchBookmarks } from '../common/api';
2 |
3 | const initialState = () => ({
4 | publications: [],
5 | page: 0,
6 | latest: null,
7 | loading: false,
8 | bookmarks: null,
9 | showBookmarks: true,
10 | });
11 |
12 | const handleNewPage = (state, commit, suffix, posts) => {
13 | if (!state.page) {
14 | commit(`set${suffix}`, posts);
15 | } else {
16 | commit(`add${suffix}`, posts);
17 | }
18 |
19 | commit('setLoading', false);
20 |
21 | if (posts.length) {
22 | commit('setPage', state.page + 1);
23 | }
24 | };
25 |
26 | const fetchBookmarksFeed = (state, commit) =>
27 | fetchBookmarks(state.latest, state.page)
28 | .then((posts) => {
29 | const postsWithBookmarked = posts.map(p => Object.assign({}, p, { bookmarked: true }));
30 | handleNewPage(state, commit, 'Bookmarks', postsWithBookmarked);
31 | });
32 |
33 | export default {
34 | namespaced: true,
35 |
36 | state: initialState(),
37 |
38 | mutations: {
39 | reset(state) {
40 | const s = initialState();
41 | Object.keys(s).forEach((key) => {
42 | state[key] = s[key];
43 | });
44 | },
45 |
46 | setPublications(state, pubs) {
47 | state.publications = pubs;
48 | },
49 |
50 | setLatestTime(state, latest) {
51 | state.latest = latest;
52 | },
53 |
54 | setPage(state, page) {
55 | state.page = page;
56 | },
57 |
58 | setLoading(state, loading) {
59 | state.loading = loading;
60 | },
61 |
62 | setBookmarks(state, bookmarks) {
63 | // if (state.bookmarks && state.posts) {
64 | // state.bookmarks.forEach(bookmark => setPostBookmark(state, bookmark.id, false));
65 | // }
66 | state.bookmarks = bookmarks;
67 | // if (state.posts) {
68 | // state.bookmarks.forEach(bookmark => setPostBookmark(state, bookmark.id, true));
69 | // }
70 | },
71 |
72 | addBookmarks(state, bookmarks) {
73 | state.bookmarks = state.bookmarks.concat(bookmarks);
74 | },
75 |
76 | toggleBookmark(state, { id, bookmarked, post }) {
77 | if (!bookmarked) {
78 | const index = state.bookmarks.findIndex(bookmark => bookmark.id === id);
79 | state.bookmarks.splice(index, 1);
80 | } else {
81 | state.bookmarks.unshift(Object.assign({}, post, { bookmarked }));
82 | }
83 | },
84 | },
85 |
86 | actions: {
87 | fetchPublications({ commit }) {
88 | return fetchPublications()
89 | .then(pubs => commit('setPublications', pubs));
90 | },
91 |
92 | fetchNextPage({ commit, state, rootGetters }) {
93 | if (state.loading || (state.page >= 5 && !state.showBookmarks)) {
94 | return false;
95 | }
96 |
97 | if (!state.page) {
98 | commit('setLatestTime', new Date());
99 | }
100 | commit('setLoading', true);
101 |
102 | if (!rootGetters['user/isLoggedIn']) {
103 | // fetchAnonymousFeed(state, commit);
104 | } else if (state.showBookmarks) {
105 | fetchBookmarksFeed(state, commit);
106 | } else {
107 | // fetchUserFeed(state, commit, rootState.user.profile.accessToken);
108 | }
109 |
110 | return true;
111 | },
112 | },
113 | };
114 |
--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Vuex from 'vuex';
3 |
4 | import cache from './plugins/cache';
5 | import sync from './plugins/sync';
6 |
7 | import feed from './feed';
8 | import ui from './ui';
9 | import user from './user';
10 |
11 | Vue.use(Vuex);
12 |
13 | export default new Vuex.Store({
14 | state: {
15 | initialized: false,
16 | },
17 | mutations: {
18 | loadFromCache(state, cached) {
19 | if (cached) {
20 | Object.keys(cached).forEach((key) => {
21 | state[key] = Object.assign({}, state[key], cached[key]);
22 | });
23 | }
24 |
25 | state.initialized = true;
26 | },
27 | },
28 | plugins: [cache, sync],
29 | modules: { feed, ui, user },
30 | });
31 |
32 |
--------------------------------------------------------------------------------
/src/store/plugins/cache.js:
--------------------------------------------------------------------------------
1 | import { cacheState } from '../../common/storage';
2 |
3 | const plugin = (store) => {
4 | store.subscribe((mutation, state) => {
5 | if (mutation.type !== 'loadFromCache' && mutation.type.indexOf('reset') < 0) {
6 | cacheState(state)
7 | // eslint-disable-next-line no-console
8 | .catch(err => console.warn('failed to cache state', err));
9 | }
10 | });
11 | };
12 |
13 | export default plugin;
14 |
--------------------------------------------------------------------------------
/src/store/plugins/sync.js:
--------------------------------------------------------------------------------
1 | import '../../common/rIC';
2 | import { updateSettings, fetchSettings, addBookmarks, removeBookmark } from '../../common/api';
3 |
4 | let syncing = false;
5 |
6 | const syncSettingsFromServer = (store, state) => {
7 | if (store.getters['user/isLoggedIn']) {
8 | fetchSettings()
9 | .then((settings) => {
10 | syncing = true;
11 | if (settings.theme !== state.ui.theme) {
12 | store.dispatch('ui/setTheme', settings.theme);
13 | }
14 | store.commit('ui/setInsaneMode', settings.appInsaneMode);
15 | syncing = false;
16 | });
17 | }
18 | };
19 |
20 | const plugin = (store) => {
21 | store.subscribe((mutation, state) => {
22 | switch (mutation.type) {
23 | case 'loadFromCache':
24 | case 'user/updateProfile':
25 | requestIdleCallback(() => syncSettingsFromServer(store, state));
26 | break;
27 | case 'feed/toggleBookmark': {
28 | const { id, bookmarked } = mutation.payload;
29 | if (bookmarked) {
30 | addBookmarks([id]);
31 | } else {
32 | removeBookmark(id);
33 | }
34 | break;
35 | }
36 | case 'ui/setTheme':
37 | case 'ui/setInsaneMode':
38 | if (!syncing) {
39 | const settings = {
40 | theme: state.ui.theme,
41 | appInsaneMode: state.ui.insaneMode,
42 | };
43 | updateSettings(settings);
44 | }
45 | break;
46 | default:
47 | // Ignore default case
48 | }
49 | });
50 | };
51 |
52 | export default plugin;
53 |
--------------------------------------------------------------------------------
/src/store/ui.js:
--------------------------------------------------------------------------------
1 | import { applyTheme } from '../common/theme';
2 |
3 | const initialState = () => ({
4 | theme: 'darcula',
5 | insaneMode: true,
6 | });
7 |
8 | export default {
9 | namespaced: true,
10 | state: initialState(),
11 | mutations: {
12 | reset(state) {
13 | const s = initialState();
14 | Object.keys(s).forEach((key) => {
15 | state[key] = s[key];
16 | });
17 | },
18 |
19 | setTheme(state, theme) {
20 | state.theme = theme;
21 | },
22 |
23 | setInsaneMode(state, value) {
24 | state.insaneMode = value;
25 | },
26 | },
27 | actions: {
28 | setTheme({ commit }, theme) {
29 | applyTheme(theme);
30 | return commit('setTheme', theme);
31 | },
32 | },
33 | };
34 |
--------------------------------------------------------------------------------
/src/store/user.js:
--------------------------------------------------------------------------------
1 | import { logout, fetchUser } from '../common/api';
2 | import { deleteState } from '../common/storage';
3 |
4 | const initialState = () => ({ profile: null });
5 |
6 | export default {
7 | namespaced: true,
8 | state: initialState(),
9 | mutations: {
10 | reset(state) {
11 | const s = initialState();
12 | Object.keys(s).forEach((key) => {
13 | state[key] = s[key];
14 | });
15 | },
16 |
17 | updateProfile(state, profile) {
18 | state.profile = profile;
19 | },
20 |
21 | refreshToken(state, newToken) {
22 | state.profile = Object.assign({}, state.profile, newToken);
23 | },
24 |
25 | notNewUser(state) {
26 | state.profile.newUser = false;
27 | },
28 | },
29 | actions: {
30 | refreshToken({ commit }) {
31 | return fetchUser()
32 | .then((user) => {
33 | if ('providers' in user) {
34 | const userClone = Object.assign({}, user);
35 | userClone.accessToken = undefined;
36 | commit('updateProfile', userClone);
37 | } else {
38 | commit('updateProfile', null);
39 | }
40 | });
41 | },
42 | logout({ commit }) {
43 | commit('reset');
44 | commit('ui/reset', null, { root: true });
45 | commit('feed/reset', null, { root: true });
46 | return Promise.all([
47 | logout(),
48 | deleteState(),
49 | ]);
50 | },
51 | },
52 | getters: {
53 | isLoggedIn(state) {
54 | return !!state.profile && !!state.profile.id;
55 | },
56 | },
57 | };
58 |
--------------------------------------------------------------------------------
/src/styles/card.pcss:
--------------------------------------------------------------------------------
1 | .card {
2 | position: relative;
3 |
4 | &:before {
5 | content: ' ';
6 | display: block;
7 | width: 100%;
8 | padding-top: 108%;
9 | }
10 |
11 | &.small:before {
12 | padding-top: 96%;
13 | }
14 |
15 | &.large:before {
16 | padding-top: 119%;
17 | }
18 |
19 | & .post-link {
20 | position: absolute;
21 | left: 0;
22 | top: 0;
23 | width: 100%;
24 | height: 100%;
25 | justify-content: flex-end;
26 | text-decoration: none;
27 | outline: 0;
28 | }
29 |
30 | & .card-background {
31 | position: absolute;
32 | top: 0;
33 | left: 0;
34 | width: 100%;
35 | height: 58%;
36 | border-radius: 8px;
37 | overflow: hidden;
38 |
39 | & .async-img {
40 | width: 100%;
41 | height: 100%;
42 | }
43 | }
44 |
45 | &.large .card-background {
46 | height: 62%;
47 | }
48 |
49 | &.small {
50 | & .card-background,
51 | & .card-content {
52 | height: 53%;
53 | }
54 | }
55 |
56 | & .card-content {
57 | position: absolute;
58 | box-sizing: border-box;
59 | bottom: 0;
60 | left: 0;
61 | width: 100%;
62 | height: 47%;
63 | padding-bottom: 52px;
64 | z-index: 1;
65 | word-break: break-word;
66 | }
67 |
68 | & .card-content-background {
69 | position: absolute;
70 | left: 0;
71 | top: 0;
72 | width: 100%;
73 | height: 100%;
74 | background: var(--color-background-highlight);
75 | border-radius: var(--size-space);
76 | }
77 |
78 | & .card-content-background, & h3 {
79 | box-shadow: 0 var(--shadow-offset) 16px 0 rgba(0, 0, 0, 0.1);
80 | }
81 |
82 | & h3, & h4 {
83 | margin: 0;
84 | }
85 |
86 | & h3 {
87 | flex: 1;
88 | padding: calc(var(--size-space) * 2);
89 | color: var(--color-primary);
90 | z-index: 1;
91 | border-bottom: 1px solid var(--color-tile-border);
92 | box-sizing: border-box;
93 | }
94 |
95 | & h4 {
96 | color: var(--color-comment);
97 | font-style: italic;
98 | }
99 |
100 | & .card-footer {
101 | position: absolute;
102 | left: 0;
103 | bottom: 0;
104 | width: 100%;
105 | height: 52px;
106 | padding: 0 calc(var(--size-space) * 2);
107 | z-index: 1;
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/src/styles/custom.pcss:
--------------------------------------------------------------------------------
1 | @custom-media --mobile-m (min-width: 375px);
2 | @custom-media --tablet (min-width: 700px);
3 |
--------------------------------------------------------------------------------
/src/styles/global.pcss:
--------------------------------------------------------------------------------
1 | @import './reset.pcss';
2 | @import './layout.pcss';
3 | @import './typography.pcss';
4 | @import './custom.pcss';
5 |
6 | html {
7 | font-family: 'DejaVuSansMono', monospace, sans-serif;
8 | font-size: 16px;
9 | word-spacing: 1px;
10 | -ms-text-size-adjust: 100%;
11 | -webkit-text-size-adjust: 100%;
12 | -moz-osx-font-smoothing: grayscale;
13 | -webkit-font-smoothing: antialiased;
14 | box-sizing: border-box;
15 | background: var(--color-background);
16 |
17 | --color-background: #272727;
18 | --color-background-highlight: #393C3E;
19 | --color-light-shadow: #525252;
20 | --color-dark-shadow: #272727;
21 | --color-tile-border: #272727;
22 | --color-comment: #848886;
23 | --color-primary: #BFBEBE;
24 | --color-secondary: #66696C;
25 | --color-highlight: #4D96F1;
26 | --color-special1: #FDC769;
27 | --color-special2: #9DCB74;
28 | --color-special3: #D77E2B;
29 | --color-special4: #698C5A;
30 | --color-white: white;
31 | --color-white-trans: rgba(0, 0, 0, 0);
32 | --color-black: black;
33 |
34 | --shadow-offset: 8px;
35 |
36 | &.bright {
37 | --color-background: #EAEAEA;
38 | --color-background-highlight: #F8F8F8;
39 | --color-light-shadow: #CFCFCF;
40 | --color-dark-shadow: #CFCFCF;
41 | --color-tile-border: #F3F3F3;
42 | --color-comment: #AAAAAA;
43 | --color-primary: #848886;
44 | --color-secondary: #BFBEBE;
45 | --color-highlight: #4D96F1;
46 | --color-special1: #FDC769;
47 | --color-special2: #9DCB74;
48 | --color-special3: #DE7C20;
49 | --color-special4: #5F9F44;
50 | --color-white: black;
51 | --color-white-trans: rgba(255, 255, 255, 0);
52 | --color-black: white;
53 |
54 | --shadow-offset: 2px;
55 |
56 | background: var(--color-background);
57 | }
58 | }
59 |
60 | html.theme,
61 | html.theme * {
62 | transition: all 0.2s linear;
63 | }
64 |
65 | html.dialog-open body {
66 | overflow: hidden;
67 | }
68 |
69 | * {
70 | -webkit-tap-highlight-color: transparent;
71 | }
72 |
73 | *, *:before, *:after {
74 | box-sizing: border-box;
75 | margin: 0;
76 | }
77 |
78 | a {
79 | text-decoration: none;
80 | }
81 |
82 | button {
83 | padding: 0;
84 | cursor: pointer;
85 | background: none;
86 | border: none;
87 |
88 | &:focus {
89 | outline: none;
90 | }
91 |
92 | &::-moz-focus-inner {
93 | border: none;
94 | }
95 | }
96 |
97 | .flex {
98 | flex: 1;
99 | }
100 |
101 | .horizontal {
102 | display: flex;
103 | flex-direction: row;
104 | }
105 |
106 | .vertical {
107 | display: flex;
108 | flex-direction: column;
109 | }
110 |
111 | .align-center {
112 | align-items: center;
113 | }
114 |
115 | .justify-center {
116 | justify-content: center;
117 | }
118 |
119 | .primary {
120 | color: var(--color-primary);
121 | }
122 |
123 | .comment {
124 | color: var(--color-comment);
125 | }
126 |
127 | .special3 {
128 | color: var(--color-special3);
129 | }
130 |
131 | .special4 {
132 | color: var(--color-special4);
133 | }
134 |
135 | .svg-icon, .icon-selector {
136 | width: 24px;
137 | height: 24px;
138 | color: var(--color-comment);
139 | }
140 |
141 | .svg-fill {
142 | fill: currentColor;
143 | stroke: none;
144 | }
145 |
146 | .switch {
147 | --da-switch-color: var(--color-background);
148 | --da-switch-checked-color: var(--color-highlight);
149 | --da-switch-width: 56px;
150 | --da-switch-height: 28px;
151 | --da-switch-slider-height: 18px;
152 | }
153 |
154 | .dialog {
155 | position: fixed;
156 | bottom: 0;
157 | background: var(--color-background-highlight);
158 | border-radius: calc(var(--size-space) * 2) calc(var(--size-space) * 2) 0 0;
159 | box-shadow: 0 8px 32px 16px rgba(0, 0, 0, 0.32);
160 | }
161 |
162 | .dialog, .limit-width {
163 | left: 0;
164 | right: 0;
165 | max-width: 400px;
166 | margin: 0 auto;
167 | }
168 |
169 | .bookmark-illu {
170 | position: relative;
171 | width: 100%;
172 | max-height: 190px;
173 |
174 | & img {
175 | position: absolute;
176 | left: 0;
177 | top: 0;
178 | right: 0;
179 | bottom: 0;
180 | height: 100%;
181 | margin: auto;
182 | }
183 | }
184 |
185 | .dialog-container {
186 | position: fixed;
187 | left: 0;
188 | top: 0;
189 | right: 0;
190 | bottom: 0;
191 | overflow: hidden;
192 | z-index: 100;
193 |
194 | &:before {
195 | content: ' ';
196 | position: absolute;
197 | left: 0;
198 | top: 0;
199 | right: 0;
200 | bottom: 0;
201 | background: var(--color-background);
202 | opacity: 0.52;
203 | }
204 |
205 | & .dialog {
206 | width: 100%;
207 | max-height: 100vh;
208 | overflow: auto;
209 | }
210 | }
211 |
212 | .pixel {
213 | display: none;
214 | width: 0;
215 | height: 0;
216 | }
217 |
218 | .show-on-tablet {
219 | display: none;
220 | }
221 |
222 | @media (--tablet) {
223 | a, button {
224 | &:hover .svg-icon {
225 | color: var(--color-white);
226 | }
227 | }
228 |
229 | .hide-on-tablet {
230 | display: none;
231 | }
232 |
233 | .show-on-tablet {
234 | display: block;
235 | }
236 | }
237 |
--------------------------------------------------------------------------------
/src/styles/insane.pcss:
--------------------------------------------------------------------------------
1 | .insane-row {
2 | display: flex;
3 | padding: calc(var(--size-space) * 2);
4 | flex-direction: row;
5 | align-content: stretch;
6 | overflow: hidden;
7 | background: none;
8 | border-bottom: 1px solid var(--color-background);
9 |
10 | & > * {
11 | margin: 0 var(--size-space);
12 |
13 | &:first-child {
14 | margin-left: 0;
15 | }
16 |
17 | &:last-child {
18 | margin-right: 0;
19 | }
20 | }
21 |
22 | & .content {
23 | display: flex;
24 | flex-direction: column;
25 |
26 | & > * {
27 | margin: 5px 0;
28 |
29 | &:first-child {
30 | margin-top: 0;
31 | }
32 |
33 | &:last-child {
34 | margin-bottom: 0;
35 | }
36 | }
37 |
38 | & .publication .comment {
39 | font-style: italic;
40 | }
41 | }
42 |
43 | }
44 |
--------------------------------------------------------------------------------
/src/styles/layout.pcss:
--------------------------------------------------------------------------------
1 | html {
2 | --size-column: 64px;
3 | --size-space: 8px;
4 | --size-row: 16px;
5 | --size-gap: 16px;
6 | --size-footer: 75px;
7 | --size-lines: 36px;
8 | --size-pubs: 204px;
9 | }
10 |
--------------------------------------------------------------------------------
/src/styles/reset.pcss:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 |
27 | /* HTML5 display-role reset for older browsers */
28 | article, aside, details, figcaption, figure,
29 | footer, header, hgroup, menu, nav, section {
30 | display: block;
31 | }
32 |
33 | body {
34 | line-height: 1;
35 | }
36 |
37 | ol, ul {
38 | list-style: none;
39 | }
40 |
41 | blockquote, q {
42 | quotes: none;
43 | }
44 |
45 | blockquote:before, blockquote:after,
46 | q:before, q:after {
47 | content: '';
48 | content: none;
49 | }
50 |
51 | table {
52 | border-collapse: collapse;
53 | border-spacing: 0;
54 | }
55 |
--------------------------------------------------------------------------------
/src/styles/typography.pcss:
--------------------------------------------------------------------------------
1 | @import '../styles/custom.pcss';
2 |
3 | .common {
4 | font-family: 'DejaVuSansMono', monospace, sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 | }
8 |
9 | .caption {
10 | @extend .common;
11 |
12 | font-size: 12px;
13 | line-height: 16px;
14 | font-weight: 400;
15 | }
16 |
17 | .subtext {
18 | @extend .common;
19 |
20 | font-size: 14px;
21 | line-height: 20px;
22 | font-weight: 400;
23 | }
24 |
25 | .text {
26 | @extend .common;
27 |
28 | font-size: 16px;
29 | line-height: 20px;
30 | font-weight: 400;
31 | }
32 |
33 | .title {
34 | @extend .common;
35 |
36 | font-size: 18px;
37 | line-height: 24px;
38 | font-weight: 400;
39 | }
40 |
41 | .jumbo {
42 | @extend .common;
43 |
44 | font-size: 20px;
45 | line-height: 28px;
46 | font-weight: 400;
47 | }
48 |
49 | .massive {
50 | @extend .common;
51 |
52 | font-size: 24px;
53 | line-height: 28px;
54 | font-weight: 400;
55 | }
56 |
57 | .res-subtext {
58 | @extend .subtext;
59 | }
60 |
61 | @media (--mobile-m) {
62 | .res-subtext {
63 | @extend .title;
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
13 |
14 |
15 |
27 | {{ subheader }}
21 | 26 |
29 |
37 |
47 |
68 | {{ title | toiletTitle }}
38 | 46 |
3 |
4 |
76 |
79 |
104 |
105 |
106 |
231 |
232 |
236 |
237 |
406 |
--------------------------------------------------------------------------------
/src/views/Login.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
27 |
9 | 
13 | 
17 |
18 |
13 |
17 | 19 | Bookmark articles on Daily Go or on Daily browser extension and you'll see it here. 20 |
21 |
22 | Don't have Daily browser extensions yet?
23 | Make sure to get it here:
24 |
30 |
31 |
38 |
57 |
71 |
74 |
75 | /# {{ title }} #/
32 |
41 |
52 |
83 |
84 |
103 |
89 | 
92 |
102 |
92 | Congratulations!
93 |94 | Welcome to Daily Go! 95 | We value every member in our community and we trust you to use Daily Go responsibly.... 96 |
97 | 101 |
3 |
7 |
33 |
34 |
35 |
67 |
68 |
189 |
--------------------------------------------------------------------------------
/src/views/NotFound.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 | Daily Go is here!
11 |
12 | Sign in to start using Daily Go exclusively on your mobile and tablet.
13 | Getting the best curate dev news on the go was never so easy.
14 |
15 |
32 | 12 |
13 | 14 | * ./views/{{ page }} in 15 | ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["/home/shamun/Development/Projects/devkit/daily-app/node_modules/babel-preset-vue-app/dist/index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/index.vue 16 | 17 | 18 |
6 |
10 |
11 |
12 | yarn build
13 |
14 |
15 | Open http://localhost:3000
16 |
17 | 18 | nuxt:build [nuxt.config.js] changed +0ms
19 | nuxt:build Rebuilding the app... +0ms
20 | nuxt:pwa Adding icons +8ms
21 | nuxt:pwa Adding manifest +435ms
22 | 57% building modules 24 | 25 | 26 |
27 |
36 |
10 | 17 | 18 | nuxt:build [nuxt.config.js] changed +0ms
19 | nuxt:build Rebuilding the app... +0ms
20 | nuxt:pwa Adding icons +8ms
21 | nuxt:pwa Adding manifest +435ms
22 | 57% building modules 24 | 25 | 26 |
28 | 29 | Currently, Daily Now PWA supports only mobile devices. 30 | We are working hard to deliver a desktop version, in the meantime, you can download our browser extension. 31 | Stay tuned! 32 | 33 |
34 |
5 |
7 |
8 |
40 |
--------------------------------------------------------------------------------
/src/views/Toilet.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 |
57 |
58 |
59 |
441 |
442 |
449 |
450 |
534 |
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | devServer: {
3 | proxy: {
4 | '/api': {
5 | target: 'http://localhost:4000',
6 | changeOrigin: true,
7 | pathRewrite: {
8 | '^/api': '',
9 | },
10 | },
11 | },
12 | },
13 | productionSourceMap: false,
14 | pwa: {
15 | name: 'Daily Go',
16 | themeColor: '#393C3E',
17 | msTileColor: '#393C3E',
18 | iconPaths: {
19 | favicon32: 'img/icons/icon-32x32.png',
20 | favicon16: 'img/icons/icon-16x16.png',
21 | appleTouchIcon: 'img/icons/icon-152x152.png',
22 | msTileImage: 'img/icons/icon-144x144.png',
23 | },
24 | workboxOptions: {
25 | exclude: [/_redirects$/],
26 | runtimeCaching: [
27 | {
28 | // eslint-disable-next-line no-useless-escape
29 | urlPattern: new RegExp('^https:\/\/(storage\.googleapis\.com\/devkit-assets\/images|res\.cloudinary\.com\/daily-now\/image\/upload\/.*\/v1\/posts)\/.*'),
30 | method: 'GET',
31 | handler: 'cacheFirst',
32 | options: {
33 | cacheName: 'post-images',
34 | expiration: {
35 | // 7 days
36 | maxAgeSeconds: 604800,
37 | },
38 | },
39 | },
40 | {
41 | // eslint-disable-next-line no-useless-escape
42 | urlPattern: new RegExp('^https://(storage\.googleapis\.com\/devkit-assets\/ads|res\.cloudinary\.com/daily-now/image/upload/.*/v1/ads)/.*'),
43 | method: 'GET',
44 | handler: 'cacheFirst',
45 | options: {
46 | cacheName: 'ads-images',
47 | expiration: {
48 | // 7 days
49 | maxAgeSeconds: 604800,
50 | },
51 | },
52 | },
53 | {
54 | // eslint-disable-next-line no-useless-escape
55 | urlPattern: new RegExp('^https://res\.cloudinary\.com/daily-now/image/upload/.*/v1/logos/.*'),
56 | method: 'GET',
57 | handler: 'cacheFirst',
58 | options: {
59 | cacheName: 'pubs-logos',
60 | },
61 | },
62 | {
63 | urlPattern: 'https://www.google-analytics.com/analytics.js',
64 | handler: 'cacheFirst',
65 | },
66 | {
67 | urlPattern: new RegExp('https://ajax.googleapis.com/ajax/libs/webfont/.*'),
68 | method: 'GET',
69 | handler: 'cacheFirst',
70 | },
71 | {
72 | urlPattern: new RegExp('https://storage.googleapis.com/devkit-assets/static/.*'),
73 | method: 'GET',
74 | handler: 'cacheFirst',
75 | },
76 | {
77 | urlPattern: '/',
78 | method: 'GET',
79 | handler: 'networkFirst',
80 | },
81 | {
82 | urlPattern: new RegExp('^/(home|toilet|login|oauth|notSupported).*'),
83 | method: 'GET',
84 | handler: 'networkFirst',
85 | },
86 | ],
87 | },
88 | },
89 | };
90 |
--------------------------------------------------------------------------------
11 |
56 |
16 |
55 |
47 |
54 | Enjoy!
48 |
51 | 🤓
52 |
53 |