Giter Club home page Giter Club logo

blog's Introduction

Goals

[ ๐Ÿ“ˆ ] Simple CMS workspace to create content ๐Ÿ‘Œ
[ ๐Ÿ“ˆ ] Push to deploy & deploy on CMS update  ๐Ÿ’ธ
[ ๐Ÿ“ˆ ] Re-usable web component library

Roadmap

[ 4/1/18 ] Base Contentful React Components

Control UI with CMS

[ 4/1/18 ] Open Source

All secrets are removed and be-ez/blog is made public

[ 4/15/18 ] Live Photo

Single/Grid view Live Photo

[ 5/1/18 ] MDX

Possible to write posts in MDX with either React of Vue

Features

[ โœ… ] Contentful CMS
    [ โœ… ] Fluid Images
    [ โœ… ] Blog Posts
    [ โœ… ] Card
    [ โœ… ] Generic Content
    [ โœ… ] Views
    [ โœ… ] Subviews
    [ โœ… ] Nav
    [ โœ… ] iOS Live Photos
    [ โœ… ] Rich Text
        [ โœ… ] Images
        [ โœ… ] Formatting (Bold, Header Pagebreak etc.) 
        [ โœ… ] Video
        [ โŒ ] Fluid Images in Rich Text
    [ โœ… ] Sub-View Templates
        [ โœ… ] Generic
        [ โœ… ] Blog
        [ โœ… ] Card
    [ โœ… ] Mobile
        [ โœ… ] Breakpoints
        [ โœ… ] Flexbox Grid in base layout
    [ โœ… ] Customize Layouts in View
        [ โœ… ] None
        [ โŒ ] Grid
        [ โŒ ] Lists
        [ โœ… ] Masonary
[ โœ… ] Continuous Deployment
    [ โœ… ] Dokku push
    [ โœ… ] Contentful Change
    [ โœ… ] Contentful Dev Site
    [ โŒ ] gh-pages
    [ โŒ ] gitlab pipelines
[ โœ… ] Support MDX and/or Vue โšก๏ธ
    [ โœ… ] via .mdx files
    [ โŒ ] via contentful Rich Text
[ โŒ ] Analtyics page๐Ÿ”†
    [โŒ] Words per week ๐Ÿ’ฏ
    [โŒ] SVG Graph plugin
    [โŒ] Wakatime stats
[ โŒ ] Graphs via project analytics ๐Ÿ“ˆ

Dev

Run Development Server yarn dev

Live Reload @ http://localhost:8000/ GraphiQL @ http://localhost:8000/___graphql

Occationally when the content model changes it is helpful to remove the Gatsby cache rm -rf .cache

Dependencies

yarn

Dev Server

yarn develop

Deployment

Dokku

Must be configured with dokku git remote add dokku xn--4qe.com:contentful Deploy with git git push dokku master

Local Build

yarn build

blog's People

Contributors

be-ez avatar

blog's Issues

Google Analytics looks broken?

Is there an automatic way to have it deployed in each domain?

  • Confirmed working with traffic in graphs
  • Domain list in repo?

MDX Component.

Setup Renderer to allow mdx component in page views. (Wrapped in Card?)

Separate any secrets from repo

Use KMS or Infra as code to separate these.

Outcome: Repo has nothing secret and infra code defines simple way of adding secrets to project. (Probably from Google KMS)

Include MDX

The goal of this project is to have a place to store view and comment on react/vue work

Tags in Contentful

Tags should link to a tag page with all posts for that particular tag.

Fluid Images in Rich Text

Problem: Images load full scale in Rich Text.

ie: user puts 10mb image in Rich Text via contentful. It's all rendered to the RichText.

Elsewhere in the app we have Gatsby img and fluid images. One sets up svg tracing and the other sizing and/or sampling features.

Key Outcome: Images in RichText do not load full size or Gatby img / fluid images working.

Risk: It may not be possible directly, these may need to be pulled into the local graphql space on build.

Next Steps: I think building the live images via Apple will be more interesting with a nicer final product. Extending Gatsby image to work with live images should make this project simple in comparison.

Wharf clone private repo fails.

Wharf clone private repo fails.

Wharf: task log for blog
Deploying blog
Task id: 9c3123f1-b36c-4ad0-992d-c919cbc96227
Task state: FAILURE
== Cloning ==
Cloning into '/app/repos/blog'...
fatal: could not read Username for 'https://github.com': No such device or address
Traceback (most recent call last):
  File "/usr/local/lib/python3.7/site-packages/celery/app/trace.py", line 375, in trace_task
    R = retval = fun(*args, **kwargs)
  File "/usr/local/lib/python3.7/site-packages/celery/app/trace.py", line 632, in __protected_call__
    return self.run(*args, **kwargs)
  File "/app/wharf/tasks.py", line 125, in deploy
    run_process(key, ["git", "clone", git_url, app_repo_path])
  File "/app/wharf/tasks.py", line 111, in run_process
    raise Exception
Exception

Purge CND Cache on rebuild / deploy

Right now when you update contentful it takes the ttl for the cache to expire.

It's possible to simply purge the whole cache on upload. It's also possible to purge only the files that changed.

  • Purge CND on upload

Search repo for secrets

Possible secrets exposure in this repo over the history of the git.

Let's find and squash any secrets.

Outcome: No secrets in repp

Commento OAuth providers

Looks like at least google is available a provider.

  • Look into OAuth providers
  • Add to roadmap / feature planning / release

Commento infrastrucure as code

Commento was tricky to get working in dokku.

Need infra as code to deploy / configure apps as arbitrary docker files and dokku config logic.

Maybe this means a mono-repo for all the dokku apps. The blog becomes a part of the mono repo and then the subtree gets pushed to github regularly.

monorepo / app1 -> Deploy.sh ( git clone, git remote dokku, git push)
/ app2 -> Sync_to_subtree ( git checkout git subtree -branch git push to subtree host)

CMS List Layout Strategies

  • cardOptions(Size / Brief Description vs inner)
  • cardLayout / card container ( How many cards to show)
  • would be nice to have a cardLayout selection as a user. Cycle through different card sizes and layouts.
  • Plan out sorting / filtering with both search and tags.

Layout and View Custom Templating

Lets add some simple / small view library to manage the layout and typography.

Outcome:

  • Tickets written for future templating (possible milestones)
  • Simple view cms layer implemented to compose components from contetntul

Sub view for Card

Create renderer for standalone ContentfulCard components via cms-view or cms-view-default.js

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.